@customafk/lunas-ui 0.2.82 → 0.2.83

package/dist/{permalink-CaCx9fi6.mjs → permalink-BPCF_npZ.mjs}

@@ -1,2 +1,2 @@
-import{Q as e}from"./tables-Dg3KMBKA.mjs";import{ExternalLinkIcon as t}from"lucide-react";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({href:i,label:a})=>i?r(`a`,{href:i,target:`_blank`,className:`inline-flex items-center gap-1 truncate text-primary text-sm underline`,rel:`noopener noreferrer`,children:[n(`span`,{children:a||i}),n(t,{size:14})]}):n(e,{});export{i as UITablePermalink};
-//# sourceMappingURL=permalink-CaCx9fi6.mjs.map
+import{Q as e}from"./tables-CuoBQNqx.mjs";import{ExternalLinkIcon as t}from"lucide-react";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({href:i,label:a})=>i?r(`a`,{href:i,target:`_blank`,className:`inline-flex items-center gap-1 truncate text-primary text-sm underline`,rel:`noopener noreferrer`,children:[n(`span`,{children:a||i}),n(t,{size:14})]}):n(e,{});export{i as UITablePermalink};
+//# sourceMappingURL=permalink-BPCF_npZ.mjs.map

package/dist/{permalink-CaCx9fi6.mjs.map → permalink-BPCF_npZ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"permalink-CaCx9fi6.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/permalink.tsx"],"sourcesContent":["import { ExternalLinkIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Renders an external-link anchor with an icon for use in table cells, opening\n * the target URL in a new tab with safe `rel` attributes. Renders\n * {@link UITableEmpty} when `href` is absent.\n *\n * @example\n * import { UITablePermalink } from '@customafk/lunas-ui/features/tables';\n *\n * <UITablePermalink href=\"https://example.com/records/42\" label=\"View record\" />\n */\nexport const UITablePermalink: React.FC<{\n  /** The destination URL the anchor navigates to; `null`/`undefined`/empty renders an empty state. */\n  href: string | null | undefined;\n  /** Optional display text; falls back to the raw `href` when omitted. */\n  label?: string;\n}> = ({ href, label }) => {\n  if (!href) return <UITableEmpty />;\n\n  return (\n    <a href={href} target=\"_blank\" className=\"inline-flex items-center gap-1 truncate text-primary text-sm underline\" rel=\"noopener noreferrer\">\n      <span>{label || href}</span>\n      <ExternalLinkIcon size={14} />\n    </a>\n  );\n};\n"],"mappings":"4IAcA,MAAa,GAKP,CAAE,OAAM,WACP,EAGH,EAAC,IAAD,CAAS,OAAM,OAAO,SAAS,UAAU,yEAAyE,IAAI,sBAAtH,SAAA,CACE,EAAC,OAAD,CAAA,SAAO,GAAS,CAAW,CAAA,EAC3B,EAAC,EAAD,CAAkB,KAAM,EAAK,CAAA,CAC5B,IANa,EAAC,EAAD,CAAe,CAAA"}
+{"version":3,"file":"permalink-BPCF_npZ.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/permalink.tsx"],"sourcesContent":["import { ExternalLinkIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Renders an external-link anchor with an icon for use in table cells, opening\n * the target URL in a new tab with safe `rel` attributes. Renders\n * {@link UITableEmpty} when `href` is absent.\n *\n * @example\n * import { UITablePermalink } from '@customafk/lunas-ui/features/tables';\n *\n * <UITablePermalink href=\"https://example.com/records/42\" label=\"View record\" />\n */\nexport const UITablePermalink: React.FC<{\n  /** The destination URL the anchor navigates to; `null`/`undefined`/empty renders an empty state. */\n  href: string | null | undefined;\n  /** Optional display text; falls back to the raw `href` when omitted. */\n  label?: string;\n}> = ({ href, label }) => {\n  if (!href) return <UITableEmpty />;\n\n  return (\n    <a href={href} target=\"_blank\" className=\"inline-flex items-center gap-1 truncate text-primary text-sm underline\" rel=\"noopener noreferrer\">\n      <span>{label || href}</span>\n      <ExternalLinkIcon size={14} />\n    </a>\n  );\n};\n"],"mappings":"4IAcA,MAAa,GAKP,CAAE,OAAM,WACP,EAGH,EAAC,IAAD,CAAS,OAAM,OAAO,SAAS,UAAU,yEAAyE,IAAI,sBAAtH,SAAA,CACE,EAAC,OAAD,CAAA,SAAO,GAAS,CAAW,CAAA,EAC3B,EAAC,EAAD,CAAkB,KAAM,EAAK,CAAA,CAC5B,IANa,EAAC,EAAD,CAAe,CAAA"}

