Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@spark-ui/form-field

Package Overview
Dependencies
Maintainers
7
Versions
142
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spark-ui/form-field - npm Package Compare versions

Comparing version 1.3.10 to 1.3.11

6

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log

## [1.3.11](https://github.com/adevinta/spark/compare/@spark-ui/form-field@1.3.10...@spark-ui/form-field@1.3.11) (2023-09-15)
### Bug Fixes
- **form-field:** improved render of CharactersCount value ([9a3ef56](https://github.com/adevinta/spark/commit/9a3ef561a35aba20ca07f8d11257138c7b24bf4c))
## [1.3.10](https://github.com/adevinta/spark/compare/@spark-ui/form-field@1.3.9...@spark-ui/form-field@1.3.10) (2023-09-14)

@@ -8,0 +14,0 @@

2

dist/index.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),y=require("@radix-ui/react-id"),S=require("@spark-ui/slot"),u=require("class-variance-authority"),O=require("@spark-ui/label"),b=e.createContext(null),R=()=>{const a=e.useContext(b);if(!a)throw Error("useFormField must be used within a FormField provider");return a},L=({id:a,name:r,disabled:s=!1,readOnly:l=!1,state:t,isRequired:o,children:i})=>{const d=y.useId(),[n,m]=e.useState([]),c=n.length>0?n.join(" "):void 0,p=e.useCallback(g=>{m(N=>[...N,g])},[]),w=e.useCallback(g=>{m(N=>N.filter(P=>P!==g))},[]),H=e.useMemo(()=>({id:a,labelId:d,name:r,disabled:s,readOnly:l,state:t,isRequired:o,isInvalid:t==="error",description:c,onMessageIdAdd:p,onMessageIdRemove:w}),[a,d,r,s,l,c,t,o,p,w]);return e.createElement(b.Provider,{value:H},i)};L.displayName="FormFieldProvider";const A=e.forwardRef(({className:a,disabled:r=!1,readOnly:s=!1,name:l,state:t,isRequired:o=!1,asChild:i=!1,...d},n)=>{const m=y.useId(),c=i?S.Slot:"div";return e.createElement(L,{id:m,name:l,isRequired:o,disabled:r,readOnly:s,state:t},e.createElement(c,{ref:n,"data-spark-component":"form-field",className:u.cx(a,"flex flex-col gap-sm"),...d}))});A.displayName="FormField";const M=e.forwardRef(({id:a,className:r,...s},l)=>{const{onMessageIdAdd:t,onMessageIdRemove:o}=R(),i=y.useId(),d=a||i;return e.useEffect(()=>(t(d),()=>{o(d)}),[d,t,o]),e.createElement("span",{ref:l,id:d,"data-spark-component":"form-field-message",className:u.cx(r,"text-caption"),...s})});M.displayName="FormField.Message";const T=u.cva([],{variants:{state:{alert:["text-alert"],error:["text-error"],success:["text-success"]}}}),f=e.forwardRef(({className:a,state:r,...s},l)=>R().state!==r?null:e.createElement(M,{ref:l,"data-spark-component":"form-field-state-message","aria-live":"polite",className:T({className:a,state:r}),...s}));f.displayName="FormField.StateMessage";const x=e.forwardRef((a,r)=>e.createElement(f,{ref:r,"data-spark-component":"form-field-alert-message",state:"alert",...a}));x.displayName="FormField.AlertMessage";const E=e.forwardRef(({className:a,value:r="",maxLength:s,...l},t)=>{const o=r.length;return e.createElement("span",{ref:t,"data-spark-component":"form-field-characters-count",className:u.cx(a,"text-caption","text-neutral"),...l},o,"/",s)});E.displayName="FormField.CharactersCount";const j=()=>{const{id:a,name:r,description:s,disabled:l,readOnly:t,state:o,labelId:i,isInvalid:d,isRequired:n}=e.useContext(b)||{};return{id:a,name:r,description:s,disabled:l,readOnly:t,state:o,labelId:i,isInvalid:d,isRequired:n}},v=({children:a})=>{const r=j();return e.createElement(e.Fragment,null,a(r))};v.displayName="FormField.Control";const I=e.forwardRef((a,r)=>e.createElement(f,{ref:r,"data-spark-component":"form-field-error-message",state:"error",...a}));I.displayName="FormField.ErrorMessage";const h=e.forwardRef(({className:a,...r},s)=>e.createElement(M,{ref:s,"data-spark-component":"form-field-helper-message",className:u.cx("text-on-surface/dim-1",a),...r}));h.displayName="FormField.HelperMessage";const F=e.forwardRef((a,r)=>e.createElement(O.Label.RequiredIndicator,{ref:r,...a}));F.displayName="FormField.RequiredIndicator";const C=e.forwardRef(({htmlFor:a,className:r,children:s,requiredIndicator:l=e.createElement(F,null),asChild:t,...o},i)=>{const d=R(),{disabled:n,labelId:m,isRequired:c}=d,p=t?void 0:a||d.id;return e.createElement(O.Label,{ref:i,id:m,"data-spark-component":"form-field-label",htmlFor:p,className:u.cx(r,"flex items-center gap-sm",n?"pointer-events-none text-on-surface/dim-3":void 0),asChild:t,...o},e.createElement(S.Slottable,null,s),c&&l)});C.displayName="FormField.Label";const q=e.forwardRef((a,r)=>e.createElement(f,{ref:r,"data-spark-component":"form-field-success-message",state:"success",...a}));q.displayName="FormField.SuccessMessage";const k=Object.assign(A,{Label:C,Control:v,StateMessage:f,SuccessMessage:q,AlertMessage:x,ErrorMessage:I,HelperMessage:h,RequiredIndicator:F,CharactersCount:E});k.displayName="FormField",C.displayName="FormField.Label",v.displayName="FormField.Control",f.displayName="FormField.StateMessage",q.displayName="FormField.SuccessMessage",x.displayName="FormField.AlertMessage",I.displayName="FormField.ErrorMessage",h.displayName="FormField.HelperMessage",F.displayName="FormField.RequiredIndicator",E.displayName="FormField.CharactersCount",exports.FormField=k,exports.useFormFieldControl=j;
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),y=require("@radix-ui/react-id"),S=require("@spark-ui/slot"),u=require("class-variance-authority"),O=require("@spark-ui/label"),b=e.createContext(null),R=()=>{const a=e.useContext(b);if(!a)throw Error("useFormField must be used within a FormField provider");return a},L=({id:a,name:r,disabled:s=!1,readOnly:l=!1,state:t,isRequired:o,children:i})=>{const d=y.useId(),[n,m]=e.useState([]),c=n.length>0?n.join(" "):void 0,p=e.useCallback(g=>{m(N=>[...N,g])},[]),w=e.useCallback(g=>{m(N=>N.filter(P=>P!==g))},[]),H=e.useMemo(()=>({id:a,labelId:d,name:r,disabled:s,readOnly:l,state:t,isRequired:o,isInvalid:t==="error",description:c,onMessageIdAdd:p,onMessageIdRemove:w}),[a,d,r,s,l,c,t,o,p,w]);return e.createElement(b.Provider,{value:H},i)};L.displayName="FormFieldProvider";const A=e.forwardRef(({className:a,disabled:r=!1,readOnly:s=!1,name:l,state:t,isRequired:o=!1,asChild:i=!1,...d},n)=>{const m=y.useId(),c=i?S.Slot:"div";return e.createElement(L,{id:m,name:l,isRequired:o,disabled:r,readOnly:s,state:t},e.createElement(c,{ref:n,"data-spark-component":"form-field",className:u.cx(a,"flex flex-col gap-sm"),...d}))});A.displayName="FormField";const M=e.forwardRef(({id:a,className:r,...s},l)=>{const{onMessageIdAdd:t,onMessageIdRemove:o}=R(),i=y.useId(),d=a||i;return e.useEffect(()=>(t(d),()=>{o(d)}),[d,t,o]),e.createElement("span",{ref:l,id:d,"data-spark-component":"form-field-message",className:u.cx(r,"text-caption"),...s})});M.displayName="FormField.Message";const $=u.cva([],{variants:{state:{alert:["text-alert"],error:["text-error"],success:["text-success"]}}}),f=e.forwardRef(({className:a,state:r,...s},l)=>R().state!==r?null:e.createElement(M,{ref:l,"data-spark-component":"form-field-state-message","aria-live":"polite",className:$({className:a,state:r}),...s}));f.displayName="FormField.StateMessage";const x=e.forwardRef((a,r)=>e.createElement(f,{ref:r,"data-spark-component":"form-field-alert-message",state:"alert",...a}));x.displayName="FormField.AlertMessage";const E=e.forwardRef(({className:a,value:r="",maxLength:s,...l},t)=>{const o=`${r.length}/${s}`;return e.createElement("span",{ref:t,"data-spark-component":"form-field-characters-count",className:u.cx(a,"text-caption","text-neutral"),...l},o)});E.displayName="FormField.CharactersCount";const j=()=>{const{id:a,name:r,description:s,disabled:l,readOnly:t,state:o,labelId:i,isInvalid:d,isRequired:n}=e.useContext(b)||{};return{id:a,name:r,description:s,disabled:l,readOnly:t,state:o,labelId:i,isInvalid:d,isRequired:n}},v=({children:a})=>{const r=j();return e.createElement(e.Fragment,null,a(r))};v.displayName="FormField.Control";const I=e.forwardRef((a,r)=>e.createElement(f,{ref:r,"data-spark-component":"form-field-error-message",state:"error",...a}));I.displayName="FormField.ErrorMessage";const h=e.forwardRef(({className:a,...r},s)=>e.createElement(M,{ref:s,"data-spark-component":"form-field-helper-message",className:u.cx("text-on-surface/dim-1",a),...r}));h.displayName="FormField.HelperMessage";const F=e.forwardRef((a,r)=>e.createElement(O.Label.RequiredIndicator,{ref:r,...a}));F.displayName="FormField.RequiredIndicator";const C=e.forwardRef(({htmlFor:a,className:r,children:s,requiredIndicator:l=e.createElement(F,null),asChild:t,...o},i)=>{const d=R(),{disabled:n,labelId:m,isRequired:c}=d,p=t?void 0:a||d.id;return e.createElement(O.Label,{ref:i,id:m,"data-spark-component":"form-field-label",htmlFor:p,className:u.cx(r,"flex items-center gap-sm",n?"pointer-events-none text-on-surface/dim-3":void 0),asChild:t,...o},e.createElement(S.Slottable,null,s),c&&l)});C.displayName="FormField.Label";const q=e.forwardRef((a,r)=>e.createElement(f,{ref:r,"data-spark-component":"form-field-success-message",state:"success",...a}));q.displayName="FormField.SuccessMessage";const k=Object.assign(A,{Label:C,Control:v,StateMessage:f,SuccessMessage:q,AlertMessage:x,ErrorMessage:I,HelperMessage:h,RequiredIndicator:F,CharactersCount:E});k.displayName="FormField",C.displayName="FormField.Label",v.displayName="FormField.Control",f.displayName="FormField.StateMessage",q.displayName="FormField.SuccessMessage",x.displayName="FormField.AlertMessage",I.displayName="FormField.ErrorMessage",h.displayName="FormField.HelperMessage",F.displayName="FormField.RequiredIndicator",E.displayName="FormField.CharactersCount",exports.FormField=k,exports.useFormFieldControl=j;
{
"name": "@spark-ui/form-field",
"version": "1.3.10",
"version": "1.3.11",
"description": "Provide context to your form elements",

@@ -52,3 +52,3 @@ "publishConfig": {

},
"gitHead": "318dcc9d11ad26f351ab7f7f8f78bbfad06a4d25"
"gitHead": "89accad9dda0d05b561489cae24f200e05432159"
}

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc