@customafk/lunas-ui 0.2.82 → 0.2.84

package/dist/{currency-display-B06kc2IG.cjs → currency-display-DefLJLqL.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tables-BqZ4Zs6e.cjs");let t=require("react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime");const i=(0,t.memo)(({value:i,currency:a=`USD`,locale:o=`en-US`,display:s=`symbol`,size:c=`md`,colorize:l=!1,trend:u})=>{let d=(0,t.useMemo)(()=>{let e=typeof i==`string`?Number(i.trim()):i;return e==null||Number.isNaN(e)||!Number.isFinite(e)?null:new Intl.NumberFormat(o,{style:`currency`,currency:a,currencyDisplay:s,minimumFractionDigits:0,maximumFractionDigits:0}).format(e)},[i,a,o,s]),f=(0,t.useMemo)(()=>{if(u)return u;if(!l)return;let e=typeof i==`string`?Number(i.trim()):i;if(!(typeof e!=`number`||Number.isNaN(e)))return e<0?`down`:e>0?`up`:`neutral`},[u,l,i]);return d?(0,r.jsx)(`p`,{className:(0,n.cn)(`font-number tabular-nums`,c===`xs`&&`text-xs`,c===`sm`&&`text-sm`,c===`md`&&`text-base`,c===`lg`&&`text-lg`,c===`xl`&&`text-xl`,!f&&`text-text-positive`,f===`down`&&`text-danger-strong`,f===`up`&&`text-success-strong`,f===`neutral`&&`text-text-positive`),children:d}):(0,r.jsx)(e.Q,{})});i.displayName=`UITableCurrencyDisplay`,exports.UITableCurrencyDisplay=i;
-//# sourceMappingURL=currency-display-B06kc2IG.cjs.map
+const e=require("./tables-DdLEj1dI.cjs");let t=require("react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime");const i=(0,t.memo)(({value:i,currency:a=`USD`,locale:o=`en-US`,display:s=`symbol`,size:c=`md`,colorize:l=!1,trend:u})=>{let d=(0,t.useMemo)(()=>{let e=typeof i==`string`?Number(i.trim()):i;return e==null||Number.isNaN(e)||!Number.isFinite(e)?null:new Intl.NumberFormat(o,{style:`currency`,currency:a,currencyDisplay:s,minimumFractionDigits:0,maximumFractionDigits:0}).format(e)},[i,a,o,s]),f=(0,t.useMemo)(()=>{if(u)return u;if(!l)return;let e=typeof i==`string`?Number(i.trim()):i;if(!(typeof e!=`number`||Number.isNaN(e)))return e<0?`down`:e>0?`up`:`neutral`},[u,l,i]);return d?(0,r.jsx)(`p`,{className:(0,n.cn)(`font-number tabular-nums`,c===`xs`&&`text-xs`,c===`sm`&&`text-sm`,c===`md`&&`text-base`,c===`lg`&&`text-lg`,c===`xl`&&`text-xl`,!f&&`text-text-positive`,f===`down`&&`text-danger-strong`,f===`up`&&`text-success-strong`,f===`neutral`&&`text-text-positive`),children:d}):(0,r.jsx)(e.Q,{})});i.displayName=`UITableCurrencyDisplay`,exports.UITableCurrencyDisplay=i;
+//# sourceMappingURL=currency-display-DefLJLqL.cjs.map

package/dist/{currency-display-B06kc2IG.cjs.map → currency-display-DefLJLqL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"currency-display-B06kc2IG.cjs","names":["UITableEmpty"],"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` and `trend` is not set, auto-derives color from the value's sign (negative → red, positive → green, zero → neutral). */\n  colorize?: boolean;\n  /**\n   * Explicit color override, independent of the value's numeric sign — e.g. a large\n   * positive expense can still be marked `'down'` (red) to flag it as significant.\n   * Takes precedence over `colorize`'s sign-based auto-detection.\n   */\n  trend?: 'up' | 'down' | 'neutral';\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 * <UITableCurrencyDisplay value={9800.5} currency=\"USD\" trend=\"down\" />\n */\nexport const UITableCurrencyDisplay = memo(({ value, currency = 'USD', locale = 'en-US', display = 'symbol', size = 'md', colorize = false, trend }: 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: 0,\n      maximumFractionDigits: 0,\n    }).format(num);\n  }, [value, currency, locale, display]);\n\n  const effectiveTrend = useMemo(() => {\n    if (trend) return trend;\n    if (!colorize) return undefined;\n\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    if (typeof num !== 'number' || Number.isNaN(num)) return undefined;\n    if (num < 0) return 'down';\n    if (num > 0) return 'up';\n    return 'neutral';\n  }, [trend, colorize, 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        !effectiveTrend && 'text-text-positive',\n        effectiveTrend === 'down' && 'text-danger-strong',\n        effectiveTrend === 'up' && 'text-success-strong',\n        effectiveTrend === 'neutral' && 'text-text-positive'\n      )}\n    >\n      {formatted}\n    </p>\n  );\n});\nUITableCurrencyDisplay.displayName = 'UITableCurrencyDisplay';\n"],"mappings":"2IA6CA,MAAa,GAAA,EAAA,EAAA,KAAA,EAA+B,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,UAAU,SAAU,OAAO,KAAM,WAAW,GAAO,WAAmB,CAC7J,IAAM,GAAA,EAAA,EAAA,QAAA,KAA0B,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,GAAA,EAAA,EAAA,QAAA,KAA+B,CACnC,GAAI,EAAO,OAAO,EAClB,GAAI,CAAC,EAAU,OAEf,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC3D,YAAO,GAAQ,UAAY,OAAO,MAAM,CAAG,GAG/C,OAFI,EAAM,EAAU,OAChB,EAAM,EAAU,KACb,SACT,EAAG,CAAC,EAAO,EAAU,CAAK,CAAC,EAI3B,OAFK,GAGH,EAAA,EAAA,IAAA,CAAC,IAAD,CACE,WAAA,EAAA,EAAA,GAAA,CACE,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAkB,qBACnB,IAAmB,QAAU,qBAC7B,IAAmB,MAAQ,sBAC3B,IAAmB,WAAa,oBAClC,EAEC,SAAA,CACA,CAAA,GAlBkB,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,CAoBxC,CAAC,EACD,EAAuB,YAAc"}
+{"version":3,"file":"currency-display-DefLJLqL.cjs","names":["UITableEmpty"],"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` and `trend` is not set, auto-derives color from the value's sign (negative → red, positive → green, zero → neutral). */\n  colorize?: boolean;\n  /**\n   * Explicit color override, independent of the value's numeric sign — e.g. a large\n   * positive expense can still be marked `'down'` (red) to flag it as significant.\n   * Takes precedence over `colorize`'s sign-based auto-detection.\n   */\n  trend?: 'up' | 'down' | 'neutral';\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 * <UITableCurrencyDisplay value={9800.5} currency=\"USD\" trend=\"down\" />\n */\nexport const UITableCurrencyDisplay = memo(({ value, currency = 'USD', locale = 'en-US', display = 'symbol', size = 'md', colorize = false, trend }: 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: 0,\n      maximumFractionDigits: 0,\n    }).format(num);\n  }, [value, currency, locale, display]);\n\n  const effectiveTrend = useMemo(() => {\n    if (trend) return trend;\n    if (!colorize) return undefined;\n\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    if (typeof num !== 'number' || Number.isNaN(num)) return undefined;\n    if (num < 0) return 'down';\n    if (num > 0) return 'up';\n    return 'neutral';\n  }, [trend, colorize, 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        !effectiveTrend && 'text-text-positive',\n        effectiveTrend === 'down' && 'text-danger-strong',\n        effectiveTrend === 'up' && 'text-success-strong',\n        effectiveTrend === 'neutral' && 'text-text-positive'\n      )}\n    >\n      {formatted}\n    </p>\n  );\n});\nUITableCurrencyDisplay.displayName = 'UITableCurrencyDisplay';\n"],"mappings":"2IA6CA,MAAa,GAAA,EAAA,EAAA,KAAA,EAA+B,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,UAAU,SAAU,OAAO,KAAM,WAAW,GAAO,WAAmB,CAC7J,IAAM,GAAA,EAAA,EAAA,QAAA,KAA0B,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,GAAA,EAAA,EAAA,QAAA,KAA+B,CACnC,GAAI,EAAO,OAAO,EAClB,GAAI,CAAC,EAAU,OAEf,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC3D,YAAO,GAAQ,UAAY,OAAO,MAAM,CAAG,GAG/C,OAFI,EAAM,EAAU,OAChB,EAAM,EAAU,KACb,SACT,EAAG,CAAC,EAAO,EAAU,CAAK,CAAC,EAI3B,OAFK,GAGH,EAAA,EAAA,IAAA,CAAC,IAAD,CACE,WAAA,EAAA,EAAA,GAAA,CACE,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAkB,qBACnB,IAAmB,QAAU,qBAC7B,IAAmB,MAAQ,sBAC3B,IAAmB,WAAa,oBAClC,EAEC,SAAA,CACA,CAAA,GAlBkB,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,CAoBxC,CAAC,EACD,EAAuB,YAAc"}