package/dist/{permalink-azuGQg2b.cjs → permalink-DCvWlrAT.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tables-BqZ4Zs6e.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime");const r=({href:r,label:i})=>r?(0,n.jsxs)(`a`,{href:r,target:`_blank`,className:`inline-flex items-center gap-1 truncate text-primary text-sm underline`,rel:`noopener noreferrer`,children:[(0,n.jsx)(`span`,{children:i||r}),(0,n.jsx)(t.ExternalLinkIcon,{size:14})]}):(0,n.jsx)(e.Q,{});exports.UITablePermalink=r;
-//# sourceMappingURL=permalink-azuGQg2b.cjs.map
+const e=require("./tables-DdLEj1dI.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime");const r=({href:r,label:i})=>r?(0,n.jsxs)(`a`,{href:r,target:`_blank`,className:`inline-flex items-center gap-1 truncate text-primary text-sm underline`,rel:`noopener noreferrer`,children:[(0,n.jsx)(`span`,{children:i||r}),(0,n.jsx)(t.ExternalLinkIcon,{size:14})]}):(0,n.jsx)(e.Q,{});exports.UITablePermalink=r;
+//# sourceMappingURL=permalink-DCvWlrAT.cjs.map

package/dist/{permalink-azuGQg2b.cjs.map → permalink-DCvWlrAT.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"permalink-azuGQg2b.cjs","names":["UITableEmpty","ExternalLinkIcon"],"sources":["../packages/components/features/tables/components/atoms/permalink.tsx"],"sourcesContent":["import { ExternalLinkIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Renders an external-link anchor with an icon for use in table cells, opening\n * the target URL in a new tab with safe `rel` attributes. Renders\n * {@link UITableEmpty} when `href` is absent.\n *\n * @example\n * import { UITablePermalink } from '@customafk/lunas-ui/features/tables';\n *\n * <UITablePermalink href=\"https://example.com/records/42\" label=\"View record\" />\n */\nexport const UITablePermalink: React.FC<{\n  /** The destination URL the anchor navigates to; `null`/`undefined`/empty renders an empty state. */\n  href: string | null | undefined;\n  /** Optional display text; falls back to the raw `href` when omitted. */\n  label?: string;\n}> = ({ href, label }) => {\n  if (!href) return <UITableEmpty />;\n\n  return (\n    <a href={href} target=\"_blank\" className=\"inline-flex items-center gap-1 truncate text-primary text-sm underline\" rel=\"noopener noreferrer\">\n      <span>{label || href}</span>\n      <ExternalLinkIcon size={14} />\n    </a>\n  );\n};\n"],"mappings":"sGAcA,MAAa,GAKP,CAAE,OAAM,WACP,GAGH,EAAA,EAAA,KAAA,CAAC,IAAD,CAAS,OAAM,OAAO,SAAS,UAAU,yEAAyE,IAAI,sBAAtH,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,GAAS,CAAW,CAAA,GAC3B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,KAAM,EAAK,CAAA,CAC5B,KANa,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAe,CAAA"}
+{"version":3,"file":"permalink-DCvWlrAT.cjs","names":["UITableEmpty","ExternalLinkIcon"],"sources":["../packages/components/features/tables/components/atoms/permalink.tsx"],"sourcesContent":["import { ExternalLinkIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Renders an external-link anchor with an icon for use in table cells, opening\n * the target URL in a new tab with safe `rel` attributes. Renders\n * {@link UITableEmpty} when `href` is absent.\n *\n * @example\n * import { UITablePermalink } from '@customafk/lunas-ui/features/tables';\n *\n * <UITablePermalink href=\"https://example.com/records/42\" label=\"View record\" />\n */\nexport const UITablePermalink: React.FC<{\n  /** The destination URL the anchor navigates to; `null`/`undefined`/empty renders an empty state. */\n  href: string | null | undefined;\n  /** Optional display text; falls back to the raw `href` when omitted. */\n  label?: string;\n}> = ({ href, label }) => {\n  if (!href) return <UITableEmpty />;\n\n  return (\n    <a href={href} target=\"_blank\" className=\"inline-flex items-center gap-1 truncate text-primary text-sm underline\" rel=\"noopener noreferrer\">\n      <span>{label || href}</span>\n      <ExternalLinkIcon size={14} />\n    </a>\n  );\n};\n"],"mappings":"sGAcA,MAAa,GAKP,CAAE,OAAM,WACP,GAGH,EAAA,EAAA,KAAA,CAAC,IAAD,CAAS,OAAM,OAAO,SAAS,UAAU,yEAAyE,IAAI,sBAAtH,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,GAAS,CAAW,CAAA,GAC3B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,KAAM,EAAK,CAAA,CAC5B,KANa,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAe,CAAA"}

package/dist/phone-CTTjc3mv.mjs

@@ -0,0 +1,2 @@
+function e(e){if(!e?.trim())return null;let t=e.replace(/\D/g,``),n=t.length>9&&t.startsWith(`84`)?t.slice(2):t.startsWith(`0`)?t.slice(1):t,r=/^\d{9,10}$/.test(n);if(!r)return{nsn:n,national:t,international:t,valid:r};let i=n.length===9?[n.slice(0,3),n.slice(3,6),n.slice(6,9)]:[n.slice(0,4),n.slice(4,7),n.slice(7,10)];return{nsn:n,national:`0${i[0]} ${i[1]} ${i[2]}`,international:`+84 ${i[0]} ${i[1]} ${i[2]}`,valid:r}}export{e as t};
+//# sourceMappingURL=phone-CTTjc3mv.mjs.map

package/dist/phone-CTTjc3mv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-CTTjc3mv.mjs","names":[],"sources":["../packages/libs/phone.ts"],"sourcesContent":["export type TVietnamesePhone = {\n  /** Digits only, national significant number with the trunk `0` and any `84`/`+84` prefix removed. */\n  nsn: string;\n  /** National display form, e.g. `'0987 654 321'`. Falls back to the sanitized digits when `valid` is `false`. */\n  national: string;\n  /** International display form, e.g. `'+84 987 654 321'`. Falls back to the sanitized digits when `valid` is `false`. */\n  international: string;\n  /** `false` when the input's national significant number isn't 9–10 digits (not a recognizable VN phone number). */\n  valid: boolean;\n};\n\n/**\n * Parses a Vietnamese phone number in any common input shape (`0987654321`, `+84987654321`,\n * `84987654321`, with or without spaces/dashes) into national and international display forms.\n * Never throws — returns `null` for empty/blank input, and falls back to sanitized digits\n * (with `valid: false`) for anything that doesn't look like a 9–10 digit VN number.\n */\nexport function formatVietnamesePhone(raw: string | null | undefined): TVietnamesePhone | null {\n  if (!raw?.trim()) return null;\n\n  const digits = raw.replace(/\\D/g, '');\n  const nsn = digits.length > 9 && digits.startsWith('84') ? digits.slice(2) : digits.startsWith('0') ? digits.slice(1) : digits;\n  const valid = /^\\d{9,10}$/.test(nsn);\n\n  if (!valid) return { nsn, national: digits, international: digits, valid };\n\n  const groups = nsn.length === 9 ? [nsn.slice(0, 3), nsn.slice(3, 6), nsn.slice(6, 9)] : [nsn.slice(0, 4), nsn.slice(4, 7), nsn.slice(7, 10)];\n\n  return {\n    nsn,\n    national: `0${groups[0]} ${groups[1]} ${groups[2]}`,\n    international: `+84 ${groups[0]} ${groups[1]} ${groups[2]}`,\n    valid,\n  };\n}\n"],"mappings":"AAiBA,SAAgB,EAAsB,EAAyD,CAC7F,GAAI,CAAC,GAAK,KAAK,EAAG,OAAO,KAEzB,IAAM,EAAS,EAAI,QAAQ,MAAO,EAAE,EAC9B,EAAM,EAAO,OAAS,GAAK,EAAO,WAAW,IAAI,EAAI,EAAO,MAAM,CAAC,EAAI,EAAO,WAAW,GAAG,EAAI,EAAO,MAAM,CAAC,EAAI,EAClH,EAAQ,aAAa,KAAK,CAAG,EAEnC,GAAI,CAAC,EAAO,MAAO,CAAE,MAAK,SAAU,EAAQ,cAAe,EAAQ,OAAM,EAEzE,IAAM,EAAS,EAAI,SAAW,EAAI,CAAC,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,CAAC,EAAI,CAAC,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,EAAE,CAAC,EAE3I,MAAO,CACL,MACA,SAAU,IAAI,EAAO,GAAG,GAAG,EAAO,GAAG,GAAG,EAAO,KAC/C,cAAe,OAAO,EAAO,GAAG,GAAG,EAAO,GAAG,GAAG,EAAO,KACvD,OACF,CACF"}

package/dist/phone-CUxXVTg6.cjs

@@ -0,0 +1,2 @@
+function e(e){if(!e?.trim())return null;let t=e.replace(/\D/g,``),n=t.length>9&&t.startsWith(`84`)?t.slice(2):t.startsWith(`0`)?t.slice(1):t,r=/^\d{9,10}$/.test(n);if(!r)return{nsn:n,national:t,international:t,valid:r};let i=n.length===9?[n.slice(0,3),n.slice(3,6),n.slice(6,9)]:[n.slice(0,4),n.slice(4,7),n.slice(7,10)];return{nsn:n,national:`0${i[0]} ${i[1]} ${i[2]}`,international:`+84 ${i[0]} ${i[1]} ${i[2]}`,valid:r}}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});
+//# sourceMappingURL=phone-CUxXVTg6.cjs.map

