@customafk/lunas-ui 0.2.74 → 0.2.76

package/dist/{context-menu-BOlGSuep.d.cts → context-menu-z_-DdL8k.d.cts}

@@ -1,5 +1,4 @@
 import { ContextMenu } from "radix-ui";
-
 //#region packages/components/ui/context-menu.d.ts
 /**
  * Root provider for the ContextMenu — revealed on right-click (or long-press) of the trigger area.
@@ -22,102 +21,55 @@ import { ContextMenu } from "radix-ui";
  * </ContextMenu>
  * ```
  */
-declare function ContextMenu$1({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Root>): import("react").JSX.Element;
+declare function ContextMenu$1({ ...props }: React.ComponentProps<typeof ContextMenu.Root>): import("react").JSX.Element;
 /** The area that listens for right-click to open the ContextMenu. */
-declare function ContextMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Trigger>): import("react").JSX.Element;
+declare function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenu.Trigger>): import("react").JSX.Element;
 /** Groups related ContextMenuItems under a shared logical section. */
-declare function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Group>): import("react").JSX.Element;
+declare function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenu.Group>): import("react").JSX.Element;
 /** Portals ContextMenu content outside the current DOM hierarchy. */
-declare function ContextMenuPortal({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Portal>): import("react").JSX.Element;
+declare function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenu.Portal>): import("react").JSX.Element;
 /** Root container for a nested sub-menu inside a ContextMenu. */
-declare function ContextMenuSub({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Sub>): import("react").JSX.Element;
+declare function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenu.Sub>): import("react").JSX.Element;
 /** Groups ContextMenuRadioItems so only one can be selected at a time. */
-declare function ContextMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.RadioGroup>): import("react").JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenu.RadioGroup>): import("react").JSX.Element;
 /**
  * Menu item that reveals a nested ContextMenuSubContent on hover or activation.
  *
  * @param inset - When true, adds left padding to align with inset items.
  */
-declare function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.SubTrigger> & {
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenu.SubTrigger> & {
   inset?: boolean;
 }): import("react").JSX.Element;
 /** Floating panel that contains the items of a nested ContextMenu sub-menu. */
-declare function ContextMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.SubContent>): import("react").JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenu.SubContent>): import("react").JSX.Element;
 /** Animated floating panel that contains the context menu items. */
-declare function ContextMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Content>): import("react").JSX.Element;
+declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenu.Content>): import("react").JSX.Element;
 /**
  * A single clickable row inside a ContextMenuContent.
  *
  * @param inset - When true, adds left padding to align with items that have icons.
  * @param variant - Visual style: `'default'` or `'destructive'`.
  */
-declare function ContextMenuItem({
-  className,
-  inset,
-  variant,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Item> & {
+declare function ContextMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof ContextMenu.Item> & {
   inset?: boolean;
   variant?: 'default' | 'destructive';
 }): import("react").JSX.Element;
 /** A checkable context menu item that displays a checkmark when selected. */
-declare function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.CheckboxItem>): import("react").JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenu.CheckboxItem>): import("react").JSX.Element;
 /** A radio-button context menu item; shows a filled circle when selected. */
-declare function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.RadioItem>): import("react").JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenu.RadioItem>): import("react").JSX.Element;
 /**
  * Non-interactive label used to describe a group of context menu items.
  *
  * @param inset - When true, adds left padding to align with inset items.
  */
-declare function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Label> & {
+declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenu.Label> & {
   inset?: boolean;
 }): import("react").JSX.Element;
 /** Horizontal dividing line between groups of context menu items. */
-declare function ContextMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Separator>): import("react").JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenu.Separator>): import("react").JSX.Element;
 /** Displays a keyboard shortcut hint aligned to the right of a context menu item. */
-declare function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<'span'>): import("react").JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react").JSX.Element;
 //#endregion
 export { ContextMenuItem as a, ContextMenuRadioGroup as c, ContextMenuShortcut as d, ContextMenuSub as f, ContextMenuTrigger as h, ContextMenuGroup as i, ContextMenuRadioItem as l, ContextMenuSubTrigger as m, ContextMenuCheckboxItem as n, ContextMenuLabel as o, ContextMenuSubContent as p, ContextMenuContent as r, ContextMenuPortal as s, ContextMenu$1 as t, ContextMenuSeparator as u };
-//# sourceMappingURL=context-menu-BOlGSuep.d.cts.map
+//# sourceMappingURL=context-menu-z_-DdL8k.d.cts.map

package/dist/{context-menu-BOlGSuep.d.mts → context-menu-z_-DdL8k.d.mts}

@@ -1,5 +1,4 @@
 import { ContextMenu } from "radix-ui";
-
 //#region packages/components/ui/context-menu.d.ts
 /**
  * Root provider for the ContextMenu — revealed on right-click (or long-press) of the trigger area.
@@ -22,102 +21,55 @@ import { ContextMenu } from "radix-ui";
  * </ContextMenu>
  * ```
  */
-declare function ContextMenu$1({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Root>): import("react").JSX.Element;
+declare function ContextMenu$1({ ...props }: React.ComponentProps<typeof ContextMenu.Root>): import("react").JSX.Element;
 /** The area that listens for right-click to open the ContextMenu. */
-declare function ContextMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Trigger>): import("react").JSX.Element;
+declare function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenu.Trigger>): import("react").JSX.Element;
 /** Groups related ContextMenuItems under a shared logical section. */
-declare function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Group>): import("react").JSX.Element;
+declare function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenu.Group>): import("react").JSX.Element;
 /** Portals ContextMenu content outside the current DOM hierarchy. */
-declare function ContextMenuPortal({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Portal>): import("react").JSX.Element;
+declare function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenu.Portal>): import("react").JSX.Element;
 /** Root container for a nested sub-menu inside a ContextMenu. */
-declare function ContextMenuSub({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Sub>): import("react").JSX.Element;
+declare function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenu.Sub>): import("react").JSX.Element;
 /** Groups ContextMenuRadioItems so only one can be selected at a time. */
-declare function ContextMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenu.RadioGroup>): import("react").JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenu.RadioGroup>): import("react").JSX.Element;
 /**
  * Menu item that reveals a nested ContextMenuSubContent on hover or activation.
  *
  * @param inset - When true, adds left padding to align with inset items.
  */
-declare function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.SubTrigger> & {
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenu.SubTrigger> & {
   inset?: boolean;
 }): import("react").JSX.Element;
 /** Floating panel that contains the items of a nested ContextMenu sub-menu. */
-declare function ContextMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.SubContent>): import("react").JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenu.SubContent>): import("react").JSX.Element;
 /** Animated floating panel that contains the context menu items. */
-declare function ContextMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Content>): import("react").JSX.Element;
+declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenu.Content>): import("react").JSX.Element;
 /**
  * A single clickable row inside a ContextMenuContent.
  *
  * @param inset - When true, adds left padding to align with items that have icons.
  * @param variant - Visual style: `'default'` or `'destructive'`.
  */
-declare function ContextMenuItem({
-  className,
-  inset,
-  variant,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Item> & {
+declare function ContextMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof ContextMenu.Item> & {
   inset?: boolean;
   variant?: 'default' | 'destructive';
 }): import("react").JSX.Element;
 /** A checkable context menu item that displays a checkmark when selected. */
-declare function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.CheckboxItem>): import("react").JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenu.CheckboxItem>): import("react").JSX.Element;
 /** A radio-button context menu item; shows a filled circle when selected. */
-declare function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.RadioItem>): import("react").JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenu.RadioItem>): import("react").JSX.Element;
 /**
  * Non-interactive label used to describe a group of context menu items.
  *
  * @param inset - When true, adds left padding to align with inset items.
  */
-declare function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Label> & {
+declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenu.Label> & {
   inset?: boolean;
 }): import("react").JSX.Element;
 /** Horizontal dividing line between groups of context menu items. */
-declare function ContextMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenu.Separator>): import("react").JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenu.Separator>): import("react").JSX.Element;
 /** Displays a keyboard shortcut hint aligned to the right of a context menu item. */
-declare function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<'span'>): import("react").JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react").JSX.Element;
 //#endregion
 export { ContextMenuItem as a, ContextMenuRadioGroup as c, ContextMenuShortcut as d, ContextMenuSub as f, ContextMenuTrigger as h, ContextMenuGroup as i, ContextMenuRadioItem as l, ContextMenuSubTrigger as m, ContextMenuCheckboxItem as n, ContextMenuLabel as o, ContextMenuSubContent as p, ContextMenuContent as r, ContextMenuPortal as s, ContextMenu$1 as t, ContextMenuSeparator as u };
-//# sourceMappingURL=context-menu-BOlGSuep.d.mts.map
+//# sourceMappingURL=context-menu-z_-DdL8k.d.mts.map

