@customafk/lunas-ui 0.2.68 → 0.2.69

package/dist/{currency-display-CKLQ_lxN.mjs.map → currency-display-CEg_HRYv.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"currency-display-CKLQ_lxN.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/currency-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableCurrencyDisplay} component. */\ntype Props = {\n  /** The numeric value to format as currency; falsy / `NaN` renders an empty state. */\n  value: number | string | null | undefined;\n  /** ISO 4217 currency code (default: `'USD'`). */\n  currency?: string;\n  /**\n   * BCP 47 locale used for number formatting (default: `'en-US'`).\n   * Controls digit grouping and decimal separators.\n   */\n  locale?: string;\n  /** How to display the currency symbol — `'symbol'` (default), `'code'`, or `'name'`. */\n  display?: 'symbol' | 'code' | 'name';\n  /** Font-size variant (default: `'md'`). */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** When `true`, applies a green tint for positive and red tint for negative values. */\n  colorize?: boolean;\n};\n\n/**\n * Formats a numeric value as a locale-aware currency string in a table cell.\n * Always shows exactly two decimal places and uses the browser's `Intl` API for\n * symbol placement.  Renders {@link UITableEmpty} when the value is absent or\n * invalid.\n *\n * @example\n * import { UITableCurrencyDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableCurrencyDisplay value={1234.5} currency=\"USD\" colorize />\n */\nexport const UITableCurrencyDisplay = memo(({ value, currency = 'USD', locale = 'en-US', display = 'symbol', size = 'md', colorize = false }: Props) => {\n  const formatted = useMemo(() => {\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    if (num === null || num === undefined || Number.isNaN(num) || !Number.isFinite(num)) return null;\n\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency,\n      currencyDisplay: display,\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\n    }).format(num);\n  }, [value, currency, locale, display]);\n\n  const isNegative = useMemo(() => {\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    return typeof num === 'number' && num < 0;\n  }, [value]);\n\n  if (!formatted) return <UITableEmpty />;\n\n  return (\n    <p\n      className={cn(\n        'font-number tabular-nums',\n        size === 'xs' && 'text-xs',\n        size === 'sm' && 'text-sm',\n        size === 'md' && 'text-base',\n        size === 'lg' && 'text-lg',\n        size === 'xl' && 'text-xl',\n        !colorize && 'text-text-positive',\n        colorize && isNegative && 'text-danger-strong',\n        colorize && !isNegative && 'text-success-strong'\n      )}\n    >\n      {formatted}\n    </p>\n  );\n});\nUITableCurrencyDisplay.displayName = 'UITableCurrencyDisplay';\n"],"mappings":"gLAsCA,MAAa,EAAyB,GAAM,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,UAAU,SAAU,OAAO,KAAM,WAAW,MAAmB,CACtJ,IAAM,EAAY,MAAc,CAC9B,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAG/D,OAFI,GAAQ,MAA6B,OAAO,MAAM,CAAG,GAAK,CAAC,OAAO,SAAS,CAAG,EAAU,KAErF,IAAI,KAAK,aAAa,EAAQ,CACnC,MAAO,WACP,WACA,gBAAiB,EACjB,sBAAuB,EACvB,sBAAuB,CACzB,CAAC,CAAC,CAAC,OAAO,CAAG,CACf,EAAG,CAAC,EAAO,EAAU,EAAQ,CAAO,CAAC,EAE/B,EAAa,MAAc,CAC/B,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC/D,OAAO,OAAO,GAAQ,UAAY,EAAM,CAC1C,EAAG,CAAC,CAAK,CAAC,EAIV,OAFK,EAGH,EAAC,IAAD,CACE,UAAW,EACT,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAY,qBACb,GAAY,GAAc,qBAC1B,GAAY,CAAC,GAAc,qBAC7B,WAEC,CACA,CAAA,EAjBkB,EAAC,EAAD,CAAe,CAAA,CAmBxC,CAAC,EACD,EAAuB,YAAc"}
+{"version":3,"file":"currency-display-CEg_HRYv.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/currency-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableCurrencyDisplay} component. */\ntype Props = {\n  /** The numeric value to format as currency; falsy / `NaN` renders an empty state. */\n  value: number | string | null | undefined;\n  /** ISO 4217 currency code (default: `'USD'`). */\n  currency?: string;\n  /**\n   * BCP 47 locale used for number formatting (default: `'en-US'`).\n   * Controls digit grouping and decimal separators.\n   */\n  locale?: string;\n  /** How to display the currency symbol — `'symbol'` (default), `'code'`, or `'name'`. */\n  display?: 'symbol' | 'code' | 'name';\n  /** Font-size variant (default: `'md'`). */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** When `true`, applies a green tint for positive and red tint for negative values. */\n  colorize?: boolean;\n};\n\n/**\n * Formats a numeric value as a locale-aware currency string in a table cell.\n * Always shows exactly two decimal places and uses the browser's `Intl` API for\n * symbol placement.  Renders {@link UITableEmpty} when the value is absent or\n * invalid.\n *\n * @example\n * import { UITableCurrencyDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableCurrencyDisplay value={1234.5} currency=\"USD\" colorize />\n */\nexport const UITableCurrencyDisplay = memo(({ value, currency = 'USD', locale = 'en-US', display = 'symbol', size = 'md', colorize = false }: Props) => {\n  const formatted = useMemo(() => {\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    if (num === null || num === undefined || Number.isNaN(num) || !Number.isFinite(num)) return null;\n\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency,\n      currencyDisplay: display,\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\n    }).format(num);\n  }, [value, currency, locale, display]);\n\n  const isNegative = useMemo(() => {\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    return typeof num === 'number' && num < 0;\n  }, [value]);\n\n  if (!formatted) return <UITableEmpty />;\n\n  return (\n    <p\n      className={cn(\n        'font-number tabular-nums',\n        size === 'xs' && 'text-xs',\n        size === 'sm' && 'text-sm',\n        size === 'md' && 'text-base',\n        size === 'lg' && 'text-lg',\n        size === 'xl' && 'text-xl',\n        !colorize && 'text-text-positive',\n        colorize && isNegative && 'text-danger-strong',\n        colorize && !isNegative && 'text-success-strong'\n      )}\n    >\n      {formatted}\n    </p>\n  );\n});\nUITableCurrencyDisplay.displayName = 'UITableCurrencyDisplay';\n"],"mappings":"gLAsCA,MAAa,EAAyB,GAAM,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,UAAU,SAAU,OAAO,KAAM,WAAW,MAAmB,CACtJ,IAAM,EAAY,MAAc,CAC9B,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAG/D,OAFI,GAAQ,MAA6B,OAAO,MAAM,CAAG,GAAK,CAAC,OAAO,SAAS,CAAG,EAAU,KAErF,IAAI,KAAK,aAAa,EAAQ,CACnC,MAAO,WACP,WACA,gBAAiB,EACjB,sBAAuB,EACvB,sBAAuB,CACzB,CAAC,CAAC,CAAC,OAAO,CAAG,CACf,EAAG,CAAC,EAAO,EAAU,EAAQ,CAAO,CAAC,EAE/B,EAAa,MAAc,CAC/B,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC/D,OAAO,OAAO,GAAQ,UAAY,EAAM,CAC1C,EAAG,CAAC,CAAK,CAAC,EAIV,OAFK,EAGH,EAAC,IAAD,CACE,UAAW,EACT,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAY,qBACb,GAAY,GAAc,qBAC1B,GAAY,CAAC,GAAc,qBAC7B,WAEC,CACA,CAAA,EAjBkB,EAAC,EAAD,CAAe,CAAA,CAmBxC,CAAC,EACD,EAAuB,YAAc"}

package/dist/{date-display-BQOVmN7S.cjs → date-display-BgI7Wjqf.cjs}

@@ -1,2 +1,2 @@
-const e=require("./date-B3cozmfV.cjs"),t=require("./ui/badge.cjs"),n=require("./ui/tooltip.cjs"),r=require("./tables-B1O9qy-m.cjs");let i=require("react/jsx-runtime");const a=({date:a})=>a==null?(0,i.jsx)(r.Y,{}):(0,i.jsx)(n.TooltipProvider,{children:(0,i.jsxs)(n.Tooltip,{children:[(0,i.jsx)(n.TooltipTrigger,{asChild:!0,children:(0,i.jsx)(t.Badge,{className:`h-fit`,children:(0,i.jsx)(e.t,{date:a,format:`medium`,className:`font-normal text-white`})})}),(0,i.jsx)(n.TooltipContent,{className:`rounded px-2`,children:(0,i.jsx)(e.t,{date:a,format:`full`,showTime:!0,className:`font-medium text-text-negative text-xs`})})]})});exports.UITableDateDisplay=a;
-//# sourceMappingURL=date-display-BQOVmN7S.cjs.map
+const e=require("./date-B3cozmfV.cjs"),t=require("./ui/badge.cjs"),n=require("./ui/tooltip.cjs"),r=require("./tables-078i-X0d.cjs");let i=require("react/jsx-runtime");const a=({date:a})=>a==null?(0,i.jsx)(r.Q,{}):(0,i.jsx)(n.TooltipProvider,{children:(0,i.jsxs)(n.Tooltip,{children:[(0,i.jsx)(n.TooltipTrigger,{asChild:!0,children:(0,i.jsx)(t.Badge,{className:`h-fit`,children:(0,i.jsx)(e.t,{date:a,format:`medium`,className:`font-normal text-white`})})}),(0,i.jsx)(n.TooltipContent,{className:`rounded px-2`,children:(0,i.jsx)(e.t,{date:a,format:`full`,showTime:!0,className:`font-medium text-text-negative text-xs`})})]})});exports.UITableDateDisplay=a;
+//# sourceMappingURL=date-display-BgI7Wjqf.cjs.map

package/dist/{date-display-BQOVmN7S.cjs.map → date-display-BgI7Wjqf.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"date-display-BQOVmN7S.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","Badge","DateDisplay","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/date-display.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from '@/components/data-display/date';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableDateDisplay} component. */\ntype Props = {\n  /** The date value to format and display; `null`/`undefined` renders an empty state. */\n  date: Date | string | number | null | undefined;\n};\n\n/**\n * Displays a date as a compact badge in a table cell with a tooltip that shows\n * the full date and time on hover; renders {@link UITableEmpty} when `date` is\n * `null` or `undefined`.\n *\n * @example\n * import { UITableDateDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDateDisplay date={new Date('2024-06-15T10:30:00Z')} />\n */\nexport const UITableDateDisplay: React.FC<Props> = ({ date }) => {\n  if (typeof date === 'undefined' || date === null) return <UITableEmpty />;\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"font-normal text-white\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent className=\"rounded px-2\">\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-medium text-text-negative text-xs\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"uKAsBA,MAAa,GAAuC,CAAE,UACzC,GAAiC,MAAa,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAEtE,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,UAAU,kBACf,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wBAA0B,CAAA,CACxE,CAAA,CACO,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,UAAU,yBACxB,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,wCAA0C,CAAA,CACtF,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}
+{"version":3,"file":"date-display-BgI7Wjqf.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","Badge","DateDisplay","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/date-display.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from '@/components/data-display/date';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableDateDisplay} component. */\ntype Props = {\n  /** The date value to format and display; `null`/`undefined` renders an empty state. */\n  date: Date | string | number | null | undefined;\n};\n\n/**\n * Displays a date as a compact badge in a table cell with a tooltip that shows\n * the full date and time on hover; renders {@link UITableEmpty} when `date` is\n * `null` or `undefined`.\n *\n * @example\n * import { UITableDateDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDateDisplay date={new Date('2024-06-15T10:30:00Z')} />\n */\nexport const UITableDateDisplay: React.FC<Props> = ({ date }) => {\n  if (typeof date === 'undefined' || date === null) return <UITableEmpty />;\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"font-normal text-white\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent className=\"rounded px-2\">\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-medium text-text-negative text-xs\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"uKAsBA,MAAa,GAAuC,CAAE,UACzC,GAAiC,MAAa,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAEtE,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,UAAU,kBACf,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wBAA0B,CAAA,CACxE,CAAA,CACO,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,UAAU,yBACxB,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,wCAA0C,CAAA,CACtF,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}

package/dist/{date-display-BrCdJkmq.mjs → date-display-DGfHQhpu.mjs}

@@ -1,2 +1,2 @@
-import{t as e}from"./date-Nsz0Pewe.mjs";import{Badge as t}from"./ui/badge.mjs";import{Tooltip as n,TooltipContent as r,TooltipProvider as i,TooltipTrigger as a}from"./ui/tooltip.mjs";import{Y as o}from"./tables-9d53sH9E.mjs";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({date:l})=>l==null?s(o,{}):s(i,{children:c(n,{children:[s(a,{asChild:!0,children:s(t,{className:`h-fit`,children:s(e,{date:l,format:`medium`,className:`font-normal text-white`})})}),s(r,{className:`rounded px-2`,children:s(e,{date:l,format:`full`,showTime:!0,className:`font-medium text-text-negative text-xs`})})]})});export{l as UITableDateDisplay};
-//# sourceMappingURL=date-display-BrCdJkmq.mjs.map
+import{t as e}from"./date-Nsz0Pewe.mjs";import{Badge as t}from"./ui/badge.mjs";import{Tooltip as n,TooltipContent as r,TooltipProvider as i,TooltipTrigger as a}from"./ui/tooltip.mjs";import{Q as o}from"./tables-BGzwkdFO.mjs";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({date:l})=>l==null?s(o,{}):s(i,{children:c(n,{children:[s(a,{asChild:!0,children:s(t,{className:`h-fit`,children:s(e,{date:l,format:`medium`,className:`font-normal text-white`})})}),s(r,{className:`rounded px-2`,children:s(e,{date:l,format:`full`,showTime:!0,className:`font-medium text-text-negative text-xs`})})]})});export{l as UITableDateDisplay};
+//# sourceMappingURL=date-display-DGfHQhpu.mjs.map

