@customafk/lunas-ui 0.2.69 → 0.2.71

package/dist/{text-editor-field-D_l4zp_y.cjs → text-editor-field-Ddvgdo_p.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-BC61U3F-.cjs"),t=require("./text-editor-CfQk5dIx.cjs"),n=require("./field-BV5twmKA.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=(0,r.memo)(({label:o,description:s,placeholder:c,tooltip:l,helperText:u,showErrorMessage:d=!0,required:f=!1})=>{let{form:p,state:m,handleChange:h}=e.G(),g=(0,a.useStore)(p.store,({isSubmitting:e})=>e),_=m.meta.isDirty&&m.meta.isTouched&&!m.meta.isValid,v=f&&m.value===null,y=(0,r.useCallback)(e=>{g||h(e||null)},[g,h]);return(0,i.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,i.jsxs)(n.Field,{orientation:`vertical`,"data-invalid":_,children:[(0,i.jsxs)(n.FieldContent,{children:[(0,i.jsxs)(n.FieldLabel,{"aria-required":v,children:[o,l&&(0,i.jsx)(n.FieldTooltip,{tooltip:l})]}),(0,i.jsx)(n.FieldDescription,{children:s})]}),(0,i.jsx)(t.t,{value:m.value??``,placeholder:c,readOnly:g,onChange:y}),m.meta.isDirty&&d&&!!m.meta.errors.length&&(0,i.jsx)(n.FieldError,{errors:m.meta.errors}),(0,i.jsx)(n.FieldNote,{isShow:!!u,children:u})]}),(0,i.jsx)(n.FieldSeparator,{})]})});o.displayName=`TextEditorField`,exports.TextEditorField=o;
-//# sourceMappingURL=text-editor-field-D_l4zp_y.cjs.map
+const e=require("./tanstack-form-CX3lC3mC.cjs"),t=require("./text-editor-CfQk5dIx.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=(0,r.memo)(({label:o,description:s,placeholder:c,tooltip:l,helperText:u,showErrorMessage:d=!0,required:f=!1})=>{let{form:p,state:m,handleChange:h}=e.G(),g=(0,a.useStore)(p.store,({isSubmitting:e})=>e),_=m.meta.isDirty&&m.meta.isTouched&&!m.meta.isValid,v=f&&m.value===null,y=(0,r.useCallback)(e=>{g||h(e||null)},[g,h]);return(0,i.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,i.jsxs)(n.Field,{orientation:`vertical`,"data-invalid":_,children:[(0,i.jsxs)(n.FieldContent,{children:[(0,i.jsxs)(n.FieldLabel,{"aria-required":v,children:[o,l&&(0,i.jsx)(n.FieldTooltip,{tooltip:l})]}),(0,i.jsx)(n.FieldDescription,{children:s})]}),(0,i.jsx)(t.t,{value:m.value??``,placeholder:c,readOnly:g,onChange:y}),m.meta.isDirty&&d&&!!m.meta.errors.length&&(0,i.jsx)(n.FieldError,{errors:m.meta.errors}),(0,i.jsx)(n.FieldNote,{isShow:!!u,children:u})]}),(0,i.jsx)(n.FieldSeparator,{})]})});o.displayName=`TextEditorField`,exports.TextEditorField=o;
+//# sourceMappingURL=text-editor-field-Ddvgdo_p.cjs.map

package/dist/{text-editor-field-D_l4zp_y.cjs.map → text-editor-field-Ddvgdo_p.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"text-editor-field-D_l4zp_y.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","TextEditor","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/text-editor-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { TextEditor } from '@/components/features/text-editor';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\n\nimport type { TextEditorFieldProps as Props } from '../../types';\n\nexport const TextEditorField: React.FC<Props> = memo(({ label, description, placeholder, tooltip, helperText, showErrorMessage = true, required = false }) => {\n  const { form, state, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n\n  const onChange = useCallback(\n    (html: string) => {\n      if (isSubmitting) return;\n      handleChange(html || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" data-invalid={_invalid}>\n        <FieldContent>\n          <FieldLabel aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <TextEditor value={state.value ?? ''} placeholder={placeholder} readOnly={isSubmitting} onChange={onChange} />\n        {state.meta.isDirty && showErrorMessage && !!state.meta.errors.length && <FieldError errors={state.meta.errors} />}\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n});\nTextEditorField.displayName = 'TextEditorField';\n"],"mappings":"kNAaA,MAAa,GAAA,EAAA,EAAA,KAAA,EAAyC,CAAE,QAAO,cAAa,cAAa,UAAS,aAAY,mBAAmB,GAAM,WAAW,MAAY,CAC5J,GAAM,CAAE,OAAM,QAAO,gBAAiBA,EAAAA,EAAuC,EAEvE,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAiB,CACZ,GACJ,EAAa,GAAQ,IAAI,CAC3B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,YAAY,WAAW,eAAc,WAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,gBAAe,WAA3B,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,MAAO,EAAM,OAAS,GAAiB,cAAa,SAAU,EAAwB,UAAW,CAAA,EAC5G,EAAM,KAAK,SAAW,GAAoB,CAAC,CAAC,EAAM,KAAK,OAAO,SAAU,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,GACjH,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB,CAAC,EACD,EAAgB,YAAc"}
+{"version":3,"file":"text-editor-field-Ddvgdo_p.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","TextEditor","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/text-editor-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { TextEditor } from '@/components/features/text-editor';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\n\nimport type { TextEditorFieldProps as Props } from '../../types';\n\nexport const TextEditorField: React.FC<Props> = memo(({ label, description, placeholder, tooltip, helperText, showErrorMessage = true, required = false }) => {\n  const { form, state, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n\n  const onChange = useCallback(\n    (html: string) => {\n      if (isSubmitting) return;\n      handleChange(html || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" data-invalid={_invalid}>\n        <FieldContent>\n          <FieldLabel aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <TextEditor value={state.value ?? ''} placeholder={placeholder} readOnly={isSubmitting} onChange={onChange} />\n        {state.meta.isDirty && showErrorMessage && !!state.meta.errors.length && <FieldError errors={state.meta.errors} />}\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n});\nTextEditorField.displayName = 'TextEditorField';\n"],"mappings":"kNAaA,MAAa,GAAA,EAAA,EAAA,KAAA,EAAyC,CAAE,QAAO,cAAa,cAAa,UAAS,aAAY,mBAAmB,GAAM,WAAW,MAAY,CAC5J,GAAM,CAAE,OAAM,QAAO,gBAAiBA,EAAAA,EAAuC,EAEvE,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAiB,CACZ,GACJ,EAAa,GAAQ,IAAI,CAC3B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,YAAY,WAAW,eAAc,WAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,gBAAe,WAA3B,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,MAAO,EAAM,OAAS,GAAiB,cAAa,SAAU,EAAwB,UAAW,CAAA,EAC5G,EAAM,KAAK,SAAW,GAAoB,CAAC,CAAC,EAAM,KAAK,OAAO,SAAU,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,GACjH,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB,CAAC,EACD,EAAgB,YAAc"}

package/dist/{text-editor-field-DxLBaxTL.mjs → text-editor-field-qa3t2GBg.mjs}

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-DJMaMeUh.mjs";import{t}from"./text-editor-BYE2-G5K.mjs";import{Field as n,FieldContent as r,FieldDescription as i,FieldError as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-BKyUqvzh.mjs";import{memo as d,useCallback as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useStore as h}from"@tanstack/react-form";const g=d(({label:d,description:g,placeholder:_,tooltip:v,helperText:y,showErrorMessage:b=!0,required:x=!1})=>{let{form:S,state:C,handleChange:w}=e(),T=h(S.store,({isSubmitting:e})=>e),E=C.meta.isDirty&&C.meta.isTouched&&!C.meta.isValid,D=x&&C.value===null,O=f(e=>{T||w(e||null)},[T,w]);return m(o,{className:`gap-y-4 px-4`,children:[m(n,{orientation:`vertical`,"data-invalid":E,children:[m(r,{children:[m(s,{"aria-required":D,children:[d,v&&p(u,{tooltip:v})]}),p(i,{children:g})]}),p(t,{value:C.value??``,placeholder:_,readOnly:T,onChange:O}),C.meta.isDirty&&b&&!!C.meta.errors.length&&p(a,{errors:C.meta.errors}),p(c,{isShow:!!y,children:y})]}),p(l,{})]})});g.displayName=`TextEditorField`;export{g as TextEditorField};
-//# sourceMappingURL=text-editor-field-DxLBaxTL.mjs.map
+import{G as e}from"./tanstack-form-CKAWexet.mjs";import{t}from"./text-editor-BYE2-G5K.mjs";import{Field as n,FieldContent as r,FieldDescription as i,FieldError as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-V2DoD8qL.mjs";import{memo as d,useCallback as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useStore as h}from"@tanstack/react-form";const g=d(({label:d,description:g,placeholder:_,tooltip:v,helperText:y,showErrorMessage:b=!0,required:x=!1})=>{let{form:S,state:C,handleChange:w}=e(),T=h(S.store,({isSubmitting:e})=>e),E=C.meta.isDirty&&C.meta.isTouched&&!C.meta.isValid,D=x&&C.value===null,O=f(e=>{T||w(e||null)},[T,w]);return m(o,{className:`gap-y-4 px-4`,children:[m(n,{orientation:`vertical`,"data-invalid":E,children:[m(r,{children:[m(s,{"aria-required":D,children:[d,v&&p(u,{tooltip:v})]}),p(i,{children:g})]}),p(t,{value:C.value??``,placeholder:_,readOnly:T,onChange:O}),C.meta.isDirty&&b&&!!C.meta.errors.length&&p(a,{errors:C.meta.errors}),p(c,{isShow:!!y,children:y})]}),p(l,{})]})});g.displayName=`TextEditorField`;export{g as TextEditorField};
+//# sourceMappingURL=text-editor-field-qa3t2GBg.mjs.map

package/dist/{text-editor-field-DxLBaxTL.mjs.map → text-editor-field-qa3t2GBg.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"text-editor-field-DxLBaxTL.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/text-editor-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { TextEditor } from '@/components/features/text-editor';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\n\nimport type { TextEditorFieldProps as Props } from '../../types';\n\nexport const TextEditorField: React.FC<Props> = memo(({ label, description, placeholder, tooltip, helperText, showErrorMessage = true, required = false }) => {\n  const { form, state, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n\n  const onChange = useCallback(\n    (html: string) => {\n      if (isSubmitting) return;\n      handleChange(html || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" data-invalid={_invalid}>\n        <FieldContent>\n          <FieldLabel aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <TextEditor value={state.value ?? ''} placeholder={placeholder} readOnly={isSubmitting} onChange={onChange} />\n        {state.meta.isDirty && showErrorMessage && !!state.meta.errors.length && <FieldError errors={state.meta.errors} />}\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n});\nTextEditorField.displayName = 'TextEditorField';\n"],"mappings":"qaAaA,MAAa,EAAmC,GAAM,CAAE,QAAO,cAAa,cAAa,UAAS,aAAY,mBAAmB,GAAM,WAAW,MAAY,CAC5J,GAAM,CAAE,OAAM,QAAO,gBAAiB,EAAuC,EAEvE,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KAEvC,EAAW,EACd,GAAiB,CACZ,GACJ,EAAa,GAAQ,IAAI,CAC3B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,YAAY,WAAW,eAAc,WAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,gBAAe,WAA3B,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAY,MAAO,EAAM,OAAS,GAAiB,cAAa,SAAU,EAAwB,UAAW,CAAA,EAC5G,EAAM,KAAK,SAAW,GAAoB,CAAC,CAAC,EAAM,KAAK,OAAO,QAAU,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,EACjH,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CAAC,EACD,EAAgB,YAAc"}
+{"version":3,"file":"text-editor-field-qa3t2GBg.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/text-editor-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { TextEditor } from '@/components/features/text-editor';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\n\nimport type { TextEditorFieldProps as Props } from '../../types';\n\nexport const TextEditorField: React.FC<Props> = memo(({ label, description, placeholder, tooltip, helperText, showErrorMessage = true, required = false }) => {\n  const { form, state, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n\n  const onChange = useCallback(\n    (html: string) => {\n      if (isSubmitting) return;\n      handleChange(html || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" data-invalid={_invalid}>\n        <FieldContent>\n          <FieldLabel aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <TextEditor value={state.value ?? ''} placeholder={placeholder} readOnly={isSubmitting} onChange={onChange} />\n        {state.meta.isDirty && showErrorMessage && !!state.meta.errors.length && <FieldError errors={state.meta.errors} />}\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n});\nTextEditorField.displayName = 'TextEditorField';\n"],"mappings":"qaAaA,MAAa,EAAmC,GAAM,CAAE,QAAO,cAAa,cAAa,UAAS,aAAY,mBAAmB,GAAM,WAAW,MAAY,CAC5J,GAAM,CAAE,OAAM,QAAO,gBAAiB,EAAuC,EAEvE,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KAEvC,EAAW,EACd,GAAiB,CACZ,GACJ,EAAa,GAAQ,IAAI,CAC3B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,YAAY,WAAW,eAAc,WAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,gBAAe,WAA3B,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAY,MAAO,EAAM,OAAS,GAAiB,cAAa,SAAU,EAAwB,UAAW,CAAA,EAC5G,EAAM,KAAK,SAAW,GAAoB,CAAC,CAAC,EAAM,KAAK,OAAO,QAAU,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,EACjH,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CAAC,EACD,EAAgB,YAAc"}