package/dist/{currency-display-7w-ZjVUw.mjs → currency-display-DpbtUluj.mjs}

@@ -1,2 +1,2 @@
-import{Q as e}from"./tables-Dg3KMBKA.mjs";import{memo as t,useMemo as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i}from"react/jsx-runtime";const a=t(({value:t,currency:a=`USD`,locale:o=`en-US`,display:s=`symbol`,size:c=`md`,colorize:l=!1,trend:u})=>{let d=n(()=>{let e=typeof t==`string`?Number(t.trim()):t;return e==null||Number.isNaN(e)||!Number.isFinite(e)?null:new Intl.NumberFormat(o,{style:`currency`,currency:a,currencyDisplay:s,minimumFractionDigits:0,maximumFractionDigits:0}).format(e)},[t,a,o,s]),f=n(()=>{if(u)return u;if(!l)return;let e=typeof t==`string`?Number(t.trim()):t;if(!(typeof e!=`number`||Number.isNaN(e)))return e<0?`down`:e>0?`up`:`neutral`},[u,l,t]);return d?i(`p`,{className:r(`font-number tabular-nums`,c===`xs`&&`text-xs`,c===`sm`&&`text-sm`,c===`md`&&`text-base`,c===`lg`&&`text-lg`,c===`xl`&&`text-xl`,!f&&`text-text-positive`,f===`down`&&`text-danger-strong`,f===`up`&&`text-success-strong`,f===`neutral`&&`text-text-positive`),children:d}):i(e,{})});a.displayName=`UITableCurrencyDisplay`;export{a as UITableCurrencyDisplay};
-//# sourceMappingURL=currency-display-7w-ZjVUw.mjs.map
+import{Q as e}from"./tables-CuoBQNqx.mjs";import{memo as t,useMemo as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i}from"react/jsx-runtime";const a=t(({value:t,currency:a=`USD`,locale:o=`en-US`,display:s=`symbol`,size:c=`md`,colorize:l=!1,trend:u})=>{let d=n(()=>{let e=typeof t==`string`?Number(t.trim()):t;return e==null||Number.isNaN(e)||!Number.isFinite(e)?null:new Intl.NumberFormat(o,{style:`currency`,currency:a,currencyDisplay:s,minimumFractionDigits:0,maximumFractionDigits:0}).format(e)},[t,a,o,s]),f=n(()=>{if(u)return u;if(!l)return;let e=typeof t==`string`?Number(t.trim()):t;if(!(typeof e!=`number`||Number.isNaN(e)))return e<0?`down`:e>0?`up`:`neutral`},[u,l,t]);return d?i(`p`,{className:r(`font-number tabular-nums`,c===`xs`&&`text-xs`,c===`sm`&&`text-sm`,c===`md`&&`text-base`,c===`lg`&&`text-lg`,c===`xl`&&`text-xl`,!f&&`text-text-positive`,f===`down`&&`text-danger-strong`,f===`up`&&`text-success-strong`,f===`neutral`&&`text-text-positive`),children:d}):i(e,{})});a.displayName=`UITableCurrencyDisplay`;export{a as UITableCurrencyDisplay};
+//# sourceMappingURL=currency-display-DpbtUluj.mjs.map

package/dist/{currency-display-7w-ZjVUw.mjs.map → currency-display-DpbtUluj.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"currency-display-7w-ZjVUw.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` and `trend` is not set, auto-derives color from the value's sign (negative → red, positive → green, zero → neutral). */\n  colorize?: boolean;\n  /**\n   * Explicit color override, independent of the value's numeric sign — e.g. a large\n   * positive expense can still be marked `'down'` (red) to flag it as significant.\n   * Takes precedence over `colorize`'s sign-based auto-detection.\n   */\n  trend?: 'up' | 'down' | 'neutral';\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 * <UITableCurrencyDisplay value={9800.5} currency=\"USD\" trend=\"down\" />\n */\nexport const UITableCurrencyDisplay = memo(({ value, currency = 'USD', locale = 'en-US', display = 'symbol', size = 'md', colorize = false, trend }: 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: 0,\n      maximumFractionDigits: 0,\n    }).format(num);\n  }, [value, currency, locale, display]);\n\n  const effectiveTrend = useMemo(() => {\n    if (trend) return trend;\n    if (!colorize) return undefined;\n\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    if (typeof num !== 'number' || Number.isNaN(num)) return undefined;\n    if (num < 0) return 'down';\n    if (num > 0) return 'up';\n    return 'neutral';\n  }, [trend, colorize, 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        !effectiveTrend && 'text-text-positive',\n        effectiveTrend === 'down' && 'text-danger-strong',\n        effectiveTrend === 'up' && 'text-success-strong',\n        effectiveTrend === 'neutral' && 'text-text-positive'\n      )}\n    >\n      {formatted}\n    </p>\n  );\n});\nUITableCurrencyDisplay.displayName = 'UITableCurrencyDisplay';\n"],"mappings":"gLA6CA,MAAa,EAAyB,GAAM,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,UAAU,SAAU,OAAO,KAAM,WAAW,GAAO,WAAmB,CAC7J,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,EAAiB,MAAc,CACnC,GAAI,EAAO,OAAO,EAClB,GAAI,CAAC,EAAU,OAEf,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC3D,YAAO,GAAQ,UAAY,OAAO,MAAM,CAAG,GAG/C,OAFI,EAAM,EAAU,OAChB,EAAM,EAAU,KACb,SACT,EAAG,CAAC,EAAO,EAAU,CAAK,CAAC,EAI3B,OAFK,EAGH,EAAC,IAAD,CACE,UAAW,EACT,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAkB,qBACnB,IAAmB,QAAU,qBAC7B,IAAmB,MAAQ,sBAC3B,IAAmB,WAAa,oBAClC,EAEC,SAAA,CACA,CAAA,EAlBkB,EAAC,EAAD,CAAe,CAAA,CAoBxC,CAAC,EACD,EAAuB,YAAc"}
+{"version":3,"file":"currency-display-DpbtUluj.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` and `trend` is not set, auto-derives color from the value's sign (negative → red, positive → green, zero → neutral). */\n  colorize?: boolean;\n  /**\n   * Explicit color override, independent of the value's numeric sign — e.g. a large\n   * positive expense can still be marked `'down'` (red) to flag it as significant.\n   * Takes precedence over `colorize`'s sign-based auto-detection.\n   */\n  trend?: 'up' | 'down' | 'neutral';\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 * <UITableCurrencyDisplay value={9800.5} currency=\"USD\" trend=\"down\" />\n */\nexport const UITableCurrencyDisplay = memo(({ value, currency = 'USD', locale = 'en-US', display = 'symbol', size = 'md', colorize = false, trend }: 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: 0,\n      maximumFractionDigits: 0,\n    }).format(num);\n  }, [value, currency, locale, display]);\n\n  const effectiveTrend = useMemo(() => {\n    if (trend) return trend;\n    if (!colorize) return undefined;\n\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    if (typeof num !== 'number' || Number.isNaN(num)) return undefined;\n    if (num < 0) return 'down';\n    if (num > 0) return 'up';\n    return 'neutral';\n  }, [trend, colorize, 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        !effectiveTrend && 'text-text-positive',\n        effectiveTrend === 'down' && 'text-danger-strong',\n        effectiveTrend === 'up' && 'text-success-strong',\n        effectiveTrend === 'neutral' && 'text-text-positive'\n      )}\n    >\n      {formatted}\n    </p>\n  );\n});\nUITableCurrencyDisplay.displayName = 'UITableCurrencyDisplay';\n"],"mappings":"gLA6CA,MAAa,EAAyB,GAAM,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,UAAU,SAAU,OAAO,KAAM,WAAW,GAAO,WAAmB,CAC7J,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,EAAiB,MAAc,CACnC,GAAI,EAAO,OAAO,EAClB,GAAI,CAAC,EAAU,OAEf,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC3D,YAAO,GAAQ,UAAY,OAAO,MAAM,CAAG,GAG/C,OAFI,EAAM,EAAU,OAChB,EAAM,EAAU,KACb,SACT,EAAG,CAAC,EAAO,EAAU,CAAK,CAAC,EAI3B,OAFK,EAGH,EAAC,IAAD,CACE,UAAW,EACT,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAkB,qBACnB,IAAmB,QAAU,qBAC7B,IAAmB,MAAQ,sBAC3B,IAAmB,WAAa,oBAClC,EAEC,SAAA,CACA,CAAA,EAlBkB,EAAC,EAAD,CAAe,CAAA,CAoBxC,CAAC,EACD,EAAuB,YAAc"}