package/dist/{date-display-BrCdJkmq.mjs.map → date-display-DGfHQhpu.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"date-display-BrCdJkmq.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/date-display.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from '@/components/data-display/date';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableDateDisplay} component. */\ntype Props = {\n  /** The date value to format and display; `null`/`undefined` renders an empty state. */\n  date: Date | string | number | null | undefined;\n};\n\n/**\n * Displays a date as a compact badge in a table cell with a tooltip that shows\n * the full date and time on hover; renders {@link UITableEmpty} when `date` is\n * `null` or `undefined`.\n *\n * @example\n * import { UITableDateDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDateDisplay date={new Date('2024-06-15T10:30:00Z')} />\n */\nexport const UITableDateDisplay: React.FC<Props> = ({ date }) => {\n  if (typeof date === 'undefined' || date === null) return <UITableEmpty />;\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"font-normal text-white\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent className=\"rounded px-2\">\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-medium text-text-negative text-xs\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"mRAsBA,MAAa,GAAuC,CAAE,UACzC,GAAiC,KAAa,EAAC,EAAD,CAAe,CAAA,EAEtE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,EAAD,CAAO,UAAU,iBACf,EAAC,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wBAA0B,CAAA,CACxE,CAAA,CACO,CAAA,EAChB,EAAC,EAAD,CAAgB,UAAU,wBACxB,EAAC,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,wCAA0C,CAAA,CACtF,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}
+{"version":3,"file":"date-display-DGfHQhpu.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/date-display.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from '@/components/data-display/date';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableDateDisplay} component. */\ntype Props = {\n  /** The date value to format and display; `null`/`undefined` renders an empty state. */\n  date: Date | string | number | null | undefined;\n};\n\n/**\n * Displays a date as a compact badge in a table cell with a tooltip that shows\n * the full date and time on hover; renders {@link UITableEmpty} when `date` is\n * `null` or `undefined`.\n *\n * @example\n * import { UITableDateDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDateDisplay date={new Date('2024-06-15T10:30:00Z')} />\n */\nexport const UITableDateDisplay: React.FC<Props> = ({ date }) => {\n  if (typeof date === 'undefined' || date === null) return <UITableEmpty />;\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"font-normal text-white\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent className=\"rounded px-2\">\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-medium text-text-negative text-xs\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"mRAsBA,MAAa,GAAuC,CAAE,UACzC,GAAiC,KAAa,EAAC,EAAD,CAAe,CAAA,EAEtE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,EAAD,CAAO,UAAU,iBACf,EAAC,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wBAA0B,CAAA,CACxE,CAAA,CACO,CAAA,EAChB,EAAC,EAAD,CAAgB,UAAU,wBACxB,EAAC,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,wCAA0C,CAAA,CACtF,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}

package/dist/{date-field-RvEB9F1r.cjs → date-field--jOKZ2x1.cjs}

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

package/dist/{date-field-RvEB9F1r.cjs.map → date-field--jOKZ2x1.cjs.map}

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

package/dist/{date-field-Cxbrc0Vl.mjs → date-field-CXzcsnjn.mjs}

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

package/dist/{date-field-Cxbrc0Vl.mjs.map → date-field-CXzcsnjn.mjs.map}

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

package/dist/{description-display-DnDAB3a1.cjs → description-display-BR8nXqc_.cjs}

@@ -1,2 +1,2 @@
-const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-B1O9qy-m.cjs");let r=require("react/jsx-runtime");const i=({content:i})=>i==null?(0,r.jsx)(n.Y,{}):(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{children:(0,r.jsx)(e.Paragraph,{variant:`sm`,className:`line-clamp-2 whitespace-pre-line break-all`,children:i})}),(0,r.jsx)(t.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,r.jsx)(e.Paragraph,{variant:`xs`,className:`whitespace-pre-line text-wrap break-keep text-text-negative-weak`,children:i}),(0,r.jsxs)(`p`,{className:`w-full text-end`,children:[i.toString().length,` chars`]})]})})]});exports.UITableDescriptionDisplay=i;
-//# sourceMappingURL=description-display-DnDAB3a1.cjs.map
+const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-078i-X0d.cjs");let r=require("react/jsx-runtime");const i=({content:i})=>i==null?(0,r.jsx)(n.Q,{}):(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{children:(0,r.jsx)(e.Paragraph,{variant:`sm`,className:`line-clamp-2 whitespace-pre-line break-all`,children:i})}),(0,r.jsx)(t.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,r.jsx)(e.Paragraph,{variant:`xs`,className:`whitespace-pre-line text-wrap break-keep text-text-negative-weak`,children:i}),(0,r.jsxs)(`p`,{className:`w-full text-end`,children:[i.toString().length,` chars`]})]})})]});exports.UITableDescriptionDisplay=i;
+//# sourceMappingURL=description-display-BR8nXqc_.cjs.map

package/dist/{description-display-DnDAB3a1.cjs.map → description-display-BR8nXqc_.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"description-display-DnDAB3a1.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/description-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/**\n * Renders a two-line-clamped description in a table cell with a tooltip that\n * reveals the full text and its character count; falls back to\n * {@link UITableEmpty} when `content` is `null` or `undefined`.\n *\n * @example\n * import { UITableDescriptionDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDescriptionDisplay content=\"A detailed description of this record.\" />\n */\nexport const UITableDescriptionDisplay: React.FC<{\n  /** The text or numeric value to display; `null`/`undefined` renders an empty state. */\n  content: string | null | undefined | number;\n}> = ({ content }) => {\n  if (content === undefined || content === null) {\n    return <UITableEmpty />;\n  }\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 whitespace-pre-line break-all\">\n          {content}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <Paragraph variant=\"xs\" className=\"whitespace-pre-line text-wrap break-keep text-text-negative-weak\">\n            {content}\n          </Paragraph>\n          <p className=\"w-full text-end\">{content.toString().length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"kJAeA,MAAa,GAGP,CAAE,aACF,GAAqC,MAChC,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAGtB,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,sDAC/B,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,yCACtC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,EACE,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,4EAC/B,CACQ,CAAA,GACX,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,GAChE,GACS,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"description-display-BR8nXqc_.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/description-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/**\n * Renders a two-line-clamped description in a table cell with a tooltip that\n * reveals the full text and its character count; falls back to\n * {@link UITableEmpty} when `content` is `null` or `undefined`.\n *\n * @example\n * import { UITableDescriptionDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDescriptionDisplay content=\"A detailed description of this record.\" />\n */\nexport const UITableDescriptionDisplay: React.FC<{\n  /** The text or numeric value to display; `null`/`undefined` renders an empty state. */\n  content: string | null | undefined | number;\n}> = ({ content }) => {\n  if (content === undefined || content === null) {\n    return <UITableEmpty />;\n  }\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 whitespace-pre-line break-all\">\n          {content}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <Paragraph variant=\"xs\" className=\"whitespace-pre-line text-wrap break-keep text-text-negative-weak\">\n            {content}\n          </Paragraph>\n          <p className=\"w-full text-end\">{content.toString().length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"kJAeA,MAAa,GAGP,CAAE,aACF,GAAqC,MAChC,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAGtB,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,sDAC/B,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,yCACtC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,EACE,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,4EAC/B,CACQ,CAAA,GACX,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,GAChE,GACS,CAAA,CACT,CAAA,CAAA"}

package/dist/{description-display-BQFLzI2g.mjs → description-display-CW0g3aJa.mjs}

@@ -1,2 +1,2 @@
-import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Y as i}from"./tables-9d53sH9E.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({content:s})=>s==null?a(i,{}):o(t,{children:[a(r,{children:a(e,{variant:`sm`,className:`line-clamp-2 whitespace-pre-line break-all`,children:s})}),a(n,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:o(`div`,{className:`flex flex-col gap-y-2`,children:[a(e,{variant:`xs`,className:`whitespace-pre-line text-wrap break-keep text-text-negative-weak`,children:s}),o(`p`,{className:`w-full text-end`,children:[s.toString().length,` chars`]})]})})]});export{s as UITableDescriptionDisplay};
-//# sourceMappingURL=description-display-BQFLzI2g.mjs.map
+import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-BGzwkdFO.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({content:s})=>s==null?a(i,{}):o(t,{children:[a(r,{children:a(e,{variant:`sm`,className:`line-clamp-2 whitespace-pre-line break-all`,children:s})}),a(n,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:o(`div`,{className:`flex flex-col gap-y-2`,children:[a(e,{variant:`xs`,className:`whitespace-pre-line text-wrap break-keep text-text-negative-weak`,children:s}),o(`p`,{className:`w-full text-end`,children:[s.toString().length,` chars`]})]})})]});export{s as UITableDescriptionDisplay};
+//# sourceMappingURL=description-display-CW0g3aJa.mjs.map

package/dist/{description-display-BQFLzI2g.mjs.map → description-display-CW0g3aJa.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"description-display-BQFLzI2g.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/description-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/**\n * Renders a two-line-clamped description in a table cell with a tooltip that\n * reveals the full text and its character count; falls back to\n * {@link UITableEmpty} when `content` is `null` or `undefined`.\n *\n * @example\n * import { UITableDescriptionDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDescriptionDisplay content=\"A detailed description of this record.\" />\n */\nexport const UITableDescriptionDisplay: React.FC<{\n  /** The text or numeric value to display; `null`/`undefined` renders an empty state. */\n  content: string | null | undefined | number;\n}> = ({ content }) => {\n  if (content === undefined || content === null) {\n    return <UITableEmpty />;\n  }\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 whitespace-pre-line break-all\">\n          {content}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <Paragraph variant=\"xs\" className=\"whitespace-pre-line text-wrap break-keep text-text-negative-weak\">\n            {content}\n          </Paragraph>\n          <p className=\"w-full text-end\">{content.toString().length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"sOAeA,MAAa,GAGP,CAAE,aACF,GAAqC,KAChC,EAAC,EAAD,CAAe,CAAA,EAGtB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,sDAC/B,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,wCACtC,EAAC,MAAD,CAAK,UAAU,iCAAf,CACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,4EAC/B,CACQ,CAAA,EACX,EAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,GAChE,GACS,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"description-display-CW0g3aJa.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/description-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/**\n * Renders a two-line-clamped description in a table cell with a tooltip that\n * reveals the full text and its character count; falls back to\n * {@link UITableEmpty} when `content` is `null` or `undefined`.\n *\n * @example\n * import { UITableDescriptionDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDescriptionDisplay content=\"A detailed description of this record.\" />\n */\nexport const UITableDescriptionDisplay: React.FC<{\n  /** The text or numeric value to display; `null`/`undefined` renders an empty state. */\n  content: string | null | undefined | number;\n}> = ({ content }) => {\n  if (content === undefined || content === null) {\n    return <UITableEmpty />;\n  }\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 whitespace-pre-line break-all\">\n          {content}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <Paragraph variant=\"xs\" className=\"whitespace-pre-line text-wrap break-keep text-text-negative-weak\">\n            {content}\n          </Paragraph>\n          <p className=\"w-full text-end\">{content.toString().length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"sOAeA,MAAa,GAGP,CAAE,aACF,GAAqC,KAChC,EAAC,EAAD,CAAe,CAAA,EAGtB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,sDAC/B,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,wCACtC,EAAC,MAAD,CAAK,UAAU,iCAAf,CACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,4EAC/B,CACQ,CAAA,EACX,EAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,GAChE,GACS,CAAA,CACT,CAAA,CAAA"}

package/dist/{dialog-form-C0W5C0u9.mjs → dialog-form-BbumLQqe.mjs}

@@ -1,2 +1,2 @@
-import{Dialog as e,DialogContent as t,DialogOverlay as n,DialogPortal as r,DialogTitle as i}from"./ui/dialog.mjs";import{K as a}from"./tanstack-form-PC9YNeeo.mjs";import{Separator as o}from"./ui/separator.mjs";import{n as s,t as c}from"./submit-button-CGBaPzE9.mjs";import{useCallback as l}from"react";import{cn as u}from"@customafk/react-toolkit/utils";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({title:p,submitText:m,width:h,maxWidth:g,className:_,open:v,onOpenChange:y,children:b})=>{let x=a(),S=l(e=>{e||x.reset(),y?.(e)},[x.reset,y]);return d(e,{open:v,onOpenChange:S,children:f(r,{"data-slot":`dialog-portal`,children:[d(n,{}),f(t,{style:{"--width":h,"--max-width":g},className:u(`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md`,h&&`sm:w-(--width)`,g&&`sm:max-w-(--max-width)`,_),onOpenAutoFocus:e=>{e.preventDefault()},onInteractOutside:e=>{e.preventDefault()},children:[d(`div`,{"data-slot":`dialog-header`,className:`flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left`,children:d(i,{"data-slot":`dialog-title`,className:`font-semibold text-lg tracking-tight`,children:p})}),d(o,{}),d(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4`,children:b}),d(o,{}),f(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full`,children:[d(x.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>d(s,{disabled:e,onClick:()=>{x.reset(),S(!1)}})}),d(x.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>d(c,{isSubmitting:e,disabled:t,submitText:m,onClick:()=>x.handleSubmit()})})]})]})]})})};export{p as TanStackDialogForm};
-//# sourceMappingURL=dialog-form-C0W5C0u9.mjs.map
+import{Dialog as e,DialogContent as t,DialogOverlay as n,DialogPortal as r,DialogTitle as i}from"./ui/dialog.mjs";import{K as a}from"./tanstack-form-DJMaMeUh.mjs";import{Separator as o}from"./ui/separator.mjs";import{n as s,t as c}from"./submit-button-CGBaPzE9.mjs";import{useCallback as l}from"react";import{cn as u}from"@customafk/react-toolkit/utils";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({title:p,submitText:m,width:h,maxWidth:g,className:_,open:v,onOpenChange:y,children:b})=>{let x=a(),S=l(e=>{e||x.reset(),y?.(e)},[x.reset,y]);return d(e,{open:v,onOpenChange:S,children:f(r,{"data-slot":`dialog-portal`,children:[d(n,{}),f(t,{style:{"--width":h,"--max-width":g},className:u(`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md`,h&&`sm:w-(--width)`,g&&`sm:max-w-(--max-width)`,_),onOpenAutoFocus:e=>{e.preventDefault()},onInteractOutside:e=>{e.preventDefault()},children:[d(`div`,{"data-slot":`dialog-header`,className:`flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left`,children:d(i,{"data-slot":`dialog-title`,className:`font-semibold text-lg tracking-tight`,children:p})}),d(o,{}),d(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4`,children:b}),d(o,{}),f(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full`,children:[d(x.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>d(s,{disabled:e,onClick:()=>{x.reset(),S(!1)}})}),d(x.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>d(c,{isSubmitting:e,disabled:t,submitText:m,onClick:()=>x.handleSubmit()})})]})]})]})})};export{p as TanStackDialogForm};
+//# sourceMappingURL=dialog-form-BbumLQqe.mjs.map

