@choco-vanille/ui 1.4.0 → 1.5.1

package/dist/components/forms/switch/styles/Switch.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit60.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                            */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={wrapper:"ih5w140",wrapperDisabled:"ih5w141",root:e.createRuntimeFn({defaultClassName:"ih5w142",variantClassNames:{size:{sm:"ih5w143",md:"ih5w144",lg:"ih5w145"},error:{true:"ih5w146",false:"ih5w147"}},defaultVariants:{size:"md",error:!1},compoundVariants:[]}),thumb:e.createRuntimeFn({defaultClassName:"ih5w148",variantClassNames:{size:{sm:"ih5w149",md:"ih5w14a",lg:"ih5w14b"}},defaultVariants:{size:"sm"},compoundVariants:[]}),label:"ih5w14c",labelDisabled:"ih5w14d"};exports.SWITCH_STYLES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit51.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                            */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={wrapper:"ih5w140",wrapperDisabled:"ih5w141",root:e.createRuntimeFn({defaultClassName:"ih5w142",variantClassNames:{size:{sm:"ih5w143",md:"ih5w144",lg:"ih5w145"},error:{true:"ih5w146",false:"ih5w147"}},defaultVariants:{size:"md",error:!1},compoundVariants:[]}),thumb:e.createRuntimeFn({defaultClassName:"ih5w148",variantClassNames:{size:{sm:"ih5w149",md:"ih5w14a",lg:"ih5w14b"}},defaultVariants:{size:"sm"},compoundVariants:[]}),label:"ih5w14c",labelDisabled:"ih5w14d"};exports.SWITCH_STYLES=a;
 //# sourceMappingURL=Switch.css.cjs.map

package/dist/components/forms/switch/styles/Switch.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit60.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit51.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                          */
 import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
 var s = { wrapper: "ih5w140", wrapperDisabled: "ih5w141", root: a({ defaultClassName: "ih5w142", variantClassNames: { size: { sm: "ih5w143", md: "ih5w144", lg: "ih5w145" }, error: { true: "ih5w146", false: "ih5w147" } }, defaultVariants: { size: "md", error: !1 }, compoundVariants: [] }), thumb: a({ defaultClassName: "ih5w148", variantClassNames: { size: { sm: "ih5w149", md: "ih5w14a", lg: "ih5w14b" } }, defaultVariants: { size: "sm" }, compoundVariants: [] }), label: "ih5w14c", labelDisabled: "ih5w14d" };

package/dist/components/forms/text-area/TextArea.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../ui-kit94.css');require('../../../ui-kit91.css');require('../../../ui-kit76.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),j=require("./components/text-area-label/TextAreaLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                     */const v=require("./components/text-area-start-icon/TextAreaStartIcon.cjs");;/* empty css                                                                              */const z=require("./components/text-area-end-action/TextAreaEndAction.cjs");;/* empty css                                                                              */const H=require("./styles/TextArea.css.cjs"),U=require("../_shared/components/helper-text/HelperText.cjs"),X=require("./hooks/useAutoResizeTextArea.hook.cjs"),Y=require("./hooks/useTextArea.hook.cjs"),E=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const G=require("../../../utils/cn.cjs"),t=require("react"),n=t.memo(u=>{const{inputId:l,helperId:d,hasError:o,hasStartIcon:I,hasEndAction:x,handleMouseDown:g,handleFocus:y,handleBlur:C}=Y.useTextArea(u),{disabled:h,startIcon:A,className:S,width:q,error:i,helperText:a,label:T,endAction:_,size:k,placeholder:D,value:m,onChange:p,onKeyDown:F,onKeyUp:L,ref:r,rows:c,minRows:f,maxRows:N,...B}=u,w=k??"md",R=t.useRef(null),K=t.useCallback(s=>{R.current=s,typeof r=="function"?r(s):r&&(r.current=s)},[r]),{isEnabled:M,resize:b}=X.useAutoResizeTextArea(R,{minRows:f??c,maxRows:N,value:m}),P=t.useCallback(s=>{p?.(s),b()},[p,b]);return e.jsxs(E,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:q!==void 0?{width:q}:void 0,children:[T&&e.jsx(j,{htmlFor:l,disabled:h,children:T}),e.jsxs(E,{position:"relative",width:"100%",gap:"none",children:[A&&e.jsx(v,{icon:A,size:w}),e.jsx("textarea",{ref:K,id:l,disabled:h,"aria-invalid":o||void 0,"aria-describedby":i||a?d:void 0,onMouseDown:g,onFocus:y,onBlur:C,className:G.cn(H.TEXT_AREA_STYLES.recipe({size:w,hasError:o,hasStartIcon:I,hasEndAction:x}),S),placeholder:D,value:m,onChange:P,onKeyDown:F,onKeyUp:L,rows:M?f??c:c,...B}),x&&e.jsx(z,{children:_})]}),(i||a)&&e.jsx(U,{id:d,hasError:o,children:i??a})]})});n.displayName="TextArea";n.Label=j;n.StartIcon=v;n.EndAction=z;module.exports=n;
+"use strict";require('../../../ui-kit97.css');require('../../../ui-kit85.css');require('../../../ui-kit88.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),j=require("./components/text-area-label/TextAreaLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                     */const v=require("./components/text-area-start-icon/TextAreaStartIcon.cjs");;/* empty css                                                                              */const z=require("./components/text-area-end-action/TextAreaEndAction.cjs");;/* empty css                                                                              */const H=require("./styles/TextArea.css.cjs"),U=require("../_shared/components/helper-text/HelperText.cjs"),X=require("./hooks/useAutoResizeTextArea.hook.cjs"),Y=require("./hooks/useTextArea.hook.cjs"),E=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const G=require("../../../utils/cn.cjs"),t=require("react"),n=t.memo(u=>{const{inputId:l,helperId:d,hasError:o,hasStartIcon:I,hasEndAction:x,handleMouseDown:g,handleFocus:y,handleBlur:C}=Y.useTextArea(u),{disabled:h,startIcon:A,className:S,width:q,error:i,helperText:a,label:T,endAction:_,size:k,placeholder:D,value:m,onChange:p,onKeyDown:F,onKeyUp:L,ref:r,rows:c,minRows:f,maxRows:N,...B}=u,w=k??"md",R=t.useRef(null),K=t.useCallback(s=>{R.current=s,typeof r=="function"?r(s):r&&(r.current=s)},[r]),{isEnabled:M,resize:b}=X.useAutoResizeTextArea(R,{minRows:f??c,maxRows:N,value:m}),P=t.useCallback(s=>{p?.(s),b()},[p,b]);return e.jsxs(E,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:q!==void 0?{width:q}:void 0,children:[T&&e.jsx(j,{htmlFor:l,disabled:h,children:T}),e.jsxs(E,{position:"relative",width:"100%",gap:"none",children:[A&&e.jsx(v,{icon:A,size:w}),e.jsx("textarea",{ref:K,id:l,disabled:h,"aria-invalid":o||void 0,"aria-describedby":i||a?d:void 0,onMouseDown:g,onFocus:y,onBlur:C,className:G.cn(H.TEXT_AREA_STYLES.recipe({size:w,hasError:o,hasStartIcon:I,hasEndAction:x}),S),placeholder:D,value:m,onChange:P,onKeyDown:F,onKeyUp:L,rows:M?f??c:c,...B}),x&&e.jsx(z,{children:_})]}),(i||a)&&e.jsx(U,{id:d,hasError:o,children:i??a})]})});n.displayName="TextArea";n.Label=j;n.StartIcon=v;n.EndAction=z;module.exports=n;
 //# sourceMappingURL=TextArea.cjs.map

package/dist/components/forms/text-area/TextArea.js

@@ -1,6 +1,6 @@
 import { jsxs as E, jsx as r } from "react/jsx-runtime";
 import g from "./components/text-area-label/TextAreaLabel.js";
-import '../../../ui-kit94.css';import '../../../ui-kit91.css';import '../../../ui-kit76.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
+import '../../../ui-kit97.css';import '../../../ui-kit85.css';import '../../../ui-kit88.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
 /* empty css                                             */
 /* empty css                                                                   */
 import y from "./components/text-area-start-icon/TextAreaStartIcon.js";

package/dist/components/forms/text-area/components/text-area-end-action/styles/TextAreaEndAction.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit94.css');;/* empty css                                       */var e={root:"lf8geo0"};exports.TEXT_AREA_END_ACTION_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit97.css');;/* empty css                                       */var e={root:"lf8geo0"};exports.TEXT_AREA_END_ACTION_STYLES=e;
 //# sourceMappingURL=TextAreaEndAction.css.cjs.map

package/dist/components/forms/text-area/components/text-area-end-action/styles/TextAreaEndAction.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit94.css';/* empty css                                     */
+import '../../../../../../ui-kit97.css';/* empty css                                     */
 var r = { root: "lf8geo0" };
 export {
   r as TEXT_AREA_END_ACTION_STYLES

package/dist/components/forms/text-area/components/text-area-label/styles/TextAreaLabel.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit76.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                   */var e={root:"_1sjl5hx0"};exports.TEXT_AREA_LABEL_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit88.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                   */var e={root:"_1sjl5hx0"};exports.TEXT_AREA_LABEL_STYLES=e;
 //# sourceMappingURL=TextAreaLabel.css.cjs.map

package/dist/components/forms/text-area/components/text-area-label/styles/TextAreaLabel.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit76.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit88.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                                      */
 /* empty css                                 */
 var p = { root: "_1sjl5hx0" };

package/dist/components/forms/text-area/components/text-area-start-icon/styles/TextAreaStartIcon.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit91.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                       */var e={root:"_1q572tr0"};exports.TEXT_AREA_START_ICON_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit85.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                       */var e={root:"_1q572tr0"};exports.TEXT_AREA_START_ICON_STYLES=e;
 //# sourceMappingURL=TextAreaStartIcon.css.cjs.map

package/dist/components/forms/text-area/components/text-area-start-icon/styles/TextAreaStartIcon.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit91.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit85.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                                      */
 /* empty css                                     */
 var T = { root: "_1q572tr0" };

package/dist/components/forms/text-area/styles/TextArea.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit63.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                              */const a=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:a.createRuntimeFn({defaultClassName:"sqatm00",variantClassNames:{size:{sm:"sqatm01",md:"sqatm02",lg:"sqatm03"},hasError:{true:"sqatm04",false:"sqatm05"},hasStartIcon:{true:"sqatm06",false:"sqatm07"},hasEndAction:{true:"sqatm08",false:"sqatm09"}},defaultVariants:{size:"md",hasError:!1,hasStartIcon:!1,hasEndAction:!1},compoundVariants:[[{size:"sm",hasStartIcon:!0},"sqatm0a"],[{size:"md",hasStartIcon:!0},"sqatm0b"],[{size:"lg",hasStartIcon:!0},"sqatm0c"],[{size:"sm",hasEndAction:!0},"sqatm0d"],[{size:"md",hasEndAction:!0},"sqatm0e"],[{size:"lg",hasEndAction:!0},"sqatm0f"]]})};exports.TEXT_AREA_STYLES=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit69.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                              */const a=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:a.createRuntimeFn({defaultClassName:"sqatm00",variantClassNames:{size:{sm:"sqatm01",md:"sqatm02",lg:"sqatm03"},hasError:{true:"sqatm04",false:"sqatm05"},hasStartIcon:{true:"sqatm06",false:"sqatm07"},hasEndAction:{true:"sqatm08",false:"sqatm09"}},defaultVariants:{size:"md",hasError:!1,hasStartIcon:!1,hasEndAction:!1},compoundVariants:[[{size:"sm",hasStartIcon:!0},"sqatm0a"],[{size:"md",hasStartIcon:!0},"sqatm0b"],[{size:"lg",hasStartIcon:!0},"sqatm0c"],[{size:"sm",hasEndAction:!0},"sqatm0d"],[{size:"md",hasEndAction:!0},"sqatm0e"],[{size:"lg",hasEndAction:!0},"sqatm0f"]]})};exports.TEXT_AREA_STYLES=t;
 //# sourceMappingURL=TextArea.css.cjs.map