package/dist/text-field-CBUTZKGH.mjs

@@ -0,0 +1,2 @@
+import{G as e}from"./tanstack-form-CKAWexet.mjs";import{Input as t}from"./ui/input.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-V2DoD8qL.mjs";import{BanIcon as f,Loader2Icon as p,XIcon as m}from"lucide-react";import{memo as h,useCallback as g,useId as _,useRef as v}from"react";import{cn as y}from"@customafk/react-toolkit/utils";import{jsx as b,jsxs as x}from"react/jsx-runtime";import{useStore as S}from"@tanstack/react-form";const C=e=>{e.key===`Enter`&&e.preventDefault()},w=h(({label:h,description:w,placeholder:T,tooltip:E,helperText:D,counter:O=!1,orientation:k=`responsive`,showClearButton:A=!1,showErrorMessage:j=!0,required:M=!1,disabled:N=!1,maxLength:P})=>{let F=_(),I=_(),L=v(null),{form:R,name:z,state:B,handleBlur:V,handleChange:H}=e(),U=S(R.store,({isSubmitting:e})=>e),W=N||U,G=B.meta.isDirty||B.meta.isTouched,K=G&&!B.meta.isValid,q=M&&B.value===null,J=B.meta.errors.length>0,Y=A&&!W&&!!B.value,X=O?B.value?.length??0:0,Z=O&&!!P&&X>=P*.8,Q=O&&!!P&&X>=P,$=O?P?`${X} / ${P} ký tự`:`${X} ký tự`:null,ee=O||G&&j&&J,te=g(({target:{value:e}})=>{O&&P&&e.length>P||H(e||null)},[O,P,H]),ne=g(()=>{H(null),L.current?.focus()},[H]);return x(s,{className:`gap-y-4 px-4`,children:[x(n,{orientation:k,"data-invalid":K,children:[x(r,{children:[x(c,{"aria-required":q,htmlFor:F,children:[h,E&&b(d,{tooltip:E})]}),w&&b(a,{children:w})]}),x(i,{children:[b(t,{ref:L,id:F,name:z,value:B.value??``,"aria-invalid":K,"aria-describedby":I,autoComplete:`off`,placeholder:T,autoCapitalize:`none`,autoCorrect:`off`,disabled:W,className:y(`pr-6`,W&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:V,onChange:te,onKeyDown:C}),Y&&b(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-1 top-2.5 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:ne,children:b(m,{"aria-hidden":`true`})}),U&&b(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:b(p,{size:14,className:`animate-spin text-primary-strong`})}),!Y&&G&&j&&J&&b(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:b(f,{"aria-hidden":`true`,size:14})}),ee&&x(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[G&&j?b(o,{id:I,className:`flex-1`,errors:B.meta.errors}):b(`div`,{}),O&&b(`p`,{className:y(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,Q?`font-medium text-danger-strong`:Z?`text-warning-strong`:`text-text-positive-weak`),children:$})]}),b(l,{isShow:!!D,children:D})]})]}),b(u,{})]})});w.displayName=`TextField`;export{w as TextField};
+//# sourceMappingURL=text-field-CBUTZKGH.mjs.map

package/dist/text-field-CBUTZKGH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-CBUTZKGH.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/text-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId, useRef } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '@/components/features/tanstack-form/components/ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { TextFieldProps as Props } from '../../types';\n\n/** Fraction of maxLength at which the counter turns warning color (80%). */\nconst COUNTER_WARNING_THRESHOLD = 0.8;\n\n/** Pixel size for inline adornment icons (error ban, loading spinner). */\nconst ADORNMENT_ICON_SIZE = 14;\n\n// Static handler — no closure deps, shared across all TextField instances\nconst onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = e => {\n  if (e.key === 'Enter') e.preventDefault();\n};\n\n/**\n * A TanStack Form-connected single-line text input with label, validation, and optional features.\n *\n * Must be rendered inside an `AppField` context from `useTanStackForm`.\n * The field value type is `string | null` — `null` represents an empty/unset state.\n *\n * ---\n *\n * **Basic usage**\n * @example\n * const { AppField } = useTanStackForm({ defaultValues: { name: null } });\n *\n * <AppField name=\"name\">\n *   {field => <field.TextField label=\"Full name\" placeholder=\"Nguyễn Văn A\" />}\n * </AppField>\n *\n * ---\n *\n * **With validation**\n * @example\n * <AppField\n *   name=\"username\"\n *   validators={{ onChange: ({ value }) => !value ? 'Bắt buộc' : undefined }}\n * >\n *   {field => <field.TextField label=\"Username\" required />}\n * </AppField>\n *\n * ---\n *\n * **With character counter and max length**\n * @example\n * <AppField name=\"bio\">\n *   {field => (\n *     <field.TextField\n *       label=\"Bio\"\n *       counter\n *       maxLength={160}\n *       placeholder=\"Giới thiệu bản thân…\"\n *     />\n *   )}\n * </AppField>\n *\n * ---\n *\n * **With clear button and helper note**\n * @example\n * <AppField name=\"search\">\n *   {field => (\n *     <field.TextField\n *       label=\"Tìm kiếm\"\n *       showClearButton\n *       helperText=\"Nhập ít nhất 3 ký tự để tìm kiếm.\"\n *     />\n *   )}\n * </AppField>\n *\n * ---\n *\n * **Horizontal layout**\n * @example\n * <AppField name=\"code\">\n *   {field => (\n *     <field.TextField\n *       label=\"Mã sản phẩm\"\n *       orientation=\"horizontal\"\n *       tooltip=\"Mã duy nhất định danh sản phẩm trong hệ thống.\"\n *     />\n *   )}\n * </AppField>\n */\nexport const TextField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showClearButton = false,\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = state.meta.errors.length > 0;\n    const _showClearButton = showClearButton && !isDisabled && !!state.value;\n\n    // Counter values are only computed when the feature is active\n    const _count = counter ? (state.value?.length ?? 0) : 0;\n    const _isNearLimit = counter && !!maxLength && _count >= maxLength * COUNTER_WARNING_THRESHOLD;\n    const _isAtLimit = counter && !!maxLength && _count >= maxLength;\n    const _countText = counter ? (maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`) : null;\n\n    // Skip the bottom row entirely when neither error nor counter will render\n    const _showBottomRow = counter || (_touched && showErrorMessage && _hasErrors);\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n      ({ target: { value } }) => {\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [counter, maxLength, handleChange]\n    );\n\n    const onClear = useCallback(() => {\n      handleChange(null);\n      inputRef.current?.focus();\n    }, [handleChange]);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            {description && <FieldDescription>{description}</FieldDescription>}\n          </FieldContent>\n          <FieldContentMain>\n            <Input\n              ref={inputRef}\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoComplete=\"off\"\n              placeholder={placeholder}\n              autoCapitalize=\"none\"\n              autoCorrect=\"off\"\n              disabled={isDisabled}\n              className={cn('pr-6', isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onBlur={handleBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n            />\n            {_showClearButton && (\n              <button\n                type=\"button\"\n                aria-label=\"Xóa\"\n                className=\"absolute inset-e-1 top-2.5 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            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={ADORNMENT_ICON_SIZE} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showClearButton && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon aria-hidden=\"true\" size={ADORNMENT_ICON_SIZE} />\n              </div>\n            )}\n            {_showBottomRow && (\n              <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n                {counter && (\n                  <p\n                    className={cn(\n                      'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n                      _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n                    )}\n                  >\n                    {_countText}\n                  </p>\n                )}\n              </div>\n            )}\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextField.displayName = 'TextField';\n"],"mappings":"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"}

package/dist/text-field-Cwu0xuXt.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-CX3lC3mC.cjs"),t=require("./ui/input.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=e=>{e.key===`Enter`&&e.preventDefault()},l=(0,i.memo)(({label:l,description:u,placeholder:d,tooltip:f,helperText:p,counter:m=!1,orientation:h=`responsive`,showClearButton:g=!1,showErrorMessage:_=!0,required:v=!1,disabled:y=!1,maxLength:b})=>{let x=(0,i.useId)(),S=(0,i.useId)(),C=(0,i.useRef)(null),{form:w,name:T,state:E,handleBlur:D,handleChange:O}=e.G(),k=(0,s.useStore)(w.store,({isSubmitting:e})=>e),A=y||k,j=E.meta.isDirty||E.meta.isTouched,M=j&&!E.meta.isValid,N=v&&E.value===null,P=E.meta.errors.length>0,F=g&&!A&&!!E.value,I=m?E.value?.length??0:0,L=m&&!!b&&I>=b*.8,R=m&&!!b&&I>=b,z=m?b?`${I} / ${b} ký tự`:`${I} ký tự`:null,B=m||j&&_&&P,V=(0,i.useCallback)(({target:{value:e}})=>{m&&b&&e.length>b||O(e||null)},[m,b,O]),H=(0,i.useCallback)(()=>{O(null),C.current?.focus()},[O]);return(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{orientation:h,"data-invalid":M,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{"aria-required":N,htmlFor:x,children:[l,f&&(0,o.jsx)(n.FieldTooltip,{tooltip:f})]}),u&&(0,o.jsx)(n.FieldDescription,{children:u})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Input,{ref:C,id:x,name:T,value:E.value??``,"aria-invalid":M,"aria-describedby":S,autoComplete:`off`,placeholder:d,autoCapitalize:`none`,autoCorrect:`off`,disabled:A,className:(0,a.cn)(`pr-6`,A&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:D,onChange:V,onKeyDown:c}),F&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-1 top-2.5 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:H,children:(0,o.jsx)(r.XIcon,{"aria-hidden":`true`})}),k&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:(0,o.jsx)(r.Loader2Icon,{size:14,className:`animate-spin text-primary-strong`})}),!F&&j&&_&&P&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:(0,o.jsx)(r.BanIcon,{"aria-hidden":`true`,size:14})}),B&&(0,o.jsxs)(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[j&&_?(0,o.jsx)(n.FieldError,{id:S,className:`flex-1`,errors:E.meta.errors}):(0,o.jsx)(`div`,{}),m&&(0,o.jsx)(`p`,{className:(0,a.cn)(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,R?`font-medium text-danger-strong`:L?`text-warning-strong`:`text-text-positive-weak`),children:z})]}),(0,o.jsx)(n.FieldNote,{isShow:!!p,children:p})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})});l.displayName=`TextField`,exports.TextField=l;
+//# sourceMappingURL=text-field-Cwu0xuXt.cjs.map

