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

Comparing version 9.4.2 to 9.4.3

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [9.4.3](https://github.com/leboncoin/spark-web/compare/v9.4.2...v9.4.3) (2025-03-18)
+
+**Note:** Version bump only for package @spark-ui/form-field
+
 ## [9.4.2](https://github.com/leboncoin/spark-web/compare/v9.4.1...v9.4.2) (2025-03-18)
@@ -8,0 +12,0 @@

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),O=require("@spark-ui/slot"),m=require("class-variance-authority"),N=require("@spark-ui/icon"),$=require("@spark-ui/label"),v=a.createContext(null),y=":form-field",E=()=>{const e=a.useContext(v);if(!e)throw Error("useFormField must be used within a FormField provider");return e},L=({id:e,name:t,disabled:r=!1,readOnly:s=!1,state:l,isRequired:n,children:d})=>{const i=`${y}-label-${a.useId()}`,[o,c]=a.useState([]),u=o.length>0?o.join(" "):void 0,f=a.useCallback(g=>{c(h=>[...h,g])},[]),S=a.useCallback(g=>{c(h=>h.filter(z=>z!==g))},[]),j=a.useMemo(()=>({id:e,labelId:i,name:t,disabled:r,readOnly:s,state:l,isRequired:n,isInvalid:l==="error",description:u,onMessageIdAdd:f,onMessageIdRemove:S}),[e,i,t,r,s,u,l,n,f,S]);return a.createElement(v.Provider,{value:j},d)};L.displayName="FormFieldProvider";const Z=({className:e,disabled:t=!1,readOnly:r=!1,name:s,state:l,isRequired:n=!1,asChild:d=!1,ref:i,...o})=>{const c=`${y}-${a.useId()}`,u=d?O.Slot:"div";return a.createElement(L,{id:c,name:s,isRequired:n,disabled:t,readOnly:r,state:l},a.createElement(u,{ref:i,"data-spark-component":"form-field",className:m.cx(e,"flex flex-col gap-sm"),...o}))};Z.displayName="FormField";const A=({title:e,fill:t="currentColor",stroke:r="none",ref:s,...l})=>a.createElement("svg",{ref:s,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","data-title":"AlertOutline",...e&&{"data-title":e},fill:t,stroke:r,...l,dangerouslySetInnerHTML:{__html:(e===void 0?"":`<title>${e}</title>`)+'<path d="m12,7.13c-.58,0-1.05.47-1.05,1.05v4.82c0,.58.47,1.05,1.05,1.05s1.05-.47,1.05-1.05v-4.82c0-.58-.47-1.05-1.05-1.05Zm0,7.95c-.8,0-1.45.65-1.45,1.45s.65,1.45,1.45,1.45,1.45-.65,1.45-1.45-.65-1.45-1.45-1.45Z"/><path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2Zm-7.89,10c0-4.36,3.53-7.89,7.89-7.89s7.89,3.53,7.89,7.89-3.53,7.89-7.89,7.89-7.89-3.53-7.89-7.89Z"/>'}});A.displayName="AlertOutline";const H=({title:e,fill:t="currentColor",stroke:r="none",ref:s,...l})=>a.createElement("svg",{ref:s,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","data-title":"Check",...e&&{"data-title":e},fill:t,stroke:r,...l,dangerouslySetInnerHTML:{__html:(e===void 0?"":`<title>${e}</title>`)+'<path d="m8.92,19.08c-.18,0-.36-.03-.53-.1s-.33-.17-.47-.31l-5.49-5.34c-.28-.28-.42-.61-.42-1s.14-.73.42-1c.28-.28.62-.41,1.02-.41s.74.14,1.05.41l4.43,4.3,10.62-10.29c.28-.28.62-.42,1.02-.43.39,0,.73.13,1.02.43.28.28.42.61.42,1s-.14.73-.42,1l-11.65,11.32c-.14.14-.3.24-.47.31-.17.07-.35.1-.53.1Z"/>'}});H.displayName="Check";const _=({title:e,fill:t="currentColor",stroke:r="none",ref:s,...l})=>a.createElement("svg",{ref:s,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","data-title":"WarningOutline",...e&&{"data-title":e},fill:t,stroke:r,...l,dangerouslySetInnerHTML:{__html:(e===void 0?"":`<title>${e}</title>`)+'<path fill-rule="evenodd" d="m12,8.23c.55,0,1,.45,1,1v4.58c0,.55-.45,1-1,1s-1-.45-1-1v-4.58c0-.55.45-1,1-1Z"/><path d="m12,18.06c.69,0,1.25-.56,1.25-1.25s-.56-1.25-1.25-1.25-1.25.56-1.25,1.25.56,1.25,1.25,1.25Z"/><path fill-rule="evenodd" d="m10.76,2.35c.37-.23.8-.35,1.24-.35s.87.12,1.24.35c.37.23.68.56.88.95h0s7.62,15.24,7.62,15.24h0c.18.36.27.77.25,1.17-.02.41-.14.8-.35,1.15-.21.35-.51.63-.86.83-.35.2-.75.3-1.16.31H4.38c-.41,0-.81-.11-1.16-.31-.35-.2-.65-.49-.86-.83-.21-.35-.33-.74-.35-1.15-.02-.41.07-.81.25-1.17h0S9.88,3.3,9.88,3.3c.2-.39.5-.72.88-.95Zm1.24,1.65c-.07,0-.14.02-.2.06-.06.04-.11.09-.14.15l-7.62,15.23h0c-.03.06-.04.13-.04.19,0,.07.02.13.06.19.03.06.08.1.14.13.06.03.12.05.19.05h15.23c.07,0,.13-.02.19-.05.06-.03.11-.08.14-.13.03-.06.05-.12.06-.19,0-.07-.01-.13-.04-.19h0s-7.62-15.23-7.62-15.23c-.03-.06-.08-.11-.14-.15-.06-.04-.13-.06-.2-.06Z"/>'}});_.displayName="WarningOutline";const x=({id:e,className:t,ref:r,...s})=>{const{onMessageIdAdd:l,onMessageIdRemove:n}=E(),d=`${y}-message-${a.useId()}`,i=e||d;return a.useEffect(()=>(l(i),()=>{n(i)}),[i,l,n]),a.createElement("span",{ref:r,id:i,"data-spark-component":"form-field-message",className:m.cx(t,"text-caption"),...s})};x.displayName="FormField.Message";const p=({className:e,state:t,children:r,ref:s,...l})=>E().state!==t?null:a.createElement(x,{ref:s,"data-spark-component":"form-field-state-message","aria-live":"polite",className:m.cx("flex items-center gap-sm",t==="error"?"text-error":"text-on-surface/dim-1",e),...l},t==="alert"&&a.createElement(N.Icon,{size:"sm"},a.createElement(_,null)),t==="error"&&a.createElement(N.Icon,{size:"sm",intent:"error"},a.createElement(A,null)),t==="success"&&a.createElement(N.Icon,{size:"sm"},a.createElement(H,null)),r);p.displayName="FormField.StateMessage";const b=({ref:e,...t})=>a.createElement(p,{ref:e,"data-spark-component":"form-field-alert-message",state:"alert",...t});b.displayName="FormField.AlertMessage";const I=({className:e,value:t="",maxLength:r,ref:s,...l})=>{const n=`${t.length}/${r}`;return a.createElement("span",{ref:s,"data-spark-component":"form-field-characters-count",className:m.cx(e,"text-caption","text-neutral"),...l},n)};I.displayName="FormField.CharactersCount";const T=()=>{const{id:e,name:t,description:r,disabled:s,readOnly:l,state:n,labelId:d,isInvalid:i,isRequired:o}=a.useContext(v)||{};return{id:e,name:t,description:r,disabled:s,readOnly:l,state:n,labelId:d,isInvalid:i,isRequired:o}},M=({children:e})=>{const t=T();return a.createElement(a.Fragment,null,e(t))};M.displayName="FormField.Control";const C=({ref:e,...t})=>a.createElement(p,{ref:e,"data-spark-component":"form-field-error-message",state:"error",...t});C.displayName="FormField.ErrorMessage";const k=({className:e,ref:t,...r})=>a.createElement(x,{ref:t,"data-spark-component":"form-field-helper-message",className:m.cx("text-on-surface/dim-1",e),...r});k.displayName="FormField.HelperMessage";const F=({className:e,ref:t,...r})=>a.createElement($.Label.RequiredIndicator,{ref:t,className:m.cx("ml-sm",e),...r});F.displayName="FormField.RequiredIndicator";const q=({htmlFor:e,className:t,children:r,requiredIndicator:s=a.createElement(F,null),asChild:l,ref:n,...d})=>{const i=E(),{disabled:o,labelId:c,isRequired:u}=i,f=l?void 0:e||i.id;return a.createElement($.Label,{ref:n,id:c,"data-spark-component":"form-field-label",htmlFor:f,className:m.cx(t,o?"pointer-events-none text-on-surface/dim-3":void 0),asChild:l,...d},a.createElement(a.Fragment,null,a.createElement(O.Slottable,null,r),u&&s))};q.displayName="FormField.Label";const w=({ref:e,...t})=>a.createElement(p,{ref:e,"data-spark-component":"form-field-success-message",state:"success",...t});w.displayName="FormField.SuccessMessage";const R=Object.assign(Z,{Label:q,Control:M,StateMessage:p,SuccessMessage:w,AlertMessage:b,ErrorMessage:C,HelperMessage:k,RequiredIndicator:F,CharactersCount:I});R.displayName="FormField",q.displayName="FormField.Label",M.displayName="FormField.Control",p.displayName="FormField.StateMessage",w.displayName="FormField.SuccessMessage",b.displayName="FormField.AlertMessage",C.displayName="FormField.ErrorMessage",k.displayName="FormField.HelperMessage",F.displayName="FormField.RequiredIndicator",I.displayName="FormField.CharactersCount",exports.FormField=R,exports.useFormFieldControl=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),O=require("@spark-ui/slot"),m=require("class-variance-authority"),N=require("@spark-ui/icon"),$=require("@spark-ui/label"),v=a.createContext(null),y=":form-field",E=()=>{const e=a.useContext(v);if(!e)throw Error("useFormField must be used within a FormField provider");return e},L=({id:e,name:t,disabled:r=!1,readOnly:s=!1,state:l,isRequired:n,children:d})=>{const i=`${y}-label-${a.useId()}`,[o,c]=a.useState([]),u=o.length>0?o.join(" "):void 0,f=a.useCallback(g=>{c(h=>[...h,g])},[]),S=a.useCallback(g=>{c(h=>h.filter(z=>z!==g))},[]),j=a.useMemo(()=>({id:e,labelId:i,name:t,disabled:r,readOnly:s,state:l,isRequired:n,isInvalid:l==="error",description:u,onMessageIdAdd:f,onMessageIdRemove:S}),[e,i,t,r,s,u,l,n,f,S]);return a.createElement(v.Provider,{value:j},d)};L.displayName="FormFieldProvider";const Z=({className:e,disabled:t=!1,readOnly:r=!1,name:s,state:l,isRequired:n=!1,asChild:d=!1,ref:i,...o})=>{const c=`${y}-${a.useId()}`,u=d?O.Slot:"div";return a.createElement(L,{id:c,name:s,isRequired:n,disabled:t,readOnly:r,state:l},a.createElement(u,{ref:i,"data-spark-component":"form-field",className:m.cx(e,"gap-sm flex flex-col"),...o}))};Z.displayName="FormField";const A=({title:e,fill:t="currentColor",stroke:r="none",ref:s,...l})=>a.createElement("svg",{ref:s,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","data-title":"AlertOutline",...e&&{"data-title":e},fill:t,stroke:r,...l,dangerouslySetInnerHTML:{__html:(e===void 0?"":`<title>${e}</title>`)+'<path d="m12,7.13c-.58,0-1.05.47-1.05,1.05v4.82c0,.58.47,1.05,1.05,1.05s1.05-.47,1.05-1.05v-4.82c0-.58-.47-1.05-1.05-1.05Zm0,7.95c-.8,0-1.45.65-1.45,1.45s.65,1.45,1.45,1.45,1.45-.65,1.45-1.45-.65-1.45-1.45-1.45Z"/><path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2Zm-7.89,10c0-4.36,3.53-7.89,7.89-7.89s7.89,3.53,7.89,7.89-3.53,7.89-7.89,7.89-7.89-3.53-7.89-7.89Z"/>'}});A.displayName="AlertOutline";const H=({title:e,fill:t="currentColor",stroke:r="none",ref:s,...l})=>a.createElement("svg",{ref:s,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","data-title":"Check",...e&&{"data-title":e},fill:t,stroke:r,...l,dangerouslySetInnerHTML:{__html:(e===void 0?"":`<title>${e}</title>`)+'<path d="m8.92,19.08c-.18,0-.36-.03-.53-.1s-.33-.17-.47-.31l-5.49-5.34c-.28-.28-.42-.61-.42-1s.14-.73.42-1c.28-.28.62-.41,1.02-.41s.74.14,1.05.41l4.43,4.3,10.62-10.29c.28-.28.62-.42,1.02-.43.39,0,.73.13,1.02.43.28.28.42.61.42,1s-.14.73-.42,1l-11.65,11.32c-.14.14-.3.24-.47.31-.17.07-.35.1-.53.1Z"/>'}});H.displayName="Check";const _=({title:e,fill:t="currentColor",stroke:r="none",ref:s,...l})=>a.createElement("svg",{ref:s,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","data-title":"WarningOutline",...e&&{"data-title":e},fill:t,stroke:r,...l,dangerouslySetInnerHTML:{__html:(e===void 0?"":`<title>${e}</title>`)+'<path fill-rule="evenodd" d="m12,8.23c.55,0,1,.45,1,1v4.58c0,.55-.45,1-1,1s-1-.45-1-1v-4.58c0-.55.45-1,1-1Z"/><path d="m12,18.06c.69,0,1.25-.56,1.25-1.25s-.56-1.25-1.25-1.25-1.25.56-1.25,1.25.56,1.25,1.25,1.25Z"/><path fill-rule="evenodd" d="m10.76,2.35c.37-.23.8-.35,1.24-.35s.87.12,1.24.35c.37.23.68.56.88.95h0s7.62,15.24,7.62,15.24h0c.18.36.27.77.25,1.17-.02.41-.14.8-.35,1.15-.21.35-.51.63-.86.83-.35.2-.75.3-1.16.31H4.38c-.41,0-.81-.11-1.16-.31-.35-.2-.65-.49-.86-.83-.21-.35-.33-.74-.35-1.15-.02-.41.07-.81.25-1.17h0S9.88,3.3,9.88,3.3c.2-.39.5-.72.88-.95Zm1.24,1.65c-.07,0-.14.02-.2.06-.06.04-.11.09-.14.15l-7.62,15.23h0c-.03.06-.04.13-.04.19,0,.07.02.13.06.19.03.06.08.1.14.13.06.03.12.05.19.05h15.23c.07,0,.13-.02.19-.05.06-.03.11-.08.14-.13.03-.06.05-.12.06-.19,0-.07-.01-.13-.04-.19h0s-7.62-15.23-7.62-15.23c-.03-.06-.08-.11-.14-.15-.06-.04-.13-.06-.2-.06Z"/>'}});_.displayName="WarningOutline";const x=({id:e,className:t,ref:r,...s})=>{const{onMessageIdAdd:l,onMessageIdRemove:n}=E(),d=`${y}-message-${a.useId()}`,i=e||d;return a.useEffect(()=>(l(i),()=>{n(i)}),[i,l,n]),a.createElement("span",{ref:r,id:i,"data-spark-component":"form-field-message",className:m.cx(t,"text-caption"),...s})};x.displayName="FormField.Message";const p=({className:e,state:t,children:r,ref:s,...l})=>E().state!==t?null:a.createElement(x,{ref:s,"data-spark-component":"form-field-state-message","aria-live":"polite",className:m.cx("gap-sm flex items-center",t==="error"?"text-error":"text-on-surface/dim-1",e),...l},t==="alert"&&a.createElement(N.Icon,{size:"sm"},a.createElement(_,null)),t==="error"&&a.createElement(N.Icon,{size:"sm",intent:"error"},a.createElement(A,null)),t==="success"&&a.createElement(N.Icon,{size:"sm"},a.createElement(H,null)),r);p.displayName="FormField.StateMessage";const b=({ref:e,...t})=>a.createElement(p,{ref:e,"data-spark-component":"form-field-alert-message",state:"alert",...t});b.displayName="FormField.AlertMessage";const I=({className:e,value:t="",maxLength:r,ref:s,...l})=>{const n=`${t.length}/${r}`;return a.createElement("span",{ref:s,"data-spark-component":"form-field-characters-count",className:m.cx(e,"text-caption","text-neutral"),...l},n)};I.displayName="FormField.CharactersCount";const T=()=>{const{id:e,name:t,description:r,disabled:s,readOnly:l,state:n,labelId:d,isInvalid:i,isRequired:o}=a.useContext(v)||{};return{id:e,name:t,description:r,disabled:s,readOnly:l,state:n,labelId:d,isInvalid:i,isRequired:o}},M=({children:e})=>{const t=T();return a.createElement(a.Fragment,null,e(t))};M.displayName="FormField.Control";const C=({ref:e,...t})=>a.createElement(p,{ref:e,"data-spark-component":"form-field-error-message",state:"error",...t});C.displayName="FormField.ErrorMessage";const k=({className:e,ref:t,...r})=>a.createElement(x,{ref:t,"data-spark-component":"form-field-helper-message",className:m.cx("text-on-surface/dim-1",e),...r});k.displayName="FormField.HelperMessage";const F=({className:e,ref:t,...r})=>a.createElement($.Label.RequiredIndicator,{ref:t,className:m.cx("ml-sm",e),...r});F.displayName="FormField.RequiredIndicator";const q=({htmlFor:e,className:t,children:r,requiredIndicator:s=a.createElement(F,null),asChild:l,ref:n,...d})=>{const i=E(),{disabled:o,labelId:c,isRequired:u}=i,f=l?void 0:e||i.id;return a.createElement($.Label,{ref:n,id:c,"data-spark-component":"form-field-label",htmlFor:f,className:m.cx(t,o?"text-on-surface/dim-3 pointer-events-none":void 0),asChild:l,...d},a.createElement(a.Fragment,null,a.createElement(O.Slottable,null,r),u&&s))};q.displayName="FormField.Label";const w=({ref:e,...t})=>a.createElement(p,{ref:e,"data-spark-component":"form-field-success-message",state:"success",...t});w.displayName="FormField.SuccessMessage";const R=Object.assign(Z,{Label:q,Control:M,StateMessage:p,SuccessMessage:w,AlertMessage:b,ErrorMessage:C,HelperMessage:k,RequiredIndicator:F,CharactersCount:I});R.displayName="FormField",q.displayName="FormField.Label",M.displayName="FormField.Control",p.displayName="FormField.StateMessage",w.displayName="FormField.SuccessMessage",b.displayName="FormField.AlertMessage",C.displayName="FormField.ErrorMessage",k.displayName="FormField.HelperMessage",F.displayName="FormField.RequiredIndicator",I.displayName="FormField.CharactersCount",exports.FormField=R,exports.useFormFieldControl=T;

package.json

 {
   "name": "@spark-ui/form-field",
-  "version": "9.4.2",
+  "version": "9.4.3",
   "description": "Provide context to your form elements",
@@ -48,8 +48,8 @@ "publishConfig": {
   "dependencies": {
-    "@spark-ui/icon": "^9.4.2",
-    "@spark-ui/icons": "^9.4.2",
-    "@spark-ui/label": "^9.4.2",
-    "@spark-ui/slot": "^9.4.2"
+    "@spark-ui/icon": "^9.4.3",
+    "@spark-ui/icons": "^9.4.3",
+    "@spark-ui/label": "^9.4.3",
+    "@spark-ui/slot": "^9.4.3"
   },
-  "gitHead": "00e179f211c612d2a1a3ebc206a06f6ca583927f"
+  "gitHead": "31aee31b94248ba36163bc1d915779864dfd997f"
 }

No alert changes

Improved metrics

Total package byte prevSize

88107

0.17%

Dependency changes

• + Added

  @spark-ui/theme-utils@10.0.13
  (transitive)

• + Added

  tailwindcss@4.1.2
  (transitive)

• - Removed

  @spark-ui/theme-utils@10.0.11
  (transitive)

• - Removed

  tailwindcss@4.1.1
  (transitive)

• Updated

  @spark-ui/icon@^9.4.3

• Updated

  @spark-ui/icons@^9.4.3

• Updated

  @spark-ui/label@^9.4.3

• Updated

  @spark-ui/slot@^9.4.3