package/dist/conversion-funnel-chart-CW_zDfKS.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversion-funnel-chart-CW_zDfKS.mjs","names":[],"sources":["../packages/components/features/charts/components/conversion-funnel-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Funnel, FunnelChart, LabelList } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, formatPercent, getChartColor } from '../utils';\n\nexport type FunnelStage = NamedValue & {\n  /** Config key; derived from `name` when omitted. */\n  key?: string;\n  color?: string;\n};\n\nexport type ConversionFunnelChartProps = BaseChartProps & {\n  /** Funnel stages ordered top (widest) to bottom. */\n  data: FunnelStage[];\n  /** Appends each stage's percentage of the first stage. Defaults to `true`. */\n  showConversionRates?: boolean;\n  valueFormatter?: (value: number) => string;\n};\n\n/**\n * A conversion funnel for the ecommerce purchase journey — sessions, product views, carts,\n * checkouts, purchases — with per-stage conversion rates against the first stage.\n *\n * @example\n * ```tsx\n * import { ConversionFunnelChart } from '@customafk/lunas-ui/features/charts';\n *\n * <ConversionFunnelChart\n *   data={[\n *     { name: 'Sessions', value: 50000 },\n *     { name: 'Product views', value: 32000 },\n *     { name: 'Added to cart', value: 8400 },\n *     { name: 'Purchased', value: 2900 },\n *   ]}\n * />\n * ```\n */\nexport const ConversionFunnelChart = ({\n  data,\n  showConversionRates = true,\n  valueFormatter = formatCompactNumber,\n  className,\n  animate = true,\n  height,\n}: ConversionFunnelChartProps) => {\n  const { chartData, config } = useMemo(() => {\n    const first = data[0]?.value ?? 0;\n    const entries = data.map((stage, index) => {\n      const rate = first === 0 ? 0 : stage.value / first;\n      const valueLabel = showConversionRates ? `${valueFormatter(stage.value)} (${formatPercent(rate)})` : valueFormatter(stage.value);\n      return {\n        ...stage,\n        key: stage.key || stage.name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),\n        fill: stage.color || getChartColor(index),\n        valueLabel,\n      };\n    });\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return { chartData: entries, config: chartConfig };\n  }, [data, showConversionRates, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"conversion-funnel-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <FunnelChart margin={{ top: 8, right: 120, bottom: 8, left: 120 }}>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n        <Funnel dataKey=\"value\" data={chartData} isAnimationActive={animate}>\n          <LabelList dataKey=\"name\" position=\"left\" offset={12} className=\"fill-muted-strong\" fontSize={12} />\n          <LabelList dataKey=\"valueLabel\" position=\"right\" offset={12} className=\"fill-text-positive-strong font-number\" fontSize={12} />\n        </Funnel>\n      </FunnelChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"2YA4CA,MAAa,GAAyB,CACpC,OACA,sBAAsB,GACtB,iBAAiB,EACjB,YACA,UAAU,GACV,YACgC,CAChC,GAAM,CAAE,YAAW,UAAW,MAAc,CAC1C,IAAM,EAAQ,EAAK,EAAE,EAAE,OAAS,EAC1B,EAAU,EAAK,KAAK,EAAO,IAAU,CACzC,IAAM,EAAO,IAAU,EAAI,EAAI,EAAM,MAAQ,EACvC,EAAa,EAAsB,GAAG,EAAe,EAAM,KAAK,EAAE,IAAI,EAAc,CAAI,EAAE,GAAK,EAAe,EAAM,KAAK,EAC/H,MAAO,CACL,GAAG,EACH,IAAK,EAAM,KAAO,EAAM,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EACrE,KAAM,EAAM,OAAS,EAAc,CAAK,EACxC,YACF,CACF,CAAC,EAED,MAAO,CAAE,UAAW,EAAS,OADI,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAC/E,CAAE,CACnD,EAAG,CAAC,EAAM,EAAqB,CAAc,CAAC,EAE9C,OACE,EAAC,EAAD,CACE,YAAU,0BACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAa,OAAQ,CAAE,IAAK,EAAG,MAAO,IAAK,OAAQ,EAAG,KAAM,GAAI,WAAhE,CACE,EAAC,EAAD,CAAc,QAAS,EAAC,EAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,EACzE,EAAC,EAAD,CAAQ,QAAQ,QAAQ,KAAM,EAAW,kBAAmB,WAA5D,CACE,EAAC,EAAD,CAAW,QAAQ,OAAO,SAAS,OAAO,OAAQ,GAAI,UAAU,oBAAoB,SAAU,EAAK,CAAA,EACnG,EAAC,EAAD,CAAW,QAAQ,aAAa,SAAS,QAAQ,OAAQ,GAAI,UAAU,wCAAwC,SAAU,EAAK,CAAA,CACxH,GACG,GACC,CAAA,CAEpB"}
+{"version":3,"file":"conversion-funnel-chart-CW_zDfKS.mjs","names":[],"sources":["../packages/components/features/charts/components/conversion-funnel-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Funnel, FunnelChart, LabelList } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, formatPercent, getChartColor } from '../utils';\n\nexport type FunnelStage = NamedValue & {\n  /** Config key; derived from `name` when omitted. */\n  key?: string;\n  color?: string;\n};\n\nexport type ConversionFunnelChartProps = BaseChartProps & {\n  /** Funnel stages ordered top (widest) to bottom. */\n  data: FunnelStage[];\n  /** Appends each stage's percentage of the first stage. Defaults to `true`. */\n  showConversionRates?: boolean;\n  valueFormatter?: (value: number) => string;\n};\n\n/**\n * A conversion funnel for the ecommerce purchase journey — sessions, product views, carts,\n * checkouts, purchases — with per-stage conversion rates against the first stage.\n *\n * @example\n * ```tsx\n * import { ConversionFunnelChart } from '@customafk/lunas-ui/features/charts';\n *\n * <ConversionFunnelChart\n *   data={[\n *     { name: 'Sessions', value: 50000 },\n *     { name: 'Product views', value: 32000 },\n *     { name: 'Added to cart', value: 8400 },\n *     { name: 'Purchased', value: 2900 },\n *   ]}\n * />\n * ```\n */\nexport const ConversionFunnelChart = ({\n  data,\n  showConversionRates = true,\n  valueFormatter = formatCompactNumber,\n  className,\n  animate = true,\n  height,\n}: ConversionFunnelChartProps) => {\n  const { chartData, config } = useMemo(() => {\n    const first = data[0]?.value ?? 0;\n    const entries = data.map((stage, index) => {\n      const rate = first === 0 ? 0 : stage.value / first;\n      const valueLabel = showConversionRates ? `${valueFormatter(stage.value)} (${formatPercent(rate)})` : valueFormatter(stage.value);\n      return {\n        ...stage,\n        key: stage.key || stage.name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),\n        fill: stage.color || getChartColor(index),\n        valueLabel,\n      };\n    });\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return { chartData: entries, config: chartConfig };\n  }, [data, showConversionRates, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"conversion-funnel-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <FunnelChart margin={{ top: 8, right: 120, bottom: 8, left: 120 }}>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n        <Funnel dataKey=\"value\" data={chartData} isAnimationActive={animate}>\n          <LabelList dataKey=\"name\" position=\"left\" offset={12} className=\"fill-muted-strong\" fontSize={12} />\n          <LabelList dataKey=\"valueLabel\" position=\"right\" offset={12} className=\"fill-text-positive-strong font-number\" fontSize={12} />\n        </Funnel>\n      </FunnelChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"2YA4CA,MAAa,GAAyB,CACpC,OACA,sBAAsB,GACtB,iBAAiB,EACjB,YACA,UAAU,GACV,YACgC,CAChC,GAAM,CAAE,YAAW,UAAW,MAAc,CAC1C,IAAM,EAAQ,EAAK,EAAE,EAAE,OAAS,EAC1B,EAAU,EAAK,KAAK,EAAO,IAAU,CACzC,IAAM,EAAO,IAAU,EAAI,EAAI,EAAM,MAAQ,EACvC,EAAa,EAAsB,GAAG,EAAe,EAAM,KAAK,EAAE,IAAI,EAAc,CAAI,EAAE,GAAK,EAAe,EAAM,KAAK,EAC/H,MAAO,CACL,GAAG,EACH,IAAK,EAAM,KAAO,EAAM,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EACrE,KAAM,EAAM,OAAS,EAAc,CAAK,EACxC,YACF,CACF,CAAC,EAED,MAAO,CAAE,UAAW,EAAS,OADI,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAC/E,CAAE,CACnD,EAAG,CAAC,EAAM,EAAqB,CAAc,CAAC,EAE9C,OACE,EAAC,EAAD,CACE,YAAU,0BACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAa,OAAQ,CAAE,IAAK,EAAG,MAAO,IAAK,OAAQ,EAAG,KAAM,GAAI,EAAhE,SAAA,CACE,EAAC,EAAD,CAAc,QAAS,EAAC,EAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,EACzE,EAAC,EAAD,CAAQ,QAAQ,QAAQ,KAAM,EAAW,kBAAmB,EAA5D,SAAA,CACE,EAAC,EAAD,CAAW,QAAQ,OAAO,SAAS,OAAO,OAAQ,GAAI,UAAU,oBAAoB,SAAU,EAAK,CAAA,EACnG,EAAC,EAAD,CAAW,QAAQ,aAAa,SAAS,QAAQ,OAAQ,GAAI,UAAU,wCAAwC,SAAU,EAAK,CAAA,CACxH,CACG,CAAA,CAAA,GACC,CAAA,CAEpB"}

package/dist/conversion-funnel-chart-r2m2QbiQ.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversion-funnel-chart-r2m2QbiQ.cjs","names":["formatCompactNumber","formatPercent","getChartColor","ChartContainer","FunnelChart","ChartTooltip","ChartTooltipContent","Funnel","LabelList"],"sources":["../packages/components/features/charts/components/conversion-funnel-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Funnel, FunnelChart, LabelList } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, formatPercent, getChartColor } from '../utils';\n\nexport type FunnelStage = NamedValue & {\n  /** Config key; derived from `name` when omitted. */\n  key?: string;\n  color?: string;\n};\n\nexport type ConversionFunnelChartProps = BaseChartProps & {\n  /** Funnel stages ordered top (widest) to bottom. */\n  data: FunnelStage[];\n  /** Appends each stage's percentage of the first stage. Defaults to `true`. */\n  showConversionRates?: boolean;\n  valueFormatter?: (value: number) => string;\n};\n\n/**\n * A conversion funnel for the ecommerce purchase journey — sessions, product views, carts,\n * checkouts, purchases — with per-stage conversion rates against the first stage.\n *\n * @example\n * ```tsx\n * import { ConversionFunnelChart } from '@customafk/lunas-ui/features/charts';\n *\n * <ConversionFunnelChart\n *   data={[\n *     { name: 'Sessions', value: 50000 },\n *     { name: 'Product views', value: 32000 },\n *     { name: 'Added to cart', value: 8400 },\n *     { name: 'Purchased', value: 2900 },\n *   ]}\n * />\n * ```\n */\nexport const ConversionFunnelChart = ({\n  data,\n  showConversionRates = true,\n  valueFormatter = formatCompactNumber,\n  className,\n  animate = true,\n  height,\n}: ConversionFunnelChartProps) => {\n  const { chartData, config } = useMemo(() => {\n    const first = data[0]?.value ?? 0;\n    const entries = data.map((stage, index) => {\n      const rate = first === 0 ? 0 : stage.value / first;\n      const valueLabel = showConversionRates ? `${valueFormatter(stage.value)} (${formatPercent(rate)})` : valueFormatter(stage.value);\n      return {\n        ...stage,\n        key: stage.key || stage.name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),\n        fill: stage.color || getChartColor(index),\n        valueLabel,\n      };\n    });\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return { chartData: entries, config: chartConfig };\n  }, [data, showConversionRates, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"conversion-funnel-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <FunnelChart margin={{ top: 8, right: 120, bottom: 8, left: 120 }}>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n        <Funnel dataKey=\"value\" data={chartData} isAnimationActive={animate}>\n          <LabelList dataKey=\"name\" position=\"left\" offset={12} className=\"fill-muted-strong\" fontSize={12} />\n          <LabelList dataKey=\"valueLabel\" position=\"right\" offset={12} className=\"fill-text-positive-strong font-number\" fontSize={12} />\n        </Funnel>\n      </FunnelChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA4CA,MAAa,GAAyB,CACpC,OACA,sBAAsB,GACtB,iBAAiBA,EAAAA,oBACjB,YACA,UAAU,GACV,YACgC,CAChC,GAAM,CAAE,YAAW,WAAA,EAAA,EAAA,QAAA,KAAyB,CAC1C,IAAM,EAAQ,EAAK,EAAE,EAAE,OAAS,EAC1B,EAAU,EAAK,KAAK,EAAO,IAAU,CACzC,IAAM,EAAO,IAAU,EAAI,EAAI,EAAM,MAAQ,EACvC,EAAa,EAAsB,GAAG,EAAe,EAAM,KAAK,EAAE,IAAIC,EAAAA,cAAc,CAAI,EAAE,GAAK,EAAe,EAAM,KAAK,EAC/H,MAAO,CACL,GAAG,EACH,IAAK,EAAM,KAAO,EAAM,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EACrE,KAAM,EAAM,OAASC,EAAAA,cAAc,CAAK,EACxC,YACF,CACF,CAAC,EAED,MAAO,CAAE,UAAW,EAAS,OADI,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAC/E,CAAE,CACnD,EAAG,CAAC,EAAM,EAAqB,CAAc,CAAC,EAE9C,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,0BACF,SACR,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,YAAD,CAAa,OAAQ,CAAE,IAAK,EAAG,MAAO,IAAK,OAAQ,EAAG,KAAM,GAAI,WAAhE,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,GACzE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,KAAM,EAAW,kBAAmB,WAA5D,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,OAAO,SAAS,OAAO,OAAQ,GAAI,UAAU,oBAAoB,SAAU,EAAK,CAAA,GACnG,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,aAAa,SAAS,QAAQ,OAAQ,GAAI,UAAU,wCAAwC,SAAU,EAAK,CAAA,CACxH,GACG,GACC,CAAA,CAEpB"}
+{"version":3,"file":"conversion-funnel-chart-r2m2QbiQ.cjs","names":["formatCompactNumber","formatPercent","getChartColor","ChartContainer","FunnelChart","ChartTooltip","ChartTooltipContent","Funnel","LabelList"],"sources":["../packages/components/features/charts/components/conversion-funnel-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Funnel, FunnelChart, LabelList } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, formatPercent, getChartColor } from '../utils';\n\nexport type FunnelStage = NamedValue & {\n  /** Config key; derived from `name` when omitted. */\n  key?: string;\n  color?: string;\n};\n\nexport type ConversionFunnelChartProps = BaseChartProps & {\n  /** Funnel stages ordered top (widest) to bottom. */\n  data: FunnelStage[];\n  /** Appends each stage's percentage of the first stage. Defaults to `true`. */\n  showConversionRates?: boolean;\n  valueFormatter?: (value: number) => string;\n};\n\n/**\n * A conversion funnel for the ecommerce purchase journey — sessions, product views, carts,\n * checkouts, purchases — with per-stage conversion rates against the first stage.\n *\n * @example\n * ```tsx\n * import { ConversionFunnelChart } from '@customafk/lunas-ui/features/charts';\n *\n * <ConversionFunnelChart\n *   data={[\n *     { name: 'Sessions', value: 50000 },\n *     { name: 'Product views', value: 32000 },\n *     { name: 'Added to cart', value: 8400 },\n *     { name: 'Purchased', value: 2900 },\n *   ]}\n * />\n * ```\n */\nexport const ConversionFunnelChart = ({\n  data,\n  showConversionRates = true,\n  valueFormatter = formatCompactNumber,\n  className,\n  animate = true,\n  height,\n}: ConversionFunnelChartProps) => {\n  const { chartData, config } = useMemo(() => {\n    const first = data[0]?.value ?? 0;\n    const entries = data.map((stage, index) => {\n      const rate = first === 0 ? 0 : stage.value / first;\n      const valueLabel = showConversionRates ? `${valueFormatter(stage.value)} (${formatPercent(rate)})` : valueFormatter(stage.value);\n      return {\n        ...stage,\n        key: stage.key || stage.name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),\n        fill: stage.color || getChartColor(index),\n        valueLabel,\n      };\n    });\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return { chartData: entries, config: chartConfig };\n  }, [data, showConversionRates, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"conversion-funnel-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <FunnelChart margin={{ top: 8, right: 120, bottom: 8, left: 120 }}>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n        <Funnel dataKey=\"value\" data={chartData} isAnimationActive={animate}>\n          <LabelList dataKey=\"name\" position=\"left\" offset={12} className=\"fill-muted-strong\" fontSize={12} />\n          <LabelList dataKey=\"valueLabel\" position=\"right\" offset={12} className=\"fill-text-positive-strong font-number\" fontSize={12} />\n        </Funnel>\n      </FunnelChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA4CA,MAAa,GAAyB,CACpC,OACA,sBAAsB,GACtB,iBAAiBA,EAAAA,oBACjB,YACA,UAAU,GACV,YACgC,CAChC,GAAM,CAAE,YAAW,WAAA,EAAA,EAAA,QAAA,KAAyB,CAC1C,IAAM,EAAQ,EAAK,EAAE,EAAE,OAAS,EAC1B,EAAU,EAAK,KAAK,EAAO,IAAU,CACzC,IAAM,EAAO,IAAU,EAAI,EAAI,EAAM,MAAQ,EACvC,EAAa,EAAsB,GAAG,EAAe,EAAM,KAAK,EAAE,IAAIC,EAAAA,cAAc,CAAI,EAAE,GAAK,EAAe,EAAM,KAAK,EAC/H,MAAO,CACL,GAAG,EACH,IAAK,EAAM,KAAO,EAAM,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EACrE,KAAM,EAAM,OAASC,EAAAA,cAAc,CAAK,EACxC,YACF,CACF,CAAC,EAED,MAAO,CAAE,UAAW,EAAS,OADI,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAC/E,CAAE,CACnD,EAAG,CAAC,EAAM,EAAqB,CAAc,CAAC,EAE9C,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,0BACF,SACR,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,YAAD,CAAa,OAAQ,CAAE,IAAK,EAAG,MAAO,IAAK,OAAQ,EAAG,KAAM,GAAI,EAAhE,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,GACzE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,KAAM,EAAW,kBAAmB,EAA5D,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,OAAO,SAAS,OAAO,OAAQ,GAAI,UAAU,oBAAoB,SAAU,EAAK,CAAA,GACnG,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,aAAa,SAAS,QAAQ,OAAQ,GAAI,UAAU,wCAAwC,SAAU,EAAK,CAAA,CACxH,CACG,CAAA,CAAA,GACC,CAAA,CAEpB"}

package/dist/correlation-scatter-chart-Djtt7NU7.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"correlation-scatter-chart-Djtt7NU7.mjs","names":[],"sources":["../packages/components/features/charts/components/correlation-scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from 'recharts';\nimport type { BaseChartProps, ScatterPoint } from '../types';\n\nexport type CorrelationScatterChartProps = BaseChartProps & {\n  data: ScatterPoint[];\n  /** Series label used in the theme config. Defaults to `'Points'`. */\n  label?: string;\n  color?: string;\n  xLabel?: string;\n  yLabel?: string;\n  xFormatter?: (value: number) => string;\n  yFormatter?: (value: number) => string;\n  /** Sizes each point from its `z` value. Defaults to `false`. */\n  showBubbleSize?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A scatter (or bubble, with `showBubbleSize`) chart for correlating two metrics, with an\n * optional third dimension mapped to point size.\n *\n * @example\n * ```tsx\n * import { CorrelationScatterChart } from '@customafk/lunas-ui/features/charts';\n *\n * <CorrelationScatterChart\n *   data={[\n *     { x: 12, y: 4200, z: 40, name: 'Product A' },\n *     { x: 18, y: 5100, z: 65, name: 'Product B' },\n *   ]}\n *   xLabel=\"Price ($)\"\n *   yLabel=\"Units sold\"\n *   showBubbleSize\n * />\n * ```\n */\nexport const CorrelationScatterChart = ({\n  data,\n  label = 'Points',\n  color = 'var(--chart-1)',\n  xLabel,\n  yLabel,\n  xFormatter = value => value.toLocaleString('en-US'),\n  yFormatter = value => value.toLocaleString('en-US'),\n  showBubbleSize = false,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: CorrelationScatterChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ y: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"correlation-scatter-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ScatterChart margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid />}\n        <XAxis type=\"number\" dataKey=\"x\" name={xLabel} tickLine={false} axisLine={false} tickMargin={8} tickFormatter={xFormatter} />\n        <YAxis type=\"number\" dataKey=\"y\" name={yLabel} tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={yFormatter} />\n        {showBubbleSize && <ZAxis type=\"number\" dataKey=\"z\" range={[64, 400]} />}\n        <ChartTooltip\n          cursor={{ strokeDasharray: '3 3' }}\n          content={\n            <ChartTooltipContent\n              hideLabel\n              formatter={(_value, _name, item) => {\n                const point = item.payload as ScatterPoint;\n                return (\n                  <div className=\"grid gap-0.5\">\n                    {point.name && <span className=\"font-medium text-muted-strong\">{point.name}</span>}\n                    <span className=\"text-muted\">\n                      {xLabel || 'x'}: <span className=\"font-medium font-number text-text-positive-strong\">{xFormatter(point.x)}</span>\n                    </span>\n                    <span className=\"text-muted\">\n                      {yLabel || 'y'}: <span className=\"font-medium font-number text-text-positive-strong\">{yFormatter(point.y)}</span>\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        <Scatter data={data} fill={color} isAnimationActive={animate} />\n      </ScatterChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"0UA4CA,MAAa,GAA2B,CACtC,OACA,QAAQ,SACR,QAAQ,iBACR,SACA,SACA,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,iBAAiB,GACjB,WAAW,GACX,YACA,UAAU,GACV,YAKE,EAAC,EAAD,CACE,YAAU,4BACV,OALW,OAA4B,CAAE,EAAG,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKjE,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAc,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAA/D,CACG,GAAY,EAAC,EAAD,CAAgB,CAAA,EAC7B,EAAC,EAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAa,CAAA,EAC5H,EAAC,EAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAa,CAAA,EACtI,GAAkB,EAAC,EAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,MAAO,CAAC,GAAI,GAAG,CAAI,CAAA,EACvE,EAAC,EAAD,CACE,OAAQ,CAAE,gBAAiB,KAAM,EACjC,QACE,EAAC,EAAD,CACE,UAAA,GACA,WAAY,EAAQ,EAAO,IAAS,CAClC,IAAM,EAAQ,EAAK,QACnB,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,CACG,EAAM,MAAQ,EAAC,OAAD,CAAM,UAAU,yCAAiC,EAAM,IAAW,CAAA,EACjF,EAAC,OAAD,CAAM,UAAU,sBAAhB,CACG,GAAU,IAAI,KAAE,EAAC,OAAD,CAAM,UAAU,6DAAqD,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,IACN,EAAC,OAAD,CAAM,UAAU,sBAAhB,CACG,GAAU,IAAI,KAAE,EAAC,OAAD,CAAM,UAAU,6DAAqD,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,GACH,GAET,CACD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CAAe,OAAM,KAAM,EAAO,kBAAmB,CAAU,CAAA,CACnD,GACA,CAAA"}
+{"version":3,"file":"correlation-scatter-chart-Djtt7NU7.mjs","names":[],"sources":["../packages/components/features/charts/components/correlation-scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from 'recharts';\nimport type { BaseChartProps, ScatterPoint } from '../types';\n\nexport type CorrelationScatterChartProps = BaseChartProps & {\n  data: ScatterPoint[];\n  /** Series label used in the theme config. Defaults to `'Points'`. */\n  label?: string;\n  color?: string;\n  xLabel?: string;\n  yLabel?: string;\n  xFormatter?: (value: number) => string;\n  yFormatter?: (value: number) => string;\n  /** Sizes each point from its `z` value. Defaults to `false`. */\n  showBubbleSize?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A scatter (or bubble, with `showBubbleSize`) chart for correlating two metrics, with an\n * optional third dimension mapped to point size.\n *\n * @example\n * ```tsx\n * import { CorrelationScatterChart } from '@customafk/lunas-ui/features/charts';\n *\n * <CorrelationScatterChart\n *   data={[\n *     { x: 12, y: 4200, z: 40, name: 'Product A' },\n *     { x: 18, y: 5100, z: 65, name: 'Product B' },\n *   ]}\n *   xLabel=\"Price ($)\"\n *   yLabel=\"Units sold\"\n *   showBubbleSize\n * />\n * ```\n */\nexport const CorrelationScatterChart = ({\n  data,\n  label = 'Points',\n  color = 'var(--chart-1)',\n  xLabel,\n  yLabel,\n  xFormatter = value => value.toLocaleString('en-US'),\n  yFormatter = value => value.toLocaleString('en-US'),\n  showBubbleSize = false,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: CorrelationScatterChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ y: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"correlation-scatter-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ScatterChart margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid />}\n        <XAxis type=\"number\" dataKey=\"x\" name={xLabel} tickLine={false} axisLine={false} tickMargin={8} tickFormatter={xFormatter} />\n        <YAxis type=\"number\" dataKey=\"y\" name={yLabel} tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={yFormatter} />\n        {showBubbleSize && <ZAxis type=\"number\" dataKey=\"z\" range={[64, 400]} />}\n        <ChartTooltip\n          cursor={{ strokeDasharray: '3 3' }}\n          content={\n            <ChartTooltipContent\n              hideLabel\n              formatter={(_value, _name, item) => {\n                const point = item.payload as ScatterPoint;\n                return (\n                  <div className=\"grid gap-0.5\">\n                    {point.name && <span className=\"font-medium text-muted-strong\">{point.name}</span>}\n                    <span className=\"text-muted\">\n                      {xLabel || 'x'}: <span className=\"font-medium font-number text-text-positive-strong\">{xFormatter(point.x)}</span>\n                    </span>\n                    <span className=\"text-muted\">\n                      {yLabel || 'y'}: <span className=\"font-medium font-number text-text-positive-strong\">{yFormatter(point.y)}</span>\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        <Scatter data={data} fill={color} isAnimationActive={animate} />\n      </ScatterChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"0UA4CA,MAAa,GAA2B,CACtC,OACA,QAAQ,SACR,QAAQ,iBACR,SACA,SACA,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,iBAAiB,GACjB,WAAW,GACX,YACA,UAAU,GACV,YAKE,EAAC,EAAD,CACE,YAAU,4BACV,OALW,OAA4B,CAAE,EAAG,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKjE,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAc,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAA/D,SAAA,CACG,GAAY,EAAC,EAAD,CAAgB,CAAA,EAC7B,EAAC,EAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAa,CAAA,EAC5H,EAAC,EAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAa,CAAA,EACtI,GAAkB,EAAC,EAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,MAAO,CAAC,GAAI,GAAG,CAAI,CAAA,EACvE,EAAC,EAAD,CACE,OAAQ,CAAE,gBAAiB,KAAM,EACjC,QACE,EAAC,EAAD,CACE,UAAA,GACA,WAAY,EAAQ,EAAO,IAAS,CAClC,IAAM,EAAQ,EAAK,QACnB,OACE,EAAC,MAAD,CAAK,UAAU,eAAf,SAAA,CACG,EAAM,MAAQ,EAAC,OAAD,CAAM,UAAU,gCAAiC,SAAA,EAAM,IAAW,CAAA,EACjF,EAAC,OAAD,CAAM,UAAU,aAAhB,SAAA,CACG,GAAU,IAAI,KAAE,EAAC,OAAD,CAAM,UAAU,oDAAqD,SAAA,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,IACN,EAAC,OAAD,CAAM,UAAU,aAAhB,SAAA,CACG,GAAU,IAAI,KAAE,EAAC,OAAD,CAAM,UAAU,oDAAqD,SAAA,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,GACH,GAET,CACD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CAAe,OAAM,KAAM,EAAO,kBAAmB,CAAU,CAAA,CACnD,GACA,CAAA"}

package/dist/correlation-scatter-chart-HF48YUIB.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"correlation-scatter-chart-HF48YUIB.cjs","names":["ChartContainer","ScatterChart","CartesianGrid","XAxis","YAxis","ZAxis","ChartTooltip","ChartTooltipContent","Scatter"],"sources":["../packages/components/features/charts/components/correlation-scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from 'recharts';\nimport type { BaseChartProps, ScatterPoint } from '../types';\n\nexport type CorrelationScatterChartProps = BaseChartProps & {\n  data: ScatterPoint[];\n  /** Series label used in the theme config. Defaults to `'Points'`. */\n  label?: string;\n  color?: string;\n  xLabel?: string;\n  yLabel?: string;\n  xFormatter?: (value: number) => string;\n  yFormatter?: (value: number) => string;\n  /** Sizes each point from its `z` value. Defaults to `false`. */\n  showBubbleSize?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A scatter (or bubble, with `showBubbleSize`) chart for correlating two metrics, with an\n * optional third dimension mapped to point size.\n *\n * @example\n * ```tsx\n * import { CorrelationScatterChart } from '@customafk/lunas-ui/features/charts';\n *\n * <CorrelationScatterChart\n *   data={[\n *     { x: 12, y: 4200, z: 40, name: 'Product A' },\n *     { x: 18, y: 5100, z: 65, name: 'Product B' },\n *   ]}\n *   xLabel=\"Price ($)\"\n *   yLabel=\"Units sold\"\n *   showBubbleSize\n * />\n * ```\n */\nexport const CorrelationScatterChart = ({\n  data,\n  label = 'Points',\n  color = 'var(--chart-1)',\n  xLabel,\n  yLabel,\n  xFormatter = value => value.toLocaleString('en-US'),\n  yFormatter = value => value.toLocaleString('en-US'),\n  showBubbleSize = false,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: CorrelationScatterChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ y: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"correlation-scatter-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ScatterChart margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid />}\n        <XAxis type=\"number\" dataKey=\"x\" name={xLabel} tickLine={false} axisLine={false} tickMargin={8} tickFormatter={xFormatter} />\n        <YAxis type=\"number\" dataKey=\"y\" name={yLabel} tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={yFormatter} />\n        {showBubbleSize && <ZAxis type=\"number\" dataKey=\"z\" range={[64, 400]} />}\n        <ChartTooltip\n          cursor={{ strokeDasharray: '3 3' }}\n          content={\n            <ChartTooltipContent\n              hideLabel\n              formatter={(_value, _name, item) => {\n                const point = item.payload as ScatterPoint;\n                return (\n                  <div className=\"grid gap-0.5\">\n                    {point.name && <span className=\"font-medium text-muted-strong\">{point.name}</span>}\n                    <span className=\"text-muted\">\n                      {xLabel || 'x'}: <span className=\"font-medium font-number text-text-positive-strong\">{xFormatter(point.x)}</span>\n                    </span>\n                    <span className=\"text-muted\">\n                      {yLabel || 'y'}: <span className=\"font-medium font-number text-text-positive-strong\">{yFormatter(point.y)}</span>\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        <Scatter data={data} fill={color} isAnimationActive={animate} />\n      </ScatterChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"0JA4CA,MAAa,GAA2B,CACtC,OACA,QAAQ,SACR,QAAQ,iBACR,SACA,SACA,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,iBAAiB,GACjB,WAAW,GACX,YACA,UAAU,GACV,aAKE,EAAA,EAAA,IAAA,CAACA,EAAAA,eAAD,CACE,YAAU,4BACV,QAAA,EAAA,EAAA,QAAA,MALuC,CAAE,EAAG,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKjE,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAc,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAA/D,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAgB,CAAA,GAC7B,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAa,CAAA,GAC5H,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAa,CAAA,EACtI,IAAkB,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,MAAO,CAAC,GAAI,GAAG,CAAI,CAAA,GACvE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,OAAQ,CAAE,gBAAiB,KAAM,EACjC,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,UAAA,GACA,WAAY,EAAQ,EAAO,IAAS,CAClC,IAAM,EAAQ,EAAK,QACnB,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,CACG,EAAM,OAAQ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,yCAAiC,EAAM,IAAW,CAAA,GACjF,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,sBAAhB,CACG,GAAU,IAAI,MAAE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,6DAAqD,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,KACN,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,sBAAhB,CACG,GAAU,IAAI,MAAE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,6DAAqD,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,GACH,GAET,CACD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAe,OAAM,KAAM,EAAO,kBAAmB,CAAU,CAAA,CACnD,GACA,CAAA"}
+{"version":3,"file":"correlation-scatter-chart-HF48YUIB.cjs","names":["ChartContainer","ScatterChart","CartesianGrid","XAxis","YAxis","ZAxis","ChartTooltip","ChartTooltipContent","Scatter"],"sources":["../packages/components/features/charts/components/correlation-scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from 'recharts';\nimport type { BaseChartProps, ScatterPoint } from '../types';\n\nexport type CorrelationScatterChartProps = BaseChartProps & {\n  data: ScatterPoint[];\n  /** Series label used in the theme config. Defaults to `'Points'`. */\n  label?: string;\n  color?: string;\n  xLabel?: string;\n  yLabel?: string;\n  xFormatter?: (value: number) => string;\n  yFormatter?: (value: number) => string;\n  /** Sizes each point from its `z` value. Defaults to `false`. */\n  showBubbleSize?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A scatter (or bubble, with `showBubbleSize`) chart for correlating two metrics, with an\n * optional third dimension mapped to point size.\n *\n * @example\n * ```tsx\n * import { CorrelationScatterChart } from '@customafk/lunas-ui/features/charts';\n *\n * <CorrelationScatterChart\n *   data={[\n *     { x: 12, y: 4200, z: 40, name: 'Product A' },\n *     { x: 18, y: 5100, z: 65, name: 'Product B' },\n *   ]}\n *   xLabel=\"Price ($)\"\n *   yLabel=\"Units sold\"\n *   showBubbleSize\n * />\n * ```\n */\nexport const CorrelationScatterChart = ({\n  data,\n  label = 'Points',\n  color = 'var(--chart-1)',\n  xLabel,\n  yLabel,\n  xFormatter = value => value.toLocaleString('en-US'),\n  yFormatter = value => value.toLocaleString('en-US'),\n  showBubbleSize = false,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: CorrelationScatterChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ y: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"correlation-scatter-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ScatterChart margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid />}\n        <XAxis type=\"number\" dataKey=\"x\" name={xLabel} tickLine={false} axisLine={false} tickMargin={8} tickFormatter={xFormatter} />\n        <YAxis type=\"number\" dataKey=\"y\" name={yLabel} tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={yFormatter} />\n        {showBubbleSize && <ZAxis type=\"number\" dataKey=\"z\" range={[64, 400]} />}\n        <ChartTooltip\n          cursor={{ strokeDasharray: '3 3' }}\n          content={\n            <ChartTooltipContent\n              hideLabel\n              formatter={(_value, _name, item) => {\n                const point = item.payload as ScatterPoint;\n                return (\n                  <div className=\"grid gap-0.5\">\n                    {point.name && <span className=\"font-medium text-muted-strong\">{point.name}</span>}\n                    <span className=\"text-muted\">\n                      {xLabel || 'x'}: <span className=\"font-medium font-number text-text-positive-strong\">{xFormatter(point.x)}</span>\n                    </span>\n                    <span className=\"text-muted\">\n                      {yLabel || 'y'}: <span className=\"font-medium font-number text-text-positive-strong\">{yFormatter(point.y)}</span>\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        <Scatter data={data} fill={color} isAnimationActive={animate} />\n      </ScatterChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"0JA4CA,MAAa,GAA2B,CACtC,OACA,QAAQ,SACR,QAAQ,iBACR,SACA,SACA,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,iBAAiB,GACjB,WAAW,GACX,YACA,UAAU,GACV,aAKE,EAAA,EAAA,IAAA,CAACA,EAAAA,eAAD,CACE,YAAU,4BACV,QAAA,EAAA,EAAA,QAAA,MALuC,CAAE,EAAG,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKjE,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAc,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAA/D,SAAA,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAgB,CAAA,GAC7B,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAa,CAAA,GAC5H,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAa,CAAA,EACtI,IAAkB,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,MAAO,CAAC,GAAI,GAAG,CAAI,CAAA,GACvE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,OAAQ,CAAE,gBAAiB,KAAM,EACjC,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,UAAA,GACA,WAAY,EAAQ,EAAO,IAAS,CAClC,IAAM,EAAQ,EAAK,QACnB,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,eAAf,SAAA,CACG,EAAM,OAAQ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,gCAAiC,SAAA,EAAM,IAAW,CAAA,GACjF,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,aAAhB,SAAA,CACG,GAAU,IAAI,MAAE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oDAAqD,SAAA,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,KACN,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,aAAhB,SAAA,CACG,GAAU,IAAI,MAAE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oDAAqD,SAAA,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,GACH,GAET,CACD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAe,OAAM,KAAM,EAAO,kBAAmB,CAAU,CAAA,CACnD,GACA,CAAA"}

package/dist/{country-C8QijcHF.d.mts → country-8m51pdnj.d.mts}

@@ -1,8 +1,8 @@
 import { n as ECountry } from "./types-cKvPPVBe.mjs";
-
 //#region packages/components/data-display/country.d.ts
 type CountryDisplayProps = {
-  /** The country enum value to display; renders "No country" when `null` or `undefined`. */country?: ECountry | null;
+  /** The country enum value to display; renders "No country" when `null` or `undefined`. */
+  country?: ECountry | null;
 };
 /**
  * Displays a country flag (SVG) alongside the country's English name, or a muted "No country" label when the value is absent.
@@ -18,4 +18,4 @@ type CountryDisplayProps = {
 declare const CountryDisplay: React.FC<CountryDisplayProps>;
 //#endregion
 export { CountryDisplay as t };
-//# sourceMappingURL=country-C8QijcHF.d.mts.map
+//# sourceMappingURL=country-8m51pdnj.d.mts.map

package/dist/{country-CJIaO0I7.d.cts → country-BPlbbV9W.d.cts}

@@ -1,8 +1,8 @@
 import { n as ECountry } from "./types-cKvPPVBe.cjs";
-
 //#region packages/components/data-display/country.d.ts
 type CountryDisplayProps = {
-  /** The country enum value to display; renders "No country" when `null` or `undefined`. */country?: ECountry | null;
+  /** The country enum value to display; renders "No country" when `null` or `undefined`. */
+  country?: ECountry | null;
 };
 /**
  * Displays a country flag (SVG) alongside the country's English name, or a muted "No country" label when the value is absent.
@@ -18,4 +18,4 @@ type CountryDisplayProps = {
 declare const CountryDisplay: React.FC<CountryDisplayProps>;
 //#endregion
 export { CountryDisplay as t };
-//# sourceMappingURL=country-CJIaO0I7.d.cts.map
+//# sourceMappingURL=country-BPlbbV9W.d.cts.map

package/dist/currency-display-Buxc6Ph5.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"currency-display-Buxc6Ph5.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`, applies a green tint for positive and red tint for negative values. */\n  colorize?: boolean;\n};\n\n/**\n * Formats a numeric value as a locale-aware currency string in a table cell.\n * Always shows exactly two decimal places and uses the browser's `Intl` API for\n * symbol placement.  Renders {@link UITableEmpty} when the value is absent or\n * invalid.\n *\n * @example\n * import { UITableCurrencyDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableCurrencyDisplay value={1234.5} currency=\"USD\" colorize />\n */\nexport const UITableCurrencyDisplay = memo(({ value, currency = 'USD', locale = 'en-US', display = 'symbol', size = 'md', colorize = false }: Props) => {\n  const formatted = useMemo(() => {\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    if (num === null || num === undefined || Number.isNaN(num) || !Number.isFinite(num)) return null;\n\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency,\n      currencyDisplay: display,\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\n    }).format(num);\n  }, [value, currency, locale, display]);\n\n  const isNegative = useMemo(() => {\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    return typeof num === 'number' && num < 0;\n  }, [value]);\n\n  if (!formatted) return <UITableEmpty />;\n\n  return (\n    <p\n      className={cn(\n        'font-number tabular-nums',\n        size === 'xs' && 'text-xs',\n        size === 'sm' && 'text-sm',\n        size === 'md' && 'text-base',\n        size === 'lg' && 'text-lg',\n        size === 'xl' && 'text-xl',\n        !colorize && 'text-text-positive',\n        colorize && isNegative && 'text-danger-strong',\n        colorize && !isNegative && 'text-success-strong'\n      )}\n    >\n      {formatted}\n    </p>\n  );\n});\nUITableCurrencyDisplay.displayName = 'UITableCurrencyDisplay';\n"],"mappings":"2IAsCA,MAAa,GAAA,EAAA,EAAA,KAAA,EAA+B,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,UAAU,SAAU,OAAO,KAAM,WAAW,MAAmB,CACtJ,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,KAA2B,CAC/B,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC/D,OAAO,OAAO,GAAQ,UAAY,EAAM,CAC1C,EAAG,CAAC,CAAK,CAAC,EAIV,OAFK,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,GAAY,qBACb,GAAY,GAAc,qBAC1B,GAAY,CAAC,GAAc,qBAC7B,WAEC,CACA,CAAA,GAjBkB,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,CAmBxC,CAAC,EACD,EAAuB,YAAc"}
+{"version":3,"file":"currency-display-Buxc6Ph5.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`, applies a green tint for positive and red tint for negative values. */\n  colorize?: boolean;\n};\n\n/**\n * Formats a numeric value as a locale-aware currency string in a table cell.\n * Always shows exactly two decimal places and uses the browser's `Intl` API for\n * symbol placement.  Renders {@link UITableEmpty} when the value is absent or\n * invalid.\n *\n * @example\n * import { UITableCurrencyDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableCurrencyDisplay value={1234.5} currency=\"USD\" colorize />\n */\nexport const UITableCurrencyDisplay = memo(({ value, currency = 'USD', locale = 'en-US', display = 'symbol', size = 'md', colorize = false }: Props) => {\n  const formatted = useMemo(() => {\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    if (num === null || num === undefined || Number.isNaN(num) || !Number.isFinite(num)) return null;\n\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency,\n      currencyDisplay: display,\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\n    }).format(num);\n  }, [value, currency, locale, display]);\n\n  const isNegative = useMemo(() => {\n    const num = typeof value === 'string' ? Number(value.trim()) : value;\n    return typeof num === 'number' && num < 0;\n  }, [value]);\n\n  if (!formatted) return <UITableEmpty />;\n\n  return (\n    <p\n      className={cn(\n        'font-number tabular-nums',\n        size === 'xs' && 'text-xs',\n        size === 'sm' && 'text-sm',\n        size === 'md' && 'text-base',\n        size === 'lg' && 'text-lg',\n        size === 'xl' && 'text-xl',\n        !colorize && 'text-text-positive',\n        colorize && isNegative && 'text-danger-strong',\n        colorize && !isNegative && 'text-success-strong'\n      )}\n    >\n      {formatted}\n    </p>\n  );\n});\nUITableCurrencyDisplay.displayName = 'UITableCurrencyDisplay';\n"],"mappings":"2IAsCA,MAAa,GAAA,EAAA,EAAA,KAAA,EAA+B,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,UAAU,SAAU,OAAO,KAAM,WAAW,MAAmB,CACtJ,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,KAA2B,CAC/B,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC/D,OAAO,OAAO,GAAQ,UAAY,EAAM,CAC1C,EAAG,CAAC,CAAK,CAAC,EAIV,OAFK,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,GAAY,qBACb,GAAY,GAAc,qBAC1B,GAAY,CAAC,GAAc,qBAC7B,EAEC,SAAA,CACA,CAAA,GAjBkB,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,CAmBxC,CAAC,EACD,EAAuB,YAAc"}

package/dist/currency-display-CEg_HRYv.mjs.map

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

package/dist/data-display/country.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"country.cjs","names":["Flex","Paragraph","ReactCountryFlag"],"sources":["../../packages/components/data-display/country.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\n\nimport { ECountry } from '@/types';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\n\nconst COUNTRY_CODES: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'VN',\n  [ECountry.USA]: 'US',\n  [ECountry.JAPAN]: 'JP',\n  [ECountry.CHINA]: 'CN',\n  [ECountry.KOREA]: 'KR',\n  [ECountry.SINGAPORE]: 'SG',\n  [ECountry.MALAYSIA]: 'MY',\n  [ECountry.INDONESIA]: 'ID',\n  [ECountry.TAIWAN]: 'TW',\n  [ECountry.THAILAND]: 'TH',\n};\n\nconst COUNTRY_LABELS: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'Vietnam',\n  [ECountry.USA]: 'America',\n  [ECountry.JAPAN]: 'Japan',\n  [ECountry.CHINA]: 'China',\n  [ECountry.KOREA]: 'Korea',\n  [ECountry.SINGAPORE]: 'Singapore',\n  [ECountry.MALAYSIA]: 'Malaysia',\n  [ECountry.INDONESIA]: 'Indonesia',\n  [ECountry.TAIWAN]: 'Taiwan',\n  [ECountry.THAILAND]: 'Thailand',\n};\n\ntype CountryDisplayProps = {\n  /** The country enum value to display; renders \"No country\" when `null` or `undefined`. */\n  country?: ECountry | null;\n};\n\n/**\n * Displays a country flag (SVG) alongside the country's English name, or a muted \"No country\" label when the value is absent.\n *\n * @example\n * ```tsx\n * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';\n * import { ECountry } from '@customafk/lunas-ui/types';\n *\n * <CountryDisplay country={ECountry.VIETNAM} />\n * ```\n */\nexport const CountryDisplay: React.FC<CountryDisplayProps> = ({ country }) => {\n  const code = useMemo(() => (country ? COUNTRY_CODES[country] : 'VN'), [country]);\n\n  if (!country) {\n    return (\n      <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n        <Paragraph variant=\"muted\" className=\"line-clamp-1 text-xs\">\n          No country\n        </Paragraph>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n      <ReactCountryFlag svg countryCode={code} className=\"emojiFlag border\" />\n      <Paragraph variant=\"sm\">{COUNTRY_LABELS[country]}</Paragraph>\n    </Flex>\n  );\n};\n"],"mappings":"+SAUA,MAAM,EAA0C,SAC1B,SACJ,WACE,WACA,WACA,eACI,cACD,eACC,YACH,cACE,IACvB,EAEM,EAA2C,SAC3B,cACJ,gBACE,cACA,cACA,kBACI,qBACD,qBACC,mBACH,kBACE,UACvB,EAkBa,GAAiD,CAAE,aAAc,CAC5E,IAAM,GAAA,EAAA,EAAA,QAAA,KAAsB,EAAU,EAAc,GAAW,KAAO,CAAC,CAAO,CAAC,EAY/E,OAVK,GAWH,EAAA,EAAA,KAAA,CAACA,EAAAA,KAAD,CAAM,YAAU,kBAAkB,QAAQ,OAAO,UAAU,gBAA3D,EACE,EAAA,EAAA,IAAA,CAACE,EAAAA,QAAD,CAAkB,IAAA,GAAI,YAAa,EAAM,UAAU,kBAAoB,CAAA,GACvE,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAW,QAAQ,cAAM,EAAe,EAAoB,CAAA,CACxD,KAZJ,EAAA,EAAA,IAAA,CAACD,EAAAA,KAAD,CAAM,YAAU,kBAAkB,QAAQ,OAAO,UAAU,iBACzD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,QAAQ,UAAU,gCAAuB,YAEjD,CAAA,CACP,CAAA,CAUZ"}
+{"version":3,"file":"country.cjs","names":["Flex","Paragraph","ReactCountryFlag"],"sources":["../../packages/components/data-display/country.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\n\nimport { ECountry } from '@/types';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\n\nconst COUNTRY_CODES: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'VN',\n  [ECountry.USA]: 'US',\n  [ECountry.JAPAN]: 'JP',\n  [ECountry.CHINA]: 'CN',\n  [ECountry.KOREA]: 'KR',\n  [ECountry.SINGAPORE]: 'SG',\n  [ECountry.MALAYSIA]: 'MY',\n  [ECountry.INDONESIA]: 'ID',\n  [ECountry.TAIWAN]: 'TW',\n  [ECountry.THAILAND]: 'TH',\n};\n\nconst COUNTRY_LABELS: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'Vietnam',\n  [ECountry.USA]: 'America',\n  [ECountry.JAPAN]: 'Japan',\n  [ECountry.CHINA]: 'China',\n  [ECountry.KOREA]: 'Korea',\n  [ECountry.SINGAPORE]: 'Singapore',\n  [ECountry.MALAYSIA]: 'Malaysia',\n  [ECountry.INDONESIA]: 'Indonesia',\n  [ECountry.TAIWAN]: 'Taiwan',\n  [ECountry.THAILAND]: 'Thailand',\n};\n\ntype CountryDisplayProps = {\n  /** The country enum value to display; renders \"No country\" when `null` or `undefined`. */\n  country?: ECountry | null;\n};\n\n/**\n * Displays a country flag (SVG) alongside the country's English name, or a muted \"No country\" label when the value is absent.\n *\n * @example\n * ```tsx\n * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';\n * import { ECountry } from '@customafk/lunas-ui/types';\n *\n * <CountryDisplay country={ECountry.VIETNAM} />\n * ```\n */\nexport const CountryDisplay: React.FC<CountryDisplayProps> = ({ country }) => {\n  const code = useMemo(() => (country ? COUNTRY_CODES[country] : 'VN'), [country]);\n\n  if (!country) {\n    return (\n      <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n        <Paragraph variant=\"muted\" className=\"line-clamp-1 text-xs\">\n          No country\n        </Paragraph>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n      <ReactCountryFlag svg countryCode={code} className=\"emojiFlag border\" />\n      <Paragraph variant=\"sm\">{COUNTRY_LABELS[country]}</Paragraph>\n    </Flex>\n  );\n};\n"],"mappings":"+SAUA,MAAM,EAA0C,CAC1B,QAAA,KACJ,IAAA,KACE,MAAA,KACA,MAAA,KACA,MAAA,KACI,UAAA,KACD,SAAA,KACC,UAAA,KACH,OAAA,KACE,SAAA,IACvB,EAEM,EAA2C,CAC3B,QAAA,UACJ,IAAA,UACE,MAAA,QACA,MAAA,QACA,MAAA,QACI,UAAA,YACD,SAAA,WACC,UAAA,YACH,OAAA,SACE,SAAA,UACvB,EAkBa,GAAiD,CAAE,aAAc,CAC5E,IAAM,GAAA,EAAA,EAAA,QAAA,KAAsB,EAAU,EAAc,GAAW,KAAO,CAAC,CAAO,CAAC,EAY/E,OAVK,GAWH,EAAA,EAAA,KAAA,CAACA,EAAAA,KAAD,CAAM,YAAU,kBAAkB,QAAQ,OAAO,UAAU,OAA3D,SAAA,EACE,EAAA,EAAA,IAAA,CAACE,EAAAA,QAAD,CAAkB,IAAA,GAAI,YAAa,EAAM,UAAU,kBAAoB,CAAA,GACvE,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAW,QAAQ,KAAM,SAAA,EAAe,EAAoB,CAAA,CACxD,KAZJ,EAAA,EAAA,IAAA,CAACD,EAAAA,KAAD,CAAM,YAAU,kBAAkB,QAAQ,OAAO,UAAU,OACzD,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,QAAQ,UAAU,uBAAuB,SAAA,YAEjD,CAAA,CACP,CAAA,CAUZ"}

