@customafk/lunas-ui 0.2.82 → 0.2.84

package/dist/{list-display-DDeJoneW.cjs.map → list-display-CJvQ-wwT.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"list-display-DDeJoneW.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/list-display.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableListDisplay} component. */\ntype Props = {\n  /** Array of strings or numbers to render as inline pills. */\n  items: (string | number)[] | null | undefined;\n  /**\n   * Maximum number of pills shown before a `+N more` overflow badge appears\n   * (default: `3`).\n   */\n  maxVisible?: number;\n};\n\n/**\n * Renders an array of values as compact inline pills in a table cell.  When the\n * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all\n * remaining items in a tooltip.  Renders {@link UITableEmpty} for empty or absent\n * arrays.\n *\n * @example\n * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />\n */\nexport const UITableListDisplay: React.FC<Props> = ({ items, maxVisible = 3 }) => {\n  if (!items || items.length === 0) return <UITableEmpty />;\n\n  const visible = items.slice(0, maxVisible);\n  const overflow = items.slice(maxVisible);\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {visible.map((item, i) => (\n        <span\n          key={`item-${i.toString()}`}\n          className=\"weak inline-flex items-center rounded border border-border bg-white px-2 py-0.5 text-text-positive text-xs\"\n        >\n          {item}\n        </span>\n      ))}\n\n      {overflow.length > 0 && (\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span className=\"inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs\">\n                +{overflow.length} more\n              </span>\n            </TooltipTrigger>\n            <TooltipContent align=\"start\" className=\"flex max-w-64 flex-wrap gap-1 p-2\">\n              {overflow.map((item, i) => (\n                <span\n                  key={`item-${i.toString()}`}\n                  className=\"inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs\"\n                >\n                  {item}\n                </span>\n              ))}\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      )}\n    </div>\n  );\n};\n"],"mappings":"0GA4BA,MAAa,GAAuC,CAAE,QAAO,aAAa,KAAQ,CAChF,GAAI,CAAC,GAAS,EAAM,SAAW,EAAG,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAExD,IAAM,EAAU,EAAM,MAAM,EAAG,CAAU,EACnC,EAAW,EAAM,MAAM,CAAU,EAEvC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,CACG,EAAQ,KAAK,EAAM,KAClB,EAAA,EAAA,IAAA,CAAC,OAAD,CAEE,UAAU,6GAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,EAEA,EAAS,OAAS,IACjB,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,qHAAhB,SAAA,CAAqI,IACjI,EAAS,OAAO,OACd,GACQ,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,oCACrC,SAAA,EAAS,KAAK,EAAM,KACnB,EAAA,EAAA,IAAA,CAAC,OAAD,CAEE,UAAU,oGAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,CACa,CAAA,CACT,CAAA,CAAA,CACM,CAAA,CAEhB,GAET"}
+{"version":3,"file":"list-display-CJvQ-wwT.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/list-display.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableListDisplay} component. */\ntype Props = {\n  /** Array of strings or numbers to render as inline pills. */\n  items: (string | number)[] | null | undefined;\n  /**\n   * Maximum number of pills shown before a `+N more` overflow badge appears\n   * (default: `3`).\n   */\n  maxVisible?: number;\n};\n\n/**\n * Renders an array of values as compact inline pills in a table cell.  When the\n * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all\n * remaining items in a tooltip.  Renders {@link UITableEmpty} for empty or absent\n * arrays.\n *\n * @example\n * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />\n */\nexport const UITableListDisplay: React.FC<Props> = ({ items, maxVisible = 3 }) => {\n  if (!items || items.length === 0) return <UITableEmpty />;\n\n  const visible = items.slice(0, maxVisible);\n  const overflow = items.slice(maxVisible);\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {visible.map((item, i) => (\n        <span\n          key={`item-${i.toString()}`}\n          className=\"weak inline-flex items-center rounded border border-border bg-white px-2 py-0.5 text-text-positive text-xs\"\n        >\n          {item}\n        </span>\n      ))}\n\n      {overflow.length > 0 && (\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span className=\"inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs\">\n                +{overflow.length} more\n              </span>\n            </TooltipTrigger>\n            <TooltipContent align=\"start\" className=\"flex max-w-64 flex-wrap gap-1 p-2\">\n              {overflow.map((item, i) => (\n                <span\n                  key={`item-${i.toString()}`}\n                  className=\"inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs\"\n                >\n                  {item}\n                </span>\n              ))}\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      )}\n    </div>\n  );\n};\n"],"mappings":"0GA4BA,MAAa,GAAuC,CAAE,QAAO,aAAa,KAAQ,CAChF,GAAI,CAAC,GAAS,EAAM,SAAW,EAAG,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAExD,IAAM,EAAU,EAAM,MAAM,EAAG,CAAU,EACnC,EAAW,EAAM,MAAM,CAAU,EAEvC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,CACG,EAAQ,KAAK,EAAM,KAClB,EAAA,EAAA,IAAA,CAAC,OAAD,CAEE,UAAU,6GAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,EAEA,EAAS,OAAS,IACjB,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,qHAAhB,SAAA,CAAqI,IACjI,EAAS,OAAO,OACd,GACQ,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,oCACrC,SAAA,EAAS,KAAK,EAAM,KACnB,EAAA,EAAA,IAAA,CAAC,OAAD,CAEE,UAAU,oGAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,CACa,CAAA,CACT,CAAA,CAAA,CACM,CAAA,CAEhB,GAET"}

package/dist/{name-display-H5HFH1fU.mjs → name-display-BFoDcvt2.mjs}

@@ -1,2 +1,2 @@
-import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-Dg3KMBKA.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({name:s})=>s?o(t,{children:[a(r,{children:a(e,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:s})}),a(n,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:o(`div`,{className:`flex flex-col gap-y-2`,children:[a(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:s}),o(`p`,{className:`w-full text-end`,children:[s.length,` chars`]})]})})]}):a(i,{});export{s as UITableNameDisplay};
-//# sourceMappingURL=name-display-H5HFH1fU.mjs.map
+import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-CuoBQNqx.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({name:s})=>s?o(t,{children:[a(r,{children:a(e,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:s})}),a(n,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:o(`div`,{className:`flex flex-col gap-y-2`,children:[a(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:s}),o(`p`,{className:`w-full text-end`,children:[s.length,` chars`]})]})})]}):a(i,{});export{s as UITableNameDisplay};
+//# sourceMappingURL=name-display-BFoDcvt2.mjs.map