package/dist/text-field-Cwu0xuXt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-Cwu0xuXt.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","XIcon","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/text-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId, useRef } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '@/components/features/tanstack-form/components/ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { TextFieldProps as Props } from '../../types';\n\n/** Fraction of maxLength at which the counter turns warning color (80%). */\nconst COUNTER_WARNING_THRESHOLD = 0.8;\n\n/** Pixel size for inline adornment icons (error ban, loading spinner). */\nconst ADORNMENT_ICON_SIZE = 14;\n\n// Static handler — no closure deps, shared across all TextField instances\nconst onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = e => {\n  if (e.key === 'Enter') e.preventDefault();\n};\n\n/**\n * A TanStack Form-connected single-line text input with label, validation, and optional features.\n *\n * Must be rendered inside an `AppField` context from `useTanStackForm`.\n * The field value type is `string | null` — `null` represents an empty/unset state.\n *\n * ---\n *\n * **Basic usage**\n * @example\n * const { AppField } = useTanStackForm({ defaultValues: { name: null } });\n *\n * <AppField name=\"name\">\n *   {field => <field.TextField label=\"Full name\" placeholder=\"Nguyễn Văn A\" />}\n * </AppField>\n *\n * ---\n *\n * **With validation**\n * @example\n * <AppField\n *   name=\"username\"\n *   validators={{ onChange: ({ value }) => !value ? 'Bắt buộc' : undefined }}\n * >\n *   {field => <field.TextField label=\"Username\" required />}\n * </AppField>\n *\n * ---\n *\n * **With character counter and max length**\n * @example\n * <AppField name=\"bio\">\n *   {field => (\n *     <field.TextField\n *       label=\"Bio\"\n *       counter\n *       maxLength={160}\n *       placeholder=\"Giới thiệu bản thân…\"\n *     />\n *   )}\n * </AppField>\n *\n * ---\n *\n * **With clear button and helper note**\n * @example\n * <AppField name=\"search\">\n *   {field => (\n *     <field.TextField\n *       label=\"Tìm kiếm\"\n *       showClearButton\n *       helperText=\"Nhập ít nhất 3 ký tự để tìm kiếm.\"\n *     />\n *   )}\n * </AppField>\n *\n * ---\n *\n * **Horizontal layout**\n * @example\n * <AppField name=\"code\">\n *   {field => (\n *     <field.TextField\n *       label=\"Mã sản phẩm\"\n *       orientation=\"horizontal\"\n *       tooltip=\"Mã duy nhất định danh sản phẩm trong hệ thống.\"\n *     />\n *   )}\n * </AppField>\n */\nexport const TextField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showClearButton = false,\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = state.meta.errors.length > 0;\n    const _showClearButton = showClearButton && !isDisabled && !!state.value;\n\n    // Counter values are only computed when the feature is active\n    const _count = counter ? (state.value?.length ?? 0) : 0;\n    const _isNearLimit = counter && !!maxLength && _count >= maxLength * COUNTER_WARNING_THRESHOLD;\n    const _isAtLimit = counter && !!maxLength && _count >= maxLength;\n    const _countText = counter ? (maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`) : null;\n\n    // Skip the bottom row entirely when neither error nor counter will render\n    const _showBottomRow = counter || (_touched && showErrorMessage && _hasErrors);\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n      ({ target: { value } }) => {\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [counter, maxLength, handleChange]\n    );\n\n    const onClear = useCallback(() => {\n      handleChange(null);\n      inputRef.current?.focus();\n    }, [handleChange]);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            {description && <FieldDescription>{description}</FieldDescription>}\n          </FieldContent>\n          <FieldContentMain>\n            <Input\n              ref={inputRef}\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoComplete=\"off\"\n              placeholder={placeholder}\n              autoCapitalize=\"none\"\n              autoCorrect=\"off\"\n              disabled={isDisabled}\n              className={cn('pr-6', isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onBlur={handleBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n            />\n            {_showClearButton && (\n              <button\n                type=\"button\"\n                aria-label=\"Xóa\"\n                className=\"absolute inset-e-1 top-2.5 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            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={ADORNMENT_ICON_SIZE} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showClearButton && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon aria-hidden=\"true\" size={ADORNMENT_ICON_SIZE} />\n              </div>\n            )}\n            {_showBottomRow && (\n              <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n                {counter && (\n                  <p\n                    className={cn(\n                      'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n                      _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n                    )}\n                  >\n                    {_countText}\n                  </p>\n                )}\n              </div>\n            )}\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextField.displayName = 'TextField';\n"],"mappings":"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"}