package/dist/data-display/country.d.cts

@@ -1,2 +1,2 @@
-import { t as CountryDisplay } from "../country-CJIaO0I7.cjs";
+import { t as CountryDisplay } from "../country-BPlbbV9W.cjs";
 export { CountryDisplay };

package/dist/data-display/country.d.mts

@@ -1,2 +1,2 @@
-import { t as CountryDisplay } from "../country-C8QijcHF.mjs";
+import { t as CountryDisplay } from "../country-8m51pdnj.mjs";
 export { CountryDisplay };

package/dist/data-display/country.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"country.mjs","names":[],"sources":["../../packages/components/data-display/country.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\n\nimport { ECountry } from '@/types';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\n\nconst COUNTRY_CODES: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'VN',\n  [ECountry.USA]: 'US',\n  [ECountry.JAPAN]: 'JP',\n  [ECountry.CHINA]: 'CN',\n  [ECountry.KOREA]: 'KR',\n  [ECountry.SINGAPORE]: 'SG',\n  [ECountry.MALAYSIA]: 'MY',\n  [ECountry.INDONESIA]: 'ID',\n  [ECountry.TAIWAN]: 'TW',\n  [ECountry.THAILAND]: 'TH',\n};\n\nconst COUNTRY_LABELS: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'Vietnam',\n  [ECountry.USA]: 'America',\n  [ECountry.JAPAN]: 'Japan',\n  [ECountry.CHINA]: 'China',\n  [ECountry.KOREA]: 'Korea',\n  [ECountry.SINGAPORE]: 'Singapore',\n  [ECountry.MALAYSIA]: 'Malaysia',\n  [ECountry.INDONESIA]: 'Indonesia',\n  [ECountry.TAIWAN]: 'Taiwan',\n  [ECountry.THAILAND]: 'Thailand',\n};\n\ntype CountryDisplayProps = {\n  /** The country enum value to display; renders \"No country\" when `null` or `undefined`. */\n  country?: ECountry | null;\n};\n\n/**\n * Displays a country flag (SVG) alongside the country's English name, or a muted \"No country\" label when the value is absent.\n *\n * @example\n * ```tsx\n * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';\n * import { ECountry } from '@customafk/lunas-ui/types';\n *\n * <CountryDisplay country={ECountry.VIETNAM} />\n * ```\n */\nexport const CountryDisplay: React.FC<CountryDisplayProps> = ({ country }) => {\n  const code = useMemo(() => (country ? COUNTRY_CODES[country] : 'VN'), [country]);\n\n  if (!country) {\n    return (\n      <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n        <Paragraph variant=\"muted\" className=\"line-clamp-1 text-xs\">\n          No country\n        </Paragraph>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n      <ReactCountryFlag svg countryCode={code} className=\"emojiFlag border\" />\n      <Paragraph variant=\"sm\">{COUNTRY_LABELS[country]}</Paragraph>\n    </Flex>\n  );\n};\n"],"mappings":"oOAUA,MAAM,EAA0C,SAC1B,SACJ,WACE,WACA,WACA,eACI,cACD,eACC,YACH,cACE,IACvB,EAEM,EAA2C,SAC3B,cACJ,gBACE,cACA,cACA,kBACI,qBACD,qBACC,mBACH,kBACE,UACvB,EAkBa,GAAiD,CAAE,aAAc,CAC5E,IAAM,EAAO,MAAe,EAAU,EAAc,GAAW,KAAO,CAAC,CAAO,CAAC,EAY/E,OAVK,EAWH,EAAC,EAAD,CAAM,YAAU,kBAAkB,QAAQ,OAAO,UAAU,gBAA3D,CACE,EAAC,EAAD,CAAkB,IAAA,GAAI,YAAa,EAAM,UAAU,kBAAoB,CAAA,EACvE,EAAC,EAAD,CAAW,QAAQ,cAAM,EAAe,EAAoB,CAAA,CACxD,IAZJ,EAAC,EAAD,CAAM,YAAU,kBAAkB,QAAQ,OAAO,UAAU,gBACzD,EAAC,EAAD,CAAW,QAAQ,QAAQ,UAAU,gCAAuB,YAEjD,CAAA,CACP,CAAA,CAUZ"}
+{"version":3,"file":"country.mjs","names":[],"sources":["../../packages/components/data-display/country.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\n\nimport { ECountry } from '@/types';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\n\nconst COUNTRY_CODES: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'VN',\n  [ECountry.USA]: 'US',\n  [ECountry.JAPAN]: 'JP',\n  [ECountry.CHINA]: 'CN',\n  [ECountry.KOREA]: 'KR',\n  [ECountry.SINGAPORE]: 'SG',\n  [ECountry.MALAYSIA]: 'MY',\n  [ECountry.INDONESIA]: 'ID',\n  [ECountry.TAIWAN]: 'TW',\n  [ECountry.THAILAND]: 'TH',\n};\n\nconst COUNTRY_LABELS: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'Vietnam',\n  [ECountry.USA]: 'America',\n  [ECountry.JAPAN]: 'Japan',\n  [ECountry.CHINA]: 'China',\n  [ECountry.KOREA]: 'Korea',\n  [ECountry.SINGAPORE]: 'Singapore',\n  [ECountry.MALAYSIA]: 'Malaysia',\n  [ECountry.INDONESIA]: 'Indonesia',\n  [ECountry.TAIWAN]: 'Taiwan',\n  [ECountry.THAILAND]: 'Thailand',\n};\n\ntype CountryDisplayProps = {\n  /** The country enum value to display; renders \"No country\" when `null` or `undefined`. */\n  country?: ECountry | null;\n};\n\n/**\n * Displays a country flag (SVG) alongside the country's English name, or a muted \"No country\" label when the value is absent.\n *\n * @example\n * ```tsx\n * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';\n * import { ECountry } from '@customafk/lunas-ui/types';\n *\n * <CountryDisplay country={ECountry.VIETNAM} />\n * ```\n */\nexport const CountryDisplay: React.FC<CountryDisplayProps> = ({ country }) => {\n  const code = useMemo(() => (country ? COUNTRY_CODES[country] : 'VN'), [country]);\n\n  if (!country) {\n    return (\n      <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n        <Paragraph variant=\"muted\" className=\"line-clamp-1 text-xs\">\n          No country\n        </Paragraph>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n      <ReactCountryFlag svg countryCode={code} className=\"emojiFlag border\" />\n      <Paragraph variant=\"sm\">{COUNTRY_LABELS[country]}</Paragraph>\n    </Flex>\n  );\n};\n"],"mappings":"oOAUA,MAAM,EAA0C,CAC1B,QAAA,KACJ,IAAA,KACE,MAAA,KACA,MAAA,KACA,MAAA,KACI,UAAA,KACD,SAAA,KACC,UAAA,KACH,OAAA,KACE,SAAA,IACvB,EAEM,EAA2C,CAC3B,QAAA,UACJ,IAAA,UACE,MAAA,QACA,MAAA,QACA,MAAA,QACI,UAAA,YACD,SAAA,WACC,UAAA,YACH,OAAA,SACE,SAAA,UACvB,EAkBa,GAAiD,CAAE,aAAc,CAC5E,IAAM,EAAO,MAAe,EAAU,EAAc,GAAW,KAAO,CAAC,CAAO,CAAC,EAY/E,OAVK,EAWH,EAAC,EAAD,CAAM,YAAU,kBAAkB,QAAQ,OAAO,UAAU,OAA3D,SAAA,CACE,EAAC,EAAD,CAAkB,IAAA,GAAI,YAAa,EAAM,UAAU,kBAAoB,CAAA,EACvE,EAAC,EAAD,CAAW,QAAQ,KAAM,SAAA,EAAe,EAAoB,CAAA,CACxD,IAZJ,EAAC,EAAD,CAAM,YAAU,kBAAkB,QAAQ,OAAO,UAAU,OACzD,SAAA,EAAC,EAAD,CAAW,QAAQ,QAAQ,UAAU,uBAAuB,SAAA,YAEjD,CAAA,CACP,CAAA,CAUZ"}