package/dist/{dialog-form-C0W5C0u9.mjs.map → dialog-form-BbumLQqe.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-form-C0W5C0u9.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/dialog-form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog, DialogContent, DialogOverlay, DialogPortal, DialogTitle } from '@/components/ui/dialog';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a modal dialog that wraps a TanStack Form with a title, scrollable content area, and built-in submit/cancel actions.\n *\n * @example\n * import { TanStackDialogForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackDialogForm\n *   title=\"Create User\"\n *   submitText=\"Create\"\n *   className=\"max-w-lg\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <NameField />\n *   <EmailField />\n * </TanStackDialogForm>\n */\nexport const TanStackDialogForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the dialog title bar. */\n    title: string;\n    /** Custom label for the submit button. Defaults to the `SubmitButton` component's built-in label when omitted. */\n    submitText?: string;\n    /** Optional fixed width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content. */\n    width?: number | string;\n    /** Optional fixed max-width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content and viewport. */\n    maxWidth?: number | string;\n    /** Optional additional class name(s) to apply to the dialog content container. */\n    className?: string;\n    /** Controlled open state of the dialog. */\n    open?: boolean;\n    /** Callback fired when the dialog open state changes; the form is reset on close. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, submitText, width, maxWidth, className, open, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) form.reset();\n      onOpenChange?.(open);\n    },\n    [form.reset, onOpenChange]\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange}>\n      <DialogPortal data-slot=\"dialog-portal\">\n        <DialogOverlay />\n        <DialogContent\n          style={\n            {\n              '--width': width,\n              '--max-width': maxWidth,\n            } as React.CSSProperties\n          }\n          className={cn(\n            'flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md',\n            width && `sm:w-(--width)`,\n            maxWidth && `sm:max-w-(--max-width)`,\n            className\n          )}\n          onOpenAutoFocus={event => {\n            // Prevents focus from shifting to the content when the dialog opens, which can cause layout shift if the content includes autofocusable elements.\n            event.preventDefault();\n          }}\n          onInteractOutside={event => {\n            // Prevents the dialog from closing when clicking outside, since the form may have unsaved changes.\n            event.preventDefault();\n          }}\n        >\n          <div data-slot=\"dialog-header\" className=\"flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left\">\n            <DialogTitle data-slot=\"dialog-title\" className=\"font-semibold text-lg tracking-tight\">\n              {title}\n            </DialogTitle>\n          </div>\n          <Separator />\n          <div data-slot=\"dialog-content\" className=\"relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4\">\n            {children}\n          </div>\n          <Separator />\n          <div data-slot=\"dialog-footer\" className=\"flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full\">\n            <form.Subscribe\n              selector={state => ({ disabled: state.isSubmitting })}\n              children={({ disabled }) => (\n                <CancelButton\n                  disabled={disabled}\n                  onClick={() => {\n                    form.reset();\n                    handleOpenChange(false);\n                  }}\n                />\n              )}\n            />\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} submitText={submitText} onClick={() => form.handleSubmit()} />\n              )}\n            />\n          </div>\n        </DialogContent>\n      </DialogPortal>\n    </Dialog>\n  );\n};\n"],"mappings":"oZA8BA,MAAa,GAiBR,CAAE,QAAO,aAAY,QAAO,WAAU,YAAW,OAAM,eAAc,cAAe,CACvF,IAAM,EAAO,EAAuB,EAE9B,EAAmB,EACtB,GAAkB,CACZ,GAAM,EAAK,MAAM,EACtB,IAAe,CAAI,CACrB,EACA,CAAC,EAAK,MAAO,CAAY,CAC3B,EAEA,OACE,EAAC,EAAD,CAAc,OAAM,aAAc,WAChC,EAAC,EAAD,CAAc,YAAU,yBAAxB,CACE,EAAC,EAAD,CAAgB,CAAA,EAChB,EAAC,EAAD,CACE,MACE,CACE,UAAW,EACX,cAAe,CACjB,EAEF,UAAW,EACT,yJACA,GAAS,iBACT,GAAY,yBACZ,CACF,EACA,gBAAiB,GAAS,CAExB,EAAM,eAAe,CACvB,EACA,kBAAmB,GAAS,CAE1B,EAAM,eAAe,CACvB,WApBF,CAsBE,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,qFACvC,EAAC,EAAD,CAAa,YAAU,eAAe,UAAU,gDAC7C,CACU,CAAA,CACV,CAAA,EACL,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,MAAD,CAAK,YAAU,iBAAiB,UAAU,uEACvC,UACE,CAAA,EACL,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,+GAAzC,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAa,GACnD,UAAW,CAAE,cACX,EAAC,EAAD,CACY,WACV,YAAe,CACb,EAAK,MAAM,EACX,EAAiB,EAAK,CACxB,CACD,CAAA,CAEJ,CAAA,EACD,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,WAAsB,aAAY,YAAe,EAAK,aAAa,CAAI,CAAA,CAE9H,CAAA,CACE,GACQ,GACH,GACR,CAAA,CAEZ"}
+{"version":3,"file":"dialog-form-BbumLQqe.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/dialog-form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog, DialogContent, DialogOverlay, DialogPortal, DialogTitle } from '@/components/ui/dialog';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a modal dialog that wraps a TanStack Form with a title, scrollable content area, and built-in submit/cancel actions.\n *\n * @example\n * import { TanStackDialogForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackDialogForm\n *   title=\"Create User\"\n *   submitText=\"Create\"\n *   className=\"max-w-lg\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <NameField />\n *   <EmailField />\n * </TanStackDialogForm>\n */\nexport const TanStackDialogForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the dialog title bar. */\n    title: string;\n    /** Custom label for the submit button. Defaults to the `SubmitButton` component's built-in label when omitted. */\n    submitText?: string;\n    /** Optional fixed width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content. */\n    width?: number | string;\n    /** Optional fixed max-width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content and viewport. */\n    maxWidth?: number | string;\n    /** Optional additional class name(s) to apply to the dialog content container. */\n    className?: string;\n    /** Controlled open state of the dialog. */\n    open?: boolean;\n    /** Callback fired when the dialog open state changes; the form is reset on close. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, submitText, width, maxWidth, className, open, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) form.reset();\n      onOpenChange?.(open);\n    },\n    [form.reset, onOpenChange]\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange}>\n      <DialogPortal data-slot=\"dialog-portal\">\n        <DialogOverlay />\n        <DialogContent\n          style={\n            {\n              '--width': width,\n              '--max-width': maxWidth,\n            } as React.CSSProperties\n          }\n          className={cn(\n            'flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md',\n            width && `sm:w-(--width)`,\n            maxWidth && `sm:max-w-(--max-width)`,\n            className\n          )}\n          onOpenAutoFocus={event => {\n            // Prevents focus from shifting to the content when the dialog opens, which can cause layout shift if the content includes autofocusable elements.\n            event.preventDefault();\n          }}\n          onInteractOutside={event => {\n            // Prevents the dialog from closing when clicking outside, since the form may have unsaved changes.\n            event.preventDefault();\n          }}\n        >\n          <div data-slot=\"dialog-header\" className=\"flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left\">\n            <DialogTitle data-slot=\"dialog-title\" className=\"font-semibold text-lg tracking-tight\">\n              {title}\n            </DialogTitle>\n          </div>\n          <Separator />\n          <div data-slot=\"dialog-content\" className=\"relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4\">\n            {children}\n          </div>\n          <Separator />\n          <div data-slot=\"dialog-footer\" className=\"flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full\">\n            <form.Subscribe\n              selector={state => ({ disabled: state.isSubmitting })}\n              children={({ disabled }) => (\n                <CancelButton\n                  disabled={disabled}\n                  onClick={() => {\n                    form.reset();\n                    handleOpenChange(false);\n                  }}\n                />\n              )}\n            />\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} submitText={submitText} onClick={() => form.handleSubmit()} />\n              )}\n            />\n          </div>\n        </DialogContent>\n      </DialogPortal>\n    </Dialog>\n  );\n};\n"],"mappings":"oZA8BA,MAAa,GAiBR,CAAE,QAAO,aAAY,QAAO,WAAU,YAAW,OAAM,eAAc,cAAe,CACvF,IAAM,EAAO,EAAuB,EAE9B,EAAmB,EACtB,GAAkB,CACZ,GAAM,EAAK,MAAM,EACtB,IAAe,CAAI,CACrB,EACA,CAAC,EAAK,MAAO,CAAY,CAC3B,EAEA,OACE,EAAC,EAAD,CAAc,OAAM,aAAc,WAChC,EAAC,EAAD,CAAc,YAAU,yBAAxB,CACE,EAAC,EAAD,CAAgB,CAAA,EAChB,EAAC,EAAD,CACE,MACE,CACE,UAAW,EACX,cAAe,CACjB,EAEF,UAAW,EACT,yJACA,GAAS,iBACT,GAAY,yBACZ,CACF,EACA,gBAAiB,GAAS,CAExB,EAAM,eAAe,CACvB,EACA,kBAAmB,GAAS,CAE1B,EAAM,eAAe,CACvB,WApBF,CAsBE,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,qFACvC,EAAC,EAAD,CAAa,YAAU,eAAe,UAAU,gDAC7C,CACU,CAAA,CACV,CAAA,EACL,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,MAAD,CAAK,YAAU,iBAAiB,UAAU,uEACvC,UACE,CAAA,EACL,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,+GAAzC,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAa,GACnD,UAAW,CAAE,cACX,EAAC,EAAD,CACY,WACV,YAAe,CACb,EAAK,MAAM,EACX,EAAiB,EAAK,CACxB,CACD,CAAA,CAEJ,CAAA,EACD,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,WAAsB,aAAY,YAAe,EAAK,aAAa,CAAI,CAAA,CAE9H,CAAA,CACE,GACQ,GACH,GACR,CAAA,CAEZ"}