package/dist/phone-CUxXVTg6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-CUxXVTg6.cjs","names":[],"sources":["../packages/libs/phone.ts"],"sourcesContent":["export type TVietnamesePhone = {\n  /** Digits only, national significant number with the trunk `0` and any `84`/`+84` prefix removed. */\n  nsn: string;\n  /** National display form, e.g. `'0987 654 321'`. Falls back to the sanitized digits when `valid` is `false`. */\n  national: string;\n  /** International display form, e.g. `'+84 987 654 321'`. Falls back to the sanitized digits when `valid` is `false`. */\n  international: string;\n  /** `false` when the input's national significant number isn't 9–10 digits (not a recognizable VN phone number). */\n  valid: boolean;\n};\n\n/**\n * Parses a Vietnamese phone number in any common input shape (`0987654321`, `+84987654321`,\n * `84987654321`, with or without spaces/dashes) into national and international display forms.\n * Never throws — returns `null` for empty/blank input, and falls back to sanitized digits\n * (with `valid: false`) for anything that doesn't look like a 9–10 digit VN number.\n */\nexport function formatVietnamesePhone(raw: string | null | undefined): TVietnamesePhone | null {\n  if (!raw?.trim()) return null;\n\n  const digits = raw.replace(/\\D/g, '');\n  const nsn = digits.length > 9 && digits.startsWith('84') ? digits.slice(2) : digits.startsWith('0') ? digits.slice(1) : digits;\n  const valid = /^\\d{9,10}$/.test(nsn);\n\n  if (!valid) return { nsn, national: digits, international: digits, valid };\n\n  const groups = nsn.length === 9 ? [nsn.slice(0, 3), nsn.slice(3, 6), nsn.slice(6, 9)] : [nsn.slice(0, 4), nsn.slice(4, 7), nsn.slice(7, 10)];\n\n  return {\n    nsn,\n    national: `0${groups[0]} ${groups[1]} ${groups[2]}`,\n    international: `+84 ${groups[0]} ${groups[1]} ${groups[2]}`,\n    valid,\n  };\n}\n"],"mappings":"AAiBA,SAAgB,EAAsB,EAAyD,CAC7F,GAAI,CAAC,GAAK,KAAK,EAAG,OAAO,KAEzB,IAAM,EAAS,EAAI,QAAQ,MAAO,EAAE,EAC9B,EAAM,EAAO,OAAS,GAAK,EAAO,WAAW,IAAI,EAAI,EAAO,MAAM,CAAC,EAAI,EAAO,WAAW,GAAG,EAAI,EAAO,MAAM,CAAC,EAAI,EAClH,EAAQ,aAAa,KAAK,CAAG,EAEnC,GAAI,CAAC,EAAO,MAAO,CAAE,MAAK,SAAU,EAAQ,cAAe,EAAQ,OAAM,EAEzE,IAAM,EAAS,EAAI,SAAW,EAAI,CAAC,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,CAAC,EAAI,CAAC,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,EAAE,CAAC,EAE3I,MAAO,CACL,MACA,SAAU,IAAI,EAAO,GAAG,GAAG,EAAO,GAAG,GAAG,EAAO,KAC/C,cAAe,OAAO,EAAO,GAAG,GAAG,EAAO,GAAG,GAAG,EAAO,KACvD,OACF,CACF"}

package/dist/{phone-number-D9j5xYDW.d.cts → phone-number-B1bLIt8i.d.cts}

