@customafk/lunas-ui 0.2.73 → 0.2.74

package/dist/{action-submit-C19tPHgf.cjs → action-submit-DI590CG3.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./tanstack-form-CX3lC3mC.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=({label:a,className:o})=>{let s=t.K(),c=(0,n.useCallback)(async()=>{await s.handleSubmit({submitAction:`submit`}),s.state.isSubmitSuccessful&&s.reset()},[s]);return(0,i.jsx)(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:n})=>(0,i.jsx)(e.Button,{type:`button`,size:`md`,disabled:t,isLoading:n,className:(0,r.cn)(`min-h-8 min-w-32`,o),onClick:c,children:a??`Xác nhận`})})};exports.TanStackActionSubmit=a;
-//# sourceMappingURL=action-submit-C19tPHgf.cjs.map
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-Bae0TOEr.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=({label:a,className:o})=>{let s=t.K(),c=(0,n.useCallback)(async()=>{await s.handleSubmit({submitAction:`submit`}),s.state.isSubmitSuccessful&&s.reset()},[s]);return(0,i.jsx)(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:n})=>(0,i.jsx)(e.Button,{type:`button`,size:`md`,disabled:t,isLoading:n,className:(0,r.cn)(`min-h-8 min-w-32`,o),onClick:c,children:a??`Xác nhận`})})};exports.TanStackActionSubmit=a;
+//# sourceMappingURL=action-submit-DI590CG3.cjs.map

package/dist/{action-submit-C19tPHgf.cjs.map → action-submit-DI590CG3.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"action-submit-C19tPHgf.cjs","names":["useTanStackFormContext","Button"],"sources":["../packages/components/features/tanstack-form/components/forms/action-submit.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.\n *\n * @example\n * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionSubmit label=\"Save Changes\" className=\"mt-4\" />\n */\nexport const TanStackActionSubmit: React.FC<{\n  /** Button label text. Defaults to `'Submit'` when omitted. */\n  label?: string;\n  /** Additional CSS class names applied to the button element. */\n  className?: string;\n}> = ({ label, className }) => {\n  const form = useTanStackFormContext();\n\n  const onSubmit = useCallback(async () => {\n    await form.handleSubmit({ submitAction: 'submit' });\n    if (!form.state.isSubmitSuccessful) return;\n    form.reset();\n  }, [form]);\n  return (\n    <form.Subscribe\n      selector={state => ({\n        disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n        isSubmitting: state.isSubmitting,\n      })}\n      children={({ disabled, isSubmitting }) => {\n        return (\n          <Button type=\"button\" size=\"md\" disabled={disabled} isLoading={isSubmitting} className={cn('min-h-8 min-w-32', className)} onClick={onSubmit}>\n            {label ?? 'Xác nhận'}\n          </Button>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"+KAiBA,MAAa,GAKP,CAAE,QAAO,eAAgB,CAC7B,IAAM,EAAOA,EAAAA,EAAuB,EAE9B,GAAA,EAAA,EAAA,YAAA,CAAuB,SAAY,CACvC,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAAG,CAAC,CAAI,CAAC,EACT,OACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,KAAe,WAAU,UAAW,EAAc,WAAA,EAAA,EAAA,GAAA,CAAc,mBAAoB,CAAS,EAAG,QAAS,WACjI,GAAS,UACJ,CAAA,CAGb,CAAA,CAEL"}
+{"version":3,"file":"action-submit-DI590CG3.cjs","names":["useTanStackFormContext","Button"],"sources":["../packages/components/features/tanstack-form/components/forms/action-submit.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.\n *\n * @example\n * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionSubmit label=\"Save Changes\" className=\"mt-4\" />\n */\nexport const TanStackActionSubmit: React.FC<{\n  /** Button label text. Defaults to `'Submit'` when omitted. */\n  label?: string;\n  /** Additional CSS class names applied to the button element. */\n  className?: string;\n}> = ({ label, className }) => {\n  const form = useTanStackFormContext();\n\n  const onSubmit = useCallback(async () => {\n    await form.handleSubmit({ submitAction: 'submit' });\n    if (!form.state.isSubmitSuccessful) return;\n    form.reset();\n  }, [form]);\n  return (\n    <form.Subscribe\n      selector={state => ({\n        disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n        isSubmitting: state.isSubmitting,\n      })}\n      children={({ disabled, isSubmitting }) => {\n        return (\n          <Button type=\"button\" size=\"md\" disabled={disabled} isLoading={isSubmitting} className={cn('min-h-8 min-w-32', className)} onClick={onSubmit}>\n            {label ?? 'Xác nhận'}\n          </Button>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"+KAiBA,MAAa,GAKP,CAAE,QAAO,eAAgB,CAC7B,IAAM,EAAOA,EAAAA,EAAuB,EAE9B,GAAA,EAAA,EAAA,YAAA,CAAuB,SAAY,CACvC,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAAG,CAAC,CAAI,CAAC,EACT,OACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,KAAe,WAAU,UAAW,EAAc,WAAA,EAAA,EAAA,GAAA,CAAc,mBAAoB,CAAS,EAAG,QAAS,WACjI,GAAS,UACJ,CAAA,CAGb,CAAA,CAEL"}

package/dist/{action-submit-cOfq0OSY.mjs → action-submit-ScN29AQ1.mjs}

@@ -1,2 +1,2 @@
-import{Button as e}from"./ui/button.mjs";import{K as t}from"./tanstack-form-CKAWexet.mjs";import{useCallback as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i}from"react/jsx-runtime";const a=({label:a,className:o})=>{let s=t(),c=n(async()=>{await s.handleSubmit({submitAction:`submit`}),s.state.isSubmitSuccessful&&s.reset()},[s]);return i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:n})=>i(e,{type:`button`,size:`md`,disabled:t,isLoading:n,className:r(`min-h-8 min-w-32`,o),onClick:c,children:a??`Xác nhận`})})};export{a as TanStackActionSubmit};
-//# sourceMappingURL=action-submit-cOfq0OSY.mjs.map
+import{Button as e}from"./ui/button.mjs";import{K as t}from"./tanstack-form-AGwPfwiM.mjs";import{useCallback as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i}from"react/jsx-runtime";const a=({label:a,className:o})=>{let s=t(),c=n(async()=>{await s.handleSubmit({submitAction:`submit`}),s.state.isSubmitSuccessful&&s.reset()},[s]);return i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:n})=>i(e,{type:`button`,size:`md`,disabled:t,isLoading:n,className:r(`min-h-8 min-w-32`,o),onClick:c,children:a??`Xác nhận`})})};export{a as TanStackActionSubmit};
+//# sourceMappingURL=action-submit-ScN29AQ1.mjs.map