package/dist/data-display/country.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime-CMqjfN_6.cjs"),t=require("../typography/paragraph.cjs"),n=require("../layouts/flex.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("react-country-flag");a=e.t(a,1);const o={Vietnam:`VN`,USA:`US`,Japan:`JP`,China:`CN`,Korea:`KR`,Singapore:`SG`,Malaysia:`MY`,Indonesia:`ID`,Taiwan:`TW`,Thailand:`TH`},s={Vietnam:`Vietnam`,USA:`America`,Japan:`Japan`,China:`China`,Korea:`Korea`,Singapore:`Singapore`,Malaysia:`Malaysia`,Indonesia:`Indonesia`,Taiwan:`Taiwan`,Thailand:`Thailand`},c=({country:e})=>{let c=(0,r.useMemo)(()=>e?o[e]:`VN`,[e]);return e?(0,i.jsxs)(n.Flex,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:[(0,i.jsx)(a.default,{svg:!0,countryCode:c,className:`emojiFlag border`}),(0,i.jsx)(t.Paragraph,{variant:`sm`,children:s[e]})]}):(0,i.jsx)(n.Flex,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:(0,i.jsx)(t.Paragraph,{variant:`muted`,className:`line-clamp-1 text-xs`,children:`No country`})})};exports.CountryDisplay=c;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime-DWNI8pZO.cjs"),t=require("../typography/paragraph.cjs"),n=require("../layouts/flex.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("react-country-flag");a=e.n(a,1);const o={Vietnam:`VN`,USA:`US`,Japan:`JP`,China:`CN`,Korea:`KR`,Singapore:`SG`,Malaysia:`MY`,Indonesia:`ID`,Taiwan:`TW`,Thailand:`TH`},s={Vietnam:`Vietnam`,USA:`America`,Japan:`Japan`,China:`China`,Korea:`Korea`,Singapore:`Singapore`,Malaysia:`Malaysia`,Indonesia:`Indonesia`,Taiwan:`Taiwan`,Thailand:`Thailand`},c=({country:e})=>{let c=(0,r.useMemo)(()=>e?o[e]:`VN`,[e]);return e?(0,i.jsxs)(n.Flex,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:[(0,i.jsx)(a.default,{svg:!0,countryCode:c,className:`emojiFlag border`}),(0,i.jsx)(t.Paragraph,{variant:`sm`,children:s[e]})]}):(0,i.jsx)(n.Flex,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:(0,i.jsx)(t.Paragraph,{variant:`muted`,className:`line-clamp-1 text-xs`,children:`No country`})})};exports.CountryDisplay=c;
 //# sourceMappingURL=country.cjs.map

package/dist/data-display/phone-number.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../ui/tooltip.cjs");let t=require("react/jsx-runtime");const n=({value:n})=>(0,t.jsxs)(e.Tooltip,{children:[(0,t.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,t.jsx)(`p`,{"data-slot":`phone-number-display`,className:`cursor-default font-number text-sm text-text-positive tabular-nums transition-colors`,children:n.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),(0,t.jsx)(e.TooltipContent,{align:`start`,children:(0,t.jsx)(`p`,{children:n.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`(00) (+84) ($1) $2-$3`)})})]});exports.PhoneNumberDisplay=n;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../ui/tooltip.cjs"),t=require("../phone-CUxXVTg6.cjs");let n=require("react/jsx-runtime");const r=({value:r})=>{let i=t.t(r);return i?(0,n.jsxs)(e.Tooltip,{children:[(0,n.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,n.jsx)(`p`,{"data-slot":`phone-number-display`,className:`cursor-default font-number text-sm text-text-positive tabular-nums transition-colors`,children:i.national})}),(0,n.jsx)(e.TooltipContent,{align:`start`,children:(0,n.jsx)(`p`,{children:i.international})})]}):null};exports.PhoneNumberDisplay=r;
 //# sourceMappingURL=phone-number.cjs.map

package/dist/data-display/phone-number.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number.cjs","names":["Tooltip","TooltipTrigger","TooltipContent"],"sources":["../../packages/components/data-display/phone-number.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\ntype PhoneNumberDisplayProps = {\n  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */\n  value: string;\n};\n\n/**\n * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.\n *\n * @example\n * ```tsx\n * import { PhoneNumberDisplay } from '@customafk/lunas-ui/data-display/phone-number';\n *\n * <PhoneNumberDisplay value=\"0901234567\" />\n * ```\n */\nexport const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ value }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p data-slot=\"phone-number-display\" className=\"cursor-default font-number text-sm text-text-positive tabular-nums transition-colors\">\n          {value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}\n        </p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p>{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '(00) (+84) ($1) $2-$3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"wJAmBA,MAAa,GAAyD,CAAE,YAEpE,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,YAAU,uBAAuB,UAAU,uFAC3C,SAAA,EAAM,QAAQ,wBAAyB,YAAY,CACnD,CAAA,CACW,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QACpB,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,uBAAuB,CAAK,CAAA,CAClE,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"phone-number.cjs","names":["formatVietnamesePhone","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../../packages/components/data-display/phone-number.tsx"],"sourcesContent":["'use client';\n\nimport { formatVietnamesePhone } from '@/libs/phone';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\ntype PhoneNumberDisplayProps = {\n  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `0901 234 567` with a `+84` tooltip. */\n  value: string | null | undefined;\n};\n\n/**\n * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.\n *\n * @example\n * ```tsx\n * import { PhoneNumberDisplay } from '@customafk/lunas-ui/data-display/phone-number';\n *\n * <PhoneNumberDisplay value=\"0901234567\" />\n * ```\n */\nexport const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ value }) => {\n  const phone = formatVietnamesePhone(value);\n  if (!phone) return null;\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p data-slot=\"phone-number-display\" className=\"cursor-default font-number text-sm text-text-positive tabular-nums transition-colors\">\n          {phone.national}\n        </p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p>{phone.international}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"2LAoBA,MAAa,GAAyD,CAAE,WAAY,CAClF,IAAM,EAAQA,EAAAA,EAAsB,CAAK,EAGzC,OAFK,GAGH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,YAAU,uBAAuB,UAAU,uFAC3C,SAAA,EAAM,QACN,CAAA,CACW,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QACpB,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,EAAM,aAAiB,CAAA,CACb,CAAA,CACT,CAAA,CAAA,EAZQ,IAcrB"}

package/dist/data-display/phone-number.d.cts

@@ -1,2 +1,2 @@
-import { t as PhoneNumberDisplay } from "../phone-number-D9j5xYDW.cjs";
+import { t as PhoneNumberDisplay } from "../phone-number-B1bLIt8i.cjs";
 export { PhoneNumberDisplay };

package/dist/data-display/phone-number.d.mts

@@ -1,2 +1,2 @@
-import { t as PhoneNumberDisplay } from "../phone-number-D9j5xYDW.mjs";
+import { t as PhoneNumberDisplay } from "../phone-number-B1bLIt8i.mjs";
 export { PhoneNumberDisplay };

package/dist/data-display/phone-number.mjs

@@ -1,2 +1,2 @@
-"use client";import{Tooltip as e,TooltipContent as t,TooltipTrigger as n}from"../ui/tooltip.mjs";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({value:a})=>i(e,{children:[r(n,{asChild:!0,children:r(`p`,{"data-slot":`phone-number-display`,className:`cursor-default font-number text-sm text-text-positive tabular-nums transition-colors`,children:a.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),r(t,{align:`start`,children:r(`p`,{children:a.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`(00) (+84) ($1) $2-$3`)})})]});export{a as PhoneNumberDisplay};
+"use client";import{Tooltip as e,TooltipContent as t,TooltipTrigger as n}from"../ui/tooltip.mjs";import{t as r}from"../phone-CTTjc3mv.mjs";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({value:o})=>{let s=r(o);return s?a(e,{children:[i(n,{asChild:!0,children:i(`p`,{"data-slot":`phone-number-display`,className:`cursor-default font-number text-sm text-text-positive tabular-nums transition-colors`,children:s.national})}),i(t,{align:`start`,children:i(`p`,{children:s.international})})]}):null};export{o as PhoneNumberDisplay};
 //# sourceMappingURL=phone-number.mjs.map

package/dist/data-display/phone-number.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number.mjs","names":[],"sources":["../../packages/components/data-display/phone-number.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\ntype PhoneNumberDisplayProps = {\n  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */\n  value: string;\n};\n\n/**\n * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.\n *\n * @example\n * ```tsx\n * import { PhoneNumberDisplay } from '@customafk/lunas-ui/data-display/phone-number';\n *\n * <PhoneNumberDisplay value=\"0901234567\" />\n * ```\n */\nexport const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ value }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p data-slot=\"phone-number-display\" className=\"cursor-default font-number text-sm text-text-positive tabular-nums transition-colors\">\n          {value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}\n        </p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p>{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '(00) (+84) ($1) $2-$3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"mJAmBA,MAAa,GAAyD,CAAE,WAEpE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,IAAD,CAAG,YAAU,uBAAuB,UAAU,uFAC3C,SAAA,EAAM,QAAQ,wBAAyB,YAAY,CACnD,CAAA,CACW,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QACpB,SAAA,EAAC,IAAD,CAAA,SAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,uBAAuB,CAAK,CAAA,CAClE,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"phone-number.mjs","names":[],"sources":["../../packages/components/data-display/phone-number.tsx"],"sourcesContent":["'use client';\n\nimport { formatVietnamesePhone } from '@/libs/phone';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\ntype PhoneNumberDisplayProps = {\n  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `0901 234 567` with a `+84` tooltip. */\n  value: string | null | undefined;\n};\n\n/**\n * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.\n *\n * @example\n * ```tsx\n * import { PhoneNumberDisplay } from '@customafk/lunas-ui/data-display/phone-number';\n *\n * <PhoneNumberDisplay value=\"0901234567\" />\n * ```\n */\nexport const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ value }) => {\n  const phone = formatVietnamesePhone(value);\n  if (!phone) return null;\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p data-slot=\"phone-number-display\" className=\"cursor-default font-number text-sm text-text-positive tabular-nums transition-colors\">\n          {phone.national}\n        </p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p>{phone.international}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"6LAoBA,MAAa,GAAyD,CAAE,WAAY,CAClF,IAAM,EAAQ,EAAsB,CAAK,EAGzC,OAFK,EAGH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,IAAD,CAAG,YAAU,uBAAuB,UAAU,uFAC3C,SAAA,EAAM,QACN,CAAA,CACW,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QACpB,SAAA,EAAC,IAAD,CAAA,SAAI,EAAM,aAAiB,CAAA,CACb,CAAA,CACT,CAAA,CAAA,EAZQ,IAcrB"}

package/dist/{date-display-BO7OY_AC.mjs → date-display-ByvkuSk0.mjs}

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

package/dist/{date-display-BO7OY_AC.mjs.map → date-display-ByvkuSk0.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"date-display-BO7OY_AC.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\" />\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":"4OAsBA,MAAa,GAAuC,CAAE,UACzC,GAAiC,KAAa,EAAC,EAAD,CAAe,CAAA,EAEtE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GAEd,SAAA,EAAC,EAAD,CAAmB,OAAM,OAAO,QAAU,CAAA,CAE5B,CAAA,EAChB,EAAC,EAAD,CAAgB,UAAU,eACxB,SAAA,EAAC,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,wCAA0C,CAAA,CACtF,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}
+{"version":3,"file":"date-display-ByvkuSk0.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\" />\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":"4OAsBA,MAAa,GAAuC,CAAE,UACzC,GAAiC,KAAa,EAAC,EAAD,CAAe,CAAA,EAEtE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GAEd,SAAA,EAAC,EAAD,CAAmB,OAAM,OAAO,QAAU,CAAA,CAE5B,CAAA,EAChB,EAAC,EAAD,CAAgB,UAAU,eACxB,SAAA,EAAC,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,wCAA0C,CAAA,CACtF,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}

package/dist/{date-display-DHnZr_yf.cjs → date-display-CkPBLlWz.cjs}

@@ -1,2 +1,2 @@
-const e=require("./date-B3cozmfV.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-BqZ4Zs6e.cjs");let r=require("react/jsx-runtime");const i=({date:i})=>i==null?(0,r.jsx)(n.Q,{}):(0,r.jsx)(t.TooltipProvider,{children:(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{asChild:!0,children:(0,r.jsx)(e.t,{date:i,format:`medium`})}),(0,r.jsx)(t.TooltipContent,{className:`rounded px-2`,children:(0,r.jsx)(e.t,{date:i,format:`full`,showTime:!0,className:`font-medium text-text-negative text-xs`})})]})});exports.UITableDateDisplay=i;
-//# sourceMappingURL=date-display-DHnZr_yf.cjs.map
+const e=require("./date-B3cozmfV.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-DdLEj1dI.cjs");let r=require("react/jsx-runtime");const i=({date:i})=>i==null?(0,r.jsx)(n.Q,{}):(0,r.jsx)(t.TooltipProvider,{children:(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{asChild:!0,children:(0,r.jsx)(e.t,{date:i,format:`medium`})}),(0,r.jsx)(t.TooltipContent,{className:`rounded px-2`,children:(0,r.jsx)(e.t,{date:i,format:`full`,showTime:!0,className:`font-medium text-text-negative text-xs`})})]})});exports.UITableDateDisplay=i;
+//# sourceMappingURL=date-display-CkPBLlWz.cjs.map