package/dist/data-display/data-list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-list.cjs","names":[],"sources":["../../packages/components/data-display/data-list.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ntype DataListProps = {\n  /** Additional CSS classes applied to the wrapping container. */\n  className?: string;\n};\n\n/**\n * A vertical container that stacks `DataListItem` rows with consistent spacing.\n *\n * @example\n * ```tsx\n * import { DataList, DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataList>\n *   <DataListItem label=\"Status\" value=\"Active\" />\n *   <DataListItem label=\"Created\" value=\"2024-01-15\" />\n * </DataList>\n * ```\n */\nexport const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({ children, className }) => {\n  return (\n    <div data-slot=\"data-list\" className={cn('flex w-full flex-col gap-4', className)}>\n      {children}\n    </div>\n  );\n};\n\ntype DataListItemProps = {\n  /** Descriptive label shown to the left of (or above, on mobile) the value. */\n  label: string;\n  /** The value to display; accepts strings, numbers, or arbitrary React nodes. */\n  value: string | number | React.ReactNode;\n  /** Minimum width applied to the label column. Defaults to `'120px'`. */\n  minLabelWidth?: string;\n  /** Additional CSS classes applied to the row container. */\n  className?: string;\n};\n\n/**\n * A single label–value row inside a `DataList`, responsive to mobile (stacks vertically) and desktop (inline) layouts.\n *\n * @example\n * ```tsx\n * import { DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataListItem label=\"Email\" value=\"user@example.com\" />\n * ```\n */\nexport const DataListItem: React.FC<DataListItemProps> = ({ label, value, minLabelWidth = '120px', className }) => {\n  return (\n    <div data-slot=\"data-list-item\" className={cn('flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4', className)}>\n      <span data-slot=\"data-list-label\" style={{ minWidth: minLabelWidth }} className=\"text-sm text-text-positive-weak\">\n        {label}\n      </span>\n      <span data-slot=\"data-list-value\" className=\"text-sm text-text-positive\">\n        {value}\n      </span>\n    </div>\n  );\n};\n"],"mappings":"+JAsBA,MAAa,GAA8D,CAAE,WAAU,gBAEnF,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,YAAY,WAAA,EAAA,EAAA,GAAA,CAAc,6BAA8B,CAAS,EAC7E,UACE,CAAA,EAyBI,GAA6C,CAAE,QAAO,QAAO,gBAAgB,QAAS,gBAE/F,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,iBAAiB,WAAA,EAAA,EAAA,GAAA,CAAc,8EAA+E,CAAS,WAAtI,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,YAAU,kBAAkB,MAAO,CAAE,SAAU,CAAc,EAAG,UAAU,2CAC7E,CACG,CAAA,GACN,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,YAAU,kBAAkB,UAAU,sCACzC,CACG,CAAA,CACH"}
+{"version":3,"file":"data-list.cjs","names":[],"sources":["../../packages/components/data-display/data-list.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ntype DataListProps = {\n  /** Additional CSS classes applied to the wrapping container. */\n  className?: string;\n};\n\n/**\n * A vertical container that stacks `DataListItem` rows with consistent spacing.\n *\n * @example\n * ```tsx\n * import { DataList, DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataList>\n *   <DataListItem label=\"Status\" value=\"Active\" />\n *   <DataListItem label=\"Created\" value=\"2024-01-15\" />\n * </DataList>\n * ```\n */\nexport const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({ children, className }) => {\n  return (\n    <div data-slot=\"data-list\" className={cn('flex w-full flex-col gap-4', className)}>\n      {children}\n    </div>\n  );\n};\n\ntype DataListItemProps = {\n  /** Descriptive label shown to the left of (or above, on mobile) the value. */\n  label: string;\n  /** The value to display; accepts strings, numbers, or arbitrary React nodes. */\n  value: string | number | React.ReactNode;\n  /** Minimum width applied to the label column. Defaults to `'120px'`. */\n  minLabelWidth?: string;\n  /** Additional CSS classes applied to the row container. */\n  className?: string;\n};\n\n/**\n * A single label–value row inside a `DataList`, responsive to mobile (stacks vertically) and desktop (inline) layouts.\n *\n * @example\n * ```tsx\n * import { DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataListItem label=\"Email\" value=\"user@example.com\" />\n * ```\n */\nexport const DataListItem: React.FC<DataListItemProps> = ({ label, value, minLabelWidth = '120px', className }) => {\n  return (\n    <div data-slot=\"data-list-item\" className={cn('flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4', className)}>\n      <span data-slot=\"data-list-label\" style={{ minWidth: minLabelWidth }} className=\"text-sm text-text-positive-weak\">\n        {label}\n      </span>\n      <span data-slot=\"data-list-value\" className=\"text-sm text-text-positive\">\n        {value}\n      </span>\n    </div>\n  );\n};\n"],"mappings":"+JAsBA,MAAa,GAA8D,CAAE,WAAU,gBAEnF,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,YAAY,WAAA,EAAA,EAAA,GAAA,CAAc,6BAA8B,CAAS,EAC7E,UACE,CAAA,EAyBI,GAA6C,CAAE,QAAO,QAAO,gBAAgB,QAAS,gBAE/F,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,iBAAiB,WAAA,EAAA,EAAA,GAAA,CAAc,8EAA+E,CAAS,EAAtI,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,YAAU,kBAAkB,MAAO,CAAE,SAAU,CAAc,EAAG,UAAU,kCAC7E,SAAA,CACG,CAAA,GACN,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,YAAU,kBAAkB,UAAU,6BACzC,SAAA,CACG,CAAA,CACH"}