package/dist/{action-submit-cOfq0OSY.mjs.map → action-submit-ScN29AQ1.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"action-submit-cOfq0OSY.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/action-submit.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.\n *\n * @example\n * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionSubmit label=\"Save Changes\" className=\"mt-4\" />\n */\nexport const TanStackActionSubmit: React.FC<{\n  /** Button label text. Defaults to `'Submit'` when omitted. */\n  label?: string;\n  /** Additional CSS class names applied to the button element. */\n  className?: string;\n}> = ({ label, className }) => {\n  const form = useTanStackFormContext();\n\n  const onSubmit = useCallback(async () => {\n    await form.handleSubmit({ submitAction: 'submit' });\n    if (!form.state.isSubmitSuccessful) return;\n    form.reset();\n  }, [form]);\n  return (\n    <form.Subscribe\n      selector={state => ({\n        disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n        isSubmitting: state.isSubmitting,\n      })}\n      children={({ disabled, isSubmitting }) => {\n        return (\n          <Button type=\"button\" size=\"md\" disabled={disabled} isLoading={isSubmitting} className={cn('min-h-8 min-w-32', className)} onClick={onSubmit}>\n            {label ?? 'Xác nhận'}\n          </Button>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"0NAiBA,MAAa,GAKP,CAAE,QAAO,eAAgB,CAC7B,IAAM,EAAO,EAAuB,EAE9B,EAAW,EAAY,SAAY,CACvC,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAAG,CAAC,CAAI,CAAC,EACT,OACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,KAAe,WAAU,UAAW,EAAc,UAAW,EAAG,mBAAoB,CAAS,EAAG,QAAS,WACjI,GAAS,UACJ,CAAA,CAGb,CAAA,CAEL"}
+{"version":3,"file":"action-submit-ScN29AQ1.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/action-submit.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.\n *\n * @example\n * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionSubmit label=\"Save Changes\" className=\"mt-4\" />\n */\nexport const TanStackActionSubmit: React.FC<{\n  /** Button label text. Defaults to `'Submit'` when omitted. */\n  label?: string;\n  /** Additional CSS class names applied to the button element. */\n  className?: string;\n}> = ({ label, className }) => {\n  const form = useTanStackFormContext();\n\n  const onSubmit = useCallback(async () => {\n    await form.handleSubmit({ submitAction: 'submit' });\n    if (!form.state.isSubmitSuccessful) return;\n    form.reset();\n  }, [form]);\n  return (\n    <form.Subscribe\n      selector={state => ({\n        disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n        isSubmitting: state.isSubmitting,\n      })}\n      children={({ disabled, isSubmitting }) => {\n        return (\n          <Button type=\"button\" size=\"md\" disabled={disabled} isLoading={isSubmitting} className={cn('min-h-8 min-w-32', className)} onClick={onSubmit}>\n            {label ?? 'Xác nhận'}\n          </Button>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"0NAiBA,MAAa,GAKP,CAAE,QAAO,eAAgB,CAC7B,IAAM,EAAO,EAAuB,EAE9B,EAAW,EAAY,SAAY,CACvC,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAAG,CAAC,CAAI,CAAC,EACT,OACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,KAAe,WAAU,UAAW,EAAc,UAAW,EAAG,mBAAoB,CAAS,EAAG,QAAS,WACjI,GAAS,UACJ,CAAA,CAGb,CAAA,CAEL"}

package/dist/{actions-form-3ItwYOFj.cjs → actions-form-CNW4nhAP.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./tanstack-form-CX3lC3mC.cjs");let n=require("lucide-react"),r=require("react/jsx-runtime");const i=({type:i=`create`})=>{let a=t.K();return(0,r.jsxs)(`div`,{className:`flex h-8 items-center justify-between`,children:[(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:t})=>(0,r.jsx)(e.Button,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:t,className:`h-full min-w-32`,onClick:()=>a.reset(),children:`Hủy bỏ`})}),i===`create`&&(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:i})=>(0,r.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:i,className:`h-full min-w-32`,onClick:async()=>{await a.handleSubmit({submitAction:`create`}),a.state.isSubmitSuccessful&&a.reset()},children:[(0,r.jsx)(n.PlusIcon,{}),`Thêm mới`]})}),i===`update`&&(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:i})=>(0,r.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:i,className:`h-full min-w-32`,onClick:async()=>{await a.handleSubmit({submitAction:`update`}),a.state.isSubmitSuccessful&&a.reset()},children:[(0,r.jsx)(n.ArrowDownToLine,{}),`Cập nhật`]})})]})};exports.TanStackActionsForm=i;
-//# sourceMappingURL=actions-form-3ItwYOFj.cjs.map
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-Bae0TOEr.cjs");let n=require("lucide-react"),r=require("react/jsx-runtime");const i=({type:i=`create`})=>{let a=t.K();return(0,r.jsxs)(`div`,{className:`flex h-8 items-center justify-between`,children:[(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:t})=>(0,r.jsx)(e.Button,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:t,className:`h-full min-w-32`,onClick:()=>a.reset(),children:`Hủy bỏ`})}),i===`create`&&(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:i})=>(0,r.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:i,className:`h-full min-w-32`,onClick:async()=>{await a.handleSubmit({submitAction:`create`}),a.state.isSubmitSuccessful&&a.reset()},children:[(0,r.jsx)(n.PlusIcon,{}),`Thêm mới`]})}),i===`update`&&(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:i})=>(0,r.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:i,className:`h-full min-w-32`,onClick:async()=>{await a.handleSubmit({submitAction:`update`}),a.state.isSubmitSuccessful&&a.reset()},children:[(0,r.jsx)(n.ArrowDownToLine,{}),`Cập nhật`]})})]})};exports.TanStackActionsForm=i;
+//# sourceMappingURL=actions-form-CNW4nhAP.cjs.map

package/dist/{actions-form-3ItwYOFj.cjs.map → actions-form-CNW4nhAP.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"actions-form-3ItwYOFj.cjs","names":["useTanStackFormContext","Button","PlusIcon","ArrowDownToLine"],"sources":["../packages/components/features/tanstack-form/components/forms/actions-form.tsx"],"sourcesContent":["import { ArrowDownToLine, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.\n *\n * @example\n * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionsForm type=\"create\" />\n *\n * // For an update workflow:\n * <TanStackActionsForm type=\"update\" />\n */\nexport const TanStackActionsForm: React.FC<\n  React.PropsWithChildren<{\n    /**\n     * Determines which submit button variant is rendered.\n     * - `'create'` — shows an \"Add New\" button that resets the form on success.\n     * - `'update'` — shows an \"Update\" button that resets the form on success.\n     * Defaults to `'create'`.\n     */\n    type?: 'create' | 'update';\n  }>\n> = ({ type = 'create' }) => {\n  const form = useTanStackFormContext();\n  return (\n    <div className=\"flex h-8 items-center justify-between\">\n      <form.Subscribe\n        selector={state => ({\n          disabled: state.isPristine || state.isSubmitting,\n        })}\n        children={({ disabled }) => {\n          return (\n            <Button color=\"muted\" variant=\"outline\" type=\"button\" size=\"md\" disabled={disabled} className=\"h-full min-w-32\" onClick={() => form.reset()}>\n              Hủy bỏ\n            </Button>\n          );\n        }}\n      />\n      {type === 'create' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'create' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <PlusIcon />\n                Thêm mới\n              </Button>\n            );\n          }}\n        />\n      )}\n      {type === 'update' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'update' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <ArrowDownToLine />\n                Cập nhật\n              </Button>\n            );\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"0IAkBA,MAAa,GAUR,CAAE,OAAO,YAAe,CAC3B,IAAM,EAAOA,EAAAA,EAAuB,EACpC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iDAAf,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,EAAM,YACtC,GACA,UAAW,CAAE,eAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,MAAM,QAAQ,QAAQ,UAAU,KAAK,SAAS,KAAK,KAAe,WAAU,UAAU,kBAAkB,YAAe,EAAK,MAAM,WAAG,QAErI,CAAA,CAGb,CAAA,EACA,IAAS,WACR,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,EAYE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAW,CAAA,EAAC,UAEN,GAGb,CAAA,EAEF,IAAS,WACR,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,KAAA,CAACD,EAAAA,OAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,EAYE,EAAA,EAAA,IAAA,CAACE,EAAAA,gBAAD,CAAkB,CAAA,EAAC,UAEb,GAGb,CAAA,CAEA,GAET"}
+{"version":3,"file":"actions-form-CNW4nhAP.cjs","names":["useTanStackFormContext","Button","PlusIcon","ArrowDownToLine"],"sources":["../packages/components/features/tanstack-form/components/forms/actions-form.tsx"],"sourcesContent":["import { ArrowDownToLine, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.\n *\n * @example\n * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionsForm type=\"create\" />\n *\n * // For an update workflow:\n * <TanStackActionsForm type=\"update\" />\n */\nexport const TanStackActionsForm: React.FC<\n  React.PropsWithChildren<{\n    /**\n     * Determines which submit button variant is rendered.\n     * - `'create'` — shows an \"Add New\" button that resets the form on success.\n     * - `'update'` — shows an \"Update\" button that resets the form on success.\n     * Defaults to `'create'`.\n     */\n    type?: 'create' | 'update';\n  }>\n> = ({ type = 'create' }) => {\n  const form = useTanStackFormContext();\n  return (\n    <div className=\"flex h-8 items-center justify-between\">\n      <form.Subscribe\n        selector={state => ({\n          disabled: state.isPristine || state.isSubmitting,\n        })}\n        children={({ disabled }) => {\n          return (\n            <Button color=\"muted\" variant=\"outline\" type=\"button\" size=\"md\" disabled={disabled} className=\"h-full min-w-32\" onClick={() => form.reset()}>\n              Hủy bỏ\n            </Button>\n          );\n        }}\n      />\n      {type === 'create' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'create' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <PlusIcon />\n                Thêm mới\n              </Button>\n            );\n          }}\n        />\n      )}\n      {type === 'update' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'update' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <ArrowDownToLine />\n                Cập nhật\n              </Button>\n            );\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"0IAkBA,MAAa,GAUR,CAAE,OAAO,YAAe,CAC3B,IAAM,EAAOA,EAAAA,EAAuB,EACpC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iDAAf,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,EAAM,YACtC,GACA,UAAW,CAAE,eAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,MAAM,QAAQ,QAAQ,UAAU,KAAK,SAAS,KAAK,KAAe,WAAU,UAAU,kBAAkB,YAAe,EAAK,MAAM,WAAG,QAErI,CAAA,CAGb,CAAA,EACA,IAAS,WACR,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,EAYE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAW,CAAA,EAAC,UAEN,GAGb,CAAA,EAEF,IAAS,WACR,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,KAAA,CAACD,EAAAA,OAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,EAYE,EAAA,EAAA,IAAA,CAACE,EAAAA,gBAAD,CAAkB,CAAA,EAAC,UAEb,GAGb,CAAA,CAEA,GAET"}

package/dist/{actions-form-DxbT1lip.mjs → actions-form-f8sejItb.mjs}

@@ -1,2 +1,2 @@
-import{Button as e}from"./ui/button.mjs";import{K as t}from"./tanstack-form-CKAWexet.mjs";import{ArrowDownToLine as n,PlusIcon as r}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({type:o=`create`})=>{let s=t();return a(`div`,{className:`flex h-8 items-center justify-between`,children:[i(s.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:t})=>i(e,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:t,className:`h-full min-w-32`,onClick:()=>s.reset(),children:`Hủy bỏ`})}),o===`create`&&i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:n})=>a(e,{type:`submit`,size:`md`,disabled:t,isLoading:n,className:`h-full min-w-32`,onClick:async()=>{await s.handleSubmit({submitAction:`create`}),s.state.isSubmitSuccessful&&s.reset()},children:[i(r,{}),`Thêm mới`]})}),o===`update`&&i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:r})=>a(e,{type:`submit`,size:`md`,disabled:t,isLoading:r,className:`h-full min-w-32`,onClick:async()=>{await s.handleSubmit({submitAction:`update`}),s.state.isSubmitSuccessful&&s.reset()},children:[i(n,{}),`Cập nhật`]})})]})};export{o as TanStackActionsForm};
-//# sourceMappingURL=actions-form-DxbT1lip.mjs.map
+import{Button as e}from"./ui/button.mjs";import{K as t}from"./tanstack-form-AGwPfwiM.mjs";import{ArrowDownToLine as n,PlusIcon as r}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({type:o=`create`})=>{let s=t();return a(`div`,{className:`flex h-8 items-center justify-between`,children:[i(s.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:t})=>i(e,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:t,className:`h-full min-w-32`,onClick:()=>s.reset(),children:`Hủy bỏ`})}),o===`create`&&i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:n})=>a(e,{type:`submit`,size:`md`,disabled:t,isLoading:n,className:`h-full min-w-32`,onClick:async()=>{await s.handleSubmit({submitAction:`create`}),s.state.isSubmitSuccessful&&s.reset()},children:[i(r,{}),`Thêm mới`]})}),o===`update`&&i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:r})=>a(e,{type:`submit`,size:`md`,disabled:t,isLoading:r,className:`h-full min-w-32`,onClick:async()=>{await s.handleSubmit({submitAction:`update`}),s.state.isSubmitSuccessful&&s.reset()},children:[i(n,{}),`Cập nhật`]})})]})};export{o as TanStackActionsForm};
+//# sourceMappingURL=actions-form-f8sejItb.mjs.map