package/dist/{textarea-field-BoQtVUI-.mjs → textarea-field-Ctj5o5my.mjs}

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-DJMaMeUh.mjs";import{Textarea as t}from"./ui/textarea.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-BKyUqvzh.mjs";import{BanIcon as f,CheckIcon as p,CopyIcon as ee,Loader2Icon as m}from"lucide-react";import{memo as h,useCallback as g,useEffect as _,useId as v,useMemo as y,useRef as b,useState as x}from"react";import{cn as S}from"@customafk/react-toolkit/utils";import{jsx as C,jsxs as w}from"react/jsx-runtime";import{useStore as T}from"@tanstack/react-form";const E=h(({label:h,description:E,placeholder:te,tooltip:D,helperText:O,counter:k=!1,orientation:A=`responsive`,showErrorMessage:j=!0,required:M=!1,disabled:N=!1,maxLength:P})=>{let F=v(),I=v(),[L,R]=x(!1),z=b(null),{form:B,state:V,name:H,handleBlur:U,handleChange:W}=e(),G=T(B.store,({isSubmitting:e})=>e),K=N||G,q=V.value?.length??0,J=y(()=>k?P?`${q} / ${P} ký tự`:`${q} ký tự`:``,[q,k,P]),Y=!!P&&q>=P*.8,X=!!P&&q>=P,Z=V.meta.isDirty||V.meta.isTouched,Q=Z&&!V.meta.isValid,ne=M&&V.value===null,re=!!V.meta.errors.length,$=!!V.value&&!K,ie=y(()=>S(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,X?`font-medium text-danger-strong`:Y?`text-warning-strong`:`text-text-positive-weak`),[X,Y]),ae=g(({target:{value:e}})=>{K||k&&P&&e.length>P||W(e||null)},[K,k,P,W]),oe=g(async()=>{V.value&&(await navigator.clipboard.writeText(V.value),z.current!==null&&window.clearTimeout(z.current),R(!0),z.current=window.setTimeout(()=>R(!1),1500))},[V.value]);return _(()=>()=>{z.current!==null&&window.clearTimeout(z.current)},[]),w(s,{className:`gap-y-4 px-4`,children:[w(n,{orientation:A,"data-invalid":Q,children:[w(r,{children:[w(c,{"aria-required":ne,htmlFor:F,children:[h,D&&C(d,{tooltip:D})]}),C(a,{children:E})]}),w(i,{children:[C(t,{id:F,name:H,value:V.value??``,"aria-invalid":Q,"aria-describedby":I,autoCapitalize:`none`,autoComplete:`off`,autoCorrect:`off`,placeholder:te,disabled:K,className:S(K&&`pointer-events-none bg-muted-muted opacity-60`),onChange:ae,onBlur:U}),$&&C(`button`,{type:`button`,"aria-label":`Sao chép`,className:`absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:oe,children:L?C(p,{"aria-hidden":`true`,className:`text-success-strong`}):C(ee,{"aria-hidden":`true`,className:`text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong`})}),G&&C(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:C(m,{size:14,className:`animate-spin text-primary-strong`})}),!$&&Z&&j&&re&&C(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:C(f,{size:14})}),w(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[Z&&j?C(o,{id:I,className:`flex-1`,errors:V.meta.errors}):C(`div`,{}),!!k&&C(`p`,{className:ie,children:J})]}),C(l,{isShow:!!O,children:O})]})]}),C(u,{})]})});E.displayName=`TextareaField`;export{E as TextareaField};
-//# sourceMappingURL=textarea-field-BoQtVUI-.mjs.map
+import{G as e}from"./tanstack-form-CKAWexet.mjs";import{Textarea as t}from"./ui/textarea.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-V2DoD8qL.mjs";import{BanIcon as f,CheckIcon as p,CopyIcon as ee,Loader2Icon as m}from"lucide-react";import{memo as h,useCallback as g,useEffect as _,useId as v,useMemo as y,useRef as b,useState as x}from"react";import{cn as S}from"@customafk/react-toolkit/utils";import{jsx as C,jsxs as w}from"react/jsx-runtime";import{useStore as T}from"@tanstack/react-form";const E=h(({label:h,description:E,placeholder:te,tooltip:D,helperText:O,counter:k=!1,orientation:A=`responsive`,showErrorMessage:j=!0,required:M=!1,disabled:N=!1,maxLength:P})=>{let F=v(),I=v(),[L,R]=x(!1),z=b(null),{form:B,state:V,name:H,handleBlur:U,handleChange:W}=e(),G=T(B.store,({isSubmitting:e})=>e),K=N||G,q=V.value?.length??0,J=y(()=>k?P?`${q} / ${P} ký tự`:`${q} ký tự`:``,[q,k,P]),Y=!!P&&q>=P*.8,X=!!P&&q>=P,Z=V.meta.isDirty||V.meta.isTouched,Q=Z&&!V.meta.isValid,ne=M&&V.value===null,re=!!V.meta.errors.length,$=!!V.value&&!K,ie=y(()=>S(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,X?`font-medium text-danger-strong`:Y?`text-warning-strong`:`text-text-positive-weak`),[X,Y]),ae=g(({target:{value:e}})=>{K||k&&P&&e.length>P||W(e||null)},[K,k,P,W]),oe=g(async()=>{V.value&&(await navigator.clipboard.writeText(V.value),z.current!==null&&window.clearTimeout(z.current),R(!0),z.current=window.setTimeout(()=>R(!1),1500))},[V.value]);return _(()=>()=>{z.current!==null&&window.clearTimeout(z.current)},[]),w(s,{className:`gap-y-4 px-4`,children:[w(n,{orientation:A,"data-invalid":Q,children:[w(r,{children:[w(c,{"aria-required":ne,htmlFor:F,children:[h,D&&C(d,{tooltip:D})]}),C(a,{children:E})]}),w(i,{children:[C(t,{id:F,name:H,value:V.value??``,"aria-invalid":Q,"aria-describedby":I,autoCapitalize:`none`,autoComplete:`off`,autoCorrect:`off`,placeholder:te,disabled:K,className:S(K&&`pointer-events-none bg-muted-muted opacity-60`),onChange:ae,onBlur:U}),$&&C(`button`,{type:`button`,"aria-label":`Sao chép`,className:`absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:oe,children:L?C(p,{"aria-hidden":`true`,className:`text-success-strong`}):C(ee,{"aria-hidden":`true`,className:`text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong`})}),G&&C(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:C(m,{size:14,className:`animate-spin text-primary-strong`})}),!$&&Z&&j&&re&&C(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:C(f,{size:14})}),w(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[Z&&j?C(o,{id:I,className:`flex-1`,errors:V.meta.errors}):C(`div`,{}),!!k&&C(`p`,{className:ie,children:J})]}),C(l,{isShow:!!O,children:O})]})]}),C(u,{})]})});E.displayName=`TextareaField`;export{E as TextareaField};
+//# sourceMappingURL=textarea-field-Ctj5o5my.mjs.map

package/dist/{textarea-field-BoQtVUI-.mjs.map → textarea-field-Ctj5o5my.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-field-BoQtVUI-.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, CheckIcon, CopyIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Textarea } from '@/components/ui/textarea';\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 { TextareaFieldProps as Props } from '../../types';\n\nexport const TextareaField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const [copied, setCopied] = useState(false);\n    const copyTimeoutRef = useRef<number | null>(null);\n\n    const { form, state, name, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _count = state.value?.length ?? 0;\n\n    const _countText = useMemo(() => {\n      if (!counter) return '';\n      return maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`;\n    }, [_count, counter, maxLength]);\n\n    const _isNearLimit = !!maxLength && _count >= maxLength * 0.8;\n    const _isAtLimit = !!maxLength && _count >= maxLength;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = !!state.meta.errors.length;\n    const _showCopy = !!state.value && !isDisabled;\n\n    const _counterClass = useMemo(\n      () =>\n        cn(\n          'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n          _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n        ),\n      [_isAtLimit, _isNearLimit]\n    );\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n      ({ target: { value } }) => {\n        if (isDisabled) return;\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [isDisabled, counter, maxLength, handleChange]\n    );\n\n    const onCopy = useCallback(async () => {\n      if (!state.value) return;\n      await navigator.clipboard.writeText(state.value);\n      if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      setCopied(true);\n      copyTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500);\n    }, [state.value]);\n\n    useEffect(() => {\n      return () => {\n        if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n          <FieldContentMain>\n            <Textarea\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoCapitalize=\"none\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              placeholder={placeholder}\n              disabled={isDisabled}\n              className={cn(isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onChange={onChange}\n              onBlur={handleBlur}\n            />\n            {_showCopy && (\n              <button\n                type=\"button\"\n                aria-label=\"Sao chép\"\n                className=\"absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                onClick={onCopy}\n              >\n                {copied ? (\n                  <CheckIcon aria-hidden=\"true\" className=\"text-success-strong\" />\n                ) : (\n                  <CopyIcon\n                    aria-hidden=\"true\"\n                    className=\"text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong\"\n                  />\n                )}\n              </button>\n            )}\n            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={14} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showCopy && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon size={14} />\n              </div>\n            )}\n            <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n              {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n              {!!counter && <p className={_counterClass}>{_countText}</p>}\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextareaField.displayName = 'TextareaField';\n"],"mappings":"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"}
+{"version":3,"file":"textarea-field-Ctj5o5my.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, CheckIcon, CopyIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Textarea } from '@/components/ui/textarea';\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 { TextareaFieldProps as Props } from '../../types';\n\nexport const TextareaField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const [copied, setCopied] = useState(false);\n    const copyTimeoutRef = useRef<number | null>(null);\n\n    const { form, state, name, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _count = state.value?.length ?? 0;\n\n    const _countText = useMemo(() => {\n      if (!counter) return '';\n      return maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`;\n    }, [_count, counter, maxLength]);\n\n    const _isNearLimit = !!maxLength && _count >= maxLength * 0.8;\n    const _isAtLimit = !!maxLength && _count >= maxLength;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = !!state.meta.errors.length;\n    const _showCopy = !!state.value && !isDisabled;\n\n    const _counterClass = useMemo(\n      () =>\n        cn(\n          'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n          _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n        ),\n      [_isAtLimit, _isNearLimit]\n    );\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n      ({ target: { value } }) => {\n        if (isDisabled) return;\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [isDisabled, counter, maxLength, handleChange]\n    );\n\n    const onCopy = useCallback(async () => {\n      if (!state.value) return;\n      await navigator.clipboard.writeText(state.value);\n      if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      setCopied(true);\n      copyTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500);\n    }, [state.value]);\n\n    useEffect(() => {\n      return () => {\n        if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n          <FieldContentMain>\n            <Textarea\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoCapitalize=\"none\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              placeholder={placeholder}\n              disabled={isDisabled}\n              className={cn(isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onChange={onChange}\n              onBlur={handleBlur}\n            />\n            {_showCopy && (\n              <button\n                type=\"button\"\n                aria-label=\"Sao chép\"\n                className=\"absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                onClick={onCopy}\n              >\n                {copied ? (\n                  <CheckIcon aria-hidden=\"true\" className=\"text-success-strong\" />\n                ) : (\n                  <CopyIcon\n                    aria-hidden=\"true\"\n                    className=\"text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong\"\n                  />\n                )}\n              </button>\n            )}\n            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={14} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showCopy && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon size={14} />\n              </div>\n            )}\n            <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n              {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n              {!!counter && <p className={_counterClass}>{_countText}</p>}\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextareaField.displayName = 'TextareaField';\n"],"mappings":"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"}

package/dist/{textarea-field-IZUGVQjJ.cjs → textarea-field-jOqHJcAL.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-BC61U3F-.cjs"),t=require("./ui/textarea.cjs"),n=require("./field-BV5twmKA.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=(0,i.memo)(({label:c,description:l,placeholder:u,tooltip:d,helperText:f,counter:p=!1,orientation:m=`responsive`,showErrorMessage:h=!0,required:g=!1,disabled:_=!1,maxLength:v})=>{let y=(0,i.useId)(),b=(0,i.useId)(),[x,S]=(0,i.useState)(!1),C=(0,i.useRef)(null),{form:w,state:T,name:E,handleBlur:D,handleChange:O}=e.G(),k=(0,s.useStore)(w.store,({isSubmitting:e})=>e),A=_||k,j=T.value?.length??0,M=(0,i.useMemo)(()=>p?v?`${j} / ${v} ký tự`:`${j} ký tự`:``,[j,p,v]),N=!!v&&j>=v*.8,P=!!v&&j>=v,F=T.meta.isDirty||T.meta.isTouched,I=F&&!T.meta.isValid,L=g&&T.value===null,R=!!T.meta.errors.length,z=!!T.value&&!A,B=(0,i.useMemo)(()=>(0,a.cn)(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,P?`font-medium text-danger-strong`:N?`text-warning-strong`:`text-text-positive-weak`),[P,N]),V=(0,i.useCallback)(({target:{value:e}})=>{A||p&&v&&e.length>v||O(e||null)},[A,p,v,O]),H=(0,i.useCallback)(async()=>{T.value&&(await navigator.clipboard.writeText(T.value),C.current!==null&&window.clearTimeout(C.current),S(!0),C.current=window.setTimeout(()=>S(!1),1500))},[T.value]);return(0,i.useEffect)(()=>()=>{C.current!==null&&window.clearTimeout(C.current)},[]),(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{orientation:m,"data-invalid":I,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{"aria-required":L,htmlFor:y,children:[c,d&&(0,o.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(n.FieldDescription,{children:l})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Textarea,{id:y,name:E,value:T.value??``,"aria-invalid":I,"aria-describedby":b,autoCapitalize:`none`,autoComplete:`off`,autoCorrect:`off`,placeholder:u,disabled:A,className:(0,a.cn)(A&&`pointer-events-none bg-muted-muted opacity-60`),onChange:V,onBlur:D}),z&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Sao chép`,className:`absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:H,children:x?(0,o.jsx)(r.CheckIcon,{"aria-hidden":`true`,className:`text-success-strong`}):(0,o.jsx)(r.CopyIcon,{"aria-hidden":`true`,className:`text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong`})}),k&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:(0,o.jsx)(r.Loader2Icon,{size:14,className:`animate-spin text-primary-strong`})}),!z&&F&&h&&R&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:(0,o.jsx)(r.BanIcon,{size:14})}),(0,o.jsxs)(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[F&&h?(0,o.jsx)(n.FieldError,{id:b,className:`flex-1`,errors:T.meta.errors}):(0,o.jsx)(`div`,{}),!!p&&(0,o.jsx)(`p`,{className:B,children:M})]}),(0,o.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})});c.displayName=`TextareaField`,exports.TextareaField=c;
-//# sourceMappingURL=textarea-field-IZUGVQjJ.cjs.map
+const e=require("./tanstack-form-CX3lC3mC.cjs"),t=require("./ui/textarea.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=(0,i.memo)(({label:c,description:l,placeholder:u,tooltip:d,helperText:f,counter:p=!1,orientation:m=`responsive`,showErrorMessage:h=!0,required:g=!1,disabled:_=!1,maxLength:v})=>{let y=(0,i.useId)(),b=(0,i.useId)(),[x,S]=(0,i.useState)(!1),C=(0,i.useRef)(null),{form:w,state:T,name:E,handleBlur:D,handleChange:O}=e.G(),k=(0,s.useStore)(w.store,({isSubmitting:e})=>e),A=_||k,j=T.value?.length??0,M=(0,i.useMemo)(()=>p?v?`${j} / ${v} ký tự`:`${j} ký tự`:``,[j,p,v]),N=!!v&&j>=v*.8,P=!!v&&j>=v,F=T.meta.isDirty||T.meta.isTouched,I=F&&!T.meta.isValid,L=g&&T.value===null,R=!!T.meta.errors.length,z=!!T.value&&!A,B=(0,i.useMemo)(()=>(0,a.cn)(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,P?`font-medium text-danger-strong`:N?`text-warning-strong`:`text-text-positive-weak`),[P,N]),V=(0,i.useCallback)(({target:{value:e}})=>{A||p&&v&&e.length>v||O(e||null)},[A,p,v,O]),H=(0,i.useCallback)(async()=>{T.value&&(await navigator.clipboard.writeText(T.value),C.current!==null&&window.clearTimeout(C.current),S(!0),C.current=window.setTimeout(()=>S(!1),1500))},[T.value]);return(0,i.useEffect)(()=>()=>{C.current!==null&&window.clearTimeout(C.current)},[]),(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{orientation:m,"data-invalid":I,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{"aria-required":L,htmlFor:y,children:[c,d&&(0,o.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(n.FieldDescription,{children:l})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Textarea,{id:y,name:E,value:T.value??``,"aria-invalid":I,"aria-describedby":b,autoCapitalize:`none`,autoComplete:`off`,autoCorrect:`off`,placeholder:u,disabled:A,className:(0,a.cn)(A&&`pointer-events-none bg-muted-muted opacity-60`),onChange:V,onBlur:D}),z&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Sao chép`,className:`absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:H,children:x?(0,o.jsx)(r.CheckIcon,{"aria-hidden":`true`,className:`text-success-strong`}):(0,o.jsx)(r.CopyIcon,{"aria-hidden":`true`,className:`text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong`})}),k&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:(0,o.jsx)(r.Loader2Icon,{size:14,className:`animate-spin text-primary-strong`})}),!z&&F&&h&&R&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:(0,o.jsx)(r.BanIcon,{size:14})}),(0,o.jsxs)(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[F&&h?(0,o.jsx)(n.FieldError,{id:b,className:`flex-1`,errors:T.meta.errors}):(0,o.jsx)(`div`,{}),!!p&&(0,o.jsx)(`p`,{className:B,children:M})]}),(0,o.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})});c.displayName=`TextareaField`,exports.TextareaField=c;
+//# sourceMappingURL=textarea-field-jOqHJcAL.cjs.map

package/dist/{textarea-field-IZUGVQjJ.cjs.map → textarea-field-jOqHJcAL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-field-IZUGVQjJ.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Textarea","CheckIcon","CopyIcon","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, CheckIcon, CopyIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Textarea } from '@/components/ui/textarea';\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 { TextareaFieldProps as Props } from '../../types';\n\nexport const TextareaField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const [copied, setCopied] = useState(false);\n    const copyTimeoutRef = useRef<number | null>(null);\n\n    const { form, state, name, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _count = state.value?.length ?? 0;\n\n    const _countText = useMemo(() => {\n      if (!counter) return '';\n      return maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`;\n    }, [_count, counter, maxLength]);\n\n    const _isNearLimit = !!maxLength && _count >= maxLength * 0.8;\n    const _isAtLimit = !!maxLength && _count >= maxLength;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = !!state.meta.errors.length;\n    const _showCopy = !!state.value && !isDisabled;\n\n    const _counterClass = useMemo(\n      () =>\n        cn(\n          'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n          _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n        ),\n      [_isAtLimit, _isNearLimit]\n    );\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n      ({ target: { value } }) => {\n        if (isDisabled) return;\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [isDisabled, counter, maxLength, handleChange]\n    );\n\n    const onCopy = useCallback(async () => {\n      if (!state.value) return;\n      await navigator.clipboard.writeText(state.value);\n      if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      setCopied(true);\n      copyTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500);\n    }, [state.value]);\n\n    useEffect(() => {\n      return () => {\n        if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n          <FieldContentMain>\n            <Textarea\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoCapitalize=\"none\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              placeholder={placeholder}\n              disabled={isDisabled}\n              className={cn(isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onChange={onChange}\n              onBlur={handleBlur}\n            />\n            {_showCopy && (\n              <button\n                type=\"button\"\n                aria-label=\"Sao chép\"\n                className=\"absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                onClick={onCopy}\n              >\n                {copied ? (\n                  <CheckIcon aria-hidden=\"true\" className=\"text-success-strong\" />\n                ) : (\n                  <CopyIcon\n                    aria-hidden=\"true\"\n                    className=\"text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong\"\n                  />\n                )}\n              </button>\n            )}\n            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={14} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showCopy && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon size={14} />\n              </div>\n            )}\n            <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n              {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n              {!!counter && <p className={_counterClass}>{_countText}</p>}\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextareaField.displayName = 'TextareaField';\n"],"mappings":"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"}
+{"version":3,"file":"textarea-field-jOqHJcAL.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Textarea","CheckIcon","CopyIcon","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, CheckIcon, CopyIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Textarea } from '@/components/ui/textarea';\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 { TextareaFieldProps as Props } from '../../types';\n\nexport const TextareaField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const [copied, setCopied] = useState(false);\n    const copyTimeoutRef = useRef<number | null>(null);\n\n    const { form, state, name, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _count = state.value?.length ?? 0;\n\n    const _countText = useMemo(() => {\n      if (!counter) return '';\n      return maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`;\n    }, [_count, counter, maxLength]);\n\n    const _isNearLimit = !!maxLength && _count >= maxLength * 0.8;\n    const _isAtLimit = !!maxLength && _count >= maxLength;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = !!state.meta.errors.length;\n    const _showCopy = !!state.value && !isDisabled;\n\n    const _counterClass = useMemo(\n      () =>\n        cn(\n          'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n          _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n        ),\n      [_isAtLimit, _isNearLimit]\n    );\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n      ({ target: { value } }) => {\n        if (isDisabled) return;\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [isDisabled, counter, maxLength, handleChange]\n    );\n\n    const onCopy = useCallback(async () => {\n      if (!state.value) return;\n      await navigator.clipboard.writeText(state.value);\n      if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      setCopied(true);\n      copyTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500);\n    }, [state.value]);\n\n    useEffect(() => {\n      return () => {\n        if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n          <FieldContentMain>\n            <Textarea\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoCapitalize=\"none\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              placeholder={placeholder}\n              disabled={isDisabled}\n              className={cn(isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onChange={onChange}\n              onBlur={handleBlur}\n            />\n            {_showCopy && (\n              <button\n                type=\"button\"\n                aria-label=\"Sao chép\"\n                className=\"absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                onClick={onCopy}\n              >\n                {copied ? (\n                  <CheckIcon aria-hidden=\"true\" className=\"text-success-strong\" />\n                ) : (\n                  <CopyIcon\n                    aria-hidden=\"true\"\n                    className=\"text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong\"\n                  />\n                )}\n              </button>\n            )}\n            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={14} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showCopy && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon size={14} />\n              </div>\n            )}\n            <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n              {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n              {!!counter && <p className={_counterClass}>{_countText}</p>}\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextareaField.displayName = 'TextareaField';\n"],"mappings":"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"}

package/dist/{title-field-CKxwzMOM.cjs → title-field-B2hM3S_S.cjs}

@@ -1,2 +1,2 @@
-const e=require("./field-BV5twmKA.cjs");let t=require("react/jsx-runtime");const n=({title:n,description:r,helperText:i})=>(0,t.jsxs)(e.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,t.jsxs)(e.Field,{className:`gap-0`,children:[(0,t.jsxs)(e.FieldContent,{children:[(0,t.jsx)(e.FieldLegend,{className:`mb-1`,children:n}),(0,t.jsx)(e.FieldDescription,{children:r})]}),(0,t.jsx)(e.FieldNote,{isShow:!!i,children:i})]}),(0,t.jsx)(e.FieldSeparator,{})]});exports.TanStackTitleField=n;
-//# sourceMappingURL=title-field-CKxwzMOM.cjs.map
+const e=require("./field-BSLi-P0Q.cjs");let t=require("react/jsx-runtime");const n=({title:n,description:r,helperText:i})=>(0,t.jsxs)(e.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,t.jsxs)(e.Field,{className:`gap-0`,children:[(0,t.jsxs)(e.FieldContent,{children:[(0,t.jsx)(e.FieldLegend,{className:`mb-1`,children:n}),(0,t.jsx)(e.FieldDescription,{children:r})]}),(0,t.jsx)(e.FieldNote,{isShow:!!i,children:i})]}),(0,t.jsx)(e.FieldSeparator,{})]});exports.TanStackTitleField=n;
+//# sourceMappingURL=title-field-B2hM3S_S.cjs.map

package/dist/{title-field-CKxwzMOM.cjs.map → title-field-B2hM3S_S.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"title-field-CKxwzMOM.cjs","names":["FieldGroup","Field","FieldContent","FieldLegend","FieldDescription","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/forms/title-field.tsx"],"sourcesContent":["import { Field, FieldContent, FieldDescription, FieldGroup, FieldLegend, FieldNote, FieldSeparator } from '../ui/field';\n\n/**\n * Renders a standalone section title with an optional description and helper note, followed by a separator.\n *\n * @example\n * import { TanStackTitleField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackTitleField\n *   title=\"Billing Address\"\n *   description=\"Provide the address associated with your payment method.\"\n *   helperText=\"Must match your bank records.\"\n * />\n */\nexport const TanStackTitleField: React.FC<{\n  /** The heading text rendered as a legend element. */\n  title: string;\n  /** Optional supplementary text displayed beneath the title. */\n  description?: string;\n  /** Optional helper note shown below the description area. */\n  helperText?: string;\n}> = ({ title, description, helperText }) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field className=\"gap-0\">\n        <FieldContent>\n          <FieldLegend className=\"mb-1\">{title}</FieldLegend>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2EAcA,MAAa,GAOP,CAAE,QAAO,cAAa,iBAExB,EAAA,EAAA,KAAA,CAACA,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,UAAU,iBAAjB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,gBAAQ,CAAmB,CAAA,GAClD,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP"}
+{"version":3,"file":"title-field-B2hM3S_S.cjs","names":["FieldGroup","Field","FieldContent","FieldLegend","FieldDescription","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/forms/title-field.tsx"],"sourcesContent":["import { Field, FieldContent, FieldDescription, FieldGroup, FieldLegend, FieldNote, FieldSeparator } from '../ui/field';\n\n/**\n * Renders a standalone section title with an optional description and helper note, followed by a separator.\n *\n * @example\n * import { TanStackTitleField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackTitleField\n *   title=\"Billing Address\"\n *   description=\"Provide the address associated with your payment method.\"\n *   helperText=\"Must match your bank records.\"\n * />\n */\nexport const TanStackTitleField: React.FC<{\n  /** The heading text rendered as a legend element. */\n  title: string;\n  /** Optional supplementary text displayed beneath the title. */\n  description?: string;\n  /** Optional helper note shown below the description area. */\n  helperText?: string;\n}> = ({ title, description, helperText }) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field className=\"gap-0\">\n        <FieldContent>\n          <FieldLegend className=\"mb-1\">{title}</FieldLegend>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2EAcA,MAAa,GAOP,CAAE,QAAO,cAAa,iBAExB,EAAA,EAAA,KAAA,CAACA,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,UAAU,iBAAjB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,gBAAQ,CAAmB,CAAA,GAClD,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP"}

package/dist/{title-field-84EnHPvl.mjs → title-field-oAqHRw59.mjs}

@@ -1,2 +1,2 @@
-import{Field as e,FieldContent as t,FieldDescription as n,FieldGroup as r,FieldLegend as i,FieldNote as a,FieldSeparator as o}from"./field-BKyUqvzh.mjs";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({title:l,description:u,helperText:d})=>c(r,{className:`gap-y-4 px-4`,children:[c(e,{className:`gap-0`,children:[c(t,{children:[s(i,{className:`mb-1`,children:l}),s(n,{children:u})]}),s(a,{isShow:!!d,children:d})]}),s(o,{})]});export{l as TanStackTitleField};
-//# sourceMappingURL=title-field-84EnHPvl.mjs.map
+import{Field as e,FieldContent as t,FieldDescription as n,FieldGroup as r,FieldLegend as i,FieldNote as a,FieldSeparator as o}from"./field-V2DoD8qL.mjs";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({title:l,description:u,helperText:d})=>c(r,{className:`gap-y-4 px-4`,children:[c(e,{className:`gap-0`,children:[c(t,{children:[s(i,{className:`mb-1`,children:l}),s(n,{children:u})]}),s(a,{isShow:!!d,children:d})]}),s(o,{})]});export{l as TanStackTitleField};
+//# sourceMappingURL=title-field-oAqHRw59.mjs.map

package/dist/{title-field-84EnHPvl.mjs.map → title-field-oAqHRw59.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"title-field-84EnHPvl.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/title-field.tsx"],"sourcesContent":["import { Field, FieldContent, FieldDescription, FieldGroup, FieldLegend, FieldNote, FieldSeparator } from '../ui/field';\n\n/**\n * Renders a standalone section title with an optional description and helper note, followed by a separator.\n *\n * @example\n * import { TanStackTitleField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackTitleField\n *   title=\"Billing Address\"\n *   description=\"Provide the address associated with your payment method.\"\n *   helperText=\"Must match your bank records.\"\n * />\n */\nexport const TanStackTitleField: React.FC<{\n  /** The heading text rendered as a legend element. */\n  title: string;\n  /** Optional supplementary text displayed beneath the title. */\n  description?: string;\n  /** Optional helper note shown below the description area. */\n  helperText?: string;\n}> = ({ title, description, helperText }) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field className=\"gap-0\">\n        <FieldContent>\n          <FieldLegend className=\"mb-1\">{title}</FieldLegend>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2MAcA,MAAa,GAOP,CAAE,QAAO,cAAa,gBAExB,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,UAAU,iBAAjB,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAa,UAAU,gBAAQ,CAAmB,CAAA,EAClD,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,IACP,EAAC,EAAD,CAAiB,CAAA,CACP"}
+{"version":3,"file":"title-field-oAqHRw59.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/title-field.tsx"],"sourcesContent":["import { Field, FieldContent, FieldDescription, FieldGroup, FieldLegend, FieldNote, FieldSeparator } from '../ui/field';\n\n/**\n * Renders a standalone section title with an optional description and helper note, followed by a separator.\n *\n * @example\n * import { TanStackTitleField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackTitleField\n *   title=\"Billing Address\"\n *   description=\"Provide the address associated with your payment method.\"\n *   helperText=\"Must match your bank records.\"\n * />\n */\nexport const TanStackTitleField: React.FC<{\n  /** The heading text rendered as a legend element. */\n  title: string;\n  /** Optional supplementary text displayed beneath the title. */\n  description?: string;\n  /** Optional helper note shown below the description area. */\n  helperText?: string;\n}> = ({ title, description, helperText }) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field className=\"gap-0\">\n        <FieldContent>\n          <FieldLegend className=\"mb-1\">{title}</FieldLegend>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2MAcA,MAAa,GAOP,CAAE,QAAO,cAAa,gBAExB,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,UAAU,iBAAjB,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAa,UAAU,gBAAQ,CAAmB,CAAA,EAClD,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,IACP,EAAC,EAAD,CAAiB,CAAA,CACP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.2.69",
+  "version": "0.2.71",
   "description": "UI library for Lunas Enterprise",
   "type": "module",
   "author": {

package/dist/combobox-field-CAN8g_xv.mjs

@@ -1,2 +0,0 @@
-import{Button as e}from"./ui/button.mjs";import{Dialog as t,DialogClose as n,DialogOverlay as ee,DialogPortal as te}from"./ui/dialog.mjs";import{Command as r,CommandEmpty as i,CommandGroup as a,CommandInput as o,CommandItem as s,CommandList as ne}from"./ui/command.mjs";import{G as re}from"./tanstack-form-DJMaMeUh.mjs";import{Popover as ie,PopoverContent as c,PopoverTrigger as l}from"./ui/popover.mjs";import{Field as u,FieldContent as d,FieldContentMain as f,FieldDescription as p,FieldError as m,FieldGroup as h,FieldLabel as g,FieldNote as ae,FieldSeparator as oe,FieldTooltip as se}from"./field-BKyUqvzh.mjs";import{XIcon as _}from"lucide-react";import{memo as v,useId as y,useState as b}from"react";import{cn as x}from"@customafk/react-toolkit/utils";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";import{Dialog as T}from"radix-ui";import{useIsMobile as E}from"@customafk/react-toolkit/hooks/useMobile";import{useStore as D}from"@tanstack/react-form";const O=v(({label:v,description:O,placeholder:k,tooltip:A,helperText:j,orientation:M=`responsive`,options:N,required:P=!1,disabled:ce=!1,clearable:F=!1,showErrorMessage:I=!0,modal:L})=>{let R=y(),z=re(),B=E(),[V,H]=b(!1),[U,W]=b(!1),G=D(z.form.store,({isSubmitting:e})=>e),K=ce||G,q=z.state.meta.isDirty||z.state.meta.isTouched,J=q&&!z.state.meta.isValid,le=P&&z.state.value===null,Y=F&&!!z.state.value&&!K,X=N.find(({value:e})=>e===z.state.value)?.label,Z=()=>{z.handleChange(null),z.handleBlur()},Q=t=>C(e,{variant:`outline`,color:`muted`,size:`lg`,disabled:K,"aria-invalid":J?!0:void 0,"aria-describedby":R,className:x(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,Y&&`pr-8`,!z.state.value&&`text-text-positive-muted`,J&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:X?C(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:X}):C(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:k})}),$=e=>w(r,{className:`border-none`,children:[C(o,{placeholder:k??`Tìm kiếm…`}),w(ne,{children:[C(i,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),C(a,{className:`max-h-60 overflow-y-auto`,children:N.map(({value:t,label:n})=>C(s,{value:n,onSelect:()=>e(t),children:n},t))})]})]});return w(h,{className:`gap-y-4 px-4`,children:[w(u,{orientation:M,"data-invalid":J,children:[w(d,{children:[w(g,{"aria-required":le,htmlFor:z.name,children:[v,A&&C(se,{tooltip:A})]}),C(p,{children:O})]}),C(f,{className:`flex justify-end`,children:w(`div`,{className:`flex w-full flex-col`,children:[w(`div`,{className:`relative`,children:[B?w(S,{children:[Q(()=>H(!0)),C(t,{open:V,onOpenChange:e=>{H(e),e||z.handleBlur()},children:w(te,{children:[C(ee,{}),w(T.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:x(`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:[w(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[C(`span`,{className:`font-semibold text-sm text-text-positive`,children:v}),C(n,{asChild:!0,children:C(`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:C(_,{size:16})})})]}),w(`div`,{className:`flex flex-col overflow-y-auto`,children:[Y&&C(n,{asChild:!0,children:w(`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:Z,children:[C(_,{size:14}),`Xóa lựa chọn`]})}),$(e=>{z.handleChange(e),H(!1),z.handleBlur()})]}),C(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):w(ie,{open:U,modal:L,onOpenChange:e=>{W(e),e||z.handleBlur()},children:[C(l,{asChild:!0,children:Q()}),C(c,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:$(e=>{z.handleChange(e),W(!1),z.handleBlur()})})]}),Y&&C(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 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:Z,children:C(_,{"aria-hidden":`true`})})]}),q&&I&&C(m,{id:R,className:`mt-1`,errors:z.state.meta.errors}),C(ae,{isShow:!!j,children:j})]})})]}),C(oe,{})]})});O.displayName=`ComboboxField`;export{O as ComboboxField};
-//# sourceMappingURL=combobox-field-CAN8g_xv.mjs.map

package/dist/combobox-field-CAN8g_xv.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"combobox-field-CAN8g_xv.mjs","names":["Dialog","RadixDialog","Popover"],"sources":["../packages/components/features/tanstack-form/components/fields/combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\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 { ComboboxFieldProps } from '../../types';\n\nexport const ComboboxField = memo<ComboboxFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    options,\n    required = false,\n    disabled = false,\n    clearable = false,\n    showErrorMessage = true,\n    modal,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [popoverOpen, setPopoverOpen] = 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(({ value }) => value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    const triggerButton = (onClick?: () => void) => (\n      <Button\n        variant=\"outline\"\n        color=\"muted\"\n        size=\"lg\"\n        disabled={isDisabled}\n        aria-invalid={_invalid ? true : undefined}\n        aria-describedby={errorId}\n        className={cn(\n          'flex w-full items-center justify-start rounded outline-border',\n          'hover:bg-transparent',\n          'focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n          _showClear && 'pr-8',\n          !field.state.value && 'text-text-positive-muted',\n          _invalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n        )}\n        onClick={onClick}\n      >\n        {selectedLabel ? (\n          <p className=\"flex min-w-0 flex-1 items-center gap-2 truncate text-start\">{selectedLabel}</p>\n        ) : (\n          <p className=\"flex-1 text-start text-text-positive-muted\">{placeholder}</p>\n        )}\n      </Button>\n    );\n\n    const renderCommandList = (onSelect: (value: string) => void) => (\n      <Command className=\"border-none\">\n        <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n        <CommandList>\n          <CommandEmpty className=\"flex min-h-30 items-center justify-center text-sm text-text-positive-weak\">Không tìm thấy kết quả nào phù hợp.</CommandEmpty>\n          <CommandGroup className=\"max-h-60 overflow-y-auto\">\n            {options.map(({ value, label: optLabel }) => (\n              <CommandItem key={value} value={optLabel} onSelect={() => onSelect(value)}>\n                {optLabel}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={field.name}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex justify-end\">\n            <div className=\"flex w-full flex-col\">\n              <div className=\"relative\">\n                {isMobile ? (\n                  <>\n                    {triggerButton(() => setDialogOpen(true))}\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}</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                            {renderCommandList(value => {\n                              field.handleChange(value);\n                              setDialogOpen(false);\n                              field.handleBlur();\n                            })}\n                          </div>\n\n                          <div className=\"shrink-0 h-safe-bottom\" />\n                        </RadixDialog.Content>\n                      </DialogPortal>\n                    </Dialog>\n                  </>\n                ) : (\n                  <Popover\n                    open={popoverOpen}\n                    modal={modal}\n                    onOpenChange={open => {\n                      setPopoverOpen(open);\n                      if (!open) field.handleBlur();\n                    }}\n                  >\n                    <PopoverTrigger asChild>{triggerButton()}</PopoverTrigger>\n                    <PopoverContent align=\"end\" side=\"bottom\" className=\"flex w-fit rounded p-0\">\n                      {renderCommandList(value => {\n                        field.handleChange(value);\n                        setPopoverOpen(false);\n                        field.handleBlur();\n                      })}\n                    </PopoverContent>\n                  </Popover>\n                )}\n\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-2 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              {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n              <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n            </div>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nComboboxField.displayName = 'ComboboxField';\n"],"mappings":"+8BAkCA,MAAa,EAAgB,GAC1B,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,UACA,WAAW,GACX,YAAW,GACX,YAAY,GACZ,mBAAmB,GACnB,WACI,CACJ,IAAM,EAAU,EAAM,EAChB,EAAQ,GAAuC,EAC/C,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAC5C,CAAC,EAAa,GAAkB,EAAS,EAAK,EAE9C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,IAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,GAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,GAAa,CAAC,CAAC,EAAM,MAAM,OAAS,CAAC,EAElD,EAAgB,EAAQ,MAAM,CAAE,WAAY,IAAU,EAAM,MAAM,KAAK,CAAC,EAAE,MAE1E,MAAgB,CACpB,EAAM,aAAa,IAAI,EACvB,EAAM,WAAW,CACnB,EAEM,EAAiB,GACrB,EAAC,EAAD,CACE,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAAU,EACV,eAAc,EAAW,GAAO,IAAA,GAChC,mBAAkB,EAClB,UAAW,EACT,gEACA,uBACA,oHACA,+KACA,GAAc,OACd,CAAC,EAAM,MAAM,OAAS,2BACtB,GAAY,4DACd,EACS,mBAER,EACC,EAAC,IAAD,CAAG,UAAU,sEAA8D,CAAiB,CAAA,EAE5F,EAAC,IAAD,CAAG,UAAU,sDAA8C,CAAe,CAAA,CAEtE,CAAA,EAGJ,EAAqB,GACzB,EAAC,EAAD,CAAS,UAAU,uBAAnB,CACE,EAAC,EAAD,CAAc,YAAa,GAAe,WAAc,CAAA,EACxD,EAAC,GAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAc,UAAU,qFAA4E,qCAAiD,CAAA,EACrJ,EAAC,EAAD,CAAc,UAAU,oCACrB,EAAQ,KAAK,CAAE,QAAO,MAAO,KAC5B,EAAC,EAAD,CAAyB,MAAO,EAAU,aAAgB,EAAS,CAAK,WACrE,CACU,EAFK,CAEL,CACd,CACW,CAAA,CACH,CAAA,CAAA,CACN,IAGX,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAoB,cAAa,eAAc,WAA/C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,gBAAe,GAAU,QAAS,EAAM,cAApD,CACG,EACA,GAAW,EAAC,GAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EAEd,EAAC,EAAD,CAAkB,UAAU,4BAC1B,EAAC,MAAD,CAAK,UAAU,gCAAf,CACE,EAAC,MAAD,CAAK,UAAU,oBAAf,CACG,EACC,EAAA,EAAA,CAAA,SAAA,CACG,MAAoB,EAAc,EAAI,CAAC,EACxC,EAACA,EAAD,CACE,KAAM,EACN,aAAc,GAAQ,CACpB,EAAc,CAAI,EACb,GAAM,EAAM,WAAW,CAC9B,WAEA,EAAC,GAAD,CAAA,SAAA,CACE,EAAC,GAAD,CAAgB,CAAA,EAChB,EAACC,EAAY,QAAb,CACE,gBAAiB,GAAK,EAAE,eAAe,EACvC,UAAW,EACT,gCACA,yDACA,sDACA,kGACA,yGACA,cACF,WATF,CAWE,EAAC,MAAD,CAAK,UAAU,uFAAf,CACE,EAAC,OAAD,CAAM,UAAU,oDAA4C,CAAY,CAAA,EACxE,EAAC,EAAD,CAAa,QAAA,YACX,EAAC,SAAD,CACE,KAAK,SACL,aAAW,OACX,UAAU,sJAEV,EAAC,EAAD,CAAO,KAAM,EAAK,CAAA,CACZ,CAAA,CACG,CAAA,CACV,IAEL,EAAC,MAAD,CAAK,UAAU,yCAAf,CACG,GACC,EAAC,EAAD,CAAa,QAAA,YACX,EAAC,SAAD,CACE,KAAK,SACL,UAAU,8HACV,QAAS,WAHX,CAKE,EAAC,EAAD,CAAO,KAAM,EAAK,CAAA,EAAC,cAEb,GACG,CAAA,EAEd,EAAkB,GAAS,CAC1B,EAAM,aAAa,CAAK,EACxB,EAAc,EAAK,EACnB,EAAM,WAAW,CACnB,CAAC,CACE,IAEL,EAAC,MAAD,CAAK,UAAU,wBAA0B,CAAA,CACtB,GACT,CAAA,CAAA,CACR,CAAA,CACR,CAAA,CAAA,EAEF,EAACC,GAAD,CACE,KAAM,EACC,QACP,aAAc,GAAQ,CACpB,EAAe,CAAI,EACd,GAAM,EAAM,WAAW,CAC9B,WANF,CAQE,EAAC,EAAD,CAAgB,QAAA,YAAS,EAAc,CAAkB,CAAA,EACzD,EAAC,EAAD,CAAgB,MAAM,MAAM,KAAK,SAAS,UAAU,kCACjD,EAAkB,GAAS,CAC1B,EAAM,aAAa,CAAK,EACxB,EAAe,EAAK,EACpB,EAAM,WAAW,CACnB,CAAC,CACa,CAAA,CACT,IAGV,GACC,EAAC,SAAD,CACE,KAAK,SACL,aAAW,eACX,UAAU,yTACV,QAAS,WAET,EAAC,EAAD,CAAO,cAAY,MAAQ,CAAA,CACrB,CAAA,CAEP,IAEJ,GAAY,GAAoB,EAAC,EAAD,CAAY,GAAI,EAAS,UAAU,OAAO,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,EAC7G,EAAC,GAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACrD,GACW,CAAA,CACb,IACP,EAAC,GAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAc,YAAc"}

package/dist/combobox-field-DERJQd5o.cjs

@@ -1,2 +0,0 @@
-const e=require("./ui/button.cjs"),t=require("./ui/dialog.cjs"),n=require("./ui/command.cjs"),r=require("./tanstack-form-BC61U3F-.cjs"),i=require("./ui/popover.cjs"),a=require("./field-BV5twmKA.cjs");let o=require("lucide-react"),s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("react/jsx-runtime"),u=require("radix-ui"),d=require("@customafk/react-toolkit/hooks/useMobile"),f=require("@tanstack/react-form");const p=(0,s.memo)(({label:p,description:m,placeholder:h,tooltip:g,helperText:_,orientation:v=`responsive`,options:y,required:b=!1,disabled:x=!1,clearable:S=!1,showErrorMessage:C=!0,modal:w})=>{let T=(0,s.useId)(),E=r.G(),D=(0,d.useIsMobile)(),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)(!1),M=(0,f.useStore)(E.form.store,({isSubmitting:e})=>e),N=x||M,P=E.state.meta.isDirty||E.state.meta.isTouched,F=P&&!E.state.meta.isValid,I=b&&E.state.value===null,L=S&&!!E.state.value&&!N,R=y.find(({value:e})=>e===E.state.value)?.label,z=()=>{E.handleChange(null),E.handleBlur()},B=t=>(0,l.jsx)(e.Button,{variant:`outline`,color:`muted`,size:`lg`,disabled:N,"aria-invalid":F?!0:void 0,"aria-describedby":T,className:(0,c.cn)(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,L&&`pr-8`,!E.state.value&&`text-text-positive-muted`,F&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:R?(0,l.jsx)(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:R}):(0,l.jsx)(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:h})}),V=e=>(0,l.jsxs)(n.Command,{className:`border-none`,children:[(0,l.jsx)(n.CommandInput,{placeholder:h??`Tìm kiếm…`}),(0,l.jsxs)(n.CommandList,{children:[(0,l.jsx)(n.CommandEmpty,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),(0,l.jsx)(n.CommandGroup,{className:`max-h-60 overflow-y-auto`,children:y.map(({value:t,label:r})=>(0,l.jsx)(n.CommandItem,{value:r,onSelect:()=>e(t),children:r},t))})]})]});return(0,l.jsxs)(a.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,l.jsxs)(a.Field,{orientation:v,"data-invalid":F,children:[(0,l.jsxs)(a.FieldContent,{children:[(0,l.jsxs)(a.FieldLabel,{"aria-required":I,htmlFor:E.name,children:[p,g&&(0,l.jsx)(a.FieldTooltip,{tooltip:g})]}),(0,l.jsx)(a.FieldDescription,{children:m})]}),(0,l.jsx)(a.FieldContentMain,{className:`flex justify-end`,children:(0,l.jsxs)(`div`,{className:`flex w-full flex-col`,children:[(0,l.jsxs)(`div`,{className:`relative`,children:[D?(0,l.jsxs)(l.Fragment,{children:[B(()=>k(!0)),(0,l.jsx)(t.Dialog,{open:O,onOpenChange:e=>{k(e),e||E.handleBlur()},children:(0,l.jsxs)(t.DialogPortal,{children:[(0,l.jsx)(t.DialogOverlay,{}),(0,l.jsxs)(u.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,c.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,l.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,l.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:p}),(0,l.jsx)(t.DialogClose,{asChild:!0,children:(0,l.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,l.jsx)(o.XIcon,{size:16})})})]}),(0,l.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[L&&(0,l.jsx)(t.DialogClose,{asChild:!0,children:(0,l.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:z,children:[(0,l.jsx)(o.XIcon,{size:14}),`Xóa lựa chọn`]})}),V(e=>{E.handleChange(e),k(!1),E.handleBlur()})]}),(0,l.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,l.jsxs)(i.Popover,{open:A,modal:w,onOpenChange:e=>{j(e),e||E.handleBlur()},children:[(0,l.jsx)(i.PopoverTrigger,{asChild:!0,children:B()}),(0,l.jsx)(i.PopoverContent,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:V(e=>{E.handleChange(e),j(!1),E.handleBlur()})})]}),L&&(0,l.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 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:z,children:(0,l.jsx)(o.XIcon,{"aria-hidden":`true`})})]}),P&&C&&(0,l.jsx)(a.FieldError,{id:T,className:`mt-1`,errors:E.state.meta.errors}),(0,l.jsx)(a.FieldNote,{isShow:!!_,children:_})]})})]}),(0,l.jsx)(a.FieldSeparator,{})]})});p.displayName=`ComboboxField`,exports.ComboboxField=p;
-//# sourceMappingURL=combobox-field-DERJQd5o.cjs.map

package/dist/combobox-field-DERJQd5o.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"combobox-field-DERJQd5o.cjs","names":["useTanStackFieldContext","Button","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Dialog","DialogPortal","DialogOverlay","RadixDialog","DialogClose","XIcon","Popover","PopoverTrigger","PopoverContent","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\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 { ComboboxFieldProps } from '../../types';\n\nexport const ComboboxField = memo<ComboboxFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    options,\n    required = false,\n    disabled = false,\n    clearable = false,\n    showErrorMessage = true,\n    modal,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [popoverOpen, setPopoverOpen] = 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(({ value }) => value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    const triggerButton = (onClick?: () => void) => (\n      <Button\n        variant=\"outline\"\n        color=\"muted\"\n        size=\"lg\"\n        disabled={isDisabled}\n        aria-invalid={_invalid ? true : undefined}\n        aria-describedby={errorId}\n        className={cn(\n          'flex w-full items-center justify-start rounded outline-border',\n          'hover:bg-transparent',\n          'focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n          _showClear && 'pr-8',\n          !field.state.value && 'text-text-positive-muted',\n          _invalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n        )}\n        onClick={onClick}\n      >\n        {selectedLabel ? (\n          <p className=\"flex min-w-0 flex-1 items-center gap-2 truncate text-start\">{selectedLabel}</p>\n        ) : (\n          <p className=\"flex-1 text-start text-text-positive-muted\">{placeholder}</p>\n        )}\n      </Button>\n    );\n\n    const renderCommandList = (onSelect: (value: string) => void) => (\n      <Command className=\"border-none\">\n        <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n        <CommandList>\n          <CommandEmpty className=\"flex min-h-30 items-center justify-center text-sm text-text-positive-weak\">Không tìm thấy kết quả nào phù hợp.</CommandEmpty>\n          <CommandGroup className=\"max-h-60 overflow-y-auto\">\n            {options.map(({ value, label: optLabel }) => (\n              <CommandItem key={value} value={optLabel} onSelect={() => onSelect(value)}>\n                {optLabel}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={field.name}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex justify-end\">\n            <div className=\"flex w-full flex-col\">\n              <div className=\"relative\">\n                {isMobile ? (\n                  <>\n                    {triggerButton(() => setDialogOpen(true))}\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}</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                            {renderCommandList(value => {\n                              field.handleChange(value);\n                              setDialogOpen(false);\n                              field.handleBlur();\n                            })}\n                          </div>\n\n                          <div className=\"shrink-0 h-safe-bottom\" />\n                        </RadixDialog.Content>\n                      </DialogPortal>\n                    </Dialog>\n                  </>\n                ) : (\n                  <Popover\n                    open={popoverOpen}\n                    modal={modal}\n                    onOpenChange={open => {\n                      setPopoverOpen(open);\n                      if (!open) field.handleBlur();\n                    }}\n                  >\n                    <PopoverTrigger asChild>{triggerButton()}</PopoverTrigger>\n                    <PopoverContent align=\"end\" side=\"bottom\" className=\"flex w-fit rounded p-0\">\n                      {renderCommandList(value => {\n                        field.handleChange(value);\n                        setPopoverOpen(false);\n                        field.handleBlur();\n                      })}\n                    </PopoverContent>\n                  </Popover>\n                )}\n\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-2 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              {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n              <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n            </div>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nComboboxField.displayName = 'ComboboxField';\n"],"mappings":"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"}

package/dist/container-form-BdsEX0NH.mjs

@@ -1,2 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";const t=({children:t})=>e(`div`,{"data-slot":`section-form`,className:`flex flex-col space-y-4`,children:t});export{t as TanStackContainerForm};
-//# sourceMappingURL=container-form-BdsEX0NH.mjs.map

package/dist/container-form-BdsEX0NH.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"container-form-BdsEX0NH.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/container-form.tsx"],"sourcesContent":["/**\n * Wraps a set of TanStack form sections in a vertically-stacked flex container.\n *\n * @example\n * import { TanStackContainerForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackContainerForm>\n *   <TanStackSectionForm title=\"Personal Info\">\n *     {/* fields *\\/}\n *   </TanStackSectionForm>\n * </TanStackContainerForm>\n */\nexport const TanStackContainerForm: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <div data-slot=\"section-form\" className=\"flex flex-col space-y-4\">\n      {children}\n    </div>\n  );\n};\n"],"mappings":"wCAYA,MAAa,GAA4D,CAAE,cAEvE,EAAC,MAAD,CAAK,YAAU,eAAe,UAAU,0BACrC,UACE,CAAA"}