@@ -1,7 +1,7 @@
 //#region packages/components/data-display/phone-number.d.ts
 type PhoneNumberDisplayProps = {
-  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */
-  value: string;
+  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `0901 234 567` with a `+84` tooltip. */
+  value: string | null | undefined;
 };
 /**
  * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.
@@ -16,4 +16,4 @@ type PhoneNumberDisplayProps = {
 declare const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps>;
 //#endregion
 export { PhoneNumberDisplay as t };
-//# sourceMappingURL=phone-number-D9j5xYDW.d.cts.map
+//# sourceMappingURL=phone-number-B1bLIt8i.d.cts.map

package/dist/{phone-number-D9j5xYDW.d.mts → phone-number-B1bLIt8i.d.mts}

@@ -1,7 +1,7 @@
 //#region packages/components/data-display/phone-number.d.ts
 type PhoneNumberDisplayProps = {
-  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */
-  value: string;
+  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `0901 234 567` with a `+84` tooltip. */
+  value: string | null | undefined;
 };
 /**
  * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.
@@ -16,4 +16,4 @@ type PhoneNumberDisplayProps = {
 declare const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps>;
 //#endregion
 export { PhoneNumberDisplay as t };
-//# sourceMappingURL=phone-number-D9j5xYDW.d.mts.map
+//# sourceMappingURL=phone-number-B1bLIt8i.d.mts.map

package/dist/{phone-number-Ba-f4s1Y.mjs → phone-number-DHFLnHWO.mjs}

@@ -1,2 +1,2 @@
-import{Tooltip as e,TooltipContent as t,TooltipTrigger as n}from"./ui/tooltip.mjs";import{Q as r}from"./tables-Dg3KMBKA.mjs";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({value:o})=>o?a(e,{children:[i(n,{asChild:!0,children:i(`p`,{className:`font-number text-text-positive text-sm tabular-nums`,children:o.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),i(t,{align:`start`,children:i(`p`,{className:`tabular-nums`,children:o.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`+84 $1 $2 $3`)})})]}):i(r,{});export{o as UITablePhoneNumberDisplay};
-//# sourceMappingURL=phone-number-Ba-f4s1Y.mjs.map
+import{Tooltip as e,TooltipContent as t,TooltipTrigger as n}from"./ui/tooltip.mjs";import{Q as r}from"./tables-CuoBQNqx.mjs";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({value:o})=>o?a(e,{children:[i(n,{asChild:!0,children:i(`p`,{className:`font-number text-text-positive text-sm tabular-nums`,children:o.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),i(t,{align:`start`,children:i(`p`,{className:`tabular-nums`,children:o.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`+84 $1 $2 $3`)})})]}):i(r,{});export{o as UITablePhoneNumberDisplay};
+//# sourceMappingURL=phone-number-DHFLnHWO.mjs.map

package/dist/{phone-number-Ba-f4s1Y.mjs.map → phone-number-DHFLnHWO.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"phone-number-Ba-f4s1Y.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Formats and displays a phone number string in a table cell using the\n * `(NXX) NXX-XXXX` pattern, with a tooltip that shows the full international\n * dialling representation. Renders {@link UITableEmpty} when `value` is absent.\n *\n * @example\n * import { UITablePhoneNumberDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITablePhoneNumberDisplay value=\"0843456789\" />\n */\nexport const UITablePhoneNumberDisplay: React.FC<{\n  /** The raw phone number string to format and display; `null`/`undefined`/empty renders an empty state. */\n  value: string | null | undefined;\n}> = ({ value }) => {\n  if (!value) return <UITableEmpty />;\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p className=\"font-number text-text-positive text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '+84 $1 $2 $3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"+KAcA,MAAa,GAGP,CAAE,WACD,EAGH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,EAAM,QAAQ,wBAAyB,YAAY,CAAK,CAAA,CAC9G,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QACpB,SAAA,EAAC,IAAD,CAAG,UAAU,eAAgB,SAAA,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,cAAc,CAAK,CAAA,CAClF,CAAA,CACT,CAAA,CAAA,EAVQ,EAAC,EAAD,CAAe,CAAA"}
+{"version":3,"file":"phone-number-DHFLnHWO.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Formats and displays a phone number string in a table cell using the\n * `(NXX) NXX-XXXX` pattern, with a tooltip that shows the full international\n * dialling representation. Renders {@link UITableEmpty} when `value` is absent.\n *\n * @example\n * import { UITablePhoneNumberDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITablePhoneNumberDisplay value=\"0843456789\" />\n */\nexport const UITablePhoneNumberDisplay: React.FC<{\n  /** The raw phone number string to format and display; `null`/`undefined`/empty renders an empty state. */\n  value: string | null | undefined;\n}> = ({ value }) => {\n  if (!value) return <UITableEmpty />;\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p className=\"font-number text-text-positive text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '+84 $1 $2 $3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"+KAcA,MAAa,GAGP,CAAE,WACD,EAGH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,EAAM,QAAQ,wBAAyB,YAAY,CAAK,CAAA,CAC9G,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QACpB,SAAA,EAAC,IAAD,CAAG,UAAU,eAAgB,SAAA,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,cAAc,CAAK,CAAA,CAClF,CAAA,CACT,CAAA,CAAA,EAVQ,EAAC,EAAD,CAAe,CAAA"}

package/dist/{phone-number-BqRhKQdr.cjs → phone-number-YzmDmFBU.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/tooltip.cjs"),t=require("./tables-BqZ4Zs6e.cjs");let n=require("react/jsx-runtime");const r=({value:r})=>r?(0,n.jsxs)(e.Tooltip,{children:[(0,n.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,n.jsx)(`p`,{className:`font-number text-text-positive text-sm tabular-nums`,children:r.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),(0,n.jsx)(e.TooltipContent,{align:`start`,children:(0,n.jsx)(`p`,{className:`tabular-nums`,children:r.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`+84 $1 $2 $3`)})})]}):(0,n.jsx)(t.Q,{});exports.UITablePhoneNumberDisplay=r;
-//# sourceMappingURL=phone-number-BqRhKQdr.cjs.map
+const e=require("./ui/tooltip.cjs"),t=require("./tables-DdLEj1dI.cjs");let n=require("react/jsx-runtime");const r=({value:r})=>r?(0,n.jsxs)(e.Tooltip,{children:[(0,n.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,n.jsx)(`p`,{className:`font-number text-text-positive text-sm tabular-nums`,children:r.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),(0,n.jsx)(e.TooltipContent,{align:`start`,children:(0,n.jsx)(`p`,{className:`tabular-nums`,children:r.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`+84 $1 $2 $3`)})})]}):(0,n.jsx)(t.Q,{});exports.UITablePhoneNumberDisplay=r;
+//# sourceMappingURL=phone-number-YzmDmFBU.cjs.map

package/dist/{phone-number-BqRhKQdr.cjs.map → phone-number-YzmDmFBU.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"phone-number-BqRhKQdr.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Formats and displays a phone number string in a table cell using the\n * `(NXX) NXX-XXXX` pattern, with a tooltip that shows the full international\n * dialling representation. Renders {@link UITableEmpty} when `value` is absent.\n *\n * @example\n * import { UITablePhoneNumberDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITablePhoneNumberDisplay value=\"0843456789\" />\n */\nexport const UITablePhoneNumberDisplay: React.FC<{\n  /** The raw phone number string to format and display; `null`/`undefined`/empty renders an empty state. */\n  value: string | null | undefined;\n}> = ({ value }) => {\n  if (!value) return <UITableEmpty />;\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p className=\"font-number text-text-positive text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '+84 $1 $2 $3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"0GAcA,MAAa,GAGP,CAAE,WACD,GAGH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,EAAM,QAAQ,wBAAyB,YAAY,CAAK,CAAA,CAC9G,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QACpB,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,eAAgB,SAAA,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,cAAc,CAAK,CAAA,CAClF,CAAA,CACT,CAAA,CAAA,GAVQ,EAAA,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAe,CAAA"}
+{"version":3,"file":"phone-number-YzmDmFBU.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Formats and displays a phone number string in a table cell using the\n * `(NXX) NXX-XXXX` pattern, with a tooltip that shows the full international\n * dialling representation. Renders {@link UITableEmpty} when `value` is absent.\n *\n * @example\n * import { UITablePhoneNumberDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITablePhoneNumberDisplay value=\"0843456789\" />\n */\nexport const UITablePhoneNumberDisplay: React.FC<{\n  /** The raw phone number string to format and display; `null`/`undefined`/empty renders an empty state. */\n  value: string | null | undefined;\n}> = ({ value }) => {\n  if (!value) return <UITableEmpty />;\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p className=\"font-number text-text-positive text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '+84 $1 $2 $3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"0GAcA,MAAa,GAGP,CAAE,WACD,GAGH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,EAAM,QAAQ,wBAAyB,YAAY,CAAK,CAAA,CAC9G,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QACpB,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,eAAgB,SAAA,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,cAAc,CAAK,CAAA,CAClF,CAAA,CACT,CAAA,CAAA,GAVQ,EAAA,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAe,CAAA"}

package/dist/{popover-form-BsapHJck.mjs → popover-form-CeRVpy1B.mjs}

@@ -1,2 +1,2 @@
-import{t as e}from"./close-DYJZ8fkh.mjs";import{K as t}from"./tanstack-form-q9hDCc0Y.mjs";import{n,t as r}from"./submit-button-CGBaPzE9.mjs";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{Dialog as s}from"radix-ui";const c=({title:c,open:l,contentClassName:u,onOpenChange:d,children:f})=>{let p=t();return a(s.Root,{"data-slot":`dialog`,open:l,onOpenChange:d,children:o(s.Portal,{"data-slot":`dialog-portal`,children:[a(s.Overlay,{"data-slot":`dialog-overlay`,className:i(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),a(s.Content,{"data-slot":`dialog-content`,className:i(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`duration-300`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out`),children:o(`section`,{className:`relative flex size-full flex-col`,children:[a(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:a(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:c})}),a(`div`,{className:i(`flex flex-1 flex-col overflow-y-auto py-4`,u),children:f}),o(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[a(p.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>a(r,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>p.handleSubmit()})}),a(p.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>a(n,{disabled:e,className:`w-full`,onClick:()=>{p.reset(),d?.(!1)}})})]}),a(s.Close,{asChild:!0,children:a(e,{className:`absolute top-2.5 right-3`})})]})})]})})};export{c as TanStackPopoverForm};
-//# sourceMappingURL=popover-form-BsapHJck.mjs.map
+import{t as e}from"./close-DYJZ8fkh.mjs";import{K as t}from"./tanstack-form-fkaBh9RO.mjs";import{n,t as r}from"./submit-button-CGBaPzE9.mjs";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{Dialog as s}from"radix-ui";const c=({title:c,open:l,contentClassName:u,onOpenChange:d,children:f})=>{let p=t();return a(s.Root,{"data-slot":`dialog`,open:l,onOpenChange:d,children:o(s.Portal,{"data-slot":`dialog-portal`,children:[a(s.Overlay,{"data-slot":`dialog-overlay`,className:i(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),a(s.Content,{"data-slot":`dialog-content`,className:i(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`duration-300`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out`),children:o(`section`,{className:`relative flex size-full flex-col`,children:[a(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:a(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:c})}),a(`div`,{className:i(`flex flex-1 flex-col overflow-y-auto py-4`,u),children:f}),o(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[a(p.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>a(r,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>p.handleSubmit()})}),a(p.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>a(n,{disabled:e,className:`w-full`,onClick:()=>{p.reset(),d?.(!1)}})})]}),a(s.Close,{asChild:!0,children:a(e,{className:`absolute top-2.5 right-3`})})]})})]})})};export{c as TanStackPopoverForm};
+//# sourceMappingURL=popover-form-CeRVpy1B.mjs.map

package/dist/{popover-form-BsapHJck.mjs.map → popover-form-CeRVpy1B.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"popover-form-BsapHJck.mjs","names":["DialogPrimitive"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n *\n * @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackPopoverForm\n *   title=\"Edit Profile\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <EmailField />\n * </TanStackPopoverForm>\n */\nexport const TanStackPopoverForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the panel header. */\n    title: string;\n    /** Controlled open state of the popover dialog. */\n    open?: boolean;\n    /** Additional CSS class names applied to the scrollable content area. */\n    contentClassName?: string;\n    /** Callback fired when the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  return (\n    <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"dialog-overlay\"\n          className={cn(\n            'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n            'data-[state=open]:animate-in data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n          )}\n        />\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          className={cn(\n            'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n            'duration-300',\n            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n          )}\n        >\n          <section className=\"relative flex size-full flex-col\">\n            <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n              <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n            </header>\n\n            <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n            <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n              <form.Subscribe\n                selector={state => ({\n                  isSubmitting: state.isSubmitting,\n                  disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit,\n                })}\n                children={({ isSubmitting, disabled }) => (\n                  <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n                )}\n              />\n              <form.Subscribe\n                selector={state => ({ disabled: state.isPristine || state.isSubmitting })}\n                children={({ disabled }) => (\n                  <CancelButton\n                    disabled={disabled}\n                    className=\"w-full\"\n                    onClick={() => {\n                      form.reset();\n                      onOpenChange?.(false);\n                    }}\n                  />\n                )}\n              />\n            </div>\n\n            <DialogPrimitive.Close asChild>\n              <CloseButton className=\"absolute top-2.5 right-3\" />\n            </DialogPrimitive.Close>\n          </section>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"qRAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAO,EAAuB,EAEpC,OACE,EAACA,EAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,eACjE,SAAA,EAACA,EAAgB,OAAjB,CAAwB,YAAU,gBAAlC,SAAA,CACE,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,kDACA,yDACA,8DACF,CACD,CAAA,EACD,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,yHACA,eACA,+FACA,qGACF,EAEA,SAAA,EAAC,UAAD,CAAS,UAAU,mCAAnB,SAAA,CACE,EAAC,SAAD,CAAQ,UAAU,8DAChB,SAAA,EAAC,KAAD,CAAI,UAAU,4DAA6D,SAAA,CAAU,CAAA,CAC/E,CAAA,EAER,EAAC,MAAD,CAAK,UAAW,EAAG,4CAA6C,CAAgB,EAAI,UAAc,CAAA,EAElG,EAAC,MAAD,CAAK,UAAU,gEAAf,SAAA,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,cACzB,EAAC,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,EACD,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,cACX,EAAC,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,IAEL,EAACA,EAAgB,MAAjB,CAAuB,QAAA,GACrB,SAAA,EAAC,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}
+{"version":3,"file":"popover-form-CeRVpy1B.mjs","names":["DialogPrimitive"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n *\n * @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackPopoverForm\n *   title=\"Edit Profile\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <EmailField />\n * </TanStackPopoverForm>\n */\nexport const TanStackPopoverForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the panel header. */\n    title: string;\n    /** Controlled open state of the popover dialog. */\n    open?: boolean;\n    /** Additional CSS class names applied to the scrollable content area. */\n    contentClassName?: string;\n    /** Callback fired when the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  return (\n    <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"dialog-overlay\"\n          className={cn(\n            'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n            'data-[state=open]:animate-in data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n          )}\n        />\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          className={cn(\n            'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n            'duration-300',\n            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n          )}\n        >\n          <section className=\"relative flex size-full flex-col\">\n            <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n              <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n            </header>\n\n            <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n            <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n              <form.Subscribe\n                selector={state => ({\n                  isSubmitting: state.isSubmitting,\n                  disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit,\n                })}\n                children={({ isSubmitting, disabled }) => (\n                  <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n                )}\n              />\n              <form.Subscribe\n                selector={state => ({ disabled: state.isPristine || state.isSubmitting })}\n                children={({ disabled }) => (\n                  <CancelButton\n                    disabled={disabled}\n                    className=\"w-full\"\n                    onClick={() => {\n                      form.reset();\n                      onOpenChange?.(false);\n                    }}\n                  />\n                )}\n              />\n            </div>\n\n            <DialogPrimitive.Close asChild>\n              <CloseButton className=\"absolute top-2.5 right-3\" />\n            </DialogPrimitive.Close>\n          </section>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"qRAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAO,EAAuB,EAEpC,OACE,EAACA,EAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,eACjE,SAAA,EAACA,EAAgB,OAAjB,CAAwB,YAAU,gBAAlC,SAAA,CACE,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,kDACA,yDACA,8DACF,CACD,CAAA,EACD,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,yHACA,eACA,+FACA,qGACF,EAEA,SAAA,EAAC,UAAD,CAAS,UAAU,mCAAnB,SAAA,CACE,EAAC,SAAD,CAAQ,UAAU,8DAChB,SAAA,EAAC,KAAD,CAAI,UAAU,4DAA6D,SAAA,CAAU,CAAA,CAC/E,CAAA,EAER,EAAC,MAAD,CAAK,UAAW,EAAG,4CAA6C,CAAgB,EAAI,UAAc,CAAA,EAElG,EAAC,MAAD,CAAK,UAAU,gEAAf,SAAA,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,cACzB,EAAC,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,EACD,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,cACX,EAAC,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,IAEL,EAACA,EAAgB,MAAjB,CAAuB,QAAA,GACrB,SAAA,EAAC,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}

package/dist/{popover-form-Bq2GcuZu.cjs → popover-form-Ch_iMMSm.cjs}

@@ -1,2 +1,2 @@
-const e=require("./close-BYHgEZvZ.cjs"),t=require("./tanstack-form-BxqS40rB.cjs"),n=require("./submit-button-CvINfld5.cjs");let r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("radix-ui");const o=({title:o,open:s,contentClassName:c,onOpenChange:l,children:u})=>{let d=t.K();return(0,i.jsx)(a.Dialog.Root,{"data-slot":`dialog`,open:s,onOpenChange:l,children:(0,i.jsxs)(a.Dialog.Portal,{"data-slot":`dialog-portal`,children:[(0,i.jsx)(a.Dialog.Overlay,{"data-slot":`dialog-overlay`,className:(0,r.cn)(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),(0,i.jsx)(a.Dialog.Content,{"data-slot":`dialog-content`,className:(0,r.cn)(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`duration-300`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out`),children:(0,i.jsxs)(`section`,{className:`relative flex size-full flex-col`,children:[(0,i.jsx)(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:(0,i.jsx)(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:o})}),(0,i.jsx)(`div`,{className:(0,r.cn)(`flex flex-1 flex-col overflow-y-auto py-4`,c),children:u}),(0,i.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[(0,i.jsx)(d.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>(0,i.jsx)(n.t,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>d.handleSubmit()})}),(0,i.jsx)(d.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>(0,i.jsx)(n.n,{disabled:e,className:`w-full`,onClick:()=>{d.reset(),l?.(!1)}})})]}),(0,i.jsx)(a.Dialog.Close,{asChild:!0,children:(0,i.jsx)(e.t,{className:`absolute top-2.5 right-3`})})]})})]})})};exports.TanStackPopoverForm=o;
-//# sourceMappingURL=popover-form-Bq2GcuZu.cjs.map
+const e=require("./close-BYHgEZvZ.cjs"),t=require("./tanstack-form-C0ab8EEl.cjs"),n=require("./submit-button-CvINfld5.cjs");let r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("radix-ui");const o=({title:o,open:s,contentClassName:c,onOpenChange:l,children:u})=>{let d=t.K();return(0,i.jsx)(a.Dialog.Root,{"data-slot":`dialog`,open:s,onOpenChange:l,children:(0,i.jsxs)(a.Dialog.Portal,{"data-slot":`dialog-portal`,children:[(0,i.jsx)(a.Dialog.Overlay,{"data-slot":`dialog-overlay`,className:(0,r.cn)(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),(0,i.jsx)(a.Dialog.Content,{"data-slot":`dialog-content`,className:(0,r.cn)(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`duration-300`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out`),children:(0,i.jsxs)(`section`,{className:`relative flex size-full flex-col`,children:[(0,i.jsx)(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:(0,i.jsx)(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:o})}),(0,i.jsx)(`div`,{className:(0,r.cn)(`flex flex-1 flex-col overflow-y-auto py-4`,c),children:u}),(0,i.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[(0,i.jsx)(d.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>(0,i.jsx)(n.t,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>d.handleSubmit()})}),(0,i.jsx)(d.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>(0,i.jsx)(n.n,{disabled:e,className:`w-full`,onClick:()=>{d.reset(),l?.(!1)}})})]}),(0,i.jsx)(a.Dialog.Close,{asChild:!0,children:(0,i.jsx)(e.t,{className:`absolute top-2.5 right-3`})})]})})]})})};exports.TanStackPopoverForm=o;
+//# sourceMappingURL=popover-form-Ch_iMMSm.cjs.map