package/dist/{actions-form-DxbT1lip.mjs.map → actions-form-f8sejItb.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"actions-form-DxbT1lip.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/actions-form.tsx"],"sourcesContent":["import { ArrowDownToLine, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.\n *\n * @example\n * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionsForm type=\"create\" />\n *\n * // For an update workflow:\n * <TanStackActionsForm type=\"update\" />\n */\nexport const TanStackActionsForm: React.FC<\n  React.PropsWithChildren<{\n    /**\n     * Determines which submit button variant is rendered.\n     * - `'create'` — shows an \"Add New\" button that resets the form on success.\n     * - `'update'` — shows an \"Update\" button that resets the form on success.\n     * Defaults to `'create'`.\n     */\n    type?: 'create' | 'update';\n  }>\n> = ({ type = 'create' }) => {\n  const form = useTanStackFormContext();\n  return (\n    <div className=\"flex h-8 items-center justify-between\">\n      <form.Subscribe\n        selector={state => ({\n          disabled: state.isPristine || state.isSubmitting,\n        })}\n        children={({ disabled }) => {\n          return (\n            <Button color=\"muted\" variant=\"outline\" type=\"button\" size=\"md\" disabled={disabled} className=\"h-full min-w-32\" onClick={() => form.reset()}>\n              Hủy bỏ\n            </Button>\n          );\n        }}\n      />\n      {type === 'create' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'create' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <PlusIcon />\n                Thêm mới\n              </Button>\n            );\n          }}\n        />\n      )}\n      {type === 'update' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'update' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <ArrowDownToLine />\n                Cập nhật\n              </Button>\n            );\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"yMAkBA,MAAa,GAUR,CAAE,OAAO,YAAe,CAC3B,IAAM,EAAO,EAAuB,EACpC,OACE,EAAC,MAAD,CAAK,UAAU,iDAAf,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,EAAM,YACtC,GACA,UAAW,CAAE,cAET,EAAC,EAAD,CAAQ,MAAM,QAAQ,QAAQ,UAAU,KAAK,SAAS,KAAK,KAAe,WAAU,UAAU,kBAAkB,YAAe,EAAK,MAAM,WAAG,QAErI,CAAA,CAGb,CAAA,EACA,IAAS,UACR,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,CAYE,EAAC,EAAD,CAAW,CAAA,EAAC,UAEN,GAGb,CAAA,EAEF,IAAS,UACR,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,CAYE,EAAC,EAAD,CAAkB,CAAA,EAAC,UAEb,GAGb,CAAA,CAEA,GAET"}
+{"version":3,"file":"actions-form-f8sejItb.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/actions-form.tsx"],"sourcesContent":["import { ArrowDownToLine, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.\n *\n * @example\n * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionsForm type=\"create\" />\n *\n * // For an update workflow:\n * <TanStackActionsForm type=\"update\" />\n */\nexport const TanStackActionsForm: React.FC<\n  React.PropsWithChildren<{\n    /**\n     * Determines which submit button variant is rendered.\n     * - `'create'` — shows an \"Add New\" button that resets the form on success.\n     * - `'update'` — shows an \"Update\" button that resets the form on success.\n     * Defaults to `'create'`.\n     */\n    type?: 'create' | 'update';\n  }>\n> = ({ type = 'create' }) => {\n  const form = useTanStackFormContext();\n  return (\n    <div className=\"flex h-8 items-center justify-between\">\n      <form.Subscribe\n        selector={state => ({\n          disabled: state.isPristine || state.isSubmitting,\n        })}\n        children={({ disabled }) => {\n          return (\n            <Button color=\"muted\" variant=\"outline\" type=\"button\" size=\"md\" disabled={disabled} className=\"h-full min-w-32\" onClick={() => form.reset()}>\n              Hủy bỏ\n            </Button>\n          );\n        }}\n      />\n      {type === 'create' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'create' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <PlusIcon />\n                Thêm mới\n              </Button>\n            );\n          }}\n        />\n      )}\n      {type === 'update' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'update' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <ArrowDownToLine />\n                Cập nhật\n              </Button>\n            );\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"yMAkBA,MAAa,GAUR,CAAE,OAAO,YAAe,CAC3B,IAAM,EAAO,EAAuB,EACpC,OACE,EAAC,MAAD,CAAK,UAAU,iDAAf,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,EAAM,YACtC,GACA,UAAW,CAAE,cAET,EAAC,EAAD,CAAQ,MAAM,QAAQ,QAAQ,UAAU,KAAK,SAAS,KAAK,KAAe,WAAU,UAAU,kBAAkB,YAAe,EAAK,MAAM,WAAG,QAErI,CAAA,CAGb,CAAA,EACA,IAAS,UACR,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,CAYE,EAAC,EAAD,CAAW,CAAA,EAAC,UAEN,GAGb,CAAA,EAEF,IAAS,UACR,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,CAYE,EAAC,EAAD,CAAkB,CAAA,EAAC,UAEb,GAGb,CAAA,CAEA,GAET"}

package/dist/{button-Bk4Y6_9I.d.cts → button-CKRN3ZQT.d.cts}

@@ -7,7 +7,7 @@ import { VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
   variant?: "default" | "soft" | "outline" | "link" | "ghost" | "subtle" | null | undefined;
   color?: "primary" | "secondary" | "muted" | "info" | "success" | "warning" | "danger" | "important" | null | undefined;
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | null | undefined;
+  size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 //#endregion
@@ -168,4 +168,4 @@ declare function Button({
 }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-Bk4Y6_9I.d.cts.map
+//# sourceMappingURL=button-CKRN3ZQT.d.cts.map

package/dist/{button-Bk4Y6_9I.d.mts → button-CKRN3ZQT.d.mts}

@@ -7,7 +7,7 @@ import { VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
   variant?: "default" | "soft" | "outline" | "link" | "ghost" | "subtle" | null | undefined;
   color?: "primary" | "secondary" | "muted" | "info" | "success" | "warning" | "danger" | "important" | null | undefined;
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | null | undefined;
+  size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 //#endregion
@@ -168,4 +168,4 @@ declare function Button({
 }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-Bk4Y6_9I.d.mts.map
+//# sourceMappingURL=button-CKRN3ZQT.d.mts.map

package/dist/{calendar-DPKt7D3w.d.mts → calendar-CIhMEz65.d.mts}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-Bk4Y6_9I.mjs";
+import { t as Button } from "./button-CKRN3ZQT.mjs";
 import { DayButton, DayPicker } from "react-day-picker";
 
 //#region packages/components/ui/calendar.d.ts
@@ -40,4 +40,4 @@ declare function Calendar({
 }): import("react").JSX.Element;
 //#endregion
 export { CalendarDayButton as n, Calendar as t };
-//# sourceMappingURL=calendar-DPKt7D3w.d.mts.map
+//# sourceMappingURL=calendar-CIhMEz65.d.mts.map

package/dist/{calendar-stv2bJv0.d.cts → calendar-DJdVw-yD.d.cts}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-Bk4Y6_9I.cjs";
+import { t as Button } from "./button-CKRN3ZQT.cjs";
 import { DayButton, DayPicker } from "react-day-picker";
 
 //#region packages/components/ui/calendar.d.ts
@@ -40,4 +40,4 @@ declare function Calendar({
 }): import("react").JSX.Element;
 //#endregion
 export { CalendarDayButton as n, Calendar as t };
-//# sourceMappingURL=calendar-stv2bJv0.d.cts.map
+//# sourceMappingURL=calendar-DJdVw-yD.d.cts.map

package/dist/{carousel-CV3IZ96x.d.mts → carousel-BniJSLfd.d.mts}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-Bk4Y6_9I.mjs";
+import { t as Button } from "./button-CKRN3ZQT.mjs";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 
 //#region packages/components/ui/carousel.d.ts
@@ -67,4 +67,4 @@ declare function CarouselNext({
 }: React.ComponentProps<typeof Button>): import("react").JSX.Element;
 //#endregion
 export { CarouselNext as a, CarouselItem as i, CarouselApi as n, CarouselPrevious as o, CarouselContent as r, Carousel as t };
-//# sourceMappingURL=carousel-CV3IZ96x.d.mts.map
+//# sourceMappingURL=carousel-BniJSLfd.d.mts.map

package/dist/{carousel-c2XuzmYN.d.cts → carousel-D4--8HfP.d.cts}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-Bk4Y6_9I.cjs";
+import { t as Button } from "./button-CKRN3ZQT.cjs";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 
 //#region packages/components/ui/carousel.d.ts
@@ -67,4 +67,4 @@ declare function CarouselNext({
 }: React.ComponentProps<typeof Button>): import("react").JSX.Element;
 //#endregion
 export { CarouselNext as a, CarouselItem as i, CarouselApi as n, CarouselPrevious as o, CarouselContent as r, Carousel as t };
-//# sourceMappingURL=carousel-c2XuzmYN.d.cts.map
+//# sourceMappingURL=carousel-D4--8HfP.d.cts.map

package/dist/{checkbox-field-BRqU_dYY.cjs → checkbox-field-Ck_VADFe.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/checkbox.cjs"),t=require("./tanstack-form-CX3lC3mC.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("react/jsx-runtime"),i=require("@tanstack/react-form");const a=({label:a,description:o,options:s,tooltip:c,helperText:l,orientation:u})=>{let d=t.G(),f=(0,i.useStore)(d.form.store,({isSubmitting:e})=>e);return(0,r.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,r.jsxs)(n.Field,{orientation:u,children:[(0,r.jsxs)(n.FieldContent,{children:[(0,r.jsxs)(n.FieldLabel,{children:[a,c&&(0,r.jsx)(n.FieldTooltip,{tooltip:c})]}),(0,r.jsx)(n.FieldDescription,{children:o}),(0,r.jsx)(n.FieldNote,{isShow:!!l,children:l})]}),(0,r.jsx)(n.FieldContentMain,{children:(0,r.jsx)(n.FieldGroup,{className:`flex flex-col gap-y-2`,children:s.map(t=>(0,r.jsxs)(n.Field,{orientation:`horizontal`,children:[(0,r.jsx)(e.Checkbox,{id:`${d.name}-${t.value}`,name:d.name,checked:d.state.value?.includes(t.value)??!1,disabled:f,onCheckedChange:e=>{if(e&&d.state.value!==null)d.pushValue(t.value);else if(e&&d.state.value===null)d.setValue([t.value]);else if(!e&&d.state.value!==null){let e=d.state.value.indexOf(t.value);e>-1&&d.removeValue(e)}else d.setValue(null)}}),(0,r.jsx)(n.FieldLabel,{htmlFor:`${d.name}-${t.value}`,className:`text-text-positive`,children:t.label})]},t.value))})})]}),(0,r.jsx)(n.FieldSeparator,{})]})};exports.CheckboxField=a;
-//# sourceMappingURL=checkbox-field-BRqU_dYY.cjs.map
+const e=require("./ui/checkbox.cjs"),t=require("./tanstack-form-Bae0TOEr.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("react/jsx-runtime"),i=require("@tanstack/react-form");const a=({label:a,description:o,options:s,tooltip:c,helperText:l,orientation:u})=>{let d=t.G(),f=(0,i.useStore)(d.form.store,({isSubmitting:e})=>e);return(0,r.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,r.jsxs)(n.Field,{orientation:u,children:[(0,r.jsxs)(n.FieldContent,{children:[(0,r.jsxs)(n.FieldLabel,{children:[a,c&&(0,r.jsx)(n.FieldTooltip,{tooltip:c})]}),(0,r.jsx)(n.FieldDescription,{children:o}),(0,r.jsx)(n.FieldNote,{isShow:!!l,children:l})]}),(0,r.jsx)(n.FieldContentMain,{children:(0,r.jsx)(n.FieldGroup,{className:`flex flex-col gap-y-2`,children:s.map(t=>(0,r.jsxs)(n.Field,{orientation:`horizontal`,children:[(0,r.jsx)(e.Checkbox,{id:`${d.name}-${t.value}`,name:d.name,checked:d.state.value?.includes(t.value)??!1,disabled:f,onCheckedChange:e=>{if(e&&d.state.value!==null)d.pushValue(t.value);else if(e&&d.state.value===null)d.setValue([t.value]);else if(!e&&d.state.value!==null){let e=d.state.value.indexOf(t.value);e>-1&&d.removeValue(e)}else d.setValue(null)}}),(0,r.jsx)(n.FieldLabel,{htmlFor:`${d.name}-${t.value}`,className:`text-text-positive`,children:t.label})]},t.value))})})]}),(0,r.jsx)(n.FieldSeparator,{})]})};exports.CheckboxField=a;
+//# sourceMappingURL=checkbox-field-Ck_VADFe.cjs.map

package/dist/{checkbox-field-BRqU_dYY.cjs.map → checkbox-field-Ck_VADFe.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field-BRqU_dYY.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","Checkbox","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/checkbox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldContentMain, FieldDescription, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nimport type { CheckboxFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected checkbox group field that manages an array of selected string values,\n * supporting multi-selection and submission-state disabling.\n *\n * @example\n * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"roles\">\n *   {() => (\n *     <CheckboxField\n *       label=\"Roles\"\n *       options={[\n *         { value: 'admin', label: 'Admin' },\n *         { value: 'editor', label: 'Editor' },\n *       ]}\n *       helperText=\"Select one or more roles\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const CheckboxField: React.FC<Props> = ({ label, description, options, tooltip, helperText, orientation }) => {\n  const field = useTanStackFieldContext<string[] | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n        <FieldContentMain>\n          <FieldGroup className=\"flex flex-col gap-y-2\">\n            {options.map(option => {\n              return (\n                <Field key={option.value} orientation=\"horizontal\">\n                  <Checkbox\n                    id={`${field.name}-${option.value}`}\n                    name={field.name}\n                    checked={field.state.value?.includes(option.value) ?? false}\n                    disabled={isSubmitting}\n                    onCheckedChange={checked => {\n                      if (checked && field.state.value !== null) {\n                        field.pushValue(option.value);\n                      } else if (checked && field.state.value === null) {\n                        field.setValue([option.value]);\n                      } else if (!checked && field.state.value !== null) {\n                        const index = field.state.value.indexOf(option.value);\n                        if (index > -1) field.removeValue(index);\n                      } else {\n                        field.setValue(null);\n                      }\n                    }}\n                  />\n                  <FieldLabel htmlFor={`${field.name}-${option.value}`} className=\"text-text-positive\">\n                    {option.label}\n                  </FieldLabel>\n                </Field>\n              );\n            })}\n          </FieldGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"sLA8BA,MAAa,GAAkC,CAAE,QAAO,cAAa,UAAS,UAAS,aAAY,iBAAkB,CACnH,IAAM,EAAQA,EAAAA,EAAyC,EACjD,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,uBAApB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACP,EAAAA,WAAD,CAAY,UAAU,iCACnB,EAAQ,IAAI,IAET,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAA0B,YAAY,sBAAtC,EACE,EAAA,EAAA,IAAA,CAACO,EAAAA,SAAD,CACE,GAAI,GAAG,EAAM,KAAK,GAAG,EAAO,QAC5B,KAAM,EAAM,KACZ,QAAS,EAAM,MAAM,OAAO,SAAS,EAAO,KAAK,GAAK,GACtD,SAAU,EACV,gBAAiB,GAAW,CAC1B,GAAI,GAAW,EAAM,MAAM,QAAU,KACnC,EAAM,UAAU,EAAO,KAAK,OACvB,GAAI,GAAW,EAAM,MAAM,QAAU,KAC1C,EAAM,SAAS,CAAC,EAAO,KAAK,CAAC,OACxB,GAAI,CAAC,GAAW,EAAM,MAAM,QAAU,KAAM,CACjD,IAAM,EAAQ,EAAM,MAAM,MAAM,QAAQ,EAAO,KAAK,EAChD,EAAQ,IAAI,EAAM,YAAY,CAAK,CACzC,MACE,EAAM,SAAS,IAAI,CAEvB,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACL,EAAAA,WAAD,CAAY,QAAS,GAAG,EAAM,KAAK,GAAG,EAAO,QAAS,UAAU,8BAC7D,EAAO,KACE,CAAA,CACP,GAtBK,EAAO,KAsBZ,CAEV,CACS,CAAA,CACI,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACM,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"checkbox-field-Ck_VADFe.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","Checkbox","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/checkbox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldContentMain, FieldDescription, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nimport type { CheckboxFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected checkbox group field that manages an array of selected string values,\n * supporting multi-selection and submission-state disabling.\n *\n * @example\n * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"roles\">\n *   {() => (\n *     <CheckboxField\n *       label=\"Roles\"\n *       options={[\n *         { value: 'admin', label: 'Admin' },\n *         { value: 'editor', label: 'Editor' },\n *       ]}\n *       helperText=\"Select one or more roles\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const CheckboxField: React.FC<Props> = ({ label, description, options, tooltip, helperText, orientation }) => {\n  const field = useTanStackFieldContext<string[] | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n        <FieldContentMain>\n          <FieldGroup className=\"flex flex-col gap-y-2\">\n            {options.map(option => {\n              return (\n                <Field key={option.value} orientation=\"horizontal\">\n                  <Checkbox\n                    id={`${field.name}-${option.value}`}\n                    name={field.name}\n                    checked={field.state.value?.includes(option.value) ?? false}\n                    disabled={isSubmitting}\n                    onCheckedChange={checked => {\n                      if (checked && field.state.value !== null) {\n                        field.pushValue(option.value);\n                      } else if (checked && field.state.value === null) {\n                        field.setValue([option.value]);\n                      } else if (!checked && field.state.value !== null) {\n                        const index = field.state.value.indexOf(option.value);\n                        if (index > -1) field.removeValue(index);\n                      } else {\n                        field.setValue(null);\n                      }\n                    }}\n                  />\n                  <FieldLabel htmlFor={`${field.name}-${option.value}`} className=\"text-text-positive\">\n                    {option.label}\n                  </FieldLabel>\n                </Field>\n              );\n            })}\n          </FieldGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"sLA8BA,MAAa,GAAkC,CAAE,QAAO,cAAa,UAAS,UAAS,aAAY,iBAAkB,CACnH,IAAM,EAAQA,EAAAA,EAAyC,EACjD,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,uBAApB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACP,EAAAA,WAAD,CAAY,UAAU,iCACnB,EAAQ,IAAI,IAET,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAA0B,YAAY,sBAAtC,EACE,EAAA,EAAA,IAAA,CAACO,EAAAA,SAAD,CACE,GAAI,GAAG,EAAM,KAAK,GAAG,EAAO,QAC5B,KAAM,EAAM,KACZ,QAAS,EAAM,MAAM,OAAO,SAAS,EAAO,KAAK,GAAK,GACtD,SAAU,EACV,gBAAiB,GAAW,CAC1B,GAAI,GAAW,EAAM,MAAM,QAAU,KACnC,EAAM,UAAU,EAAO,KAAK,OACvB,GAAI,GAAW,EAAM,MAAM,QAAU,KAC1C,EAAM,SAAS,CAAC,EAAO,KAAK,CAAC,OACxB,GAAI,CAAC,GAAW,EAAM,MAAM,QAAU,KAAM,CACjD,IAAM,EAAQ,EAAM,MAAM,MAAM,QAAQ,EAAO,KAAK,EAChD,EAAQ,IAAI,EAAM,YAAY,CAAK,CACzC,MACE,EAAM,SAAS,IAAI,CAEvB,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACL,EAAAA,WAAD,CAAY,QAAS,GAAG,EAAM,KAAK,GAAG,EAAO,QAAS,UAAU,8BAC7D,EAAO,KACE,CAAA,CACP,GAtBK,EAAO,KAsBZ,CAEV,CACS,CAAA,CACI,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACM,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{checkbox-field-BAQN-Yno.mjs → checkbox-field-Csro0Nla.mjs}

@@ -1,2 +1,2 @@
-import{Checkbox as e}from"./ui/checkbox.mjs";import{G as t}from"./tanstack-form-CKAWexet.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-V2DoD8qL.mjs";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{useStore as p}from"@tanstack/react-form";const m=({label:m,description:h,options:g,tooltip:_,helperText:v,orientation:y})=>{let b=t(),x=p(b.form.store,({isSubmitting:e})=>e);return f(o,{className:`gap-y-4 px-4`,children:[f(n,{orientation:y,children:[f(r,{children:[f(s,{children:[m,_&&d(u,{tooltip:_})]}),d(a,{children:h}),d(c,{isShow:!!v,children:v})]}),d(i,{children:d(o,{className:`flex flex-col gap-y-2`,children:g.map(t=>f(n,{orientation:`horizontal`,children:[d(e,{id:`${b.name}-${t.value}`,name:b.name,checked:b.state.value?.includes(t.value)??!1,disabled:x,onCheckedChange:e=>{if(e&&b.state.value!==null)b.pushValue(t.value);else if(e&&b.state.value===null)b.setValue([t.value]);else if(!e&&b.state.value!==null){let e=b.state.value.indexOf(t.value);e>-1&&b.removeValue(e)}else b.setValue(null)}}),d(s,{htmlFor:`${b.name}-${t.value}`,className:`text-text-positive`,children:t.label})]},t.value))})})]}),d(l,{})]})};export{m as CheckboxField};
-//# sourceMappingURL=checkbox-field-BAQN-Yno.mjs.map
+import{Checkbox as e}from"./ui/checkbox.mjs";import{G as t}from"./tanstack-form-AGwPfwiM.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-V2DoD8qL.mjs";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{useStore as p}from"@tanstack/react-form";const m=({label:m,description:h,options:g,tooltip:_,helperText:v,orientation:y})=>{let b=t(),x=p(b.form.store,({isSubmitting:e})=>e);return f(o,{className:`gap-y-4 px-4`,children:[f(n,{orientation:y,children:[f(r,{children:[f(s,{children:[m,_&&d(u,{tooltip:_})]}),d(a,{children:h}),d(c,{isShow:!!v,children:v})]}),d(i,{children:d(o,{className:`flex flex-col gap-y-2`,children:g.map(t=>f(n,{orientation:`horizontal`,children:[d(e,{id:`${b.name}-${t.value}`,name:b.name,checked:b.state.value?.includes(t.value)??!1,disabled:x,onCheckedChange:e=>{if(e&&b.state.value!==null)b.pushValue(t.value);else if(e&&b.state.value===null)b.setValue([t.value]);else if(!e&&b.state.value!==null){let e=b.state.value.indexOf(t.value);e>-1&&b.removeValue(e)}else b.setValue(null)}}),d(s,{htmlFor:`${b.name}-${t.value}`,className:`text-text-positive`,children:t.label})]},t.value))})})]}),d(l,{})]})};export{m as CheckboxField};
+//# sourceMappingURL=checkbox-field-Csro0Nla.mjs.map

package/dist/{checkbox-field-BAQN-Yno.mjs.map → checkbox-field-Csro0Nla.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field-BAQN-Yno.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/checkbox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldContentMain, FieldDescription, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nimport type { CheckboxFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected checkbox group field that manages an array of selected string values,\n * supporting multi-selection and submission-state disabling.\n *\n * @example\n * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"roles\">\n *   {() => (\n *     <CheckboxField\n *       label=\"Roles\"\n *       options={[\n *         { value: 'admin', label: 'Admin' },\n *         { value: 'editor', label: 'Editor' },\n *       ]}\n *       helperText=\"Select one or more roles\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const CheckboxField: React.FC<Props> = ({ label, description, options, tooltip, helperText, orientation }) => {\n  const field = useTanStackFieldContext<string[] | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n        <FieldContentMain>\n          <FieldGroup className=\"flex flex-col gap-y-2\">\n            {options.map(option => {\n              return (\n                <Field key={option.value} orientation=\"horizontal\">\n                  <Checkbox\n                    id={`${field.name}-${option.value}`}\n                    name={field.name}\n                    checked={field.state.value?.includes(option.value) ?? false}\n                    disabled={isSubmitting}\n                    onCheckedChange={checked => {\n                      if (checked && field.state.value !== null) {\n                        field.pushValue(option.value);\n                      } else if (checked && field.state.value === null) {\n                        field.setValue([option.value]);\n                      } else if (!checked && field.state.value !== null) {\n                        const index = field.state.value.indexOf(option.value);\n                        if (index > -1) field.removeValue(index);\n                      } else {\n                        field.setValue(null);\n                      }\n                    }}\n                  />\n                  <FieldLabel htmlFor={`${field.name}-${option.value}`} className=\"text-text-positive\">\n                    {option.label}\n                  </FieldLabel>\n                </Field>\n              );\n            })}\n          </FieldGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"gYA8BA,MAAa,GAAkC,CAAE,QAAO,cAAa,UAAS,UAAS,aAAY,iBAAkB,CACnH,IAAM,EAAQ,EAAyC,EACjD,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAoB,uBAApB,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,UAAU,iCACnB,EAAQ,IAAI,GAET,EAAC,EAAD,CAA0B,YAAY,sBAAtC,CACE,EAAC,EAAD,CACE,GAAI,GAAG,EAAM,KAAK,GAAG,EAAO,QAC5B,KAAM,EAAM,KACZ,QAAS,EAAM,MAAM,OAAO,SAAS,EAAO,KAAK,GAAK,GACtD,SAAU,EACV,gBAAiB,GAAW,CAC1B,GAAI,GAAW,EAAM,MAAM,QAAU,KACnC,EAAM,UAAU,EAAO,KAAK,OACvB,GAAI,GAAW,EAAM,MAAM,QAAU,KAC1C,EAAM,SAAS,CAAC,EAAO,KAAK,CAAC,OACxB,GAAI,CAAC,GAAW,EAAM,MAAM,QAAU,KAAM,CACjD,IAAM,EAAQ,EAAM,MAAM,MAAM,QAAQ,EAAO,KAAK,EAChD,EAAQ,IAAI,EAAM,YAAY,CAAK,CACzC,MACE,EAAM,SAAS,IAAI,CAEvB,CACD,CAAA,EACD,EAAC,EAAD,CAAY,QAAS,GAAG,EAAM,KAAK,GAAG,EAAO,QAAS,UAAU,8BAC7D,EAAO,KACE,CAAA,CACP,GAtBK,EAAO,KAsBZ,CAEV,CACS,CAAA,CACI,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"checkbox-field-Csro0Nla.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/checkbox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldContentMain, FieldDescription, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nimport type { CheckboxFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected checkbox group field that manages an array of selected string values,\n * supporting multi-selection and submission-state disabling.\n *\n * @example\n * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"roles\">\n *   {() => (\n *     <CheckboxField\n *       label=\"Roles\"\n *       options={[\n *         { value: 'admin', label: 'Admin' },\n *         { value: 'editor', label: 'Editor' },\n *       ]}\n *       helperText=\"Select one or more roles\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const CheckboxField: React.FC<Props> = ({ label, description, options, tooltip, helperText, orientation }) => {\n  const field = useTanStackFieldContext<string[] | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n        <FieldContentMain>\n          <FieldGroup className=\"flex flex-col gap-y-2\">\n            {options.map(option => {\n              return (\n                <Field key={option.value} orientation=\"horizontal\">\n                  <Checkbox\n                    id={`${field.name}-${option.value}`}\n                    name={field.name}\n                    checked={field.state.value?.includes(option.value) ?? false}\n                    disabled={isSubmitting}\n                    onCheckedChange={checked => {\n                      if (checked && field.state.value !== null) {\n                        field.pushValue(option.value);\n                      } else if (checked && field.state.value === null) {\n                        field.setValue([option.value]);\n                      } else if (!checked && field.state.value !== null) {\n                        const index = field.state.value.indexOf(option.value);\n                        if (index > -1) field.removeValue(index);\n                      } else {\n                        field.setValue(null);\n                      }\n                    }}\n                  />\n                  <FieldLabel htmlFor={`${field.name}-${option.value}`} className=\"text-text-positive\">\n                    {option.label}\n                  </FieldLabel>\n                </Field>\n              );\n            })}\n          </FieldGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"gYA8BA,MAAa,GAAkC,CAAE,QAAO,cAAa,UAAS,UAAS,aAAY,iBAAkB,CACnH,IAAM,EAAQ,EAAyC,EACjD,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAoB,uBAApB,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,UAAU,iCACnB,EAAQ,IAAI,GAET,EAAC,EAAD,CAA0B,YAAY,sBAAtC,CACE,EAAC,EAAD,CACE,GAAI,GAAG,EAAM,KAAK,GAAG,EAAO,QAC5B,KAAM,EAAM,KACZ,QAAS,EAAM,MAAM,OAAO,SAAS,EAAO,KAAK,GAAK,GACtD,SAAU,EACV,gBAAiB,GAAW,CAC1B,GAAI,GAAW,EAAM,MAAM,QAAU,KACnC,EAAM,UAAU,EAAO,KAAK,OACvB,GAAI,GAAW,EAAM,MAAM,QAAU,KAC1C,EAAM,SAAS,CAAC,EAAO,KAAK,CAAC,OACxB,GAAI,CAAC,GAAW,EAAM,MAAM,QAAU,KAAM,CACjD,IAAM,EAAQ,EAAM,MAAM,MAAM,QAAQ,EAAO,KAAK,EAChD,EAAQ,IAAI,EAAM,YAAY,CAAK,CACzC,MACE,EAAM,SAAS,IAAI,CAEvB,CACD,CAAA,EACD,EAAC,EAAD,CAAY,QAAS,GAAG,EAAM,KAAK,GAAG,EAAO,QAAS,UAAU,8BAC7D,EAAO,KACE,CAAA,CACP,GAtBK,EAAO,KAsBZ,CAEV,CACS,CAAA,CACI,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{combobox-field-yvQPJSFC.mjs → combobox-field-BMfA_taQ.mjs}

@@ -1,2 +1,2 @@
-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-CKAWexet.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-V2DoD8qL.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,ue=z.state.meta.errors.length>0,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&&ue&&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-yvQPJSFC.mjs.map
+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-AGwPfwiM.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-V2DoD8qL.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,ue=z.state.meta.errors.length>0,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&&ue&&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-BMfA_taQ.mjs.map

package/dist/{combobox-field-yvQPJSFC.mjs.map → combobox-field-BMfA_taQ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-field-yvQPJSFC.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    const _hasErrors = field.state.meta.errors.length > 0;\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 && _hasErrors && <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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"}
+{"version":3,"file":"combobox-field-BMfA_taQ.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    const _hasErrors = field.state.meta.errors.length > 0;\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 && _hasErrors && <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/{combobox-field-DnCpN--a.cjs → combobox-field-Bxrct4lA.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./ui/dialog.cjs"),n=require("./ui/command.cjs"),r=require("./tanstack-form-CX3lC3mC.cjs"),i=require("./ui/popover.cjs"),a=require("./field-BSLi-P0Q.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=E.state.meta.errors.length>0,z=y.find(({value:e})=>e===E.state.value)?.label,B=()=>{E.handleChange(null),E.handleBlur()},V=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:z?(0,l.jsx)(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:z}):(0,l.jsx)(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:h})}),H=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:[V(()=>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:B,children:[(0,l.jsx)(o.XIcon,{size:14}),`Xóa lựa chọn`]})}),H(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:V()}),(0,l.jsx)(i.PopoverContent,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:H(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:B,children:(0,l.jsx)(o.XIcon,{"aria-hidden":`true`})})]}),P&&C&&R&&(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-DnCpN--a.cjs.map
+const e=require("./ui/button.cjs"),t=require("./ui/dialog.cjs"),n=require("./ui/command.cjs"),r=require("./tanstack-form-Bae0TOEr.cjs"),i=require("./ui/popover.cjs"),a=require("./field-BSLi-P0Q.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=E.state.meta.errors.length>0,z=y.find(({value:e})=>e===E.state.value)?.label,B=()=>{E.handleChange(null),E.handleBlur()},V=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:z?(0,l.jsx)(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:z}):(0,l.jsx)(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:h})}),H=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:[V(()=>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:B,children:[(0,l.jsx)(o.XIcon,{size:14}),`Xóa lựa chọn`]})}),H(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:V()}),(0,l.jsx)(i.PopoverContent,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:H(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:B,children:(0,l.jsx)(o.XIcon,{"aria-hidden":`true`})})]}),P&&C&&R&&(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-Bxrct4lA.cjs.map

package/dist/{combobox-field-DnCpN--a.cjs.map → combobox-field-Bxrct4lA.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-field-DnCpN--a.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    const _hasErrors = field.state.meta.errors.length > 0;\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 && _hasErrors && <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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"}
+{"version":3,"file":"combobox-field-Bxrct4lA.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    const _hasErrors = field.state.meta.errors.length > 0;\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 && _hasErrors && <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/{date-field-DLsJBYw8.cjs → date-field-Ba6O0uV3.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./tanstack-form-CX3lC3mC.cjs"),n=require("./ui/popover.cjs"),r=require("./ui/calendar.cjs"),i=require("./field-BSLi-P0Q.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=O&&C.state.meta.errors.length>0,M=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:()=>M((0,l.endOfToday)()),children:`Hôm nay`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>M((0,l.endOfTomorrow)()),children:`Ngày mai`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>M((0,l.endOfYesterday)()),children:`Hôm qua`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>M((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:()=>M((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:()=>M((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:()=>M((0,l.startOfMonth)((0,l.endOfToday)())),children:`Tháng này`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>M((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&&M(e)}})})})]})]}),O&&_&&j&&(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-DLsJBYw8.cjs.map
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-Bae0TOEr.cjs"),n=require("./ui/popover.cjs"),r=require("./ui/calendar.cjs"),i=require("./field-BSLi-P0Q.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=O&&C.state.meta.errors.length>0,M=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:()=>M((0,l.endOfToday)()),children:`Hôm nay`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>M((0,l.endOfTomorrow)()),children:`Ngày mai`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>M((0,l.endOfYesterday)()),children:`Hôm qua`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>M((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:()=>M((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:()=>M((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:()=>M((0,l.startOfMonth)((0,l.endOfToday)())),children:`Tháng này`}),(0,c.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>M((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&&M(e)}})})})]})]}),O&&_&&j&&(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-Ba6O0uV3.cjs.map