package/dist/{name-display-H5HFH1fU.mjs.map → name-display-BFoDcvt2.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"name-display-H5HFH1fU.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. */\ntype NameDisplayProps = {\n  /** The name string to display; renders an empty placeholder when falsy. */\n  name?: string | null | undefined;\n};\n\n/**\n * Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n *\n * @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  if (!name) return <UITableEmpty />;\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n          <p className=\"w-full text-end\">{name.length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"sOAqBA,MAAa,GAAkD,CAAE,UAC1D,EAEH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,0DAC/B,SAAA,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,SAAA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACE,EAAC,IAAD,CAAG,UAAU,2CAA4C,SAAA,CAAQ,CAAA,EACjE,EAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAK,OAAO,QAAS,CAClD,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA,EAdO,EAAC,EAAD,CAAe,CAAA"}
+{"version":3,"file":"name-display-BFoDcvt2.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. */\ntype NameDisplayProps = {\n  /** The name string to display; renders an empty placeholder when falsy. */\n  name?: string | null | undefined;\n};\n\n/**\n * Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n *\n * @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  if (!name) return <UITableEmpty />;\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n          <p className=\"w-full text-end\">{name.length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"sOAqBA,MAAa,GAAkD,CAAE,UAC1D,EAEH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,0DAC/B,SAAA,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,SAAA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACE,EAAC,IAAD,CAAG,UAAU,2CAA4C,SAAA,CAAQ,CAAA,EACjE,EAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAK,OAAO,QAAS,CAClD,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA,EAdO,EAAC,EAAD,CAAe,CAAA"}

package/dist/{name-display-CKnyugrP.cjs → name-display-Br7rcdqi.cjs}

@@ -1,2 +1,2 @@
-const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-BqZ4Zs6e.cjs");let r=require("react/jsx-runtime");const i=({name:i})=>i?(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{children:(0,r.jsx)(e.Paragraph,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:i})}),(0,r.jsx)(t.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,r.jsx)(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:i}),(0,r.jsxs)(`p`,{className:`w-full text-end`,children:[i.length,` chars`]})]})})]}):(0,r.jsx)(n.Q,{});exports.UITableNameDisplay=i;
-//# sourceMappingURL=name-display-CKnyugrP.cjs.map
+const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-DdLEj1dI.cjs");let r=require("react/jsx-runtime");const i=({name:i})=>i?(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{children:(0,r.jsx)(e.Paragraph,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:i})}),(0,r.jsx)(t.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,r.jsx)(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:i}),(0,r.jsxs)(`p`,{className:`w-full text-end`,children:[i.length,` chars`]})]})})]}):(0,r.jsx)(n.Q,{});exports.UITableNameDisplay=i;
+//# sourceMappingURL=name-display-Br7rcdqi.cjs.map

package/dist/{name-display-CKnyugrP.cjs.map → name-display-Br7rcdqi.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"name-display-CKnyugrP.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. */\ntype NameDisplayProps = {\n  /** The name string to display; renders an empty placeholder when falsy. */\n  name?: string | null | undefined;\n};\n\n/**\n * Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n *\n * @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  if (!name) return <UITableEmpty />;\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n          <p className=\"w-full text-end\">{name.length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"kJAqBA,MAAa,GAAkD,CAAE,UAC1D,GAEH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,0DAC/B,SAAA,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,2CAA4C,SAAA,CAAQ,CAAA,GACjE,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAK,OAAO,QAAS,CAClD,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA,GAdO,EAAA,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAe,CAAA"}
+{"version":3,"file":"name-display-Br7rcdqi.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. */\ntype NameDisplayProps = {\n  /** The name string to display; renders an empty placeholder when falsy. */\n  name?: string | null | undefined;\n};\n\n/**\n * Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n *\n * @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  if (!name) return <UITableEmpty />;\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n          <p className=\"w-full text-end\">{name.length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"kJAqBA,MAAa,GAAkD,CAAE,UAC1D,GAEH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,0DAC/B,SAAA,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,2CAA4C,SAAA,CAAQ,CAAA,GACjE,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAK,OAAO,QAAS,CAClD,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA,GAdO,EAAA,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAe,CAAA"}

package/dist/number-field-CMskIrWP.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-BiOihtxs.cjs"),t=require("./number-input-CAr3JaA-.cjs");let n=require("lucide-react"),r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=(0,r.memo)(({label:s,description:c,placeholder:l,tooltip:u,helperText:d,orientation:f=`responsive`,showErrorMessage:p=!0,rounding:m,decimalPlaces:h,precision:g,unit:_,required:v=!1,disabled:y=!1,allowNegative:b})=>{let x=(0,r.useId)(),S=(0,r.useId)(),C=e.rt(),w=(0,o.useStore)(C.form.store,({isSubmitting:e})=>e),T=y||w,E=C.state.meta.isDirty||C.state.meta.isTouched,D=E&&!C.state.meta.isValid,O=v&&C.state.value===null,k=!!C.state.meta.errors.length,A=(0,r.useCallback)(e=>{T||C.handleChange(e)},[T,C.handleChange]);return(0,a.jsxs)(e.X,{className:`gap-y-4 px-4`,children:[(0,a.jsxs)(e.G,{orientation:f,"data-invalid":D,children:[(0,a.jsxs)(e.K,{children:[(0,a.jsxs)(e.Z,{htmlFor:x,"aria-required":O,children:[s,u&&(0,a.jsx)(e.nt,{tooltip:u})]}),(0,a.jsx)(e.J,{children:c})]}),(0,a.jsxs)(e.q,{children:[(0,a.jsxs)(`div`,{className:`relative w-full`,children:[(0,a.jsx)(t.t,{id:x,value:C.state.value,"aria-invalid":D,"aria-describedby":S,placeholder:l,disabled:T,roundingRule:m,numberAfterDecimalPoint:h,precision:g,unitText:_,allowNegative:b,className:(0,i.cn)(T&&`pointer-events-none opacity-60`),onBlur:C.handleBlur,onValueChange:A}),w&&(0,a.jsx)(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5`,children:(0,a.jsx)(n.Loader2Icon,{className:`animate-spin text-primary-strong`})}),!w&&E&&p&&k&&(0,a.jsx)(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:(0,a.jsx)(n.BanIcon,{})}),(0,a.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-between gap-x-2`,children:E&&p?(0,a.jsx)(e.Y,{id:S,className:`flex-1`,errors:C.state.meta.errors}):(0,a.jsx)(`div`,{})})]}),(0,a.jsx)(e.$,{isShow:!!d,children:d})]})]}),(0,a.jsx)(e.et,{})]})});s.displayName=`NumberField`,exports.NumberField=s;
+//# sourceMappingURL=number-field-CMskIrWP.cjs.map

package/dist/{number-field-DKZz-27X.cjs.map → number-field-CMskIrWP.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"number-field-DKZz-27X.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","NumberInput","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\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 { NumberFieldProps } from '../../types';\n\n/**\n * A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n *\n * @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"quantity\">\n *   {() => (\n *     <NumberField\n *       label=\"Quantity\"\n *       placeholder=\"0\"\n *       unit=\"pcs\"\n *       decimalPlaces={2}\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    showErrorMessage = true,\n    rounding,\n    decimalPlaces,\n    precision,\n    unit,\n    required = false,\n    disabled = false,\n    allowNegative,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n\n    const field = useTanStackFieldContext<number | null>();\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 _hasErrors = !!field.state.meta.errors.length;\n\n    const onValueChange = useCallback(\n      (value: number | null) => {\n        if (isDisabled) return;\n        field.handleChange(value);\n      },\n      [isDisabled, field.handleChange]\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain>\n            <div className=\"relative w-full\">\n              <NumberInput\n                id={id}\n                value={field.state.value}\n                aria-invalid={_invalid}\n                aria-describedby={errorId}\n                placeholder={placeholder}\n                disabled={isDisabled}\n                roundingRule={rounding}\n                numberAfterDecimalPoint={decimalPlaces}\n                precision={precision}\n                unitText={unit}\n                allowNegative={allowNegative}\n                className={cn(isDisabled && 'pointer-events-none opacity-60')}\n                onBlur={field.handleBlur}\n                onValueChange={onValueChange}\n              />\n              {isSubmitting && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n                  <Loader2Icon className=\"animate-spin text-primary-strong\" />\n                </div>\n              )}\n              {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n                  <BanIcon />\n                </div>\n              )}\n              <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n              </div>\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"yRA+CA,MAAa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,GAAA,EAAA,EAAA,MAAA,CAAgB,EAEhB,EAAQA,EAAAA,EAAuC,EAE/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAI,gBAAe,EAAxC,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GAEd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,WAAA,EAAA,EAAA,GAAA,CAAc,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,4EACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,IAChD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gGACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAU,CAAA,CACP,CAAA,GAEP,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,uDACZ,SAAA,GAAY,GAAmB,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,GAAI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,CACL,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}
+{"version":3,"file":"number-field-CMskIrWP.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","NumberInput","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\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 { NumberFieldProps } from '../../types';\n\n/**\n * A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n *\n * @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"quantity\">\n *   {() => (\n *     <NumberField\n *       label=\"Quantity\"\n *       placeholder=\"0\"\n *       unit=\"pcs\"\n *       decimalPlaces={2}\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    showErrorMessage = true,\n    rounding,\n    decimalPlaces,\n    precision,\n    unit,\n    required = false,\n    disabled = false,\n    allowNegative,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n\n    const field = useTanStackFieldContext<number | null>();\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 _hasErrors = !!field.state.meta.errors.length;\n\n    const onValueChange = useCallback(\n      (value: number | null) => {\n        if (isDisabled) return;\n        field.handleChange(value);\n      },\n      [isDisabled, field.handleChange]\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain>\n            <div className=\"relative w-full\">\n              <NumberInput\n                id={id}\n                value={field.state.value}\n                aria-invalid={_invalid}\n                aria-describedby={errorId}\n                placeholder={placeholder}\n                disabled={isDisabled}\n                roundingRule={rounding}\n                numberAfterDecimalPoint={decimalPlaces}\n                precision={precision}\n                unitText={unit}\n                allowNegative={allowNegative}\n                className={cn(isDisabled && 'pointer-events-none opacity-60')}\n                onBlur={field.handleBlur}\n                onValueChange={onValueChange}\n              />\n              {isSubmitting && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n                  <Loader2Icon className=\"animate-spin text-primary-strong\" />\n                </div>\n              )}\n              {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n                  <BanIcon />\n                </div>\n              )}\n              <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n              </div>\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"uPA+CA,MAAa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,GAAA,EAAA,EAAA,MAAA,CAAgB,EAEhB,EAAQA,EAAAA,GAAuC,EAE/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,QAAS,EAAI,gBAAe,EAAxC,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GAEd,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,WAAA,EAAA,EAAA,GAAA,CAAc,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,4EACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,IAChD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gGACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAU,CAAA,CACP,CAAA,GAEP,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,uDACZ,SAAA,GAAY,GAAmB,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,GAAI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,CACL,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}

package/dist/number-field-DSGwWg7y.mjs

@@ -0,0 +1,2 @@
+import{$ as e,G as t,J as n,K as r,X as i,Y as a,Z as o,et as s,nt as c,q as l,rt as u}from"./tanstack-form-Do6xL2kv.mjs";import{t as d}from"./number-input-CJcEV9Cg.mjs";import{BanIcon as f,Loader2Icon as p}from"lucide-react";import{memo as m,useCallback as h,useId as g}from"react";import{cn as _}from"@customafk/react-toolkit/utils";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useStore as b}from"@tanstack/react-form";const x=m(({label:m,description:x,placeholder:S,tooltip:C,helperText:w,orientation:T=`responsive`,showErrorMessage:E=!0,rounding:D,decimalPlaces:O,precision:k,unit:A,required:j=!1,disabled:M=!1,allowNegative:N})=>{let P=g(),F=g(),I=u(),L=b(I.form.store,({isSubmitting:e})=>e),R=M||L,z=I.state.meta.isDirty||I.state.meta.isTouched,B=z&&!I.state.meta.isValid,V=j&&I.state.value===null,H=!!I.state.meta.errors.length,U=h(e=>{R||I.handleChange(e)},[R,I.handleChange]);return y(i,{className:`gap-y-4 px-4`,children:[y(t,{orientation:T,"data-invalid":B,children:[y(r,{children:[y(o,{htmlFor:P,"aria-required":V,children:[m,C&&v(c,{tooltip:C})]}),v(n,{children:x})]}),y(l,{children:[y(`div`,{className:`relative w-full`,children:[v(d,{id:P,value:I.state.value,"aria-invalid":B,"aria-describedby":F,placeholder:S,disabled:R,roundingRule:D,numberAfterDecimalPoint:O,precision:k,unitText:A,allowNegative:N,className:_(R&&`pointer-events-none opacity-60`),onBlur:I.handleBlur,onValueChange:U}),L&&v(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5`,children:v(p,{className:`animate-spin text-primary-strong`})}),!L&&z&&E&&H&&v(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:v(f,{})}),v(`div`,{className:`mt-1 flex w-full items-start justify-between gap-x-2`,children:z&&E?v(a,{id:F,className:`flex-1`,errors:I.state.meta.errors}):v(`div`,{})})]}),v(e,{isShow:!!w,children:w})]})]}),v(s,{})]})});x.displayName=`NumberField`;export{x as NumberField};
+//# sourceMappingURL=number-field-DSGwWg7y.mjs.map

package/dist/{number-field-5INgdUUv.mjs.map → number-field-DSGwWg7y.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"number-field-5INgdUUv.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\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 { NumberFieldProps } from '../../types';\n\n/**\n * A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n *\n * @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"quantity\">\n *   {() => (\n *     <NumberField\n *       label=\"Quantity\"\n *       placeholder=\"0\"\n *       unit=\"pcs\"\n *       decimalPlaces={2}\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    showErrorMessage = true,\n    rounding,\n    decimalPlaces,\n    precision,\n    unit,\n    required = false,\n    disabled = false,\n    allowNegative,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n\n    const field = useTanStackFieldContext<number | null>();\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 _hasErrors = !!field.state.meta.errors.length;\n\n    const onValueChange = useCallback(\n      (value: number | null) => {\n        if (isDisabled) return;\n        field.handleChange(value);\n      },\n      [isDisabled, field.handleChange]\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain>\n            <div className=\"relative w-full\">\n              <NumberInput\n                id={id}\n                value={field.state.value}\n                aria-invalid={_invalid}\n                aria-describedby={errorId}\n                placeholder={placeholder}\n                disabled={isDisabled}\n                roundingRule={rounding}\n                numberAfterDecimalPoint={decimalPlaces}\n                precision={precision}\n                unitText={unit}\n                allowNegative={allowNegative}\n                className={cn(isDisabled && 'pointer-events-none opacity-60')}\n                onBlur={field.handleBlur}\n                onValueChange={onValueChange}\n              />\n              {isSubmitting && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n                  <Loader2Icon className=\"animate-spin text-primary-strong\" />\n                </div>\n              )}\n              {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n                  <BanIcon />\n                </div>\n              )}\n              <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n              </div>\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"wjBA+CA,MAAa,EAAc,GACxB,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,EAAK,EAAM,EACX,EAAU,EAAM,EAEhB,EAAQ,EAAuC,EAE/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,EAAgB,EACnB,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAI,gBAAe,EAAxC,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,EAAA,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kBAAf,SAAA,CACE,EAAC,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,UAAW,EAAG,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,GACC,EAAC,MAAD,CAAK,UAAU,4EACb,SAAA,EAAC,EAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,GAChD,EAAC,MAAD,CAAK,UAAU,gGACb,SAAA,EAAC,EAAD,CAAU,CAAA,CACP,CAAA,EAEP,EAAC,MAAD,CAAK,UAAU,uDACZ,SAAA,GAAY,EAAmB,EAAC,EAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,EAAI,EAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,CACL,CAAA,EAAA,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}
+{"version":3,"file":"number-field-DSGwWg7y.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\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 { NumberFieldProps } from '../../types';\n\n/**\n * A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n *\n * @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"quantity\">\n *   {() => (\n *     <NumberField\n *       label=\"Quantity\"\n *       placeholder=\"0\"\n *       unit=\"pcs\"\n *       decimalPlaces={2}\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    showErrorMessage = true,\n    rounding,\n    decimalPlaces,\n    precision,\n    unit,\n    required = false,\n    disabled = false,\n    allowNegative,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n\n    const field = useTanStackFieldContext<number | null>();\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 _hasErrors = !!field.state.meta.errors.length;\n\n    const onValueChange = useCallback(\n      (value: number | null) => {\n        if (isDisabled) return;\n        field.handleChange(value);\n      },\n      [isDisabled, field.handleChange]\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain>\n            <div className=\"relative w-full\">\n              <NumberInput\n                id={id}\n                value={field.state.value}\n                aria-invalid={_invalid}\n                aria-describedby={errorId}\n                placeholder={placeholder}\n                disabled={isDisabled}\n                roundingRule={rounding}\n                numberAfterDecimalPoint={decimalPlaces}\n                precision={precision}\n                unitText={unit}\n                allowNegative={allowNegative}\n                className={cn(isDisabled && 'pointer-events-none opacity-60')}\n                onBlur={field.handleBlur}\n                onValueChange={onValueChange}\n              />\n              {isSubmitting && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n                  <Loader2Icon className=\"animate-spin text-primary-strong\" />\n                </div>\n              )}\n              {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n                  <BanIcon />\n                </div>\n              )}\n              <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n              </div>\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"ibA+CA,MAAa,EAAc,GACxB,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,EAAK,EAAM,EACX,EAAU,EAAM,EAEhB,EAAQ,EAAuC,EAE/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,EAAgB,EACnB,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAI,gBAAe,EAAxC,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,EAAA,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kBAAf,SAAA,CACE,EAAC,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,UAAW,EAAG,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,GACC,EAAC,MAAD,CAAK,UAAU,4EACb,SAAA,EAAC,EAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,GAChD,EAAC,MAAD,CAAK,UAAU,gGACb,SAAA,EAAC,EAAD,CAAU,CAAA,CACP,CAAA,EAEP,EAAC,MAAD,CAAK,UAAU,uDACZ,SAAA,GAAY,EAAmB,EAAC,EAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,EAAI,EAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,CACL,CAAA,EAAA,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}

package/dist/{pagination-BRw-yZBY.d.cts → pagination-DDcO-TPf.d.cts}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BnoPktln.cjs";
+import { t as Button } from "./button-BGW-LZ3i.cjs";
 //#region packages/components/ui/pagination.d.ts
 /**
  * Root `<nav>` wrapper for a Pagination control with accessible ARIA attributes.
@@ -39,4 +39,4 @@ declare function PaginationNext({ className, ...props }: React.ComponentProps<ty
 declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>): import("react").JSX.Element;
 //#endregion
 export { PaginationLink as a, PaginationItem as i, PaginationContent as n, PaginationNext as o, PaginationEllipsis as r, PaginationPrevious as s, Pagination as t };
-//# sourceMappingURL=pagination-BRw-yZBY.d.cts.map
+//# sourceMappingURL=pagination-DDcO-TPf.d.cts.map

package/dist/{pagination-BlLiOvY9.d.mts → pagination-DWg3Xv34.d.mts}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BnoPktln.mjs";
+import { t as Button } from "./button-BGW-LZ3i.mjs";
 //#region packages/components/ui/pagination.d.ts
 /**
  * Root `<nav>` wrapper for a Pagination control with accessible ARIA attributes.
@@ -39,4 +39,4 @@ declare function PaginationNext({ className, ...props }: React.ComponentProps<ty
 declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>): import("react").JSX.Element;
 //#endregion
 export { PaginationLink as a, PaginationItem as i, PaginationContent as n, PaginationNext as o, PaginationEllipsis as r, PaginationPrevious as s, Pagination as t };
-//# sourceMappingURL=pagination-BlLiOvY9.d.mts.map
+//# sourceMappingURL=pagination-DWg3Xv34.d.mts.map

package/dist/{paragraph-CRo5eC7H.d.mts → paragraph--8GcgnQL.d.cts}

@@ -1,8 +1,8 @@
-import { ComponentPropsWithoutRef } from "react";
 import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithoutRef } from "react";
 //#region packages/components/typography/paragraph.d.ts
 declare const paragraphVariants: (props?: ({
-  variant?: "xs" | "sm" | "lg" | "muted" | "p" | "lead" | null | undefined;
+  variant?: "xs" | "sm" | "lg" | "p" | "muted" | "lead" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Props for the {@link Paragraph} component.
@@ -38,4 +38,4 @@ type ParagraphProps = ComponentPropsWithoutRef<'p'> & VariantProps<typeof paragr
 declare const Paragraph: ({ variant, className, ...props }: ParagraphProps) => import("react").JSX.Element;
 //#endregion
 export { ParagraphProps as n, paragraphVariants as r, Paragraph as t };
-//# sourceMappingURL=paragraph-CRo5eC7H.d.mts.map
+//# sourceMappingURL=paragraph--8GcgnQL.d.cts.map

package/dist/{paragraph-CkCNIsvz.d.cts → paragraph-BOa0VlGX.d.mts}

@@ -1,8 +1,8 @@
-import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithoutRef } from "react";
+import { VariantProps } from "class-variance-authority";
 //#region packages/components/typography/paragraph.d.ts
 declare const paragraphVariants: (props?: ({
-  variant?: "xs" | "sm" | "lg" | "muted" | "p" | "lead" | null | undefined;
+  variant?: "xs" | "sm" | "lg" | "p" | "muted" | "lead" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Props for the {@link Paragraph} component.
@@ -38,4 +38,4 @@ type ParagraphProps = ComponentPropsWithoutRef<'p'> & VariantProps<typeof paragr
 declare const Paragraph: ({ variant, className, ...props }: ParagraphProps) => import("react").JSX.Element;
 //#endregion
 export { ParagraphProps as n, paragraphVariants as r, Paragraph as t };
-//# sourceMappingURL=paragraph-CkCNIsvz.d.cts.map
+//# sourceMappingURL=paragraph-BOa0VlGX.d.mts.map

package/dist/password-field-BxJqTPhN.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/input.cjs"),t=require("./tanstack-form-BiOihtxs.cjs");let n=require("lucide-react"),r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,description:s,placeholder:c,orientation:l=`responsive`,tooltip:u,helperText:d,showErrorMessage:f=!0})=>{let p=(0,r.useId)(),{form:m,name:h,state:g,handleBlur:_,handleChange:v}=t.rt(),y=(0,a.useStore)(m.store,({isSubmitting:e})=>e),[b,x]=(0,r.useState)(!1),S=g.meta.isDirty&&g.meta.isTouched&&!g.meta.isValid,C=(0,r.useCallback)(()=>x(e=>!e),[]),w=(0,r.useCallback)(({target:{value:e}})=>{y||v(e||null)},[y,v]);return(0,i.jsxs)(t.X,{className:`gap-y-4 px-4`,children:[(0,i.jsxs)(t.G,{"data-invalid":S,orientation:l,children:[(0,i.jsxs)(t.K,{children:[(0,i.jsxs)(t.Z,{htmlFor:p,children:[o,u&&(0,i.jsx)(t.nt,{tooltip:u})]}),(0,i.jsx)(t.J,{children:s})]}),(0,i.jsxs)(t.q,{children:[(0,i.jsx)(e.Input,{id:p,name:h,type:b?`text`:`password`,placeholder:c,value:g.value??``,"aria-invalid":S,autoComplete:`new-password`,onBlur:_,onChange:w}),(0,i.jsx)(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:C,"aria-label":b?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":b,"aria-controls":p,children:b?(0,i.jsx)(n.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,i.jsx)(n.EyeIcon,{size:16,"aria-hidden":`true`})}),(0,i.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:f&&g.meta.isDirty&&(0,i.jsx)(t.Y,{errors:g.meta.errors})}),(0,i.jsx)(t.$,{isShow:!!d,children:d})]})]}),(0,i.jsx)(t.et,{})]})};exports.PasswordField=o;
+//# sourceMappingURL=password-field-BxJqTPhN.cjs.map

package/dist/{password-field-BuWARi35.cjs.map → password-field-BxJqTPhN.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"password-field-BuWARi35.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","EyeOffIcon","EyeIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\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 { PasswordFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n *\n * @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"password\">\n *   {() => (\n *     <PasswordField\n *       label=\"Password\"\n *       placeholder=\"Enter your password\"\n *       helperText=\"Must be at least 8 characters\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  orientation = 'responsive',\n  tooltip,\n  helperText,\n  showErrorMessage = true,\n}) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={id}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={id}\n            name={name}\n            type={isVisible ? 'text' : 'password'}\n            placeholder={placeholder}\n            value={state.value ?? ''}\n            aria-invalid={_invalid}\n            autoComplete=\"new-password\"\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n\n          <button\n            className=\"absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            type=\"button\"\n            onClick={toggleVisibility}\n            aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n            aria-pressed={isVisible}\n            aria-controls={id}\n          >\n            {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n          </button>\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"gOA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAkC,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,eAAc,EAAuB,cAA5C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAArB,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EAEd,SAAA,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,6CACZ,SAAA,GAAoB,EAAM,KAAK,UAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"password-field-BxJqTPhN.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","EyeOffIcon","EyeIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\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 { PasswordFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n *\n * @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"password\">\n *   {() => (\n *     <PasswordField\n *       label=\"Password\"\n *       placeholder=\"Enter your password\"\n *       helperText=\"Must be at least 8 characters\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  orientation = 'responsive',\n  tooltip,\n  helperText,\n  showErrorMessage = true,\n}) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={id}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={id}\n            name={name}\n            type={isVisible ? 'text' : 'password'}\n            placeholder={placeholder}\n            value={state.value ?? ''}\n            aria-invalid={_invalid}\n            autoComplete=\"new-password\"\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n\n          <button\n            className=\"absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            type=\"button\"\n            onClick={toggleVisibility}\n            aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n            aria-pressed={isVisible}\n            aria-controls={id}\n          >\n            {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n          </button>\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"8LA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAkC,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAO,eAAc,EAAuB,cAA5C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,QAAS,EAArB,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EAEd,SAAA,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,6CACZ,SAAA,GAAoB,EAAM,KAAK,UAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/password-field-DsmwNZep.mjs

@@ -0,0 +1,2 @@
+import{$ as e,G as t,J as n,K as r,X as i,Y as a,Z as o,et as s,nt as c,q as l,rt as u}from"./tanstack-form-Do6xL2kv.mjs";import{Input as d}from"./ui/input.mjs";import{EyeIcon as f,EyeOffIcon as p}from"lucide-react";import{useCallback as m,useId as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{useStore as y}from"@tanstack/react-form";const b=({label:b,description:x,placeholder:S,orientation:C=`responsive`,tooltip:w,helperText:T,showErrorMessage:E=!0})=>{let D=h(),{form:O,name:k,state:A,handleBlur:j,handleChange:M}=u(),N=y(O.store,({isSubmitting:e})=>e),[P,F]=g(!1),I=A.meta.isDirty&&A.meta.isTouched&&!A.meta.isValid,L=m(()=>F(e=>!e),[]),R=m(({target:{value:e}})=>{N||M(e||null)},[N,M]);return v(i,{className:`gap-y-4 px-4`,children:[v(t,{"data-invalid":I,orientation:C,children:[v(r,{children:[v(o,{htmlFor:D,children:[b,w&&_(c,{tooltip:w})]}),_(n,{children:x})]}),v(l,{children:[_(d,{id:D,name:k,type:P?`text`:`password`,placeholder:S,value:A.value??``,"aria-invalid":I,autoComplete:`new-password`,onBlur:j,onChange:R}),_(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:L,"aria-label":P?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":P,"aria-controls":D,children:_(P?p:f,{size:16,"aria-hidden":`true`})}),_(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:E&&A.meta.isDirty&&_(a,{errors:A.meta.errors})}),_(e,{isShow:!!T,children:T})]})]}),_(s,{})]})};export{b as PasswordField};
+//# sourceMappingURL=password-field-DsmwNZep.mjs.map

package/dist/{password-field-DOIe6wTv.mjs.map → password-field-DsmwNZep.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"password-field-DOIe6wTv.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\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 { PasswordFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n *\n * @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"password\">\n *   {() => (\n *     <PasswordField\n *       label=\"Password\"\n *       placeholder=\"Enter your password\"\n *       helperText=\"Must be at least 8 characters\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  orientation = 'responsive',\n  tooltip,\n  helperText,\n  showErrorMessage = true,\n}) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={id}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={id}\n            name={name}\n            type={isVisible ? 'text' : 'password'}\n            placeholder={placeholder}\n            value={state.value ?? ''}\n            aria-invalid={_invalid}\n            autoComplete=\"new-password\"\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n\n          <button\n            className=\"absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            type=\"button\"\n            onClick={toggleVisibility}\n            aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n            aria-pressed={isVisible}\n            aria-controls={id}\n          >\n            {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n          </button>\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"8fA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAkB,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAO,eAAc,EAAuB,cAA5C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAArB,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,EAAA,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,EAED,EAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EAEd,SAAY,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,EAER,EAAC,MAAD,CAAK,UAAU,6CACZ,SAAA,GAAoB,EAAM,KAAK,SAAW,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,EACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"password-field-DsmwNZep.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\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 { PasswordFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n *\n * @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"password\">\n *   {() => (\n *     <PasswordField\n *       label=\"Password\"\n *       placeholder=\"Enter your password\"\n *       helperText=\"Must be at least 8 characters\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  orientation = 'responsive',\n  tooltip,\n  helperText,\n  showErrorMessage = true,\n}) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={id}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={id}\n            name={name}\n            type={isVisible ? 'text' : 'password'}\n            placeholder={placeholder}\n            value={state.value ?? ''}\n            aria-invalid={_invalid}\n            autoComplete=\"new-password\"\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n\n          <button\n            className=\"absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            type=\"button\"\n            onClick={toggleVisibility}\n            aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n            aria-pressed={isVisible}\n            aria-controls={id}\n          >\n            {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n          </button>\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"uXA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAkB,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAO,eAAc,EAAuB,cAA5C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAArB,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,EAAA,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,EAED,EAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EAEd,SAAY,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,EAER,EAAC,MAAD,CAAK,UAAU,6CACZ,SAAA,GAAoB,EAAM,KAAK,SAAW,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,EACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{payment-layout-BSl9DYQA.mjs → payment-layout--b7bhmR1.mjs}

@@ -1,2 +1,2 @@
-import{t as e}from"./dist-CtTonIm8.mjs";import{Button as t}from"./ui/button.mjs";import{Paragraph as n}from"./typography/paragraph.mjs";import"./ui/skeleton.mjs";import{Flex as r}from"./layouts/flex.mjs";import{Tooltip as i,TooltipContent as a,TooltipProvider as o,TooltipTrigger as s}from"./ui/tooltip.mjs";import{Avatar as c,AvatarFallback as l}from"./ui/avatar.mjs";import{LunasLogo as u}from"./features/logo/index.mjs";import{DropdownMenu as d,DropdownMenuContent as f,DropdownMenuGroup as p,DropdownMenuItem as m,DropdownMenuLabel as h,DropdownMenuSeparator as g,DropdownMenuTrigger as _}from"./ui/dropdown-menu.mjs";import"./ui/input.mjs";import"./ui/separator.mjs";import{Sheet as v,SheetContent as y,SheetDescription as b,SheetHeader as x,SheetTitle as S}from"./ui/sheet.mjs";import{LogOutIcon as C,MenuIcon as w,ShoppingCartIcon as T,UserRoundIcon as E}from"lucide-react";import{createContext as D,useCallback as O,useContext as k,useEffect as A,useMemo as j,useState as M}from"react";import{cn as N}from"@customafk/react-toolkit/utils";import{cva as P}from"class-variance-authority";import{jsx as F,jsxs as I}from"react/jsx-runtime";import{colorHashLight as L}from"@customafk/react-toolkit/color-hash";import{useIsMobile as R}from"@customafk/react-toolkit/hooks/useMobile";const z=D(null);function B(){let e=k(z);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function V({defaultOpen:e=!0,open:t,onOpenChange:n,className:r,style:i,children:a,...s}){let c=R(),[l,u]=M(!1),[d,f]=M(e),p=t??d,m=O(e=>{let t=typeof e==`function`?e(p):e;n?n(t):f(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[n,p]),h=O(()=>c?u(e=>!e):m(e=>!e),[c,m]);A(()=>{let e=e=>{e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),h())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[h]);let g=p?`expanded`:`collapsed`,_=j(()=>({state:g,open:p,setOpen:m,isMobile:c,openMobile:l,setOpenMobile:u,toggleSidebar:h}),[g,p,m,c,l,h]);return F(z.Provider,{value:_,children:F(o,{delayDuration:0,children:F(`div`,{"data-slot":`sidebar-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...i},className:N(`group/sidebar-wrapper flex h-dvh w-full`,r),...s,children:a})})})}function H({side:e=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,...o}){let{isMobile:s,state:c,openMobile:l,setOpenMobile:u,toggleSidebar:d}=B();return r===`none`?F(`aside`,{"data-slot":`sidebar`,className:N(`flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i),...o,children:a}):s?F(v,{open:l,onOpenChange:u,...o,children:I(y,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:`w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden`,style:{"--sidebar-width":`18rem`},side:e,children:[I(x,{className:`sr-only`,children:[F(S,{children:`Sidebar`}),F(b,{children:`Displays the mobile sidebar.`})]}),I(`div`,{className:`flex size-full flex-col`,children:[I(`div`,{className:`flex flex-0 items-center gap-x-2 border-border-weak border-b p-2 pr-4`,children:[I(t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:N(`size-10 rounded-full`,i),onClick:e=>{d(),e.preventDefault(),e.stopPropagation()},children:[F(w,{className:`size-6!`}),F(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),F(`div`,{className:`ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:F(T,{size:20})}),I(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[F(`span`,{className:`truncate font-medium`,children:`Lunas Store`}),F(`span`,{className:`truncate text-xs`,children:`Established 2023`})]})]}),F(`div`,{className:`flex flex-1 flex-col p-2`,children:a})]})]})}):I(`aside`,{className:`group peer hidden bg-card text-sidebar-foreground md:block`,"data-state":c,"data-collapsible":c===`collapsed`?r:``,"data-variant":n,"data-side":e,"data-slot":`sidebar`,children:[F(`div`,{"data-slot":`sidebar-gap`,className:N(`relative`,`bg-transparent`,`transition-[width] duration-200 ease-linear`,`h-(--header-height) w-(--sidebar-width)`,`sm:h-[calc(var(--header-height)+0.5rem)]`,`group-data-[collapsible=offcanvas]:w-0`,`group-data-[side=right]:rotate-180`,n===`floating`||n===`inset`?`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon)`)}),F(`div`,{"data-slot":`sidebar-container`,className:N(`hidden md:flex`,`fixed inset-y-0 top-14 z-10 shadow-nav`,`h-[calc(100dvh-3.5rem)] w-(--sidebar-width)`,`transition-[left,right,width] duration-200 ease-linear`,e===`left`&&`left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]`,e===`right`&&`right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]`,n===`floating`||n===`inset`?`p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l`,i),...o,children:F(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:N(`flex size-full flex-col`,`group-data-[variant=floating]:rounded-lg`,`group-data-[variant=floating]:border`,`group-data-[variant=floating]:border-sidebar-border`,`group-data-[variant=floating]:shadow-sm`),children:a})})]})}function U({className:e,children:t,...n}){return I(`main`,{"data-slot":`sidebar-inset`,className:N(`relative flex w-full flex-1 flex-col`,e),...n,children:[F(`div`,{className:`h-(--header-height) w-full sm:h-[calc(var(--header-height)+0.5rem)]`}),F(`div`,{className:`inset-shadow-sm flex-1`,children:t})]})}function W({className:e,...t}){return F(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:N(`flex flex-col gap-2 p-2`,e),...t})}function G({className:e,...t}){return F(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:N(`flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...t})}function K({className:e,...t}){return F(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:N(`relative flex w-full min-w-0 flex-col`,e),...t})}function q({className:t,asChild:n=!1,...r}){return F(n?e:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:N(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,t),...r})}function J({className:e,...t}){return F(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:N(`w-full text-sm`,e),...t})}function Y({className:e,...t}){return F(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:N(`flex w-full min-w-0 flex-col gap-1`,e),...t})}function X({className:e,...t}){return F(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:N(`group/menu-item relative`,e),...t})}const Z=P([`peer/menu-button`,`cursor-pointer`,`flex w-full items-center gap-2`,`overflow-hidden rounded-md p-2 outline-hidden`,`truncate text-left font-normal`,`transition-[color,width,height,padding]`,`hover:bg-sidebar-accent`,`hover:text-sidebar-accent-foreground`,`active:bg-sidebar-accent`,`active:text-sidebar-accent-foreground`,`disabled:pointer-events-none`,`disabled:opacity-50`,`group-has-data-[sidebar=menu-action]/menu-item:pr-8`,`aria-disabled:pointer-events-none`,`aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-primary-muted`,`data-[active=true]:text-sidebar-primary`,`data-[state=open]:hover:bg-sidebar-accent`,`data-[state=open]:hover:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:size-12!`,`group-data-[collapsible=icon]:p-3!`,`group-data-[collapsible=icon]:gap-3!`,`[&>svg]:size-6`,`[&>svg]:shrink-0`,`[&>span:last-child]:truncate`],{variants:{variant:{default:`hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground/80`,outline:`bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]`},size:{default:`h-10 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}});function Q({asChild:t=!1,isActive:n=!1,variant:r=`default`,size:o=`default`,tooltip:c,className:l,...u}){let d=t?e:`button`,{isMobile:f,state:p}=B(),m=F(d,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":o,"data-active":n,className:N(Z({variant:r,size:o}),l),...u});return c?(typeof c==`string`&&(c={children:c}),I(i,{children:[F(s,{asChild:!0,children:m}),F(a,{side:`right`,align:`center`,hidden:p!==`collapsed`||f,...c})]})):m}const $=({uuid:e,username:t,email:i})=>I(r,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[F(c,{className:`size-9 shadow-card`,children:F(l,{style:{backgroundColor:L.hex(e)},children:F(E,{size:28,className:`text-white`})})}),I(r,{vertical:!0,padding:`none`,gap:`none`,align:`start`,className:`hidden sm:flex`,children:[F(n,{className:`text-sm font-medium text-text-positive`,children:t}),F(n,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:i})]})]}),ee=({user:e,isLogin:n=!0,onLogin:r,onLogout:i,logo:a})=>{let{toggleSidebar:o}=B(),s=O(e=>{e.preventDefault(),e.stopPropagation(),o()},[o]),c=O(e=>{e.preventDefault(),e.stopPropagation(),i?.()},[i]),l=O(e=>{e.preventDefault(),e.stopPropagation(),r?.()},[r]);return I(`header`,{"data-slot":`payment-layout-header`,className:N(`bg-card`,`h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6`,`absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-2.5`,`flex items-center shadow-nav`,`transition-[width,height] ease-linear`),children:[n&&I(t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:`hidden size-10 rounded-full transition-all hover:text-text-positive md:flex`,onClick:s,children:[F(w,{className:`size-6!`}),F(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),F(`div`,{className:`flex flex-1 items-center sm:ml-2.5`,children:a??F(u,{variant:`horizontal`,size:`xs`})}),e?I(d,{children:[F(_,{asChild:!0,children:F(t,{variant:`ghost`,color:`muted`,className:`gap-x-2 rounded-full px-2 transition-all hover:text-text-positive`,children:F($,{uuid:e?.uuid??``,username:e.fullname,email:e.email})})}),I(f,{align:`end`,className:`w-56`,children:[I(h,{className:`font-normal`,children:[F(`p`,{className:`font-medium`,children:e.fullname}),F(`p`,{className:`text-muted-foreground text-xs`,children:e.email})]}),F(g,{}),F(p,{children:I(m,{onClick:c,children:[F(C,{size:14}),`Đăng xuất`]})})]})]}):F(t,{size:`sm`,onClick:l,children:`Đăng nhập`})]})},te=({items:e,activeNavItemId:t})=>{let{isMobile:n}=B();return!n||e.length===0?null:F(`nav`,{"data-slot":`mobile-bottom-nav`,className:`fixed inset-x-0 bottom-0 z-20 flex h-16 items-stretch border-border border-t bg-card md:hidden`,children:e.slice(0,5).map(e=>I(`button`,{type:`button`,onClick:e.onClick,"data-active":e.id===t,className:N(`flex flex-1 flex-col items-center justify-center gap-0.5`,`text-muted-foreground transition-colors`,`data-[active=true]:text-sidebar-primary`,`[&>svg]:size-5 [&>svg]:shrink-0`),children:[e.icon,F(`span`,{className:`max-w-16 truncate text-[10px] leading-3`,children:e.label})]},e.id))})},ne=({activeNavItemId:e,sidebar:t,user:n,isLogin:r=!0,onLogin:i,onLogout:a,children:o})=>{let s=j(()=>t?.groupcontent||[],[t]),c=j(()=>s.flatMap(e=>e.items),[s]);return I(V,{children:[F(ee,{user:n,isLogin:r,onLogin:i,onLogout:a}),r&&I(H,{variant:`inset`,collapsible:`icon`,children:[F(G,{children:s.map(t=>I(K,{children:[F(q,{children:t.label}),F(J,{children:F(Y,{children:t.items.map(t=>F(X,{children:I(Q,{isActive:t.id===e,onClick:e=>{t.onClick?.(),e.preventDefault(),e.stopPropagation()},children:[t.icon,t.label]})},t.id))})})]},t.id))}),F(W,{children:F(Y,{children:F(X,{className:`mt-2 border-t border-t-border`,children:F(`p`,{className:`pt-2 text-center text-muted-foreground text-xs`,children:`Copyright © 2025, Lunas.`})})})})]}),F(U,{children:F(`section`,{className:`relative size-full`,children:F(`div`,{className:N(`absolute inset-0 overflow-y-auto`,r&&`pb-16 md:pb-0`),children:o})})}),r&&F(te,{items:c,activeNavItemId:e})]})};export{ne as t};
-//# sourceMappingURL=payment-layout-BSl9DYQA.mjs.map
+import{t as e}from"./dist-CtTonIm8.mjs";import{Button as t}from"./ui/button.mjs";import{Paragraph as n}from"./typography/paragraph.mjs";import"./ui/skeleton.mjs";import{Flex as r}from"./layouts/flex.mjs";import{Tooltip as i,TooltipContent as a,TooltipProvider as o,TooltipTrigger as s}from"./ui/tooltip.mjs";import{Avatar as c,AvatarFallback as l}from"./ui/avatar.mjs";import{LunasLogo as u}from"./features/logo/index.mjs";import"./ui/input.mjs";import{DropdownMenu as d,DropdownMenuContent as f,DropdownMenuGroup as p,DropdownMenuItem as m,DropdownMenuLabel as h,DropdownMenuSeparator as g,DropdownMenuTrigger as _}from"./ui/dropdown-menu.mjs";import"./ui/separator.mjs";import{Sheet as v,SheetContent as y,SheetDescription as b,SheetHeader as x,SheetTitle as S}from"./ui/sheet.mjs";import{LogOutIcon as C,MenuIcon as w,ShoppingCartIcon as T,UserRoundIcon as E}from"lucide-react";import{createContext as D,useCallback as O,useContext as k,useEffect as A,useMemo as j,useState as M}from"react";import{cn as N}from"@customafk/react-toolkit/utils";import{cva as P}from"class-variance-authority";import{jsx as F,jsxs as I}from"react/jsx-runtime";import{colorHashLight as L}from"@customafk/react-toolkit/color-hash";import{useIsMobile as R}from"@customafk/react-toolkit/hooks/useMobile";const z=D(null);function B(){let e=k(z);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function V({defaultOpen:e=!0,open:t,onOpenChange:n,className:r,style:i,children:a,...s}){let c=R(),[l,u]=M(!1),[d,f]=M(e),p=t??d,m=O(e=>{let t=typeof e==`function`?e(p):e;n?n(t):f(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[n,p]),h=O(()=>c?u(e=>!e):m(e=>!e),[c,m]);A(()=>{let e=e=>{e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),h())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[h]);let g=p?`expanded`:`collapsed`,_=j(()=>({state:g,open:p,setOpen:m,isMobile:c,openMobile:l,setOpenMobile:u,toggleSidebar:h}),[g,p,m,c,l,h]);return F(z.Provider,{value:_,children:F(o,{delayDuration:0,children:F(`div`,{"data-slot":`sidebar-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...i},className:N(`group/sidebar-wrapper flex h-dvh w-full`,r),...s,children:a})})})}function H({side:e=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,...o}){let{isMobile:s,state:c,openMobile:l,setOpenMobile:u,toggleSidebar:d}=B();return r===`none`?F(`aside`,{"data-slot":`sidebar`,className:N(`flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i),...o,children:a}):s?F(v,{open:l,onOpenChange:u,...o,children:I(y,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:`w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden`,style:{"--sidebar-width":`18rem`},side:e,children:[I(x,{className:`sr-only`,children:[F(S,{children:`Sidebar`}),F(b,{children:`Displays the mobile sidebar.`})]}),I(`div`,{className:`flex size-full flex-col`,children:[I(`div`,{className:`flex flex-0 items-center gap-x-2 border-border-weak border-b p-2 pr-4`,children:[I(t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:N(`size-10 rounded-full`,i),onClick:e=>{d(),e.preventDefault(),e.stopPropagation()},children:[F(w,{className:`size-6!`}),F(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),F(`div`,{className:`ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:F(T,{size:20})}),I(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[F(`span`,{className:`truncate font-medium`,children:`Lunas Store`}),F(`span`,{className:`truncate text-xs`,children:`Established 2023`})]})]}),F(`div`,{className:`flex flex-1 flex-col p-2`,children:a})]})]})}):I(`aside`,{className:`group peer hidden bg-card text-sidebar-foreground md:block`,"data-state":c,"data-collapsible":c===`collapsed`?r:``,"data-variant":n,"data-side":e,"data-slot":`sidebar`,children:[F(`div`,{"data-slot":`sidebar-gap`,className:N(`relative`,`bg-transparent`,`transition-[width] duration-200 ease-linear`,`h-(--header-height) w-(--sidebar-width)`,`sm:h-[calc(var(--header-height)+0.5rem)]`,`group-data-[collapsible=offcanvas]:w-0`,`group-data-[side=right]:rotate-180`,n===`floating`||n===`inset`?`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon)`)}),F(`div`,{"data-slot":`sidebar-container`,className:N(`hidden md:flex`,`fixed inset-y-0 top-14 z-10 shadow-nav`,`h-[calc(100dvh-3.5rem)] w-(--sidebar-width)`,`transition-[left,right,width] duration-200 ease-linear`,e===`left`&&`left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]`,e===`right`&&`right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]`,n===`floating`||n===`inset`?`p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l`,i),...o,children:F(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:N(`flex size-full flex-col`,`group-data-[variant=floating]:rounded-lg`,`group-data-[variant=floating]:border`,`group-data-[variant=floating]:border-sidebar-border`,`group-data-[variant=floating]:shadow-sm`),children:a})})]})}function U({className:e,children:t,...n}){return I(`main`,{"data-slot":`sidebar-inset`,className:N(`relative flex w-full flex-1 flex-col`,e),...n,children:[F(`div`,{className:`h-(--header-height) w-full sm:h-[calc(var(--header-height)+0.5rem)]`}),F(`div`,{className:`inset-shadow-sm flex-1`,children:t})]})}function W({className:e,...t}){return F(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:N(`flex flex-col gap-2 p-2`,e),...t})}function G({className:e,...t}){return F(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:N(`flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...t})}function K({className:e,...t}){return F(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:N(`relative flex w-full min-w-0 flex-col`,e),...t})}function q({className:t,asChild:n=!1,...r}){return F(n?e:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:N(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,t),...r})}function J({className:e,...t}){return F(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:N(`w-full text-sm`,e),...t})}function Y({className:e,...t}){return F(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:N(`flex w-full min-w-0 flex-col gap-1`,e),...t})}function X({className:e,...t}){return F(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:N(`group/menu-item relative`,e),...t})}const Z=P([`peer/menu-button`,`cursor-pointer`,`flex w-full items-center gap-2`,`overflow-hidden rounded-md p-2 outline-hidden`,`truncate text-left font-normal`,`transition-[color,width,height,padding]`,`hover:bg-sidebar-accent`,`hover:text-sidebar-accent-foreground`,`active:bg-sidebar-accent`,`active:text-sidebar-accent-foreground`,`disabled:pointer-events-none`,`disabled:opacity-50`,`group-has-data-[sidebar=menu-action]/menu-item:pr-8`,`aria-disabled:pointer-events-none`,`aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-primary-muted`,`data-[active=true]:text-sidebar-primary`,`data-[state=open]:hover:bg-sidebar-accent`,`data-[state=open]:hover:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:size-12!`,`group-data-[collapsible=icon]:p-3!`,`group-data-[collapsible=icon]:gap-3!`,`[&>svg]:size-6`,`[&>svg]:shrink-0`,`[&>span:last-child]:truncate`],{variants:{variant:{default:`hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground/80`,outline:`bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]`},size:{default:`h-10 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}});function Q({asChild:t=!1,isActive:n=!1,variant:r=`default`,size:o=`default`,tooltip:c,className:l,...u}){let d=t?e:`button`,{isMobile:f,state:p}=B(),m=F(d,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":o,"data-active":n,className:N(Z({variant:r,size:o}),l),...u});return c?(typeof c==`string`&&(c={children:c}),I(i,{children:[F(s,{asChild:!0,children:m}),F(a,{side:`right`,align:`center`,hidden:p!==`collapsed`||f,...c})]})):m}const $=({uuid:e,username:t,email:i})=>I(r,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[F(c,{className:`size-9 shadow-card`,children:F(l,{style:{backgroundColor:L.hex(e)},children:F(E,{size:28,className:`text-white`})})}),I(r,{vertical:!0,padding:`none`,gap:`none`,align:`start`,className:`hidden sm:flex`,children:[F(n,{className:`text-sm font-medium text-text-positive`,children:t}),F(n,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:i})]})]}),ee=({user:e,isLogin:n=!0,onLogin:r,onLogout:i,logo:a})=>{let{toggleSidebar:o}=B(),s=O(e=>{e.preventDefault(),e.stopPropagation(),o()},[o]),c=O(e=>{e.preventDefault(),e.stopPropagation(),i?.()},[i]),l=O(e=>{e.preventDefault(),e.stopPropagation(),r?.()},[r]);return I(`header`,{"data-slot":`payment-layout-header`,className:N(`bg-card`,`h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6`,`absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-2.5`,`flex items-center shadow-nav`,`transition-[width,height] ease-linear`),children:[n&&I(t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:`hidden size-10 rounded-full transition-all hover:text-text-positive md:flex`,onClick:s,children:[F(w,{className:`size-6!`}),F(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),F(`div`,{className:`flex flex-1 items-center sm:ml-2.5`,children:a??F(u,{variant:`horizontal`,size:`xs`})}),e?I(d,{children:[F(_,{asChild:!0,children:F(t,{variant:`ghost`,color:`muted`,className:`gap-x-2 rounded-full px-2 transition-all hover:text-text-positive`,children:F($,{uuid:e?.uuid??``,username:e.fullname,email:e.email})})}),I(f,{align:`end`,className:`w-56`,children:[I(h,{className:`font-normal`,children:[F(`p`,{className:`font-medium`,children:e.fullname}),F(`p`,{className:`text-muted-foreground text-xs`,children:e.email})]}),F(g,{}),F(p,{children:I(m,{onClick:c,children:[F(C,{size:14}),`Đăng xuất`]})})]})]}):F(t,{size:`sm`,onClick:l,children:`Đăng nhập`})]})},te=({items:e,activeNavItemId:t})=>{let{isMobile:n}=B();return!n||e.length===0?null:F(`nav`,{"data-slot":`mobile-bottom-nav`,className:`fixed inset-x-0 bottom-0 z-20 flex h-16 items-stretch border-border border-t bg-card md:hidden`,children:e.slice(0,5).map(e=>I(`button`,{type:`button`,onClick:e.onClick,"data-active":e.id===t,className:N(`flex flex-1 flex-col items-center justify-center gap-0.5`,`text-muted-foreground transition-colors`,`data-[active=true]:text-sidebar-primary`,`[&>svg]:size-5 [&>svg]:shrink-0`),children:[e.icon,F(`span`,{className:`max-w-16 truncate text-[10px] leading-3`,children:e.label})]},e.id))})},ne=({activeNavItemId:e,sidebar:t,user:n,isLogin:r=!0,onLogin:i,onLogout:a,children:o})=>{let s=j(()=>t?.groupcontent||[],[t]),c=j(()=>s.flatMap(e=>e.items),[s]);return I(V,{children:[F(ee,{user:n,isLogin:r,onLogin:i,onLogout:a}),r&&I(H,{variant:`inset`,collapsible:`icon`,children:[F(G,{children:s.map(t=>I(K,{children:[F(q,{children:t.label}),F(J,{children:F(Y,{children:t.items.map(t=>F(X,{children:I(Q,{isActive:t.id===e,onClick:e=>{t.onClick?.(),e.preventDefault(),e.stopPropagation()},children:[t.icon,t.label]})},t.id))})})]},t.id))}),F(W,{children:F(Y,{children:F(X,{className:`mt-2 border-t border-t-border`,children:F(`p`,{className:`pt-2 text-center text-muted-foreground text-xs`,children:`Copyright © 2025, Lunas.`})})})})]}),F(U,{children:F(`section`,{className:`relative size-full`,children:F(`div`,{className:N(`absolute inset-0 overflow-y-auto`,r&&`pb-16 md:pb-0`),children:o})})}),r&&F(te,{items:c,activeNavItemId:e})]})};export{ne as t};
+//# sourceMappingURL=payment-layout--b7bhmR1.mjs.map