package/dist/{dialog-form-CkNCwzWG.cjs → dialog-form-CEiuEMXD.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/dialog.cjs"),t=require("./tanstack-form-CNrZQZhn.cjs"),n=require("./ui/separator.cjs"),r=require("./submit-button-CvINfld5.cjs");let i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime");const s=({title:s,submitText:c,width:l,maxWidth:u,className:d,open:f,onOpenChange:p,children:m})=>{let h=t.K(),g=(0,i.useCallback)(e=>{e||h.reset(),p?.(e)},[h.reset,p]);return(0,o.jsx)(e.Dialog,{open:f,onOpenChange:g,children:(0,o.jsxs)(e.DialogPortal,{"data-slot":`dialog-portal`,children:[(0,o.jsx)(e.DialogOverlay,{}),(0,o.jsxs)(e.DialogContent,{style:{"--width":l,"--max-width":u},className:(0,a.cn)(`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md`,l&&`sm:w-(--width)`,u&&`sm:max-w-(--max-width)`,d),onOpenAutoFocus:e=>{e.preventDefault()},onInteractOutside:e=>{e.preventDefault()},children:[(0,o.jsx)(`div`,{"data-slot":`dialog-header`,className:`flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left`,children:(0,o.jsx)(e.DialogTitle,{"data-slot":`dialog-title`,className:`font-semibold text-lg tracking-tight`,children:s})}),(0,o.jsx)(n.Separator,{}),(0,o.jsx)(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4`,children:m}),(0,o.jsx)(n.Separator,{}),(0,o.jsxs)(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full`,children:[(0,o.jsx)(h.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>(0,o.jsx)(r.n,{disabled:e,onClick:()=>{h.reset(),g(!1)}})}),(0,o.jsx)(h.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>(0,o.jsx)(r.t,{isSubmitting:e,disabled:t,submitText:c,onClick:()=>h.handleSubmit()})})]})]})]})})};exports.TanStackDialogForm=s;
-//# sourceMappingURL=dialog-form-CkNCwzWG.cjs.map
+const e=require("./ui/dialog.cjs"),t=require("./tanstack-form-BC61U3F-.cjs"),n=require("./ui/separator.cjs"),r=require("./submit-button-CvINfld5.cjs");let i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime");const s=({title:s,submitText:c,width:l,maxWidth:u,className:d,open:f,onOpenChange:p,children:m})=>{let h=t.K(),g=(0,i.useCallback)(e=>{e||h.reset(),p?.(e)},[h.reset,p]);return(0,o.jsx)(e.Dialog,{open:f,onOpenChange:g,children:(0,o.jsxs)(e.DialogPortal,{"data-slot":`dialog-portal`,children:[(0,o.jsx)(e.DialogOverlay,{}),(0,o.jsxs)(e.DialogContent,{style:{"--width":l,"--max-width":u},className:(0,a.cn)(`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md`,l&&`sm:w-(--width)`,u&&`sm:max-w-(--max-width)`,d),onOpenAutoFocus:e=>{e.preventDefault()},onInteractOutside:e=>{e.preventDefault()},children:[(0,o.jsx)(`div`,{"data-slot":`dialog-header`,className:`flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left`,children:(0,o.jsx)(e.DialogTitle,{"data-slot":`dialog-title`,className:`font-semibold text-lg tracking-tight`,children:s})}),(0,o.jsx)(n.Separator,{}),(0,o.jsx)(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4`,children:m}),(0,o.jsx)(n.Separator,{}),(0,o.jsxs)(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full`,children:[(0,o.jsx)(h.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>(0,o.jsx)(r.n,{disabled:e,onClick:()=>{h.reset(),g(!1)}})}),(0,o.jsx)(h.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>(0,o.jsx)(r.t,{isSubmitting:e,disabled:t,submitText:c,onClick:()=>h.handleSubmit()})})]})]})]})})};exports.TanStackDialogForm=s;
+//# sourceMappingURL=dialog-form-CEiuEMXD.cjs.map

package/dist/{dialog-form-CkNCwzWG.cjs.map → dialog-form-CEiuEMXD.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-form-CkNCwzWG.cjs","names":["useTanStackFormContext","Dialog","DialogPortal","DialogOverlay","DialogContent","DialogTitle","Separator","CancelButton","SubmitButton"],"sources":["../packages/components/features/tanstack-form/components/forms/dialog-form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog, DialogContent, DialogOverlay, DialogPortal, DialogTitle } from '@/components/ui/dialog';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a modal dialog that wraps a TanStack Form with a title, scrollable content area, and built-in submit/cancel actions.\n *\n * @example\n * import { TanStackDialogForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackDialogForm\n *   title=\"Create User\"\n *   submitText=\"Create\"\n *   className=\"max-w-lg\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <NameField />\n *   <EmailField />\n * </TanStackDialogForm>\n */\nexport const TanStackDialogForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the dialog title bar. */\n    title: string;\n    /** Custom label for the submit button. Defaults to the `SubmitButton` component's built-in label when omitted. */\n    submitText?: string;\n    /** Optional fixed width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content. */\n    width?: number | string;\n    /** Optional fixed max-width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content and viewport. */\n    maxWidth?: number | string;\n    /** Optional additional class name(s) to apply to the dialog content container. */\n    className?: string;\n    /** Controlled open state of the dialog. */\n    open?: boolean;\n    /** Callback fired when the dialog open state changes; the form is reset on close. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, submitText, width, maxWidth, className, open, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) form.reset();\n      onOpenChange?.(open);\n    },\n    [form.reset, onOpenChange]\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange}>\n      <DialogPortal data-slot=\"dialog-portal\">\n        <DialogOverlay />\n        <DialogContent\n          style={\n            {\n              '--width': width,\n              '--max-width': maxWidth,\n            } as React.CSSProperties\n          }\n          className={cn(\n            'flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md',\n            width && `sm:w-(--width)`,\n            maxWidth && `sm:max-w-(--max-width)`,\n            className\n          )}\n          onOpenAutoFocus={event => {\n            // Prevents focus from shifting to the content when the dialog opens, which can cause layout shift if the content includes autofocusable elements.\n            event.preventDefault();\n          }}\n          onInteractOutside={event => {\n            // Prevents the dialog from closing when clicking outside, since the form may have unsaved changes.\n            event.preventDefault();\n          }}\n        >\n          <div data-slot=\"dialog-header\" className=\"flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left\">\n            <DialogTitle data-slot=\"dialog-title\" className=\"font-semibold text-lg tracking-tight\">\n              {title}\n            </DialogTitle>\n          </div>\n          <Separator />\n          <div data-slot=\"dialog-content\" className=\"relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4\">\n            {children}\n          </div>\n          <Separator />\n          <div data-slot=\"dialog-footer\" className=\"flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full\">\n            <form.Subscribe\n              selector={state => ({ disabled: state.isSubmitting })}\n              children={({ disabled }) => (\n                <CancelButton\n                  disabled={disabled}\n                  onClick={() => {\n                    form.reset();\n                    handleOpenChange(false);\n                  }}\n                />\n              )}\n            />\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} submitText={submitText} onClick={() => form.handleSubmit()} />\n              )}\n            />\n          </div>\n        </DialogContent>\n      </DialogPortal>\n    </Dialog>\n  );\n};\n"],"mappings":"yPA8BA,MAAa,GAiBR,CAAE,QAAO,aAAY,QAAO,WAAU,YAAW,OAAM,eAAc,cAAe,CACvF,IAAM,EAAOA,EAAAA,EAAuB,EAE9B,GAAA,EAAA,EAAA,YAAA,CACH,GAAkB,CACZ,GAAM,EAAK,MAAM,EACtB,IAAe,CAAI,CACrB,EACA,CAAC,EAAK,MAAO,CAAY,CAC3B,EAEA,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAc,OAAM,aAAc,YAChC,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAc,YAAU,yBAAxB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAgB,CAAA,GAChB,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CACE,MACE,CACE,UAAW,EACX,cAAe,CACjB,EAEF,WAAA,EAAA,EAAA,GAAA,CACE,yJACA,GAAS,iBACT,GAAY,yBACZ,CACF,EACA,gBAAiB,GAAS,CAExB,EAAM,eAAe,CACvB,EACA,kBAAmB,GAAS,CAE1B,EAAM,eAAe,CACvB,WApBF,EAsBE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,sFACvC,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,YAAU,eAAe,UAAU,gDAC7C,CACU,CAAA,CACV,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,iBAAiB,UAAU,uEACvC,UACE,CAAA,GACL,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,+GAAzC,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAa,GACnD,UAAW,CAAE,eACX,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACY,WACV,YAAe,CACb,EAAK,MAAM,EACX,EAAiB,EAAK,CACxB,CACD,CAAA,CAEJ,CAAA,GACD,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,WAAsB,aAAY,YAAe,EAAK,aAAa,CAAI,CAAA,CAE9H,CAAA,CACE,GACQ,GACH,GACR,CAAA,CAEZ"}
+{"version":3,"file":"dialog-form-CEiuEMXD.cjs","names":["useTanStackFormContext","Dialog","DialogPortal","DialogOverlay","DialogContent","DialogTitle","Separator","CancelButton","SubmitButton"],"sources":["../packages/components/features/tanstack-form/components/forms/dialog-form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog, DialogContent, DialogOverlay, DialogPortal, DialogTitle } from '@/components/ui/dialog';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a modal dialog that wraps a TanStack Form with a title, scrollable content area, and built-in submit/cancel actions.\n *\n * @example\n * import { TanStackDialogForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackDialogForm\n *   title=\"Create User\"\n *   submitText=\"Create\"\n *   className=\"max-w-lg\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <NameField />\n *   <EmailField />\n * </TanStackDialogForm>\n */\nexport const TanStackDialogForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the dialog title bar. */\n    title: string;\n    /** Custom label for the submit button. Defaults to the `SubmitButton` component's built-in label when omitted. */\n    submitText?: string;\n    /** Optional fixed width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content. */\n    width?: number | string;\n    /** Optional fixed max-width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content and viewport. */\n    maxWidth?: number | string;\n    /** Optional additional class name(s) to apply to the dialog content container. */\n    className?: string;\n    /** Controlled open state of the dialog. */\n    open?: boolean;\n    /** Callback fired when the dialog open state changes; the form is reset on close. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, submitText, width, maxWidth, className, open, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) form.reset();\n      onOpenChange?.(open);\n    },\n    [form.reset, onOpenChange]\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange}>\n      <DialogPortal data-slot=\"dialog-portal\">\n        <DialogOverlay />\n        <DialogContent\n          style={\n            {\n              '--width': width,\n              '--max-width': maxWidth,\n            } as React.CSSProperties\n          }\n          className={cn(\n            'flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md',\n            width && `sm:w-(--width)`,\n            maxWidth && `sm:max-w-(--max-width)`,\n            className\n          )}\n          onOpenAutoFocus={event => {\n            // Prevents focus from shifting to the content when the dialog opens, which can cause layout shift if the content includes autofocusable elements.\n            event.preventDefault();\n          }}\n          onInteractOutside={event => {\n            // Prevents the dialog from closing when clicking outside, since the form may have unsaved changes.\n            event.preventDefault();\n          }}\n        >\n          <div data-slot=\"dialog-header\" className=\"flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left\">\n            <DialogTitle data-slot=\"dialog-title\" className=\"font-semibold text-lg tracking-tight\">\n              {title}\n            </DialogTitle>\n          </div>\n          <Separator />\n          <div data-slot=\"dialog-content\" className=\"relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4\">\n            {children}\n          </div>\n          <Separator />\n          <div data-slot=\"dialog-footer\" className=\"flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full\">\n            <form.Subscribe\n              selector={state => ({ disabled: state.isSubmitting })}\n              children={({ disabled }) => (\n                <CancelButton\n                  disabled={disabled}\n                  onClick={() => {\n                    form.reset();\n                    handleOpenChange(false);\n                  }}\n                />\n              )}\n            />\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} submitText={submitText} onClick={() => form.handleSubmit()} />\n              )}\n            />\n          </div>\n        </DialogContent>\n      </DialogPortal>\n    </Dialog>\n  );\n};\n"],"mappings":"yPA8BA,MAAa,GAiBR,CAAE,QAAO,aAAY,QAAO,WAAU,YAAW,OAAM,eAAc,cAAe,CACvF,IAAM,EAAOA,EAAAA,EAAuB,EAE9B,GAAA,EAAA,EAAA,YAAA,CACH,GAAkB,CACZ,GAAM,EAAK,MAAM,EACtB,IAAe,CAAI,CACrB,EACA,CAAC,EAAK,MAAO,CAAY,CAC3B,EAEA,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAc,OAAM,aAAc,YAChC,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAc,YAAU,yBAAxB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAgB,CAAA,GAChB,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CACE,MACE,CACE,UAAW,EACX,cAAe,CACjB,EAEF,WAAA,EAAA,EAAA,GAAA,CACE,yJACA,GAAS,iBACT,GAAY,yBACZ,CACF,EACA,gBAAiB,GAAS,CAExB,EAAM,eAAe,CACvB,EACA,kBAAmB,GAAS,CAE1B,EAAM,eAAe,CACvB,WApBF,EAsBE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,sFACvC,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,YAAU,eAAe,UAAU,gDAC7C,CACU,CAAA,CACV,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,iBAAiB,UAAU,uEACvC,UACE,CAAA,GACL,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,+GAAzC,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAa,GACnD,UAAW,CAAE,eACX,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACY,WACV,YAAe,CACb,EAAK,MAAM,EACX,EAAiB,EAAK,CACxB,CACD,CAAA,CAEJ,CAAA,GACD,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,WAAsB,aAAY,YAAe,EAAK,aAAa,CAAI,CAAA,CAE9H,CAAA,CACE,GACQ,GACH,GACR,CAAA,CAEZ"}