package/dist/container-form-CxxUYctk.cjs

@@ -1,2 +0,0 @@
-let e=require("react/jsx-runtime");const t=({children:t})=>(0,e.jsx)(`div`,{"data-slot":`section-form`,className:`flex flex-col space-y-4`,children:t});exports.TanStackContainerForm=t;
-//# sourceMappingURL=container-form-CxxUYctk.cjs.map

package/dist/container-form-CxxUYctk.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"container-form-CxxUYctk.cjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/container-form.tsx"],"sourcesContent":["/**\n * Wraps a set of TanStack form sections in a vertically-stacked flex container.\n *\n * @example\n * import { TanStackContainerForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackContainerForm>\n *   <TanStackSectionForm title=\"Personal Info\">\n *     {/* fields *\\/}\n *   </TanStackSectionForm>\n * </TanStackContainerForm>\n */\nexport const TanStackContainerForm: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <div data-slot=\"section-form\" className=\"flex flex-col space-y-4\">\n      {children}\n    </div>\n  );\n};\n"],"mappings":"mCAYA,MAAa,GAA4D,CAAE,eAEvE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,eAAe,UAAU,0BACrC,UACE,CAAA"}

package/dist/date-field--jOKZ2x1.cjs

@@ -1,2 +0,0 @@
-const e=require("./ui/button.cjs"),t=require("./tanstack-form-BC61U3F-.cjs"),n=require("./ui/popover.cjs"),r=require("./ui/calendar.cjs"),i=require("./field-BV5twmKA.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("@customafk/react-toolkit/date-fns"),u=require("@tanstack/react-form");const d=(0,o.memo)(({label:d,description:f,placeholder:p,orientation:m=`responsive`,tooltip:h,helperText:g,showErrorMessage:_=!0,required:v=!1,disabled:y=!1,minDate:b,maxDate:x})=>{let S=(0,o.useId)(),C=t.G(),[w,T]=(0,o.useState)(!1),E=(0,u.useStore)(C.form.store,({isSubmitting:e})=>e),D=y||E,O=C.state.meta.isDirty||C.state.meta.isTouched,k=O&&!C.state.meta.isValid,A=v&&C.state.value===null,j=e=>{C.handleChange(e),T(!1)};return(0,c.jsxs)(i.FieldGroup,{className:`px-4`,children:[(0,c.jsxs)(i.Field,{orientation:m,"data-invalid":k,children:[(0,c.jsxs)(i.FieldContent,{children:[(0,c.jsxs)(i.FieldLabel,{htmlFor:C.name,"aria-required":A,children:[d,h&&(0,c.jsx)(i.FieldTooltip,{tooltip:h})]}),(0,c.jsx)(i.FieldDescription,{children:f})]}),(0,c.jsx)(i.FieldContentMain,{className:`flex flex-col space-y-1`,children:(0,c.jsxs)(`div`,{className:`flex w-full flex-col`,children:[(0,c.jsxs)(n.Popover,{open:w,onOpenChange:e=>{T(e),e||C.handleBlur()},children:[(0,c.jsx)(n.PopoverTrigger,{asChild:!0,children:(0,c.jsxs)(e.Button,{variant:`outline`,color:`muted`,size:`lg`,disabled:D,"aria-invalid":k?!0:void 0,"aria-describedby":S,className:(0,s.cn)(`flex items-center justify-between rounded font-normal outline-border`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,C.state.value===null&&`text-text-positive-muted`,k&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),children:[(0,c.jsx)(`p`,{children:C.state.value===null?p??`Select date`:(0,l.format)(C.state.value,`PPPP`)}),(0,c.jsx)(a.CalendarDaysIcon,{strokeWidth:1})]})}),(0,c.jsxs)(n.PopoverContent,{align:`start`,side:`bottom`,className:`flex w-fit min-w-0 overflow-y-auto rounded p-0`,children:[(0,c.jsxs)(`div`,{className:`flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm`,children:[(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>j((0,l.endOfToday)()),children:`Hôm nay`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>j((0,l.endOfTomorrow)()),children:`Ngày mai`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>j((0,l.endOfYesterday)()),children:`Hôm qua`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>j((0,l.subDays)((0,l.endOfToday)(),3)),children:`3 ngày qua`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>j((0,l.subDays)((0,l.endOfToday)(),7)),children:`7 ngày qua`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>j((0,l.subDays)((0,l.endOfToday)(),30)),children:`30 ngày qua`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>j((0,l.startOfMonth)((0,l.endOfToday)())),children:`Tháng này`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>j((0,l.lastDayOfMonth)((0,l.endOfToday)())),children:`Tháng trước`})]}),(0,c.jsx)(`div`,{className:`flex flex-1 flex-col`,children:(0,c.jsx)(`div`,{className:`min-w-73 border-b border-b-border p-2`,children:(0,c.jsx)(r.Calendar,{mode:`single`,selected:C.state.value??void 0,hidden:{before:b??new Date(1900,0,1),after:x??new Date(2100,11,31)},onSelect:e=>{e&&j(e)}})})})]})]}),O&&_&&(0,c.jsx)(i.FieldError,{id:S,className:`mt-1`,errors:C.state.meta.errors}),(0,c.jsx)(i.FieldNote,{isShow:!!g,children:g})]})})]}),(0,c.jsx)(i.FieldSeparator,{})]})});d.displayName=`DateField`,exports.DateField=d;
-//# sourceMappingURL=date-field--jOKZ2x1.cjs.map

package/dist/date-field--jOKZ2x1.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-field--jOKZ2x1.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Popover","PopoverTrigger","Button","CalendarDaysIcon","PopoverContent","Calendar","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/date-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { endOfToday, endOfTomorrow, endOfYesterday, format, lastDayOfMonth, startOfMonth, subDays } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\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 { DateFieldProps as Props } from '../../types';\n\nexport const DateField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n    orientation = 'responsive',\n    tooltip,\n    helperText,\n    showErrorMessage = true,\n    required = false,\n    disabled = false,\n    minDate,\n    maxDate,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<Date | null>();\n    const [popoverOpen, setPopoverOpen] = 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 _isInvalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n\n    const handleSelect = (date: Date) => {\n      field.handleChange(date);\n      setPopoverOpen(false);\n    };\n\n    return (\n      <FieldGroup className=\"px-4\">\n        <Field orientation={orientation} data-invalid={_isInvalid}>\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 space-y-1\">\n            <div className=\"flex w-full flex-col\">\n              <Popover\n                open={popoverOpen}\n                onOpenChange={open => {\n                  setPopoverOpen(open);\n                  if (!open) field.handleBlur();\n                }}\n              >\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    color=\"muted\"\n                    size=\"lg\"\n                    disabled={isDisabled}\n                    aria-invalid={_isInvalid ? true : undefined}\n                    aria-describedby={errorId}\n                    className={cn(\n                      'flex items-center justify-between rounded font-normal outline-border',\n                      'hover:bg-transparent',\n                      'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n                      'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n                      field.state.value === null && 'text-text-positive-muted',\n                      _isInvalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n                    )}\n                  >\n                    <p>{field.state.value === null ? (placeholder ?? 'Select date') : format(field.state.value, 'PPPP')}</p>\n                    <CalendarDaysIcon strokeWidth={1} />\n                  </Button>\n                </PopoverTrigger>\n\n                <PopoverContent align=\"start\" side=\"bottom\" className=\"flex w-fit min-w-0 overflow-y-auto rounded p-0\">\n                  <div className=\"flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm\">\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfToday())}>\n                      Hôm nay\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfTomorrow())}>\n                      Ngày mai\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfYesterday())}>\n                      Hôm qua\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 3))}>\n                      3 ngày qua\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 7))}>\n                      7 ngày qua\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 30))}>\n                      30 ngày qua\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(startOfMonth(endOfToday()))}>\n                      Tháng này\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(lastDayOfMonth(endOfToday()))}>\n                      Tháng trước\n                    </Button>\n                  </div>\n                  <div className=\"flex flex-1 flex-col\">\n                    <div className=\"min-w-73 border-b border-b-border p-2\">\n                      <Calendar\n                        mode=\"single\"\n                        selected={field.state.value ?? undefined}\n                        hidden={{\n                          before: minDate ?? new Date(1900, 0, 1),\n                          after: maxDate ?? new Date(2100, 11, 31),\n                        }}\n                        onSelect={date => {\n                          if (!date) return;\n                          handleSelect(date);\n                        }}\n                      />\n                    </div>\n                  </div>\n                </PopoverContent>\n              </Popover>\n\n              {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n              <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n            </div>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nDateField.displayName = 'DateField';\n"],"mappings":"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"}