package/dist/components/forms/text-area/styles/TextArea.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit63.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit69.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                            */
 import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
 var m = { recipe: a({ defaultClassName: "sqatm00", variantClassNames: { size: { sm: "sqatm01", md: "sqatm02", lg: "sqatm03" }, hasError: { true: "sqatm04", false: "sqatm05" }, hasStartIcon: { true: "sqatm06", false: "sqatm07" }, hasEndAction: { true: "sqatm08", false: "sqatm09" } }, defaultVariants: { size: "md", hasError: !1, hasStartIcon: !1, hasEndAction: !1 }, compoundVariants: [[{ size: "sm", hasStartIcon: !0 }, "sqatm0a"], [{ size: "md", hasStartIcon: !0 }, "sqatm0b"], [{ size: "lg", hasStartIcon: !0 }, "sqatm0c"], [{ size: "sm", hasEndAction: !0 }, "sqatm0d"], [{ size: "md", hasEndAction: !0 }, "sqatm0e"], [{ size: "lg", hasEndAction: !0 }, "sqatm0f"]] }) };

package/dist/components/forms/text-field/TextField.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../ui-kit78.css');require('../../../ui-kit93.css');require('../../../ui-kit81.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),H=require("../../actions/icon-button/IconButton.cjs");require("../../actions/icon-button/styles/IconButton.css.cjs");const F=require("./components/text-field-label/TextFieldLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                       */const I=require("./components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                                                */const m=require("./components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                */const K=require("./styles/TextField.css.cjs"),M=require("../_shared/components/helper-text/HelperText.cjs"),O=require("./constants/index.cjs"),U=require("./hooks/useTextfield.hook.cjs"),T=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const w=require("../../../constants/icons.cjs"),X=require("../../../utils/cn.cjs"),y=require("react"),r=y.memo(c=>{const{inputId:d,helperId:l,hasError:o,hasStartIcon:b,hasEndAction:a,handleMouseDown:v,handleFocus:g,handleBlur:j,resolvedType:S,isPassword:E,showPassword:i,setShowPassword:u}=U.useTextField(c),{disabled:h,startIcon:x,className:f,width:p,error:s,helperText:n,label:q,endAction:z,size:A,placeholder:P,value:D,onChange:_,onKeyDown:L,onKeyUp:k,ref:B,type:Y,...C}=c,t=A??"md",N=y.useCallback(()=>u(!i),[u,i]),R=E?e.jsx(H,{icon:i?w.IconRegistry.eyeOff:w.IconRegistry.eye,"aria-label":i?"Hide password":"Show password",variant:"ghost",color:"primary",size:O.fieldSizeToActionSize[t],type:"button",tabIndex:-1,onClick:N}):z;return e.jsxs(T,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:p!==void 0?{width:p}:void 0,children:[q&&e.jsx(F,{htmlFor:d,disabled:h,children:q}),e.jsxs(T,{position:"relative",width:"100%",gap:"none",children:[x&&e.jsx(I,{icon:x,size:t}),e.jsx("input",{ref:B,id:d,type:S,disabled:h,"aria-invalid":o||void 0,"aria-describedby":s||n?l:void 0,onMouseDown:v,onFocus:g,onBlur:j,className:X.cn(K.TEXT_FIELD_STYLES.recipe({size:t,hasError:o,hasStartIcon:b,hasEndAction:a}),f),placeholder:P,value:D,onChange:_,onKeyDown:L,onKeyUp:k,...C}),a&&e.jsx(m,{children:R})]}),(s||n)&&e.jsx(M,{id:l,hasError:o,children:s??n})]})});r.displayName="TextField";r.Label=F;r.StartIcon=I;r.EndAction=m;module.exports=r;
+"use strict";require('../../../ui-kit79.css');require('../../../ui-kit80.css');require('../../../ui-kit75.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),M=require("../../actions/icon-button/IconButton.cjs");require("../../actions/icon-button/styles/IconButton.css.cjs");const F=require("./components/text-field-label/TextFieldLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                       */const m=require("./components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                                                */const b=require("./components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                */const O=require("./styles/TextField.css.cjs"),U=require("../_shared/components/helper-text/HelperText.cjs"),X=require("./constants/index.cjs"),Y=require("./hooks/useTextfield.hook.cjs"),T=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const y=require("../../../constants/icons.cjs"),G=require("../../../utils/cn.cjs"),I=require("react"),r=I.memo(c=>{const{inputId:d,helperId:a,hasError:o,hasStartIcon:v,hasEndAction:l,handleMouseDown:g,handleFocus:j,handleBlur:S,resolvedType:E,isPassword:f,showPassword:i,setShowPassword:u}=Y.useTextField(c),{disabled:h,startIcon:x,className:z,width:q,error:s,helperText:n,label:p,required:w,showRequiredIndicator:A=!0,endAction:P,size:D,placeholder:_,value:L,onChange:R,onKeyDown:k,onKeyUp:B,ref:C,type:J,...N}=c,t=D??"md",H=I.useCallback(()=>u(!i),[u,i]),K=f?e.jsx(M,{icon:i?y.IconRegistry.eyeOff:y.IconRegistry.eye,"aria-label":i?"Hide password":"Show password",variant:"ghost",color:"primary",size:X.fieldSizeToActionSize[t],type:"button",tabIndex:-1,onClick:H}):P;return e.jsxs(T,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:q!==void 0?{width:q}:void 0,children:[p&&e.jsx(F,{htmlFor:d,disabled:h,required:w&&A,children:p}),e.jsxs(T,{position:"relative",width:"100%",gap:"none",children:[x&&e.jsx(m,{icon:x,size:t}),e.jsx("input",{ref:C,id:d,type:E,disabled:h,required:w,"aria-invalid":o||void 0,"aria-describedby":s||n?a:void 0,onMouseDown:g,onFocus:j,onBlur:S,className:G.cn(O.TEXT_FIELD_STYLES.recipe({size:t,hasError:o,hasStartIcon:v,hasEndAction:l}),z),placeholder:_,value:L,onChange:R,onKeyDown:k,onKeyUp:B,...N}),l&&e.jsx(b,{children:K})]}),(s||n)&&e.jsx(U,{id:a,hasError:o,children:s??n})]})});r.displayName="TextField";r.Label=F;r.StartIcon=m;r.EndAction=b;module.exports=r;
 //# sourceMappingURL=TextField.cjs.map

package/dist/components/forms/text-field/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport {\r\n    TextFieldLabel,\r\n    TextFieldStartIcon,\r\n    TextFieldEndAction,\r\n} from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useTextField } from '@components/forms/text-field/hooks/useTextfield.hook.tsx'\r\nimport type { TextFieldCompound } from '@components/forms/text-field/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, useCallback } from 'react'\r\nimport type { TextFieldProps } from '@/components'\r\n\r\n/**\r\n  * A styled text input built with a native `<input>` and `<label>`.\r\n  *\r\n  * - `startIcon` - Iconify icon name rendered on the left.\r\n  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.\r\n  * - `type=\"password\"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).\r\n  * - `width` - overrides the default `100%` wrapper width.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * input shows the primary border without the ring halo, detected via `onMouseDown`\r\n  * and a `data-mouse-focus` attribute.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <TextField label=\"Email\" startIcon=\"lucide:mail\" placeholder=\"you@example.com\" />\r\n  * <TextField label=\"Password\" type=\"password\" />\r\n  * <TextField label=\"Search\" endAction={<IconButton icon=\"lucide:search\" aria-label=\"Search\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextField label=\"Amount\" width=\"12rem\" />\r\n  * ```\r\n  */\r\nconst TextField = memo<TextFieldProps>((props) => {\r\n    const {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        resolvedType,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n    } = useTextField(props)\r\n\r\n    const {\r\n        disabled,\r\n        startIcon,\r\n        className,\r\n        width,\r\n        error,\r\n        helperText,\r\n        label,\r\n        endAction,\r\n        size: sizeProp,\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\r\n        type: _type,\r\n        ...inputProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const handleTogglePassword = useCallback(\r\n        () => setShowPassword(!showPassword),\r\n        [setShowPassword, showPassword],\r\n    )\r\n\r\n    const resolvedEndAction = isPassword ? (\r\n        <IconButton\r\n            icon={showPassword ? IconRegistry.eyeOff : IconRegistry.eye}\r\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            variant={'ghost'}\r\n            color={'primary'}\r\n            size={fieldSizeToActionSize[size]}\r\n            type={'button'}\r\n            tabIndex={-1}\r\n            onClick={handleTogglePassword}\r\n        />\r\n    ) : (\r\n        endAction\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <input\r\n                    ref={ref}\r\n                    id={inputId}\r\n                    // `type` is resolved by useTextField for password toggling.\r\n                    type={resolvedType}\r\n                    disabled={disabled}\r\n                    aria-invalid={hasError || undefined}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    onMouseDown={handleMouseDown}\r\n                    onFocus={handleFocus}\r\n                    onBlur={handleBlur}\r\n                    className={cn(\r\n                        TEXT_FIELD_STYLES.recipe({\r\n                            size,\r\n                            hasError,\r\n                            hasStartIcon,\r\n                            hasEndAction,\r\n                        }),\r\n                        className,\r\n                    )}\r\n                    placeholder={placeholder}\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    {...inputProps}\r\n                />\r\n\r\n                {hasEndAction && (\r\n                    <TextFieldEndAction>{resolvedEndAction}</TextFieldEndAction>\r\n                )}\r\n            </Flex>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n}) as unknown as TextFieldCompound\r\n\r\nTextField.displayName = 'TextField'\r\nTextField.Label = TextFieldLabel\r\nTextField.StartIcon = TextFieldStartIcon\r\nTextField.EndAction = TextFieldEndAction\r\n\r\nexport default TextField\r\n"],"names":["TextField","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","resolvedType","isPassword","showPassword","setShowPassword","useTextField","disabled","startIcon","className","width","error","helperText","label","endAction","sizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","IconRegistry","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","TextFieldEndAction","HelperText"],"mappings":"0oCAqCMA,EAAYC,EAAAA,KAAsBC,GAAU,CAC9C,KAAM,CACF,QAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,WAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,CAAA,EACAC,EAAAA,aAAab,CAAK,EAEhB,CACF,SAAAc,EACA,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,KAAMC,EACN,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,KAAMC,EACN,GAAGC,CAAA,EACH9B,EACE+B,EAAOT,GAAY,KAEnBU,EAAuBC,EAAAA,YACzB,IAAMrB,EAAgB,CAACD,CAAY,EACnC,CAACC,EAAiBD,CAAY,CAAA,EAG5BuB,EAAoBxB,EACtByB,EAAAA,IAACC,EAAA,CACG,KAAMzB,EAAe0B,EAAAA,aAAa,OAASA,EAAAA,aAAa,IACxD,aAAY1B,EAAe,gBAAkB,gBAC7C,QAAS,QACT,MAAO,UACP,KAAM2B,EAAAA,sBAAsBP,CAAI,EAChC,KAAM,SACN,SAAU,GACV,QAASC,CAAA,CAAA,EAGbX,EAGJ,OACIkB,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAOvB,IAAU,OAAY,CAAE,MAAAA,GAAU,OAExC,SAAA,CAAAG,GACGe,EAAAA,IAACM,EAAA,CACG,QAASxC,EACT,SAAAa,EAEC,SAAAM,CAAA,CAAA,EAITmB,EAAAA,KAACC,EAAA,CACG,SAAU,WACV,MAAO,OACP,IAAK,OAEJ,SAAA,CAAAzB,GACGoB,EAAAA,IAACO,EAAA,CACG,KAAM3B,EACN,KAAAgB,CAAA,CAAA,EAIRI,EAAAA,IAAC,QAAA,CACG,IAAAP,EACA,GAAI3B,EAEJ,KAAMQ,EACN,SAAAK,EACA,eAAcX,GAAY,OAC1B,mBAAkBe,GAASC,EAAajB,EAAW,OACnD,YAAaI,EACb,QAASC,EACT,OAAQC,EACR,UAAWmC,EAAAA,GACPC,EAAAA,kBAAkB,OAAO,CACrB,KAAAb,EACA,SAAA5B,EACA,aAAAC,EACA,aAAAC,CAAA,CACH,EACDW,CAAA,EAEJ,YAAAO,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACC,GAAGG,CAAA,CAAA,EAGPzB,GACG8B,EAAAA,IAACU,EAAA,CAAoB,SAAAX,CAAA,CAAkB,CAAA,CAAA,CAAA,GAI7ChB,GAASC,IACPgB,EAAAA,IAACW,EAAA,CACG,GAAI5C,EACJ,SAAAC,EAEC,SAAAe,GAASC,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDrB,EAAU,YAAc,YACxBA,EAAU,MAAQ2C,EAClB3C,EAAU,UAAY4C,EACtB5C,EAAU,UAAY+C"}
+{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport {\r\n    TextFieldLabel,\r\n    TextFieldStartIcon,\r\n    TextFieldEndAction,\r\n} from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useTextField } from '@components/forms/text-field/hooks/useTextfield.hook.tsx'\r\nimport type { TextFieldCompound } from '@components/forms/text-field/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, useCallback } from 'react'\r\nimport type { TextFieldProps } from '@/components'\r\n\r\n/**\r\n  * A styled text input built with a native `<input>` and `<label>`.\r\n  *\r\n  * - `startIcon` - Iconify icon name rendered on the left.\r\n  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.\r\n  * - `type=\"password\"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).\r\n  * - `width` - overrides the default `100%` wrapper width.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * input shows the primary border without the ring halo, detected via `onMouseDown`\r\n  * and a `data-mouse-focus` attribute.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <TextField label=\"Email\" startIcon=\"lucide:mail\" placeholder=\"you@example.com\" />\r\n  * <TextField label=\"Password\" type=\"password\" />\r\n  * <TextField label=\"Search\" endAction={<IconButton icon=\"lucide:search\" aria-label=\"Search\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextField label=\"Amount\" width=\"12rem\" />\r\n  * ```\r\n  */\r\nconst TextField = memo<TextFieldProps>((props) => {\r\n    const {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        resolvedType,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n    } = useTextField(props)\r\n\r\n    const {\r\n        disabled,\r\n        startIcon,\r\n        className,\r\n        width,\r\n        error,\r\n        helperText,\r\n        label,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        endAction,\r\n        size: sizeProp,\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\r\n        type: _type,\r\n        ...inputProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const handleTogglePassword = useCallback(\r\n        () => setShowPassword(!showPassword),\r\n        [setShowPassword, showPassword],\r\n    )\r\n\r\n    const resolvedEndAction = isPassword ? (\r\n        <IconButton\r\n            icon={showPassword ? IconRegistry.eyeOff : IconRegistry.eye}\r\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            variant={'ghost'}\r\n            color={'primary'}\r\n            size={fieldSizeToActionSize[size]}\r\n            type={'button'}\r\n            tabIndex={-1}\r\n            onClick={handleTogglePassword}\r\n        />\r\n    ) : (\r\n        endAction\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                    required={required && showRequiredIndicator}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <input\r\n                    ref={ref}\r\n                    id={inputId}\r\n                    // `type` is resolved by useTextField for password toggling.\r\n                    type={resolvedType}\r\n                    disabled={disabled}\r\n                    required={required}\r\n                    aria-invalid={hasError || undefined}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    onMouseDown={handleMouseDown}\r\n                    onFocus={handleFocus}\r\n                    onBlur={handleBlur}\r\n                    className={cn(\r\n                        TEXT_FIELD_STYLES.recipe({\r\n                            size,\r\n                            hasError,\r\n                            hasStartIcon,\r\n                            hasEndAction,\r\n                        }),\r\n                        className,\r\n                    )}\r\n                    placeholder={placeholder}\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    {...inputProps}\r\n                />\r\n\r\n                {hasEndAction && (\r\n                    <TextFieldEndAction>{resolvedEndAction}</TextFieldEndAction>\r\n                )}\r\n            </Flex>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n}) as unknown as TextFieldCompound\r\n\r\nTextField.displayName = 'TextField'\r\nTextField.Label = TextFieldLabel\r\nTextField.StartIcon = TextFieldStartIcon\r\nTextField.EndAction = TextFieldEndAction\r\n\r\nexport default TextField\r\n"],"names":["TextField","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","resolvedType","isPassword","showPassword","setShowPassword","useTextField","disabled","startIcon","className","width","error","helperText","label","required","showRequiredIndicator","endAction","sizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","IconRegistry","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","TextFieldEndAction","HelperText"],"mappings":"0oCAqCMA,EAAYC,EAAAA,KAAsBC,GAAU,CAC9C,KAAM,CACF,QAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,WAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,CAAA,EACAC,EAAAA,aAAab,CAAK,EAEhB,CACF,SAAAc,EACA,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,SAAAC,EACA,sBAAAC,EAAwB,GACxB,UAAAC,EACA,KAAMC,EACN,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,KAAMC,EACN,GAAGC,CAAA,EACHhC,EACEiC,EAAOT,GAAY,KAEnBU,EAAuBC,EAAAA,YACzB,IAAMvB,EAAgB,CAACD,CAAY,EACnC,CAACC,EAAiBD,CAAY,CAAA,EAG5ByB,EAAoB1B,EACtB2B,EAAAA,IAACC,EAAA,CACG,KAAM3B,EAAe4B,EAAAA,aAAa,OAASA,EAAAA,aAAa,IACxD,aAAY5B,EAAe,gBAAkB,gBAC7C,QAAS,QACT,MAAO,UACP,KAAM6B,EAAAA,sBAAsBP,CAAI,EAChC,KAAM,SACN,SAAU,GACV,QAASC,CAAA,CAAA,EAGbX,EAGJ,OACIkB,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAOzB,IAAU,OAAY,CAAE,MAAAA,GAAU,OAExC,SAAA,CAAAG,GACGiB,EAAAA,IAACM,EAAA,CACG,QAAS1C,EACT,SAAAa,EACA,SAAUO,GAAYC,EAErB,SAAAF,CAAA,CAAA,EAITqB,EAAAA,KAACC,EAAA,CACG,SAAU,WACV,MAAO,OACP,IAAK,OAEJ,SAAA,CAAA3B,GACGsB,EAAAA,IAACO,EAAA,CACG,KAAM7B,EACN,KAAAkB,CAAA,CAAA,EAIRI,EAAAA,IAAC,QAAA,CACG,IAAAP,EACA,GAAI7B,EAEJ,KAAMQ,EACN,SAAAK,EACA,SAAAO,EACA,eAAclB,GAAY,OAC1B,mBAAkBe,GAASC,EAAajB,EAAW,OACnD,YAAaI,EACb,QAASC,EACT,OAAQC,EACR,UAAWqC,EAAAA,GACPC,EAAAA,kBAAkB,OAAO,CACrB,KAAAb,EACA,SAAA9B,EACA,aAAAC,EACA,aAAAC,CAAA,CACH,EACDW,CAAA,EAEJ,YAAAS,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACC,GAAGG,CAAA,CAAA,EAGP3B,GACGgC,EAAAA,IAACU,EAAA,CAAoB,SAAAX,CAAA,CAAkB,CAAA,CAAA,CAAA,GAI7ClB,GAASC,IACPkB,EAAAA,IAACW,EAAA,CACG,GAAI9C,EACJ,SAAAC,EAEC,SAAAe,GAASC,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDrB,EAAU,YAAc,YACxBA,EAAU,MAAQ6C,EAClB7C,EAAU,UAAY8C,EACtB9C,EAAU,UAAYiD"}

package/dist/components/forms/text-field/TextField.js

@@ -1,90 +1,93 @@
-import { jsxs as w, jsx as o } from "react/jsx-runtime";
-import M from "../../actions/icon-button/IconButton.js";
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import R from "../../actions/icon-button/IconButton.js";
 import "../../actions/icon-button/styles/IconButton.css.js";
-import T from "./components/text-field-label/TextFieldLabel.js";
-import '../../../ui-kit78.css';import '../../../ui-kit93.css';import '../../../ui-kit81.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
+import I from "./components/text-field-label/TextFieldLabel.js";
+import '../../../ui-kit79.css';import '../../../ui-kit80.css';import '../../../ui-kit75.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
 /* empty css                                             */
 /* empty css                                                                     */
 import F from "./components/text-field-start-icon/TextFieldStartIcon.js";
 /* empty css                                                                              */
-import I from "./components/text-field-end-action/TextFieldEndAction.js";
+import b from "./components/text-field-end-action/TextFieldEndAction.js";
 /* empty css                                                                              */
 import { TEXT_FIELD_STYLES as O } from "./styles/TextField.css.js";
-import R from "../_shared/components/helper-text/HelperText.js";
-import { fieldSizeToActionSize as U } from "./constants/index.js";
-import { useTextField as X } from "./hooks/useTextfield.hook.js";
-import x from "../../layout/flex/Flex.js";
+import U from "../_shared/components/helper-text/HelperText.js";
+import { fieldSizeToActionSize as X } from "./constants/index.js";
+import { useTextField as Y } from "./hooks/useTextfield.hook.js";
+import y from "../../layout/flex/Flex.js";
 import "../../layout/flex/styles/Flex.css.js";
-import { IconRegistry as y } from "../../../constants/icons.js";
-import { cn as Y } from "../../../utils/cn.js";
-import { memo as q, useCallback as G } from "react";
-const r = q((a) => {
+import { IconRegistry as T } from "../../../constants/icons.js";
+import { cn as G } from "../../../utils/cn.js";
+import { memo as J, useCallback as Q } from "react";
+const r = J((d) => {
   const {
-    inputId: d,
+    inputId: a,
     helperId: l,
     hasError: i,
-    hasStartIcon: b,
+    hasStartIcon: v,
     hasEndAction: m,
-    handleMouseDown: v,
-    handleFocus: S,
-    handleBlur: g,
-    resolvedType: E,
-    isPassword: z,
+    handleMouseDown: S,
+    handleFocus: g,
+    handleBlur: E,
+    resolvedType: z,
+    isPassword: A,
     showPassword: e,
     setShowPassword: p
-  } = X(a), {
+  } = Y(d), {
     disabled: c,
     startIcon: h,
-    className: A,
-    width: f,
+    className: P,
+    width: u,
     error: t,
     helperText: n,
-    label: u,
-    endAction: P,
-    size: D,
-    placeholder: L,
-    value: B,
-    onChange: C,
-    onKeyDown: N,
-    onKeyUp: _,
-    ref: j,
-    type: J,
-    ...k
-  } = a, s = D ?? "md", H = G(
+    label: f,
+    required: w,
+    showRequiredIndicator: D = !0,
+    endAction: L,
+    size: q,
+    placeholder: B,
+    value: C,
+    onChange: N,
+    onKeyDown: _,
+    onKeyUp: j,
+    ref: k,
+    type: V,
+    ...H
+  } = d, s = q ?? "md", K = Q(
     () => p(!e),
     [p, e]
-  ), K = z ? /* @__PURE__ */ o(
-    M,
+  ), M = A ? /* @__PURE__ */ o(
+    R,
     {
-      icon: e ? y.eyeOff : y.eye,
+      icon: e ? T.eyeOff : T.eye,
       "aria-label": e ? "Hide password" : "Show password",
       variant: "ghost",
       color: "primary",
-      size: U[s],
+      size: X[s],
       type: "button",
       tabIndex: -1,
-      onClick: H
+      onClick: K
     }
-  ) : P;
-  return /* @__PURE__ */ w(
-    x,
+  ) : L;
+  return /* @__PURE__ */ x(
+    y,
     {
       flexDirection: "column",
       gap: "xs",
       width: "100%",
       alignItems: "start",
-      style: f !== void 0 ? { width: f } : void 0,
+      style: u !== void 0 ? { width: u } : void 0,
       children: [
-        u && /* @__PURE__ */ o(
-          T,
+        f && /* @__PURE__ */ o(
+          I,
           {
-            htmlFor: d,
+            htmlFor: a,
             disabled: c,
-            children: u
+            required: w && D,
+            children: f
           }
         ),
-        /* @__PURE__ */ w(
-          x,
+        /* @__PURE__ */ x(
+          y,
           {
             position: "relative",
             width: "100%",
@@ -100,38 +103,39 @@ const r = q((a) => {
               /* @__PURE__ */ o(
                 "input",
                 {
-                  ref: j,
-                  id: d,
-                  type: E,
+                  ref: k,
+                  id: a,
+                  type: z,
                   disabled: c,
+                  required: w,
                   "aria-invalid": i || void 0,
                   "aria-describedby": t || n ? l : void 0,
-                  onMouseDown: v,
-                  onFocus: S,
-                  onBlur: g,
-                  className: Y(
+                  onMouseDown: S,
+                  onFocus: g,
+                  onBlur: E,
+                  className: G(
                     O.recipe({
                       size: s,
                       hasError: i,
-                      hasStartIcon: b,
+                      hasStartIcon: v,
                       hasEndAction: m
                     }),
-                    A
+                    P
                   ),
-                  placeholder: L,
-                  value: B,
-                  onChange: C,
-                  onKeyDown: N,
-                  onKeyUp: _,
-                  ...k
+                  placeholder: B,
+                  value: C,
+                  onChange: N,
+                  onKeyDown: _,
+                  onKeyUp: j,
+                  ...H
                 }
               ),
-              m && /* @__PURE__ */ o(I, { children: K })
+              m && /* @__PURE__ */ o(b, { children: M })
             ]
           }
         ),
         (t || n) && /* @__PURE__ */ o(
-          R,
+          U,
           {
             id: l,
             hasError: i,
@@ -143,9 +147,9 @@ const r = q((a) => {
   );
 });
 r.displayName = "TextField";
-r.Label = T;
+r.Label = I;
 r.StartIcon = F;
-r.EndAction = I;
+r.EndAction = b;
 export {
   r as default
 };

package/dist/components/forms/text-field/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport {\r\n    TextFieldLabel,\r\n    TextFieldStartIcon,\r\n    TextFieldEndAction,\r\n} from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useTextField } from '@components/forms/text-field/hooks/useTextfield.hook.tsx'\r\nimport type { TextFieldCompound } from '@components/forms/text-field/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, useCallback } from 'react'\r\nimport type { TextFieldProps } from '@/components'\r\n\r\n/**\r\n  * A styled text input built with a native `<input>` and `<label>`.\r\n  *\r\n  * - `startIcon` - Iconify icon name rendered on the left.\r\n  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.\r\n  * - `type=\"password\"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).\r\n  * - `width` - overrides the default `100%` wrapper width.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * input shows the primary border without the ring halo, detected via `onMouseDown`\r\n  * and a `data-mouse-focus` attribute.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <TextField label=\"Email\" startIcon=\"lucide:mail\" placeholder=\"you@example.com\" />\r\n  * <TextField label=\"Password\" type=\"password\" />\r\n  * <TextField label=\"Search\" endAction={<IconButton icon=\"lucide:search\" aria-label=\"Search\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextField label=\"Amount\" width=\"12rem\" />\r\n  * ```\r\n  */\r\nconst TextField = memo<TextFieldProps>((props) => {\r\n    const {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        resolvedType,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n    } = useTextField(props)\r\n\r\n    const {\r\n        disabled,\r\n        startIcon,\r\n        className,\r\n        width,\r\n        error,\r\n        helperText,\r\n        label,\r\n        endAction,\r\n        size: sizeProp,\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\r\n        type: _type,\r\n        ...inputProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const handleTogglePassword = useCallback(\r\n        () => setShowPassword(!showPassword),\r\n        [setShowPassword, showPassword],\r\n    )\r\n\r\n    const resolvedEndAction = isPassword ? (\r\n        <IconButton\r\n            icon={showPassword ? IconRegistry.eyeOff : IconRegistry.eye}\r\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            variant={'ghost'}\r\n            color={'primary'}\r\n            size={fieldSizeToActionSize[size]}\r\n            type={'button'}\r\n            tabIndex={-1}\r\n            onClick={handleTogglePassword}\r\n        />\r\n    ) : (\r\n        endAction\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <input\r\n                    ref={ref}\r\n                    id={inputId}\r\n                    // `type` is resolved by useTextField for password toggling.\r\n                    type={resolvedType}\r\n                    disabled={disabled}\r\n                    aria-invalid={hasError || undefined}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    onMouseDown={handleMouseDown}\r\n                    onFocus={handleFocus}\r\n                    onBlur={handleBlur}\r\n                    className={cn(\r\n                        TEXT_FIELD_STYLES.recipe({\r\n                            size,\r\n                            hasError,\r\n                            hasStartIcon,\r\n                            hasEndAction,\r\n                        }),\r\n                        className,\r\n                    )}\r\n                    placeholder={placeholder}\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    {...inputProps}\r\n                />\r\n\r\n                {hasEndAction && (\r\n                    <TextFieldEndAction>{resolvedEndAction}</TextFieldEndAction>\r\n                )}\r\n            </Flex>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n}) as unknown as TextFieldCompound\r\n\r\nTextField.displayName = 'TextField'\r\nTextField.Label = TextFieldLabel\r\nTextField.StartIcon = TextFieldStartIcon\r\nTextField.EndAction = TextFieldEndAction\r\n\r\nexport default TextField\r\n"],"names":["TextField","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","resolvedType","isPassword","showPassword","setShowPassword","useTextField","disabled","startIcon","className","width","error","helperText","label","endAction","sizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","IconRegistry","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","TextFieldEndAction","HelperText"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,IAAYC,EAAqB,CAACC,MAAU;AAC9C,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,IACAC,EAAab,CAAK,GAEhB;AAAA,IACF,UAAAc;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAMC;AAAA,IACN,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,KAAAC;AAAA,IACA,MAAMC;AAAA,IACN,GAAGC;AAAA,EAAA,IACH9B,GACE+B,IAAOT,KAAY,MAEnBU,IAAuBC;AAAA,IACzB,MAAMrB,EAAgB,CAACD,CAAY;AAAA,IACnC,CAACC,GAAiBD,CAAY;AAAA,EAAA,GAG5BuB,IAAoBxB,IACtB,gBAAAyB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAMzB,IAAe0B,EAAa,SAASA,EAAa;AAAA,MACxD,cAAY1B,IAAe,kBAAkB;AAAA,MAC7C,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM2B,EAAsBP,CAAI;AAAA,MAChC,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAASC;AAAA,IAAA;AAAA,EAAA,IAGbX;AAGJ,SACI,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,eAAe;AAAA,MACf,KAAK;AAAA,MACL,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAOvB,MAAU,SAAY,EAAE,OAAAA,MAAU;AAAA,MAExC,UAAA;AAAA,QAAAG,KACG,gBAAAe;AAAA,UAACM;AAAA,UAAA;AAAA,YACG,SAASxC;AAAA,YACT,UAAAa;AAAA,YAEC,UAAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAIT,gBAAAmB;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,UAAU;AAAA,YACV,OAAO;AAAA,YACP,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAAzB,KACG,gBAAAoB;AAAA,gBAACO;AAAA,gBAAA;AAAA,kBACG,MAAM3B;AAAA,kBACN,MAAAgB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIR,gBAAAI;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,KAAAP;AAAA,kBACA,IAAI3B;AAAA,kBAEJ,MAAMQ;AAAA,kBACN,UAAAK;AAAA,kBACA,gBAAcX,KAAY;AAAA,kBAC1B,oBAAkBe,KAASC,IAAajB,IAAW;AAAA,kBACnD,aAAaI;AAAA,kBACb,SAASC;AAAA,kBACT,QAAQC;AAAA,kBACR,WAAWmC;AAAA,oBACPC,EAAkB,OAAO;AAAA,sBACrB,MAAAb;AAAA,sBACA,UAAA5B;AAAA,sBACA,cAAAC;AAAA,sBACA,cAAAC;AAAA,oBAAA,CACH;AAAA,oBACDW;AAAA,kBAAA;AAAA,kBAEJ,aAAAO;AAAA,kBACA,OAAAC;AAAA,kBACA,UAAAC;AAAA,kBACA,WAAAC;AAAA,kBACA,SAAAC;AAAA,kBACC,GAAGG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGPzB,KACG,gBAAA8B,EAACU,GAAA,EAAoB,UAAAX,EAAA,CAAkB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,SAI7ChB,KAASC,MACP,gBAAAgB;AAAA,UAACW;AAAA,UAAA;AAAA,YACG,IAAI5C;AAAA,YACJ,UAAAC;AAAA,YAEC,UAAAe,KAASC;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAEDrB,EAAU,cAAc;AACxBA,EAAU,QAAQ2C;AAClB3C,EAAU,YAAY4C;AACtB5C,EAAU,YAAY+C;"}
+{"version":3,"file":"TextField.js","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport {\r\n    TextFieldLabel,\r\n    TextFieldStartIcon,\r\n    TextFieldEndAction,\r\n} from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useTextField } from '@components/forms/text-field/hooks/useTextfield.hook.tsx'\r\nimport type { TextFieldCompound } from '@components/forms/text-field/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, useCallback } from 'react'\r\nimport type { TextFieldProps } from '@/components'\r\n\r\n/**\r\n  * A styled text input built with a native `<input>` and `<label>`.\r\n  *\r\n  * - `startIcon` - Iconify icon name rendered on the left.\r\n  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.\r\n  * - `type=\"password\"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).\r\n  * - `width` - overrides the default `100%` wrapper width.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * input shows the primary border without the ring halo, detected via `onMouseDown`\r\n  * and a `data-mouse-focus` attribute.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <TextField label=\"Email\" startIcon=\"lucide:mail\" placeholder=\"you@example.com\" />\r\n  * <TextField label=\"Password\" type=\"password\" />\r\n  * <TextField label=\"Search\" endAction={<IconButton icon=\"lucide:search\" aria-label=\"Search\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextField label=\"Amount\" width=\"12rem\" />\r\n  * ```\r\n  */\r\nconst TextField = memo<TextFieldProps>((props) => {\r\n    const {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        resolvedType,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n    } = useTextField(props)\r\n\r\n    const {\r\n        disabled,\r\n        startIcon,\r\n        className,\r\n        width,\r\n        error,\r\n        helperText,\r\n        label,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        endAction,\r\n        size: sizeProp,\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\r\n        type: _type,\r\n        ...inputProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const handleTogglePassword = useCallback(\r\n        () => setShowPassword(!showPassword),\r\n        [setShowPassword, showPassword],\r\n    )\r\n\r\n    const resolvedEndAction = isPassword ? (\r\n        <IconButton\r\n            icon={showPassword ? IconRegistry.eyeOff : IconRegistry.eye}\r\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            variant={'ghost'}\r\n            color={'primary'}\r\n            size={fieldSizeToActionSize[size]}\r\n            type={'button'}\r\n            tabIndex={-1}\r\n            onClick={handleTogglePassword}\r\n        />\r\n    ) : (\r\n        endAction\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                    required={required && showRequiredIndicator}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <input\r\n                    ref={ref}\r\n                    id={inputId}\r\n                    // `type` is resolved by useTextField for password toggling.\r\n                    type={resolvedType}\r\n                    disabled={disabled}\r\n                    required={required}\r\n                    aria-invalid={hasError || undefined}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    onMouseDown={handleMouseDown}\r\n                    onFocus={handleFocus}\r\n                    onBlur={handleBlur}\r\n                    className={cn(\r\n                        TEXT_FIELD_STYLES.recipe({\r\n                            size,\r\n                            hasError,\r\n                            hasStartIcon,\r\n                            hasEndAction,\r\n                        }),\r\n                        className,\r\n                    )}\r\n                    placeholder={placeholder}\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    {...inputProps}\r\n                />\r\n\r\n                {hasEndAction && (\r\n                    <TextFieldEndAction>{resolvedEndAction}</TextFieldEndAction>\r\n                )}\r\n            </Flex>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n}) as unknown as TextFieldCompound\r\n\r\nTextField.displayName = 'TextField'\r\nTextField.Label = TextFieldLabel\r\nTextField.StartIcon = TextFieldStartIcon\r\nTextField.EndAction = TextFieldEndAction\r\n\r\nexport default TextField\r\n"],"names":["TextField","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","resolvedType","isPassword","showPassword","setShowPassword","useTextField","disabled","startIcon","className","width","error","helperText","label","required","showRequiredIndicator","endAction","sizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","IconRegistry","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","TextFieldEndAction","HelperText"],"mappings":"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"}

package/dist/components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit78.css');;/* empty css                                        */var e={root:"_14iivnx0"};exports.TEXT_FIELD_END_ACTION_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit79.css');;/* empty css                                        */var e={root:"_14iivnx0"};exports.TEXT_FIELD_END_ACTION_STYLES=e;
 //# sourceMappingURL=TextFieldEndAction.css.cjs.map

package/dist/components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit78.css';/* empty css                                      */
+import '../../../../../../ui-kit79.css';/* empty css                                      */
 var o = { root: "_14iivnx0" };
 export {
   o as TEXT_FIELD_END_ACTION_STYLES

package/dist/components/forms/text-field/components/text-field-label/TextFieldLabel.cjs

@@ -1,2 +1,2 @@
-"use strict";const i=require("react/jsx-runtime"),l=require("react"),r=require("./styles/TextFieldLabel.css.cjs"),e=l.memo(({htmlFor:s,disabled:t,children:a})=>i.jsx("label",{htmlFor:s,className:r.TEXT_FIELD_LABEL_STYLES.root,"data-disabled":t?"":void 0,children:a}));e.displayName="TextField.Label";module.exports=e;
+"use strict";const e=require("react/jsx-runtime"),l=require("react"),s=require("./styles/TextFieldLabel.css.cjs"),a=l.memo(({htmlFor:i,disabled:r,required:t,children:d})=>e.jsxs("label",{htmlFor:i,className:s.TEXT_FIELD_LABEL_STYLES.root,"data-disabled":r?"":void 0,children:[d,t&&e.jsx("span",{className:s.TEXT_FIELD_LABEL_STYLES.requiredIndicator,"aria-hidden":"true",children:" *"})]}));a.displayName="TextField.Label";module.exports=a;
 //# sourceMappingURL=TextFieldLabel.cjs.map

package/dist/components/forms/text-field/components/text-field-label/TextFieldLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldLabel.cjs","sources":["../../../../../../src/components/forms/text-field/components/text-field-label/TextFieldLabel.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_FIELD_LABEL_STYLES } from '@components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.ts'\r\nimport type {\r\n    TextFieldLabelProps\r\n} from '@components/forms/text-field/components/text-field-label/types/TextFieldLabel.props.ts'\r\n\r\nconst TextFieldLabel: FC<TextFieldLabelProps> = memo(({ htmlFor, disabled, children }) => (\r\n    <label\r\n        htmlFor={htmlFor}\r\n        className={TEXT_FIELD_LABEL_STYLES.root}\r\n        data-disabled={disabled ? '' : undefined}\r\n    >\r\n        {children}\r\n    </label>\r\n))\r\n\r\nTextFieldLabel.displayName = 'TextField.Label'\r\n\r\nexport default TextFieldLabel\r\n"],"names":["TextFieldLabel","memo","htmlFor","disabled","children","jsx","TEXT_FIELD_LABEL_STYLES"],"mappings":"kHAMMA,EAA0CC,EAAAA,KAAK,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,SAAAC,KACvEC,EAAAA,IAAC,QAAA,CACG,QAAAH,EACA,UAAWI,EAAAA,wBAAwB,KACnC,gBAAeH,EAAW,GAAK,OAE9B,SAAAC,CAAA,CACL,CACH,EAEDJ,EAAe,YAAc"}
+{"version":3,"file":"TextFieldLabel.cjs","sources":["../../../../../../src/components/forms/text-field/components/text-field-label/TextFieldLabel.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_FIELD_LABEL_STYLES } from '@components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.ts'\r\nimport type {\r\n    TextFieldLabelProps\r\n} from '@components/forms/text-field/components/text-field-label/types/TextFieldLabel.props.ts'\r\n\r\nconst TextFieldLabel: FC<TextFieldLabelProps> = memo(({ htmlFor, disabled, required, children }) => (\r\n    <label\r\n        htmlFor={htmlFor}\r\n        className={TEXT_FIELD_LABEL_STYLES.root}\r\n        data-disabled={disabled ? '' : undefined}\r\n    >\r\n        {children}\r\n        {required && (\r\n            <span\r\n                className={TEXT_FIELD_LABEL_STYLES.requiredIndicator}\r\n                aria-hidden={'true'}\r\n            >\r\n                {' *'}\r\n            </span>\r\n        )}\r\n    </label>\r\n))\r\n\r\nTextFieldLabel.displayName = 'TextField.Label'\r\n\r\nexport default TextFieldLabel\r\n"],"names":["TextFieldLabel","memo","htmlFor","disabled","required","children","jsxs","TEXT_FIELD_LABEL_STYLES","jsx"],"mappings":"kHAMMA,EAA0CC,EAAAA,KAAK,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,SAAAC,EAAU,SAAAC,KACjFC,EAAAA,KAAC,QAAA,CACG,QAAAJ,EACA,UAAWK,EAAAA,wBAAwB,KACnC,gBAAeJ,EAAW,GAAK,OAE9B,SAAA,CAAAE,EACAD,GACGI,EAAAA,IAAC,OAAA,CACG,UAAWD,EAAAA,wBAAwB,kBACnC,cAAa,OAEZ,SAAA,IAAA,CAAA,CACL,CAAA,CAER,CACH,EAEDP,EAAe,YAAc"}

package/dist/components/forms/text-field/components/text-field-label/TextFieldLabel.js

@@ -1,17 +1,27 @@
-import { jsx as l } from "react/jsx-runtime";
-import { memo as m } from "react";
-import { TEXT_FIELD_LABEL_STYLES as t } from "./styles/TextFieldLabel.css.js";
-const d = m(({ htmlFor: e, disabled: a, children: o }) => /* @__PURE__ */ l(
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { memo as s } from "react";
+import { TEXT_FIELD_LABEL_STYLES as e } from "./styles/TextFieldLabel.css.js";
+const t = s(({ htmlFor: a, disabled: r, required: d, children: i }) => /* @__PURE__ */ l(
   "label",
   {
-    htmlFor: e,
-    className: t.root,
-    "data-disabled": a ? "" : void 0,
-    children: o
+    htmlFor: a,
+    className: e.root,
+    "data-disabled": r ? "" : void 0,
+    children: [
+      i,
+      d && /* @__PURE__ */ o(
+        "span",
+        {
+          className: e.requiredIndicator,
+          "aria-hidden": "true",
+          children: " *"
+        }
+      )
+    ]
   }
 ));
-d.displayName = "TextField.Label";
+t.displayName = "TextField.Label";
 export {
-  d as default
+  t as default
 };
 //# sourceMappingURL=TextFieldLabel.js.map

package/dist/components/forms/text-field/components/text-field-label/TextFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldLabel.js","sources":["../../../../../../src/components/forms/text-field/components/text-field-label/TextFieldLabel.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_FIELD_LABEL_STYLES } from '@components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.ts'\r\nimport type {\r\n    TextFieldLabelProps\r\n} from '@components/forms/text-field/components/text-field-label/types/TextFieldLabel.props.ts'\r\n\r\nconst TextFieldLabel: FC<TextFieldLabelProps> = memo(({ htmlFor, disabled, children }) => (\r\n    <label\r\n        htmlFor={htmlFor}\r\n        className={TEXT_FIELD_LABEL_STYLES.root}\r\n        data-disabled={disabled ? '' : undefined}\r\n    >\r\n        {children}\r\n    </label>\r\n))\r\n\r\nTextFieldLabel.displayName = 'TextField.Label'\r\n\r\nexport default TextFieldLabel\r\n"],"names":["TextFieldLabel","memo","htmlFor","disabled","children","jsx","TEXT_FIELD_LABEL_STYLES"],"mappings":";;;AAMA,MAAMA,IAA0CC,EAAK,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,UAAAC,QACvE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,SAAAH;AAAA,IACA,WAAWI,EAAwB;AAAA,IACnC,iBAAeH,IAAW,KAAK;AAAA,IAE9B,UAAAC;AAAA,EAAA;AACL,CACH;AAEDJ,EAAe,cAAc;"}
+{"version":3,"file":"TextFieldLabel.js","sources":["../../../../../../src/components/forms/text-field/components/text-field-label/TextFieldLabel.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_FIELD_LABEL_STYLES } from '@components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.ts'\r\nimport type {\r\n    TextFieldLabelProps\r\n} from '@components/forms/text-field/components/text-field-label/types/TextFieldLabel.props.ts'\r\n\r\nconst TextFieldLabel: FC<TextFieldLabelProps> = memo(({ htmlFor, disabled, required, children }) => (\r\n    <label\r\n        htmlFor={htmlFor}\r\n        className={TEXT_FIELD_LABEL_STYLES.root}\r\n        data-disabled={disabled ? '' : undefined}\r\n    >\r\n        {children}\r\n        {required && (\r\n            <span\r\n                className={TEXT_FIELD_LABEL_STYLES.requiredIndicator}\r\n                aria-hidden={'true'}\r\n            >\r\n                {' *'}\r\n            </span>\r\n        )}\r\n    </label>\r\n))\r\n\r\nTextFieldLabel.displayName = 'TextField.Label'\r\n\r\nexport default TextFieldLabel\r\n"],"names":["TextFieldLabel","memo","htmlFor","disabled","required","children","jsxs","TEXT_FIELD_LABEL_STYLES","jsx"],"mappings":";;;AAMA,MAAMA,IAA0CC,EAAK,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,UAAAC,QACjF,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,SAAAJ;AAAA,IACA,WAAWK,EAAwB;AAAA,IACnC,iBAAeJ,IAAW,KAAK;AAAA,IAE9B,UAAA;AAAA,MAAAE;AAAA,MACAD,KACG,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWD,EAAwB;AAAA,UACnC,eAAa;AAAA,UAEZ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAER,CACH;AAEDP,EAAe,cAAc;"}

package/dist/components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit81.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                    */var e={root:"_1uvjcr80"};exports.TEXT_FIELD_LABEL_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit75.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                    */var r={root:"_1uvjcr80",requiredIndicator:"_1uvjcr81"};exports.TEXT_FIELD_LABEL_STYLES=r;
 //# sourceMappingURL=TextFieldLabel.css.cjs.map

package/dist/components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.d.ts

@@ -1,3 +1,4 @@
 export declare const TEXT_FIELD_LABEL_STYLES: {
     root: string;
+    requiredIndicator: string;
 };

package/dist/components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.js

@@ -1,8 +1,8 @@
-import '../../../../../../ui-kit81.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit75.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                                      */
 /* empty css                                  */
-var p = { root: "_1uvjcr80" };
+var i = { root: "_1uvjcr80", requiredIndicator: "_1uvjcr81" };
 export {
-  p as TEXT_FIELD_LABEL_STYLES
+  i as TEXT_FIELD_LABEL_STYLES
 };
 //# sourceMappingURL=TextFieldLabel.css.js.map

package/dist/components/forms/text-field/components/text-field-label/types/TextFieldLabel.props.d.ts

@@ -2,5 +2,6 @@ import { ReactNode } from 'react';
 export type TextFieldLabelProps = {
     htmlFor?: string;
     disabled?: boolean;
+    required?: boolean;
     children: ReactNode;
 };

package/dist/components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit93.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                        */var e={root:"_1hy9fia0"};exports.TEXT_FIELD_START_ICON_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit80.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                        */var e={root:"_1hy9fia0"};exports.TEXT_FIELD_START_ICON_STYLES=e;
 //# sourceMappingURL=TextFieldStartIcon.css.cjs.map

package/dist/components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit93.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit80.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                                      */
 /* empty css                                      */
 var T = { root: "_1hy9fia0" };

package/dist/components/forms/text-field/styles/TextField.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit67.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                               */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:e.createRuntimeFn({defaultClassName:"_1ugc12d0",variantClassNames:{size:{sm:"_1ugc12d1",md:"_1ugc12d2",lg:"_1ugc12d3"},hasError:{true:"_1ugc12d4",false:"_1ugc12d5"},hasStartIcon:{true:"_1ugc12d6",false:"_1ugc12d7"},hasEndAction:{true:"_1ugc12d8",false:"_1ugc12d9"}},defaultVariants:{size:"md",hasError:!1,hasStartIcon:!1,hasEndAction:!1},compoundVariants:[[{size:"sm",hasStartIcon:!0},"_1ugc12da"],[{size:"md",hasStartIcon:!0},"_1ugc12db"],[{size:"lg",hasStartIcon:!0},"_1ugc12dc"],[{size:"sm",hasEndAction:!0},"_1ugc12dd"],[{size:"md",hasEndAction:!0},"_1ugc12de"],[{size:"lg",hasEndAction:!0},"_1ugc12df"]]})};exports.TEXT_FIELD_STYLES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit23.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                               */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:e.createRuntimeFn({defaultClassName:"_1ugc12d0",variantClassNames:{size:{sm:"_1ugc12d1",md:"_1ugc12d2",lg:"_1ugc12d3"},hasError:{true:"_1ugc12d4",false:"_1ugc12d5"},hasStartIcon:{true:"_1ugc12d6",false:"_1ugc12d7"},hasEndAction:{true:"_1ugc12d8",false:"_1ugc12d9"}},defaultVariants:{size:"md",hasError:!1,hasStartIcon:!1,hasEndAction:!1},compoundVariants:[[{size:"sm",hasStartIcon:!0},"_1ugc12da"],[{size:"md",hasStartIcon:!0},"_1ugc12db"],[{size:"lg",hasStartIcon:!0},"_1ugc12dc"],[{size:"sm",hasEndAction:!0},"_1ugc12dd"],[{size:"md",hasEndAction:!0},"_1ugc12de"],[{size:"lg",hasEndAction:!0},"_1ugc12df"]]})};exports.TEXT_FIELD_STYLES=a;
 //# sourceMappingURL=TextField.css.cjs.map