package/dist/{popover-form-Bq2GcuZu.cjs.map → popover-form-Ch_iMMSm.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"popover-form-Bq2GcuZu.cjs","names":["useTanStackFormContext","DialogPrimitive","SubmitButton","CancelButton","CloseButton"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n *\n * @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackPopoverForm\n *   title=\"Edit Profile\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <EmailField />\n * </TanStackPopoverForm>\n */\nexport const TanStackPopoverForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the panel header. */\n    title: string;\n    /** Controlled open state of the popover dialog. */\n    open?: boolean;\n    /** Additional CSS class names applied to the scrollable content area. */\n    contentClassName?: string;\n    /** Callback fired when the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  return (\n    <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"dialog-overlay\"\n          className={cn(\n            'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n            'data-[state=open]:animate-in data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n          )}\n        />\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          className={cn(\n            'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n            'duration-300',\n            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n          )}\n        >\n          <section className=\"relative flex size-full flex-col\">\n            <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n              <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n            </header>\n\n            <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n            <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n              <form.Subscribe\n                selector={state => ({\n                  isSubmitting: state.isSubmitting,\n                  disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit,\n                })}\n                children={({ isSubmitting, disabled }) => (\n                  <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n                )}\n              />\n              <form.Subscribe\n                selector={state => ({ disabled: state.isPristine || state.isSubmitting })}\n                children={({ disabled }) => (\n                  <CancelButton\n                    disabled={disabled}\n                    className=\"w-full\"\n                    onClick={() => {\n                      form.reset();\n                      onOpenChange?.(false);\n                    }}\n                  />\n                )}\n              />\n            </div>\n\n            <DialogPrimitive.Close asChild>\n              <CloseButton className=\"absolute top-2.5 right-3\" />\n            </DialogPrimitive.Close>\n          </section>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"iOAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAOA,EAAAA,EAAuB,EAEpC,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,eACjE,UAAA,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAgB,OAAjB,CAAwB,YAAU,gBAAlC,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,kDACA,yDACA,8DACF,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,yHACA,eACA,+FACA,qGACF,EAEA,UAAA,EAAA,EAAA,KAAA,CAAC,UAAD,CAAS,UAAU,mCAAnB,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAU,8DAChB,UAAA,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,4DAA6D,SAAA,CAAU,CAAA,CAC/E,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,4CAA6C,CAAgB,EAAI,UAAc,CAAA,GAElG,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gEAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,eACzB,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,eACX,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,KAEL,EAAA,EAAA,IAAA,CAACF,EAAAA,OAAgB,MAAjB,CAAuB,QAAA,GACrB,UAAA,EAAA,EAAA,IAAA,CAACG,EAAAA,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}
+{"version":3,"file":"popover-form-Ch_iMMSm.cjs","names":["useTanStackFormContext","DialogPrimitive","SubmitButton","CancelButton","CloseButton"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n *\n * @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackPopoverForm\n *   title=\"Edit Profile\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <EmailField />\n * </TanStackPopoverForm>\n */\nexport const TanStackPopoverForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the panel header. */\n    title: string;\n    /** Controlled open state of the popover dialog. */\n    open?: boolean;\n    /** Additional CSS class names applied to the scrollable content area. */\n    contentClassName?: string;\n    /** Callback fired when the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  return (\n    <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"dialog-overlay\"\n          className={cn(\n            'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n            'data-[state=open]:animate-in data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n          )}\n        />\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          className={cn(\n            'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n            'duration-300',\n            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n          )}\n        >\n          <section className=\"relative flex size-full flex-col\">\n            <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n              <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n            </header>\n\n            <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n            <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n              <form.Subscribe\n                selector={state => ({\n                  isSubmitting: state.isSubmitting,\n                  disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit,\n                })}\n                children={({ isSubmitting, disabled }) => (\n                  <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n                )}\n              />\n              <form.Subscribe\n                selector={state => ({ disabled: state.isPristine || state.isSubmitting })}\n                children={({ disabled }) => (\n                  <CancelButton\n                    disabled={disabled}\n                    className=\"w-full\"\n                    onClick={() => {\n                      form.reset();\n                      onOpenChange?.(false);\n                    }}\n                  />\n                )}\n              />\n            </div>\n\n            <DialogPrimitive.Close asChild>\n              <CloseButton className=\"absolute top-2.5 right-3\" />\n            </DialogPrimitive.Close>\n          </section>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"iOAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAOA,EAAAA,EAAuB,EAEpC,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,eACjE,UAAA,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAgB,OAAjB,CAAwB,YAAU,gBAAlC,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,kDACA,yDACA,8DACF,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,yHACA,eACA,+FACA,qGACF,EAEA,UAAA,EAAA,EAAA,KAAA,CAAC,UAAD,CAAS,UAAU,mCAAnB,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAU,8DAChB,UAAA,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,4DAA6D,SAAA,CAAU,CAAA,CAC/E,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,4CAA6C,CAAgB,EAAI,UAAc,CAAA,GAElG,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gEAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,eACzB,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,eACX,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,KAEL,EAAA,EAAA,IAAA,CAACF,EAAAA,OAAgB,MAAjB,CAAuB,QAAA,GACrB,UAAA,EAAA,EAAA,IAAA,CAACG,EAAAA,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}

package/dist/{progress-display-CiYWPOnq.cjs → progress-display-57LT7U37.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tables-BqZ4Zs6e.cjs"),t=require("./ui/progress.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=(0,n.memo)(({value:n,showLabel:a=!0,successThreshold:o=70,warningThreshold:s=40})=>{if(n==null)return(0,i.jsx)(e.Q,{});let c=Math.min(100,Math.max(0,n));return(0,i.jsxs)(`div`,{className:`flex w-full min-w-24 items-center gap-x-2`,children:[(0,i.jsx)(t.Progress,{value:c,className:(0,r.cn)(`flex-1`,c>=o?`[&>[data-slot=progress-indicator]]:bg-success`:c>=s?`[&>[data-slot=progress-indicator]]:bg-warning`:`[&>[data-slot=progress-indicator]]:bg-danger`)}),a&&(0,i.jsxs)(`span`,{className:`w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums`,children:[c,`%`]})]})});a.displayName=`UITableProgressDisplay`,exports.UITableProgressDisplay=a;
-//# sourceMappingURL=progress-display-CiYWPOnq.cjs.map
+const e=require("./ui/progress.cjs"),t=require("./tables-DdLEj1dI.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=(0,n.memo)(({value:n,showLabel:a=!0,successThreshold:o=70,warningThreshold:s=40})=>{if(n==null)return(0,i.jsx)(t.Q,{});let c=Math.min(100,Math.max(0,n));return(0,i.jsxs)(`div`,{className:`flex w-full min-w-24 items-center gap-x-2`,children:[(0,i.jsx)(e.Progress,{value:c,className:(0,r.cn)(`flex-1`,c>=o?`[&>[data-slot=progress-indicator]]:bg-success`:c>=s?`[&>[data-slot=progress-indicator]]:bg-warning`:`[&>[data-slot=progress-indicator]]:bg-danger`)}),a&&(0,i.jsxs)(`span`,{className:`w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums`,children:[c,`%`]})]})});a.displayName=`UITableProgressDisplay`,exports.UITableProgressDisplay=a;
+//# sourceMappingURL=progress-display-57LT7U37.cjs.map

package/dist/{progress-display-CiYWPOnq.cjs.map → progress-display-57LT7U37.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"progress-display-CiYWPOnq.cjs","names":["UITableEmpty","Progress"],"sources":["../packages/components/features/tables/components/atoms/progress-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress } from '@/components/ui/progress';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableProgressDisplay} component. */\ntype Props = {\n  /** Percentage value between 0 and 100; `null`/`undefined` renders an empty state. */\n  value: number | null | undefined;\n  /** When `true`, shows the numeric percentage next to the bar (default: `true`). */\n  showLabel?: boolean;\n  /**\n   * Color thresholds applied to the progress indicator.\n   * - `≥ successThreshold` → green\n   * - `≥ warningThreshold` → yellow\n   * - otherwise → red\n   *\n   * Defaults: `successThreshold = 70`, `warningThreshold = 40`.\n   */\n  successThreshold?: number;\n  warningThreshold?: number;\n};\n\n/**\n * Renders a horizontal progress bar with an optional percentage label for a\n * table cell.  The bar color shifts from red → yellow → green based on\n * configurable thresholds.  Renders {@link UITableEmpty} when `value` is absent.\n *\n * @example\n * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableProgressDisplay value={75} />\n */\nexport const UITableProgressDisplay = memo(({ value, showLabel = true, successThreshold = 70, warningThreshold = 40 }: Props) => {\n  if (value === null || value === undefined) return <UITableEmpty />;\n\n  const clamped = Math.min(100, Math.max(0, value));\n\n  const indicatorClass =\n    clamped >= successThreshold\n      ? '[&>[data-slot=progress-indicator]]:bg-success'\n      : clamped >= warningThreshold\n        ? '[&>[data-slot=progress-indicator]]:bg-warning'\n        : '[&>[data-slot=progress-indicator]]:bg-danger';\n\n  return (\n    <div className=\"flex w-full min-w-24 items-center gap-x-2\">\n      <Progress value={clamped} className={cn('flex-1', indicatorClass)} />\n      {showLabel && <span className=\"w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums\">{clamped}%</span>}\n    </div>\n  );\n});\nUITableProgressDisplay.displayName = 'UITableProgressDisplay';\n"],"mappings":"0KAqCA,MAAa,GAAA,EAAA,EAAA,KAAA,EAA+B,CAAE,QAAO,YAAY,GAAM,mBAAmB,GAAI,mBAAmB,MAAgB,CAC/H,GAAI,GAAU,KAA6B,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAEjE,IAAM,EAAU,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAShD,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4CAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,MAAO,EAAS,WAAA,EAAA,EAAA,GAAA,CAAc,SAR1C,GAAW,EACP,gDACA,GAAW,EACT,gDACA,8CAI4D,CAAI,CAAA,EACnE,IAAa,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,mFAAhB,SAAA,CAAoG,EAAQ,GAAO,CAC9H,CAAA,CAAA,GAET,CAAC,EACD,EAAuB,YAAc"}
+{"version":3,"file":"progress-display-57LT7U37.cjs","names":["UITableEmpty","Progress"],"sources":["../packages/components/features/tables/components/atoms/progress-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress } from '@/components/ui/progress';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableProgressDisplay} component. */\ntype Props = {\n  /** Percentage value between 0 and 100; `null`/`undefined` renders an empty state. */\n  value: number | null | undefined;\n  /** When `true`, shows the numeric percentage next to the bar (default: `true`). */\n  showLabel?: boolean;\n  /**\n   * Color thresholds applied to the progress indicator.\n   * - `≥ successThreshold` → green\n   * - `≥ warningThreshold` → yellow\n   * - otherwise → red\n   *\n   * Defaults: `successThreshold = 70`, `warningThreshold = 40`.\n   */\n  successThreshold?: number;\n  warningThreshold?: number;\n};\n\n/**\n * Renders a horizontal progress bar with an optional percentage label for a\n * table cell.  The bar color shifts from red → yellow → green based on\n * configurable thresholds.  Renders {@link UITableEmpty} when `value` is absent.\n *\n * @example\n * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableProgressDisplay value={75} />\n */\nexport const UITableProgressDisplay = memo(({ value, showLabel = true, successThreshold = 70, warningThreshold = 40 }: Props) => {\n  if (value === null || value === undefined) return <UITableEmpty />;\n\n  const clamped = Math.min(100, Math.max(0, value));\n\n  const indicatorClass =\n    clamped >= successThreshold\n      ? '[&>[data-slot=progress-indicator]]:bg-success'\n      : clamped >= warningThreshold\n        ? '[&>[data-slot=progress-indicator]]:bg-warning'\n        : '[&>[data-slot=progress-indicator]]:bg-danger';\n\n  return (\n    <div className=\"flex w-full min-w-24 items-center gap-x-2\">\n      <Progress value={clamped} className={cn('flex-1', indicatorClass)} />\n      {showLabel && <span className=\"w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums\">{clamped}%</span>}\n    </div>\n  );\n});\nUITableProgressDisplay.displayName = 'UITableProgressDisplay';\n"],"mappings":"0KAqCA,MAAa,GAAA,EAAA,EAAA,KAAA,EAA+B,CAAE,QAAO,YAAY,GAAM,mBAAmB,GAAI,mBAAmB,MAAgB,CAC/H,GAAI,GAAU,KAA6B,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAEjE,IAAM,EAAU,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAShD,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4CAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,MAAO,EAAS,WAAA,EAAA,EAAA,GAAA,CAAc,SAR1C,GAAW,EACP,gDACA,GAAW,EACT,gDACA,8CAI4D,CAAI,CAAA,EACnE,IAAa,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,mFAAhB,SAAA,CAAoG,EAAQ,GAAO,CAC9H,CAAA,CAAA,GAET,CAAC,EACD,EAAuB,YAAc"}

package/dist/{progress-display-0UsBzt_r.mjs → progress-display-AfoHitiE.mjs}

@@ -1,2 +1,2 @@
-import{Q as e}from"./tables-Dg3KMBKA.mjs";import{Progress as t}from"./ui/progress.mjs";import{memo as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=n(({value:n,showLabel:o=!0,successThreshold:s=70,warningThreshold:c=40})=>{if(n==null)return i(e,{});let l=Math.min(100,Math.max(0,n));return a(`div`,{className:`flex w-full min-w-24 items-center gap-x-2`,children:[i(t,{value:l,className:r(`flex-1`,l>=s?`[&>[data-slot=progress-indicator]]:bg-success`:l>=c?`[&>[data-slot=progress-indicator]]:bg-warning`:`[&>[data-slot=progress-indicator]]:bg-danger`)}),o&&a(`span`,{className:`w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums`,children:[l,`%`]})]})});o.displayName=`UITableProgressDisplay`;export{o as UITableProgressDisplay};
-//# sourceMappingURL=progress-display-0UsBzt_r.mjs.map
+import{Progress as e}from"./ui/progress.mjs";import{Q as t}from"./tables-CuoBQNqx.mjs";import{memo as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=n(({value:n,showLabel:o=!0,successThreshold:s=70,warningThreshold:c=40})=>{if(n==null)return i(t,{});let l=Math.min(100,Math.max(0,n));return a(`div`,{className:`flex w-full min-w-24 items-center gap-x-2`,children:[i(e,{value:l,className:r(`flex-1`,l>=s?`[&>[data-slot=progress-indicator]]:bg-success`:l>=c?`[&>[data-slot=progress-indicator]]:bg-warning`:`[&>[data-slot=progress-indicator]]:bg-danger`)}),o&&a(`span`,{className:`w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums`,children:[l,`%`]})]})});o.displayName=`UITableProgressDisplay`;export{o as UITableProgressDisplay};
+//# sourceMappingURL=progress-display-AfoHitiE.mjs.map

package/dist/{progress-display-0UsBzt_r.mjs.map → progress-display-AfoHitiE.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"progress-display-0UsBzt_r.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/progress-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress } from '@/components/ui/progress';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableProgressDisplay} component. */\ntype Props = {\n  /** Percentage value between 0 and 100; `null`/`undefined` renders an empty state. */\n  value: number | null | undefined;\n  /** When `true`, shows the numeric percentage next to the bar (default: `true`). */\n  showLabel?: boolean;\n  /**\n   * Color thresholds applied to the progress indicator.\n   * - `≥ successThreshold` → green\n   * - `≥ warningThreshold` → yellow\n   * - otherwise → red\n   *\n   * Defaults: `successThreshold = 70`, `warningThreshold = 40`.\n   */\n  successThreshold?: number;\n  warningThreshold?: number;\n};\n\n/**\n * Renders a horizontal progress bar with an optional percentage label for a\n * table cell.  The bar color shifts from red → yellow → green based on\n * configurable thresholds.  Renders {@link UITableEmpty} when `value` is absent.\n *\n * @example\n * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableProgressDisplay value={75} />\n */\nexport const UITableProgressDisplay = memo(({ value, showLabel = true, successThreshold = 70, warningThreshold = 40 }: Props) => {\n  if (value === null || value === undefined) return <UITableEmpty />;\n\n  const clamped = Math.min(100, Math.max(0, value));\n\n  const indicatorClass =\n    clamped >= successThreshold\n      ? '[&>[data-slot=progress-indicator]]:bg-success'\n      : clamped >= warningThreshold\n        ? '[&>[data-slot=progress-indicator]]:bg-warning'\n        : '[&>[data-slot=progress-indicator]]:bg-danger';\n\n  return (\n    <div className=\"flex w-full min-w-24 items-center gap-x-2\">\n      <Progress value={clamped} className={cn('flex-1', indicatorClass)} />\n      {showLabel && <span className=\"w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums\">{clamped}%</span>}\n    </div>\n  );\n});\nUITableProgressDisplay.displayName = 'UITableProgressDisplay';\n"],"mappings":"0NAqCA,MAAa,EAAyB,GAAM,CAAE,QAAO,YAAY,GAAM,mBAAmB,GAAI,mBAAmB,MAAgB,CAC/H,GAAI,GAAU,KAA6B,OAAO,EAAC,EAAD,CAAe,CAAA,EAEjE,IAAM,EAAU,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAShD,OACE,EAAC,MAAD,CAAK,UAAU,4CAAf,SAAA,CACE,EAAC,EAAD,CAAU,MAAO,EAAS,UAAW,EAAG,SAR1C,GAAW,EACP,gDACA,GAAW,EACT,gDACA,8CAI4D,CAAI,CAAA,EACnE,GAAa,EAAC,OAAD,CAAM,UAAU,mFAAhB,SAAA,CAAoG,EAAQ,GAAO,CAC9H,CAAA,CAAA,GAET,CAAC,EACD,EAAuB,YAAc"}
+{"version":3,"file":"progress-display-AfoHitiE.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/progress-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress } from '@/components/ui/progress';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableProgressDisplay} component. */\ntype Props = {\n  /** Percentage value between 0 and 100; `null`/`undefined` renders an empty state. */\n  value: number | null | undefined;\n  /** When `true`, shows the numeric percentage next to the bar (default: `true`). */\n  showLabel?: boolean;\n  /**\n   * Color thresholds applied to the progress indicator.\n   * - `≥ successThreshold` → green\n   * - `≥ warningThreshold` → yellow\n   * - otherwise → red\n   *\n   * Defaults: `successThreshold = 70`, `warningThreshold = 40`.\n   */\n  successThreshold?: number;\n  warningThreshold?: number;\n};\n\n/**\n * Renders a horizontal progress bar with an optional percentage label for a\n * table cell.  The bar color shifts from red → yellow → green based on\n * configurable thresholds.  Renders {@link UITableEmpty} when `value` is absent.\n *\n * @example\n * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableProgressDisplay value={75} />\n */\nexport const UITableProgressDisplay = memo(({ value, showLabel = true, successThreshold = 70, warningThreshold = 40 }: Props) => {\n  if (value === null || value === undefined) return <UITableEmpty />;\n\n  const clamped = Math.min(100, Math.max(0, value));\n\n  const indicatorClass =\n    clamped >= successThreshold\n      ? '[&>[data-slot=progress-indicator]]:bg-success'\n      : clamped >= warningThreshold\n        ? '[&>[data-slot=progress-indicator]]:bg-warning'\n        : '[&>[data-slot=progress-indicator]]:bg-danger';\n\n  return (\n    <div className=\"flex w-full min-w-24 items-center gap-x-2\">\n      <Progress value={clamped} className={cn('flex-1', indicatorClass)} />\n      {showLabel && <span className=\"w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums\">{clamped}%</span>}\n    </div>\n  );\n});\nUITableProgressDisplay.displayName = 'UITableProgressDisplay';\n"],"mappings":"0NAqCA,MAAa,EAAyB,GAAM,CAAE,QAAO,YAAY,GAAM,mBAAmB,GAAI,mBAAmB,MAAgB,CAC/H,GAAI,GAAU,KAA6B,OAAO,EAAC,EAAD,CAAe,CAAA,EAEjE,IAAM,EAAU,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAShD,OACE,EAAC,MAAD,CAAK,UAAU,4CAAf,SAAA,CACE,EAAC,EAAD,CAAU,MAAO,EAAS,UAAW,EAAG,SAR1C,GAAW,EACP,gDACA,GAAW,EACT,gDACA,8CAI4D,CAAI,CAAA,EACnE,GAAa,EAAC,OAAD,CAAM,UAAU,mFAAhB,SAAA,CAAoG,EAAQ,GAAO,CAC9H,CAAA,CAAA,GAET,CAAC,EACD,EAAuB,YAAc"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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