package/dist/date-field-CXzcsnjn.mjs

@@ -1,2 +0,0 @@
-import{Button as e}from"./ui/button.mjs";import{G as t}from"./tanstack-form-DJMaMeUh.mjs";import{Popover as n,PopoverContent as r,PopoverTrigger as i}from"./ui/popover.mjs";import{Calendar as a}from"./ui/calendar.mjs";import{Field as o,FieldContent as s,FieldContentMain as c,FieldDescription as l,FieldError as u,FieldGroup as d,FieldLabel as f,FieldNote as p,FieldSeparator as m,FieldTooltip as h}from"./field-BKyUqvzh.mjs";import{CalendarDaysIcon as g}from"lucide-react";import{memo as _,useId as v,useState as y}from"react";import{cn as b}from"@customafk/react-toolkit/utils";import{jsx as x,jsxs as S}from"react/jsx-runtime";import{endOfToday as C,endOfTomorrow as w,endOfYesterday as T,format as E,lastDayOfMonth as D,startOfMonth as O,subDays as k}from"@customafk/react-toolkit/date-fns";import{useStore as A}from"@tanstack/react-form";const j=_(({label:_,description:j,placeholder:M,orientation:N=`responsive`,tooltip:P,helperText:F,showErrorMessage:I=!0,required:L=!1,disabled:R=!1,minDate:z,maxDate:B})=>{let V=v(),H=t(),[U,W]=y(!1),G=A(H.form.store,({isSubmitting:e})=>e),K=R||G,q=H.state.meta.isDirty||H.state.meta.isTouched,J=q&&!H.state.meta.isValid,Y=L&&H.state.value===null,X=e=>{H.handleChange(e),W(!1)};return S(d,{className:`px-4`,children:[S(o,{orientation:N,"data-invalid":J,children:[S(s,{children:[S(f,{htmlFor:H.name,"aria-required":Y,children:[_,P&&x(h,{tooltip:P})]}),x(l,{children:j})]}),x(c,{className:`flex flex-col space-y-1`,children:S(`div`,{className:`flex w-full flex-col`,children:[S(n,{open:U,onOpenChange:e=>{W(e),e||H.handleBlur()},children:[x(i,{asChild:!0,children:S(e,{variant:`outline`,color:`muted`,size:`lg`,disabled:K,"aria-invalid":J?!0:void 0,"aria-describedby":V,className:b(`flex items-center justify-between rounded font-normal outline-border`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,H.state.value===null&&`text-text-positive-muted`,J&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),children:[x(`p`,{children:H.state.value===null?M??`Select date`:E(H.state.value,`PPPP`)}),x(g,{strokeWidth:1})]})}),S(r,{align:`start`,side:`bottom`,className:`flex w-fit min-w-0 overflow-y-auto rounded p-0`,children:[S(`div`,{className:`flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm`,children:[x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>X(C()),children:`Hôm nay`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>X(w()),children:`Ngày mai`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>X(T()),children:`Hôm qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>X(k(C(),3)),children:`3 ngày qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>X(k(C(),7)),children:`7 ngày qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>X(k(C(),30)),children:`30 ngày qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>X(O(C())),children:`Tháng này`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>X(D(C())),children:`Tháng trước`})]}),x(`div`,{className:`flex flex-1 flex-col`,children:x(`div`,{className:`min-w-73 border-b border-b-border p-2`,children:x(a,{mode:`single`,selected:H.state.value??void 0,hidden:{before:z??new Date(1900,0,1),after:B??new Date(2100,11,31)},onSelect:e=>{e&&X(e)}})})})]})]}),q&&I&&x(u,{id:V,className:`mt-1`,errors:H.state.meta.errors}),x(p,{isShow:!!F,children:F})]})})]}),x(m,{})]})});j.displayName=`DateField`;export{j as DateField};
-//# sourceMappingURL=date-field-CXzcsnjn.mjs.map