package/dist/data-display/data-list.d.cts

@@ -1,2 +1,2 @@
-import { n as DataListItem, t as DataList } from "../data-list-Cg510z2m.cjs";
+import { n as DataListItem, t as DataList } from "../data-list-BRHjqVUT.cjs";
 export { DataList, DataListItem };

package/dist/data-display/data-list.d.mts

@@ -1,2 +1,2 @@
-import { n as DataListItem, t as DataList } from "../data-list-Cg510z2m.mjs";
+import { n as DataListItem, t as DataList } from "../data-list-BRHjqVUT.mjs";
 export { DataList, DataListItem };

package/dist/data-display/data-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-list.mjs","names":[],"sources":["../../packages/components/data-display/data-list.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ntype DataListProps = {\n  /** Additional CSS classes applied to the wrapping container. */\n  className?: string;\n};\n\n/**\n * A vertical container that stacks `DataListItem` rows with consistent spacing.\n *\n * @example\n * ```tsx\n * import { DataList, DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataList>\n *   <DataListItem label=\"Status\" value=\"Active\" />\n *   <DataListItem label=\"Created\" value=\"2024-01-15\" />\n * </DataList>\n * ```\n */\nexport const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({ children, className }) => {\n  return (\n    <div data-slot=\"data-list\" className={cn('flex w-full flex-col gap-4', className)}>\n      {children}\n    </div>\n  );\n};\n\ntype DataListItemProps = {\n  /** Descriptive label shown to the left of (or above, on mobile) the value. */\n  label: string;\n  /** The value to display; accepts strings, numbers, or arbitrary React nodes. */\n  value: string | number | React.ReactNode;\n  /** Minimum width applied to the label column. Defaults to `'120px'`. */\n  minLabelWidth?: string;\n  /** Additional CSS classes applied to the row container. */\n  className?: string;\n};\n\n/**\n * A single label–value row inside a `DataList`, responsive to mobile (stacks vertically) and desktop (inline) layouts.\n *\n * @example\n * ```tsx\n * import { DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataListItem label=\"Email\" value=\"user@example.com\" />\n * ```\n */\nexport const DataListItem: React.FC<DataListItemProps> = ({ label, value, minLabelWidth = '120px', className }) => {\n  return (\n    <div data-slot=\"data-list-item\" className={cn('flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4', className)}>\n      <span data-slot=\"data-list-label\" style={{ minWidth: minLabelWidth }} className=\"text-sm text-text-positive-weak\">\n        {label}\n      </span>\n      <span data-slot=\"data-list-value\" className=\"text-sm text-text-positive\">\n        {value}\n      </span>\n    </div>\n  );\n};\n"],"mappings":"mHAsBA,MAAa,GAA8D,CAAE,WAAU,eAEnF,EAAC,MAAD,CAAK,YAAU,YAAY,UAAW,EAAG,6BAA8B,CAAS,EAC7E,UACE,CAAA,EAyBI,GAA6C,CAAE,QAAO,QAAO,gBAAgB,QAAS,eAE/F,EAAC,MAAD,CAAK,YAAU,iBAAiB,UAAW,EAAG,8EAA+E,CAAS,WAAtI,CACE,EAAC,OAAD,CAAM,YAAU,kBAAkB,MAAO,CAAE,SAAU,CAAc,EAAG,UAAU,2CAC7E,CACG,CAAA,EACN,EAAC,OAAD,CAAM,YAAU,kBAAkB,UAAU,sCACzC,CACG,CAAA,CACH"}
+{"version":3,"file":"data-list.mjs","names":[],"sources":["../../packages/components/data-display/data-list.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ntype DataListProps = {\n  /** Additional CSS classes applied to the wrapping container. */\n  className?: string;\n};\n\n/**\n * A vertical container that stacks `DataListItem` rows with consistent spacing.\n *\n * @example\n * ```tsx\n * import { DataList, DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataList>\n *   <DataListItem label=\"Status\" value=\"Active\" />\n *   <DataListItem label=\"Created\" value=\"2024-01-15\" />\n * </DataList>\n * ```\n */\nexport const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({ children, className }) => {\n  return (\n    <div data-slot=\"data-list\" className={cn('flex w-full flex-col gap-4', className)}>\n      {children}\n    </div>\n  );\n};\n\ntype DataListItemProps = {\n  /** Descriptive label shown to the left of (or above, on mobile) the value. */\n  label: string;\n  /** The value to display; accepts strings, numbers, or arbitrary React nodes. */\n  value: string | number | React.ReactNode;\n  /** Minimum width applied to the label column. Defaults to `'120px'`. */\n  minLabelWidth?: string;\n  /** Additional CSS classes applied to the row container. */\n  className?: string;\n};\n\n/**\n * A single label–value row inside a `DataList`, responsive to mobile (stacks vertically) and desktop (inline) layouts.\n *\n * @example\n * ```tsx\n * import { DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataListItem label=\"Email\" value=\"user@example.com\" />\n * ```\n */\nexport const DataListItem: React.FC<DataListItemProps> = ({ label, value, minLabelWidth = '120px', className }) => {\n  return (\n    <div data-slot=\"data-list-item\" className={cn('flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4', className)}>\n      <span data-slot=\"data-list-label\" style={{ minWidth: minLabelWidth }} className=\"text-sm text-text-positive-weak\">\n        {label}\n      </span>\n      <span data-slot=\"data-list-value\" className=\"text-sm text-text-positive\">\n        {value}\n      </span>\n    </div>\n  );\n};\n"],"mappings":"mHAsBA,MAAa,GAA8D,CAAE,WAAU,eAEnF,EAAC,MAAD,CAAK,YAAU,YAAY,UAAW,EAAG,6BAA8B,CAAS,EAC7E,UACE,CAAA,EAyBI,GAA6C,CAAE,QAAO,QAAO,gBAAgB,QAAS,eAE/F,EAAC,MAAD,CAAK,YAAU,iBAAiB,UAAW,EAAG,8EAA+E,CAAS,EAAtI,SAAA,CACE,EAAC,OAAD,CAAM,YAAU,kBAAkB,MAAO,CAAE,SAAU,CAAc,EAAG,UAAU,kCAC7E,SAAA,CACG,CAAA,EACN,EAAC,OAAD,CAAM,YAAU,kBAAkB,UAAU,6BACzC,SAAA,CACG,CAAA,CACH"}