package/dist/{date-display-DHnZr_yf.cjs.map → date-display-CkPBLlWz.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"date-display-DHnZr_yf.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","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\" />\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":"2IAsBA,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,GAEd,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAmB,OAAM,OAAO,QAAU,CAAA,CAE5B,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,UAAU,eACxB,UAAA,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-CkPBLlWz.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","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\" />\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":"2IAsBA,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,GAEd,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAmB,OAAM,OAAO,QAAU,CAAA,CAE5B,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,UAAU,eACxB,UAAA,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-field-46UtGmEV.cjs

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

package/dist/{date-field-CYoPe74G.cjs.map → date-field-46UtGmEV.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"date-field-CYoPe74G.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    const _hasError = _touched && field.state.meta.errors.length > 0;\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 && _hasError && <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-46UtGmEV.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    const _hasError = _touched && field.state.meta.errors.length > 0;\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 && _hasError && <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":"uVA+BA,MAAa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,GACnB,WAAW,GACX,WAAW,GACX,UACA,aACI,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAgB,EAChB,EAAQA,EAAAA,GAAqC,EAC7C,CAAC,EAAa,IAAA,EAAA,EAAA,SAAA,CAA2B,EAAK,EAE9C,GAAA,EAAA,EAAA,SAAA,CAAwB,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,KAC7C,EAAY,GAAY,EAAM,MAAM,KAAK,OAAO,OAAS,EAEzD,EAAgB,GAAe,CACnC,EAAM,aAAa,CAAI,EACvB,EAAe,EAAK,CACtB,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,UAAU,OAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,QAAS,EAAM,KAAM,gBAAe,EAAhD,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GAEd,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAkB,UAAU,0BAC1B,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CACE,KAAM,EACN,aAAc,GAAQ,CACpB,EAAe,CAAI,EACd,GAAM,EAAM,WAAW,CAC9B,EALF,SAAA,EAOE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CACE,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAAU,EACV,eAAc,EAAa,GAAO,IAAA,GAClC,mBAAkB,EAClB,WAAA,EAAA,EAAA,GAAA,CACE,uEACA,uBACA,oFACA,oIACA,EAAM,MAAM,QAAU,MAAQ,2BAC9B,GAAc,4DAChB,EAdF,SAAA,EAgBE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,EAAM,MAAM,QAAU,KAAQ,GAAe,eAAA,EAAA,EAAA,OAAA,CAAwB,EAAM,MAAM,MAAO,MAAM,CAAK,CAAA,GACvG,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,YAAa,CAAI,CAAA,CAC7B,GACM,CAAA,GAEhB,EAAA,EAAA,KAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,iDAAtD,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0GAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACF,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,GAAA,EAAA,EAAA,WAAA,CAAwB,CAAC,EAAG,SAAA,SAE1F,CAAA,GACR,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,GAAA,EAAA,EAAA,cAAA,CAA2B,CAAC,EAAG,SAAA,UAE7F,CAAA,GACR,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,GAAA,EAAA,EAAA,eAAA,CAA4B,CAAC,EAAG,SAAA,SAE9F,CAAA,GACR,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,GAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,WAAA,CAAgC,EAAG,CAAC,CAAC,EAAG,SAAA,YAEtG,CAAA,GACR,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,GAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,WAAA,CAAgC,EAAG,CAAC,CAAC,EAAG,SAAA,YAEtG,CAAA,GACR,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,GAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,WAAA,CAAgC,EAAG,EAAE,CAAC,EAAG,SAAA,aAEvG,CAAA,GACR,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,GAAA,EAAA,EAAA,aAAA,EAAA,EAAA,EAAA,WAAA,CAAqC,CAAC,CAAC,EAAG,SAAA,WAExG,CAAA,GACR,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,YAAe,GAAA,EAAA,EAAA,eAAA,EAAA,EAAA,EAAA,WAAA,CAAuC,CAAC,CAAC,EAAG,SAAA,aAE1G,CAAA,CACL,CACL,CAAA,GAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,uBACb,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wCACb,UAAA,EAAA,EAAA,IAAA,CAACG,EAAAA,SAAD,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,CACT,CAAA,CAAA,IAER,GAAY,GAAoB,IAAa,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,GAAI,EAAS,UAAU,OAAO,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,GAC1H,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACrD,GACW,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAU,YAAc"}

package/dist/date-field-zoPch5tC.mjs

@@ -0,0 +1,2 @@
+import{$ as e,G as t,J as n,K as r,X as i,Y as a,Z as o,et as s,nt as c,q as l,rt as u}from"./tanstack-form-Do6xL2kv.mjs";import{Button as d}from"./ui/button.mjs";import{Popover as f,PopoverContent as p,PopoverTrigger as m}from"./ui/popover.mjs";import{Calendar as h}from"./ui/calendar.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=u(),[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=q&&H.state.meta.errors.length>0,Z=e=>{H.handleChange(e),W(!1)};return S(i,{className:`px-4`,children:[S(t,{orientation:N,"data-invalid":J,children:[S(r,{children:[S(o,{htmlFor:H.name,"aria-required":Y,children:[_,P&&x(c,{tooltip:P})]}),x(n,{children:j})]}),x(l,{className:`flex flex-col space-y-1`,children:S(`div`,{className:`flex w-full flex-col`,children:[S(f,{open:U,onOpenChange:e=>{W(e),e||H.handleBlur()},children:[x(m,{asChild:!0,children:S(d,{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(p,{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(d,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(C()),children:`Hôm nay`}),x(d,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(w()),children:`Ngày mai`}),x(d,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(T()),children:`Hôm qua`}),x(d,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(k(C(),3)),children:`3 ngày qua`}),x(d,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(k(C(),7)),children:`7 ngày qua`}),x(d,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(k(C(),30)),children:`30 ngày qua`}),x(d,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(O(C())),children:`Tháng này`}),x(d,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(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(h,{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&&Z(e)}})})})]})]}),q&&I&&X&&x(a,{id:V,className:`mt-1`,errors:H.state.meta.errors}),x(e,{isShow:!!F,children:F})]})})]}),x(s,{})]})});j.displayName=`DateField`;export{j as DateField};
+//# sourceMappingURL=date-field-zoPch5tC.mjs.map

package/dist/{date-field-D_qpBb-t.mjs.map → date-field-zoPch5tC.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"date-field-D_qpBb-t.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    const _hasError = _touched && field.state.meta.errors.length > 0;\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 && _hasError && <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-zoPch5tC.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    const _hasError = _touched && field.state.meta.errors.length > 0;\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 && _hasError && <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/{description-display-CBfoP3Y2.mjs → description-display-BFTBwDmB.mjs}

@@ -1,2 +1,2 @@
-import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-Dg3KMBKA.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({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-CBfoP3Y2.mjs.map
+import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-CuoBQNqx.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({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-BFTBwDmB.mjs.map

package/dist/{description-display-CBfoP3Y2.mjs.map → description-display-BFTBwDmB.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"description-display-CBfoP3Y2.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,6CAC/B,SAAA,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,SAAA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,mEAC/B,SAAA,CACQ,CAAA,EACX,EAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,CAChE,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"description-display-BFTBwDmB.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,6CAC/B,SAAA,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,SAAA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,mEAC/B,SAAA,CACQ,CAAA,EACX,EAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,CAChE,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA"}

package/dist/{description-display-Cckihd1s.cjs → description-display-DeEwppdC.cjs}

@@ -1,2 +1,2 @@
-const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-BqZ4Zs6e.cjs");let r=require("react/jsx-runtime");const i=({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-Cckihd1s.cjs.map
+const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-DdLEj1dI.cjs");let r=require("react/jsx-runtime");const i=({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-DeEwppdC.cjs.map

package/dist/{description-display-Cckihd1s.cjs.map → description-display-DeEwppdC.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"description-display-Cckihd1s.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,6CAC/B,SAAA,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,mEAC/B,SAAA,CACQ,CAAA,GACX,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,CAChE,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"description-display-DeEwppdC.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,6CAC/B,SAAA,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,mEAC/B,SAAA,CACQ,CAAA,GACX,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,CAChE,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA"}

package/dist/descriptions-Bw9GSCjo.mjs

@@ -0,0 +1,3 @@
+import{Paragraph as e}from"./typography/paragraph.mjs";import{Skeleton as t}from"./ui/skeleton.mjs";import{Image as n}from"./ui/image.mjs";import{Flex as r}from"./layouts/flex.mjs";import{t as i}from"./date-Nsz0Pewe.mjs";import{Badge as a,badgeDotVariants as o}from"./ui/badge.mjs";import{Tooltip as s,TooltipContent as c,TooltipTrigger as l}from"./ui/tooltip.mjs";import{t as u}from"./phone-CTTjc3mv.mjs";import{UserDataDisplay as d}from"./data-display/user.mjs";import{UIGrid as f,UIGridItem as p}from"./layouts/ui-grid.mjs";import{Collapsible as m,CollapsibleContent as h,CollapsibleTrigger as g}from"./ui/collapsible.mjs";import{Progress as _}from"./ui/progress.mjs";import{Input as v}from"./ui/input.mjs";import{CheckIcon as y,ChevronDownIcon as ee,CopyIcon as b,DownloadIcon as x,ExternalLinkIcon as S,FileIcon as C,LinkIcon as te,SearchIcon as w,XIcon as T}from"lucide-react";import{Children as E,createContext as D,isValidElement as ne,memo as re,use as O,useCallback as k,useEffect as ie,useId as ae,useMemo as A,useRef as oe,useState as j}from"react";import{cn as M,formatBytes as se}from"@customafk/react-toolkit/utils";import{cva as N}from"class-variance-authority";import{jsx as P,jsxs as F}from"react/jsx-runtime";import{useCopyToClipboard as ce}from"@customafk/react-toolkit/hooks/useCopyToClipboard";const I=D(!1),le={labelColSpan:null,size:`md`,bordered:!0},L=D(le),R=D(!1),z=D({query:``,setQuery:()=>{}}),B=D(null),ue=N(`relative flex flex-col bg-card`,{variants:{surface:{card:`size-full overflow-y-auto rounded-lg`,nested:`w-full overflow-hidden rounded-md`,grouped:``},bordered:{true:``,false:`bg-transparent shadow-none ring-0`}},compoundVariants:[{surface:`card`,bordered:!0,className:`border border-border shadow-card ring-1 ring-border-weak`},{surface:`nested`,bordered:!0,className:`border border-border`},{surface:`grouped`,bordered:!0,className:`border-b border-b-border last:border-b-0`}],defaultVariants:{surface:`card`,bordered:!0}}),V=N(`relative size-full overflow-y-auto rounded-lg bg-card`,{variants:{bordered:{true:`border border-border shadow-card ring-1 ring-border-weak`,false:``}},defaultVariants:{bordered:!0}}),H=N(`bg-card`,{variants:{sticky:{true:`sticky top-0 z-30`,false:`relative`},size:{xs:`px-2.5 py-1.5`,sm:`px-3 py-2`,md:`px-4 py-3`,lg:`px-5 py-3.5`,xl:`px-6 py-4`},bordered:{true:`border-b border-b-border`,false:``}},defaultVariants:{sticky:!0,size:`md`,bordered:!0}}),U=N(`truncate font-semibold text-text-positive`,{variants:{size:{xs:`text-xs`,sm:`text-xs`,md:`text-sm`,lg:`text-base`,xl:`text-lg`}},defaultVariants:{size:`md`}}),W=N(`text-text-positive-weak`,{variants:{size:{xs:`text-[10px]`,sm:`text-[11px]`,md:`text-xs`,lg:`text-sm`,xl:`text-sm`}},defaultVariants:{size:`md`}}),G=N(``,{variants:{size:{xs:`gap-2 px-2.5 py-1.5`,sm:`gap-2.5 px-3 py-2`,md:`gap-3 px-4 py-2.5`,lg:`gap-3 px-5 py-3`,xl:`gap-4 px-6 py-3.5`},bordered:{true:`border-b border-b-border`,false:``}},defaultVariants:{size:`md`,bordered:!0}}),K=`last:border-b-0 [&:not(:has(~:is([data-slot="description-item"],[data-slot="description-row"]):not([data-search-hidden])))]:border-b-0`,q=N(``,{variants:{orientation:{horizontal:``,vertical:`flex flex-col`},bordered:{true:`border-b border-b-border ${K}`,false:``},inRow:{true:``,false:``}},compoundVariants:[{inRow:!0,bordered:!0,className:`border-b-0`}],defaultVariants:{orientation:`horizontal`,bordered:!0,inRow:!1}}),J=N(`font-medium text-text-positive-weak`,{variants:{orientation:{horizontal:`h-full min-w-full tabular-nums`,vertical:``},size:{xs:`text-[11px]`,sm:`text-xs`,md:`text-sm`,lg:`text-sm`,xl:`text-base`},bordered:{true:`bg-secondary-muted`,false:``}},compoundVariants:[{orientation:`horizontal`,bordered:!0,className:`border-r border-r-border`},{orientation:`vertical`,bordered:!0,className:`border-b border-b-border`},{orientation:`horizontal`,size:`xs`,className:`py-1.5 pr-1.5 pl-2.5`},{orientation:`horizontal`,size:`sm`,className:`py-2 pr-2 pl-3`},{orientation:`horizontal`,size:`md`,className:`py-3 pr-2 pl-4`},{orientation:`horizontal`,size:`lg`,className:`py-3.5 pr-2.5 pl-5`},{orientation:`horizontal`,size:`xl`,className:`py-4 pr-3 pl-6`},{orientation:`vertical`,size:`xs`,className:`py-1 pr-1.5 pl-2.5`},{orientation:`vertical`,size:`sm`,className:`py-1.5 pr-2 pl-3`},{orientation:`vertical`,size:`md`,className:`py-2 pr-2 pl-4`},{orientation:`vertical`,size:`lg`,className:`py-2.5 pr-2.5 pl-5`},{orientation:`vertical`,size:`xl`,className:`py-3 pr-3 pl-6`},{bordered:!1,className:`pl-0`}],defaultVariants:{orientation:`horizontal`,size:`md`,bordered:!0}}),Y=N(`text-text-positive`,{variants:{size:{xs:`py-1.5 pr-1.5 pl-2.5 text-[11px]`,sm:`py-2 pr-2 pl-3 text-xs`,md:`py-3 pr-2 pl-4 text-sm`,lg:`py-3.5 pr-2.5 pl-5 text-sm`,xl:`py-4 pr-3 pl-6 text-base`}},defaultVariants:{size:`md`}}),de=N(``,{variants:{bordered:{true:`border-b border-b-border ${K}`,false:``}},defaultVariants:{bordered:!0}});function fe(e){return e.normalize(`NFD`).replace(/\p{Diacritic}/gu,``).toLowerCase().replace(/đ/g,`d`).trim()}function pe(e,t){return t.trim()===``||fe(e).includes(fe(t))}const me=({title:e,defaultOpen:t=!0,open:n,onOpenChange:r,collapsible:i=!0,className:a,children:o})=>{let s=O(L),{query:c}=O(z),[l,u]=j(t),[d,f]=j({}),p=k((e,t)=>{f(n=>{if(t===null){if(!(e in n))return n;let{[e]:t,...r}=n;return r}return n[e]===t?n:{...n,[e]:t}})},[]),_=A(()=>({report:p}),[p]),v=A(()=>Object.values(d).some(Boolean),[d]),y=pe(e,c),b=c.trim()!==``,x=b&&!y&&!v,S=n!==void 0,C=!S&&b&&v?!0:S?n:l,te=k(e=>{S||u(e),r?.(e)},[S,r]),w=x?{"data-search-hidden":`true`}:void 0,T=M(`group/section flex w-full items-center gap-3 text-left outline-none`,i&&`cursor-pointer transition-colors hover:bg-secondary-muted/60`,`focus-visible:ring-[3px] focus-visible:ring-border-weak`,G({size:s.size,bordered:s.bordered})),E=P(`p`,{className:`shrink-0 font-semibold text-text-positive-weak text-xs uppercase tracking-widest`,children:e}),D=P(`span`,{className:`h-px flex-1 bg-border`});return i?F(m,{open:C,onOpenChange:te,"data-slot":`description-collapsible-section`,...w,className:M(x&&`hidden`,a),children:[F(g,{"data-slot":`description-collapsible-section-trigger`,className:T,children:[P(ee,{size:14,className:`-rotate-90 shrink-0 text-text-positive-weak transition-transform duration-200 group-data-[state=open]/section:rotate-0`}),E,D]}),P(h,{"data-slot":`description-collapsible-section-content`,forceMount:!0,inert:!C,className:`fill-mode-forwards overflow-hidden data-[state=closed]:h-0 data-[state=open]:h-auto data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down`,children:P(B.Provider,{value:_,children:o})})]}):F(`div`,{"data-slot":`description-collapsible-section`,...w,className:M(x&&`hidden`,a),children:[F(`div`,{"data-slot":`description-collapsible-section-trigger`,className:T,children:[E,D]}),P(B.Provider,{value:_,children:o})]})},X=()=>P(`span`,{"data-slot":`description-empty`,"aria-label":`Empty value`,className:`select-none font-medium text-sm text-text-positive-muted`,children:`—`}),he=({label:e,color:t=`secondary`,variant:n=`soft`,size:r=`sm`})=>e?P(a,{"data-slot":`description-badge`,color:t,variant:n,size:r,children:e}):P(X,{}),ge=({value:e,trueLabel:t=`Yes`,falseLabel:n=`No`})=>e==null?P(X,{}):P(a,{"data-slot":`description-boolean`,variant:`soft`,color:e?`success`:`danger`,size:`sm`,children:e?t:n}),_e=({value:e,label:t})=>{if(!e?.trim())return P(X,{});let n=t??e.toUpperCase();return F(`span`,{"data-slot":`description-color`,className:`inline-flex items-center gap-2 text-sm text-text-positive`,children:[P(`span`,{"aria-label":n,style:{backgroundColor:e},className:`size-4 shrink-0 rounded-sm border border-border-weak ring-1 ring-black/5 ring-inset`}),P(`span`,{className:`font-mono text-xs tabular-nums`,children:n})]})};function Z(){let[e,t]=j(null),[,n]=ce(),r=e!==null,i=k(async e=>{if(!e)return!1;let r=await n(e);return r&&t(Date.now()),r},[n]);return ie(()=>{if(e===null)return;let n=setTimeout(()=>t(null),1500);return()=>clearTimeout(n)},[e]),{copied:r,copy:i}}const ve=({value:e,truncate:t=!0})=>{let{copied:n,copy:r}=Z();return e?F(`button`,{type:`button`,"data-slot":`description-copy`,"data-copied":n,title:n?`Đã sao chép`:`Sao chép`,onClick:()=>r(e),className:M(`group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-sm border border-border-weak bg-secondary-muted px-2 py-0.5 font-mono text-xs text-text-positive-weak transition-[border-color,color,box-shadow] hover:border-border hover:text-text-positive hover:shadow-xs`,t&&`min-w-0`),children:[P(`span`,{className:M(`tabular-nums`,t&&`truncate`),children:e}),n?P(y,{"data-slot":`description-copy-icon`,size:12,className:`shrink-0 text-success`}):P(b,{"data-slot":`description-copy-icon`,size:12,className:`shrink-0 opacity-50 group-hover:opacity-100`})]}):P(X,{})},ye=[`[data-slot="description-header"]`,`[data-slot="description-section"]`,`[data-slot="description-collapsible-section-trigger"]`,`[data-slot="description-item"]`].join(`,`);function Q(e){return e?.textContent?.replace(/\s+/g,` `).trim()??``}function be(e,t){let n=e.closest(`[data-slot="description"][data-surface="nested"]`);return n===null||n===t||!t.contains(n)}function xe(e){let t=[];for(let n of e.querySelectorAll(ye)){if(!be(n,e)||n.closest(`[data-search-hidden]`))continue;if(n.matches(`[data-slot="description-header"]`)){let e=Q(n.querySelector(`p`));e&&t.push(t.length?`\n${e}`:e,``);continue}if(n.matches(`[data-slot="description-section"],[data-slot="description-collapsible-section-trigger"]`)){let e=Q(n.querySelector(`p`));e&&t.push(t.length?`\n[${e}]`:`[${e}]`);continue}let r=Q(n.querySelector(`[data-slot="description-item-label-text"]`)??n.querySelector(`[data-slot="description-item-label"]`)),i=Q(n.querySelector(`[data-slot="description-item-value"]`));r&&t.push(`${r}: ${i}`)}return t.join(`
+`)}const Se=({label:e=`Sao chép toàn bộ`,className:t})=>{let n=oe(null),{copied:r,copy:i}=Z(),a=k(async()=>{let e=n.current?.closest(`[data-slot="description"],[data-slot="description-group"]`);if(!(e instanceof HTMLElement))return;let t=xe(e);t&&await i(t)},[i]);return P(`button`,{ref:n,type:`button`,"data-slot":`description-copy-all`,"data-copied":r,title:r?`Đã sao chép`:e,"aria-label":e,onClick:a,className:M(`cursor-pointer rounded-sm border border-border-weak bg-card p-1 text-text-positive-weak transition-[border-color,color,box-shadow] hover:border-border hover:text-text-positive hover:shadow-xs`,t),children:r?P(y,{size:14,className:`text-success`}):P(b,{size:14})})},Ce=({date:e})=>e==null?P(X,{}):F(s,{children:[P(l,{asChild:!0,children:P(`span`,{"data-slot":`description-date`,className:`cursor-help`,children:P(i,{date:e,format:`medium`})})}),P(c,{children:P(i,{date:e,format:`full`,showTime:!0,className:`text-xs font-medium`})})]}),we=({name:e,url:t,size:n})=>{if(!e)return P(X,{});let r=typeof n==`number`?se(n):null;return t?F(`a`,{"data-slot":`description-file`,href:t,download:e,target:`_blank`,rel:`noopener noreferrer`,className:`inline-flex max-w-full items-center gap-1.5 text-primary text-sm underline decoration-dashed underline-offset-2 transition-colors hover:text-primary-strong hover:decoration-solid`,children:[P(x,{size:12,className:`shrink-0 opacity-70`}),P(`span`,{className:`truncate`,children:e}),r&&P(`span`,{className:`shrink-0 text-text-positive-muted text-xs no-underline`,children:r})]}):F(`span`,{"data-slot":`description-file`,className:`inline-flex max-w-full items-center gap-1.5 text-sm text-text-positive`,children:[P(C,{size:12,className:`shrink-0 opacity-70`}),P(`span`,{className:`truncate`,children:e}),r&&P(`span`,{className:`shrink-0 text-text-positive-muted text-xs`,children:r})]})},Te=({images:e})=>{if(!e?.length)return P(X,{});let t=e.length===1;return P(`div`,{"data-slot":`description-images`,className:`flex flex-wrap gap-4`,children:e.map(e=>P(`div`,{className:t?`group relative size-42 overflow-hidden rounded border border-border shadow-xs transition-shadow hover:shadow-card`:`group relative size-20 overflow-hidden rounded border border-border shadow-xs transition-shadow hover:shadow-card`,children:P(n,{src:e.src,alt:e.alt,width:`100%`,height:`100%`,className:`transition-transform duration-200 group-hover:scale-105`})},e.id))})},Ee=({value:e,maxHeight:t=240,indent:n=2,copyable:r=!0})=>{let i=A(()=>{if(e==null)return null;try{return JSON.stringify(e,null,n)}catch{return null}},[e,n]),{copied:a,copy:o}=Z();return i==null?P(X,{}):F(`div`,{"data-slot":`description-json`,className:`relative w-full min-w-0`,children:[r&&P(`button`,{type:`button`,"data-slot":`description-json-copy`,"data-copied":a,title:a?`Đã sao chép`:`Sao chép`,onClick:()=>o(i),className:M(`absolute top-1.5 right-1.5 cursor-pointer rounded-sm border border-border-weak bg-card p-1 text-text-positive-weak transition-[border-color,color,box-shadow] hover:border-border hover:text-text-positive hover:shadow-xs`),children:a?P(y,{size:12,className:`text-success`}):P(b,{size:12})}),P(`pre`,{style:{maxHeight:t},className:`overflow-auto rounded-sm border border-border-weak bg-secondary-muted px-2 py-1.5 pr-8 font-mono text-text-positive-weak text-xs leading-relaxed`,children:P(`code`,{"data-slot":`description-json-code`,children:i})})]})},De=({href:e,label:t,external:n=!0,className:r})=>e?F(`a`,{"data-slot":`description-link`,href:e,target:n?`_blank`:void 0,rel:n?`noopener noreferrer`:void 0,className:M(`inline-flex max-w-full items-center gap-1 text-sm text-primary underline decoration-dashed underline-offset-2 transition-colors hover:text-primary-strong hover:decoration-solid`,r),children:[!n&&P(te,{size:12,className:`shrink-0 opacity-70`}),P(`span`,{className:`truncate`,children:t??e}),n&&P(S,{size:12,className:`shrink-0 opacity-70`})]}):P(X,{}),Oe=({content:t})=>t==null?P(X,{}):F(s,{children:[P(l,{asChild:!0,children:P(e,{"data-slot":`description-longtext`,variant:`sm`,className:`line-clamp-2 cursor-pointer whitespace-pre-line break-all text-start text-sm hover:text-text-positive transition-colors`,children:t})}),P(c,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:F(`div`,{className:`flex flex-col gap-y-2`,children:[P(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:t}),F(`p`,{className:`w-full text-end text-text-positive-subtle`,children:[t.toString().length,` chars`]})]})})]}),ke=({name:t})=>t?F(s,{children:[P(l,{asChild:!0,children:P(e,{"data-slot":`description-name`,variant:`sm`,className:`line-clamp-2 w-full cursor-pointer truncate hover:text-text-positive transition-colors`,children:t})}),P(c,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:F(`div`,{className:`flex flex-col gap-y-2`,children:[P(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:t}),F(`p`,{className:`w-full text-end text-text-positive-subtle`,children:[t.length,` chars`]})]})})]}):P(X,{}),Ae=({value:t})=>{let n=u(t);return n?F(s,{children:[P(l,{asChild:!0,children:P(e,{"data-slot":`description-phone`,variant:`sm`,className:`cursor-help tabular-nums transition-colors`,children:n.national})}),P(c,{align:`start`,children:P(`p`,{className:`tabular-nums`,children:n.international})})]}):P(X,{})},je={primary:`[&_[data-slot=progress-indicator]]:bg-primary`,success:`[&_[data-slot=progress-indicator]]:bg-success`,warning:`[&_[data-slot=progress-indicator]]:bg-warning`,danger:`[&_[data-slot=progress-indicator]]:bg-danger`},Me={xs:`h-1`,sm:`h-1.5`,md:`h-2`},Ne=({value:e,max:t=100,showValue:n=!0,size:i=`sm`,color:a=`primary`})=>{if(e==null||Number.isNaN(e))return P(X,{});let o=Math.min(100,Math.max(0,e/t*100));return F(r,{"data-slot":`description-progress`,width:`full`,padding:`none`,gap:`sm`,wrap:!1,align:`center`,children:[P(_,{value:o,className:M(`min-w-24 flex-1`,Me[i],je[a])}),n&&F(`span`,{"data-slot":`description-progress-value`,className:`shrink-0 font-number text-text-positive-weak text-xs tabular-nums`,children:[Math.round(o),`%`]})]})},Pe=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},Fe=N(`inline-flex items-center gap-1 font-number tabular-nums transition-colors`,{variants:{size:{xs:`text-xs`,sm:`text-sm`,md:`text-base`,lg:`text-lg`,xl:`text-xl`},trend:{neutral:`text-text-positive`,up:`text-success`,down:`text-danger`}},defaultVariants:{size:`sm`,trend:`neutral`}}),Ie=re(({decimalSeparator:e=`.`,groupSeparator:t=`,`,prefix:n,suffix:r,precision:i,roundingMode:a=`round`,showTrailingZeros:o=!1,size:s=`sm`,trend:c=`neutral`,value:l=0,className:u,emptyOnZero:d=!0})=>{let f=A(()=>{let e={};return typeof i==`number`&&i>=0&&(o&&(e.minimumFractionDigits=i),e.maximumFractionDigits=i),e},[i,o]),p=k(e=>{let t=e;return typeof i==`number`&&i>=0&&(t=Pe(e,i,a)),t.toLocaleString(`vi-VN`,f)},[a,f,i]),m=A(()=>{if(typeof l==`number`)return Number.isNaN(l)||!Number.isFinite(l)?`N/A`:p(l);if(typeof l==`string`){let e=l.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:p(t)}return`N/A`},[l,p]),h=A(()=>e===`.`&&t===`,`?m:m.replace(/,/g,t).replace(/\./g,e),[m,e,t]);return d&&h===`0`||h===`N/A`||!h?P(X,{}):F(`div`,{"data-slot":`description-statistic`,className:M(Fe({size:s,trend:c}),u),children:[!!n&&P(`span`,{"data-slot":`description-statistic-prefix`,children:n}),P(`p`,{"data-slot":`description-statistic-value`,children:h}),!!r&&P(`span`,{"data-slot":`description-statistic-suffix`,children:r})]})});Ie.displayName=`DescriptionStatistic`;const Le=({label:e,color:t=`info`,dot:n=!0})=>e?F(a,{"data-slot":`description-status`,variant:`soft`,color:t,size:`sm`,className:`gap-1.5`,children:[n&&P(`span`,{className:o({color:t})}),e]}):P(X,{}),Re=({tags:e,max:t=5,color:n=`secondary`,variant:r=`soft`})=>{if(!e?.length)return P(X,{});let i=Array.from(new Map(e.map(e=>[String(e),e])).values()),o=i.slice(0,t),s=i.length-o.length;return F(`div`,{"data-slot":`description-tag-list`,className:`flex flex-wrap gap-1`,children:[o.map(e=>P(a,{variant:r,color:n,size:`sm`,children:e},String(e))),s>0&&F(a,{variant:`outline`,color:`muted`,size:`sm`,children:[`+`,s]})]})},ze=({value:t,weight:n=`normal`,truncate:r=!1,className:i})=>t==null||t===``?P(X,{}):P(e,{"data-slot":`description-text`,variant:`sm`,className:M(n===`medium`&&`font-medium`,r&&`truncate`,i),children:t}),Be=({uuid:e,username:t,email:n})=>!e&&!t?P(X,{}):P(d,{uuid:e??``,username:t??``,email:n??``}),Ve={1:12,2:6,3:4,4:3,6:2};function He(e){return typeof e==`number`?{base:12,md:Ve[e]}:Object.fromEntries(Object.entries({base:1,...e}).map(([e,t])=>[e,Ve[t]]))}const Ue=({columns:e=2,labelColSpan:t,divided:n=!1,className:r,children:i})=>{let a=O(L),o=A(()=>He(e),[e]),s=A(()=>t?{...a,labelColSpan:t}:a,[a,t]),c=E.toArray(i).filter(ne);return P(L.Provider,{value:s,children:P(R.Provider,{value:!0,children:P(`div`,{"data-slot":`description-row`,"data-columns":typeof e==`number`?e:`responsive`,className:M(de({bordered:a.bordered}),r),children:P(f,{cols:12,gap:`none`,children:c.map((e,t)=>P(p,{span:o,suspense:!1,"data-slot":`description-row-cell`,className:M(`min-w-0`,n&&t<c.length-1&&`border-r border-r-border`),children:e},e.key??t))})})})})},We=({placeholder:e=`Tìm kiếm...`,autoFocus:t,className:n})=>{let{query:r,setQuery:i}=O(z),{size:a}=O(L),o=a===`xs`||a===`sm`?`xs`:`sm`;return F(`div`,{"data-slot":`description-search`,className:M(`relative w-full max-w-56`,n),children:[P(w,{size:14,className:`-translate-y-1/2 pointer-events-none absolute top-1/2 left-2 text-text-positive-muted`}),P(v,{size:o,value:r,autoFocus:t,placeholder:e,onValueChange:i,"aria-label":e,className:`pl-7`}),r!==``&&P(`button`,{type:`button`,"data-slot":`description-search-clear`,"aria-label":`Xoá tìm kiếm`,onClick:()=>i(``),className:`-translate-y-1/2 absolute top-1/2 right-1.5 cursor-pointer text-text-positive-muted transition-colors hover:text-text-positive`,children:P(T,{size:14})})]})},Ge={base:5,sm:4,md:3};function $(e){return typeof e==`number`?e:{base:5,...e}}function Ke(e){return typeof e==`number`?12-e:Object.fromEntries(Object.entries(e).map(([e,t])=>[e,12-t]))}function qe(){let[e,t]=j(!1),n=oe(()=>{});return[k(e=>{if(n.current(),!e){n.current=()=>{};return}let r=()=>t(e.scrollWidth>e.clientWidth);r();let i=new ResizeObserver(r);i.observe(e),document.fonts?.ready.then(r),n.current=()=>i.disconnect()},[]),e]}const Je=({label:e})=>{let[t,n]=qe(),r=P(`span`,{ref:t,"data-slot":`description-item-label-text`,className:`min-w-0 flex-1 cursor-default truncate`,children:e});return n?F(s,{children:[P(l,{asChild:!0,children:r}),P(c,{align:`start`,children:e})]}):r},Ye=({label:e,labelColSpan:t,orientation:n=`horizontal`,action:i,labelAlign:a=`start`,children:o})=>{let s=O(L),c=O(R),{query:l}=O(z),u=O(B),d=pe(e,l),m=ae();ie(()=>{if(u)return u.report(m,d),()=>u.report(m,null)},[u,m,d]);let h=d?void 0:{"data-search-hidden":`true`};if(n===`vertical`)return F(`div`,{"data-slot":`description-item`,"data-orientation":`vertical`,...h,className:M(q({orientation:`vertical`,bordered:s.bordered,inRow:c}),!d&&`hidden`),children:[F(r,{"data-slot":`description-item-label`,width:`full`,padding:`none`,gap:`none`,wrap:!1,align:`center`,justify:a===`end`?`end`:`between`,className:J({orientation:`vertical`,size:s.size,bordered:s.bordered}),children:[P(Je,{label:e}),!!i&&P(`div`,{"data-slot":`description-item-action`,className:`shrink-0`,children:i})]}),P(r,{"data-slot":`description-item-value`,width:`full`,padding:`none`,wrap:!0,align:`center`,gap:`sm`,className:Y({size:s.size}),children:o})]});let g=$(t??s.labelColSpan??Ge),_=Ke(g);return P(`div`,{"data-slot":`description-item`,"data-orientation":`horizontal`,...h,className:M(q({orientation:`horizontal`,bordered:s.bordered,inRow:c}),!d&&`hidden`),children:F(f,{cols:12,gap:`none`,children:[P(p,{span:g,suspense:!1,className:`min-w-0`,children:F(r,{"data-slot":`description-item-label`,width:`full`,padding:`none`,gap:`none`,wrap:!1,align:`center`,justify:a===`end`?`end`:`between`,className:J({orientation:`horizontal`,size:s.size,bordered:s.bordered}),children:[P(Je,{label:e}),!!i&&P(`div`,{"data-slot":`description-item-action`,className:`shrink-0 pr-1`,children:i})]})}),P(p,{span:_,suspense:!1,className:`min-w-0`,children:P(r,{"data-slot":`description-item-value`,width:`full`,padding:`none`,wrap:!0,align:`center`,gap:`sm`,className:Y({size:s.size}),children:o})})]})})},Xe=({title:e,description:t,extra:n,sticky:i=!0,className:a})=>{let o=O(L);return F(r,{"data-slot":`description-header`,width:`full`,padding:`none`,gap:`md`,wrap:!1,justify:`between`,align:`center`,className:M(H({sticky:i,size:o.size,bordered:o.bordered}),a),children:[F(r,{vertical:!0,width:`full`,padding:`none`,gap:`none`,align:`start`,className:`min-w-0 gap-0.5`,children:[P(`p`,{className:U({size:o.size}),children:e}),!!t&&P(`p`,{className:W({size:o.size}),children:t})]}),!!n&&P(`div`,{"data-slot":`description-header-extra`,className:`shrink-0`,children:n})]})},Ze=({title:e,className:t})=>{let n=O(L);return F(r,{"data-slot":`description-section`,width:`full`,padding:`none`,gap:`none`,wrap:!1,align:`center`,className:M(G({size:n.size,bordered:n.bordered}),t),children:[!!e&&P(`p`,{className:`shrink-0 font-semibold text-text-positive-weak text-xs uppercase tracking-widest`,children:e}),P(`div`,{className:`h-px flex-1 bg-border`})]})},Qe=Array.from({length:24},(e,t)=>`description-loading-row-${t}`),$e=({rows:e})=>{let n=O(L),i=$(n.labelColSpan??Ge),a=Ke(i);return F(`div`,{"data-slot":`description-loading`,children:[F(r,{"data-slot":`description-loading-header`,width:`full`,padding:`none`,gap:`md`,wrap:!1,justify:`between`,align:`center`,className:H({sticky:!1,size:n.size,bordered:n.bordered}),children:[F(r,{vertical:!0,padding:`none`,gap:`none`,align:`start`,className:`gap-1.5`,children:[P(t,{className:`h-3.5 w-36`}),P(t,{className:`h-2.5 w-24`})]}),P(t,{className:`h-5 w-16`})]}),Qe.slice(0,e).map(e=>P(`div`,{"data-slot":`description-loading-row`,className:q({orientation:`horizontal`,bordered:n.bordered}),children:F(f,{cols:12,gap:`none`,children:[P(p,{span:i,suspense:!1,className:`min-w-0`,children:P(r,{width:`full`,padding:`none`,gap:`none`,wrap:!1,align:`center`,className:J({orientation:`horizontal`,size:n.size,bordered:n.bordered}),children:P(t,{className:`h-3 w-20`})})}),P(p,{span:a,suspense:!1,className:`min-w-0`,children:P(r,{width:`full`,padding:`none`,wrap:!0,align:`center`,gap:`sm`,className:Y({size:n.size}),children:P(t,{className:`h-3 w-28`})})})]})},e))]})},et=({children:e,className:t,nested:n=!1,loading:r=!1,loadingRows:i=4,labelColSpan:a,size:o,bordered:s})=>{let c=O(I),l=O(L),[u,d]=j(``),f=A(()=>({labelColSpan:a??l.labelColSpan,size:o??l.size,bordered:s??l.bordered}),[a,o,s,l]),p=A(()=>({query:u,setQuery:d}),[u]),m=c?`grouped`:n?`nested`:`card`;return P(L.Provider,{value:f,children:P(z.Provider,{value:p,children:P(`div`,{"data-slot":`description`,"data-surface":m,className:M(ue({surface:m,bordered:f.bordered}),t),children:r?P($e,{rows:i}):e})})})},tt=({children:e,className:t,size:n,bordered:r})=>{let i=O(L),a=A(()=>({labelColSpan:i.labelColSpan,size:n??i.size,bordered:r??i.bordered}),[n,r,i]);return P(I.Provider,{value:!0,children:P(L.Provider,{value:a,children:P(`div`,{"data-slot":`description-group`,className:M(V({bordered:a.bordered}),t),children:e})})})};export{V as A,le as B,ve as C,X as D,he as E,Y as F,B as G,I as H,q as I,de as L,U as M,H as N,me as O,J as P,G as R,Se as S,ge as T,R as U,L as V,z as W,De as _,Ze as a,we as b,Be as c,Le as d,Ie as f,Oe as g,ke as h,Ye as i,W as j,K as k,ze as l,Ae as m,tt as n,We as o,Ne as p,Xe as r,Ue as s,et as t,Re as u,Ee as v,_e as w,Ce as x,Te as y,ue as z};
+//# sourceMappingURL=descriptions-Bw9GSCjo.mjs.map