package/dist/dialogs/detail-dialog/index.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../layouts/flex.cjs"),t=require("../../date-B3cozmfV.cjs"),n=require("../../features/logo/index.cjs"),r=require("../../typography/title.cjs"),i=require("../../sidebar-core-DQE6ymo4.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("radix-ui");const u=({open:u,isLoading:d,title:f,createdAt:p,onOpenChange:m,sidebar:h,children:g})=>{let{content:_,footer:v}=h||{},y=(0,o.useCallback)(e=>{e.preventDefault(),e.stopPropagation()},[]);return(0,c.jsx)(l.Dialog.Root,{"data-slot":`detail-dialog`,open:u,onOpenChange:m,children:(0,c.jsxs)(l.Dialog.Portal,{"data-slot":`detail-dialog-portal`,children:[(0,c.jsx)(l.Dialog.Overlay,{"data-slot":`detail-dialog-overlay`,className:`fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`}),(0,c.jsx)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center`,children:(0,c.jsxs)(l.Dialog.Content,{"data-slot":`dialog-content`,className:(0,s.cn)(`data-[state=open]:animate-in data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,`data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80`,`relative z-50 grid`,`gap-4 overflow-hidden rounded-none border-none bg-background p-0 shadow-dialog outline-none duration-200`,`h-full max-h-dvh w-full max-w-svw`,`sm:rounded-lg`,`sm:max-w-lg`,`md:max-h-[calc(100dvh-2rem)]`,`md:max-w-[calc(100svw-2rem)]`),onInteractOutside:y,children:[(0,c.jsxs)(i.l,{children:[(0,c.jsxs)(i.c,{collapsible:`icon`,children:[(0,c.jsx)(i.r,{children:(0,c.jsx)(i.i,{children:(0,c.jsx)(i.o,{children:(0,c.jsxs)(i.a,{size:`lg`,tabIndex:-1,children:[(0,c.jsx)(n.LunasLogo,{variant:`icon`,iconStyle:`solid`,size:`md`,className:`size-8 min-w-8 min-h-8`}),(0,c.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[(0,c.jsx)(`span`,{className:`truncate font-medium`,children:h?.title||`Detail Dialog`}),(0,c.jsx)(`span`,{className:`truncate text-xs`,children:`Lunas Enterprise`})]})]})})})}),(0,c.jsx)(i.t,{children:_}),(0,c.jsx)(i.n,{children:v})]}),(0,c.jsx)(`main`,{"data-slot":`detail-dialog-main`,className:`relative h-full flex-1`,children:(0,c.jsxs)(e.Flex,{padding:`none`,gap:`none`,vertical:!0,align:`stretch`,className:`absolute inset-0 size-full`,children:[(0,c.jsxs)(`header`,{className:`flex w-full flex-0 items-start gap-x-2.5 border-b border-border-weak bg-card py-2.5 pr-12 pl-2`,children:[(0,c.jsx)(i.s,{}),(0,c.jsxs)(e.Flex,{vertical:!0,align:`start`,padding:`none`,width:`null`,wrap:!1,className:`flex-1 gap-0`,children:[(0,c.jsx)(r.Title,{level:5,className:`line-clamp-1 truncate text-wrap`,children:f||`Detail Dialog`}),!!p&&(0,c.jsxs)(e.Flex,{padding:`none`,className:`relative items-center text-text-positive-weak`,children:[(0,c.jsx)(a.CalendarIcon,{size:12}),(0,c.jsx)(t.t,{showTime:!0,showHoliday:!0,date:p,format:`full`})]})]})]}),d?(0,c.jsx)(e.Flex,{justify:`center`,className:`inset-shadow-sm w-full flex-1 bg-muted-muted`,children:(0,c.jsx)(`div`,{className:`loader`})}):(0,c.jsx)(`section`,{"data-slot":`detail-dialog-body`,className:`relative inset-shadow-sm flex flex-1 snap-y flex-col gap-0 overflow-y-auto bg-white`,children:g})]})})]}),(0,c.jsx)(l.Dialog.Close,{"data-slot":`dialog-close`,tabIndex:-1,asChild:!0,className:`absolute top-3 right-3`,children:(0,c.jsx)(`button`,{className:`flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60`,children:(0,c.jsx)(a.XIcon,{size:24})})})]})})]})})};exports.DetailDialog=u;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../layouts/flex.cjs"),t=require("../../date-B3cozmfV.cjs"),n=require("../../features/logo/index.cjs"),r=require("../../typography/title.cjs"),i=require("../../sidebar-core-DQE6ymo4.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("radix-ui");const u=({open:u,isLoading:d,title:f,createdAt:p,onOpenChange:m,sidebar:h,children:g})=>{let{content:_,footer:v}=h||{},y=(0,o.useCallback)(e=>{e.preventDefault(),e.stopPropagation()},[]);return(0,c.jsx)(l.Dialog.Root,{"data-slot":`detail-dialog`,open:u,onOpenChange:m,children:(0,c.jsxs)(l.Dialog.Portal,{"data-slot":`detail-dialog-portal`,children:[(0,c.jsx)(l.Dialog.Overlay,{"data-slot":`detail-dialog-overlay`,className:`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in`}),(0,c.jsx)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center`,children:(0,c.jsxs)(l.Dialog.Content,{"data-slot":`dialog-content`,className:(0,s.cn)(`data-[state=closed]:animate-out data-[state=open]:animate-in`,`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,`data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80`,`relative z-50 grid`,`gap-4 overflow-hidden rounded-none border-none bg-background p-0 shadow-dialog outline-none duration-200`,`h-full max-h-dvh w-full max-w-svw`,`sm:rounded-lg`,`sm:max-w-lg`,`md:max-h-[calc(100dvh-2rem)]`,`md:max-w-[calc(100svw-2rem)]`),onInteractOutside:y,children:[(0,c.jsxs)(i.l,{children:[(0,c.jsxs)(i.c,{collapsible:`icon`,children:[(0,c.jsx)(i.r,{children:(0,c.jsx)(i.i,{children:(0,c.jsx)(i.o,{children:(0,c.jsxs)(i.a,{size:`lg`,tabIndex:-1,children:[(0,c.jsx)(n.LunasLogo,{variant:`icon`,iconStyle:`solid`,size:`md`,className:`size-8 min-h-8 min-w-8`}),(0,c.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[(0,c.jsx)(`span`,{className:`truncate font-medium`,children:h?.title||`Detail Dialog`}),(0,c.jsx)(`span`,{className:`truncate text-xs`,children:`Lunas Enterprise`})]})]})})})}),(0,c.jsx)(i.t,{children:_}),(0,c.jsx)(i.n,{children:v})]}),(0,c.jsx)(`main`,{"data-slot":`detail-dialog-main`,className:`relative h-full flex-1`,children:(0,c.jsxs)(e.Flex,{padding:`none`,gap:`none`,vertical:!0,align:`stretch`,className:`absolute inset-0 size-full`,children:[(0,c.jsxs)(`header`,{className:`flex w-full flex-0 items-start gap-x-2.5 border-border-weak border-b bg-card py-2.5 pr-12 pl-2`,children:[(0,c.jsx)(i.s,{}),(0,c.jsxs)(e.Flex,{vertical:!0,align:`start`,padding:`none`,width:`null`,wrap:!1,className:`flex-1 gap-0`,children:[(0,c.jsx)(r.Title,{level:5,className:`line-clamp-1 truncate text-wrap`,children:f||`Detail Dialog`}),!!p&&(0,c.jsxs)(e.Flex,{padding:`none`,className:`relative items-center text-text-positive-weak`,children:[(0,c.jsx)(a.CalendarIcon,{size:12}),(0,c.jsx)(t.t,{showTime:!0,showHoliday:!0,date:p,format:`full`})]})]})]}),d?(0,c.jsx)(e.Flex,{justify:`center`,className:`inset-shadow-sm w-full flex-1 bg-muted-muted`,children:(0,c.jsx)(`div`,{className:`loader`})}):(0,c.jsx)(`section`,{"data-slot":`detail-dialog-body`,className:`relative inset-shadow-sm flex flex-1 snap-y flex-col gap-0 overflow-y-auto bg-white`,children:g})]})})]}),(0,c.jsx)(l.Dialog.Close,{"data-slot":`dialog-close`,tabIndex:-1,asChild:!0,className:`absolute top-3 right-3`,children:(0,c.jsx)(`button`,{className:`flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60`,children:(0,c.jsx)(a.XIcon,{size:24})})})]})})]})})};exports.DetailDialog=u;
 //# sourceMappingURL=index.cjs.map