package/dist/date-field-CXzcsnjn.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-field-CXzcsnjn.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/date-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { endOfToday, endOfTomorrow, endOfYesterday, format, lastDayOfMonth, startOfMonth, subDays } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\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 { DateFieldProps as Props } from '../../types';\n\nexport const DateField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n    orientation = 'responsive',\n    tooltip,\n    helperText,\n    showErrorMessage = true,\n    required = false,\n    disabled = false,\n    minDate,\n    maxDate,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<Date | null>();\n    const [popoverOpen, setPopoverOpen] = 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 _isInvalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n\n    const handleSelect = (date: Date) => {\n      field.handleChange(date);\n      setPopoverOpen(false);\n    };\n\n    return (\n      <FieldGroup className=\"px-4\">\n        <Field orientation={orientation} data-invalid={_isInvalid}>\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 space-y-1\">\n            <div className=\"flex w-full flex-col\">\n              <Popover\n                open={popoverOpen}\n                onOpenChange={open => {\n                  setPopoverOpen(open);\n                  if (!open) field.handleBlur();\n                }}\n              >\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    color=\"muted\"\n                    size=\"lg\"\n                    disabled={isDisabled}\n                    aria-invalid={_isInvalid ? true : undefined}\n                    aria-describedby={errorId}\n                    className={cn(\n                      'flex items-center justify-between rounded font-normal outline-border',\n                      'hover:bg-transparent',\n                      'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n                      'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n                      field.state.value === null && 'text-text-positive-muted',\n                      _isInvalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n                    )}\n                  >\n                    <p>{field.state.value === null ? (placeholder ?? 'Select date') : format(field.state.value, 'PPPP')}</p>\n                    <CalendarDaysIcon strokeWidth={1} />\n                  </Button>\n                </PopoverTrigger>\n\n                <PopoverContent align=\"start\" side=\"bottom\" className=\"flex w-fit min-w-0 overflow-y-auto rounded p-0\">\n                  <div className=\"flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm\">\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfToday())}>\n                      Hôm nay\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfTomorrow())}>\n                      Ngày mai\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfYesterday())}>\n                      Hôm qua\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 3))}>\n                      3 ngày qua\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 7))}>\n                      7 ngày qua\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 30))}>\n                      30 ngày qua\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(startOfMonth(endOfToday()))}>\n                      Tháng này\n                    </Button>\n                    <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(lastDayOfMonth(endOfToday()))}>\n                      Tháng trước\n                    </Button>\n                  </div>\n                  <div className=\"flex flex-1 flex-col\">\n                    <div className=\"min-w-73 border-b border-b-border p-2\">\n                      <Calendar\n                        mode=\"single\"\n                        selected={field.state.value ?? undefined}\n                        hidden={{\n                          before: minDate ?? new Date(1900, 0, 1),\n                          after: maxDate ?? new Date(2100, 11, 31),\n                        }}\n                        onSelect={date => {\n                          if (!date) return;\n                          handleSelect(date);\n                        }}\n                      />\n                    </div>\n                  </div>\n                </PopoverContent>\n              </Popover>\n\n              {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n              <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n            </div>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nDateField.displayName = 'DateField';\n"],"mappings":"20BA+BA,MAAa,EAAY,GACtB,CACC,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,GACnB,WAAW,GACX,WAAW,GACX,UACA,aACI,CACJ,IAAM,EAAU,EAAM,EAChB,EAAQ,EAAqC,EAC7C,CAAC,EAAa,GAAkB,EAAS,EAAK,EAE9C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAa,GAAY,CAAC,EAAM,MAAM,KAAK,QAC3C,EAAW,GAAY,EAAM,MAAM,QAAU,KAE7C,EAAgB,GAAe,CACnC,EAAM,aAAa,CAAI,EACvB,EAAe,EAAK,CACtB,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,gBAAtB,CACE,EAAC,EAAD,CAAoB,cAAa,eAAc,WAA/C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAM,KAAM,gBAAe,WAAhD,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EAEd,EAAC,EAAD,CAAkB,UAAU,mCAC1B,EAAC,MAAD,CAAK,UAAU,gCAAf,CACE,EAAC,EAAD,CACE,KAAM,EACN,aAAc,GAAQ,CACpB,EAAe,CAAI,EACd,GAAM,EAAM,WAAW,CAC9B,WALF,CAOE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,EAAD,CACE,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAAU,EACV,eAAc,EAAa,GAAO,IAAA,GAClC,mBAAkB,EAClB,UAAW,EACT,uEACA,uBACA,oFACA,oIACA,EAAM,MAAM,QAAU,MAAQ,2BAC9B,GAAc,4DAChB,WAdF,CAgBE,EAAC,IAAD,CAAA,SAAI,EAAM,MAAM,QAAU,KAAQ,GAAe,cAAiB,EAAO,EAAM,MAAM,MAAO,MAAM,CAAK,CAAA,EACvG,EAAC,EAAD,CAAkB,YAAa,CAAI,CAAA,CAC7B,GACM,CAAA,EAEhB,EAAC,EAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,0DAAtD,CACE,EAAC,MAAD,CAAK,UAAU,mHAAf,CACE,EAAC,EAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,EAAa,EAAW,CAAC,WAAG,SAE1F,CAAA,EACR,EAAC,EAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,EAAa,EAAc,CAAC,WAAG,UAE7F,CAAA,EACR,EAAC,EAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,EAAa,EAAe,CAAC,WAAG,SAE9F,CAAA,EACR,EAAC,EAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,EAAa,EAAQ,EAAW,EAAG,CAAC,CAAC,WAAG,YAEtG,CAAA,EACR,EAAC,EAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,EAAa,EAAQ,EAAW,EAAG,CAAC,CAAC,WAAG,YAEtG,CAAA,EACR,EAAC,EAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,EAAa,EAAQ,EAAW,EAAG,EAAE,CAAC,WAAG,aAEvG,CAAA,EACR,EAAC,EAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,EAAa,EAAa,EAAW,CAAC,CAAC,WAAG,WAExG,CAAA,EACR,EAAC,EAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,EAAa,EAAe,EAAW,CAAC,CAAC,WAAG,aAE1G,CAAA,CACL,IACL,EAAC,MAAD,CAAK,UAAU,gCACb,EAAC,MAAD,CAAK,UAAU,iDACb,EAAC,EAAD,CACE,KAAK,SACL,SAAU,EAAM,MAAM,OAAS,IAAA,GAC/B,OAAQ,CACN,OAAQ,GAAW,IAAI,KAAK,KAAM,EAAG,CAAC,EACtC,MAAO,GAAW,IAAI,KAAK,KAAM,GAAI,EAAE,CACzC,EACA,SAAU,GAAQ,CACX,GACL,EAAa,CAAI,CACnB,CACD,CAAA,CACE,CAAA,CACF,CAAA,CACS,GACT,IAER,GAAY,GAAoB,EAAC,EAAD,CAAY,GAAI,EAAS,UAAU,OAAO,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,EAC7G,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACrD,GACW,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAU,YAAc"}

