@choco-vanille/ui 1.1.2 → 1.3.0

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

@@ -1,77 +1,74 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { Switch as h } from "@base-ui/react/switch";
-import { memo as v, useId as x, useCallback as N } from "react";
-import y from "../../foundation/typography/Typography.js";
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import { Switch as d } from "@base-ui/react/switch";
+import { memo as S, useId as b } from "react";
+import v from "../../foundation/typography/Typography.js";
 import "../../foundation/typography/styles/Typography.css.js";
-import C from "../_shared/components/helper-text/HelperText.js";
-import f from "../../layout/flex/Flex.js";
+import x from "../_shared/components/helper-text/HelperText.js";
+import h from "../../layout/flex/Flex.js";
 import "../../layout/flex/styles/Flex.css.js";
-import { cn as m } from "../../../utils/cn.js";
+import { cn as n } from "../../../utils/cn.js";
 import { SWITCH_STYLES as r } from "./styles/Switch.css.js";
-const D = v(({ label: e, helperText: i, error: o, id: u, className: g, disabled: t, size: l = "md", onCheckedChange: c, ...b }) => {
-  const w = x(), s = u ?? (e ? w : void 0), n = !!o, p = i || o ? `${s}-helper` : void 0, I = N(
-    (S) => c?.(S, { reason: "none" }),
-    [c]
-  );
-  return /* @__PURE__ */ d(
-    f,
+const N = S(({ label: a, helperText: t, error: o, id: f, className: u, disabled: e, size: l = "md", onCheckedChange: g, ...w }) => {
+  const I = b(), m = f ?? (a ? I : void 0), s = !!o, c = t || o ? `${m}-helper` : void 0;
+  return /* @__PURE__ */ p(
+    h,
     {
       as: "span",
       inline: !0,
       flexDirection: "column",
       gap: "xs",
       alignItems: "start",
-      className: m(r.wrapper, t && r.wrapperDisabled),
+      className: n(r.wrapper, e && r.wrapperDisabled),
       children: [
-        /* @__PURE__ */ d(
-          f,
+        /* @__PURE__ */ p(
+          h,
           {
             as: "span",
             inline: !0,
             gap: "sm",
             alignItems: "center",
             children: [
-              /* @__PURE__ */ a(
-                h.Root,
+              /* @__PURE__ */ i(
+                d.Root,
                 {
-                  id: s,
-                  disabled: t,
-                  "aria-describedby": p,
-                  "aria-invalid": n || void 0,
-                  className: m(r.root({ size: l, error: n }), g),
-                  onCheckedChange: I,
-                  ...b,
-                  children: /* @__PURE__ */ a(h.Thumb, { className: r.thumb({ size: l }) })
+                  id: m,
+                  disabled: e,
+                  "aria-describedby": c,
+                  "aria-invalid": s || void 0,
+                  className: n(r.root({ size: l, error: s }), u),
+                  onCheckedChange: g,
+                  ...w,
+                  children: /* @__PURE__ */ i(d.Thumb, { className: r.thumb({ size: l }) })
                 }
               ),
-              e && /* @__PURE__ */ a(
-                y,
+              a && /* @__PURE__ */ i(
+                v,
                 {
                   as: "label",
                   variant: "label",
                   color: "foreground",
-                  htmlFor: s,
-                  className: m(r.label, t && r.labelDisabled),
-                  children: e
+                  htmlFor: m,
+                  className: n(r.label, e && r.labelDisabled),
+                  children: a
                 }
               )
             ]
           }
         ),
-        (o || i) && /* @__PURE__ */ a(
-          C,
+        (o || t) && /* @__PURE__ */ i(
+          x,
           {
-            id: p,
-            hasError: n,
-            children: o ?? i
+            id: c,
+            hasError: s,
+            children: o ?? t
           }
         )
       ]
     }
   );
 });
-D.displayName = "Switch";
+N.displayName = "Switch";
 export {
-  D as default
+  N as default
 };
 //# sourceMappingURL=Switch.js.map

package/dist/components/forms/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from '@base-ui/react/switch'\r\nimport { memo, useCallback, useId, type FC } from 'react'\r\n\r\nimport { Typography } from '@components/foundation/typography'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { SWITCH_STYLES } from '@components/forms/switch/styles/Switch.css.ts'\r\nimport type { SwitchProps } from '@components/forms/switch/types/Switch.props.ts'\r\n\r\n/**\r\n * A styled switch control built on top of `@base-ui/react/switch`.\r\n *\r\n * Supports controlled (`checked` + `onCheckedChange`) and uncontrolled\r\n * (`defaultChecked`) modes, plus an optional inline `label`.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Switch label=\"Airplane mode\" checked={enabled} onCheckedChange={setEnabled} />\r\n * ```\r\n */\r\nconst Switch: FC<SwitchProps> = memo(({ label, helperText, error, id, className, disabled, size = 'md', onCheckedChange, ...props }) => {\r\n    const generatedId = useId()\r\n    const switchId = id ?? (label ? generatedId : undefined)\r\n    const hasError = Boolean(error)\r\n    const helperId = (helperText || error) ? `${switchId}-helper` : undefined\r\n\r\n    const handleCheckedChange = useCallback(\r\n        (checked: boolean) => onCheckedChange?.(checked, { reason: 'none' } as never),\r\n        [onCheckedChange],\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            as={'span'}\r\n            inline\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            alignItems={'start'}\r\n            className={cn(SWITCH_STYLES.wrapper, disabled && SWITCH_STYLES.wrapperDisabled)}\r\n        >\r\n            <Flex\r\n                as={'span'}\r\n                inline\r\n                gap={'sm'}\r\n                alignItems={'center'}\r\n            >\r\n                <BaseSwitch.Root\r\n                    id={switchId}\r\n                    disabled={disabled}\r\n                    aria-describedby={helperId}\r\n                    aria-invalid={hasError || undefined}\r\n                    className={cn(SWITCH_STYLES.root({ size, error: hasError }), className)}\r\n                    onCheckedChange={handleCheckedChange}\r\n                    {...props}\r\n                >\r\n                    <BaseSwitch.Thumb className={SWITCH_STYLES.thumb({ size })} />\r\n                </BaseSwitch.Root>\r\n\r\n                {label && (\r\n                    <Typography\r\n                        as={'label'}\r\n                        variant={'label'}\r\n                        color={'foreground'}\r\n                        htmlFor={switchId}\r\n                        className={cn(SWITCH_STYLES.label, disabled && SWITCH_STYLES.labelDisabled)}\r\n                    >\r\n                        {label}\r\n                    </Typography>\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})\r\n\r\nSwitch.displayName = 'Switch'\r\n\r\nexport default Switch\r\n"],"names":["Switch","memo","label","helperText","error","id","className","disabled","size","onCheckedChange","props","generatedId","useId","switchId","hasError","helperId","handleCheckedChange","useCallback","checked","jsxs","Flex","cn","SWITCH_STYLES","jsx","BaseSwitch","Typography","HelperText"],"mappings":";;;;;;;;;;AAqBA,MAAMA,IAA0BC,EAAK,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAC,GAAO,IAAAC,GAAI,WAAAC,GAAW,UAAAC,GAAU,MAAAC,IAAO,MAAM,iBAAAC,GAAiB,GAAGC,QAAY;AACpI,QAAMC,IAAcC,EAAA,GACdC,IAAWR,MAAOH,IAAQS,IAAc,SACxCG,IAAW,EAAQV,GACnBW,IAAYZ,KAAcC,IAAS,GAAGS,CAAQ,YAAY,QAE1DG,IAAsBC;AAAA,IACxB,CAACC,MAAqBT,IAAkBS,GAAS,EAAE,QAAQ,QAAiB;AAAA,IAC5E,CAACT,CAAe;AAAA,EAAA;AAGpB,SACI,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ,QAAM;AAAA,MACN,eAAe;AAAA,MACf,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,WAAWC,EAAGC,EAAc,SAASf,KAAYe,EAAc,eAAe;AAAA,MAE9E,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,QAAM;AAAA,YACN,KAAK;AAAA,YACL,YAAY;AAAA,YAEZ,UAAA;AAAA,cAAA,gBAAAG;AAAA,gBAACC,EAAW;AAAA,gBAAX;AAAA,kBACG,IAAIX;AAAA,kBACJ,UAAAN;AAAA,kBACA,oBAAkBQ;AAAA,kBAClB,gBAAcD,KAAY;AAAA,kBAC1B,WAAWO,EAAGC,EAAc,KAAK,EAAE,MAAAd,GAAM,OAAOM,GAAU,GAAGR,CAAS;AAAA,kBACtE,iBAAiBU;AAAA,kBAChB,GAAGN;AAAA,kBAEJ,UAAA,gBAAAa,EAACC,EAAW,OAAX,EAAiB,WAAWF,EAAc,MAAM,EAAE,MAAAd,EAAA,CAAM,EAAA,CAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAG/DN,KACG,gBAAAqB;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,SAAS;AAAA,kBACT,OAAO;AAAA,kBACP,SAASZ;AAAA,kBACT,WAAWQ,EAAGC,EAAc,OAAOf,KAAYe,EAAc,aAAa;AAAA,kBAEzE,UAAApB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL;AAAA,UAAA;AAAA,QAAA;AAAA,SAINE,KAASD,MACP,gBAAAoB;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,IAAIX;AAAA,YACJ,UAAAD;AAAA,YAEC,UAAAV,KAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAEDH,EAAO,cAAc;"}
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from '@base-ui/react/switch'\r\nimport { memo, useId, type FC } from 'react'\r\n\r\nimport { Typography } from '@components/foundation/typography'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { SWITCH_STYLES } from '@components/forms/switch/styles/Switch.css.ts'\r\nimport type { SwitchProps } from '@components/forms/switch/types/Switch.props.ts'\r\n\r\n/**\r\n * A styled switch control built on top of `@base-ui/react/switch`.\r\n *\r\n * Supports controlled (`checked` + `onCheckedChange`) and uncontrolled\r\n * (`defaultChecked`) modes, plus an optional inline `label`.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Switch label=\"Airplane mode\" checked={enabled} onCheckedChange={setEnabled} />\r\n * ```\r\n */\r\nconst Switch: FC<SwitchProps> = memo(({ label, helperText, error, id, className, disabled, size = 'md', onCheckedChange, ...props }) => {\r\n    const generatedId = useId()\r\n    const switchId = id ?? (label ? generatedId : undefined)\r\n    const hasError = Boolean(error)\r\n    const helperId = (helperText || error) ? `${switchId}-helper` : undefined\r\n\r\n    return (\r\n        <Flex\r\n            as={'span'}\r\n            inline\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            alignItems={'start'}\r\n            className={cn(SWITCH_STYLES.wrapper, disabled && SWITCH_STYLES.wrapperDisabled)}\r\n        >\r\n            <Flex\r\n                as={'span'}\r\n                inline\r\n                gap={'sm'}\r\n                alignItems={'center'}\r\n            >\r\n                <BaseSwitch.Root\r\n                    id={switchId}\r\n                    disabled={disabled}\r\n                    aria-describedby={helperId}\r\n                    aria-invalid={hasError || undefined}\r\n                    className={cn(SWITCH_STYLES.root({ size, error: hasError }), className)}\r\n                    onCheckedChange={onCheckedChange}\r\n                    {...props}\r\n                >\r\n                    <BaseSwitch.Thumb className={SWITCH_STYLES.thumb({ size })} />\r\n                </BaseSwitch.Root>\r\n\r\n                {label && (\r\n                    <Typography\r\n                        as={'label'}\r\n                        variant={'label'}\r\n                        color={'foreground'}\r\n                        htmlFor={switchId}\r\n                        className={cn(SWITCH_STYLES.label, disabled && SWITCH_STYLES.labelDisabled)}\r\n                    >\r\n                        {label}\r\n                    </Typography>\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})\r\n\r\nSwitch.displayName = 'Switch'\r\n\r\nexport default Switch\r\n"],"names":["Switch","memo","label","helperText","error","id","className","disabled","size","onCheckedChange","props","generatedId","useId","switchId","hasError","helperId","jsxs","Flex","cn","SWITCH_STYLES","jsx","BaseSwitch","Typography","HelperText"],"mappings":";;;;;;;;;;AAqBA,MAAMA,IAA0BC,EAAK,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAC,GAAO,IAAAC,GAAI,WAAAC,GAAW,UAAAC,GAAU,MAAAC,IAAO,MAAM,iBAAAC,GAAiB,GAAGC,QAAY;AACpI,QAAMC,IAAcC,EAAA,GACdC,IAAWR,MAAOH,IAAQS,IAAc,SACxCG,IAAW,EAAQV,GACnBW,IAAYZ,KAAcC,IAAS,GAAGS,CAAQ,YAAY;AAEhE,SACI,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ,QAAM;AAAA,MACN,eAAe;AAAA,MACf,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,WAAWC,EAAGC,EAAc,SAASZ,KAAYY,EAAc,eAAe;AAAA,MAE9E,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,QAAM;AAAA,YACN,KAAK;AAAA,YACL,YAAY;AAAA,YAEZ,UAAA;AAAA,cAAA,gBAAAG;AAAA,gBAACC,EAAW;AAAA,gBAAX;AAAA,kBACG,IAAIR;AAAA,kBACJ,UAAAN;AAAA,kBACA,oBAAkBQ;AAAA,kBAClB,gBAAcD,KAAY;AAAA,kBAC1B,WAAWI,EAAGC,EAAc,KAAK,EAAE,MAAAX,GAAM,OAAOM,GAAU,GAAGR,CAAS;AAAA,kBACtE,iBAAAG;AAAA,kBACC,GAAGC;AAAA,kBAEJ,UAAA,gBAAAU,EAACC,EAAW,OAAX,EAAiB,WAAWF,EAAc,MAAM,EAAE,MAAAX,EAAA,CAAM,EAAA,CAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAG/DN,KACG,gBAAAkB;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,SAAS;AAAA,kBACT,OAAO;AAAA,kBACP,SAAST;AAAA,kBACT,WAAWK,EAAGC,EAAc,OAAOZ,KAAYY,EAAc,aAAa;AAAA,kBAEzE,UAAAjB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL;AAAA,UAAA;AAAA,QAAA;AAAA,SAINE,KAASD,MACP,gBAAAiB;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,IAAIR;AAAA,YACJ,UAAAD;AAAA,YAEC,UAAAV,KAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAEDH,EAAO,cAAc;"}

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

@@ -1,2 +1,2 @@
-"use strict";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:R,maxRows:N,...B}=u,f=k??"md",w=t.useRef(null),K=t.useCallback(s=>{w.current=s,typeof r=="function"?r(s):r&&(r.current=s)},[r]),{isEnabled:M,resize:b}=X.useAutoResizeTextArea(w,{minRows:R??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:f}),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:f,hasError:o,hasStartIcon:I,hasEndAction:x}),S),placeholder:D,value:m,onChange:P,onKeyDown:F,onKeyUp:L,rows:M?R??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";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/components/text-area-end-action/TextAreaEndAction.cjs

@@ -1,2 +1,2 @@
-"use strict";const r=require("react/jsx-runtime"),s=require("react"),o=require("./styles/TextAreaEndAction.css.cjs"),c=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const e=s.memo(({children:t})=>r.jsx(c,{className:o.TEXT_AREA_END_ACTION_STYLES.root,children:t}));e.displayName="TextArea.EndAction";module.exports=e;
+"use strict";const t=require("react/jsx-runtime"),s=require("react"),o=require("./styles/TextAreaEndAction.css.cjs"),c=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const e=s.memo(({children:r})=>t.jsx(c,{className:o.TEXT_AREA_END_ACTION_STYLES.root,children:r}));e.displayName="TextArea.EndAction";module.exports=e;
 //# sourceMappingURL=TextAreaEndAction.cjs.map

package/dist/components/forms/text-area/constants/index.d.ts

@@ -0,0 +1,5 @@
+export declare const TEXT_AREA_SIZES: {
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+};

package/dist/components/forms/text-area/index.d.ts

@@ -5,5 +5,6 @@ export { TEXT_AREA_START_ICON_STYLES } from './components/text-area-start-icon/s
 export { TEXT_AREA_END_ACTION_STYLES } from './components/text-area-end-action/styles/TextAreaEndAction.css.ts';
 export type { TextAreaProps } from './types/TextArea.props.ts';
 export type { TextAreaSize } from './types/TextArea.types.ts';
+export type { TextAreaEndActionProps } from './components/text-area-end-action/types/TextAreaEndAction.props.ts';
 export type { TextAreaLabelProps } from './components/text-area-label/types/TextAreaLabel.props.ts';
 export type { TextAreaStartIconProps } from './components/text-area-start-icon/types/TextAreaStartIcon.types.ts';

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

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const TEXT_AREA_STYLES: {
     recipe: RuntimeFn<{
         size: {
@@ -50,4 +50,3 @@ export declare const TEXT_AREA_STYLES: {
         };
     }>;
 };
-export type TextAreaRecipeVariants = NonNullable<RecipeVariants<typeof TEXT_AREA_STYLES.recipe>>;

package/dist/components/forms/text-area/types/TextArea.props.d.ts

@@ -1,7 +1,7 @@
 import { RefAttributes } from 'react';
-import { TextAreaRecipeVariants } from '../styles/TextArea.css.ts';
+import { TextAreaSize } from './TextArea.types.ts';
 import type * as React from 'react';
-export type TextAreaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & RefAttributes<HTMLTextAreaElement> & Pick<TextAreaRecipeVariants, 'size'> & {
+export type TextAreaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & RefAttributes<HTMLTextAreaElement> & {
     /** Text label rendered above the textarea, linked via Radix Label for accessibility. */
     label?: string;
     /** Helper text rendered below the textarea. Hidden when `error` is provided. */
@@ -14,6 +14,8 @@ export type TextAreaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElemen
     endAction?: React.ReactNode;
     /** CSS width of the outer wrapper. Defaults to `100%`. */
     width?: React.CSSProperties['width'];
+    /** Size variant of the textarea. Defaults to `md`. */
+    size?: TextAreaSize;
     /** Number of visible text lines. Maps to the native `rows` attribute. */
     rows?: number;
     /** Minimum number of visible text lines when auto-resizing. */

package/dist/components/forms/text-area/types/TextArea.types.d.ts

@@ -1,2 +1,3 @@
+import { TEXT_AREA_SIZES } from '../constants';
 /** Size variants for the TextArea component. */
-export type TextAreaSize = 'sm' | 'md' | 'lg';
+export type TextAreaSize = (typeof TEXT_AREA_SIZES)[keyof typeof TEXT_AREA_SIZES];

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

@@ -1,2 +1,2 @@
-"use strict";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:R,ref:k,type:Y,...B}=c,t=A??"md",C=y.useCallback(()=>u(!i),[u,i]),N=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:C}):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:k,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:R,...B}),a&&e.jsx(m,{children:N})]}),(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";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;
 //# sourceMappingURL=TextField.cjs.map

package/dist/components/forms/text-field/components/index.d.ts

@@ -4,3 +4,4 @@ export { default as TextFieldStartIcon } from './text-field-start-icon/TextField
 export { TEXT_FIELD_START_ICON_STYLES } from './text-field-start-icon/styles/TextFieldStartIcon.css.ts';
 export { default as TextFieldEndAction } from './text-field-end-action/TextFieldEndAction.tsx';
 export { TEXT_FIELD_END_ACTION_STYLES } from './text-field-end-action/styles/TextFieldEndAction.css.ts';
+export type { TextFieldEndActionProps } from './text-field-end-action/types/TextFieldEndAction.props.ts';

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

@@ -1 +1 @@
-{"version":3,"file":"TextFieldEndAction.cjs","sources":["../../../../../../src/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.tsx"],"sourcesContent":["import { memo, type FC, type ReactNode } from 'react'\r\nimport { TEXT_FIELD_END_ACTION_STYLES } from '@components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.ts'\r\n\r\ntype TextFieldEndActionProps = {\r\n    children: ReactNode\r\n}\r\n\r\nconst TextFieldEndAction: FC<TextFieldEndActionProps> = memo(({ children }) => (\r\n    <span className={TEXT_FIELD_END_ACTION_STYLES.root}>\r\n        {children}\r\n    </span>\r\n))\r\n\r\nTextFieldEndAction.displayName = 'TextField.EndAction'\r\n\r\nexport default TextFieldEndAction\r\n"],"names":["TextFieldEndAction","memo","children","jsx","TEXT_FIELD_END_ACTION_STYLES"],"mappings":"sHAOMA,EAAkDC,EAAAA,KAAK,CAAC,CAAE,SAAAC,CAAA,IAC5DC,EAAAA,IAAC,OAAA,CAAK,UAAWC,EAAAA,6BAA6B,KACzC,SAAAF,CAAA,CACL,CACH,EAEDF,EAAmB,YAAc"}
+{"version":3,"file":"TextFieldEndAction.cjs","sources":["../../../../../../src/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_FIELD_END_ACTION_STYLES } from '@components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.ts'\r\nimport type { TextFieldEndActionProps } from '@components/forms/text-field/components/text-field-end-action/types/TextFieldEndAction.props.ts'\r\n\r\nconst TextFieldEndAction: FC<TextFieldEndActionProps> = memo(({ children }) => (\r\n    <span className={TEXT_FIELD_END_ACTION_STYLES.root}>\r\n        {children}\r\n    </span>\r\n))\r\n\r\nTextFieldEndAction.displayName = 'TextField.EndAction'\r\n\r\nexport default TextFieldEndAction\r\n"],"names":["TextFieldEndAction","memo","children","jsx","TEXT_FIELD_END_ACTION_STYLES"],"mappings":"sHAIMA,EAAkDC,EAAAA,KAAK,CAAC,CAAE,SAAAC,CAAA,IAC5DC,EAAAA,IAAC,OAAA,CAAK,UAAWC,EAAAA,6BAA6B,KACzC,SAAAF,CAAA,CACL,CACH,EAEDF,EAAmB,YAAc"}

package/dist/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.d.ts

@@ -1,6 +1,4 @@
-import { FC, ReactNode } from 'react';
-type TextFieldEndActionProps = {
-    children: ReactNode;
-};
+import { FC } from 'react';
+import { TextFieldEndActionProps } from './types/TextFieldEndAction.props.ts';
 declare const TextFieldEndAction: FC<TextFieldEndActionProps>;
 export default TextFieldEndAction;

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

@@ -1 +1 @@
-{"version":3,"file":"TextFieldEndAction.js","sources":["../../../../../../src/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.tsx"],"sourcesContent":["import { memo, type FC, type ReactNode } from 'react'\r\nimport { TEXT_FIELD_END_ACTION_STYLES } from '@components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.ts'\r\n\r\ntype TextFieldEndActionProps = {\r\n    children: ReactNode\r\n}\r\n\r\nconst TextFieldEndAction: FC<TextFieldEndActionProps> = memo(({ children }) => (\r\n    <span className={TEXT_FIELD_END_ACTION_STYLES.root}>\r\n        {children}\r\n    </span>\r\n))\r\n\r\nTextFieldEndAction.displayName = 'TextField.EndAction'\r\n\r\nexport default TextFieldEndAction\r\n"],"names":["TextFieldEndAction","memo","children","jsx","TEXT_FIELD_END_ACTION_STYLES"],"mappings":";;;AAOA,MAAMA,IAAkDC,EAAK,CAAC,EAAE,UAAAC,EAAA,MAC5D,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAA6B,MACzC,UAAAF,EAAA,CACL,CACH;AAEDF,EAAmB,cAAc;"}
+{"version":3,"file":"TextFieldEndAction.js","sources":["../../../../../../src/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_FIELD_END_ACTION_STYLES } from '@components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.ts'\r\nimport type { TextFieldEndActionProps } from '@components/forms/text-field/components/text-field-end-action/types/TextFieldEndAction.props.ts'\r\n\r\nconst TextFieldEndAction: FC<TextFieldEndActionProps> = memo(({ children }) => (\r\n    <span className={TEXT_FIELD_END_ACTION_STYLES.root}>\r\n        {children}\r\n    </span>\r\n))\r\n\r\nTextFieldEndAction.displayName = 'TextField.EndAction'\r\n\r\nexport default TextFieldEndAction\r\n"],"names":["TextFieldEndAction","memo","children","jsx","TEXT_FIELD_END_ACTION_STYLES"],"mappings":";;;AAIA,MAAMA,IAAkDC,EAAK,CAAC,EAAE,UAAAC,EAAA,MAC5D,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAA6B,MACzC,UAAAF,EAAA,CACL,CACH;AAEDF,EAAmB,cAAc;"}

package/dist/components/forms/text-field/components/text-field-end-action/types/TextFieldEndAction.props.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+/** Props for the `TextField.EndAction` slot. */
+export type TextFieldEndActionProps = {
+    children: ReactNode;
+};

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"),o=require("./styles/TextFieldLabel.css.cjs"),e=l.memo(({htmlFor:s,disabled:t,children:a})=>i.jsx("label",{htmlFor:s,className:o.TEXT_FIELD_LABEL_STYLES.root,"data-disabled":t?"":void 0,children:a}));e.displayName="TextField.Label";module.exports=e;
+"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;
 //# sourceMappingURL=TextFieldLabel.cjs.map

package/dist/components/forms/text-field/constants/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../../src/components/forms/text-field/constants/index.ts"],"sourcesContent":["import type { TextFieldSize } from '@components'\r\n\r\n/** Maps field size to the IconButton size used in the end-action slot. */\r\nexport const fieldSizeToActionSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'> = {\r\n    sm: 'sm',\r\n    md: 'sm',\r\n    lg: 'md',\r\n}\r\n"],"names":["fieldSizeToActionSize"],"mappings":"gFAGO,MAAMA,EAAyE,CAClF,GAAI,KACJ,GAAI,KACJ,GAAI,IACR"}
+{"version":3,"file":"index.cjs","sources":["../../../../../src/components/forms/text-field/constants/index.ts"],"sourcesContent":["import type { TextFieldSize } from '@components'\r\n\r\n/** Maps field size to the IconButton size used in the end-action slot. */\r\nexport const fieldSizeToActionSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'> = {\r\n    sm: 'sm',\r\n    md: 'sm',\r\n    lg: 'md',\r\n}\r\n\r\nexport const TEXT_FIELD_SIZES = {\r\n    sm: 'sm',\r\n    md: 'md',\r\n    lg: 'lg',\r\n} as const\r\n"],"names":["fieldSizeToActionSize"],"mappings":"gFAGO,MAAMA,EAAyE,CAClF,GAAI,KACJ,GAAI,KACJ,GAAI,IACR"}

package/dist/components/forms/text-field/constants/index.d.ts

@@ -1,3 +1,8 @@
 import { TextFieldSize } from '../../..';
 /** Maps field size to the IconButton size used in the end-action slot. */
 export declare const fieldSizeToActionSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'>;
+export declare const TEXT_FIELD_SIZES: {
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+};

package/dist/components/forms/text-field/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/forms/text-field/constants/index.ts"],"sourcesContent":["import type { TextFieldSize } from '@components'\r\n\r\n/** Maps field size to the IconButton size used in the end-action slot. */\r\nexport const fieldSizeToActionSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'> = {\r\n    sm: 'sm',\r\n    md: 'sm',\r\n    lg: 'md',\r\n}\r\n"],"names":["fieldSizeToActionSize"],"mappings":"AAGO,MAAMA,IAAyE;AAAA,EAClF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/forms/text-field/constants/index.ts"],"sourcesContent":["import type { TextFieldSize } from '@components'\r\n\r\n/** Maps field size to the IconButton size used in the end-action slot. */\r\nexport const fieldSizeToActionSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'> = {\r\n    sm: 'sm',\r\n    md: 'sm',\r\n    lg: 'md',\r\n}\r\n\r\nexport const TEXT_FIELD_SIZES = {\r\n    sm: 'sm',\r\n    md: 'md',\r\n    lg: 'lg',\r\n} as const\r\n"],"names":["fieldSizeToActionSize"],"mappings":"AAGO,MAAMA,IAAyE;AAAA,EAClF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;"}

package/dist/components/forms/text-field/index.d.ts

@@ -7,3 +7,4 @@ export type { TextFieldProps } from './types/TextField.props.ts';
 export type { TextFieldSize } from './types/TextField.types.ts';
 export type { TextFieldLabelProps } from './components/text-field-label/types/TextFieldLabel.props.ts';
 export type { TextFieldStartIconProps } from './components/text-field-start-icon/types/TextFieldStartIcon.types.ts';
+export type { TextFieldEndActionProps } from './components/text-field-end-action/types/TextFieldEndAction.props.ts';

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

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const TEXT_FIELD_STYLES: {
     recipe: RuntimeFn<{
         size: {
@@ -27,7 +27,7 @@ export declare const TEXT_FIELD_STYLES: {
                     };
                     '&:focus-visible': {
                         borderColor: `var(--${string})`;
-                        boxShadow: `0 0 0 2px var(--${string}), 0 0 0 4px var(--${string})`;
+                        boxShadow: "none";
                     };
                     '&[data-mouse-focus]:focus-visible': {
                         boxShadow: "none";
@@ -47,4 +47,3 @@ export declare const TEXT_FIELD_STYLES: {
         };
     }>;
 };
-export type TextFieldInputRecipeVariants = NonNullable<RecipeVariants<typeof TEXT_FIELD_STYLES.recipe>>;

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

@@ -1,7 +1,9 @@
 import { RefAttributes } from 'react';
-import { TextFieldInputRecipeVariants } from '../styles/TextField.css.ts';
+import { TextFieldSize } from './TextField.types.ts';
 import type * as React from 'react';
-export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & RefAttributes<HTMLInputElement> & Pick<TextFieldInputRecipeVariants, 'size'> & {
+export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & RefAttributes<HTMLInputElement> & {
+    /** Input size. @default 'md' */
+    size?: TextFieldSize;
     /** Text label rendered above the input, linked via Radix Label for accessibility. */
     label?: string;
     /** Helper text rendered below the input. Hidden when `error` is provided. */

package/dist/components/forms/text-field/types/TextField.types.d.ts

@@ -1,2 +1,3 @@
+import { TEXT_FIELD_SIZES } from '../constants';
 /** Size variants for the TextField component. */
-export type TextFieldSize = 'sm' | 'md' | 'lg';
+export type TextFieldSize = (typeof TEXT_FIELD_SIZES)[keyof typeof TEXT_FIELD_SIZES];

package/dist/components/foundation/icon/Icon.cjs

@@ -1,2 +1,2 @@
-"use strict";const c=require("react/jsx-runtime"),j=require("@iconify/react"),v=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const S=require("./styles/Icon.css.cjs"),h=require("../../../utils/cn.cjs"),C=require("react"),r=C.memo(({icon:i,size:n,spin:o,color:t,padding:a,borderColor:l,backgroundColor:u,borderWidth:d,borderStyle:m,borderRadius:p,"aria-label":e,className:q,style:x,...I})=>{const s=e===void 0,y=S.ICON_STYLES.recipe({size:n,spin:o,color:t}),N={...x};return c.jsx(v,{as:"span",display:"inline-flex",padding:a,borderColor:l,backgroundColor:u,borderWidth:d,borderStyle:m,borderRadius:p,children:c.jsx(j.Icon,{icon:i,"aria-hidden":s,"aria-label":e,role:s?void 0:"img",className:h.cn(y,q),style:N,...I})})});r.displayName="Icon";module.exports=r;
+"use strict";const r=require("react/jsx-runtime"),j=require("@iconify/react"),v=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const S=require("./styles/Icon.css.cjs"),h=require("../../../utils/cn.cjs"),C=require("react"),c=C.memo(({icon:i,size:n,spin:o,color:t,padding:a,borderColor:l,backgroundColor:u,borderWidth:d,borderStyle:m,borderRadius:p,"aria-label":e,className:q,style:x,...I})=>{const s=e===void 0,y=S.ICON_STYLES.recipe({size:n,spin:o,color:t}),N={...x};return r.jsx(v,{as:"span",display:"inline-flex",padding:a,borderColor:l,backgroundColor:u,borderWidth:d,borderStyle:m,borderRadius:p,children:r.jsx(j.Icon,{icon:i,"aria-hidden":s,"aria-label":e,role:s?void 0:"img",className:h.cn(y,q),style:N,...I})})});c.displayName="Icon";module.exports=c;
 //# sourceMappingURL=Icon.cjs.map

package/dist/components/foundation/icon/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Icon } from './Icon.tsx';
 export { ICON_STYLES } from './styles/Icon.css.ts';
 export type { IconProps } from './types/Icon.props.ts';
-export type { IconSize } from './types/Icon.types.ts';
+export type { IconColor, IconSize } from './types/Icon.types.ts';

package/dist/components/foundation/icon/types/Icon.props.d.ts

@@ -1,21 +1,24 @@
 import { IconProps as IconifyProps } from '@iconify/react';
 import { CSSProperties } from 'react';
-import { IconRecipeVariants } from '../styles/Icon.css.ts';
-import { BoxRecipeVariants } from '../../../layout/box';
-import { ThemeColor } from '../../../../theme';
-export type IconProps = Omit<IconifyProps, 'aria-hidden' | 'role'> & IconRecipeVariants & {
+import { BoxBorderRadius, BoxColor, BoxSpace } from '../../../layout/box/types/Box.types.ts';
+import { IconColor, IconSize } from './Icon.types.ts';
+export type IconProps = Omit<IconifyProps, 'aria-hidden' | 'role'> & {
+    /** Icon size. Defaults to `md`. */
+    size?: IconSize;
+    /** Whether the icon should continuously rotate. */
+    spin?: boolean;
     /** Optional theme color token applied to the icon's `color` CSS property. */
-    color?: ThemeColor;
+    color?: IconColor;
     /** Padding token applied to the wrapper around the icon. */
-    padding?: BoxRecipeVariants['padding'];
+    padding?: BoxSpace;
     /** Theme color token applied to the wrapper's border color. */
-    borderColor?: BoxRecipeVariants['borderColor'];
+    borderColor?: BoxColor;
     /** Theme color token applied to the wrapper's background color. */
-    backgroundColor?: BoxRecipeVariants['backgroundColor'];
+    backgroundColor?: BoxColor;
     /** The CSS `border-width` value of the wrapper. */
     borderWidth?: CSSProperties['borderWidth'];
     /** The CSS `border-style` value of the wrapper. */
     borderStyle?: CSSProperties['borderStyle'];
     /** Border radius token applied to the wrapper. */
-    borderRadius?: BoxRecipeVariants['borderRadius'];
+    borderRadius?: BoxBorderRadius;
 };

package/dist/components/foundation/icon/types/Icon.types.d.ts

@@ -1 +1,4 @@
+import { ThemeColorValue } from '../../../../theme';
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Theme color tokens supported by the Icon recipe. */
+export type IconColor = ThemeColorValue;

package/dist/components/foundation/typography/Typography.cjs

@@ -1,2 +1,2 @@
-"use strict";const S=require("react/jsx-runtime"),h=require("./styles/Typography.css.cjs"),A=require("./constants/index.cjs"),N=require("../../../utils/cn.cjs"),j=require("../../../theme/contract.css.cjs"),G=require("react"),r=G.memo(({as:t,variant:e,fontSize:c,fontWeight:n,color:o,textTransform:p,display:i,width:a,minWidth:u,maxWidth:y,opacity:m,flex:T,flexGrow:l,flexShrink:q,letterSpacing:s,ellipsis:E,maxLines:P,className:Y,style:_,ref:d,...g})=>{const x=t??A.TYPOGRAPHY_ELEMENT_MAP[e??"span"]??"span",R={textTransform:p,display:i,width:a,minWidth:u,maxWidth:y,opacity:m,flex:T,flexGrow:l,flexShrink:q,letterSpacing:s?j.vars.letterSpacing[s]:void 0,..._};return S.jsx(x,{ref:d,className:N.cn(h.TYPOGRAPHY_STYLES.recipe({variant:e,fontSize:c,fontWeight:n,ellipsis:E,maxLines:P,color:o}),Y),style:R,...g})});r.displayName="Typography";module.exports=r;
+"use strict";const h=require("react/jsx-runtime"),A=require("./styles/Typography.css.cjs"),N=require("./constants/index.cjs"),R=require("../../../utils/cn.cjs"),j=require("../../../theme/contract.css.cjs"),G=require("react"),r=G.memo(({as:t,variant:e,fontSize:c,fontWeight:n,color:o,textTransform:p,display:i,width:a,minWidth:u,maxWidth:y,opacity:m,flex:T,flexGrow:l,flexShrink:q,letterSpacing:s,ellipsis:E,maxLines:P,className:Y,style:_,ref:d,...g})=>{const x=t??N.TYPOGRAPHY_ELEMENT_MAP[e??"span"]??"span",S={textTransform:p,display:i,width:a,minWidth:u,maxWidth:y,opacity:m,flex:T,flexGrow:l,flexShrink:q,letterSpacing:s?j.vars.letterSpacing[s]:void 0,..._};return h.jsx(x,{ref:d,className:R.cn(A.TYPOGRAPHY_STYLES.recipe({variant:e,fontSize:c,fontWeight:n,ellipsis:E,maxLines:P,color:o}),Y),style:S,...g})});r.displayName="Typography";module.exports=r;
 //# sourceMappingURL=Typography.cjs.map

package/dist/components/foundation/typography/styles/Typography.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const TYPOGRAPHY_STYLES: {
     recipe: RuntimeFn<{
         variant: {
@@ -263,4 +263,3 @@ export declare const TYPOGRAPHY_STYLES: {
         color: Record<"background" | "foreground" | "text" | "textSecondary" | "textTertiary" | "card" | "cardForeground" | "popover" | "popoverForeground" | "muted" | "mutedForeground" | "overlay" | "primary" | "primaryHover" | "primaryActive" | "primaryForeground" | "primarySubtle" | "primarySubtleHover" | "primarySubtleActive" | "primarySubtleForeground" | "primarySubtleBorder" | "link" | "linkHover" | "linkActive" | "secondary" | "secondaryHover" | "secondaryActive" | "secondaryForeground" | "secondarySubtle" | "secondarySubtleHover" | "secondarySubtleActive" | "secondarySubtleForeground" | "secondarySubtleBorder" | "tertiary" | "tertiaryHover" | "tertiaryActive" | "tertiaryForeground" | "tertiarySubtle" | "tertiarySubtleHover" | "tertiarySubtleActive" | "tertiarySubtleForeground" | "tertiarySubtleBorder" | "success" | "successHover" | "successActive" | "successForeground" | "successSubtle" | "successSubtleHover" | "successSubtleActive" | "successSubtleForeground" | "successSubtleBorder" | "warning" | "warningHover" | "warningActive" | "warningForeground" | "warningSubtle" | "warningSubtleHover" | "warningSubtleActive" | "warningSubtleForeground" | "warningSubtleBorder" | "info" | "infoHover" | "infoActive" | "infoForeground" | "infoSubtle" | "infoSubtleHover" | "infoSubtleActive" | "infoSubtleForeground" | "infoSubtleBorder" | "destructive" | "destructiveHover" | "destructiveActive" | "destructiveForeground" | "destructiveSubtle" | "destructiveSubtleHover" | "destructiveSubtleActive" | "destructiveSubtleForeground" | "destructiveSubtleBorder" | "purple" | "purpleHover" | "purpleActive" | "purpleForeground" | "purpleSubtle" | "purpleSubtleHover" | "purpleSubtleActive" | "purpleSubtleForeground" | "purpleSubtleBorder" | "pink" | "pinkHover" | "pinkActive" | "pinkForeground" | "pinkSubtle" | "pinkSubtleHover" | "pinkSubtleActive" | "pinkSubtleForeground" | "pinkSubtleBorder" | "orange" | "orangeHover" | "orangeActive" | "orangeForeground" | "orangeSubtle" | "orangeSubtleHover" | "orangeSubtleActive" | "orangeSubtleForeground" | "orangeSubtleBorder" | "teal" | "tealHover" | "tealActive" | "tealForeground" | "tealSubtle" | "tealSubtleHover" | "tealSubtleActive" | "tealSubtleForeground" | "tealSubtleBorder" | "cyan" | "cyanHover" | "cyanActive" | "cyanForeground" | "cyanSubtle" | "cyanSubtleHover" | "cyanSubtleActive" | "cyanSubtleForeground" | "cyanSubtleBorder" | "indigo" | "indigoHover" | "indigoActive" | "indigoForeground" | "indigoSubtle" | "indigoSubtleHover" | "indigoSubtleActive" | "indigoSubtleForeground" | "indigoSubtleBorder" | "border" | "borderStrong" | "input" | "ring" | "highlight" | "highlightForeground" | "skeleton" | "skeletonForeground" | "transparent", Record<string, string>>;
     }>;
 };
-export type TypographyRecipeVariants = NonNullable<RecipeVariants<typeof TYPOGRAPHY_STYLES.recipe>>;

package/dist/components/foundation/typography/types/Typography.props.d.ts

@@ -1,11 +1,18 @@
-import { TypographyRecipeVariants } from '../styles/Typography.css.ts';
-import { TypographyLetterSpacing } from './Typography.types.ts';
+import { TypographyLetterSpacing, TypographySize, TypographyVariant, TypographyWeight } from './Typography.types.ts';
 import { CSSProperties, RefAttributes } from 'react';
 import { ThemeColor } from '../../../../theme';
 import type * as React from 'react';
-export type TypographyProps = Omit<React.HTMLAttributes<HTMLElement>, 'color'> & RefAttributes<HTMLElement> & TypographyRecipeVariants & {
+export type TypographyProps = Omit<React.HTMLAttributes<HTMLElement>, 'color'> & RefAttributes<HTMLElement> & {
     /** Override the rendered HTML element. */
     as?: React.ElementType;
+    /** Semantic HTML element variant used for default rendering and styles. */
+    variant?: TypographyVariant;
+    /** Font-size token applied to the text. */
+    fontSize?: TypographySize;
+    /** Font-weight token applied to the text. */
+    fontWeight?: TypographyWeight;
+    /** Whether overflowing text should be truncated on one line. */
+    ellipsis?: boolean;
     /** Optional theme color token applied to the text's `color` CSS property. */
     color?: ThemeColor;
     /** CSS `text-transform` value applied to the text. */

package/dist/components/layout/box/Box.cjs

@@ -1,2 +1,2 @@
-"use strict";const g=require("react/jsx-runtime"),ee=require("./styles/Box.css.cjs"),se=require("../../../utils/cn.cjs"),F=require("react"),H=F.memo(({as:I="div",borderRadius:e,padding:s,paddingX:c,paddingY:t,paddingTop:u,paddingRight:x,paddingBottom:q,paddingLeft:N,margin:j,marginX:y,marginY:B,marginTop:_,marginRight:l,marginBottom:v,marginLeft:E,gap:M,columnGap:O,rowGap:S,borderColor:z,backgroundColor:A,boxShadow:D,display:J,width:K,minWidth:P,maxWidth:Q,height:U,minHeight:V,maxHeight:W,overflow:Z,overflowX:$,overflowY:k,position:r,flex:C,flexDirection:L,flexWrap:R,alignSelf:T,alignItems:X,alignContent:Y,justifyContent:f,borderWidth:w,borderTopWidth:G,borderRightWidth:h,borderBottomWidth:m,borderLeftWidth:b,borderStyle:o,className:n,style:i,ref:p,...a})=>{const d=F.useMemo(()=>ee.BOX_STYLES.recipe({borderRadius:e,padding:s,paddingX:c,paddingY:t,paddingTop:u,paddingRight:x,paddingBottom:q,paddingLeft:N,margin:j,marginX:y,marginY:B,marginTop:_,marginRight:l,marginBottom:v,marginLeft:E,gap:M,columnGap:O,rowGap:S,borderColor:z,backgroundColor:A,boxShadow:D}),[e,s,c,t,u,x,q,N,j,y,B,_,l,v,E,M,O,S,z,A,D]);return g.jsx(I,{ref:p,className:se.cn(d,n),style:{display:J,width:K,minWidth:P,maxWidth:Q,height:U,minHeight:V,maxHeight:W,overflow:Z,overflowX:$,overflowY:k,position:r,flex:C,flexDirection:L,flexWrap:R,alignSelf:T,alignItems:X,alignContent:Y,justifyContent:f,borderWidth:w,borderTopWidth:G,borderRightWidth:h,borderBottomWidth:m,borderLeftWidth:b,borderStyle:o,...i},...a})});H.displayName="Box";module.exports=H;
+"use strict";const g=require("react/jsx-runtime"),ee=require("./styles/Box.css.cjs"),se=require("../../../utils/cn.cjs"),D=require("react"),F=D.memo(({as:H="div",borderRadius:e,padding:s,paddingX:c,paddingY:t,paddingTop:u,paddingRight:x,paddingBottom:q,paddingLeft:N,margin:j,marginX:y,marginY:B,marginTop:_,marginRight:l,marginBottom:v,marginLeft:E,gap:M,columnGap:O,rowGap:S,borderColor:r,backgroundColor:z,boxShadow:A,display:I,width:J,minWidth:K,maxWidth:P,height:Q,minHeight:U,maxHeight:V,overflow:W,overflowX:Z,overflowY:$,position:k,flex:C,flexDirection:L,flexWrap:T,alignSelf:X,alignItems:Y,alignContent:f,justifyContent:w,borderWidth:G,borderTopWidth:R,borderRightWidth:h,borderBottomWidth:m,borderLeftWidth:b,borderStyle:o,className:n,style:i,ref:p,...a})=>{const d=D.useMemo(()=>ee.BOX_STYLES.recipe({borderRadius:e,padding:s,paddingX:c,paddingY:t,paddingTop:u,paddingRight:x,paddingBottom:q,paddingLeft:N,margin:j,marginX:y,marginY:B,marginTop:_,marginRight:l,marginBottom:v,marginLeft:E,gap:M,columnGap:O,rowGap:S,borderColor:r,backgroundColor:z,boxShadow:A}),[e,s,c,t,u,x,q,N,j,y,B,_,l,v,E,M,O,S,r,z,A]);return g.jsx(H,{ref:p,className:se.cn(d,n),style:{display:I,width:J,minWidth:K,maxWidth:P,height:Q,minHeight:U,maxHeight:V,overflow:W,overflowX:Z,overflowY:$,position:k,flex:C,flexDirection:L,flexWrap:T,alignSelf:X,alignItems:Y,alignContent:f,justifyContent:w,borderWidth:G,borderTopWidth:R,borderRightWidth:h,borderBottomWidth:m,borderLeftWidth:b,borderStyle:o,...i},...a})});F.displayName="Box";module.exports=F;
 //# sourceMappingURL=Box.cjs.map

package/dist/components/layout/box/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Box } from './Box.tsx';
 export { BOX_STYLES } from './styles/Box.css.ts';
-export type { BoxRecipeVariants } from './styles/Box.css.ts';
 export type { BoxProps } from './types/Box.props.ts';
-export type { BoxVariant } from './types/Box.types.ts';
+export type { BoxBorderRadius, BoxColor, BoxMargin, BoxShadow, BoxSpace, BoxVariant, } from './types/Box.types.ts';

package/dist/components/layout/box/styles/Box.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const BOX_STYLES: {
     recipe: RuntimeFn<{
         borderRadius: {
@@ -928,4 +928,3 @@ export declare const BOX_STYLES: {
         };
     }>;
 };
-export type BoxRecipeVariants = NonNullable<RecipeVariants<typeof BOX_STYLES.recipe>>;

package/dist/components/layout/box/types/Box.props.d.ts

@@ -1,6 +1,5 @@
 import { CSSProperties, HTMLAttributes, RefAttributes } from 'react';
-import { BoxRecipeVariants } from '../styles/Box.css.ts';
-import { BoxVariant } from './Box.types.ts';
+import { BoxBorderRadius, BoxColor, BoxMargin, BoxShadow, BoxSpace, BoxVariant } from './Box.types.ts';
 import type * as React from 'react';
 export type BoxProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
     /** The HTML element to render. Defaults to `div`. */
@@ -54,45 +53,45 @@ export type BoxProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>
     /** The CSS `border-style` value of the element. */
     borderStyle?: CSSProperties['borderStyle'];
     /** The border radius token applied to the element. */
-    borderRadius?: BoxRecipeVariants['borderRadius'];
+    borderRadius?: BoxBorderRadius;
     /** The padding token applied to all sides of the element. */
-    padding?: BoxRecipeVariants['padding'];
+    padding?: BoxSpace;
     /** The padding token applied to the inline (horizontal) axis of the element. */
-    paddingX?: BoxRecipeVariants['paddingX'];
+    paddingX?: BoxSpace;
     /** The padding token applied to the block (vertical) axis of the element. */
-    paddingY?: BoxRecipeVariants['paddingY'];
+    paddingY?: BoxSpace;
     /** The padding token applied to the top of the element. */
-    paddingTop?: BoxRecipeVariants['paddingTop'];
+    paddingTop?: BoxSpace;
     /** The padding token applied to the right of the element. */
-    paddingRight?: BoxRecipeVariants['paddingRight'];
+    paddingRight?: BoxSpace;
     /** The padding token applied to the bottom of the element. */
-    paddingBottom?: BoxRecipeVariants['paddingBottom'];
+    paddingBottom?: BoxSpace;
     /** The padding token applied to the left of the element. */
-    paddingLeft?: BoxRecipeVariants['paddingLeft'];
+    paddingLeft?: BoxSpace;
     /** The margin token applied to all sides of the element. Supports `auto`. */
-    margin?: BoxRecipeVariants['margin'];
+    margin?: BoxMargin;
     /** The margin token applied to the inline (horizontal) axis of the element. Supports `auto`. */
-    marginX?: BoxRecipeVariants['marginX'];
+    marginX?: BoxMargin;
     /** The margin token applied to the block (vertical) axis of the element. Supports `auto`. */
-    marginY?: BoxRecipeVariants['marginY'];
+    marginY?: BoxMargin;
     /** The margin token applied to the top of the element. Supports `auto`. */
-    marginTop?: BoxRecipeVariants['marginTop'];
+    marginTop?: BoxMargin;
     /** The margin token applied to the right of the element. Supports `auto`. */
-    marginRight?: BoxRecipeVariants['marginRight'];
+    marginRight?: BoxMargin;
     /** The margin token applied to the bottom of the element. Supports `auto`. */
-    marginBottom?: BoxRecipeVariants['marginBottom'];
+    marginBottom?: BoxMargin;
     /** The margin token applied to the left of the element. Supports `auto`. */
-    marginLeft?: BoxRecipeVariants['marginLeft'];
+    marginLeft?: BoxMargin;
     /** The gap token between flex or grid children. */
-    gap?: BoxRecipeVariants['gap'];
+    gap?: BoxSpace;
     /** The column gap token between flex or grid children. */
-    columnGap?: BoxRecipeVariants['columnGap'];
+    columnGap?: BoxSpace;
     /** The row gap token between flex or grid children. */
-    rowGap?: BoxRecipeVariants['rowGap'];
+    rowGap?: BoxSpace;
     /** The theme color token applied to the element's border color. */
-    borderColor?: BoxRecipeVariants['borderColor'];
+    borderColor?: BoxColor;
     /** The theme color token applied to the element's background color. */
-    backgroundColor?: BoxRecipeVariants['backgroundColor'];
+    backgroundColor?: BoxColor;
     /** The shadow token applied to the element. */
-    boxShadow?: BoxRecipeVariants['boxShadow'];
+    boxShadow?: BoxShadow;
 };

package/dist/components/layout/box/types/Box.types.d.ts

@@ -1,2 +1,16 @@
+import { Radius } from '../../../../theme/tokens/radii.ts';
+import { Shadows } from '../../../../theme/tokens/shadows.ts';
+import { Space } from '../../../../theme/tokens/spacing.ts';
+import { ThemeColorValue } from '../../../../theme/types/index.ts';
 /** HTML container elements supported by the Box component. */
 export type BoxVariant = 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'li' | 'form' | 'fieldset' | 'figure' | 'figcaption' | 'details' | 'summary' | 'dialog' | 'address' | 'span';
+/** Border-radius tokens supported by the Box component. */
+export type BoxBorderRadius = keyof Radius;
+/** Spacing tokens supported by padding and gap props. */
+export type BoxSpace = keyof Space;
+/** Spacing tokens supported by margin props. */
+export type BoxMargin = 'auto' | BoxSpace;
+/** Theme color tokens supported by color props. */
+export type BoxColor = ThemeColorValue;
+/** Shadow tokens supported by the Box component. */
+export type BoxShadow = keyof Shadows;