package/dist/dialogs/detail-dialog/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["DialogPrimitive","SidebarProvider","Sidebar","DetailDialogSidebarHeader","DetailDialogSidebarMenu","DetailDialogSidebarMenuItem","DetailDialogSidebarMenuButton","LunasLogo","DetailDialogSidebarContent","DetailDialogSidebarFooter","Flex","DetailDialogSidebarTrigger","Title","CalendarIcon","DateDisplay","XIcon"],"sources":["../../../packages/components/dialogs/detail-dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { CalendarIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { LunasLogo } from '@/components/features/logo';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { DateDisplay } from '@/components/data-display/date';\nimport { Flex } from '@/components/layouts/flex';\nimport { Title } from '@/components/typography/title';\nimport {\n  DetailDialogSidebarContent,\n  DetailDialogSidebarFooter,\n  DetailDialogSidebarHeader,\n  DetailDialogSidebarMenu,\n  DetailDialogSidebarMenuButton,\n  DetailDialogSidebarMenuItem,\n  DetailDialogSidebarTrigger,\n  Sidebar,\n  SidebarProvider,\n} from './components/sidebar-core';\n\ntype DetailDialogSidebar = {\n  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */\n  title?: string;\n  /** Arbitrary content rendered inside the sidebar scrollable area. */\n  content?: React.ReactNode;\n  /** Arbitrary content rendered at the bottom of the sidebar footer. */\n  footer?: React.ReactNode;\n};\n\nexport type DetailDialogProps = {\n  /** Controls whether the dialog is open. */\n  open?: boolean;\n  /** When `true`, replaces the main content area with a centered loading spinner. */\n  isLoading?: boolean;\n  /** Primary title displayed in the dialog header. */\n  title: string;\n  /** ISO string, `Date` object, or Unix timestamp shown as a formatted creation date below the title. */\n  createdAt?: string | Date | number | null;\n  /** Optional sidebar configuration — title, body content, and footer content. */\n  sidebar?: DetailDialogSidebar;\n  /** Callback invoked when the dialog open state changes. */\n  onOpenChange?: (open: boolean) => void;\n};\n\n/**\n * Full-screen detail dialog with a collapsible sidebar, a header with creation date, and a scrollable content area.\n *\n * @example\n * ```tsx\n * import { DetailDialog } from '@customafk/lunas-ui/dialogs/detail-dialog';\n *\n * <DetailDialog\n *   open={open}\n *   title=\"Order #1234\"\n *   createdAt=\"2024-01-15T09:00:00Z\"\n *   sidebar={{ title: 'Navigation', content: <nav>...</nav> }}\n *   onOpenChange={setOpen}\n * >\n *   <p>Detail content goes here.</p>\n * </DetailDialog>\n * ```\n */\nexport const DetailDialog: React.FC<React.PropsWithChildren<DetailDialogProps>> = ({ open, isLoading, title, createdAt, onOpenChange, sidebar, children }) => {\n  const { content: SidebarContent, footer: SidebarFooter } = sidebar || {};\n\n  const handleInteractOutside = useCallback<NonNullable<React.ComponentProps<typeof DialogPrimitive.Content>['onInteractOutside']>>(event => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <DialogPrimitive.Root data-slot=\"detail-dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"detail-dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"detail-dialog-overlay\"\n          className=\"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n        />\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n          <DialogPrimitive.Content\n            data-slot=\"dialog-content\"\n            className={cn(\n              'data-[state=open]:animate-in data-[state=closed]:animate-out',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              'data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80',\n              'relative z-50 grid',\n              'gap-4 overflow-hidden rounded-none border-none bg-background p-0 shadow-dialog outline-none duration-200',\n              'h-full max-h-dvh w-full max-w-svw',\n              'sm:rounded-lg',\n              'sm:max-w-lg',\n              'md:max-h-[calc(100dvh-2rem)]',\n              'md:max-w-[calc(100svw-2rem)]'\n            )}\n            onInteractOutside={handleInteractOutside}\n          >\n            <SidebarProvider>\n              <Sidebar collapsible=\"icon\">\n                <DetailDialogSidebarHeader>\n                  <DetailDialogSidebarMenu>\n                    <DetailDialogSidebarMenuItem>\n                      <DetailDialogSidebarMenuButton size=\"lg\" tabIndex={-1}>\n                        <LunasLogo variant=\"icon\" iconStyle=\"solid\" size=\"md\" className=\"size-8 min-w-8 min-h-8\" />\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                          <span className=\"truncate font-medium\">{sidebar?.title || 'Detail Dialog'}</span>\n                          <span className=\"truncate text-xs\">Lunas Enterprise</span>\n                        </div>\n                      </DetailDialogSidebarMenuButton>\n                    </DetailDialogSidebarMenuItem>\n                  </DetailDialogSidebarMenu>\n                </DetailDialogSidebarHeader>\n                <DetailDialogSidebarContent>{SidebarContent}</DetailDialogSidebarContent>\n                <DetailDialogSidebarFooter>{SidebarFooter}</DetailDialogSidebarFooter>\n              </Sidebar>\n\n              <main data-slot=\"detail-dialog-main\" className=\"relative h-full flex-1\">\n                <Flex padding=\"none\" gap=\"none\" vertical align=\"stretch\" className=\"absolute inset-0 size-full\">\n                  <header className=\"flex w-full flex-0 items-start gap-x-2.5 border-b border-border-weak bg-card py-2.5 pr-12 pl-2\">\n                    <DetailDialogSidebarTrigger />\n                    <Flex vertical align=\"start\" padding=\"none\" width=\"null\" wrap={false} className=\"flex-1 gap-0\">\n                      <Title level={5} className=\"line-clamp-1 truncate text-wrap\">\n                        {title || 'Detail Dialog'}\n                      </Title>\n                      {!!createdAt && (\n                        <Flex padding=\"none\" className=\"relative items-center text-text-positive-weak\">\n                          <CalendarIcon size={12} />\n                          <DateDisplay showTime showHoliday date={createdAt} format=\"full\" />\n                        </Flex>\n                      )}\n                    </Flex>\n                  </header>\n                  {isLoading ? (\n                    <Flex justify=\"center\" className=\"inset-shadow-sm w-full flex-1 bg-muted-muted\">\n                      <div className=\"loader\" />\n                    </Flex>\n                  ) : (\n                    <section data-slot=\"detail-dialog-body\" className=\"relative inset-shadow-sm flex flex-1 snap-y flex-col gap-0 overflow-y-auto bg-white\">\n                      {children}\n                    </section>\n                  )}\n                </Flex>\n              </main>\n            </SidebarProvider>\n\n            <DialogPrimitive.Close data-slot=\"dialog-close\" tabIndex={-1} asChild className=\"absolute top-3 right-3\">\n              <button className=\"flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60\">\n                <XIcon size={24} />\n              </button>\n            </DialogPrimitive.Close>\n          </DialogPrimitive.Content>\n        </div>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["DialogPrimitive","SidebarProvider","Sidebar","DetailDialogSidebarHeader","DetailDialogSidebarMenu","DetailDialogSidebarMenuItem","DetailDialogSidebarMenuButton","LunasLogo","DetailDialogSidebarContent","DetailDialogSidebarFooter","Flex","DetailDialogSidebarTrigger","Title","CalendarIcon","DateDisplay","XIcon"],"sources":["../../../packages/components/dialogs/detail-dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { CalendarIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { LunasLogo } from '@/components/features/logo';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { DateDisplay } from '@/components/data-display/date';\nimport { Flex } from '@/components/layouts/flex';\nimport { Title } from '@/components/typography/title';\nimport {\n  DetailDialogSidebarContent,\n  DetailDialogSidebarFooter,\n  DetailDialogSidebarHeader,\n  DetailDialogSidebarMenu,\n  DetailDialogSidebarMenuButton,\n  DetailDialogSidebarMenuItem,\n  DetailDialogSidebarTrigger,\n  Sidebar,\n  SidebarProvider,\n} from './components/sidebar-core';\n\ntype DetailDialogSidebar = {\n  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */\n  title?: string;\n  /** Arbitrary content rendered inside the sidebar scrollable area. */\n  content?: React.ReactNode;\n  /** Arbitrary content rendered at the bottom of the sidebar footer. */\n  footer?: React.ReactNode;\n};\n\nexport type DetailDialogProps = {\n  /** Controls whether the dialog is open. */\n  open?: boolean;\n  /** When `true`, replaces the main content area with a centered loading spinner. */\n  isLoading?: boolean;\n  /** Primary title displayed in the dialog header. */\n  title: string;\n  /** ISO string, `Date` object, or Unix timestamp shown as a formatted creation date below the title. */\n  createdAt?: string | Date | number | null;\n  /** Optional sidebar configuration — title, body content, and footer content. */\n  sidebar?: DetailDialogSidebar;\n  /** Callback invoked when the dialog open state changes. */\n  onOpenChange?: (open: boolean) => void;\n};\n\n/**\n * Full-screen detail dialog with a collapsible sidebar, a header with creation date, and a scrollable content area.\n *\n * @example\n * ```tsx\n * import { DetailDialog } from '@customafk/lunas-ui/dialogs/detail-dialog';\n *\n * <DetailDialog\n *   open={open}\n *   title=\"Order #1234\"\n *   createdAt=\"2024-01-15T09:00:00Z\"\n *   sidebar={{ title: 'Navigation', content: <nav>...</nav> }}\n *   onOpenChange={setOpen}\n * >\n *   <p>Detail content goes here.</p>\n * </DetailDialog>\n * ```\n */\nexport const DetailDialog: React.FC<React.PropsWithChildren<DetailDialogProps>> = ({ open, isLoading, title, createdAt, onOpenChange, sidebar, children }) => {\n  const { content: SidebarContent, footer: SidebarFooter } = sidebar || {};\n\n  const handleInteractOutside = useCallback<NonNullable<React.ComponentProps<typeof DialogPrimitive.Content>['onInteractOutside']>>(event => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <DialogPrimitive.Root data-slot=\"detail-dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"detail-dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"detail-dialog-overlay\"\n          className=\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in\"\n        />\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n          <DialogPrimitive.Content\n            data-slot=\"dialog-content\"\n            className={cn(\n              'data-[state=closed]:animate-out data-[state=open]:animate-in',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              'data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80',\n              'relative z-50 grid',\n              'gap-4 overflow-hidden rounded-none border-none bg-background p-0 shadow-dialog outline-none duration-200',\n              'h-full max-h-dvh w-full max-w-svw',\n              'sm:rounded-lg',\n              'sm:max-w-lg',\n              'md:max-h-[calc(100dvh-2rem)]',\n              'md:max-w-[calc(100svw-2rem)]'\n            )}\n            onInteractOutside={handleInteractOutside}\n          >\n            <SidebarProvider>\n              <Sidebar collapsible=\"icon\">\n                <DetailDialogSidebarHeader>\n                  <DetailDialogSidebarMenu>\n                    <DetailDialogSidebarMenuItem>\n                      <DetailDialogSidebarMenuButton size=\"lg\" tabIndex={-1}>\n                        <LunasLogo variant=\"icon\" iconStyle=\"solid\" size=\"md\" className=\"size-8 min-h-8 min-w-8\" />\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                          <span className=\"truncate font-medium\">{sidebar?.title || 'Detail Dialog'}</span>\n                          <span className=\"truncate text-xs\">Lunas Enterprise</span>\n                        </div>\n                      </DetailDialogSidebarMenuButton>\n                    </DetailDialogSidebarMenuItem>\n                  </DetailDialogSidebarMenu>\n                </DetailDialogSidebarHeader>\n                <DetailDialogSidebarContent>{SidebarContent}</DetailDialogSidebarContent>\n                <DetailDialogSidebarFooter>{SidebarFooter}</DetailDialogSidebarFooter>\n              </Sidebar>\n\n              <main data-slot=\"detail-dialog-main\" className=\"relative h-full flex-1\">\n                <Flex padding=\"none\" gap=\"none\" vertical align=\"stretch\" className=\"absolute inset-0 size-full\">\n                  <header className=\"flex w-full flex-0 items-start gap-x-2.5 border-border-weak border-b bg-card py-2.5 pr-12 pl-2\">\n                    <DetailDialogSidebarTrigger />\n                    <Flex vertical align=\"start\" padding=\"none\" width=\"null\" wrap={false} className=\"flex-1 gap-0\">\n                      <Title level={5} className=\"line-clamp-1 truncate text-wrap\">\n                        {title || 'Detail Dialog'}\n                      </Title>\n                      {!!createdAt && (\n                        <Flex padding=\"none\" className=\"relative items-center text-text-positive-weak\">\n                          <CalendarIcon size={12} />\n                          <DateDisplay showTime showHoliday date={createdAt} format=\"full\" />\n                        </Flex>\n                      )}\n                    </Flex>\n                  </header>\n                  {isLoading ? (\n                    <Flex justify=\"center\" className=\"inset-shadow-sm w-full flex-1 bg-muted-muted\">\n                      <div className=\"loader\" />\n                    </Flex>\n                  ) : (\n                    <section data-slot=\"detail-dialog-body\" className=\"relative inset-shadow-sm flex flex-1 snap-y flex-col gap-0 overflow-y-auto bg-white\">\n                      {children}\n                    </section>\n                  )}\n                </Flex>\n              </main>\n            </SidebarProvider>\n\n            <DialogPrimitive.Close data-slot=\"dialog-close\" tabIndex={-1} asChild className=\"absolute top-3 right-3\">\n              <button className=\"flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60\">\n                <XIcon size={24} />\n              </button>\n            </DialogPrimitive.Close>\n          </DialogPrimitive.Content>\n        </div>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"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"}

package/dist/dialogs/detail-dialog/index.mjs

@@ -1,2 +1,2 @@
-"use client";import{Flex as e}from"../../layouts/flex.mjs";import{t}from"../../date-Nsz0Pewe.mjs";import{LunasLogo as n}from"../../features/logo/index.mjs";import{Title as r}from"../../typography/title.mjs";import{a as i,c as a,i as o,l as s,n as c,o as l,r as u,s as d,t as f}from"../../sidebar-core-Bh0dZXsm.mjs";import{CalendarIcon as p,XIcon as m}from"lucide-react";import{useCallback as h}from"react";import{cn as g}from"@customafk/react-toolkit/utils";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{Dialog as y}from"radix-ui";const b=({open:b,isLoading:x,title:S,createdAt:C,onOpenChange:w,sidebar:T,children:E})=>{let{content:D,footer:O}=T||{},k=h(e=>{e.preventDefault(),e.stopPropagation()},[]);return _(y.Root,{"data-slot":`detail-dialog`,open:b,onOpenChange:w,children:v(y.Portal,{"data-slot":`detail-dialog-portal`,children:[_(y.Overlay,{"data-slot":`detail-dialog-overlay`,className:`fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`}),_(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center`,children:v(y.Content,{"data-slot":`dialog-content`,className:g(`data-[state=open]:animate-in data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,`data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80`,`relative z-50 grid`,`gap-4 overflow-hidden rounded-none border-none bg-background p-0 shadow-dialog outline-none duration-200`,`h-full max-h-dvh w-full max-w-svw`,`sm:rounded-lg`,`sm:max-w-lg`,`md:max-h-[calc(100dvh-2rem)]`,`md:max-w-[calc(100svw-2rem)]`),onInteractOutside:k,children:[v(s,{children:[v(a,{collapsible:`icon`,children:[_(u,{children:_(o,{children:_(l,{children:v(i,{size:`lg`,tabIndex:-1,children:[_(n,{variant:`icon`,iconStyle:`solid`,size:`md`,className:`size-8 min-w-8 min-h-8`}),v(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[_(`span`,{className:`truncate font-medium`,children:T?.title||`Detail Dialog`}),_(`span`,{className:`truncate text-xs`,children:`Lunas Enterprise`})]})]})})})}),_(f,{children:D}),_(c,{children:O})]}),_(`main`,{"data-slot":`detail-dialog-main`,className:`relative h-full flex-1`,children:v(e,{padding:`none`,gap:`none`,vertical:!0,align:`stretch`,className:`absolute inset-0 size-full`,children:[v(`header`,{className:`flex w-full flex-0 items-start gap-x-2.5 border-b border-border-weak bg-card py-2.5 pr-12 pl-2`,children:[_(d,{}),v(e,{vertical:!0,align:`start`,padding:`none`,width:`null`,wrap:!1,className:`flex-1 gap-0`,children:[_(r,{level:5,className:`line-clamp-1 truncate text-wrap`,children:S||`Detail Dialog`}),!!C&&v(e,{padding:`none`,className:`relative items-center text-text-positive-weak`,children:[_(p,{size:12}),_(t,{showTime:!0,showHoliday:!0,date:C,format:`full`})]})]})]}),x?_(e,{justify:`center`,className:`inset-shadow-sm w-full flex-1 bg-muted-muted`,children:_(`div`,{className:`loader`})}):_(`section`,{"data-slot":`detail-dialog-body`,className:`relative inset-shadow-sm flex flex-1 snap-y flex-col gap-0 overflow-y-auto bg-white`,children:E})]})})]}),_(y.Close,{"data-slot":`dialog-close`,tabIndex:-1,asChild:!0,className:`absolute top-3 right-3`,children:_(`button`,{className:`flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60`,children:_(m,{size:24})})})]})})]})})};export{b as DetailDialog};
+"use client";import{Flex as e}from"../../layouts/flex.mjs";import{t}from"../../date-Nsz0Pewe.mjs";import{LunasLogo as n}from"../../features/logo/index.mjs";import{Title as r}from"../../typography/title.mjs";import{a as i,c as a,i as o,l as s,n as c,o as l,r as u,s as d,t as f}from"../../sidebar-core-Bh0dZXsm.mjs";import{CalendarIcon as p,XIcon as m}from"lucide-react";import{useCallback as h}from"react";import{cn as g}from"@customafk/react-toolkit/utils";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{Dialog as y}from"radix-ui";const b=({open:b,isLoading:x,title:S,createdAt:C,onOpenChange:w,sidebar:T,children:E})=>{let{content:D,footer:O}=T||{},k=h(e=>{e.preventDefault(),e.stopPropagation()},[]);return _(y.Root,{"data-slot":`detail-dialog`,open:b,onOpenChange:w,children:v(y.Portal,{"data-slot":`detail-dialog-portal`,children:[_(y.Overlay,{"data-slot":`detail-dialog-overlay`,className:`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in`}),_(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center`,children:v(y.Content,{"data-slot":`dialog-content`,className:g(`data-[state=closed]:animate-out data-[state=open]:animate-in`,`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,`data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80`,`relative z-50 grid`,`gap-4 overflow-hidden rounded-none border-none bg-background p-0 shadow-dialog outline-none duration-200`,`h-full max-h-dvh w-full max-w-svw`,`sm:rounded-lg`,`sm:max-w-lg`,`md:max-h-[calc(100dvh-2rem)]`,`md:max-w-[calc(100svw-2rem)]`),onInteractOutside:k,children:[v(s,{children:[v(a,{collapsible:`icon`,children:[_(u,{children:_(o,{children:_(l,{children:v(i,{size:`lg`,tabIndex:-1,children:[_(n,{variant:`icon`,iconStyle:`solid`,size:`md`,className:`size-8 min-h-8 min-w-8`}),v(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[_(`span`,{className:`truncate font-medium`,children:T?.title||`Detail Dialog`}),_(`span`,{className:`truncate text-xs`,children:`Lunas Enterprise`})]})]})})})}),_(f,{children:D}),_(c,{children:O})]}),_(`main`,{"data-slot":`detail-dialog-main`,className:`relative h-full flex-1`,children:v(e,{padding:`none`,gap:`none`,vertical:!0,align:`stretch`,className:`absolute inset-0 size-full`,children:[v(`header`,{className:`flex w-full flex-0 items-start gap-x-2.5 border-border-weak border-b bg-card py-2.5 pr-12 pl-2`,children:[_(d,{}),v(e,{vertical:!0,align:`start`,padding:`none`,width:`null`,wrap:!1,className:`flex-1 gap-0`,children:[_(r,{level:5,className:`line-clamp-1 truncate text-wrap`,children:S||`Detail Dialog`}),!!C&&v(e,{padding:`none`,className:`relative items-center text-text-positive-weak`,children:[_(p,{size:12}),_(t,{showTime:!0,showHoliday:!0,date:C,format:`full`})]})]})]}),x?_(e,{justify:`center`,className:`inset-shadow-sm w-full flex-1 bg-muted-muted`,children:_(`div`,{className:`loader`})}):_(`section`,{"data-slot":`detail-dialog-body`,className:`relative inset-shadow-sm flex flex-1 snap-y flex-col gap-0 overflow-y-auto bg-white`,children:E})]})})]}),_(y.Close,{"data-slot":`dialog-close`,tabIndex:-1,asChild:!0,className:`absolute top-3 right-3`,children:_(`button`,{className:`flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60`,children:_(m,{size:24})})})]})})]})})};export{b as DetailDialog};
 //# sourceMappingURL=index.mjs.map