package/dist/section-form-Dv9fKWmB.mjs

@@ -1,2 +0,0 @@
-import{t as e}from"./separator-BlNAFSJv.mjs";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=({children:e})=>t(`header`,{"data-slot":`section-header`,className:`flex items-center px-4 py-3 font-semibold text-base text-text-positive tracking-tight gap-x-2 [&>svg]:size-5 [&>svg]:min-w-5`,children:e}),i=({children:e})=>t(`main`,{"data-slot":`section-main`,className:`relative flex flex-col py-4`,children:e}),a=({title:a,icon:o,children:s})=>n(`section`,{"data-slot":`section-form`,className:`flex flex-col rounded-md bg-background shadow-card ring-1 ring-border`,children:[n(r,{children:[o,a]}),t(e,{}),t(i,{children:s})]});export{a as TanStackSectionForm};
-//# sourceMappingURL=section-form-Dv9fKWmB.mjs.map

package/dist/section-form-Dv9fKWmB.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"section-form-Dv9fKWmB.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/section-form.tsx"],"sourcesContent":["'use client';\n\nimport { Separator } from '../ui/separator';\n\n/**\n * Internal header sub-component for `TanStackSectionForm` that renders a styled section title.\n */\nconst SectionHeader: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <header\n      data-slot=\"section-header\"\n      className=\"flex items-center px-4 py-3 font-semibold text-base text-text-positive tracking-tight gap-x-2 [&>svg]:size-5 [&>svg]:min-w-5\"\n    >\n      {children}\n    </header>\n  );\n};\n\n/**\n * Internal body sub-component for `TanStackSectionForm` that wraps field content with vertical padding.\n */\nconst SectionMain: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <main data-slot=\"section-main\" className=\"relative flex flex-col py-4\">\n      {children}\n    </main>\n  );\n};\n\n/**\n * Renders a card-like form section with a titled header, separator, and a content area for form fields.\n *\n * @example\n * import { TanStackSectionForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackSectionForm title=\"Account Settings\">\n *   <EmailField />\n *   <PasswordField />\n * </TanStackSectionForm>\n */\nexport const TanStackSectionForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the section header bar. */\n    title: string;\n    icon?: React.ReactNode;\n  }>\n> = ({ title, icon: Icon, children }) => {\n  return (\n    <section data-slot=\"section-form\" className=\"flex flex-col rounded-md bg-background shadow-card ring-1 ring-border\">\n      <SectionHeader>\n        {Icon}\n        {title}\n      </SectionHeader>\n      <Separator />\n      <SectionMain>{children}</SectionMain>\n    </section>\n  );\n};\n"],"mappings":"+FAOA,MAAM,GAAoD,CAAE,cAExD,EAAC,SAAD,CACE,YAAU,iBACV,UAAU,+HAET,UACK,CAAA,EAON,GAAkD,CAAE,cAEtD,EAAC,OAAD,CAAM,YAAU,eAAe,UAAU,8BACtC,UACG,CAAA,EAeG,GAMR,CAAE,QAAO,KAAM,EAAM,cAEtB,EAAC,UAAD,CAAS,YAAU,eAAe,UAAU,iFAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,CACY,CAAA,CAAA,EACf,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,EAAD,CAAc,UAAsB,CAAA,CAC7B"}