@customafk/lunas-ui 0.2.81 → 0.2.83

package/dist/{radio-group-field-kTgtvp1p.cjs.map → radio-group-field-BFhBfzoT.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"radio-group-field-kTgtvp1p.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","RadioGroup","RadioGroupItem","FieldTitle","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"qOAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQA,EAAAA,EAAuC,EAC/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,OAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,UAAU,iBAA3C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,GAEd,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,aACjF,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,IAAA,CAACL,EAAAA,WAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,EAEA,UAAA,EAAA,EAAA,KAAA,CAACF,EAAAA,MAAD,CAAO,YAAY,aAAa,UAAU,iCAA1C,SAAA,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,eAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,GAClE,EAAA,EAAA,KAAA,CAACP,EAAAA,aAAD,CAAc,UAAU,WAAxB,SAAA,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,WAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,GACtC,EAAA,EAAA,IAAA,CAACL,EAAAA,iBAAD,CAAkB,UAAU,UAAW,SAAA,EAAO,WAA8B,CAAA,CAChE,CACT,CAAA,CAAA,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACM,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"radio-group-field-BFhBfzoT.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","RadioGroup","RadioGroupItem","FieldTitle","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"qOAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQA,EAAAA,EAAuC,EAC/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,OAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,UAAU,iBAA3C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,GAEd,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,aACjF,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,IAAA,CAACL,EAAAA,WAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,EAEA,UAAA,EAAA,EAAA,KAAA,CAACF,EAAAA,MAAD,CAAO,YAAY,aAAa,UAAU,iCAA1C,SAAA,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,eAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,GAClE,EAAA,EAAA,KAAA,CAACP,EAAAA,aAAD,CAAc,UAAU,WAAxB,SAAA,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,WAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,GACtC,EAAA,EAAA,IAAA,CAACL,EAAAA,iBAAD,CAAkB,UAAU,UAAW,SAAA,EAAO,WAA8B,CAAA,CAChE,CACT,CAAA,CAAA,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACM,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{radio-group-field-DOJ4jVSr.mjs → radio-group-field-Iwo2Q2Ig.mjs}

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-q9hDCc0Y.mjs";import{RadioGroup as t,RadioGroupItem as n}from"./ui/radio-group.mjs";import{Field as r,FieldContent as i,FieldContentMain as a,FieldDescription as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTitle as d,FieldTooltip as f}from"./field-V2DoD8qL.mjs";import{cn as p}from"@customafk/react-toolkit/utils";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useStore as g}from"@tanstack/react-form";const _=({label:_,description:v,orientation:y,options:b,tooltip:x,helperText:S})=>{let C=e(),w=g(C.form.store,({isSubmitting:e})=>e);return h(s,{className:`px-4`,children:[h(r,{orientation:y,className:`flex-col gap-2`,children:[h(i,{children:[h(c,{children:[_,x&&m(f,{tooltip:x})]}),m(o,{children:v}),m(l,{isShow:!!S,children:S})]}),m(a,{children:m(t,{value:C.state.value??``,className:`w-full`,onValueChange:C.handleChange,children:b.map(e=>m(c,{className:p(`h-fit`,C.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,w&&`pointer-events-none bg-muted-muted opacity-60`,C.state.value===e.value&&w&&`border-border-strong!`),children:h(r,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[m(n,{value:e.value,className:`mt-0.5 shrink-0`}),h(i,{className:`gap-0.5!`,children:[m(d,{children:e.label}),m(o,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),m(u,{})]})};export{_ as RadioGroupField};
-//# sourceMappingURL=radio-group-field-DOJ4jVSr.mjs.map
+import{G as e}from"./tanstack-form-fkaBh9RO.mjs";import{RadioGroup as t,RadioGroupItem as n}from"./ui/radio-group.mjs";import{Field as r,FieldContent as i,FieldContentMain as a,FieldDescription as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTitle as d,FieldTooltip as f}from"./field-V2DoD8qL.mjs";import{cn as p}from"@customafk/react-toolkit/utils";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useStore as g}from"@tanstack/react-form";const _=({label:_,description:v,orientation:y,options:b,tooltip:x,helperText:S})=>{let C=e(),w=g(C.form.store,({isSubmitting:e})=>e);return h(s,{className:`px-4`,children:[h(r,{orientation:y,className:`flex-col gap-2`,children:[h(i,{children:[h(c,{children:[_,x&&m(f,{tooltip:x})]}),m(o,{children:v}),m(l,{isShow:!!S,children:S})]}),m(a,{children:m(t,{value:C.state.value??``,className:`w-full`,onValueChange:C.handleChange,children:b.map(e=>m(c,{className:p(`h-fit`,C.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,w&&`pointer-events-none bg-muted-muted opacity-60`,C.state.value===e.value&&w&&`border-border-strong!`),children:h(r,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[m(n,{value:e.value,className:`mt-0.5 shrink-0`}),h(i,{className:`gap-0.5!`,children:[m(d,{children:e.label}),m(o,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),m(u,{})]})};export{_ as RadioGroupField};
+//# sourceMappingURL=radio-group-field-Iwo2Q2Ig.mjs.map

package/dist/{radio-group-field-DOJ4jVSr.mjs.map → radio-group-field-Iwo2Q2Ig.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"radio-group-field-DOJ4jVSr.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"6dAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQ,EAAuC,EAC/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,OAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAAa,UAAU,iBAA3C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,aACjF,SAAA,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,UAAW,EACT,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,EAEA,SAAA,EAAC,EAAD,CAAO,YAAY,aAAa,UAAU,iCAA1C,SAAA,CACE,EAAC,EAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,EAClE,EAAC,EAAD,CAAc,UAAU,WAAxB,SAAA,CACE,EAAC,EAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,EACtC,EAAC,EAAD,CAAkB,UAAU,UAAW,SAAA,EAAO,WAA8B,CAAA,CAChE,CACT,CAAA,CAAA,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"radio-group-field-Iwo2Q2Ig.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"6dAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQ,EAAuC,EAC/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,OAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAAa,UAAU,iBAA3C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,aACjF,SAAA,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,UAAW,EACT,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,EAEA,SAAA,EAAC,EAAD,CAAO,YAAY,aAAa,UAAU,iCAA1C,SAAA,CACE,EAAC,EAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,EAClE,EAAC,EAAD,CAAc,UAAU,WAAxB,SAAA,CACE,EAAC,EAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,EACtC,EAAC,EAAD,CAAkB,UAAU,UAAW,SAAA,EAAO,WAA8B,CAAA,CAChE,CACT,CAAA,CAAA,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{resizable-D61lvcIL.d.cts → resizable-CNqPu4Ck.d.cts}

@@ -35,7 +35,7 @@ declare const ResizablePanelGroup: import("react").NamedExoticComponent<Omit<imp
   children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>>;
 /** An individual resizable panel within a ResizablePanelGroup. */
-declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLInputElement | HTMLFieldSetElement | HTMLLegendElement | HTMLDivElement | HTMLLabelElement | HTMLButtonElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableRowElement | HTMLTableCellElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLInputElement | HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLButtonElement | HTMLLabelElement | HTMLFieldSetElement | HTMLLegendElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
   className?: string;
   collapsedSize?: number | undefined;
   collapsible?: boolean | undefined;
@@ -60,4 +60,4 @@ declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("
 declare const ResizableHandle: import("react").NamedExoticComponent<TResizableHandle>;
 //#endregion
 export { ResizablePanel as n, ResizablePanelGroup as r, ResizableHandle as t };
-//# sourceMappingURL=resizable-D61lvcIL.d.cts.map
+//# sourceMappingURL=resizable-CNqPu4Ck.d.cts.map

package/dist/{resizable-D61lvcIL.d.mts → resizable-CNqPu4Ck.d.mts}

@@ -35,7 +35,7 @@ declare const ResizablePanelGroup: import("react").NamedExoticComponent<Omit<imp
   children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>>;
 /** An individual resizable panel within a ResizablePanelGroup. */
-declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLInputElement | HTMLFieldSetElement | HTMLLegendElement | HTMLDivElement | HTMLLabelElement | HTMLButtonElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableRowElement | HTMLTableCellElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLInputElement | HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLButtonElement | HTMLLabelElement | HTMLFieldSetElement | HTMLLegendElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
   className?: string;
   collapsedSize?: number | undefined;
   collapsible?: boolean | undefined;
@@ -60,4 +60,4 @@ declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("
 declare const ResizableHandle: import("react").NamedExoticComponent<TResizableHandle>;
 //#endregion
 export { ResizablePanel as n, ResizablePanelGroup as r, ResizableHandle as t };
-//# sourceMappingURL=resizable-D61lvcIL.d.mts.map
+//# sourceMappingURL=resizable-CNqPu4Ck.d.mts.map

package/dist/{select-field-CURv37h4.cjs → select-field-CvDBZQTl.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/dialog.cjs"),t=require("./tanstack-form-BxqS40rB.cjs"),n=require("./ui/select.cjs"),r=require("./field-BSLi-P0Q.cjs");let i=require("lucide-react"),a=require("react"),o=require("@customafk/react-toolkit/utils"),s=require("react/jsx-runtime"),c=require("radix-ui"),l=require("@tanstack/react-form"),u=require("@customafk/react-toolkit/hooks/useMobile");const d=(0,a.memo)(({label:d,description:f,placeholder:p,orientation:m=`responsive`,tooltip:h,options:g,helperText:_,clearable:v=!1,required:y=!1,disabled:b=!1,showErrorMessage:x=!0})=>{let S=(0,a.useId)(),C=t.G(),w=(0,u.useIsMobile)(),[T,E]=(0,a.useState)(!1),D=(0,l.useStore)(C.form.store,({isSubmitting:e})=>e),O=b||D,k=C.state.meta.isDirty||C.state.meta.isTouched,A=k&&!C.state.meta.isValid,j=y&&C.state.value===null,M=v&&!!C.state.value&&!O,N=g.find(e=>e.value===C.state.value)?.label,P=()=>{C.handleChange(null),C.handleBlur()};return(0,s.jsxs)(r.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,s.jsxs)(r.Field,{orientation:m,"data-invalid":A,children:[(0,s.jsxs)(r.FieldContent,{children:[(0,s.jsxs)(r.FieldLabel,{htmlFor:C.name,"aria-required":j,children:[d,h&&(0,s.jsx)(r.FieldTooltip,{tooltip:h})]}),(0,s.jsx)(r.FieldDescription,{children:f})]}),(0,s.jsxs)(r.FieldContentMain,{className:`flex flex-col`,children:[w?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(`button`,{id:C.name,type:`button`,disabled:O,"aria-invalid":A?`true`:void 0,"aria-describedby":S,onBlur:C.handleBlur,onClick:()=>E(!0),className:(0,o.cn)(`flex w-full items-center justify-between`,`outline-1 outline-border -outline-offset-1`,`gap-2 rounded bg-transparent px-3 py-2`,`shadow-input transition-all cursor-pointer whitespace-nowrap text-sm`,`focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`disabled:cursor-not-allowed disabled:opacity-50`,A&&`outline-danger bg-danger-bg-subtle ring-danger-weak`,!C.state.value&&`text-text-positive-muted`),children:[(0,s.jsx)(`span`,{className:`line-clamp-1`,children:N??p}),(0,s.jsx)(i.ChevronDownIcon,{size:16,className:`shrink-0 opacity-50`})]}),(0,s.jsx)(e.Dialog,{open:T,onOpenChange:e=>{E(e),e||C.handleBlur()},children:(0,s.jsxs)(e.DialogPortal,{children:[(0,s.jsx)(e.DialogOverlay,{}),(0,s.jsxs)(c.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,o.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,s.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,s.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:d??p??`Chọn một tùy chọn`}),(0,s.jsx)(e.DialogClose,{asChild:!0,children:(0,s.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,s.jsx)(i.XIcon,{size:16})})})]}),(0,s.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[M&&(0,s.jsx)(e.DialogClose,{asChild:!0,children:(0,s.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:P,children:[(0,s.jsx)(i.XIcon,{size:14}),`Xóa lựa chọn`]})}),g.length>0?g.map(t=>(0,s.jsx)(e.DialogClose,{asChild:!0,children:(0,s.jsx)(`button`,{type:`button`,className:(0,o.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,C.state.value===t.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{C.handleChange(t.value),C.handleBlur()},children:t.label})},t.value)):(0,s.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,s.jsx)(i.PackagePlusIcon,{strokeWidth:1}),`Không có tùy chọn`]})]}),(0,s.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsxs)(n.Select,{value:C.state.value??``,disabled:O,onValueChange:C.handleChange,children:[(0,s.jsx)(n.SelectTrigger,{"aria-invalid":A?`true`:void 0,"aria-describedby":S,onBlur:C.handleBlur,children:(0,s.jsx)(n.SelectValue,{placeholder:p})}),(0,s.jsx)(n.SelectContent,{children:g.length>0?g.map(e=>(0,s.jsx)(n.SelectItem,{value:e.value,children:e.label},e.value)):(0,s.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,s.jsx)(i.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),M&&(0,s.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:P,children:(0,s.jsx)(i.XIcon,{"aria-hidden":`true`})})]}),k&&x&&(0,s.jsx)(r.FieldError,{id:S,className:`mt-1`,errors:C.state.meta.errors}),(0,s.jsx)(r.FieldNote,{isShow:!!_,children:_})]})]}),(0,s.jsx)(r.FieldSeparator,{})]})});d.displayName=`SelectField`,exports.SelectField=d;
-//# sourceMappingURL=select-field-CURv37h4.cjs.map
+const e=require("./ui/dialog.cjs"),t=require("./tanstack-form-C0ab8EEl.cjs"),n=require("./ui/select.cjs"),r=require("./field-BSLi-P0Q.cjs");let i=require("lucide-react"),a=require("react"),o=require("@customafk/react-toolkit/utils"),s=require("react/jsx-runtime"),c=require("radix-ui"),l=require("@tanstack/react-form"),u=require("@customafk/react-toolkit/hooks/useMobile");const d=(0,a.memo)(({label:d,description:f,placeholder:p,orientation:m=`responsive`,tooltip:h,options:g,helperText:_,clearable:v=!1,required:y=!1,disabled:b=!1,showErrorMessage:x=!0})=>{let S=(0,a.useId)(),C=t.G(),w=(0,u.useIsMobile)(),[T,E]=(0,a.useState)(!1),D=(0,l.useStore)(C.form.store,({isSubmitting:e})=>e),O=b||D,k=C.state.meta.isDirty||C.state.meta.isTouched,A=k&&!C.state.meta.isValid,j=y&&C.state.value===null,M=v&&!!C.state.value&&!O,N=g.find(e=>e.value===C.state.value)?.label,P=()=>{C.handleChange(null),C.handleBlur()};return(0,s.jsxs)(r.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,s.jsxs)(r.Field,{orientation:m,"data-invalid":A,children:[(0,s.jsxs)(r.FieldContent,{children:[(0,s.jsxs)(r.FieldLabel,{htmlFor:C.name,"aria-required":j,children:[d,h&&(0,s.jsx)(r.FieldTooltip,{tooltip:h})]}),(0,s.jsx)(r.FieldDescription,{children:f})]}),(0,s.jsxs)(r.FieldContentMain,{className:`flex flex-col`,children:[w?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(`button`,{id:C.name,type:`button`,disabled:O,"aria-invalid":A?`true`:void 0,"aria-describedby":S,onBlur:C.handleBlur,onClick:()=>E(!0),className:(0,o.cn)(`flex w-full items-center justify-between`,`outline-1 outline-border -outline-offset-1`,`gap-2 rounded bg-transparent px-3 py-2`,`shadow-input transition-all cursor-pointer whitespace-nowrap text-sm`,`focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`disabled:cursor-not-allowed disabled:opacity-50`,A&&`outline-danger bg-danger-bg-subtle ring-danger-weak`,!C.state.value&&`text-text-positive-muted`),children:[(0,s.jsx)(`span`,{className:`line-clamp-1`,children:N??p}),(0,s.jsx)(i.ChevronDownIcon,{size:16,className:`shrink-0 opacity-50`})]}),(0,s.jsx)(e.Dialog,{open:T,onOpenChange:e=>{E(e),e||C.handleBlur()},children:(0,s.jsxs)(e.DialogPortal,{children:[(0,s.jsx)(e.DialogOverlay,{}),(0,s.jsxs)(c.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,o.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,s.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,s.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:d??p??`Chọn một tùy chọn`}),(0,s.jsx)(e.DialogClose,{asChild:!0,children:(0,s.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,s.jsx)(i.XIcon,{size:16})})})]}),(0,s.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[M&&(0,s.jsx)(e.DialogClose,{asChild:!0,children:(0,s.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:P,children:[(0,s.jsx)(i.XIcon,{size:14}),`Xóa lựa chọn`]})}),g.length>0?g.map(t=>(0,s.jsx)(e.DialogClose,{asChild:!0,children:(0,s.jsx)(`button`,{type:`button`,className:(0,o.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,C.state.value===t.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{C.handleChange(t.value),C.handleBlur()},children:t.label})},t.value)):(0,s.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,s.jsx)(i.PackagePlusIcon,{strokeWidth:1}),`Không có tùy chọn`]})]}),(0,s.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsxs)(n.Select,{value:C.state.value??``,disabled:O,onValueChange:C.handleChange,children:[(0,s.jsx)(n.SelectTrigger,{"aria-invalid":A?`true`:void 0,"aria-describedby":S,onBlur:C.handleBlur,children:(0,s.jsx)(n.SelectValue,{placeholder:p})}),(0,s.jsx)(n.SelectContent,{children:g.length>0?g.map(e=>(0,s.jsx)(n.SelectItem,{value:e.value,children:e.label},e.value)):(0,s.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,s.jsx)(i.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),M&&(0,s.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:P,children:(0,s.jsx)(i.XIcon,{"aria-hidden":`true`})})]}),k&&x&&(0,s.jsx)(r.FieldError,{id:S,className:`mt-1`,errors:C.state.meta.errors}),(0,s.jsx)(r.FieldNote,{isShow:!!_,children:_})]})]}),(0,s.jsx)(r.FieldSeparator,{})]})});d.displayName=`SelectField`,exports.SelectField=d;
+//# sourceMappingURL=select-field-CvDBZQTl.cjs.map

package/dist/{select-field-CURv37h4.cjs.map → select-field-CvDBZQTl.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"select-field-CURv37h4.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","ChevronDownIcon","Dialog","DialogPortal","DialogOverlay","RadixDialog","DialogClose","XIcon","PackagePlusIcon","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/select-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { ChevronDownIcon, PackagePlusIcon, XIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { SelectFieldProps as Props } from '../../types';\n\nexport const SelectField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n    orientation = 'responsive',\n    tooltip,\n    options,\n    helperText,\n    clearable = false,\n    required = false,\n    disabled = false,\n    showErrorMessage = true,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n\n    const selectedLabel = options.find(o => o.value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex flex-col\">\n            {isMobile ? (\n              <>\n                <button\n                  id={field.name}\n                  type=\"button\"\n                  disabled={isDisabled}\n                  aria-invalid={_invalid ? 'true' : undefined}\n                  aria-describedby={errorId}\n                  onBlur={field.handleBlur}\n                  onClick={() => setDialogOpen(true)}\n                  className={cn(\n                    'flex w-full items-center justify-between',\n                    'outline-1 outline-border -outline-offset-1',\n                    'gap-2 rounded bg-transparent px-3 py-2',\n                    'shadow-input transition-all cursor-pointer whitespace-nowrap text-sm',\n                    'focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n                    'disabled:cursor-not-allowed disabled:opacity-50',\n                    _invalid && 'outline-danger bg-danger-bg-subtle ring-danger-weak',\n                    !field.state.value && 'text-text-positive-muted'\n                  )}\n                >\n                  <span className=\"line-clamp-1\">{selectedLabel ?? placeholder}</span>\n                  <ChevronDownIcon size={16} className=\"shrink-0 opacity-50\" />\n                </button>\n\n                <Dialog\n                  open={dialogOpen}\n                  onOpenChange={open => {\n                    setDialogOpen(open);\n                    if (!open) field.handleBlur();\n                  }}\n                >\n                  <DialogPortal>\n                    <DialogOverlay />\n                    <RadixDialog.Content\n                      onOpenAutoFocus={e => e.preventDefault()}\n                      className={cn(\n                        'fixed inset-x-0 bottom-0 z-50',\n                        'flex flex-col bg-background rounded-t-2xl outline-none',\n                        'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                        'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                        'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                        'duration-300'\n                      )}\n                    >\n                      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                        <span className=\"font-semibold text-sm text-text-positive\">{label ?? placeholder ?? 'Chọn một tùy chọn'}</span>\n                        <DialogClose asChild>\n                          <button\n                            type=\"button\"\n                            aria-label=\"Đóng\"\n                            className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                          >\n                            <XIcon size={16} />\n                          </button>\n                        </DialogClose>\n                      </div>\n\n                      <div className=\"flex flex-col overflow-y-auto\">\n                        {_showClear && (\n                          <DialogClose asChild>\n                            <button\n                              type=\"button\"\n                              className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                              onClick={onClear}\n                            >\n                              <XIcon size={14} />\n                              Xóa lựa chọn\n                            </button>\n                          </DialogClose>\n                        )}\n                        {options.length > 0 ? (\n                          options.map(option => (\n                            <DialogClose 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                                  field.state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                                )}\n                                onClick={() => {\n                                  field.handleChange(option.value);\n                                  field.handleBlur();\n                                }}\n                              >\n                                {option.label}\n                              </button>\n                            </DialogClose>\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                            Không có tùy chọn\n                          </div>\n                        )}\n                      </div>\n\n                      <div className=\"shrink-0 h-safe-bottom\" />\n                    </RadixDialog.Content>\n                  </DialogPortal>\n                </Dialog>\n              </>\n            ) : (\n              <div className=\"relative\">\n                <Select value={field.state.value ?? ''} disabled={isDisabled} onValueChange={field.handleChange}>\n                  <SelectTrigger aria-invalid={_invalid ? 'true' : undefined} aria-describedby={errorId} onBlur={field.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\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                    onClick={onClear}\n                  >\n                    <XIcon aria-hidden=\"true\" />\n                  </button>\n                )}\n              </div>\n            )}\n\n            {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nSelectField.displayName = 'SelectField';\n"],"mappings":"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"}
+{"version":3,"file":"select-field-CvDBZQTl.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","ChevronDownIcon","Dialog","DialogPortal","DialogOverlay","RadixDialog","DialogClose","XIcon","PackagePlusIcon","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/select-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { ChevronDownIcon, PackagePlusIcon, XIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { SelectFieldProps as Props } from '../../types';\n\nexport const SelectField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n    orientation = 'responsive',\n    tooltip,\n    options,\n    helperText,\n    clearable = false,\n    required = false,\n    disabled = false,\n    showErrorMessage = true,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n\n    const selectedLabel = options.find(o => o.value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex flex-col\">\n            {isMobile ? (\n              <>\n                <button\n                  id={field.name}\n                  type=\"button\"\n                  disabled={isDisabled}\n                  aria-invalid={_invalid ? 'true' : undefined}\n                  aria-describedby={errorId}\n                  onBlur={field.handleBlur}\n                  onClick={() => setDialogOpen(true)}\n                  className={cn(\n                    'flex w-full items-center justify-between',\n                    'outline-1 outline-border -outline-offset-1',\n                    'gap-2 rounded bg-transparent px-3 py-2',\n                    'shadow-input transition-all cursor-pointer whitespace-nowrap text-sm',\n                    'focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n                    'disabled:cursor-not-allowed disabled:opacity-50',\n                    _invalid && 'outline-danger bg-danger-bg-subtle ring-danger-weak',\n                    !field.state.value && 'text-text-positive-muted'\n                  )}\n                >\n                  <span className=\"line-clamp-1\">{selectedLabel ?? placeholder}</span>\n                  <ChevronDownIcon size={16} className=\"shrink-0 opacity-50\" />\n                </button>\n\n                <Dialog\n                  open={dialogOpen}\n                  onOpenChange={open => {\n                    setDialogOpen(open);\n                    if (!open) field.handleBlur();\n                  }}\n                >\n                  <DialogPortal>\n                    <DialogOverlay />\n                    <RadixDialog.Content\n                      onOpenAutoFocus={e => e.preventDefault()}\n                      className={cn(\n                        'fixed inset-x-0 bottom-0 z-50',\n                        'flex flex-col bg-background rounded-t-2xl outline-none',\n                        'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                        'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                        'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                        'duration-300'\n                      )}\n                    >\n                      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                        <span className=\"font-semibold text-sm text-text-positive\">{label ?? placeholder ?? 'Chọn một tùy chọn'}</span>\n                        <DialogClose asChild>\n                          <button\n                            type=\"button\"\n                            aria-label=\"Đóng\"\n                            className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                          >\n                            <XIcon size={16} />\n                          </button>\n                        </DialogClose>\n                      </div>\n\n                      <div className=\"flex flex-col overflow-y-auto\">\n                        {_showClear && (\n                          <DialogClose asChild>\n                            <button\n                              type=\"button\"\n                              className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                              onClick={onClear}\n                            >\n                              <XIcon size={14} />\n                              Xóa lựa chọn\n                            </button>\n                          </DialogClose>\n                        )}\n                        {options.length > 0 ? (\n                          options.map(option => (\n                            <DialogClose 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                                  field.state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                                )}\n                                onClick={() => {\n                                  field.handleChange(option.value);\n                                  field.handleBlur();\n                                }}\n                              >\n                                {option.label}\n                              </button>\n                            </DialogClose>\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                            Không có tùy chọn\n                          </div>\n                        )}\n                      </div>\n\n                      <div className=\"shrink-0 h-safe-bottom\" />\n                    </RadixDialog.Content>\n                  </DialogPortal>\n                </Dialog>\n              </>\n            ) : (\n              <div className=\"relative\">\n                <Select value={field.state.value ?? ''} disabled={isDisabled} onValueChange={field.handleChange}>\n                  <SelectTrigger aria-invalid={_invalid ? 'true' : undefined} aria-describedby={errorId} onBlur={field.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\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                    onClick={onClear}\n                  >\n                    <XIcon aria-hidden=\"true\" />\n                  </button>\n                )}\n              </div>\n            )}\n\n            {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nSelectField.displayName = 'SelectField';\n"],"mappings":"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"}

package/dist/{select-field-BcsFBbNJ.mjs → select-field-NJgDDCO2.mjs}

@@ -1,2 +1,2 @@
-import{Dialog as e,DialogClose as t,DialogOverlay as n,DialogPortal as r}from"./ui/dialog.mjs";import{G as i}from"./tanstack-form-q9hDCc0Y.mjs";import{Select as a,SelectContent as o,SelectItem as ee,SelectTrigger as s,SelectValue as c}from"./ui/select.mjs";import{Field as l,FieldContent as u,FieldContentMain as d,FieldDescription as f,FieldError as te,FieldGroup as p,FieldLabel as m,FieldNote as h,FieldSeparator as g,FieldTooltip as _}from"./field-V2DoD8qL.mjs";import{ChevronDownIcon as v,PackagePlusIcon as y,XIcon as b}from"lucide-react";import{memo as x,useId as S,useState as C}from"react";import{cn as w}from"@customafk/react-toolkit/utils";import{Fragment as T,jsx as E,jsxs as D}from"react/jsx-runtime";import{Dialog as O}from"radix-ui";import{useStore as k}from"@tanstack/react-form";import{useIsMobile as A}from"@customafk/react-toolkit/hooks/useMobile";const j=x(({label:x,description:j,placeholder:M,orientation:N=`responsive`,tooltip:P,options:F,helperText:I,clearable:L=!1,required:R=!1,disabled:z=!1,showErrorMessage:B=!0})=>{let V=S(),H=i(),U=A(),[W,G]=C(!1),K=k(H.form.store,({isSubmitting:e})=>e),q=z||K,J=H.state.meta.isDirty||H.state.meta.isTouched,Y=J&&!H.state.meta.isValid,X=R&&H.state.value===null,Z=L&&!!H.state.value&&!q,Q=F.find(e=>e.value===H.state.value)?.label,$=()=>{H.handleChange(null),H.handleBlur()};return D(p,{className:`gap-y-4 px-4`,children:[D(l,{orientation:N,"data-invalid":Y,children:[D(u,{children:[D(m,{htmlFor:H.name,"aria-required":X,children:[x,P&&E(_,{tooltip:P})]}),E(f,{children:j})]}),D(d,{className:`flex flex-col`,children:[U?D(T,{children:[D(`button`,{id:H.name,type:`button`,disabled:q,"aria-invalid":Y?`true`:void 0,"aria-describedby":V,onBlur:H.handleBlur,onClick:()=>G(!0),className:w(`flex w-full items-center justify-between`,`outline-1 outline-border -outline-offset-1`,`gap-2 rounded bg-transparent px-3 py-2`,`shadow-input transition-all cursor-pointer whitespace-nowrap text-sm`,`focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`disabled:cursor-not-allowed disabled:opacity-50`,Y&&`outline-danger bg-danger-bg-subtle ring-danger-weak`,!H.state.value&&`text-text-positive-muted`),children:[E(`span`,{className:`line-clamp-1`,children:Q??M}),E(v,{size:16,className:`shrink-0 opacity-50`})]}),E(e,{open:W,onOpenChange:e=>{G(e),e||H.handleBlur()},children:D(r,{children:[E(n,{}),D(O.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:w(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[D(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[E(`span`,{className:`font-semibold text-sm text-text-positive`,children:x??M??`Chọn một tùy chọn`}),E(t,{asChild:!0,children:E(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:E(b,{size:16})})})]}),D(`div`,{className:`flex flex-col overflow-y-auto`,children:[Z&&E(t,{asChild:!0,children:D(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:$,children:[E(b,{size:14}),`Xóa lựa chọn`]})}),F.length>0?F.map(e=>E(t,{asChild:!0,children:E(`button`,{type:`button`,className:w(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,H.state.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{H.handleChange(e.value),H.handleBlur()},children:e.label})},e.value)):D(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[E(y,{strokeWidth:1}),`Không có tùy chọn`]})]}),E(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):D(`div`,{className:`relative`,children:[D(a,{value:H.state.value??``,disabled:q,onValueChange:H.handleChange,children:[E(s,{"aria-invalid":Y?`true`:void 0,"aria-describedby":V,onBlur:H.handleBlur,children:E(c,{placeholder:M})}),E(o,{children:F.length>0?F.map(e=>E(ee,{value:e.value,children:e.label},e.value)):D(`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:[E(y,{strokeWidth:1}),`No options available`]})})]}),Z&&E(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:$,children:E(b,{"aria-hidden":`true`})})]}),J&&B&&E(te,{id:V,className:`mt-1`,errors:H.state.meta.errors}),E(h,{isShow:!!I,children:I})]})]}),E(g,{})]})});j.displayName=`SelectField`;export{j as SelectField};
-//# sourceMappingURL=select-field-BcsFBbNJ.mjs.map
+import{Dialog as e,DialogClose as t,DialogOverlay as n,DialogPortal as r}from"./ui/dialog.mjs";import{G as i}from"./tanstack-form-fkaBh9RO.mjs";import{Select as a,SelectContent as o,SelectItem as ee,SelectTrigger as s,SelectValue as c}from"./ui/select.mjs";import{Field as l,FieldContent as u,FieldContentMain as d,FieldDescription as f,FieldError as te,FieldGroup as p,FieldLabel as m,FieldNote as h,FieldSeparator as g,FieldTooltip as _}from"./field-V2DoD8qL.mjs";import{ChevronDownIcon as v,PackagePlusIcon as y,XIcon as b}from"lucide-react";import{memo as x,useId as S,useState as C}from"react";import{cn as w}from"@customafk/react-toolkit/utils";import{Fragment as T,jsx as E,jsxs as D}from"react/jsx-runtime";import{Dialog as O}from"radix-ui";import{useStore as k}from"@tanstack/react-form";import{useIsMobile as A}from"@customafk/react-toolkit/hooks/useMobile";const j=x(({label:x,description:j,placeholder:M,orientation:N=`responsive`,tooltip:P,options:F,helperText:I,clearable:L=!1,required:R=!1,disabled:z=!1,showErrorMessage:B=!0})=>{let V=S(),H=i(),U=A(),[W,G]=C(!1),K=k(H.form.store,({isSubmitting:e})=>e),q=z||K,J=H.state.meta.isDirty||H.state.meta.isTouched,Y=J&&!H.state.meta.isValid,X=R&&H.state.value===null,Z=L&&!!H.state.value&&!q,Q=F.find(e=>e.value===H.state.value)?.label,$=()=>{H.handleChange(null),H.handleBlur()};return D(p,{className:`gap-y-4 px-4`,children:[D(l,{orientation:N,"data-invalid":Y,children:[D(u,{children:[D(m,{htmlFor:H.name,"aria-required":X,children:[x,P&&E(_,{tooltip:P})]}),E(f,{children:j})]}),D(d,{className:`flex flex-col`,children:[U?D(T,{children:[D(`button`,{id:H.name,type:`button`,disabled:q,"aria-invalid":Y?`true`:void 0,"aria-describedby":V,onBlur:H.handleBlur,onClick:()=>G(!0),className:w(`flex w-full items-center justify-between`,`outline-1 outline-border -outline-offset-1`,`gap-2 rounded bg-transparent px-3 py-2`,`shadow-input transition-all cursor-pointer whitespace-nowrap text-sm`,`focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`disabled:cursor-not-allowed disabled:opacity-50`,Y&&`outline-danger bg-danger-bg-subtle ring-danger-weak`,!H.state.value&&`text-text-positive-muted`),children:[E(`span`,{className:`line-clamp-1`,children:Q??M}),E(v,{size:16,className:`shrink-0 opacity-50`})]}),E(e,{open:W,onOpenChange:e=>{G(e),e||H.handleBlur()},children:D(r,{children:[E(n,{}),D(O.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:w(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[D(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[E(`span`,{className:`font-semibold text-sm text-text-positive`,children:x??M??`Chọn một tùy chọn`}),E(t,{asChild:!0,children:E(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:E(b,{size:16})})})]}),D(`div`,{className:`flex flex-col overflow-y-auto`,children:[Z&&E(t,{asChild:!0,children:D(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:$,children:[E(b,{size:14}),`Xóa lựa chọn`]})}),F.length>0?F.map(e=>E(t,{asChild:!0,children:E(`button`,{type:`button`,className:w(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,H.state.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{H.handleChange(e.value),H.handleBlur()},children:e.label})},e.value)):D(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[E(y,{strokeWidth:1}),`Không có tùy chọn`]})]}),E(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):D(`div`,{className:`relative`,children:[D(a,{value:H.state.value??``,disabled:q,onValueChange:H.handleChange,children:[E(s,{"aria-invalid":Y?`true`:void 0,"aria-describedby":V,onBlur:H.handleBlur,children:E(c,{placeholder:M})}),E(o,{children:F.length>0?F.map(e=>E(ee,{value:e.value,children:e.label},e.value)):D(`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:[E(y,{strokeWidth:1}),`No options available`]})})]}),Z&&E(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:$,children:E(b,{"aria-hidden":`true`})})]}),J&&B&&E(te,{id:V,className:`mt-1`,errors:H.state.meta.errors}),E(h,{isShow:!!I,children:I})]})]}),E(g,{})]})});j.displayName=`SelectField`;export{j as SelectField};
+//# sourceMappingURL=select-field-NJgDDCO2.mjs.map

package/dist/{select-field-BcsFBbNJ.mjs.map → select-field-NJgDDCO2.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"select-field-BcsFBbNJ.mjs","names":["Dialog","RadixDialog","Select"],"sources":["../packages/components/features/tanstack-form/components/fields/select-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { ChevronDownIcon, PackagePlusIcon, XIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { SelectFieldProps as Props } from '../../types';\n\nexport const SelectField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n    orientation = 'responsive',\n    tooltip,\n    options,\n    helperText,\n    clearable = false,\n    required = false,\n    disabled = false,\n    showErrorMessage = true,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n\n    const selectedLabel = options.find(o => o.value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex flex-col\">\n            {isMobile ? (\n              <>\n                <button\n                  id={field.name}\n                  type=\"button\"\n                  disabled={isDisabled}\n                  aria-invalid={_invalid ? 'true' : undefined}\n                  aria-describedby={errorId}\n                  onBlur={field.handleBlur}\n                  onClick={() => setDialogOpen(true)}\n                  className={cn(\n                    'flex w-full items-center justify-between',\n                    'outline-1 outline-border -outline-offset-1',\n                    'gap-2 rounded bg-transparent px-3 py-2',\n                    'shadow-input transition-all cursor-pointer whitespace-nowrap text-sm',\n                    'focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n                    'disabled:cursor-not-allowed disabled:opacity-50',\n                    _invalid && 'outline-danger bg-danger-bg-subtle ring-danger-weak',\n                    !field.state.value && 'text-text-positive-muted'\n                  )}\n                >\n                  <span className=\"line-clamp-1\">{selectedLabel ?? placeholder}</span>\n                  <ChevronDownIcon size={16} className=\"shrink-0 opacity-50\" />\n                </button>\n\n                <Dialog\n                  open={dialogOpen}\n                  onOpenChange={open => {\n                    setDialogOpen(open);\n                    if (!open) field.handleBlur();\n                  }}\n                >\n                  <DialogPortal>\n                    <DialogOverlay />\n                    <RadixDialog.Content\n                      onOpenAutoFocus={e => e.preventDefault()}\n                      className={cn(\n                        'fixed inset-x-0 bottom-0 z-50',\n                        'flex flex-col bg-background rounded-t-2xl outline-none',\n                        'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                        'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                        'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                        'duration-300'\n                      )}\n                    >\n                      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                        <span className=\"font-semibold text-sm text-text-positive\">{label ?? placeholder ?? 'Chọn một tùy chọn'}</span>\n                        <DialogClose asChild>\n                          <button\n                            type=\"button\"\n                            aria-label=\"Đóng\"\n                            className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                          >\n                            <XIcon size={16} />\n                          </button>\n                        </DialogClose>\n                      </div>\n\n                      <div className=\"flex flex-col overflow-y-auto\">\n                        {_showClear && (\n                          <DialogClose asChild>\n                            <button\n                              type=\"button\"\n                              className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                              onClick={onClear}\n                            >\n                              <XIcon size={14} />\n                              Xóa lựa chọn\n                            </button>\n                          </DialogClose>\n                        )}\n                        {options.length > 0 ? (\n                          options.map(option => (\n                            <DialogClose 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                                  field.state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                                )}\n                                onClick={() => {\n                                  field.handleChange(option.value);\n                                  field.handleBlur();\n                                }}\n                              >\n                                {option.label}\n                              </button>\n                            </DialogClose>\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                            Không có tùy chọn\n                          </div>\n                        )}\n                      </div>\n\n                      <div className=\"shrink-0 h-safe-bottom\" />\n                    </RadixDialog.Content>\n                  </DialogPortal>\n                </Dialog>\n              </>\n            ) : (\n              <div className=\"relative\">\n                <Select value={field.state.value ?? ''} disabled={isDisabled} onValueChange={field.handleChange}>\n                  <SelectTrigger aria-invalid={_invalid ? 'true' : undefined} aria-describedby={errorId} onBlur={field.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\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                    onClick={onClear}\n                  >\n                    <XIcon aria-hidden=\"true\" />\n                  </button>\n                )}\n              </div>\n            )}\n\n            {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nSelectField.displayName = 'SelectField';\n"],"mappings":"o2BAgCA,MAAa,EAAc,GACxB,CACC,QACA,cACA,cACA,cAAc,aACd,UACA,UACA,aACA,YAAY,GACZ,WAAW,GACX,WAAW,GACX,mBAAmB,MACf,CACJ,IAAM,EAAU,EAAM,EAChB,EAAQ,EAAuC,EAC/C,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,GAAa,CAAC,CAAC,EAAM,MAAM,OAAS,CAAC,EAElD,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,MAAM,KAAK,CAAC,EAAE,MAElE,MAAgB,CACpB,EAAM,aAAa,IAAI,EACvB,EAAM,WAAW,CACnB,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAM,KAAM,gBAAe,EAAhD,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,EAAA,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EAEd,EAAC,EAAD,CAAkB,UAAU,gBAA5B,SAAA,CACG,EACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,SAAD,CACE,GAAI,EAAM,KACV,KAAK,SACL,SAAU,EACV,eAAc,EAAW,OAAS,IAAA,GAClC,mBAAkB,EAClB,OAAQ,EAAM,WACd,YAAe,EAAc,EAAI,EACjC,UAAW,EACT,2CACA,6CACA,yCACA,uEACA,4FACA,kDACA,GAAY,sDACZ,CAAC,EAAM,MAAM,OAAS,0BACxB,EAjBF,SAAA,CAmBE,EAAC,OAAD,CAAM,UAAU,eAAgB,SAAA,GAAiB,CAAkB,CAAA,EACnE,EAAC,EAAD,CAAiB,KAAM,GAAI,UAAU,qBAAuB,CAAA,CACtD,CAER,CAAA,EAAA,EAACA,EAAD,CACE,KAAM,EACN,aAAc,GAAQ,CACpB,EAAc,CAAI,EACb,GAAM,EAAM,WAAW,CAC9B,EAEA,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,CAAA,EAChB,EAACC,EAAY,QAAb,CACE,gBAAiB,GAAK,EAAE,eAAe,EACvC,UAAW,EACT,gCACA,yDACA,sDACA,kGACA,yGACA,cACF,EATF,SAAA,CAWE,EAAC,MAAD,CAAK,UAAU,8EAAf,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,2CAA4C,SAAA,GAAS,GAAe,mBAA0B,CAAA,EAC9G,EAAC,EAAD,CAAa,QAAA,GACX,SAAA,EAAC,SAAD,CACE,KAAK,SACL,aAAW,OACX,UAAU,6IAEV,SAAA,EAAC,EAAD,CAAO,KAAM,EAAK,CAAA,CACZ,CAAA,CACG,CAAA,CACV,IAEL,EAAC,MAAD,CAAK,UAAU,gCAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAa,QAAA,GACX,SAAA,EAAC,SAAD,CACE,KAAK,SACL,UAAU,8HACV,QAAS,EAHX,SAAA,CAKE,EAAC,EAAD,CAAO,KAAM,EAAK,CAAA,EAAC,cAEb,GACG,CAAA,EAEd,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAAgC,QAAA,GAC9B,SAAA,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EACT,yEACA,6CACA,EAAM,MAAM,QAAU,EAAO,OAAS,+CACxC,EACA,YAAe,CACb,EAAM,aAAa,EAAO,KAAK,EAC/B,EAAM,WAAW,CACnB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,EAED,EAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,mBAEhC,CAEJ,CAAA,CAAA,IAEL,EAAC,MAAD,CAAK,UAAU,wBAA0B,CAAA,CACtB,CACT,CAAA,CAAA,CAAA,CAAA,CACR,CAAA,CACR,CAAA,CAAA,EAEF,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,CACE,EAACC,EAAD,CAAQ,MAAO,EAAM,MAAM,OAAS,GAAI,SAAU,EAAY,cAAe,EAAM,aAAnF,SAAA,CACE,EAAC,EAAD,CAAe,eAAc,EAAW,OAAS,IAAA,GAAW,mBAAkB,EAAS,OAAQ,EAAM,WACnG,SAAA,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,GAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,EAED,EAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,CAEP,CAAA,EAAA,GACC,EAAC,SAAD,CACE,KAAK,SACL,aAAW,eACX,UAAU,yTACV,QAAS,EAET,SAAA,EAAC,EAAD,CAAO,cAAY,MAAQ,CAAA,CACrB,CAAA,CAEP,IAGN,GAAY,GAAoB,EAAC,GAAD,CAAY,GAAI,EAAS,UAAU,OAAO,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,EAE7G,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CACb,CAAA,CAAA,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}
+{"version":3,"file":"select-field-NJgDDCO2.mjs","names":["Dialog","RadixDialog","Select"],"sources":["../packages/components/features/tanstack-form/components/fields/select-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { ChevronDownIcon, PackagePlusIcon, XIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { SelectFieldProps as Props } from '../../types';\n\nexport const SelectField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n    orientation = 'responsive',\n    tooltip,\n    options,\n    helperText,\n    clearable = false,\n    required = false,\n    disabled = false,\n    showErrorMessage = true,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n\n    const selectedLabel = options.find(o => o.value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex flex-col\">\n            {isMobile ? (\n              <>\n                <button\n                  id={field.name}\n                  type=\"button\"\n                  disabled={isDisabled}\n                  aria-invalid={_invalid ? 'true' : undefined}\n                  aria-describedby={errorId}\n                  onBlur={field.handleBlur}\n                  onClick={() => setDialogOpen(true)}\n                  className={cn(\n                    'flex w-full items-center justify-between',\n                    'outline-1 outline-border -outline-offset-1',\n                    'gap-2 rounded bg-transparent px-3 py-2',\n                    'shadow-input transition-all cursor-pointer whitespace-nowrap text-sm',\n                    'focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n                    'disabled:cursor-not-allowed disabled:opacity-50',\n                    _invalid && 'outline-danger bg-danger-bg-subtle ring-danger-weak',\n                    !field.state.value && 'text-text-positive-muted'\n                  )}\n                >\n                  <span className=\"line-clamp-1\">{selectedLabel ?? placeholder}</span>\n                  <ChevronDownIcon size={16} className=\"shrink-0 opacity-50\" />\n                </button>\n\n                <Dialog\n                  open={dialogOpen}\n                  onOpenChange={open => {\n                    setDialogOpen(open);\n                    if (!open) field.handleBlur();\n                  }}\n                >\n                  <DialogPortal>\n                    <DialogOverlay />\n                    <RadixDialog.Content\n                      onOpenAutoFocus={e => e.preventDefault()}\n                      className={cn(\n                        'fixed inset-x-0 bottom-0 z-50',\n                        'flex flex-col bg-background rounded-t-2xl outline-none',\n                        'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                        'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                        'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                        'duration-300'\n                      )}\n                    >\n                      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                        <span className=\"font-semibold text-sm text-text-positive\">{label ?? placeholder ?? 'Chọn một tùy chọn'}</span>\n                        <DialogClose asChild>\n                          <button\n                            type=\"button\"\n                            aria-label=\"Đóng\"\n                            className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                          >\n                            <XIcon size={16} />\n                          </button>\n                        </DialogClose>\n                      </div>\n\n                      <div className=\"flex flex-col overflow-y-auto\">\n                        {_showClear && (\n                          <DialogClose asChild>\n                            <button\n                              type=\"button\"\n                              className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                              onClick={onClear}\n                            >\n                              <XIcon size={14} />\n                              Xóa lựa chọn\n                            </button>\n                          </DialogClose>\n                        )}\n                        {options.length > 0 ? (\n                          options.map(option => (\n                            <DialogClose 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                                  field.state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                                )}\n                                onClick={() => {\n                                  field.handleChange(option.value);\n                                  field.handleBlur();\n                                }}\n                              >\n                                {option.label}\n                              </button>\n                            </DialogClose>\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                            Không có tùy chọn\n                          </div>\n                        )}\n                      </div>\n\n                      <div className=\"shrink-0 h-safe-bottom\" />\n                    </RadixDialog.Content>\n                  </DialogPortal>\n                </Dialog>\n              </>\n            ) : (\n              <div className=\"relative\">\n                <Select value={field.state.value ?? ''} disabled={isDisabled} onValueChange={field.handleChange}>\n                  <SelectTrigger aria-invalid={_invalid ? 'true' : undefined} aria-describedby={errorId} onBlur={field.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\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                    onClick={onClear}\n                  >\n                    <XIcon aria-hidden=\"true\" />\n                  </button>\n                )}\n              </div>\n            )}\n\n            {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nSelectField.displayName = 'SelectField';\n"],"mappings":"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"}

package/dist/side-panel-DPrM5ygG.d.cts

@@ -0,0 +1,86 @@
+//#region packages/components/dialogs/side-panel.d.ts
+/**
+ * Props for the {@link SidePanel} component.
+ */
+type SidePanelProps = {
+  /**
+   * Controls whether the panel is currently open.
+   * This is a **controlled** prop — pair it with `onOpenChange` to manage state.
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the open state changes (e.g. backdrop click, close button, `Escape`).
+   *
+   * @param open - `true` when opening, `false` when closing.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /** Heading rendered at the top of the panel. */
+  title?: React.ReactNode;
+  /** Supporting text rendered below the title. */
+  description?: React.ReactNode;
+  /** Content rendered pinned to the bottom of the panel, typically action buttons. */
+  footer?: React.ReactNode;
+  /**
+   * When `true` (default), renders a `CloseButton` in the top-right corner of the panel.
+   *
+   * @default true
+   */
+  showCloseButton?: boolean;
+  /** Main scrollable body content of the panel. */
+  children?: React.ReactNode;
+  /**
+   * Tailwind width classes applied to the panel from the `sm` breakpoint up (below `sm` the
+   * panel always fills the available inset area). Override to make the panel narrower, wider,
+   * or a fixed size, e.g. `'sm:w-96'` or `'sm:w-full sm:max-w-3xl'`.
+   *
+   * @default 'sm:w-1/2 sm:max-w-2xl'
+   */
+  width?: string;
+  /**
+   * When `false`, the panel becomes non-modal: no dimmed overlay is rendered, background content
+   * stays fully visible and interactive, and the panel can only be closed via its close button
+   * (`Escape` and outside clicks are disabled). `showCloseButton` is forced to `true` in this mode
+   * regardless of what's passed, since it becomes the only way to close the panel.
+   *
+   * @default true
+   */
+  modal?: boolean;
+  /** Additional class names applied to the panel itself. */
+  className?: string;
+};
+/**
+ * A controlled dialog panel anchored to the right half of the screen, inset from the viewport
+ * edges on both axes. Always lays out as a fixed header, a scrollable body, and a fixed footer.
+ *
+ * **Import:** `import { SidePanel } from '@customafk/lunas-ui/dialogs/side-panel'`
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ * import { SidePanel } from '@customafk/lunas-ui/dialogs/side-panel';
+ *
+ * export function OrderDetailPanel({ order }: { order: Order }) {
+ *   const [open, setOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={() => setOpen(true)}>Xem chi tiết</Button>
+ *       <SidePanel
+ *         open={open}
+ *         onOpenChange={setOpen}
+ *         title="Chi tiết đơn hàng"
+ *         description="Xem và cập nhật thông tin đơn hàng."
+ *         footer={<Button onClick={() => setOpen(false)}>Lưu thay đổi</Button>}
+ *       >
+ *         <p>Nội dung có thể cuộn ở đây.</p>
+ *       </SidePanel>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare const SidePanel: React.FC<SidePanelProps>;
+//#endregion
+export { SidePanelProps as n, SidePanel as t };
+//# sourceMappingURL=side-panel-DPrM5ygG.d.cts.map

package/dist/side-panel-DPrM5ygG.d.mts

@@ -0,0 +1,86 @@
+//#region packages/components/dialogs/side-panel.d.ts
+/**
+ * Props for the {@link SidePanel} component.
+ */
+type SidePanelProps = {
+  /**
+   * Controls whether the panel is currently open.
+   * This is a **controlled** prop — pair it with `onOpenChange` to manage state.
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the open state changes (e.g. backdrop click, close button, `Escape`).
+   *
+   * @param open - `true` when opening, `false` when closing.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /** Heading rendered at the top of the panel. */
+  title?: React.ReactNode;
+  /** Supporting text rendered below the title. */
+  description?: React.ReactNode;
+  /** Content rendered pinned to the bottom of the panel, typically action buttons. */
+  footer?: React.ReactNode;
+  /**
+   * When `true` (default), renders a `CloseButton` in the top-right corner of the panel.
+   *
+   * @default true
+   */
+  showCloseButton?: boolean;
+  /** Main scrollable body content of the panel. */
+  children?: React.ReactNode;
+  /**
+   * Tailwind width classes applied to the panel from the `sm` breakpoint up (below `sm` the
+   * panel always fills the available inset area). Override to make the panel narrower, wider,
+   * or a fixed size, e.g. `'sm:w-96'` or `'sm:w-full sm:max-w-3xl'`.
+   *
+   * @default 'sm:w-1/2 sm:max-w-2xl'
+   */
+  width?: string;
+  /**
+   * When `false`, the panel becomes non-modal: no dimmed overlay is rendered, background content
+   * stays fully visible and interactive, and the panel can only be closed via its close button
+   * (`Escape` and outside clicks are disabled). `showCloseButton` is forced to `true` in this mode
+   * regardless of what's passed, since it becomes the only way to close the panel.
+   *
+   * @default true
+   */
+  modal?: boolean;
+  /** Additional class names applied to the panel itself. */
+  className?: string;
+};
+/**
+ * A controlled dialog panel anchored to the right half of the screen, inset from the viewport
+ * edges on both axes. Always lays out as a fixed header, a scrollable body, and a fixed footer.
+ *
+ * **Import:** `import { SidePanel } from '@customafk/lunas-ui/dialogs/side-panel'`
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ * import { SidePanel } from '@customafk/lunas-ui/dialogs/side-panel';
+ *
+ * export function OrderDetailPanel({ order }: { order: Order }) {
+ *   const [open, setOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={() => setOpen(true)}>Xem chi tiết</Button>
+ *       <SidePanel
+ *         open={open}
+ *         onOpenChange={setOpen}
+ *         title="Chi tiết đơn hàng"
+ *         description="Xem và cập nhật thông tin đơn hàng."
+ *         footer={<Button onClick={() => setOpen(false)}>Lưu thay đổi</Button>}
+ *       >
+ *         <p>Nội dung có thể cuộn ở đây.</p>
+ *       </SidePanel>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare const SidePanel: React.FC<SidePanelProps>;
+//#endregion
+export { SidePanelProps as n, SidePanel as t };
+//# sourceMappingURL=side-panel-DPrM5ygG.d.mts.map

package/dist/{simple-array-field-wFE_DUOV.mjs → simple-array-field-BwNCeUnn.mjs}

@@ -1,2 +1,2 @@
-import{Button as e}from"./ui/button.mjs";import{G as t}from"./tanstack-form-q9hDCc0Y.mjs";import{PlusIcon as n,Trash2Icon as r}from"lucide-react";import{useCallback as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c({width:e,className:t,children:n}){return o(`div`,{"data-slot":`array-col`,style:e?{width:typeof e==`number`?`${e}px`:e,flexShrink:0}:{flex:1,minWidth:0},className:t,children:n})}function l({className:e,children:t}){return s(`div`,{"data-slot":`array-header-row`,className:a(`mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak`,e),children:[t,o(`div`,{className:`min-w-8 w-8 shrink-0`})]})}function u({defaultRow:c,children:l,addLabel:u=`Thêm hàng`,className:d}){let f=t(),p=f.state.value??[],m=i(()=>{f.pushValue({...c})},[f,c]),h=i(e=>{f.removeValue(e)},[f]);return s(`div`,{"data-slot":`simple-array-field`,className:a(`flex flex-col gap-2`,d),children:[p.map((t,n)=>s(`div`,{className:`flex items-start gap-2`,children:[l(n),o(e,{type:`button`,size:`icon`,variant:`ghost`,color:`danger`,className:`min-w-8`,onClick:()=>h(n),children:o(r,{size:14})})]},n)),o(`div`,{children:s(e,{type:`button`,variant:`outline`,color:`muted`,size:`xs`,onClick:m,children:[o(n,{size:13}),u]})})]})}export{c as ArrayCol,l as ArrayHeaderRow,u as SimpleArrayField};
-//# sourceMappingURL=simple-array-field-wFE_DUOV.mjs.map
+import{Button as e}from"./ui/button.mjs";import{G as t}from"./tanstack-form-fkaBh9RO.mjs";import{PlusIcon as n,Trash2Icon as r}from"lucide-react";import{useCallback as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c({width:e,className:t,children:n}){return o(`div`,{"data-slot":`array-col`,style:e?{width:typeof e==`number`?`${e}px`:e,flexShrink:0}:{flex:1,minWidth:0},className:t,children:n})}function l({className:e,children:t}){return s(`div`,{"data-slot":`array-header-row`,className:a(`mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak`,e),children:[t,o(`div`,{className:`min-w-8 w-8 shrink-0`})]})}function u({defaultRow:c,children:l,addLabel:u=`Thêm hàng`,className:d}){let f=t(),p=f.state.value??[],m=i(()=>{f.pushValue({...c})},[f,c]),h=i(e=>{f.removeValue(e)},[f]);return s(`div`,{"data-slot":`simple-array-field`,className:a(`flex flex-col gap-2`,d),children:[p.map((t,n)=>s(`div`,{className:`flex items-start gap-2`,children:[l(n),o(e,{type:`button`,size:`icon`,variant:`ghost`,color:`danger`,className:`min-w-8`,onClick:()=>h(n),children:o(r,{size:14})})]},n)),o(`div`,{children:s(e,{type:`button`,variant:`outline`,color:`muted`,size:`xs`,onClick:m,children:[o(n,{size:13}),u]})})]})}export{c as ArrayCol,l as ArrayHeaderRow,u as SimpleArrayField};
+//# sourceMappingURL=simple-array-field-BwNCeUnn.mjs.map

package/dist/{simple-array-field-wFE_DUOV.mjs.map → simple-array-field-BwNCeUnn.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-array-field-wFE_DUOV.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-array-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { PlusIcon, Trash2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFieldContext } from '../form-context';\n\n// ─── ArrayCol ──────────────────────────────────────────────────────────────\n\ntype ArrayColProps = {\n  /**\n   * Fixed column width as a pixel number (e.g. `96`) or any CSS string\n   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the\n   * remaining row space (`flex: 1`).\n   */\n  width?: number | string;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Layout helper for columns inside a `SimpleArrayField` row. Controls width\n * without repeating `<div className=\"w-24\">` or `<div className=\"flex-1\">`.\n *\n * @example\n * <SimpleArrayField defaultRow={...}>\n *   {i => (\n *     <>\n *       <ArrayCol>                 // flex-1 — takes remaining space\n *         <AppField name={`items[${i}].name`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width={96}>     // 96 px fixed\n *         <AppField name={`items[${i}].qty`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width=\"8rem\">   // CSS string\n *         <AppField name={`items[${i}].tax`}>...</AppField>\n *       </ArrayCol>\n *     </>\n *   )}\n * </SimpleArrayField>\n */\nexport function ArrayCol({ width, className, children }: ArrayColProps) {\n  const style: React.CSSProperties = width ? { width: typeof width === 'number' ? `${width}px` : width, flexShrink: 0 } : { flex: 1, minWidth: 0 };\n\n  return (\n    <div data-slot=\"array-col\" style={style} className={className}>\n      {children}\n    </div>\n  );\n}\n\n// ─── ArrayHeaderRow ────────────────────────────────────────────────────────\n\ntype ArrayHeaderRowProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Styled header row for a `SimpleArrayField` table. Place it directly above\n * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align\n * headers with their columns. A spacer matching the delete-button width is\n * appended automatically.\n *\n * @example\n * <ArrayHeaderRow>\n *   <ArrayCol>Name</ArrayCol>\n *   <ArrayCol width={96}>Price</ArrayCol>\n *   <ArrayCol width={80}>Qty</ArrayCol>\n * </ArrayHeaderRow>\n * <SimpleArrayField defaultRow={...}>\n *   {i => (...)}\n * </SimpleArrayField>\n */\nexport function ArrayHeaderRow({ className, children }: ArrayHeaderRowProps) {\n  return (\n    <div data-slot=\"array-header-row\" className={cn('mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak', className)}>\n      {children}\n      {/* spacer matching the delete icon button width */}\n      <div className=\"min-w-8 w-8 shrink-0\" />\n    </div>\n  );\n}\n\n// ─── SimpleArrayField ──────────────────────────────────────────────────────\n\nexport type SimpleArrayFieldProps<T> = {\n  /**\n   * Shape of a brand-new empty row appended when the user clicks \"Add row\".\n   */\n  defaultRow: T;\n  /**\n   * Render function called once per row. Receives the zero-based row `index`\n   * so you can build field paths like `` `items[${index}].name` ``.\n   */\n  children: (index: number) => React.ReactNode;\n  /** Label on the add button. Defaults to `'Add row'`. */\n  addLabel?: string;\n  className?: string;\n};\n\n/**\n * Array field wrapper that manages rows (add / remove) while letting you\n * freely compose any fields inside each row.\n *\n * @example\n * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });\n *\n * <AppForm>\n *   <AppField name=\"items\">\n *     {({ SimpleArrayField }) => (\n *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>\n *         {(i) => (\n *           <div className=\"flex gap-2\">\n *             <AppField name={`items[${i}].name`}>\n *               {({ SimpleTextField }) => <SimpleTextField label=\"Name\" />}\n *             </AppField>\n *             <AppField name={`items[${i}].qty`}>\n *               {({ SimpleNumberField }) => <SimpleNumberField label=\"Qty\" />}\n *             </AppField>\n *           </div>\n *         )}\n *       </SimpleArrayField>\n *     )}\n *   </AppField>\n * </AppForm>\n */\nexport function SimpleArrayField<T>({ defaultRow, children, addLabel = 'Thêm hàng', className }: SimpleArrayFieldProps<T>) {\n  const field = useTanStackFieldContext<T[]>();\n  const rows = field.state.value ?? [];\n\n  const addRow = useCallback(() => {\n    field.pushValue({ ...defaultRow } as T);\n  }, [field, defaultRow]);\n\n  const removeRow = useCallback(\n    (index: number) => {\n      field.removeValue(index);\n    },\n    [field]\n  );\n\n  return (\n    <div data-slot=\"simple-array-field\" className={cn('flex flex-col gap-2', className)}>\n      {rows.map((_, i) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable identity for form rows\n        <div key={i} className=\"flex items-start gap-2\">\n          {children(i)}\n          <Button type=\"button\" size=\"icon\" variant=\"ghost\" color=\"danger\" className=\"min-w-8\" onClick={() => removeRow(i)}>\n            <Trash2Icon size={14} />\n          </Button>\n        </div>\n      ))}\n\n      <div>\n        <Button type=\"button\" variant=\"outline\" color=\"muted\" size=\"xs\" onClick={addRow}>\n          <PlusIcon size={13} />\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"4RA8CA,SAAgB,EAAS,CAAE,QAAO,YAAW,YAA2B,CAGtE,OACE,EAAC,MAAD,CAAK,YAAU,YAAY,MAHM,EAAQ,CAAE,MAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EAAO,WAAY,CAAE,EAAI,CAAE,KAAM,EAAG,SAAU,CAAE,EAGzF,YACjD,UACE,CAAA,CAET,CAyBA,SAAgB,EAAe,CAAE,YAAW,YAAiC,CAC3E,OACE,EAAC,MAAD,CAAK,YAAU,mBAAmB,UAAW,EAAG,gFAAiF,CAAS,EAA1I,SAAA,CACG,EAED,EAAC,MAAD,CAAK,UAAU,sBAAwB,CAAA,CACpC,GAET,CA6CA,SAAgB,EAAoB,CAAE,aAAY,WAAU,WAAW,YAAa,aAAuC,CACzH,IAAM,EAAQ,EAA6B,EACrC,EAAO,EAAM,MAAM,OAAS,CAAC,EAE7B,EAAS,MAAkB,CAC/B,EAAM,UAAU,CAAE,GAAG,CAAW,CAAM,CACxC,EAAG,CAAC,EAAO,CAAU,CAAC,EAEhB,EAAY,EACf,GAAkB,CACjB,EAAM,YAAY,CAAK,CACzB,EACA,CAAC,CAAK,CACR,EAEA,OACE,EAAC,MAAD,CAAK,YAAU,qBAAqB,UAAW,EAAG,sBAAuB,CAAS,EAAlF,SAAA,CACG,EAAK,KAAK,EAAG,IAEZ,EAAC,MAAD,CAAa,UAAU,yBAAvB,SAAA,CACG,EAAS,CAAC,EACX,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,QAAQ,MAAM,SAAS,UAAU,UAAU,YAAe,EAAU,CAAC,EAC7G,SAAA,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,CALK,EAAA,CAKL,CACN,EAED,EAAC,MAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,UAAU,MAAM,QAAQ,KAAK,KAAK,QAAS,EAAzE,SAAA,CACE,EAAC,EAAD,CAAU,KAAM,EAAK,CAAA,EACpB,CACK,CACL,CAAA,CAAA,CAAA,CACF,GAET"}
+{"version":3,"file":"simple-array-field-BwNCeUnn.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-array-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { PlusIcon, Trash2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFieldContext } from '../form-context';\n\n// ─── ArrayCol ──────────────────────────────────────────────────────────────\n\ntype ArrayColProps = {\n  /**\n   * Fixed column width as a pixel number (e.g. `96`) or any CSS string\n   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the\n   * remaining row space (`flex: 1`).\n   */\n  width?: number | string;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Layout helper for columns inside a `SimpleArrayField` row. Controls width\n * without repeating `<div className=\"w-24\">` or `<div className=\"flex-1\">`.\n *\n * @example\n * <SimpleArrayField defaultRow={...}>\n *   {i => (\n *     <>\n *       <ArrayCol>                 // flex-1 — takes remaining space\n *         <AppField name={`items[${i}].name`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width={96}>     // 96 px fixed\n *         <AppField name={`items[${i}].qty`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width=\"8rem\">   // CSS string\n *         <AppField name={`items[${i}].tax`}>...</AppField>\n *       </ArrayCol>\n *     </>\n *   )}\n * </SimpleArrayField>\n */\nexport function ArrayCol({ width, className, children }: ArrayColProps) {\n  const style: React.CSSProperties = width ? { width: typeof width === 'number' ? `${width}px` : width, flexShrink: 0 } : { flex: 1, minWidth: 0 };\n\n  return (\n    <div data-slot=\"array-col\" style={style} className={className}>\n      {children}\n    </div>\n  );\n}\n\n// ─── ArrayHeaderRow ────────────────────────────────────────────────────────\n\ntype ArrayHeaderRowProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Styled header row for a `SimpleArrayField` table. Place it directly above\n * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align\n * headers with their columns. A spacer matching the delete-button width is\n * appended automatically.\n *\n * @example\n * <ArrayHeaderRow>\n *   <ArrayCol>Name</ArrayCol>\n *   <ArrayCol width={96}>Price</ArrayCol>\n *   <ArrayCol width={80}>Qty</ArrayCol>\n * </ArrayHeaderRow>\n * <SimpleArrayField defaultRow={...}>\n *   {i => (...)}\n * </SimpleArrayField>\n */\nexport function ArrayHeaderRow({ className, children }: ArrayHeaderRowProps) {\n  return (\n    <div data-slot=\"array-header-row\" className={cn('mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak', className)}>\n      {children}\n      {/* spacer matching the delete icon button width */}\n      <div className=\"min-w-8 w-8 shrink-0\" />\n    </div>\n  );\n}\n\n// ─── SimpleArrayField ──────────────────────────────────────────────────────\n\nexport type SimpleArrayFieldProps<T> = {\n  /**\n   * Shape of a brand-new empty row appended when the user clicks \"Add row\".\n   */\n  defaultRow: T;\n  /**\n   * Render function called once per row. Receives the zero-based row `index`\n   * so you can build field paths like `` `items[${index}].name` ``.\n   */\n  children: (index: number) => React.ReactNode;\n  /** Label on the add button. Defaults to `'Add row'`. */\n  addLabel?: string;\n  className?: string;\n};\n\n/**\n * Array field wrapper that manages rows (add / remove) while letting you\n * freely compose any fields inside each row.\n *\n * @example\n * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });\n *\n * <AppForm>\n *   <AppField name=\"items\">\n *     {({ SimpleArrayField }) => (\n *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>\n *         {(i) => (\n *           <div className=\"flex gap-2\">\n *             <AppField name={`items[${i}].name`}>\n *               {({ SimpleTextField }) => <SimpleTextField label=\"Name\" />}\n *             </AppField>\n *             <AppField name={`items[${i}].qty`}>\n *               {({ SimpleNumberField }) => <SimpleNumberField label=\"Qty\" />}\n *             </AppField>\n *           </div>\n *         )}\n *       </SimpleArrayField>\n *     )}\n *   </AppField>\n * </AppForm>\n */\nexport function SimpleArrayField<T>({ defaultRow, children, addLabel = 'Thêm hàng', className }: SimpleArrayFieldProps<T>) {\n  const field = useTanStackFieldContext<T[]>();\n  const rows = field.state.value ?? [];\n\n  const addRow = useCallback(() => {\n    field.pushValue({ ...defaultRow } as T);\n  }, [field, defaultRow]);\n\n  const removeRow = useCallback(\n    (index: number) => {\n      field.removeValue(index);\n    },\n    [field]\n  );\n\n  return (\n    <div data-slot=\"simple-array-field\" className={cn('flex flex-col gap-2', className)}>\n      {rows.map((_, i) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable identity for form rows\n        <div key={i} className=\"flex items-start gap-2\">\n          {children(i)}\n          <Button type=\"button\" size=\"icon\" variant=\"ghost\" color=\"danger\" className=\"min-w-8\" onClick={() => removeRow(i)}>\n            <Trash2Icon size={14} />\n          </Button>\n        </div>\n      ))}\n\n      <div>\n        <Button type=\"button\" variant=\"outline\" color=\"muted\" size=\"xs\" onClick={addRow}>\n          <PlusIcon size={13} />\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"4RA8CA,SAAgB,EAAS,CAAE,QAAO,YAAW,YAA2B,CAGtE,OACE,EAAC,MAAD,CAAK,YAAU,YAAY,MAHM,EAAQ,CAAE,MAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EAAO,WAAY,CAAE,EAAI,CAAE,KAAM,EAAG,SAAU,CAAE,EAGzF,YACjD,UACE,CAAA,CAET,CAyBA,SAAgB,EAAe,CAAE,YAAW,YAAiC,CAC3E,OACE,EAAC,MAAD,CAAK,YAAU,mBAAmB,UAAW,EAAG,gFAAiF,CAAS,EAA1I,SAAA,CACG,EAED,EAAC,MAAD,CAAK,UAAU,sBAAwB,CAAA,CACpC,GAET,CA6CA,SAAgB,EAAoB,CAAE,aAAY,WAAU,WAAW,YAAa,aAAuC,CACzH,IAAM,EAAQ,EAA6B,EACrC,EAAO,EAAM,MAAM,OAAS,CAAC,EAE7B,EAAS,MAAkB,CAC/B,EAAM,UAAU,CAAE,GAAG,CAAW,CAAM,CACxC,EAAG,CAAC,EAAO,CAAU,CAAC,EAEhB,EAAY,EACf,GAAkB,CACjB,EAAM,YAAY,CAAK,CACzB,EACA,CAAC,CAAK,CACR,EAEA,OACE,EAAC,MAAD,CAAK,YAAU,qBAAqB,UAAW,EAAG,sBAAuB,CAAS,EAAlF,SAAA,CACG,EAAK,KAAK,EAAG,IAEZ,EAAC,MAAD,CAAa,UAAU,yBAAvB,SAAA,CACG,EAAS,CAAC,EACX,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,QAAQ,MAAM,SAAS,UAAU,UAAU,YAAe,EAAU,CAAC,EAC7G,SAAA,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,CALK,EAAA,CAKL,CACN,EAED,EAAC,MAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,UAAU,MAAM,QAAQ,KAAK,KAAK,QAAS,EAAzE,SAAA,CACE,EAAC,EAAD,CAAU,KAAM,EAAK,CAAA,EACpB,CACK,CACL,CAAA,CAAA,CAAA,CACF,GAET"}

package/dist/{simple-array-field-bCUuPMgT.cjs → simple-array-field-aGXkDZXD.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./tanstack-form-BxqS40rB.cjs");let n=require("lucide-react"),r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("react/jsx-runtime");function o({width:e,className:t,children:n}){return(0,a.jsx)(`div`,{"data-slot":`array-col`,style:e?{width:typeof e==`number`?`${e}px`:e,flexShrink:0}:{flex:1,minWidth:0},className:t,children:n})}function s({className:e,children:t}){return(0,a.jsxs)(`div`,{"data-slot":`array-header-row`,className:(0,i.cn)(`mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak`,e),children:[t,(0,a.jsx)(`div`,{className:`min-w-8 w-8 shrink-0`})]})}function c({defaultRow:o,children:s,addLabel:c=`Thêm hàng`,className:l}){let u=t.G(),d=u.state.value??[],f=(0,r.useCallback)(()=>{u.pushValue({...o})},[u,o]),p=(0,r.useCallback)(e=>{u.removeValue(e)},[u]);return(0,a.jsxs)(`div`,{"data-slot":`simple-array-field`,className:(0,i.cn)(`flex flex-col gap-2`,l),children:[d.map((t,r)=>(0,a.jsxs)(`div`,{className:`flex items-start gap-2`,children:[s(r),(0,a.jsx)(e.Button,{type:`button`,size:`icon`,variant:`ghost`,color:`danger`,className:`min-w-8`,onClick:()=>p(r),children:(0,a.jsx)(n.Trash2Icon,{size:14})})]},r)),(0,a.jsx)(`div`,{children:(0,a.jsxs)(e.Button,{type:`button`,variant:`outline`,color:`muted`,size:`xs`,onClick:f,children:[(0,a.jsx)(n.PlusIcon,{size:13}),c]})})]})}exports.ArrayCol=o,exports.ArrayHeaderRow=s,exports.SimpleArrayField=c;
-//# sourceMappingURL=simple-array-field-bCUuPMgT.cjs.map
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-C0ab8EEl.cjs");let n=require("lucide-react"),r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("react/jsx-runtime");function o({width:e,className:t,children:n}){return(0,a.jsx)(`div`,{"data-slot":`array-col`,style:e?{width:typeof e==`number`?`${e}px`:e,flexShrink:0}:{flex:1,minWidth:0},className:t,children:n})}function s({className:e,children:t}){return(0,a.jsxs)(`div`,{"data-slot":`array-header-row`,className:(0,i.cn)(`mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak`,e),children:[t,(0,a.jsx)(`div`,{className:`min-w-8 w-8 shrink-0`})]})}function c({defaultRow:o,children:s,addLabel:c=`Thêm hàng`,className:l}){let u=t.G(),d=u.state.value??[],f=(0,r.useCallback)(()=>{u.pushValue({...o})},[u,o]),p=(0,r.useCallback)(e=>{u.removeValue(e)},[u]);return(0,a.jsxs)(`div`,{"data-slot":`simple-array-field`,className:(0,i.cn)(`flex flex-col gap-2`,l),children:[d.map((t,r)=>(0,a.jsxs)(`div`,{className:`flex items-start gap-2`,children:[s(r),(0,a.jsx)(e.Button,{type:`button`,size:`icon`,variant:`ghost`,color:`danger`,className:`min-w-8`,onClick:()=>p(r),children:(0,a.jsx)(n.Trash2Icon,{size:14})})]},r)),(0,a.jsx)(`div`,{children:(0,a.jsxs)(e.Button,{type:`button`,variant:`outline`,color:`muted`,size:`xs`,onClick:f,children:[(0,a.jsx)(n.PlusIcon,{size:13}),c]})})]})}exports.ArrayCol=o,exports.ArrayHeaderRow=s,exports.SimpleArrayField=c;
+//# sourceMappingURL=simple-array-field-aGXkDZXD.cjs.map

package/dist/{simple-array-field-bCUuPMgT.cjs.map → simple-array-field-aGXkDZXD.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-array-field-bCUuPMgT.cjs","names":["useTanStackFieldContext","Button","Trash2Icon","PlusIcon"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-array-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { PlusIcon, Trash2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFieldContext } from '../form-context';\n\n// ─── ArrayCol ──────────────────────────────────────────────────────────────\n\ntype ArrayColProps = {\n  /**\n   * Fixed column width as a pixel number (e.g. `96`) or any CSS string\n   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the\n   * remaining row space (`flex: 1`).\n   */\n  width?: number | string;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Layout helper for columns inside a `SimpleArrayField` row. Controls width\n * without repeating `<div className=\"w-24\">` or `<div className=\"flex-1\">`.\n *\n * @example\n * <SimpleArrayField defaultRow={...}>\n *   {i => (\n *     <>\n *       <ArrayCol>                 // flex-1 — takes remaining space\n *         <AppField name={`items[${i}].name`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width={96}>     // 96 px fixed\n *         <AppField name={`items[${i}].qty`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width=\"8rem\">   // CSS string\n *         <AppField name={`items[${i}].tax`}>...</AppField>\n *       </ArrayCol>\n *     </>\n *   )}\n * </SimpleArrayField>\n */\nexport function ArrayCol({ width, className, children }: ArrayColProps) {\n  const style: React.CSSProperties = width ? { width: typeof width === 'number' ? `${width}px` : width, flexShrink: 0 } : { flex: 1, minWidth: 0 };\n\n  return (\n    <div data-slot=\"array-col\" style={style} className={className}>\n      {children}\n    </div>\n  );\n}\n\n// ─── ArrayHeaderRow ────────────────────────────────────────────────────────\n\ntype ArrayHeaderRowProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Styled header row for a `SimpleArrayField` table. Place it directly above\n * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align\n * headers with their columns. A spacer matching the delete-button width is\n * appended automatically.\n *\n * @example\n * <ArrayHeaderRow>\n *   <ArrayCol>Name</ArrayCol>\n *   <ArrayCol width={96}>Price</ArrayCol>\n *   <ArrayCol width={80}>Qty</ArrayCol>\n * </ArrayHeaderRow>\n * <SimpleArrayField defaultRow={...}>\n *   {i => (...)}\n * </SimpleArrayField>\n */\nexport function ArrayHeaderRow({ className, children }: ArrayHeaderRowProps) {\n  return (\n    <div data-slot=\"array-header-row\" className={cn('mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak', className)}>\n      {children}\n      {/* spacer matching the delete icon button width */}\n      <div className=\"min-w-8 w-8 shrink-0\" />\n    </div>\n  );\n}\n\n// ─── SimpleArrayField ──────────────────────────────────────────────────────\n\nexport type SimpleArrayFieldProps<T> = {\n  /**\n   * Shape of a brand-new empty row appended when the user clicks \"Add row\".\n   */\n  defaultRow: T;\n  /**\n   * Render function called once per row. Receives the zero-based row `index`\n   * so you can build field paths like `` `items[${index}].name` ``.\n   */\n  children: (index: number) => React.ReactNode;\n  /** Label on the add button. Defaults to `'Add row'`. */\n  addLabel?: string;\n  className?: string;\n};\n\n/**\n * Array field wrapper that manages rows (add / remove) while letting you\n * freely compose any fields inside each row.\n *\n * @example\n * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });\n *\n * <AppForm>\n *   <AppField name=\"items\">\n *     {({ SimpleArrayField }) => (\n *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>\n *         {(i) => (\n *           <div className=\"flex gap-2\">\n *             <AppField name={`items[${i}].name`}>\n *               {({ SimpleTextField }) => <SimpleTextField label=\"Name\" />}\n *             </AppField>\n *             <AppField name={`items[${i}].qty`}>\n *               {({ SimpleNumberField }) => <SimpleNumberField label=\"Qty\" />}\n *             </AppField>\n *           </div>\n *         )}\n *       </SimpleArrayField>\n *     )}\n *   </AppField>\n * </AppForm>\n */\nexport function SimpleArrayField<T>({ defaultRow, children, addLabel = 'Thêm hàng', className }: SimpleArrayFieldProps<T>) {\n  const field = useTanStackFieldContext<T[]>();\n  const rows = field.state.value ?? [];\n\n  const addRow = useCallback(() => {\n    field.pushValue({ ...defaultRow } as T);\n  }, [field, defaultRow]);\n\n  const removeRow = useCallback(\n    (index: number) => {\n      field.removeValue(index);\n    },\n    [field]\n  );\n\n  return (\n    <div data-slot=\"simple-array-field\" className={cn('flex flex-col gap-2', className)}>\n      {rows.map((_, i) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable identity for form rows\n        <div key={i} className=\"flex items-start gap-2\">\n          {children(i)}\n          <Button type=\"button\" size=\"icon\" variant=\"ghost\" color=\"danger\" className=\"min-w-8\" onClick={() => removeRow(i)}>\n            <Trash2Icon size={14} />\n          </Button>\n        </div>\n      ))}\n\n      <div>\n        <Button type=\"button\" variant=\"outline\" color=\"muted\" size=\"xs\" onClick={addRow}>\n          <PlusIcon size={13} />\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"yMA8CA,SAAgB,EAAS,CAAE,QAAO,YAAW,YAA2B,CAGtE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,YAAY,MAHM,EAAQ,CAAE,MAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EAAO,WAAY,CAAE,EAAI,CAAE,KAAM,EAAG,SAAU,CAAE,EAGzF,YACjD,UACE,CAAA,CAET,CAyBA,SAAgB,EAAe,CAAE,YAAW,YAAiC,CAC3E,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,mBAAmB,WAAA,EAAA,EAAA,GAAA,CAAc,gFAAiF,CAAS,EAA1I,SAAA,CACG,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sBAAwB,CAAA,CACpC,GAET,CA6CA,SAAgB,EAAoB,CAAE,aAAY,WAAU,WAAW,YAAa,aAAuC,CACzH,IAAM,EAAQA,EAAAA,EAA6B,EACrC,EAAO,EAAM,MAAM,OAAS,CAAC,EAE7B,GAAA,EAAA,EAAA,YAAA,KAA2B,CAC/B,EAAM,UAAU,CAAE,GAAG,CAAW,CAAM,CACxC,EAAG,CAAC,EAAO,CAAU,CAAC,EAEhB,GAAA,EAAA,EAAA,YAAA,CACH,GAAkB,CACjB,EAAM,YAAY,CAAK,CACzB,EACA,CAAC,CAAK,CACR,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,qBAAqB,WAAA,EAAA,EAAA,GAAA,CAAc,sBAAuB,CAAS,EAAlF,SAAA,CACG,EAAK,KAAK,EAAG,KAEZ,EAAA,EAAA,KAAA,CAAC,MAAD,CAAa,UAAU,yBAAvB,SAAA,CACG,EAAS,CAAC,GACX,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,QAAQ,MAAM,SAAS,UAAU,UAAU,YAAe,EAAU,CAAC,EAC7G,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,CALK,EAAA,CAKL,CACN,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACD,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,UAAU,MAAM,QAAQ,KAAK,KAAK,QAAS,EAAzE,SAAA,EACE,EAAA,EAAA,IAAA,CAACE,EAAAA,SAAD,CAAU,KAAM,EAAK,CAAA,EACpB,CACK,CACL,CAAA,CAAA,CAAA,CACF,GAET"}
+{"version":3,"file":"simple-array-field-aGXkDZXD.cjs","names":["useTanStackFieldContext","Button","Trash2Icon","PlusIcon"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-array-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { PlusIcon, Trash2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFieldContext } from '../form-context';\n\n// ─── ArrayCol ──────────────────────────────────────────────────────────────\n\ntype ArrayColProps = {\n  /**\n   * Fixed column width as a pixel number (e.g. `96`) or any CSS string\n   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the\n   * remaining row space (`flex: 1`).\n   */\n  width?: number | string;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Layout helper for columns inside a `SimpleArrayField` row. Controls width\n * without repeating `<div className=\"w-24\">` or `<div className=\"flex-1\">`.\n *\n * @example\n * <SimpleArrayField defaultRow={...}>\n *   {i => (\n *     <>\n *       <ArrayCol>                 // flex-1 — takes remaining space\n *         <AppField name={`items[${i}].name`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width={96}>     // 96 px fixed\n *         <AppField name={`items[${i}].qty`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width=\"8rem\">   // CSS string\n *         <AppField name={`items[${i}].tax`}>...</AppField>\n *       </ArrayCol>\n *     </>\n *   )}\n * </SimpleArrayField>\n */\nexport function ArrayCol({ width, className, children }: ArrayColProps) {\n  const style: React.CSSProperties = width ? { width: typeof width === 'number' ? `${width}px` : width, flexShrink: 0 } : { flex: 1, minWidth: 0 };\n\n  return (\n    <div data-slot=\"array-col\" style={style} className={className}>\n      {children}\n    </div>\n  );\n}\n\n// ─── ArrayHeaderRow ────────────────────────────────────────────────────────\n\ntype ArrayHeaderRowProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Styled header row for a `SimpleArrayField` table. Place it directly above\n * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align\n * headers with their columns. A spacer matching the delete-button width is\n * appended automatically.\n *\n * @example\n * <ArrayHeaderRow>\n *   <ArrayCol>Name</ArrayCol>\n *   <ArrayCol width={96}>Price</ArrayCol>\n *   <ArrayCol width={80}>Qty</ArrayCol>\n * </ArrayHeaderRow>\n * <SimpleArrayField defaultRow={...}>\n *   {i => (...)}\n * </SimpleArrayField>\n */\nexport function ArrayHeaderRow({ className, children }: ArrayHeaderRowProps) {\n  return (\n    <div data-slot=\"array-header-row\" className={cn('mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak', className)}>\n      {children}\n      {/* spacer matching the delete icon button width */}\n      <div className=\"min-w-8 w-8 shrink-0\" />\n    </div>\n  );\n}\n\n// ─── SimpleArrayField ──────────────────────────────────────────────────────\n\nexport type SimpleArrayFieldProps<T> = {\n  /**\n   * Shape of a brand-new empty row appended when the user clicks \"Add row\".\n   */\n  defaultRow: T;\n  /**\n   * Render function called once per row. Receives the zero-based row `index`\n   * so you can build field paths like `` `items[${index}].name` ``.\n   */\n  children: (index: number) => React.ReactNode;\n  /** Label on the add button. Defaults to `'Add row'`. */\n  addLabel?: string;\n  className?: string;\n};\n\n/**\n * Array field wrapper that manages rows (add / remove) while letting you\n * freely compose any fields inside each row.\n *\n * @example\n * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });\n *\n * <AppForm>\n *   <AppField name=\"items\">\n *     {({ SimpleArrayField }) => (\n *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>\n *         {(i) => (\n *           <div className=\"flex gap-2\">\n *             <AppField name={`items[${i}].name`}>\n *               {({ SimpleTextField }) => <SimpleTextField label=\"Name\" />}\n *             </AppField>\n *             <AppField name={`items[${i}].qty`}>\n *               {({ SimpleNumberField }) => <SimpleNumberField label=\"Qty\" />}\n *             </AppField>\n *           </div>\n *         )}\n *       </SimpleArrayField>\n *     )}\n *   </AppField>\n * </AppForm>\n */\nexport function SimpleArrayField<T>({ defaultRow, children, addLabel = 'Thêm hàng', className }: SimpleArrayFieldProps<T>) {\n  const field = useTanStackFieldContext<T[]>();\n  const rows = field.state.value ?? [];\n\n  const addRow = useCallback(() => {\n    field.pushValue({ ...defaultRow } as T);\n  }, [field, defaultRow]);\n\n  const removeRow = useCallback(\n    (index: number) => {\n      field.removeValue(index);\n    },\n    [field]\n  );\n\n  return (\n    <div data-slot=\"simple-array-field\" className={cn('flex flex-col gap-2', className)}>\n      {rows.map((_, i) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable identity for form rows\n        <div key={i} className=\"flex items-start gap-2\">\n          {children(i)}\n          <Button type=\"button\" size=\"icon\" variant=\"ghost\" color=\"danger\" className=\"min-w-8\" onClick={() => removeRow(i)}>\n            <Trash2Icon size={14} />\n          </Button>\n        </div>\n      ))}\n\n      <div>\n        <Button type=\"button\" variant=\"outline\" color=\"muted\" size=\"xs\" onClick={addRow}>\n          <PlusIcon size={13} />\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"yMA8CA,SAAgB,EAAS,CAAE,QAAO,YAAW,YAA2B,CAGtE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,YAAY,MAHM,EAAQ,CAAE,MAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EAAO,WAAY,CAAE,EAAI,CAAE,KAAM,EAAG,SAAU,CAAE,EAGzF,YACjD,UACE,CAAA,CAET,CAyBA,SAAgB,EAAe,CAAE,YAAW,YAAiC,CAC3E,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,mBAAmB,WAAA,EAAA,EAAA,GAAA,CAAc,gFAAiF,CAAS,EAA1I,SAAA,CACG,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sBAAwB,CAAA,CACpC,GAET,CA6CA,SAAgB,EAAoB,CAAE,aAAY,WAAU,WAAW,YAAa,aAAuC,CACzH,IAAM,EAAQA,EAAAA,EAA6B,EACrC,EAAO,EAAM,MAAM,OAAS,CAAC,EAE7B,GAAA,EAAA,EAAA,YAAA,KAA2B,CAC/B,EAAM,UAAU,CAAE,GAAG,CAAW,CAAM,CACxC,EAAG,CAAC,EAAO,CAAU,CAAC,EAEhB,GAAA,EAAA,EAAA,YAAA,CACH,GAAkB,CACjB,EAAM,YAAY,CAAK,CACzB,EACA,CAAC,CAAK,CACR,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,qBAAqB,WAAA,EAAA,EAAA,GAAA,CAAc,sBAAuB,CAAS,EAAlF,SAAA,CACG,EAAK,KAAK,EAAG,KAEZ,EAAA,EAAA,KAAA,CAAC,MAAD,CAAa,UAAU,yBAAvB,SAAA,CACG,EAAS,CAAC,GACX,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,QAAQ,MAAM,SAAS,UAAU,UAAU,YAAe,EAAU,CAAC,EAC7G,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,CALK,EAAA,CAKL,CACN,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACD,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,UAAU,MAAM,QAAQ,KAAK,KAAK,QAAS,EAAzE,SAAA,EACE,EAAA,EAAA,IAAA,CAACE,EAAAA,SAAD,CAAU,KAAM,EAAK,CAAA,EACpB,CACK,CACL,CAAA,CAAA,CAAA,CACF,GAET"}