@customafk/lunas-ui 0.2.67 → 0.2.69

package/dist/{simple-number-field-zF3oqS8d.mjs.map → simple-number-field-DGaUnBOr.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-number-field-zF3oqS8d.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-number-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  unit?: string;\n  allowNegative?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimpleNumberField: React.FC<Props> = ({ label, placeholder, required, unit, allowNegative, disabled }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<number | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onValueChange = useCallback(\n    (value: number | null) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <NumberInput\n        id={id}\n        value={state.value}\n        placeholder={placeholder}\n        unitText={unit}\n        allowNegative={allowNegative}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onValueChange={onValueChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"2UAqBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,OAAM,gBAAe,cAAe,CACrH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEnF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAgB,EACnB,GAAyB,CACpB,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,MAAO,EAAM,MACA,cACb,SAAU,EACK,gBACf,SAAU,GAAY,EACtB,OAAQ,EACO,eAChB,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-number-field-DGaUnBOr.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-number-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  unit?: string;\n  allowNegative?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimpleNumberField: React.FC<Props> = ({ label, placeholder, required, unit, allowNegative, disabled }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<number | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onValueChange = useCallback(\n    (value: number | null) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <NumberInput\n        id={id}\n        value={state.value}\n        placeholder={placeholder}\n        unitText={unit}\n        allowNegative={allowNegative}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onValueChange={onValueChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"2UAqBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,OAAM,gBAAe,cAAe,CACrH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEnF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAgB,EACnB,GAAyB,CACpB,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,MAAO,EAAM,MACA,cACb,SAAU,EACK,gBACf,SAAU,GAAY,EACtB,OAAQ,EACO,eAChB,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{simple-password-field-D2UMmghM.cjs → simple-password-field-BUSJzB-t.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-CNrZQZhn.cjs"),t=require("./ui/input.cjs"),n=require("./ui/label.cjs"),r=require("./field-BV5twmKA.cjs");let i=require("lucide-react"),a=require("react"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=({label:c,placeholder:l,required:u,disabled:d})=>{let f=(0,a.useId)(),{form:p,name:m,state:h,handleBlur:g,handleChange:_}=e.G(),v=(0,s.useStore)(p.store,({isSubmitting:e})=>e),[y,b]=(0,a.useState)(!1),x=h.meta.isTouched&&!h.meta.isValid,S=(0,a.useCallback)(()=>b(e=>!e),[]),C=(0,a.useCallback)(({target:{value:e}})=>{v||_(e||null)},[v,_]);return(0,o.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[c&&(0,o.jsxs)(n.Label,{htmlFor:f,children:[c,u&&(0,o.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,o.jsxs)(`div`,{className:`relative`,children:[(0,o.jsx)(t.Input,{id:f,name:m,type:y?`text`:`password`,value:h.value??``,"aria-invalid":x,autoComplete:`current-password`,placeholder:l,disabled:d||v,className:`pr-9`,onBlur:g,onChange:C}),(0,o.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-label":y?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":y,"aria-controls":f,className:`absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50`,disabled:d||v,onClick:S,children:y?(0,o.jsx)(i.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,o.jsx)(i.EyeIcon,{size:16,"aria-hidden":`true`})})]}),x&&(0,o.jsx)(r.FieldError,{errors:h.meta.errors})]})};exports.SimplePasswordField=c;
-//# sourceMappingURL=simple-password-field-D2UMmghM.cjs.map
+const e=require("./tanstack-form-BC61U3F-.cjs"),t=require("./ui/input.cjs"),n=require("./ui/label.cjs"),r=require("./field-BV5twmKA.cjs");let i=require("lucide-react"),a=require("react"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=({label:c,placeholder:l,required:u,disabled:d})=>{let f=(0,a.useId)(),{form:p,name:m,state:h,handleBlur:g,handleChange:_}=e.G(),v=(0,s.useStore)(p.store,({isSubmitting:e})=>e),[y,b]=(0,a.useState)(!1),x=h.meta.isTouched&&!h.meta.isValid,S=(0,a.useCallback)(()=>b(e=>!e),[]),C=(0,a.useCallback)(({target:{value:e}})=>{v||_(e||null)},[v,_]);return(0,o.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[c&&(0,o.jsxs)(n.Label,{htmlFor:f,children:[c,u&&(0,o.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,o.jsxs)(`div`,{className:`relative`,children:[(0,o.jsx)(t.Input,{id:f,name:m,type:y?`text`:`password`,value:h.value??``,"aria-invalid":x,autoComplete:`current-password`,placeholder:l,disabled:d||v,className:`pr-9`,onBlur:g,onChange:C}),(0,o.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-label":y?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":y,"aria-controls":f,className:`absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50`,disabled:d||v,onClick:S,children:y?(0,o.jsx)(i.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,o.jsx)(i.EyeIcon,{size:16,"aria-hidden":`true`})})]}),x&&(0,o.jsx)(r.FieldError,{errors:h.meta.errors})]})};exports.SimplePasswordField=c;
+//# sourceMappingURL=simple-password-field-BUSJzB-t.cjs.map

package/dist/{simple-password-field-D2UMmghM.cjs.map → simple-password-field-BUSJzB-t.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-password-field-D2UMmghM.cjs","names":["useTanStackFieldContext","Label","Input","EyeOffIcon","EyeIcon","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          className=\"absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"4PAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAyB,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,oBAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,WAER,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,CACL,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-password-field-BUSJzB-t.cjs","names":["useTanStackFieldContext","Label","Input","EyeOffIcon","EyeIcon","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          className=\"absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"4PAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAyB,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,oBAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,WAER,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,CACL,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{simple-password-field-CuC10c70.mjs → simple-password-field-BxYeEv-p.mjs}

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-PC9YNeeo.mjs";import{Input as t}from"./ui/input.mjs";import{Label as n}from"./ui/label.mjs";import{FieldError as r}from"./field-BKyUqvzh.mjs";import{EyeIcon as i,EyeOffIcon as a}from"lucide-react";import{useCallback as o,useId as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useStore as d}from"@tanstack/react-form";const f=({label:f,placeholder:p,required:m,disabled:h})=>{let g=s(),{form:_,name:v,state:y,handleBlur:b,handleChange:x}=e(),S=d(_.store,({isSubmitting:e})=>e),[C,w]=c(!1),T=y.meta.isTouched&&!y.meta.isValid,E=o(()=>w(e=>!e),[]),D=o(({target:{value:e}})=>{S||x(e||null)},[S,x]);return u(`div`,{className:`flex flex-col gap-1.5`,children:[f&&u(n,{htmlFor:g,children:[f,m&&l(`span`,{className:`text-danger-strong`,children:`*`})]}),u(`div`,{className:`relative`,children:[l(t,{id:g,name:v,type:C?`text`:`password`,value:y.value??``,"aria-invalid":T,autoComplete:`current-password`,placeholder:p,disabled:h||S,className:`pr-9`,onBlur:b,onChange:D}),l(`button`,{type:`button`,tabIndex:-1,"aria-label":C?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":C,"aria-controls":g,className:`absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50`,disabled:h||S,onClick:E,children:l(C?a:i,{size:16,"aria-hidden":`true`})})]}),T&&l(r,{errors:y.meta.errors})]})};export{f as SimplePasswordField};
-//# sourceMappingURL=simple-password-field-CuC10c70.mjs.map
+import{G as e}from"./tanstack-form-DJMaMeUh.mjs";import{Input as t}from"./ui/input.mjs";import{Label as n}from"./ui/label.mjs";import{FieldError as r}from"./field-BKyUqvzh.mjs";import{EyeIcon as i,EyeOffIcon as a}from"lucide-react";import{useCallback as o,useId as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useStore as d}from"@tanstack/react-form";const f=({label:f,placeholder:p,required:m,disabled:h})=>{let g=s(),{form:_,name:v,state:y,handleBlur:b,handleChange:x}=e(),S=d(_.store,({isSubmitting:e})=>e),[C,w]=c(!1),T=y.meta.isTouched&&!y.meta.isValid,E=o(()=>w(e=>!e),[]),D=o(({target:{value:e}})=>{S||x(e||null)},[S,x]);return u(`div`,{className:`flex flex-col gap-1.5`,children:[f&&u(n,{htmlFor:g,children:[f,m&&l(`span`,{className:`text-danger-strong`,children:`*`})]}),u(`div`,{className:`relative`,children:[l(t,{id:g,name:v,type:C?`text`:`password`,value:y.value??``,"aria-invalid":T,autoComplete:`current-password`,placeholder:p,disabled:h||S,className:`pr-9`,onBlur:b,onChange:D}),l(`button`,{type:`button`,tabIndex:-1,"aria-label":C?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":C,"aria-controls":g,className:`absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50`,disabled:h||S,onClick:E,children:l(C?a:i,{size:16,"aria-hidden":`true`})})]}),T&&l(r,{errors:y.meta.errors})]})};export{f as SimplePasswordField};
+//# sourceMappingURL=simple-password-field-BxYeEv-p.mjs.map

package/dist/{simple-password-field-CuC10c70.mjs.map → simple-password-field-BxYeEv-p.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-password-field-CuC10c70.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          className=\"absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"uYAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAS,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,oBAAf,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,EACD,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,WAEI,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,CACL,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-password-field-BxYeEv-p.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          className=\"absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"uYAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAS,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,oBAAf,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,EACD,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,WAEI,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,CACL,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{simple-radio-group-field-C2DDfIUs.cjs → simple-radio-group-field-CQTkbvt9.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-CNrZQZhn.cjs"),t=require("./ui/label.cjs"),n=require("./ui/radio-group.cjs"),r=require("./field-BV5twmKA.cjs");let i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,required:s,disabled:c,options:l,orientation:u=`vertical`})=>{let{form:d,name:f,state:p,handleBlur:m,handleChange:h}=e.G(),g=(0,a.useStore)(d.store,({isSubmitting:e})=>e),_=p.meta.isTouched&&!p.meta.isValid,v=c||g;return(0,i.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[o&&(0,i.jsxs)(t.Label,{children:[o,s&&(0,i.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,i.jsx)(n.RadioGroup,{name:f,value:p.value??``,disabled:v,"aria-invalid":_,className:u===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:h,onBlur:m,children:l.map(e=>(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(n.RadioGroupItem,{id:`${f}-${e.value}`,value:e.value}),(0,i.jsx)(t.Label,{htmlFor:`${f}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),_&&(0,i.jsx)(r.FieldError,{errors:p.meta.errors})]})};exports.SimpleRadioGroupField=o;
-//# sourceMappingURL=simple-radio-group-field-C2DDfIUs.cjs.map
+const e=require("./tanstack-form-BC61U3F-.cjs"),t=require("./ui/label.cjs"),n=require("./ui/radio-group.cjs"),r=require("./field-BV5twmKA.cjs");let i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,required:s,disabled:c,options:l,orientation:u=`vertical`})=>{let{form:d,name:f,state:p,handleBlur:m,handleChange:h}=e.G(),g=(0,a.useStore)(d.store,({isSubmitting:e})=>e),_=p.meta.isTouched&&!p.meta.isValid,v=c||g;return(0,i.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[o&&(0,i.jsxs)(t.Label,{children:[o,s&&(0,i.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,i.jsx)(n.RadioGroup,{name:f,value:p.value??``,disabled:v,"aria-invalid":_,className:u===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:h,onBlur:m,children:l.map(e=>(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(n.RadioGroupItem,{id:`${f}-${e.value}`,value:e.value}),(0,i.jsx)(t.Label,{htmlFor:`${f}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),_&&(0,i.jsx)(r.FieldError,{errors:p.meta.errors})]})};exports.SimpleRadioGroupField=o;
+//# sourceMappingURL=simple-radio-group-field-CQTkbvt9.cjs.map

package/dist/{simple-radio-group-field-C2DDfIUs.cjs.map → simple-radio-group-field-CQTkbvt9.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-radio-group-field-C2DDfIUs.cjs","names":["useTanStackFieldContext","Label","RadioGroup","RadioGroupItem","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qNAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAA,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,CAAA,CAAA,GAET,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,WAEP,EAAQ,IAAI,IACX,EAAA,EAAA,KAAA,CAAC,MAAD,CAAwB,UAAU,mCAAlC,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,GACrE,EAAA,EAAA,IAAA,CAACF,EAAAA,MAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,sCAClD,EAAO,KACH,CAAA,CACJ,GALK,EAAO,KAKZ,CACN,CACS,CAAA,EACX,IAAY,EAAA,EAAA,IAAA,CAACG,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-radio-group-field-CQTkbvt9.cjs","names":["useTanStackFieldContext","Label","RadioGroup","RadioGroupItem","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qNAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAA,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,CAAA,CAAA,GAET,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,WAEP,EAAQ,IAAI,IACX,EAAA,EAAA,KAAA,CAAC,MAAD,CAAwB,UAAU,mCAAlC,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,GACrE,EAAA,EAAA,IAAA,CAACF,EAAAA,MAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,sCAClD,EAAO,KACH,CAAA,CACJ,GALK,EAAO,KAKZ,CACN,CACS,CAAA,EACX,IAAY,EAAA,EAAA,IAAA,CAACG,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{simple-radio-group-field-CfziNlLf.mjs → simple-radio-group-field-yJdq-reX.mjs}

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-PC9YNeeo.mjs";import{Label as t}from"./ui/label.mjs";import{RadioGroup as n,RadioGroupItem as r}from"./ui/radio-group.mjs";import{FieldError as i}from"./field-BKyUqvzh.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{useStore as s}from"@tanstack/react-form";const c=({label:c,required:l,disabled:u,options:d,orientation:f=`vertical`})=>{let{form:p,name:m,state:h,handleBlur:g,handleChange:_}=e(),v=s(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=u||v;return o(`div`,{className:`flex flex-col gap-1.5`,children:[c&&o(t,{children:[c,l&&a(`span`,{className:`text-danger-strong`,children:`*`})]}),a(n,{name:m,value:h.value??``,disabled:b,"aria-invalid":y,className:f===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:_,onBlur:g,children:d.map(e=>o(`div`,{className:`flex items-center gap-2`,children:[a(r,{id:`${m}-${e.value}`,value:e.value}),a(t,{htmlFor:`${m}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),y&&a(i,{errors:h.meta.errors})]})};export{c as SimpleRadioGroupField};
-//# sourceMappingURL=simple-radio-group-field-CfziNlLf.mjs.map
+import{G as e}from"./tanstack-form-DJMaMeUh.mjs";import{Label as t}from"./ui/label.mjs";import{RadioGroup as n,RadioGroupItem as r}from"./ui/radio-group.mjs";import{FieldError as i}from"./field-BKyUqvzh.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{useStore as s}from"@tanstack/react-form";const c=({label:c,required:l,disabled:u,options:d,orientation:f=`vertical`})=>{let{form:p,name:m,state:h,handleBlur:g,handleChange:_}=e(),v=s(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=u||v;return o(`div`,{className:`flex flex-col gap-1.5`,children:[c&&o(t,{children:[c,l&&a(`span`,{className:`text-danger-strong`,children:`*`})]}),a(n,{name:m,value:h.value??``,disabled:b,"aria-invalid":y,className:f===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:_,onBlur:g,children:d.map(e=>o(`div`,{className:`flex items-center gap-2`,children:[a(r,{id:`${m}-${e.value}`,value:e.value}),a(t,{htmlFor:`${m}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),y&&a(i,{errors:h.meta.errors})]})};export{c as SimpleRadioGroupField};
+//# sourceMappingURL=simple-radio-group-field-yJdq-reX.mjs.map

package/dist/{simple-radio-group-field-CfziNlLf.mjs.map → simple-radio-group-field-yJdq-reX.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-radio-group-field-CfziNlLf.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kTAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,CAAA,CAAA,EAET,EAAC,EAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,WAEP,EAAQ,IAAI,GACX,EAAC,MAAD,CAAwB,UAAU,mCAAlC,CACE,EAAC,EAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,EACrE,EAAC,EAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,sCAClD,EAAO,KACH,CAAA,CACJ,GALK,EAAO,KAKZ,CACN,CACS,CAAA,EACX,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-radio-group-field-yJdq-reX.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kTAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,CAAA,CAAA,EAET,EAAC,EAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,WAEP,EAAQ,IAAI,GACX,EAAC,MAAD,CAAwB,UAAU,mCAAlC,CACE,EAAC,EAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,EACrE,EAAC,EAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,sCAClD,EAAO,KACH,CAAA,CACJ,GALK,EAAO,KAKZ,CACN,CACS,CAAA,EACX,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{simple-select-field-CeNnXUHN.cjs → simple-select-field-CUFuptbH.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./tanstack-form-CNrZQZhn.cjs"),n=require("./ui/label.cjs"),r=require("./ui/drawer.cjs"),i=require("./ui/select.cjs"),a=require("./field-BV5twmKA.cjs");let o=require("lucide-react"),s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("react/jsx-runtime"),u=require("@customafk/react-toolkit/hooks/useMobile");const d=({label:d,placeholder:f,required:p,options:m})=>{let h=(0,s.useId)(),{state:g,handleBlur:_,handleChange:v}=t.G(),y=(0,u.useIsMobile)(),[b,x]=(0,s.useState)(!1),S=g.meta.isTouched&&!g.meta.isValid,C=m.find(e=>e.value===g.value)?.label;return y?(0,l.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[d&&(0,l.jsxs)(n.Label,{htmlFor:h,children:[d,p&&(0,l.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,l.jsx)(e.Button,{id:h,type:`button`,variant:`outline`,color:`muted`,className:(0,c.cn)(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!g.value&&`text-text-positive-muted`,S&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":S,onBlur:_,onClick:()=>x(!0),children:C??(0,l.jsx)(`span`,{className:`text-text-positive-muted`,children:f})}),(0,l.jsx)(r.Drawer,{open:b,onOpenChange:x,direction:`bottom`,children:(0,l.jsxs)(r.DrawerContent,{children:[(0,l.jsx)(r.DrawerHeader,{children:(0,l.jsx)(r.DrawerTitle,{children:d??f??`Select an option`})}),(0,l.jsx)(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:m.length>0?m.map(e=>(0,l.jsx)(r.DrawerClose,{asChild:!0,children:(0,l.jsx)(`button`,{type:`button`,className:(0,c.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,g.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{v(e.value),x(!1)},children:e.label})},e.value)):(0,l.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[(0,l.jsx)(o.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]})}),S&&(0,l.jsx)(a.FieldError,{errors:g.meta.errors})]}):(0,l.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[d&&(0,l.jsxs)(n.Label,{htmlFor:h,children:[d,p&&(0,l.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,l.jsxs)(i.Select,{value:g.value??``,onValueChange:v,children:[(0,l.jsx)(i.SelectTrigger,{id:h,"aria-invalid":S?`true`:void 0,onBlur:_,children:(0,l.jsx)(i.SelectValue,{placeholder:f})}),(0,l.jsx)(i.SelectContent,{children:m.length>0?m.map(e=>(0,l.jsx)(i.SelectItem,{value:e.value,children:e.label},e.value)):(0,l.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[(0,l.jsx)(o.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),S&&(0,l.jsx)(a.FieldError,{errors:g.meta.errors})]})};exports.SimpleSelectField=d;
-//# sourceMappingURL=simple-select-field-CeNnXUHN.cjs.map
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-BC61U3F-.cjs"),n=require("./ui/label.cjs"),r=require("./ui/drawer.cjs"),i=require("./ui/select.cjs"),a=require("./field-BV5twmKA.cjs");let o=require("lucide-react"),s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("react/jsx-runtime"),u=require("@customafk/react-toolkit/hooks/useMobile");const d=({label:d,placeholder:f,required:p,options:m})=>{let h=(0,s.useId)(),{state:g,handleBlur:_,handleChange:v}=t.G(),y=(0,u.useIsMobile)(),[b,x]=(0,s.useState)(!1),S=g.meta.isTouched&&!g.meta.isValid,C=m.find(e=>e.value===g.value)?.label;return y?(0,l.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[d&&(0,l.jsxs)(n.Label,{htmlFor:h,children:[d,p&&(0,l.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,l.jsx)(e.Button,{id:h,type:`button`,variant:`outline`,color:`muted`,className:(0,c.cn)(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!g.value&&`text-text-positive-muted`,S&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":S,onBlur:_,onClick:()=>x(!0),children:C??(0,l.jsx)(`span`,{className:`text-text-positive-muted`,children:f})}),(0,l.jsx)(r.Drawer,{open:b,onOpenChange:x,direction:`bottom`,children:(0,l.jsxs)(r.DrawerContent,{children:[(0,l.jsx)(r.DrawerHeader,{children:(0,l.jsx)(r.DrawerTitle,{children:d??f??`Select an option`})}),(0,l.jsx)(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:m.length>0?m.map(e=>(0,l.jsx)(r.DrawerClose,{asChild:!0,children:(0,l.jsx)(`button`,{type:`button`,className:(0,c.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,g.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{v(e.value),x(!1)},children:e.label})},e.value)):(0,l.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[(0,l.jsx)(o.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]})}),S&&(0,l.jsx)(a.FieldError,{errors:g.meta.errors})]}):(0,l.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[d&&(0,l.jsxs)(n.Label,{htmlFor:h,children:[d,p&&(0,l.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,l.jsxs)(i.Select,{value:g.value??``,onValueChange:v,children:[(0,l.jsx)(i.SelectTrigger,{id:h,"aria-invalid":S?`true`:void 0,onBlur:_,children:(0,l.jsx)(i.SelectValue,{placeholder:f})}),(0,l.jsx)(i.SelectContent,{children:m.length>0?m.map(e=>(0,l.jsx)(i.SelectItem,{value:e.value,children:e.label},e.value)):(0,l.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[(0,l.jsx)(o.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),S&&(0,l.jsx)(a.FieldError,{errors:g.meta.errors})]})};exports.SimpleSelectField=d;
+//# sourceMappingURL=simple-select-field-CUFuptbH.cjs.map

package/dist/{simple-select-field-CeNnXUHN.cjs.map → simple-select-field-CUFuptbH.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-select-field-CeNnXUHN.cjs","names":["useTanStackFieldContext","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","DrawerClose","PackagePlusIcon","FieldError","Select","SelectTrigger","SelectValue","SelectContent","SelectItem"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          aria-invalid={_invalid}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose key={option.value} asChild>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n                        'hover:bg-muted-muted active:bg-muted-muted',\n                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\n                ))\n              ) : (\n                <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n                  <PackagePlusIcon strokeWidth={1} />\n                  No options available\n                </div>\n              )}\n            </div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {options.length > 0 ? (\n            options.map(option => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))\n          ) : (\n            <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n              <PackagePlusIcon strokeWidth={1} />\n              No options available\n            </div>\n          )}\n        </SelectContent>\n      </Select>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"uXAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAC7E,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,WAEhC,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oCAA4B,CAAkB,CAAA,CAC1E,CAAA,GAER,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,mBAC/D,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wDACZ,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAgC,QAAA,aAC9B,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,WAAA,EAAA,EAAA,GAAA,CACE,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,WAEC,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0GAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,KAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACR,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACS,EAAAA,OAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,WAAjD,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,YAC1E,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,GACf,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAA+B,MAAO,EAAO,eAC1C,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wJAAf,EACE,EAAA,EAAA,IAAA,CAACN,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEM,CAAA,CACT,IACP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-select-field-CUFuptbH.cjs","names":["useTanStackFieldContext","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","DrawerClose","PackagePlusIcon","FieldError","Select","SelectTrigger","SelectValue","SelectContent","SelectItem"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          aria-invalid={_invalid}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose key={option.value} asChild>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n                        'hover:bg-muted-muted active:bg-muted-muted',\n                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\n                ))\n              ) : (\n                <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n                  <PackagePlusIcon strokeWidth={1} />\n                  No options available\n                </div>\n              )}\n            </div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {options.length > 0 ? (\n            options.map(option => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))\n          ) : (\n            <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n              <PackagePlusIcon strokeWidth={1} />\n              No options available\n            </div>\n          )}\n        </SelectContent>\n      </Select>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"uXAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAC7E,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,WAEhC,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oCAA4B,CAAkB,CAAA,CAC1E,CAAA,GAER,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,mBAC/D,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wDACZ,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAgC,QAAA,aAC9B,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,WAAA,EAAA,EAAA,GAAA,CACE,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,WAEC,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0GAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,KAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACR,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACS,EAAAA,OAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,WAAjD,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,YAC1E,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,GACf,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAA+B,MAAO,EAAO,eAC1C,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wJAAf,EACE,EAAA,EAAA,IAAA,CAACN,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEM,CAAA,CACT,IACP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{simple-select-field-DIaxhi1-.mjs → simple-select-field-Cp64m8Aa.mjs}

@@ -1,2 +1,2 @@
-import{Button as e}from"./ui/button.mjs";import{G as t}from"./tanstack-form-PC9YNeeo.mjs";import{Label as n}from"./ui/label.mjs";import{Drawer as r,DrawerClose as i,DrawerContent as a,DrawerHeader as o,DrawerTitle as s}from"./ui/drawer.mjs";import{Select as c,SelectContent as l,SelectItem as u,SelectTrigger as d,SelectValue as f}from"./ui/select.mjs";import{FieldError as p}from"./field-BKyUqvzh.mjs";import{PackagePlusIcon as m}from"lucide-react";import{useId as h,useState as g}from"react";import{cn as _}from"@customafk/react-toolkit/utils";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useIsMobile as b}from"@customafk/react-toolkit/hooks/useMobile";const x=({label:x,placeholder:S,required:C,options:w})=>{let T=h(),{state:E,handleBlur:D,handleChange:O}=t(),k=b(),[A,j]=g(!1),M=E.meta.isTouched&&!E.meta.isValid,N=w.find(e=>e.value===E.value)?.label;return k?y(`div`,{className:`flex flex-col gap-1.5`,children:[x&&y(n,{htmlFor:T,children:[x,C&&v(`span`,{className:`text-danger-strong`,children:`*`})]}),v(e,{id:T,type:`button`,variant:`outline`,color:`muted`,className:_(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!E.value&&`text-text-positive-muted`,M&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":M,onBlur:D,onClick:()=>j(!0),children:N??v(`span`,{className:`text-text-positive-muted`,children:S})}),v(r,{open:A,onOpenChange:j,direction:`bottom`,children:y(a,{children:[v(o,{children:v(s,{children:x??S??`Select an option`})}),v(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:w.length>0?w.map(e=>v(i,{asChild:!0,children:v(`button`,{type:`button`,className:_(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,E.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{O(e.value),j(!1)},children:e.label})},e.value)):y(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[v(m,{strokeWidth:1}),`No options available`]})})]})}),M&&v(p,{errors:E.meta.errors})]}):y(`div`,{className:`flex flex-col gap-1.5`,children:[x&&y(n,{htmlFor:T,children:[x,C&&v(`span`,{className:`text-danger-strong`,children:`*`})]}),y(c,{value:E.value??``,onValueChange:O,children:[v(d,{id:T,"aria-invalid":M?`true`:void 0,onBlur:D,children:v(f,{placeholder:S})}),v(l,{children:w.length>0?w.map(e=>v(u,{value:e.value,children:e.label},e.value)):y(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[v(m,{strokeWidth:1}),`No options available`]})})]}),M&&v(p,{errors:E.meta.errors})]})};export{x as SimpleSelectField};
-//# sourceMappingURL=simple-select-field-DIaxhi1-.mjs.map
+import{Button as e}from"./ui/button.mjs";import{G as t}from"./tanstack-form-DJMaMeUh.mjs";import{Label as n}from"./ui/label.mjs";import{Drawer as r,DrawerClose as i,DrawerContent as a,DrawerHeader as o,DrawerTitle as s}from"./ui/drawer.mjs";import{Select as c,SelectContent as l,SelectItem as u,SelectTrigger as d,SelectValue as f}from"./ui/select.mjs";import{FieldError as p}from"./field-BKyUqvzh.mjs";import{PackagePlusIcon as m}from"lucide-react";import{useId as h,useState as g}from"react";import{cn as _}from"@customafk/react-toolkit/utils";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useIsMobile as b}from"@customafk/react-toolkit/hooks/useMobile";const x=({label:x,placeholder:S,required:C,options:w})=>{let T=h(),{state:E,handleBlur:D,handleChange:O}=t(),k=b(),[A,j]=g(!1),M=E.meta.isTouched&&!E.meta.isValid,N=w.find(e=>e.value===E.value)?.label;return k?y(`div`,{className:`flex flex-col gap-1.5`,children:[x&&y(n,{htmlFor:T,children:[x,C&&v(`span`,{className:`text-danger-strong`,children:`*`})]}),v(e,{id:T,type:`button`,variant:`outline`,color:`muted`,className:_(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!E.value&&`text-text-positive-muted`,M&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":M,onBlur:D,onClick:()=>j(!0),children:N??v(`span`,{className:`text-text-positive-muted`,children:S})}),v(r,{open:A,onOpenChange:j,direction:`bottom`,children:y(a,{children:[v(o,{children:v(s,{children:x??S??`Select an option`})}),v(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:w.length>0?w.map(e=>v(i,{asChild:!0,children:v(`button`,{type:`button`,className:_(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,E.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{O(e.value),j(!1)},children:e.label})},e.value)):y(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[v(m,{strokeWidth:1}),`No options available`]})})]})}),M&&v(p,{errors:E.meta.errors})]}):y(`div`,{className:`flex flex-col gap-1.5`,children:[x&&y(n,{htmlFor:T,children:[x,C&&v(`span`,{className:`text-danger-strong`,children:`*`})]}),y(c,{value:E.value??``,onValueChange:O,children:[v(d,{id:T,"aria-invalid":M?`true`:void 0,onBlur:D,children:v(f,{placeholder:S})}),v(l,{children:w.length>0?w.map(e=>v(u,{value:e.value,children:e.label},e.value)):y(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[v(m,{strokeWidth:1}),`No options available`]})})]}),M&&v(p,{errors:E.meta.errors})]})};export{x as SimpleSelectField};
+//# sourceMappingURL=simple-select-field-Cp64m8Aa.mjs.map

package/dist/{simple-select-field-DIaxhi1-.mjs.map → simple-select-field-Cp64m8Aa.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-select-field-DIaxhi1-.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          aria-invalid={_invalid}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose key={option.value} asChild>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n                        'hover:bg-muted-muted active:bg-muted-muted',\n                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\n                ))\n              ) : (\n                <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n                  <PackagePlusIcon strokeWidth={1} />\n                  No options available\n                </div>\n              )}\n            </div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {options.length > 0 ? (\n            options.map(option => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))\n          ) : (\n            <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n              <PackagePlusIcon strokeWidth={1} />\n              No options available\n            </div>\n          )}\n        </SelectContent>\n      </Select>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"2pBAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,EAAK,EAAM,EACX,CAAE,QAAO,aAAY,gBAAiB,EAAuC,EAC7E,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,EAEA,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,WAEhC,GAAiB,EAAC,OAAD,CAAM,UAAU,oCAA4B,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,kBAC/D,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,wDACZ,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAAgC,QAAA,YAC9B,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EACT,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,WAEC,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,EAED,EAAC,MAAD,CAAK,UAAU,0GAAf,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,WAAjD,CACE,EAAC,EAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,WAC1E,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAA+B,MAAO,EAAO,eAC1C,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,EAED,EAAC,MAAD,CAAK,UAAU,wJAAf,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEM,CAAA,CACT,IACP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-select-field-Cp64m8Aa.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          aria-invalid={_invalid}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose key={option.value} asChild>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n                        'hover:bg-muted-muted active:bg-muted-muted',\n                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\n                ))\n              ) : (\n                <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n                  <PackagePlusIcon strokeWidth={1} />\n                  No options available\n                </div>\n              )}\n            </div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {options.length > 0 ? (\n            options.map(option => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))\n          ) : (\n            <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n              <PackagePlusIcon strokeWidth={1} />\n              No options available\n            </div>\n          )}\n        </SelectContent>\n      </Select>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"2pBAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,EAAK,EAAM,EACX,CAAE,QAAO,aAAY,gBAAiB,EAAuC,EAC7E,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,EAEA,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,WAEhC,GAAiB,EAAC,OAAD,CAAM,UAAU,oCAA4B,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,kBAC/D,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,wDACZ,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAAgC,QAAA,YAC9B,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EACT,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,WAEC,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,EAED,EAAC,MAAD,CAAK,UAAU,0GAAf,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,WAAjD,CACE,EAAC,EAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,WAC1E,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAA+B,MAAO,EAAO,eAC1C,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,EAED,EAAC,MAAD,CAAK,UAAU,wJAAf,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEM,CAAA,CACT,IACP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{simple-text-field-LYWVIAfQ.cjs → simple-text-field-B2Z1E4sG.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-CNrZQZhn.cjs"),t=require("./ui/input.cjs"),n=require("./ui/label.cjs"),r=require("./field-BV5twmKA.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,placeholder:c,required:l,maxLength:u,disabled:d})=>{let f=(0,i.useId)(),{form:p,name:m,state:h,handleBlur:g,handleChange:_}=e.G(),v=(0,o.useStore)(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=(0,i.useCallback)(({target:{value:e}})=>{v||u&&e.length>u||_(e||null)},[v,u,_]);return(0,a.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[s&&(0,a.jsxs)(n.Label,{htmlFor:f,children:[s,l&&(0,a.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,a.jsx)(t.Input,{id:f,name:m,value:h.value??``,"aria-invalid":y,placeholder:c,autoComplete:`off`,disabled:d||v,onBlur:g,onChange:b}),y&&(0,a.jsx)(r.FieldError,{errors:h.meta.errors})]})};exports.SimpleTextField=s;
-//# sourceMappingURL=simple-text-field-LYWVIAfQ.cjs.map
+const e=require("./tanstack-form-BC61U3F-.cjs"),t=require("./ui/input.cjs"),n=require("./ui/label.cjs"),r=require("./field-BV5twmKA.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,placeholder:c,required:l,maxLength:u,disabled:d})=>{let f=(0,i.useId)(),{form:p,name:m,state:h,handleBlur:g,handleChange:_}=e.G(),v=(0,o.useStore)(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=(0,i.useCallback)(({target:{value:e}})=>{v||u&&e.length>u||_(e||null)},[v,u,_]);return(0,a.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[s&&(0,a.jsxs)(n.Label,{htmlFor:f,children:[s,l&&(0,a.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,a.jsx)(t.Input,{id:f,name:m,value:h.value??``,"aria-invalid":y,placeholder:c,autoComplete:`off`,disabled:d||v,onBlur:g,onChange:b}),y&&(0,a.jsx)(r.FieldError,{errors:h.meta.errors})]})};exports.SimpleTextField=s;
+//# sourceMappingURL=simple-text-field-B2Z1E4sG.cjs.map

package/dist/{simple-text-field-LYWVIAfQ.cjs.map → simple-text-field-B2Z1E4sG.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-text-field-LYWVIAfQ.cjs","names":["useTanStackFieldContext","Label","Input","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kOAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-text-field-B2Z1E4sG.cjs","names":["useTanStackFieldContext","Label","Input","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kOAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{simple-text-field-D8jyznSd.mjs → simple-text-field-Dl2IOsO3.mjs}

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-PC9YNeeo.mjs";import{Input as t}from"./ui/input.mjs";import{Label as n}from"./ui/label.mjs";import{FieldError as r}from"./field-BKyUqvzh.mjs";import{useCallback as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useStore as c}from"@tanstack/react-form";const l=({label:l,placeholder:u,required:d,maxLength:f,disabled:p})=>{let m=a(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=e(),b=c(h.store,({isSubmitting:e})=>e),x=_.meta.isTouched&&!_.meta.isValid,S=i(({target:{value:e}})=>{b||f&&e.length>f||y(e||null)},[b,f,y]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(n,{htmlFor:m,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(t,{id:m,name:g,value:_.value??``,"aria-invalid":x,placeholder:u,autoComplete:`off`,disabled:p||b,onBlur:v,onChange:S}),x&&o(r,{errors:_.meta.errors})]})};export{l as SimpleTextField};
-//# sourceMappingURL=simple-text-field-D8jyznSd.mjs.map
+import{G as e}from"./tanstack-form-DJMaMeUh.mjs";import{Input as t}from"./ui/input.mjs";import{Label as n}from"./ui/label.mjs";import{FieldError as r}from"./field-BKyUqvzh.mjs";import{useCallback as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useStore as c}from"@tanstack/react-form";const l=({label:l,placeholder:u,required:d,maxLength:f,disabled:p})=>{let m=a(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=e(),b=c(h.store,({isSubmitting:e})=>e),x=_.meta.isTouched&&!_.meta.isValid,S=i(({target:{value:e}})=>{b||f&&e.length>f||y(e||null)},[b,f,y]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(n,{htmlFor:m,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(t,{id:m,name:g,value:_.value??``,"aria-invalid":x,placeholder:u,autoComplete:`off`,disabled:p||b,onBlur:v,onChange:S}),x&&o(r,{errors:_.meta.errors})]})};export{l as SimpleTextField};
+//# sourceMappingURL=simple-text-field-Dl2IOsO3.mjs.map

package/dist/{simple-text-field-D8jyznSd.mjs.map → simple-text-field-Dl2IOsO3.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-text-field-D8jyznSd.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kUAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-text-field-Dl2IOsO3.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kUAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{simple-textarea-field-p9qX_n7m.mjs → simple-textarea-field-CM9aHy-q.mjs}

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-PC9YNeeo.mjs";import{Label as t}from"./ui/label.mjs";import{Textarea as n}from"./ui/textarea.mjs";import{FieldError as r}from"./field-BKyUqvzh.mjs";import{useCallback as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useStore as c}from"@tanstack/react-form";const l=({label:l,placeholder:u,required:d,maxLength:f,rows:p,disabled:m})=>{let h=a(),{form:g,name:_,state:v,handleBlur:y,handleChange:b}=e(),x=c(g.store,({isSubmitting:e})=>e),S=v.meta.isTouched&&!v.meta.isValid,C=i(({target:{value:e}})=>{x||f&&e.length>f||b(e||null)},[x,f,b]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(t,{htmlFor:h,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(n,{id:h,name:_,value:v.value??``,"aria-invalid":S,placeholder:u,rows:p,disabled:m||x,onBlur:y,onChange:C}),S&&o(r,{errors:v.meta.errors})]})};export{l as SimpleTextareaField};
-//# sourceMappingURL=simple-textarea-field-p9qX_n7m.mjs.map
+import{G as e}from"./tanstack-form-DJMaMeUh.mjs";import{Label as t}from"./ui/label.mjs";import{Textarea as n}from"./ui/textarea.mjs";import{FieldError as r}from"./field-BKyUqvzh.mjs";import{useCallback as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useStore as c}from"@tanstack/react-form";const l=({label:l,placeholder:u,required:d,maxLength:f,rows:p,disabled:m})=>{let h=a(),{form:g,name:_,state:v,handleBlur:y,handleChange:b}=e(),x=c(g.store,({isSubmitting:e})=>e),S=v.meta.isTouched&&!v.meta.isValid,C=i(({target:{value:e}})=>{x||f&&e.length>f||b(e||null)},[x,f,b]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(t,{htmlFor:h,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(n,{id:h,name:_,value:v.value??``,"aria-invalid":S,placeholder:u,rows:p,disabled:m||x,onBlur:y,onChange:C}),S&&o(r,{errors:v.meta.errors})]})};export{l as SimpleTextareaField};
+//# sourceMappingURL=simple-textarea-field-CM9aHy-q.mjs.map

package/dist/{simple-textarea-field-p9qX_n7m.mjs.map → simple-textarea-field-CM9aHy-q.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-textarea-field-p9qX_n7m.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wUAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-textarea-field-CM9aHy-q.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wUAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{simple-textarea-field-DcEvaizE.cjs → simple-textarea-field-Cjjk9WOW.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-CNrZQZhn.cjs"),t=require("./ui/label.cjs"),n=require("./ui/textarea.cjs"),r=require("./field-BV5twmKA.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,placeholder:c,required:l,maxLength:u,rows:d,disabled:f})=>{let p=(0,i.useId)(),{form:m,name:h,state:g,handleBlur:_,handleChange:v}=e.G(),y=(0,o.useStore)(m.store,({isSubmitting:e})=>e),b=g.meta.isTouched&&!g.meta.isValid,x=(0,i.useCallback)(({target:{value:e}})=>{y||u&&e.length>u||v(e||null)},[y,u,v]);return(0,a.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[s&&(0,a.jsxs)(t.Label,{htmlFor:p,children:[s,l&&(0,a.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,a.jsx)(n.Textarea,{id:p,name:h,value:g.value??``,"aria-invalid":b,placeholder:c,rows:d,disabled:f||y,onBlur:_,onChange:x}),b&&(0,a.jsx)(r.FieldError,{errors:g.meta.errors})]})};exports.SimpleTextareaField=s;
-//# sourceMappingURL=simple-textarea-field-DcEvaizE.cjs.map
+const e=require("./tanstack-form-BC61U3F-.cjs"),t=require("./ui/label.cjs"),n=require("./ui/textarea.cjs"),r=require("./field-BV5twmKA.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,placeholder:c,required:l,maxLength:u,rows:d,disabled:f})=>{let p=(0,i.useId)(),{form:m,name:h,state:g,handleBlur:_,handleChange:v}=e.G(),y=(0,o.useStore)(m.store,({isSubmitting:e})=>e),b=g.meta.isTouched&&!g.meta.isValid,x=(0,i.useCallback)(({target:{value:e}})=>{y||u&&e.length>u||v(e||null)},[y,u,v]);return(0,a.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[s&&(0,a.jsxs)(t.Label,{htmlFor:p,children:[s,l&&(0,a.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,a.jsx)(n.Textarea,{id:p,name:h,value:g.value??``,"aria-invalid":b,placeholder:c,rows:d,disabled:f||y,onBlur:_,onChange:x}),b&&(0,a.jsx)(r.FieldError,{errors:g.meta.errors})]})};exports.SimpleTextareaField=s;
+//# sourceMappingURL=simple-textarea-field-Cjjk9WOW.cjs.map

package/dist/{simple-textarea-field-DcEvaizE.cjs.map → simple-textarea-field-Cjjk9WOW.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-textarea-field-DcEvaizE.cjs","names":["useTanStackFieldContext","Label","Textarea","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qOAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-textarea-field-Cjjk9WOW.cjs","names":["useTanStackFieldContext","Label","Textarea","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qOAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{statistic-DwiUKz02.mjs → statistic-ClkqqDfk.mjs}

@@ -1,2 +1,2 @@
-import{Flex as e}from"./layouts/flex.mjs";import{Y as t}from"./tables-9d53sH9E.mjs";import{memo as n,useCallback as r,useMemo as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},l=n(({decimalSeparator:n=`.`,groupSeparator:l=`,`,prefix:u,suffix:d,precision:f,roundingMode:p=`round`,showTrailingZeros:m=!1,size:h=`lg`,value:g=0})=>{let _=i(()=>{let e={};return typeof f==`number`&&f>=0&&m&&(e.minimumFractionDigits=f),e.maximumFractionDigits=f,e},[f,m]),v=r(e=>{let t=e;return typeof f==`number`&&f>=0&&(t=c(e,f,p)),t.toLocaleString(`en-US`,_)},[p,_,f]),y=i(()=>{if(typeof g==`number`)return Number.isNaN(g)||!Number.isFinite(g)?`N/A`:v(g);if(typeof g==`string`){let e=g.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:v(t)}return`N/A`},[g,v]),b=i(()=>n===`.`&&l===`,`?y:y.replace(/,/g,l).replace(/\./g,n),[y,n,l]);return b===`0`||b===`N/A`||!b?o(t,{}):s(e,{padding:`none`,className:a(`font-number text-lg text-text-positive tabular-nums`,h===`xs`&&`text-xs`,h===`sm`&&`text-sm`,h===`md`&&`text-base`,h===`lg`&&`text-lg`,h===`xl`&&`text-xl`),children:[u,o(`p`,{children:b}),d]})});l.displayName=`UITableStatisticDisplay`;export{l as UITableStatisticDisplay};
-//# sourceMappingURL=statistic-DwiUKz02.mjs.map
+import{Flex as e}from"./layouts/flex.mjs";import{Q as t}from"./tables-BGzwkdFO.mjs";import{memo as n,useCallback as r,useMemo as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},l=n(({decimalSeparator:n=`.`,groupSeparator:l=`,`,prefix:u,suffix:d,precision:f,roundingMode:p=`round`,showTrailingZeros:m=!1,size:h=`lg`,value:g=0})=>{let _=i(()=>{let e={};return typeof f==`number`&&f>=0&&m&&(e.minimumFractionDigits=f),e.maximumFractionDigits=f,e},[f,m]),v=r(e=>{let t=e;return typeof f==`number`&&f>=0&&(t=c(e,f,p)),t.toLocaleString(`en-US`,_)},[p,_,f]),y=i(()=>{if(typeof g==`number`)return Number.isNaN(g)||!Number.isFinite(g)?`N/A`:v(g);if(typeof g==`string`){let e=g.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:v(t)}return`N/A`},[g,v]),b=i(()=>n===`.`&&l===`,`?y:y.replace(/,/g,l).replace(/\./g,n),[y,n,l]);return b===`0`||b===`N/A`||!b?o(t,{}):s(e,{padding:`none`,className:a(`font-number text-lg text-text-positive tabular-nums`,h===`xs`&&`text-xs`,h===`sm`&&`text-sm`,h===`md`&&`text-base`,h===`lg`&&`text-lg`,h===`xl`&&`text-xl`),children:[u,o(`p`,{children:b}),d]})});l.displayName=`UITableStatisticDisplay`;export{l as UITableStatisticDisplay};
+//# sourceMappingURL=statistic-ClkqqDfk.mjs.map

package/dist/statistic-ClkqqDfk.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"statistic-ClkqqDfk.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/statistic.tsx"],"sourcesContent":["'use client';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { UITableEmpty } from './empty';\n\n/**\n * Applies the specified rounding mode to `num` at the given decimal precision.\n *\n * @param num - The number to round.\n * @param precisionValue - Number of decimal places to keep.\n * @param roundingMode - Rounding strategy: `'round'` (default), `'floor'`, or `'ceil'`.\n * @returns The rounded number.\n */\nconst applyRounding = (num: number, precisionValue: number, roundingMode?: 'round' | 'floor' | 'ceil') => {\n  const multiplier = 10 ** precisionValue;\n\n  switch (roundingMode) {\n    case 'floor':\n      return Math.floor(num * multiplier) / multiplier;\n    case 'ceil':\n      return Math.ceil(num * multiplier) / multiplier;\n    default:\n      return Math.round(num * multiplier) / multiplier;\n  }\n};\n\n/** Props for the {@link UITableStatisticDisplay} component. */\ntype Props = {\n  /** Character used to separate the integer and fractional parts (default: `'.'`). */\n  decimalSeparator?: string;\n  /** Character used to separate thousands groups (default: `','`). */\n  groupSeparator?: string;\n  /** Optional node rendered before the formatted number (e.g. a currency symbol). */\n  prefix?: React.ReactNode;\n  /** Optional node rendered after the formatted number (e.g. a unit label). */\n  suffix?: React.ReactNode;\n  /** Number of decimal digits to display. */\n  precision?: number;\n  /** Rounding strategy applied before formatting (default: `'round'`). */\n  roundingMode?: 'round' | 'floor' | 'ceil';\n  /** When `true`, pads the fractional part with trailing zeros up to `precision` digits. */\n  showTrailingZeros?: boolean;\n  /** Font-size variant for the displayed number (default: `'lg'`). */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** The numeric or string value to format; falsy / invalid values render an empty state. */\n  value: number | string | null | undefined;\n};\n\n/**\n * A memoized table-cell component that formats a numeric value with configurable\n * separators, precision, rounding, and size; renders {@link UITableEmpty} when\n * the value is zero, invalid, or absent.\n *\n * @example\n * import { UITableStatisticDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatisticDisplay value={1234567.89} precision={2} prefix=\"$\" size=\"md\" />\n */\nexport const UITableStatisticDisplay = memo(\n  ({\n    decimalSeparator = '.',\n    groupSeparator = ',',\n    prefix: Prefix,\n    suffix: Suffix,\n    precision,\n    roundingMode = 'round',\n    showTrailingZeros = false,\n    size = 'lg',\n    value = 0,\n  }: Props) => {\n    // Memoize number formatting options\n    const formatOptions = useMemo((): Intl.NumberFormatOptions => {\n      const options: Intl.NumberFormatOptions = {};\n\n      if (typeof precision === 'number' && precision >= 0 && showTrailingZeros) {\n        options.minimumFractionDigits = precision;\n        options.maximumFractionDigits = precision;\n      } else {\n        options.maximumFractionDigits = precision;\n      }\n\n      return options;\n    }, [precision, showTrailingZeros]);\n\n    const formatNumber = useCallback(\n      (num: number): string => {\n        let processedNum = num;\n\n        // Áp dụng làm tròn nếu có precision\n        if (typeof precision === 'number' && precision >= 0) {\n          processedNum = applyRounding(num, precision, roundingMode);\n        }\n\n        return processedNum.toLocaleString('en-US', formatOptions);\n      },\n      [roundingMode, formatOptions, precision]\n    );\n\n    // Memoize value processing\n    const processedValue = useMemo((): string => {\n      // Xử lý giá trị number\n      if (typeof value === 'number') {\n        if (Number.isNaN(value) || !Number.isFinite(value)) {\n          return 'N/A';\n        }\n        return formatNumber(value);\n      }\n\n      // Xử lý giá trị string\n      if (typeof value === 'string') {\n        const trimmedValue = value.trim();\n\n        // Nếu là chuỗi rỗng\n        if (!trimmedValue) {\n          return 'N/A';\n        }\n\n        // Thử convert sang number\n        const numValue = Number(trimmedValue);\n\n        if (Number.isNaN(numValue) || !Number.isFinite(numValue)) {\n          // Nếu không phải số, trả về string gốc\n          return 'N/A';\n        }\n\n        return formatNumber(numValue);\n      }\n\n      return 'N/A';\n    }, [value, formatNumber]);\n\n    // Memoize separator replacement\n    const finalFormattedValue = useMemo((): string => {\n      // Chỉ thay thế separators nếu khác mặc định\n      if (decimalSeparator === '.' && groupSeparator === ',') {\n        return processedValue;\n      }\n      return processedValue.replace(/,/g, groupSeparator).replace(/\\./g, decimalSeparator);\n    }, [processedValue, decimalSeparator, groupSeparator]);\n\n    if (finalFormattedValue === '0' || finalFormattedValue === 'N/A' || !finalFormattedValue) {\n      return <UITableEmpty />;\n    }\n\n    return (\n      <Flex\n        padding=\"none\"\n        className={cn(\n          'font-number text-lg text-text-positive tabular-nums',\n          size === 'xs' && 'text-xs',\n          size === 'sm' && 'text-sm',\n          size === 'md' && 'text-base',\n          size === 'lg' && 'text-lg',\n          size === 'xl' && 'text-xl'\n        )}\n      >\n        {Prefix}\n        <p>{finalFormattedValue}</p>\n        {Suffix}\n      </Flex>\n    );\n  }\n);\nUITableStatisticDisplay.displayName = 'UITableStatisticDisplay';\n"],"mappings":"qPAgBA,MAAM,GAAiB,EAAa,EAAwB,IAA8C,CACxG,IAAM,EAAa,IAAM,EAEzB,OAAQ,EAAR,CACE,IAAK,QACH,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,EACxC,IAAK,OACH,OAAO,KAAK,KAAK,EAAM,CAAU,EAAI,EACvC,QACE,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,CAC1C,CACF,EAkCa,EAA0B,GACpC,CACC,mBAAmB,IACnB,iBAAiB,IACjB,OAAQ,EACR,OAAQ,EACR,YACA,eAAe,QACf,oBAAoB,GACpB,OAAO,KACP,QAAQ,KACG,CAEX,IAAM,EAAgB,MAAwC,CAC5D,IAAM,EAAoC,CAAC,EAS3C,OAPI,OAAO,GAAc,UAAY,GAAa,GAAK,IACrD,EAAQ,sBAAwB,GAGhC,EAAQ,sBAAwB,EAG3B,CACT,EAAG,CAAC,EAAW,CAAiB,CAAC,EAE3B,EAAe,EAClB,GAAwB,CACvB,IAAI,EAAe,EAOnB,OAJI,OAAO,GAAc,UAAY,GAAa,IAChD,EAAe,EAAc,EAAK,EAAW,CAAY,GAGpD,EAAa,eAAe,QAAS,CAAa,CAC3D,EACA,CAAC,EAAc,EAAe,CAAS,CACzC,EAGM,EAAiB,MAAsB,CAE3C,GAAI,OAAO,GAAU,SAInB,OAHI,OAAO,MAAM,CAAK,GAAK,CAAC,OAAO,SAAS,CAAK,EACxC,MAEF,EAAa,CAAK,EAI3B,GAAI,OAAO,GAAU,SAAU,CAC7B,IAAM,EAAe,EAAM,KAAK,EAGhC,GAAI,CAAC,EACH,MAAO,MAIT,IAAM,EAAW,OAAO,CAAY,EAOpC,OALI,OAAO,MAAM,CAAQ,GAAK,CAAC,OAAO,SAAS,CAAQ,EAE9C,MAGF,EAAa,CAAQ,CAC9B,CAEA,MAAO,KACT,EAAG,CAAC,EAAO,CAAY,CAAC,EAGlB,EAAsB,MAEtB,IAAqB,KAAO,IAAmB,IAC1C,EAEF,EAAe,QAAQ,KAAM,CAAc,CAAC,CAAC,QAAQ,MAAO,CAAgB,EAClF,CAAC,EAAgB,EAAkB,CAAc,CAAC,EAMrD,OAJI,IAAwB,KAAO,IAAwB,OAAS,CAAC,EAC5D,EAAC,EAAD,CAAe,CAAA,EAItB,EAAC,EAAD,CACE,QAAQ,OACR,UAAW,EACT,sDACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,SACnB,WATF,CAWG,EACD,EAAC,IAAD,CAAA,SAAI,CAAuB,CAAA,EAC1B,CACG,GAEV,CACF,EACA,EAAwB,YAAc"}

package/dist/{statistic-BHCSCw9Q.cjs → statistic-LL4uHlRb.cjs}

@@ -1,2 +1,2 @@
-const e=require("./layouts/flex.cjs"),t=require("./tables-B1O9qy-m.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},o=(0,n.memo)(({decimalSeparator:o=`.`,groupSeparator:s=`,`,prefix:c,suffix:l,precision:u,roundingMode:d=`round`,showTrailingZeros:f=!1,size:p=`lg`,value:m=0})=>{let h=(0,n.useMemo)(()=>{let e={};return typeof u==`number`&&u>=0&&f&&(e.minimumFractionDigits=u),e.maximumFractionDigits=u,e},[u,f]),g=(0,n.useCallback)(e=>{let t=e;return typeof u==`number`&&u>=0&&(t=a(e,u,d)),t.toLocaleString(`en-US`,h)},[d,h,u]),_=(0,n.useMemo)(()=>{if(typeof m==`number`)return Number.isNaN(m)||!Number.isFinite(m)?`N/A`:g(m);if(typeof m==`string`){let e=m.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:g(t)}return`N/A`},[m,g]),v=(0,n.useMemo)(()=>o===`.`&&s===`,`?_:_.replace(/,/g,s).replace(/\./g,o),[_,o,s]);return v===`0`||v===`N/A`||!v?(0,i.jsx)(t.Y,{}):(0,i.jsxs)(e.Flex,{padding:`none`,className:(0,r.cn)(`font-number text-lg text-text-positive tabular-nums`,p===`xs`&&`text-xs`,p===`sm`&&`text-sm`,p===`md`&&`text-base`,p===`lg`&&`text-lg`,p===`xl`&&`text-xl`),children:[c,(0,i.jsx)(`p`,{children:v}),l]})});o.displayName=`UITableStatisticDisplay`,exports.UITableStatisticDisplay=o;
-//# sourceMappingURL=statistic-BHCSCw9Q.cjs.map
+const e=require("./layouts/flex.cjs"),t=require("./tables-078i-X0d.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},o=(0,n.memo)(({decimalSeparator:o=`.`,groupSeparator:s=`,`,prefix:c,suffix:l,precision:u,roundingMode:d=`round`,showTrailingZeros:f=!1,size:p=`lg`,value:m=0})=>{let h=(0,n.useMemo)(()=>{let e={};return typeof u==`number`&&u>=0&&f&&(e.minimumFractionDigits=u),e.maximumFractionDigits=u,e},[u,f]),g=(0,n.useCallback)(e=>{let t=e;return typeof u==`number`&&u>=0&&(t=a(e,u,d)),t.toLocaleString(`en-US`,h)},[d,h,u]),_=(0,n.useMemo)(()=>{if(typeof m==`number`)return Number.isNaN(m)||!Number.isFinite(m)?`N/A`:g(m);if(typeof m==`string`){let e=m.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:g(t)}return`N/A`},[m,g]),v=(0,n.useMemo)(()=>o===`.`&&s===`,`?_:_.replace(/,/g,s).replace(/\./g,o),[_,o,s]);return v===`0`||v===`N/A`||!v?(0,i.jsx)(t.Q,{}):(0,i.jsxs)(e.Flex,{padding:`none`,className:(0,r.cn)(`font-number text-lg text-text-positive tabular-nums`,p===`xs`&&`text-xs`,p===`sm`&&`text-sm`,p===`md`&&`text-base`,p===`lg`&&`text-lg`,p===`xl`&&`text-xl`),children:[c,(0,i.jsx)(`p`,{children:v}),l]})});o.displayName=`UITableStatisticDisplay`,exports.UITableStatisticDisplay=o;
+//# sourceMappingURL=statistic-LL4uHlRb.cjs.map

package/dist/statistic-LL4uHlRb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"statistic-LL4uHlRb.cjs","names":["UITableEmpty","Flex"],"sources":["../packages/components/features/tables/components/atoms/statistic.tsx"],"sourcesContent":["'use client';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { UITableEmpty } from './empty';\n\n/**\n * Applies the specified rounding mode to `num` at the given decimal precision.\n *\n * @param num - The number to round.\n * @param precisionValue - Number of decimal places to keep.\n * @param roundingMode - Rounding strategy: `'round'` (default), `'floor'`, or `'ceil'`.\n * @returns The rounded number.\n */\nconst applyRounding = (num: number, precisionValue: number, roundingMode?: 'round' | 'floor' | 'ceil') => {\n  const multiplier = 10 ** precisionValue;\n\n  switch (roundingMode) {\n    case 'floor':\n      return Math.floor(num * multiplier) / multiplier;\n    case 'ceil':\n      return Math.ceil(num * multiplier) / multiplier;\n    default:\n      return Math.round(num * multiplier) / multiplier;\n  }\n};\n\n/** Props for the {@link UITableStatisticDisplay} component. */\ntype Props = {\n  /** Character used to separate the integer and fractional parts (default: `'.'`). */\n  decimalSeparator?: string;\n  /** Character used to separate thousands groups (default: `','`). */\n  groupSeparator?: string;\n  /** Optional node rendered before the formatted number (e.g. a currency symbol). */\n  prefix?: React.ReactNode;\n  /** Optional node rendered after the formatted number (e.g. a unit label). */\n  suffix?: React.ReactNode;\n  /** Number of decimal digits to display. */\n  precision?: number;\n  /** Rounding strategy applied before formatting (default: `'round'`). */\n  roundingMode?: 'round' | 'floor' | 'ceil';\n  /** When `true`, pads the fractional part with trailing zeros up to `precision` digits. */\n  showTrailingZeros?: boolean;\n  /** Font-size variant for the displayed number (default: `'lg'`). */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** The numeric or string value to format; falsy / invalid values render an empty state. */\n  value: number | string | null | undefined;\n};\n\n/**\n * A memoized table-cell component that formats a numeric value with configurable\n * separators, precision, rounding, and size; renders {@link UITableEmpty} when\n * the value is zero, invalid, or absent.\n *\n * @example\n * import { UITableStatisticDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatisticDisplay value={1234567.89} precision={2} prefix=\"$\" size=\"md\" />\n */\nexport const UITableStatisticDisplay = memo(\n  ({\n    decimalSeparator = '.',\n    groupSeparator = ',',\n    prefix: Prefix,\n    suffix: Suffix,\n    precision,\n    roundingMode = 'round',\n    showTrailingZeros = false,\n    size = 'lg',\n    value = 0,\n  }: Props) => {\n    // Memoize number formatting options\n    const formatOptions = useMemo((): Intl.NumberFormatOptions => {\n      const options: Intl.NumberFormatOptions = {};\n\n      if (typeof precision === 'number' && precision >= 0 && showTrailingZeros) {\n        options.minimumFractionDigits = precision;\n        options.maximumFractionDigits = precision;\n      } else {\n        options.maximumFractionDigits = precision;\n      }\n\n      return options;\n    }, [precision, showTrailingZeros]);\n\n    const formatNumber = useCallback(\n      (num: number): string => {\n        let processedNum = num;\n\n        // Áp dụng làm tròn nếu có precision\n        if (typeof precision === 'number' && precision >= 0) {\n          processedNum = applyRounding(num, precision, roundingMode);\n        }\n\n        return processedNum.toLocaleString('en-US', formatOptions);\n      },\n      [roundingMode, formatOptions, precision]\n    );\n\n    // Memoize value processing\n    const processedValue = useMemo((): string => {\n      // Xử lý giá trị number\n      if (typeof value === 'number') {\n        if (Number.isNaN(value) || !Number.isFinite(value)) {\n          return 'N/A';\n        }\n        return formatNumber(value);\n      }\n\n      // Xử lý giá trị string\n      if (typeof value === 'string') {\n        const trimmedValue = value.trim();\n\n        // Nếu là chuỗi rỗng\n        if (!trimmedValue) {\n          return 'N/A';\n        }\n\n        // Thử convert sang number\n        const numValue = Number(trimmedValue);\n\n        if (Number.isNaN(numValue) || !Number.isFinite(numValue)) {\n          // Nếu không phải số, trả về string gốc\n          return 'N/A';\n        }\n\n        return formatNumber(numValue);\n      }\n\n      return 'N/A';\n    }, [value, formatNumber]);\n\n    // Memoize separator replacement\n    const finalFormattedValue = useMemo((): string => {\n      // Chỉ thay thế separators nếu khác mặc định\n      if (decimalSeparator === '.' && groupSeparator === ',') {\n        return processedValue;\n      }\n      return processedValue.replace(/,/g, groupSeparator).replace(/\\./g, decimalSeparator);\n    }, [processedValue, decimalSeparator, groupSeparator]);\n\n    if (finalFormattedValue === '0' || finalFormattedValue === 'N/A' || !finalFormattedValue) {\n      return <UITableEmpty />;\n    }\n\n    return (\n      <Flex\n        padding=\"none\"\n        className={cn(\n          'font-number text-lg text-text-positive tabular-nums',\n          size === 'xs' && 'text-xs',\n          size === 'sm' && 'text-sm',\n          size === 'md' && 'text-base',\n          size === 'lg' && 'text-lg',\n          size === 'xl' && 'text-xl'\n        )}\n      >\n        {Prefix}\n        <p>{finalFormattedValue}</p>\n        {Suffix}\n      </Flex>\n    );\n  }\n);\nUITableStatisticDisplay.displayName = 'UITableStatisticDisplay';\n"],"mappings":"2KAgBA,MAAM,GAAiB,EAAa,EAAwB,IAA8C,CACxG,IAAM,EAAa,IAAM,EAEzB,OAAQ,EAAR,CACE,IAAK,QACH,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,EACxC,IAAK,OACH,OAAO,KAAK,KAAK,EAAM,CAAU,EAAI,EACvC,QACE,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,CAC1C,CACF,EAkCa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,mBAAmB,IACnB,iBAAiB,IACjB,OAAQ,EACR,OAAQ,EACR,YACA,eAAe,QACf,oBAAoB,GACpB,OAAO,KACP,QAAQ,KACG,CAEX,IAAM,GAAA,EAAA,EAAA,QAAA,KAAwD,CAC5D,IAAM,EAAoC,CAAC,EAS3C,OAPI,OAAO,GAAc,UAAY,GAAa,GAAK,IACrD,EAAQ,sBAAwB,GAGhC,EAAQ,sBAAwB,EAG3B,CACT,EAAG,CAAC,EAAW,CAAiB,CAAC,EAE3B,GAAA,EAAA,EAAA,YAAA,CACH,GAAwB,CACvB,IAAI,EAAe,EAOnB,OAJI,OAAO,GAAc,UAAY,GAAa,IAChD,EAAe,EAAc,EAAK,EAAW,CAAY,GAGpD,EAAa,eAAe,QAAS,CAAa,CAC3D,EACA,CAAC,EAAc,EAAe,CAAS,CACzC,EAGM,GAAA,EAAA,EAAA,QAAA,KAAuC,CAE3C,GAAI,OAAO,GAAU,SAInB,OAHI,OAAO,MAAM,CAAK,GAAK,CAAC,OAAO,SAAS,CAAK,EACxC,MAEF,EAAa,CAAK,EAI3B,GAAI,OAAO,GAAU,SAAU,CAC7B,IAAM,EAAe,EAAM,KAAK,EAGhC,GAAI,CAAC,EACH,MAAO,MAIT,IAAM,EAAW,OAAO,CAAY,EAOpC,OALI,OAAO,MAAM,CAAQ,GAAK,CAAC,OAAO,SAAS,CAAQ,EAE9C,MAGF,EAAa,CAAQ,CAC9B,CAEA,MAAO,KACT,EAAG,CAAC,EAAO,CAAY,CAAC,EAGlB,GAAA,EAAA,EAAA,QAAA,KAEA,IAAqB,KAAO,IAAmB,IAC1C,EAEF,EAAe,QAAQ,KAAM,CAAc,CAAC,CAAC,QAAQ,MAAO,CAAgB,EAClF,CAAC,EAAgB,EAAkB,CAAc,CAAC,EAMrD,OAJI,IAAwB,KAAO,IAAwB,OAAS,CAAC,GAC5D,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAItB,EAAA,EAAA,KAAA,CAACC,EAAAA,KAAD,CACE,QAAQ,OACR,WAAA,EAAA,EAAA,GAAA,CACE,sDACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,SACnB,WATF,CAWG,GACD,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,CAAuB,CAAA,EAC1B,CACG,GAEV,CACF,EACA,EAAwB,YAAc"}

package/dist/{status-display-BKe0EupF.mjs → status-display-BUphOF18.mjs}

@@ -1,2 +1,2 @@
-import{Badge as e}from"./ui/badge.mjs";import{Y as t}from"./tables-9d53sH9E.mjs";import{jsx as n}from"react/jsx-runtime";const r=({value:r,colorMap:i,defaultColor:a=`muted`,variant:o=`soft`})=>r==null||r===``?n(t,{}):n(e,{variant:o,color:(i&&i[r])??a,size:`sm`,className:`min-w-16 justify-center capitalize`,children:r.charAt(0).toUpperCase()+r.slice(1).replace(/_/g,` `)});export{r as UITableStatusDisplay};
-//# sourceMappingURL=status-display-BKe0EupF.mjs.map
+import{Badge as e}from"./ui/badge.mjs";import{Q as t}from"./tables-BGzwkdFO.mjs";import{jsx as n}from"react/jsx-runtime";const r=({value:r,colorMap:i,defaultColor:a=`muted`,variant:o=`soft`})=>r==null||r===``?n(t,{}):n(e,{variant:o,color:(i&&i[r])??a,size:`sm`,className:`min-w-16 justify-center capitalize`,children:r.charAt(0).toUpperCase()+r.slice(1).replace(/_/g,` `)});export{r as UITableStatusDisplay};
+//# sourceMappingURL=status-display-BUphOF18.mjs.map

package/dist/{status-display-BKe0EupF.mjs.map → status-display-BUphOF18.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"status-display-BKe0EupF.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/status-display.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { UITableEmpty } from './empty';\n\ntype BadgeColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Props for the {@link UITableStatusDisplay} component. */\ntype Props = {\n  /** The status string to display; `null`/`undefined` renders an empty state. */\n  value: string | null | undefined;\n  /**\n   * Maps each status string to a badge color.  Any key not present in the map\n   * falls back to `defaultColor`.\n   */\n  colorMap?: Record<string, BadgeColor>;\n  /** Color used when `value` is not found in `colorMap` (default: `'muted'`). */\n  defaultColor?: BadgeColor;\n  /** Badge variant forwarded to the underlying {@link Badge} (default: `'soft'`). */\n  variant?: 'solid' | 'soft' | 'outline';\n};\n\n/**\n * Renders a color-coded status badge for a table cell.  The mapping from status\n * string to badge color is fully configurable via `colorMap`; unknown statuses\n * fall back to `defaultColor`.\n *\n * @example\n * import { UITableStatusDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatusDisplay\n *   value=\"active\"\n *   colorMap={{ active: 'success', inactive: 'danger', pending: 'warning' }}\n * />\n */\nexport const UITableStatusDisplay: React.FC<Props> = ({ value, colorMap, defaultColor = 'muted', variant = 'soft' }) => {\n  if (value === null || value === undefined || value === '') return <UITableEmpty />;\n\n  const color: BadgeColor = (colorMap && colorMap[value]) ?? defaultColor;\n  const label = value.charAt(0).toUpperCase() + value.slice(1).replace(/_/g, ' ');\n\n  return (\n    <Badge variant={variant} color={color} size=\"sm\" className=\"min-w-16 justify-center capitalize\">\n      {label}\n    </Badge>\n  );\n};\n"],"mappings":"yHAmCA,MAAa,GAAyC,CAAE,QAAO,WAAU,eAAe,QAAS,UAAU,UACrG,GAAU,MAA+B,IAAU,GAAW,EAAC,EAAD,CAAe,CAAA,EAM/E,EAAC,EAAD,CAAgB,UAAS,OAJA,GAAY,EAAS,KAAW,EAIlB,KAAK,KAAK,UAAU,8CAH/C,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,CAKrE,CAAA"}
+{"version":3,"file":"status-display-BUphOF18.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/status-display.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { UITableEmpty } from './empty';\n\ntype BadgeColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Props for the {@link UITableStatusDisplay} component. */\ntype Props = {\n  /** The status string to display; `null`/`undefined` renders an empty state. */\n  value: string | null | undefined;\n  /**\n   * Maps each status string to a badge color.  Any key not present in the map\n   * falls back to `defaultColor`.\n   */\n  colorMap?: Record<string, BadgeColor>;\n  /** Color used when `value` is not found in `colorMap` (default: `'muted'`). */\n  defaultColor?: BadgeColor;\n  /** Badge variant forwarded to the underlying {@link Badge} (default: `'soft'`). */\n  variant?: 'solid' | 'soft' | 'outline';\n};\n\n/**\n * Renders a color-coded status badge for a table cell.  The mapping from status\n * string to badge color is fully configurable via `colorMap`; unknown statuses\n * fall back to `defaultColor`.\n *\n * @example\n * import { UITableStatusDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatusDisplay\n *   value=\"active\"\n *   colorMap={{ active: 'success', inactive: 'danger', pending: 'warning' }}\n * />\n */\nexport const UITableStatusDisplay: React.FC<Props> = ({ value, colorMap, defaultColor = 'muted', variant = 'soft' }) => {\n  if (value === null || value === undefined || value === '') return <UITableEmpty />;\n\n  const color: BadgeColor = (colorMap && colorMap[value]) ?? defaultColor;\n  const label = value.charAt(0).toUpperCase() + value.slice(1).replace(/_/g, ' ');\n\n  return (\n    <Badge variant={variant} color={color} size=\"sm\" className=\"min-w-16 justify-center capitalize\">\n      {label}\n    </Badge>\n  );\n};\n"],"mappings":"yHAmCA,MAAa,GAAyC,CAAE,QAAO,WAAU,eAAe,QAAS,UAAU,UACrG,GAAU,MAA+B,IAAU,GAAW,EAAC,EAAD,CAAe,CAAA,EAM/E,EAAC,EAAD,CAAgB,UAAS,OAJA,GAAY,EAAS,KAAW,EAIlB,KAAK,KAAK,UAAU,8CAH/C,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,CAKrE,CAAA"}

package/dist/{status-display-BRJX53bQ.cjs → status-display-o9inMVvb.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/badge.cjs"),t=require("./tables-B1O9qy-m.cjs");let n=require("react/jsx-runtime");const r=({value:r,colorMap:i,defaultColor:a=`muted`,variant:o=`soft`})=>r==null||r===``?(0,n.jsx)(t.Y,{}):(0,n.jsx)(e.Badge,{variant:o,color:(i&&i[r])??a,size:`sm`,className:`min-w-16 justify-center capitalize`,children:r.charAt(0).toUpperCase()+r.slice(1).replace(/_/g,` `)});exports.UITableStatusDisplay=r;
-//# sourceMappingURL=status-display-BRJX53bQ.cjs.map
+const e=require("./ui/badge.cjs"),t=require("./tables-078i-X0d.cjs");let n=require("react/jsx-runtime");const r=({value:r,colorMap:i,defaultColor:a=`muted`,variant:o=`soft`})=>r==null||r===``?(0,n.jsx)(t.Q,{}):(0,n.jsx)(e.Badge,{variant:o,color:(i&&i[r])??a,size:`sm`,className:`min-w-16 justify-center capitalize`,children:r.charAt(0).toUpperCase()+r.slice(1).replace(/_/g,` `)});exports.UITableStatusDisplay=r;
+//# sourceMappingURL=status-display-o9inMVvb.cjs.map

package/dist/{status-display-BRJX53bQ.cjs.map → status-display-o9inMVvb.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"status-display-BRJX53bQ.cjs","names":["UITableEmpty","Badge"],"sources":["../packages/components/features/tables/components/atoms/status-display.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { UITableEmpty } from './empty';\n\ntype BadgeColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Props for the {@link UITableStatusDisplay} component. */\ntype Props = {\n  /** The status string to display; `null`/`undefined` renders an empty state. */\n  value: string | null | undefined;\n  /**\n   * Maps each status string to a badge color.  Any key not present in the map\n   * falls back to `defaultColor`.\n   */\n  colorMap?: Record<string, BadgeColor>;\n  /** Color used when `value` is not found in `colorMap` (default: `'muted'`). */\n  defaultColor?: BadgeColor;\n  /** Badge variant forwarded to the underlying {@link Badge} (default: `'soft'`). */\n  variant?: 'solid' | 'soft' | 'outline';\n};\n\n/**\n * Renders a color-coded status badge for a table cell.  The mapping from status\n * string to badge color is fully configurable via `colorMap`; unknown statuses\n * fall back to `defaultColor`.\n *\n * @example\n * import { UITableStatusDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatusDisplay\n *   value=\"active\"\n *   colorMap={{ active: 'success', inactive: 'danger', pending: 'warning' }}\n * />\n */\nexport const UITableStatusDisplay: React.FC<Props> = ({ value, colorMap, defaultColor = 'muted', variant = 'soft' }) => {\n  if (value === null || value === undefined || value === '') return <UITableEmpty />;\n\n  const color: BadgeColor = (colorMap && colorMap[value]) ?? defaultColor;\n  const label = value.charAt(0).toUpperCase() + value.slice(1).replace(/_/g, ' ');\n\n  return (\n    <Badge variant={variant} color={color} size=\"sm\" className=\"min-w-16 justify-center capitalize\">\n      {label}\n    </Badge>\n  );\n};\n"],"mappings":"wGAmCA,MAAa,GAAyC,CAAE,QAAO,WAAU,eAAe,QAAS,UAAU,UACrG,GAAU,MAA+B,IAAU,IAAW,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAM/E,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAgB,UAAS,OAJA,GAAY,EAAS,KAAW,EAIlB,KAAK,KAAK,UAAU,8CAH/C,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,CAKrE,CAAA"}
+{"version":3,"file":"status-display-o9inMVvb.cjs","names":["UITableEmpty","Badge"],"sources":["../packages/components/features/tables/components/atoms/status-display.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { UITableEmpty } from './empty';\n\ntype BadgeColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Props for the {@link UITableStatusDisplay} component. */\ntype Props = {\n  /** The status string to display; `null`/`undefined` renders an empty state. */\n  value: string | null | undefined;\n  /**\n   * Maps each status string to a badge color.  Any key not present in the map\n   * falls back to `defaultColor`.\n   */\n  colorMap?: Record<string, BadgeColor>;\n  /** Color used when `value` is not found in `colorMap` (default: `'muted'`). */\n  defaultColor?: BadgeColor;\n  /** Badge variant forwarded to the underlying {@link Badge} (default: `'soft'`). */\n  variant?: 'solid' | 'soft' | 'outline';\n};\n\n/**\n * Renders a color-coded status badge for a table cell.  The mapping from status\n * string to badge color is fully configurable via `colorMap`; unknown statuses\n * fall back to `defaultColor`.\n *\n * @example\n * import { UITableStatusDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatusDisplay\n *   value=\"active\"\n *   colorMap={{ active: 'success', inactive: 'danger', pending: 'warning' }}\n * />\n */\nexport const UITableStatusDisplay: React.FC<Props> = ({ value, colorMap, defaultColor = 'muted', variant = 'soft' }) => {\n  if (value === null || value === undefined || value === '') return <UITableEmpty />;\n\n  const color: BadgeColor = (colorMap && colorMap[value]) ?? defaultColor;\n  const label = value.charAt(0).toUpperCase() + value.slice(1).replace(/_/g, ' ');\n\n  return (\n    <Badge variant={variant} color={color} size=\"sm\" className=\"min-w-16 justify-center capitalize\">\n      {label}\n    </Badge>\n  );\n};\n"],"mappings":"wGAmCA,MAAa,GAAyC,CAAE,QAAO,WAAU,eAAe,QAAS,UAAU,UACrG,GAAU,MAA+B,IAAU,IAAW,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAM/E,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAgB,UAAS,OAJA,GAAY,EAAS,KAAW,EAIlB,KAAK,KAAK,UAAU,8CAH/C,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,CAKrE,CAAA"}

package/dist/summary-bar-CYfgdxrQ.mjs

@@ -0,0 +1,2 @@
+import{Statistic as e}from"./data-display/statistic.mjs";import{Y as t,Z as n}from"./tables-BGzwkdFO.mjs";import{memo as r}from"react";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s={up:`bg-success`,down:`bg-danger`,neutral:`bg-primary`},c=r(()=>{let{summary:r,onSummaryItemClick:c}=t(),{isOpen:l}=n();return!l||!r||r.length===0?null:a(`div`,{"data-slot":`table-summary-bar`,className:`w-full overflow-x-auto px-2 pb-1`,children:a(`div`,{className:`grid gap-3`,style:{gridTemplateColumns:`repeat(auto-fill, minmax(200px, 240px))`},children:r.map(t=>{let n=s[t.trend??`neutral`],r=!!c;return o(`div`,{className:i(`flex flex-col overflow-hidden rounded border border-border bg-card shadow-card`,r&&`cursor-pointer transition-shadow hover:shadow-md`),onClick:r?()=>c(t):void 0,role:r?`button`:void 0,tabIndex:r?0:void 0,onKeyDown:r?e=>{(e.key===`Enter`||e.key===` `)&&c(t)}:void 0,children:[a(`div`,{className:i(`h-0.75 w-full shrink-0`,n)}),o(`div`,{className:`flex flex-1 flex-col gap-2 px-5 py-4`,children:[a(`span`,{className:`text-[11px] font-semibold uppercase tracking-widest text-text-positive-weak`,children:t.label}),t.value!==null&&t.value!==void 0?a(e,{value:t.value,prefix:t.prefix,suffix:t.suffix,precision:t.precision,trend:t.trend,size:`xl`,className:`font-bold`}):a(`span`,{className:`text-xl font-bold tabular-nums text-text-positive-strong`,children:`—`}),t.description&&a(`span`,{className:`text-xs text-text-positive-weak`,children:t.description})]})]},t.label)})})})});c.displayName=`UITableSummaryBar`;export{c as UITableSummaryBar};
+//# sourceMappingURL=summary-bar-CYfgdxrQ.mjs.map

package/dist/summary-bar-CYfgdxrQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-bar-CYfgdxrQ.mjs","names":[],"sources":["../packages/components/features/tables/components/table/summary-bar.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Statistic } from '@/components/data-display/statistic';\nimport { useUITableContext, useUITableSummaryContext } from '../../hooks/use-context';\nimport type { SummaryItem } from '../../types';\n\nconst trendAccent: Record<NonNullable<SummaryItem['trend']>, string> = {\n  up: 'bg-success',\n  down: 'bg-danger',\n  neutral: 'bg-primary',\n};\n\nexport const UITableSummaryBar = memo(() => {\n  const { summary, onSummaryItemClick } = useUITableContext();\n  const { isOpen } = useUITableSummaryContext();\n\n  if (!isOpen || !summary || summary.length === 0) return null;\n\n  return (\n    <div data-slot=\"table-summary-bar\" className=\"w-full overflow-x-auto px-2 pb-1\">\n      <div className=\"grid gap-3\" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 240px))' }}>\n        {summary.map(item => {\n          const accent = trendAccent[item.trend ?? 'neutral'];\n          const isClickable = !!onSummaryItemClick;\n\n          return (\n            <div\n              key={item.label}\n              className={cn(\n                'flex flex-col overflow-hidden rounded border border-border bg-card shadow-card',\n                isClickable && 'cursor-pointer transition-shadow hover:shadow-md'\n              )}\n              onClick={isClickable ? () => onSummaryItemClick(item) : undefined}\n              role={isClickable ? 'button' : undefined}\n              tabIndex={isClickable ? 0 : undefined}\n              onKeyDown={\n                isClickable\n                  ? e => {\n                      if (e.key === 'Enter' || e.key === ' ') onSummaryItemClick(item);\n                    }\n                  : undefined\n              }\n            >\n              {/* Coloured accent strip */}\n              <div className={cn('h-0.75 w-full shrink-0', accent)} />\n\n              <div className=\"flex flex-1 flex-col gap-2 px-5 py-4\">\n                {/* Label */}\n                <span className=\"text-[11px] font-semibold uppercase tracking-widest text-text-positive-weak\">{item.label}</span>\n\n                {/* Value */}\n                {item.value !== null && item.value !== undefined ? (\n                  <Statistic\n                    value={item.value}\n                    prefix={item.prefix}\n                    suffix={item.suffix}\n                    precision={item.precision}\n                    trend={item.trend}\n                    size=\"xl\"\n                    className=\"font-bold\"\n                  />\n                ) : (\n                  <span className=\"text-xl font-bold tabular-nums text-text-positive-strong\">—</span>\n                )}\n\n                {/* Description */}\n                {item.description && <span className=\"text-xs text-text-positive-weak\">{item.description}</span>}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n});\nUITableSummaryBar.displayName = 'UITableSummaryBar';\n"],"mappings":"6OASA,MAAM,EAAiE,CACrE,GAAI,aACJ,KAAM,YACN,QAAS,YACX,EAEa,EAAoB,MAAW,CAC1C,GAAM,CAAE,UAAS,sBAAuB,EAAkB,EACpD,CAAE,UAAW,EAAyB,EAI5C,MAFI,CAAC,GAAU,CAAC,GAAW,EAAQ,SAAW,EAAU,KAGtD,EAAC,MAAD,CAAK,YAAU,oBAAoB,UAAU,4CAC3C,EAAC,MAAD,CAAK,UAAU,aAAa,MAAO,CAAE,oBAAqB,yCAA0C,WACjG,EAAQ,IAAI,GAAQ,CACnB,IAAM,EAAS,EAAY,EAAK,OAAS,WACnC,EAAc,CAAC,CAAC,EAEtB,OACE,EAAC,MAAD,CAEE,UAAW,EACT,iFACA,GAAe,kDACjB,EACA,QAAS,MAAoB,EAAmB,CAAI,EAAI,IAAA,GACxD,KAAM,EAAc,SAAW,IAAA,GAC/B,SAAU,EAAc,EAAI,IAAA,GAC5B,UACE,EACI,GAAK,EACC,EAAE,MAAQ,SAAW,EAAE,MAAQ,MAAK,EAAmB,CAAI,CACjE,EACA,IAAA,YAdR,CAkBE,EAAC,MAAD,CAAK,UAAW,EAAG,yBAA0B,CAAM,CAAI,CAAA,EAEvD,EAAC,MAAD,CAAK,UAAU,gDAAf,CAEE,EAAC,OAAD,CAAM,UAAU,uFAA+E,EAAK,KAAY,CAAA,EAG/G,EAAK,QAAU,MAAQ,EAAK,QAAU,IAAA,GACrC,EAAC,EAAD,CACE,MAAO,EAAK,MACZ,OAAQ,EAAK,OACb,OAAQ,EAAK,OACb,UAAW,EAAK,UAChB,MAAO,EAAK,MACZ,KAAK,KACL,UAAU,WACX,CAAA,EAED,EAAC,OAAD,CAAM,UAAU,oEAA2D,GAAO,CAAA,EAInF,EAAK,aAAe,EAAC,OAAD,CAAM,UAAU,2CAAmC,EAAK,WAAkB,CAAA,CAC5F,GACF,GAzCE,EAAK,KAyCP,CAET,CAAC,CACE,CAAA,CACF,CAAA,CAET,CAAC,EACD,EAAkB,YAAc"}

package/dist/summary-bar-Mb1B9Dnf.cjs

@@ -0,0 +1,2 @@
+const e=require("./data-display/statistic.cjs"),t=require("./tables-078i-X0d.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a={up:`bg-success`,down:`bg-danger`,neutral:`bg-primary`},o=(0,n.memo)(()=>{let{summary:n,onSummaryItemClick:o}=t.Y(),{isOpen:s}=t.Z();return!s||!n||n.length===0?null:(0,i.jsx)(`div`,{"data-slot":`table-summary-bar`,className:`w-full overflow-x-auto px-2 pb-1`,children:(0,i.jsx)(`div`,{className:`grid gap-3`,style:{gridTemplateColumns:`repeat(auto-fill, minmax(200px, 240px))`},children:n.map(t=>{let n=a[t.trend??`neutral`],s=!!o;return(0,i.jsxs)(`div`,{className:(0,r.cn)(`flex flex-col overflow-hidden rounded border border-border bg-card shadow-card`,s&&`cursor-pointer transition-shadow hover:shadow-md`),onClick:s?()=>o(t):void 0,role:s?`button`:void 0,tabIndex:s?0:void 0,onKeyDown:s?e=>{(e.key===`Enter`||e.key===` `)&&o(t)}:void 0,children:[(0,i.jsx)(`div`,{className:(0,r.cn)(`h-0.75 w-full shrink-0`,n)}),(0,i.jsxs)(`div`,{className:`flex flex-1 flex-col gap-2 px-5 py-4`,children:[(0,i.jsx)(`span`,{className:`text-[11px] font-semibold uppercase tracking-widest text-text-positive-weak`,children:t.label}),t.value!==null&&t.value!==void 0?(0,i.jsx)(e.Statistic,{value:t.value,prefix:t.prefix,suffix:t.suffix,precision:t.precision,trend:t.trend,size:`xl`,className:`font-bold`}):(0,i.jsx)(`span`,{className:`text-xl font-bold tabular-nums text-text-positive-strong`,children:`—`}),t.description&&(0,i.jsx)(`span`,{className:`text-xs text-text-positive-weak`,children:t.description})]})]},t.label)})})})});o.displayName=`UITableSummaryBar`,exports.UITableSummaryBar=o;
+//# sourceMappingURL=summary-bar-Mb1B9Dnf.cjs.map

package/dist/summary-bar-Mb1B9Dnf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-bar-Mb1B9Dnf.cjs","names":["useUITableContext","useUITableSummaryContext","Statistic"],"sources":["../packages/components/features/tables/components/table/summary-bar.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Statistic } from '@/components/data-display/statistic';\nimport { useUITableContext, useUITableSummaryContext } from '../../hooks/use-context';\nimport type { SummaryItem } from '../../types';\n\nconst trendAccent: Record<NonNullable<SummaryItem['trend']>, string> = {\n  up: 'bg-success',\n  down: 'bg-danger',\n  neutral: 'bg-primary',\n};\n\nexport const UITableSummaryBar = memo(() => {\n  const { summary, onSummaryItemClick } = useUITableContext();\n  const { isOpen } = useUITableSummaryContext();\n\n  if (!isOpen || !summary || summary.length === 0) return null;\n\n  return (\n    <div data-slot=\"table-summary-bar\" className=\"w-full overflow-x-auto px-2 pb-1\">\n      <div className=\"grid gap-3\" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 240px))' }}>\n        {summary.map(item => {\n          const accent = trendAccent[item.trend ?? 'neutral'];\n          const isClickable = !!onSummaryItemClick;\n\n          return (\n            <div\n              key={item.label}\n              className={cn(\n                'flex flex-col overflow-hidden rounded border border-border bg-card shadow-card',\n                isClickable && 'cursor-pointer transition-shadow hover:shadow-md'\n              )}\n              onClick={isClickable ? () => onSummaryItemClick(item) : undefined}\n              role={isClickable ? 'button' : undefined}\n              tabIndex={isClickable ? 0 : undefined}\n              onKeyDown={\n                isClickable\n                  ? e => {\n                      if (e.key === 'Enter' || e.key === ' ') onSummaryItemClick(item);\n                    }\n                  : undefined\n              }\n            >\n              {/* Coloured accent strip */}\n              <div className={cn('h-0.75 w-full shrink-0', accent)} />\n\n              <div className=\"flex flex-1 flex-col gap-2 px-5 py-4\">\n                {/* Label */}\n                <span className=\"text-[11px] font-semibold uppercase tracking-widest text-text-positive-weak\">{item.label}</span>\n\n                {/* Value */}\n                {item.value !== null && item.value !== undefined ? (\n                  <Statistic\n                    value={item.value}\n                    prefix={item.prefix}\n                    suffix={item.suffix}\n                    precision={item.precision}\n                    trend={item.trend}\n                    size=\"xl\"\n                    className=\"font-bold\"\n                  />\n                ) : (\n                  <span className=\"text-xl font-bold tabular-nums text-text-positive-strong\">—</span>\n                )}\n\n                {/* Description */}\n                {item.description && <span className=\"text-xs text-text-positive-weak\">{item.description}</span>}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n});\nUITableSummaryBar.displayName = 'UITableSummaryBar';\n"],"mappings":"qLASA,MAAM,EAAiE,CACrE,GAAI,aACJ,KAAM,YACN,QAAS,YACX,EAEa,GAAA,EAAA,EAAA,KAAA,KAA+B,CAC1C,GAAM,CAAE,UAAS,sBAAuBA,EAAAA,EAAkB,EACpD,CAAE,UAAWC,EAAAA,EAAyB,EAI5C,MAFI,CAAC,GAAU,CAAC,GAAW,EAAQ,SAAW,EAAU,MAGtD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,oBAAoB,UAAU,6CAC3C,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,aAAa,MAAO,CAAE,oBAAqB,yCAA0C,WACjG,EAAQ,IAAI,GAAQ,CACnB,IAAM,EAAS,EAAY,EAAK,OAAS,WACnC,EAAc,CAAC,CAAC,EAEtB,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,iFACA,GAAe,kDACjB,EACA,QAAS,MAAoB,EAAmB,CAAI,EAAI,IAAA,GACxD,KAAM,EAAc,SAAW,IAAA,GAC/B,SAAU,EAAc,EAAI,IAAA,GAC5B,UACE,EACI,GAAK,EACC,EAAE,MAAQ,SAAW,EAAE,MAAQ,MAAK,EAAmB,CAAI,CACjE,EACA,IAAA,YAdR,EAkBE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,yBAA0B,CAAM,CAAI,CAAA,GAEvD,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gDAAf,EAEE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,uFAA+E,EAAK,KAAY,CAAA,EAG/G,EAAK,QAAU,MAAQ,EAAK,QAAU,IAAA,IACrC,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CACE,MAAO,EAAK,MACZ,OAAQ,EAAK,OACb,OAAQ,EAAK,OACb,UAAW,EAAK,UAChB,MAAO,EAAK,MACZ,KAAK,KACL,UAAU,WACX,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oEAA2D,GAAO,CAAA,EAInF,EAAK,cAAe,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2CAAmC,EAAK,WAAkB,CAAA,CAC5F,GACF,GAzCE,EAAK,KAyCP,CAET,CAAC,CACE,CAAA,CACF,CAAA,CAET,CAAC,EACD,EAAkB,YAAc"}