package/dist/data-display/date-tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"date-tooltip.cjs","names":["TooltipProvider","Tooltip","TooltipTrigger","Badge","DateDisplay","TooltipContent"],"sources":["../../packages/components/data-display/date-tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from './date';\n\ntype DateTooltipProps = {\n  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */\n  date: Date | string | number;\n};\n\n/**\n * Displays a date as a badge; hovering reveals a tooltip with the full Vietnamese weekday and time.\n *\n * @example\n * ```tsx\n * import { DateTooltip } from '@customafk/lunas-ui/data-display/date-tooltip';\n *\n * <DateTooltip date=\"2024-03-15T14:30:00Z\" />\n * ```\n */\nexport const DateTooltip: React.FC<DateTooltipProps> = ({ date }) => {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge data-slot=\"date-tooltip-trigger\" className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"text-xs font-normal text-text-negative\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent data-slot=\"date-tooltip-content\">\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-[Inter]! font-medium\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"uNAsBA,MAAa,GAA2C,CAAE,WAEtD,EAAA,EAAA,IAAA,CAACA,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,YAAU,uBAAuB,UAAU,kBAChD,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wCAA0C,CAAA,CACxF,CAAA,CACO,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,YAAU,iCACxB,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,2BAA6B,CAAA,CACzE,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}
+{"version":3,"file":"date-tooltip.cjs","names":["TooltipProvider","Tooltip","TooltipTrigger","Badge","DateDisplay","TooltipContent"],"sources":["../../packages/components/data-display/date-tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from './date';\n\ntype DateTooltipProps = {\n  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */\n  date: Date | string | number;\n};\n\n/**\n * Displays a date as a badge; hovering reveals a tooltip with the full Vietnamese weekday and time.\n *\n * @example\n * ```tsx\n * import { DateTooltip } from '@customafk/lunas-ui/data-display/date-tooltip';\n *\n * <DateTooltip date=\"2024-03-15T14:30:00Z\" />\n * ```\n */\nexport const DateTooltip: React.FC<DateTooltipProps> = ({ date }) => {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge data-slot=\"date-tooltip-trigger\" className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"text-xs font-normal text-text-negative\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent data-slot=\"date-tooltip-content\">\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-[Inter]! font-medium\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"uNAsBA,MAAa,GAA2C,CAAE,WAEtD,EAAA,EAAA,IAAA,CAACA,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,YAAU,uBAAuB,UAAU,QAChD,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wCAA0C,CAAA,CACxF,CAAA,CACO,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,YAAU,uBACxB,UAAA,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,2BAA6B,CAAA,CACzE,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}

package/dist/data-display/date-tooltip.d.cts

@@ -1,2 +1,2 @@
-import { t as DateTooltip } from "../date-tooltip-DptxGOj_.cjs";
+import { t as DateTooltip } from "../date-tooltip-BZ4JiwfW.cjs";
 export { DateTooltip };

package/dist/data-display/date-tooltip.d.mts

@@ -1,2 +1,2 @@
-import { t as DateTooltip } from "../date-tooltip-DptxGOj_.mjs";
+import { t as DateTooltip } from "../date-tooltip-BZ4JiwfW.mjs";
 export { DateTooltip };

package/dist/data-display/date-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"date-tooltip.mjs","names":[],"sources":["../../packages/components/data-display/date-tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from './date';\n\ntype DateTooltipProps = {\n  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */\n  date: Date | string | number;\n};\n\n/**\n * Displays a date as a badge; hovering reveals a tooltip with the full Vietnamese weekday and time.\n *\n * @example\n * ```tsx\n * import { DateTooltip } from '@customafk/lunas-ui/data-display/date-tooltip';\n *\n * <DateTooltip date=\"2024-03-15T14:30:00Z\" />\n * ```\n */\nexport const DateTooltip: React.FC<DateTooltipProps> = ({ date }) => {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge data-slot=\"date-tooltip-trigger\" className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"text-xs font-normal text-text-negative\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent data-slot=\"date-tooltip-content\">\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-[Inter]! font-medium\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"yPAsBA,MAAa,GAA2C,CAAE,UAEtD,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,EAAD,CAAO,YAAU,uBAAuB,UAAU,iBAChD,EAAC,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wCAA0C,CAAA,CACxF,CAAA,CACO,CAAA,EAChB,EAAC,EAAD,CAAgB,YAAU,gCACxB,EAAC,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,2BAA6B,CAAA,CACzE,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}
+{"version":3,"file":"date-tooltip.mjs","names":[],"sources":["../../packages/components/data-display/date-tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from './date';\n\ntype DateTooltipProps = {\n  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */\n  date: Date | string | number;\n};\n\n/**\n * Displays a date as a badge; hovering reveals a tooltip with the full Vietnamese weekday and time.\n *\n * @example\n * ```tsx\n * import { DateTooltip } from '@customafk/lunas-ui/data-display/date-tooltip';\n *\n * <DateTooltip date=\"2024-03-15T14:30:00Z\" />\n * ```\n */\nexport const DateTooltip: React.FC<DateTooltipProps> = ({ date }) => {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge data-slot=\"date-tooltip-trigger\" className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"text-xs font-normal text-text-negative\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent data-slot=\"date-tooltip-content\">\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-[Inter]! font-medium\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"yPAsBA,MAAa,GAA2C,CAAE,UAEtD,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,EAAD,CAAO,YAAU,uBAAuB,UAAU,QAChD,SAAA,EAAC,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wCAA0C,CAAA,CACxF,CAAA,CACO,CAAA,EAChB,EAAC,EAAD,CAAgB,YAAU,uBACxB,SAAA,EAAC,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,2BAA6B,CAAA,CACzE,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}

package/dist/data-display/empty.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty.cjs","names":["PackageOpenIcon"],"sources":["../../packages/components/data-display/empty.tsx"],"sourcesContent":["'use client';\n\nimport { PackageOpenIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ntype EmptyDisplayProps = {\n  /** Message shown below the empty-state icon. Defaults to `'No data to display.'`. */\n  label?: string;\n  /** Additional CSS classes applied to the wrapping container. */\n  className?: string;\n};\n\n/**\n * A full-area empty-state placeholder with a package icon and a configurable message.\n *\n * @example\n * ```tsx\n * import { EmptyDisplay } from '@customafk/lunas-ui/data-display/empty';\n *\n * <EmptyDisplay label=\"No results found.\" />\n * ```\n */\nexport const EmptyDisplay: React.FC<EmptyDisplayProps> = ({ label = 'No data to display.', className }) => {\n  return (\n    <div data-slot=\"empty-display\" className={cn('flex size-full flex-col items-center justify-center gap-2 text-text-positive-muted', className)}>\n      <PackageOpenIcon size={52} strokeWidth={1} />\n      <p className=\"text-sm\">{label}</p>\n    </div>\n  );\n};\n"],"mappings":"yLAuBA,MAAa,GAA6C,CAAE,QAAQ,sBAAuB,gBAEvF,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,WAAA,EAAA,EAAA,GAAA,CAAc,qFAAsF,CAAS,WAA5I,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,gBAAD,CAAiB,KAAM,GAAI,YAAa,CAAI,CAAA,GAC5C,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,mBAAW,CAAS,CAAA,CAC9B"}
+{"version":3,"file":"empty.cjs","names":["PackageOpenIcon"],"sources":["../../packages/components/data-display/empty.tsx"],"sourcesContent":["'use client';\n\nimport { PackageOpenIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ntype EmptyDisplayProps = {\n  /** Message shown below the empty-state icon. Defaults to `'No data to display.'`. */\n  label?: string;\n  /** Additional CSS classes applied to the wrapping container. */\n  className?: string;\n};\n\n/**\n * A full-area empty-state placeholder with a package icon and a configurable message.\n *\n * @example\n * ```tsx\n * import { EmptyDisplay } from '@customafk/lunas-ui/data-display/empty';\n *\n * <EmptyDisplay label=\"No results found.\" />\n * ```\n */\nexport const EmptyDisplay: React.FC<EmptyDisplayProps> = ({ label = 'No data to display.', className }) => {\n  return (\n    <div data-slot=\"empty-display\" className={cn('flex size-full flex-col items-center justify-center gap-2 text-text-positive-muted', className)}>\n      <PackageOpenIcon size={52} strokeWidth={1} />\n      <p className=\"text-sm\">{label}</p>\n    </div>\n  );\n};\n"],"mappings":"yLAuBA,MAAa,GAA6C,CAAE,QAAQ,sBAAuB,gBAEvF,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,WAAA,EAAA,EAAA,GAAA,CAAc,qFAAsF,CAAS,EAA5I,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,gBAAD,CAAiB,KAAM,GAAI,YAAa,CAAI,CAAA,GAC5C,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,UAAW,SAAA,CAAS,CAAA,CAC9B"}