package/dist/dialogs/detail-dialog/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["DialogPrimitive"],"sources":["../../../packages/components/dialogs/detail-dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { CalendarIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { LunasLogo } from '@/components/features/logo';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { DateDisplay } from '@/components/data-display/date';\nimport { Flex } from '@/components/layouts/flex';\nimport { Title } from '@/components/typography/title';\nimport {\n  DetailDialogSidebarContent,\n  DetailDialogSidebarFooter,\n  DetailDialogSidebarHeader,\n  DetailDialogSidebarMenu,\n  DetailDialogSidebarMenuButton,\n  DetailDialogSidebarMenuItem,\n  DetailDialogSidebarTrigger,\n  Sidebar,\n  SidebarProvider,\n} from './components/sidebar-core';\n\ntype DetailDialogSidebar = {\n  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */\n  title?: string;\n  /** Arbitrary content rendered inside the sidebar scrollable area. */\n  content?: React.ReactNode;\n  /** Arbitrary content rendered at the bottom of the sidebar footer. */\n  footer?: React.ReactNode;\n};\n\nexport type DetailDialogProps = {\n  /** Controls whether the dialog is open. */\n  open?: boolean;\n  /** When `true`, replaces the main content area with a centered loading spinner. */\n  isLoading?: boolean;\n  /** Primary title displayed in the dialog header. */\n  title: string;\n  /** ISO string, `Date` object, or Unix timestamp shown as a formatted creation date below the title. */\n  createdAt?: string | Date | number | null;\n  /** Optional sidebar configuration — title, body content, and footer content. */\n  sidebar?: DetailDialogSidebar;\n  /** Callback invoked when the dialog open state changes. */\n  onOpenChange?: (open: boolean) => void;\n};\n\n/**\n * Full-screen detail dialog with a collapsible sidebar, a header with creation date, and a scrollable content area.\n *\n * @example\n * ```tsx\n * import { DetailDialog } from '@customafk/lunas-ui/dialogs/detail-dialog';\n *\n * <DetailDialog\n *   open={open}\n *   title=\"Order #1234\"\n *   createdAt=\"2024-01-15T09:00:00Z\"\n *   sidebar={{ title: 'Navigation', content: <nav>...</nav> }}\n *   onOpenChange={setOpen}\n * >\n *   <p>Detail content goes here.</p>\n * </DetailDialog>\n * ```\n */\nexport const DetailDialog: React.FC<React.PropsWithChildren<DetailDialogProps>> = ({ open, isLoading, title, createdAt, onOpenChange, sidebar, children }) => {\n  const { content: SidebarContent, footer: SidebarFooter } = sidebar || {};\n\n  const handleInteractOutside = useCallback<NonNullable<React.ComponentProps<typeof DialogPrimitive.Content>['onInteractOutside']>>(event => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <DialogPrimitive.Root data-slot=\"detail-dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"detail-dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"detail-dialog-overlay\"\n          className=\"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n        />\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n          <DialogPrimitive.Content\n            data-slot=\"dialog-content\"\n            className={cn(\n              'data-[state=open]:animate-in data-[state=closed]:animate-out',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              'data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80',\n              'relative z-50 grid',\n              'gap-4 overflow-hidden rounded-none border-none bg-background p-0 shadow-dialog outline-none duration-200',\n              'h-full max-h-dvh w-full max-w-svw',\n              'sm:rounded-lg',\n              'sm:max-w-lg',\n              'md:max-h-[calc(100dvh-2rem)]',\n              'md:max-w-[calc(100svw-2rem)]'\n            )}\n            onInteractOutside={handleInteractOutside}\n          >\n            <SidebarProvider>\n              <Sidebar collapsible=\"icon\">\n                <DetailDialogSidebarHeader>\n                  <DetailDialogSidebarMenu>\n                    <DetailDialogSidebarMenuItem>\n                      <DetailDialogSidebarMenuButton size=\"lg\" tabIndex={-1}>\n                        <LunasLogo variant=\"icon\" iconStyle=\"solid\" size=\"md\" className=\"size-8 min-w-8 min-h-8\" />\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                          <span className=\"truncate font-medium\">{sidebar?.title || 'Detail Dialog'}</span>\n                          <span className=\"truncate text-xs\">Lunas Enterprise</span>\n                        </div>\n                      </DetailDialogSidebarMenuButton>\n                    </DetailDialogSidebarMenuItem>\n                  </DetailDialogSidebarMenu>\n                </DetailDialogSidebarHeader>\n                <DetailDialogSidebarContent>{SidebarContent}</DetailDialogSidebarContent>\n                <DetailDialogSidebarFooter>{SidebarFooter}</DetailDialogSidebarFooter>\n              </Sidebar>\n\n              <main data-slot=\"detail-dialog-main\" className=\"relative h-full flex-1\">\n                <Flex padding=\"none\" gap=\"none\" vertical align=\"stretch\" className=\"absolute inset-0 size-full\">\n                  <header className=\"flex w-full flex-0 items-start gap-x-2.5 border-b border-border-weak bg-card py-2.5 pr-12 pl-2\">\n                    <DetailDialogSidebarTrigger />\n                    <Flex vertical align=\"start\" padding=\"none\" width=\"null\" wrap={false} className=\"flex-1 gap-0\">\n                      <Title level={5} className=\"line-clamp-1 truncate text-wrap\">\n                        {title || 'Detail Dialog'}\n                      </Title>\n                      {!!createdAt && (\n                        <Flex padding=\"none\" className=\"relative items-center text-text-positive-weak\">\n                          <CalendarIcon size={12} />\n                          <DateDisplay showTime showHoliday date={createdAt} format=\"full\" />\n                        </Flex>\n                      )}\n                    </Flex>\n                  </header>\n                  {isLoading ? (\n                    <Flex justify=\"center\" className=\"inset-shadow-sm w-full flex-1 bg-muted-muted\">\n                      <div className=\"loader\" />\n                    </Flex>\n                  ) : (\n                    <section data-slot=\"detail-dialog-body\" className=\"relative inset-shadow-sm flex flex-1 snap-y flex-col gap-0 overflow-y-auto bg-white\">\n                      {children}\n                    </section>\n                  )}\n                </Flex>\n              </main>\n            </SidebarProvider>\n\n            <DialogPrimitive.Close data-slot=\"dialog-close\" tabIndex={-1} asChild className=\"absolute top-3 right-3\">\n              <button className=\"flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60\">\n                <XIcon size={24} />\n              </button>\n            </DialogPrimitive.Close>\n          </DialogPrimitive.Content>\n        </div>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"8hBAoEA,MAAa,GAAsE,CAAE,OAAM,YAAW,QAAO,YAAW,eAAc,UAAS,cAAe,CAC5J,GAAM,CAAE,QAAS,EAAgB,OAAQ,GAAkB,GAAW,CAAC,EAEjE,EAAwB,EAAoG,GAAS,CACzI,EAAM,eAAe,EACrB,EAAM,gBAAgB,CACxB,EAAG,CAAC,CAAC,EAEL,OACE,EAACA,EAAgB,KAAjB,CAAsB,YAAU,gBAAsB,OAAoB,wBACxE,EAACA,EAAgB,OAAjB,CAAwB,YAAU,gCAAlC,CACE,EAACA,EAAgB,QAAjB,CACE,YAAU,wBACV,UAAU,wJACX,CAAA,EACD,EAAC,MAAD,CAAK,UAAU,+DACb,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,+DACA,6DACA,+DACA,qBACA,2GACA,oCACA,gBACA,cACA,+BACA,8BACF,EACA,kBAAmB,WAdrB,CAgBE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAS,YAAY,gBAArB,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAA+B,KAAK,KAAK,SAAU,YAAnD,CACE,EAAC,EAAD,CAAW,QAAQ,OAAO,UAAU,QAAQ,KAAK,KAAK,UAAU,wBAA0B,CAAA,EAC1F,EAAC,MAAD,CAAK,UAAU,uDAAf,CACE,EAAC,OAAD,CAAM,UAAU,gCAAwB,GAAS,OAAS,eAAsB,CAAA,EAChF,EAAC,OAAD,CAAM,UAAU,4BAAmB,kBAAsB,CAAA,CACtD,GACwB,GACJ,CAAA,CACN,CAAA,CACA,CAAA,EAC3B,EAAC,EAAD,CAAA,SAA6B,CAA2C,CAAA,EACxE,EAAC,EAAD,CAAA,SAA4B,CAAyC,CAAA,CAC9D,IAET,EAAC,OAAD,CAAM,YAAU,qBAAqB,UAAU,kCAC7C,EAAC,EAAD,CAAM,QAAQ,OAAO,IAAI,OAAO,SAAA,GAAS,MAAM,UAAU,UAAU,sCAAnE,CACE,EAAC,SAAD,CAAQ,UAAU,0GAAlB,CACE,EAAC,EAAD,CAA6B,CAAA,EAC7B,EAAC,EAAD,CAAM,SAAA,GAAS,MAAM,QAAQ,QAAQ,OAAO,MAAM,OAAO,KAAM,GAAO,UAAU,wBAAhF,CACE,EAAC,EAAD,CAAO,MAAO,EAAG,UAAU,2CACxB,GAAS,eACL,CAAA,EACN,CAAC,CAAC,GACD,EAAC,EAAD,CAAM,QAAQ,OAAO,UAAU,yDAA/B,CACE,EAAC,EAAD,CAAc,KAAM,EAAK,CAAA,EACzB,EAAC,EAAD,CAAa,SAAA,GAAS,YAAA,GAAY,KAAM,EAAW,OAAO,MAAQ,CAAA,CAC9D,GAEJ,GACA,IACP,EACC,EAAC,EAAD,CAAM,QAAQ,SAAS,UAAU,wDAC/B,EAAC,MAAD,CAAK,UAAU,QAAU,CAAA,CACrB,CAAA,EAEN,EAAC,UAAD,CAAS,YAAU,qBAAqB,UAAU,sFAC/C,UACM,CAAA,CAEP,GACF,CAAA,CACS,CAAA,CAAA,EAEjB,EAACA,EAAgB,MAAjB,CAAuB,YAAU,eAAe,SAAU,GAAI,QAAA,GAAQ,UAAU,kCAC9E,EAAC,SAAD,CAAQ,UAAU,2QAChB,EAAC,EAAD,CAAO,KAAM,EAAK,CAAA,CACZ,CAAA,CACa,CAAA,CACA,GACtB,CAAA,CACiB,GACJ,CAAA,CAE1B"}
+{"version":3,"file":"index.mjs","names":["DialogPrimitive"],"sources":["../../../packages/components/dialogs/detail-dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { CalendarIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { LunasLogo } from '@/components/features/logo';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { DateDisplay } from '@/components/data-display/date';\nimport { Flex } from '@/components/layouts/flex';\nimport { Title } from '@/components/typography/title';\nimport {\n  DetailDialogSidebarContent,\n  DetailDialogSidebarFooter,\n  DetailDialogSidebarHeader,\n  DetailDialogSidebarMenu,\n  DetailDialogSidebarMenuButton,\n  DetailDialogSidebarMenuItem,\n  DetailDialogSidebarTrigger,\n  Sidebar,\n  SidebarProvider,\n} from './components/sidebar-core';\n\ntype DetailDialogSidebar = {\n  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */\n  title?: string;\n  /** Arbitrary content rendered inside the sidebar scrollable area. */\n  content?: React.ReactNode;\n  /** Arbitrary content rendered at the bottom of the sidebar footer. */\n  footer?: React.ReactNode;\n};\n\nexport type DetailDialogProps = {\n  /** Controls whether the dialog is open. */\n  open?: boolean;\n  /** When `true`, replaces the main content area with a centered loading spinner. */\n  isLoading?: boolean;\n  /** Primary title displayed in the dialog header. */\n  title: string;\n  /** ISO string, `Date` object, or Unix timestamp shown as a formatted creation date below the title. */\n  createdAt?: string | Date | number | null;\n  /** Optional sidebar configuration — title, body content, and footer content. */\n  sidebar?: DetailDialogSidebar;\n  /** Callback invoked when the dialog open state changes. */\n  onOpenChange?: (open: boolean) => void;\n};\n\n/**\n * Full-screen detail dialog with a collapsible sidebar, a header with creation date, and a scrollable content area.\n *\n * @example\n * ```tsx\n * import { DetailDialog } from '@customafk/lunas-ui/dialogs/detail-dialog';\n *\n * <DetailDialog\n *   open={open}\n *   title=\"Order #1234\"\n *   createdAt=\"2024-01-15T09:00:00Z\"\n *   sidebar={{ title: 'Navigation', content: <nav>...</nav> }}\n *   onOpenChange={setOpen}\n * >\n *   <p>Detail content goes here.</p>\n * </DetailDialog>\n * ```\n */\nexport const DetailDialog: React.FC<React.PropsWithChildren<DetailDialogProps>> = ({ open, isLoading, title, createdAt, onOpenChange, sidebar, children }) => {\n  const { content: SidebarContent, footer: SidebarFooter } = sidebar || {};\n\n  const handleInteractOutside = useCallback<NonNullable<React.ComponentProps<typeof DialogPrimitive.Content>['onInteractOutside']>>(event => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <DialogPrimitive.Root data-slot=\"detail-dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"detail-dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"detail-dialog-overlay\"\n          className=\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in\"\n        />\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n          <DialogPrimitive.Content\n            data-slot=\"dialog-content\"\n            className={cn(\n              'data-[state=closed]:animate-out data-[state=open]:animate-in',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              'data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80',\n              'relative z-50 grid',\n              'gap-4 overflow-hidden rounded-none border-none bg-background p-0 shadow-dialog outline-none duration-200',\n              'h-full max-h-dvh w-full max-w-svw',\n              'sm:rounded-lg',\n              'sm:max-w-lg',\n              'md:max-h-[calc(100dvh-2rem)]',\n              'md:max-w-[calc(100svw-2rem)]'\n            )}\n            onInteractOutside={handleInteractOutside}\n          >\n            <SidebarProvider>\n              <Sidebar collapsible=\"icon\">\n                <DetailDialogSidebarHeader>\n                  <DetailDialogSidebarMenu>\n                    <DetailDialogSidebarMenuItem>\n                      <DetailDialogSidebarMenuButton size=\"lg\" tabIndex={-1}>\n                        <LunasLogo variant=\"icon\" iconStyle=\"solid\" size=\"md\" className=\"size-8 min-h-8 min-w-8\" />\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                          <span className=\"truncate font-medium\">{sidebar?.title || 'Detail Dialog'}</span>\n                          <span className=\"truncate text-xs\">Lunas Enterprise</span>\n                        </div>\n                      </DetailDialogSidebarMenuButton>\n                    </DetailDialogSidebarMenuItem>\n                  </DetailDialogSidebarMenu>\n                </DetailDialogSidebarHeader>\n                <DetailDialogSidebarContent>{SidebarContent}</DetailDialogSidebarContent>\n                <DetailDialogSidebarFooter>{SidebarFooter}</DetailDialogSidebarFooter>\n              </Sidebar>\n\n              <main data-slot=\"detail-dialog-main\" className=\"relative h-full flex-1\">\n                <Flex padding=\"none\" gap=\"none\" vertical align=\"stretch\" className=\"absolute inset-0 size-full\">\n                  <header className=\"flex w-full flex-0 items-start gap-x-2.5 border-border-weak border-b bg-card py-2.5 pr-12 pl-2\">\n                    <DetailDialogSidebarTrigger />\n                    <Flex vertical align=\"start\" padding=\"none\" width=\"null\" wrap={false} className=\"flex-1 gap-0\">\n                      <Title level={5} className=\"line-clamp-1 truncate text-wrap\">\n                        {title || 'Detail Dialog'}\n                      </Title>\n                      {!!createdAt && (\n                        <Flex padding=\"none\" className=\"relative items-center text-text-positive-weak\">\n                          <CalendarIcon size={12} />\n                          <DateDisplay showTime showHoliday date={createdAt} format=\"full\" />\n                        </Flex>\n                      )}\n                    </Flex>\n                  </header>\n                  {isLoading ? (\n                    <Flex justify=\"center\" className=\"inset-shadow-sm w-full flex-1 bg-muted-muted\">\n                      <div className=\"loader\" />\n                    </Flex>\n                  ) : (\n                    <section data-slot=\"detail-dialog-body\" className=\"relative inset-shadow-sm flex flex-1 snap-y flex-col gap-0 overflow-y-auto bg-white\">\n                      {children}\n                    </section>\n                  )}\n                </Flex>\n              </main>\n            </SidebarProvider>\n\n            <DialogPrimitive.Close data-slot=\"dialog-close\" tabIndex={-1} asChild className=\"absolute top-3 right-3\">\n              <button className=\"flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60\">\n                <XIcon size={24} />\n              </button>\n            </DialogPrimitive.Close>\n          </DialogPrimitive.Content>\n        </div>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"8hBAoEA,MAAa,GAAsE,CAAE,OAAM,YAAW,QAAO,YAAW,eAAc,UAAS,cAAe,CAC5J,GAAM,CAAE,QAAS,EAAgB,OAAQ,GAAkB,GAAW,CAAC,EAEjE,EAAwB,EAAoG,GAAS,CACzI,EAAM,eAAe,EACrB,EAAM,gBAAgB,CACxB,EAAG,CAAC,CAAC,EAEL,OACE,EAACA,EAAgB,KAAjB,CAAsB,YAAU,gBAAsB,OAAoB,wBACxE,EAACA,EAAgB,OAAjB,CAAwB,YAAU,gCAAlC,CACE,EAACA,EAAgB,QAAjB,CACE,YAAU,wBACV,UAAU,wJACX,CAAA,EACD,EAAC,MAAD,CAAK,UAAU,+DACb,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,+DACA,6DACA,+DACA,qBACA,2GACA,oCACA,gBACA,cACA,+BACA,8BACF,EACA,kBAAmB,WAdrB,CAgBE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAS,YAAY,gBAArB,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAA+B,KAAK,KAAK,SAAU,YAAnD,CACE,EAAC,EAAD,CAAW,QAAQ,OAAO,UAAU,QAAQ,KAAK,KAAK,UAAU,wBAA0B,CAAA,EAC1F,EAAC,MAAD,CAAK,UAAU,uDAAf,CACE,EAAC,OAAD,CAAM,UAAU,gCAAwB,GAAS,OAAS,eAAsB,CAAA,EAChF,EAAC,OAAD,CAAM,UAAU,4BAAmB,kBAAsB,CAAA,CACtD,GACwB,GACJ,CAAA,CACN,CAAA,CACA,CAAA,EAC3B,EAAC,EAAD,CAAA,SAA6B,CAA2C,CAAA,EACxE,EAAC,EAAD,CAAA,SAA4B,CAAyC,CAAA,CAC9D,IAET,EAAC,OAAD,CAAM,YAAU,qBAAqB,UAAU,kCAC7C,EAAC,EAAD,CAAM,QAAQ,OAAO,IAAI,OAAO,SAAA,GAAS,MAAM,UAAU,UAAU,sCAAnE,CACE,EAAC,SAAD,CAAQ,UAAU,0GAAlB,CACE,EAAC,EAAD,CAA6B,CAAA,EAC7B,EAAC,EAAD,CAAM,SAAA,GAAS,MAAM,QAAQ,QAAQ,OAAO,MAAM,OAAO,KAAM,GAAO,UAAU,wBAAhF,CACE,EAAC,EAAD,CAAO,MAAO,EAAG,UAAU,2CACxB,GAAS,eACL,CAAA,EACN,CAAC,CAAC,GACD,EAAC,EAAD,CAAM,QAAQ,OAAO,UAAU,yDAA/B,CACE,EAAC,EAAD,CAAc,KAAM,EAAK,CAAA,EACzB,EAAC,EAAD,CAAa,SAAA,GAAS,YAAA,GAAY,KAAM,EAAW,OAAO,MAAQ,CAAA,CAC9D,GAEJ,GACA,IACP,EACC,EAAC,EAAD,CAAM,QAAQ,SAAS,UAAU,wDAC/B,EAAC,MAAD,CAAK,UAAU,QAAU,CAAA,CACrB,CAAA,EAEN,EAAC,UAAD,CAAS,YAAU,qBAAqB,UAAU,sFAC/C,UACM,CAAA,CAEP,GACF,CAAA,CACS,CAAA,CAAA,EAEjB,EAACA,EAAgB,MAAjB,CAAuB,YAAU,eAAe,SAAU,GAAI,QAAA,GAAQ,UAAU,kCAC9E,EAAC,SAAD,CAAQ,UAAU,2QAChB,EAAC,EAAD,CAAO,KAAM,EAAK,CAAA,CACZ,CAAA,CACa,CAAA,CACA,GACtB,CAAA,CACiB,GACJ,CAAA,CAE1B"}

package/dist/edit-button-0_FLZoT3.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"edit-button-0_FLZoT3.cjs","names":["Tooltip","TooltipTrigger","Button","PencilIcon","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/edit-button.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { PencilIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost icon button with a pencil icon that triggers an async edit handler;\n * displays a descriptive tooltip on hover. Intended for use in table row action columns.\n *\n * @example\n * import { UITableEditButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEditButton\n *   title=\"Edit employee details\"\n *   onClick={async () => await openEditModal(rowId)}\n * />\n */\nexport const UITableEditButton: React.FC<{\n  /** Tooltip label describing what will be edited; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" onClick={handleClick}>\n          <PencilIcon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Edit item'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"iJAmBA,MAAa,GAKP,CAAE,QAAO,cAUX,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,YAAY,KAAK,OAAO,SAAA,EAAA,EAAA,YAAA,CAVxE,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKmF,YACrF,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,GAAS,WAAe,CAAA,CACd,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"edit-button-0_FLZoT3.cjs","names":["Tooltip","TooltipTrigger","Button","PencilIcon","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/edit-button.tsx"],"sourcesContent":["'use client';\nimport { useCallback } from 'react';\n\nimport { PencilIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost icon button with a pencil icon that triggers an async edit handler;\n * displays a descriptive tooltip on hover. Intended for use in table row action columns.\n *\n * @example\n * import { UITableEditButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEditButton\n *   title=\"Edit employee details\"\n *   onClick={async () => await openEditModal(rowId)}\n * />\n */\nexport const UITableEditButton: React.FC<{\n  /** Tooltip label describing what will be edited; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" onClick={handleClick}>\n          <PencilIcon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Edit item'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"iJAoBA,MAAa,GAKP,CAAE,QAAO,cAUX,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,YAAY,KAAK,OAAO,SAAA,EAAA,EAAA,YAAA,CAVxE,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKmF,YACrF,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,GAAS,WAAe,CAAA,CACd,CAAA,CACT,CAAA,CAAA"}