@customafk/lunas-ui 0.2.65 → 0.2.66

package/dist/radio-group-ycQQrPGn.d.cts

@@ -0,0 +1,35 @@
+import { RadioGroup } from "radix-ui";
+
+//#region packages/components/ui/radio-group.d.ts
+/**
+ * Accessible radio button group built on Radix UI's RadioGroup primitive, where only one option can be selected at a time.
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem } from '@customafk/lunas-ui/ui/radio-group';
+ * import { Label } from '@customafk/lunas-ui/ui/label';
+ *
+ * <RadioGroup defaultValue="monthly">
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="monthly" id="monthly" />
+ *     <Label htmlFor="monthly">Monthly</Label>
+ *   </div>
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="annually" id="annually" />
+ *     <Label htmlFor="annually">Annually</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup.Root>): import("react").JSX.Element;
+/** Individual radio button within a `RadioGroup`; shows a filled circle indicator when selected. */
+declare function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup.Item>): import("react").JSX.Element;
+//#endregion
+export { RadioGroupItem as n, RadioGroup$1 as t };
+//# sourceMappingURL=radio-group-ycQQrPGn.d.cts.map

package/dist/radio-group-ycQQrPGn.d.mts

@@ -0,0 +1,35 @@
+import { RadioGroup } from "radix-ui";
+
+//#region packages/components/ui/radio-group.d.ts
+/**
+ * Accessible radio button group built on Radix UI's RadioGroup primitive, where only one option can be selected at a time.
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem } from '@customafk/lunas-ui/ui/radio-group';
+ * import { Label } from '@customafk/lunas-ui/ui/label';
+ *
+ * <RadioGroup defaultValue="monthly">
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="monthly" id="monthly" />
+ *     <Label htmlFor="monthly">Monthly</Label>
+ *   </div>
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="annually" id="annually" />
+ *     <Label htmlFor="annually">Annually</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup.Root>): import("react").JSX.Element;
+/** Individual radio button within a `RadioGroup`; shows a filled circle indicator when selected. */
+declare function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup.Item>): import("react").JSX.Element;
+//#endregion
+export { RadioGroupItem as n, RadioGroup$1 as t };
+//# sourceMappingURL=radio-group-ycQQrPGn.d.mts.map

package/dist/refresh-BiyrZAXL.d.cts

@@ -0,0 +1,16 @@
+//#region packages/components/ui/buttons/refresh.d.ts
+type Props = {
+  /** Callback invoked when the button is clicked. Defaults to a no-op. */onClick?: () => void;
+};
+/**
+ * A toolbar button that triggers a refresh/reset action, displaying a rotating arrows icon alongside a "Reset" label that is hidden on small screens.
+ *
+ * @example
+ * import { RefreshBtn } from '@customafk/lunas-ui/ui/buttons/refresh';
+ *
+ * <RefreshBtn onClick={() => resetFilters()} />
+ */
+declare const RefreshBtn: React.FC<React.PropsWithChildren<Props>>;
+//#endregion
+export { RefreshBtn as t };
+//# sourceMappingURL=refresh-BiyrZAXL.d.cts.map

package/dist/refresh-BiyrZAXL.d.mts

@@ -0,0 +1,16 @@
+//#region packages/components/ui/buttons/refresh.d.ts
+type Props = {
+  /** Callback invoked when the button is clicked. Defaults to a no-op. */onClick?: () => void;
+};
+/**
+ * A toolbar button that triggers a refresh/reset action, displaying a rotating arrows icon alongside a "Reset" label that is hidden on small screens.
+ *
+ * @example
+ * import { RefreshBtn } from '@customafk/lunas-ui/ui/buttons/refresh';
+ *
+ * <RefreshBtn onClick={() => resetFilters()} />
+ */
+declare const RefreshBtn: React.FC<React.PropsWithChildren<Props>>;
+//#endregion
+export { RefreshBtn as t };
+//# sourceMappingURL=refresh-BiyrZAXL.d.mts.map

package/dist/remove-button-B3qFw-M5.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./ui/tooltip.cjs");let n=require("lucide-react"),r=require("react"),i=require("react/jsx-runtime");const a=({title:a,onClick:o})=>(0,i.jsxs)(t.Tooltip,{children:[(0,i.jsx)(t.TooltipTrigger,{children:(0,i.jsx)(e.Button,{type:`button`,variant:`ghost`,color:`danger`,size:`icon`,onClick:(0,r.useCallback)(async e=>{e.preventDefault(),e.stopPropagation(),await o?.()},[o]),children:(0,i.jsx)(n.Trash2Icon,{})})}),(0,i.jsx)(t.TooltipContent,{children:(0,i.jsx)(`p`,{children:a||`Remove item from list table`})})]});exports.UITableRemoveButton=a;
+//# sourceMappingURL=remove-button-B3qFw-M5.cjs.map

package/dist/remove-button-B3qFw-M5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove-button-B3qFw-M5.cjs","names":["Tooltip","TooltipTrigger","Button","Trash2Icon","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/remove-button.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { Trash2Icon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost danger icon button with a trash icon that triggers an async removal\n * handler; displays a descriptive tooltip on hover to confirm the action intent.\n *\n * @example\n * import { UITableRemoveButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableRemoveButton\n *   title=\"Remove member from project\"\n *   onClick={async () => await deleteRow(rowId)}\n * />\n */\nexport const UITableRemoveButton: React.FC<{\n  /** Tooltip label describing what will be removed; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"danger\" size=\"icon\" onClick={handleClick}>\n          <Trash2Icon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Remove item from list table'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"iJAmBA,MAAa,GAKP,CAAE,QAAO,cAUX,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,SAAS,KAAK,OAAO,SAAA,EAAA,EAAA,YAAA,CAVrE,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKgF,YAClF,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,GAAS,6BAAiC,CAAA,CAChC,CAAA,CACT,CAAA,CAAA"}

package/dist/remove-button-Db5oSj4h.mjs

@@ -0,0 +1,2 @@
+import{Button as e}from"./ui/button.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Trash2Icon as i}from"lucide-react";import{useCallback as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({title:c,onClick:l})=>s(t,{children:[o(r,{children:o(e,{type:`button`,variant:`ghost`,color:`danger`,size:`icon`,onClick:a(async e=>{e.preventDefault(),e.stopPropagation(),await l?.()},[l]),children:o(i,{})})}),o(n,{children:o(`p`,{children:c||`Remove item from list table`})})]});export{c as UITableRemoveButton};
+//# sourceMappingURL=remove-button-Db5oSj4h.mjs.map

package/dist/remove-button-Db5oSj4h.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove-button-Db5oSj4h.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/remove-button.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { Trash2Icon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost danger icon button with a trash icon that triggers an async removal\n * handler; displays a descriptive tooltip on hover to confirm the action intent.\n *\n * @example\n * import { UITableRemoveButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableRemoveButton\n *   title=\"Remove member from project\"\n *   onClick={async () => await deleteRow(rowId)}\n * />\n */\nexport const UITableRemoveButton: React.FC<{\n  /** Tooltip label describing what will be removed; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"danger\" size=\"icon\" onClick={handleClick}>\n          <Trash2Icon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Remove item from list table'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"4PAmBA,MAAa,GAKP,CAAE,QAAO,aAUX,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,SAAS,KAAK,OAAO,QAXnD,EAClB,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKgF,WAClF,EAAC,EAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAA,SACE,EAAC,IAAD,CAAA,SAAI,GAAS,6BAAiC,CAAA,CAChC,CAAA,CACT,CAAA,CAAA"}

package/dist/{resizable-BLfxHCf4.d.cts → resizable-CAyWR1At.d.cts}

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

package/dist/{resizable-BLfxHCf4.d.mts → resizable-CAyWR1At.d.mts}

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

package/dist/revenue-area-chart-BwzeTRzD.mjs

@@ -0,0 +1,2 @@
+import{formatCurrency as e,toDateLabel as t}from"./features/charts/index.mjs";import{ChartContainer as n,ChartLegend as r,ChartLegendContent as i,ChartTooltip as a,ChartTooltipContent as o}from"./ui/chart.mjs";import{useId as s,useMemo as c}from"react";import{cn as l}from"@customafk/react-toolkit/utils";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{Area as p,AreaChart as m,CartesianGrid as h,XAxis as g,YAxis as _}from"recharts";const v=({data:v,label:y=`Revenue`,comparisonLabel:b=`Previous period`,showComparison:x=!1,color:S=`var(--chart-1)`,comparisonColor:C=`var(--chart-8)`,valueFormatter:w=t=>e(t),dateFormatter:T=t,showLegend:E=x,showGrid:D=!0,className:O,animate:k=!0,height:A})=>{let j=s(),M=c(()=>({value:{label:y,color:S},...x?{previousValue:{label:b,color:C}}:{}}),[y,S,x,b,C]);return d(n,{"data-slot":`revenue-area-chart`,config:M,className:l(`w-full`,O),style:A===void 0?void 0:{height:A,aspectRatio:`auto`},children:f(m,{data:v,margin:{top:8,right:12,bottom:0,left:12},children:[f(`defs`,{children:[f(`linearGradient`,{id:`${j}-value`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[d(`stop`,{offset:`5%`,stopColor:S,stopOpacity:.6}),d(`stop`,{offset:`95%`,stopColor:S,stopOpacity:.05})]}),f(`linearGradient`,{id:`${j}-previous`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[d(`stop`,{offset:`5%`,stopColor:C,stopOpacity:.3}),d(`stop`,{offset:`95%`,stopColor:C,stopOpacity:.02})]})]}),D&&d(h,{vertical:!1}),d(g,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:T}),d(_,{tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:w}),d(a,{cursor:!1,content:d(o,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?T(n):null},formatter:(e,t,n)=>f(u,{children:[d(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),d(`span`,{className:`text-muted`,children:M[String(t)]?.label||t}),d(`span`,{className:`text-text-positive-strong font-number ml-auto font-medium tabular-nums`,children:w(Number(e))})]})})}),x&&d(p,{type:`natural`,dataKey:`previousValue`,stroke:C,strokeWidth:2,strokeDasharray:`4 4`,fill:`url(#${j}-previous)`,isAnimationActive:k}),d(p,{type:`natural`,dataKey:`value`,stroke:S,strokeWidth:2,fill:`url(#${j}-value)`,isAnimationActive:k}),E&&d(r,{content:d(i,{})})]})})};export{v as RevenueAreaChart};
+//# sourceMappingURL=revenue-area-chart-BwzeTRzD.mjs.map

package/dist/revenue-area-chart-BwzeTRzD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"revenue-area-chart-BwzeTRzD.mjs","names":[],"sources":["../packages/components/features/charts/components/revenue-area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, TimeSeriesPoint } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueAreaChartProps = BaseChartProps & {\n  data: TimeSeriesPoint[];\n  /** Series label. Defaults to `'Revenue'`. */\n  label?: string;\n  /** Comparison series label. Defaults to `'Previous period'`. */\n  comparisonLabel?: string;\n  /** Renders `previousValue` as a second, muted area series. */\n  showComparison?: boolean;\n  color?: string;\n  comparisonColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to compact currency. */\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `showComparison`. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A gradient area chart for revenue (or any currency metric) over time, with an optional\n * previous-period comparison series.\n *\n * @example\n * ```tsx\n * import { RevenueAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueAreaChart\n *   data={[\n *     { date: '2026-06-01', value: 4200, previousValue: 3800 },\n *     { date: '2026-06-02', value: 5100, previousValue: 4300 },\n *   ]}\n *   showComparison\n * />\n * ```\n */\nexport const RevenueAreaChart = ({\n  data,\n  label = 'Revenue',\n  comparisonLabel = 'Previous period',\n  showComparison = false,\n  color = 'var(--chart-1)',\n  comparisonColor = 'var(--chart-8)',\n  valueFormatter = value => formatCurrency(value),\n  dateFormatter = toDateLabel,\n  showLegend = showComparison,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueAreaChartProps) => {\n  const gradientId = useId();\n\n  const config = useMemo<ChartConfig>(\n    () => ({\n      value: { label, color },\n      ...(showComparison ? { previousValue: { label: comparisonLabel, color: comparisonColor } } : {}),\n    }),\n    [label, color, showComparison, comparisonLabel, comparisonColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        <defs>\n          <linearGradient id={`${gradientId}-value`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={color} stopOpacity={0.6} />\n            <stop offset=\"95%\" stopColor={color} stopOpacity={0.05} />\n          </linearGradient>\n          <linearGradient id={`${gradientId}-previous`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={comparisonColor} stopOpacity={0.3} />\n            <stop offset=\"95%\" stopColor={comparisonColor} stopOpacity={0.02} />\n          </linearGradient>\n        </defs>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">{valueFormatter(Number(value))}</span>\n                </>\n              )}\n            />\n          }\n        />\n        {showComparison && (\n          <Area\n            type=\"natural\"\n            dataKey=\"previousValue\"\n            stroke={comparisonColor}\n            strokeWidth={2}\n            strokeDasharray=\"4 4\"\n            fill={`url(#${gradientId}-previous)`}\n            isAnimationActive={animate}\n          />\n        )}\n        <Area type=\"natural\" dataKey=\"value\" stroke={color} strokeWidth={2} fill={`url(#${gradientId}-value)`} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"ycA+CA,MAAa,GAAoB,CAC/B,OACA,QAAQ,UACR,kBAAkB,kBAClB,iBAAiB,GACjB,QAAQ,iBACR,kBAAkB,iBAClB,iBAAiB,GAAS,EAAe,CAAK,EAC9C,gBAAgB,EAChB,aAAa,EACb,WAAW,GACX,YACA,UAAU,GACV,YAC2B,CAC3B,IAAM,EAAa,EAAM,EAEnB,EAAS,OACN,CACL,MAAO,CAAE,QAAO,OAAM,EACtB,GAAI,EAAiB,CAAE,cAAe,CAAE,MAAO,EAAiB,MAAO,CAAgB,CAAE,EAAI,CAAC,CAChG,GACA,CAAC,EAAO,EAAO,EAAgB,EAAiB,CAAe,CACjE,EAEA,OACE,EAAC,EAAD,CACE,YAAU,qBACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAiB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAxE,CACE,EAAC,OAAD,CAAA,SAAA,CACE,EAAC,iBAAD,CAAgB,GAAI,GAAG,EAAW,QAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,aAAnE,CACE,EAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAO,YAAa,EAAM,CAAA,EACvD,EAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAO,YAAa,GAAO,CAAA,CAC3C,IAChB,EAAC,iBAAD,CAAgB,GAAI,GAAG,EAAW,WAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,aAAtE,CACE,EAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAiB,YAAa,EAAM,CAAA,EACjE,EAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAiB,YAAa,GAAO,CAAA,CACrD,GACZ,CAAA,CAAA,EACL,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,EACtG,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EACnG,EAAC,EAAD,CACE,OAAQ,GACR,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,WAAY,EAAO,EAAM,IACvB,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,EAC1F,EAAC,OAAD,CAAM,UAAU,sBAAc,EAAO,OAAO,CAAI,EAAE,EAAE,OAAS,CAAW,CAAA,EACxE,EAAC,OAAD,CAAM,UAAU,kFAA0E,EAAe,OAAO,CAAK,CAAC,CAAQ,CAAA,CAC9H,CAAA,CAAA,CAEL,CAAA,CAEJ,CAAA,EACA,GACC,EAAC,EAAD,CACE,KAAK,UACL,QAAQ,gBACR,OAAQ,EACR,YAAa,EACb,gBAAgB,MAChB,KAAM,QAAQ,EAAW,YACzB,kBAAmB,CACpB,CAAA,EAEH,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAO,YAAa,EAAG,KAAM,QAAQ,EAAW,SAAU,kBAAmB,CAAU,CAAA,EACnI,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACrD,GACG,CAAA,CAEpB"}

package/dist/revenue-area-chart-w2FZCl_7.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=({data:o,label:s=`Revenue`,comparisonLabel:c=`Previous period`,showComparison:l=!1,color:u=`var(--chart-1)`,comparisonColor:d=`var(--chart-8)`,valueFormatter:f=t=>e.formatCurrency(t),dateFormatter:p=e.toDateLabel,showLegend:m=l,showGrid:h=!0,className:g,animate:_=!0,height:v})=>{let y=(0,n.useId)(),b=(0,n.useMemo)(()=>({value:{label:s,color:u},...l?{previousValue:{label:c,color:d}}:{}}),[s,u,l,c,d]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`revenue-area-chart`,config:b,className:(0,r.cn)(`w-full`,g),style:v===void 0?void 0:{height:v,aspectRatio:`auto`},children:(0,i.jsxs)(a.AreaChart,{data:o,margin:{top:8,right:12,bottom:0,left:12},children:[(0,i.jsxs)(`defs`,{children:[(0,i.jsxs)(`linearGradient`,{id:`${y}-value`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,i.jsx)(`stop`,{offset:`5%`,stopColor:u,stopOpacity:.6}),(0,i.jsx)(`stop`,{offset:`95%`,stopColor:u,stopOpacity:.05})]}),(0,i.jsxs)(`linearGradient`,{id:`${y}-previous`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,i.jsx)(`stop`,{offset:`5%`,stopColor:d,stopOpacity:.3}),(0,i.jsx)(`stop`,{offset:`95%`,stopColor:d,stopOpacity:.02})]})]}),h&&(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:p}),(0,i.jsx)(a.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:f}),(0,i.jsx)(t.ChartTooltip,{cursor:!1,content:(0,i.jsx)(t.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?p(n):null},formatter:(e,t,n)=>(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),(0,i.jsx)(`span`,{className:`text-muted`,children:b[String(t)]?.label||t}),(0,i.jsx)(`span`,{className:`text-text-positive-strong font-number ml-auto font-medium tabular-nums`,children:f(Number(e))})]})})}),l&&(0,i.jsx)(a.Area,{type:`natural`,dataKey:`previousValue`,stroke:d,strokeWidth:2,strokeDasharray:`4 4`,fill:`url(#${y}-previous)`,isAnimationActive:_}),(0,i.jsx)(a.Area,{type:`natural`,dataKey:`value`,stroke:u,strokeWidth:2,fill:`url(#${y}-value)`,isAnimationActive:_}),m&&(0,i.jsx)(t.ChartLegend,{content:(0,i.jsx)(t.ChartLegendContent,{})})]})})};exports.RevenueAreaChart=o;
+//# sourceMappingURL=revenue-area-chart-w2FZCl_7.cjs.map

package/dist/revenue-area-chart-w2FZCl_7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"revenue-area-chart-w2FZCl_7.cjs","names":["formatCurrency","toDateLabel","ChartContainer","AreaChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Area","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/revenue-area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, TimeSeriesPoint } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueAreaChartProps = BaseChartProps & {\n  data: TimeSeriesPoint[];\n  /** Series label. Defaults to `'Revenue'`. */\n  label?: string;\n  /** Comparison series label. Defaults to `'Previous period'`. */\n  comparisonLabel?: string;\n  /** Renders `previousValue` as a second, muted area series. */\n  showComparison?: boolean;\n  color?: string;\n  comparisonColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to compact currency. */\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `showComparison`. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A gradient area chart for revenue (or any currency metric) over time, with an optional\n * previous-period comparison series.\n *\n * @example\n * ```tsx\n * import { RevenueAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueAreaChart\n *   data={[\n *     { date: '2026-06-01', value: 4200, previousValue: 3800 },\n *     { date: '2026-06-02', value: 5100, previousValue: 4300 },\n *   ]}\n *   showComparison\n * />\n * ```\n */\nexport const RevenueAreaChart = ({\n  data,\n  label = 'Revenue',\n  comparisonLabel = 'Previous period',\n  showComparison = false,\n  color = 'var(--chart-1)',\n  comparisonColor = 'var(--chart-8)',\n  valueFormatter = value => formatCurrency(value),\n  dateFormatter = toDateLabel,\n  showLegend = showComparison,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueAreaChartProps) => {\n  const gradientId = useId();\n\n  const config = useMemo<ChartConfig>(\n    () => ({\n      value: { label, color },\n      ...(showComparison ? { previousValue: { label: comparisonLabel, color: comparisonColor } } : {}),\n    }),\n    [label, color, showComparison, comparisonLabel, comparisonColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        <defs>\n          <linearGradient id={`${gradientId}-value`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={color} stopOpacity={0.6} />\n            <stop offset=\"95%\" stopColor={color} stopOpacity={0.05} />\n          </linearGradient>\n          <linearGradient id={`${gradientId}-previous`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={comparisonColor} stopOpacity={0.3} />\n            <stop offset=\"95%\" stopColor={comparisonColor} stopOpacity={0.02} />\n          </linearGradient>\n        </defs>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">{valueFormatter(Number(value))}</span>\n                </>\n              )}\n            />\n          }\n        />\n        {showComparison && (\n          <Area\n            type=\"natural\"\n            dataKey=\"previousValue\"\n            stroke={comparisonColor}\n            strokeWidth={2}\n            strokeDasharray=\"4 4\"\n            fill={`url(#${gradientId}-previous)`}\n            isAnimationActive={animate}\n          />\n        )}\n        <Area type=\"natural\" dataKey=\"value\" stroke={color} strokeWidth={2} fill={`url(#${gradientId}-value)`} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}

package/dist/revenue-orders-composed-chart-BttOWYGt.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=({data:o,revenueLabel:s=`Revenue`,ordersLabel:c=`Orders`,revenueColor:l=`var(--chart-1)`,ordersColor:u=`var(--chart-4)`,revenueFormatter:d=t=>e.formatCurrency(t),ordersFormatter:f=e=>e.toLocaleString(`en-US`),dateFormatter:p=e.toDateLabel,showLegend:m=!0,showGrid:h=!0,className:g,animate:_=!0,height:v})=>{let y=(0,n.useMemo)(()=>({revenue:{label:s,color:l},orders:{label:c,color:u}}),[s,l,c,u]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`revenue-orders-composed-chart`,config:y,className:(0,r.cn)(`w-full`,g),style:v===void 0?void 0:{height:v,aspectRatio:`auto`},children:(0,i.jsxs)(a.ComposedChart,{data:o,margin:{top:8,right:12,bottom:0,left:12},children:[h&&(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:p}),(0,i.jsx)(a.YAxis,{yAxisId:`revenue`,tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:d}),(0,i.jsx)(a.YAxis,{yAxisId:`orders`,orientation:`right`,tickLine:!1,axisLine:!1,tickMargin:8,width:48,allowDecimals:!1,tickFormatter:f}),(0,i.jsx)(t.ChartTooltip,{content:(0,i.jsx)(t.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?p(n):null},formatter:(e,t,n)=>(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),(0,i.jsx)(`span`,{className:`text-muted`,children:y[String(t)]?.label||t}),(0,i.jsx)(`span`,{className:`text-text-positive-strong font-number ml-auto font-medium tabular-nums`,children:t===`revenue`?d(Number(e)):f(Number(e))})]})})}),(0,i.jsx)(a.Bar,{dataKey:`revenue`,yAxisId:`revenue`,fill:l,radius:[4,4,0,0],isAnimationActive:_}),(0,i.jsx)(a.Line,{type:`natural`,dataKey:`orders`,yAxisId:`orders`,stroke:u,strokeWidth:2,dot:!1,isAnimationActive:_}),m&&(0,i.jsx)(t.ChartLegend,{content:(0,i.jsx)(t.ChartLegendContent,{})})]})})};exports.RevenueOrdersComposedChart=o;
+//# sourceMappingURL=revenue-orders-composed-chart-BttOWYGt.cjs.map

package/dist/revenue-orders-composed-chart-BttOWYGt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"revenue-orders-composed-chart-BttOWYGt.cjs","names":["formatCurrency","toDateLabel","ChartContainer","ComposedChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","Line","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/revenue-orders-composed-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueOrdersPoint = {\n  date: string | Date;\n  revenue: number;\n  orders: number;\n};\n\nexport type RevenueOrdersComposedChartProps = BaseChartProps & {\n  data: RevenueOrdersPoint[];\n  revenueLabel?: string;\n  ordersLabel?: string;\n  revenueColor?: string;\n  ordersColor?: string;\n  /** Formats the left (revenue) axis and tooltip values. Defaults to compact currency. */\n  revenueFormatter?: (value: number) => string;\n  /** Formats the right (orders) axis and tooltip values. */\n  ordersFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A dual-axis chart combining revenue bars (left axis, currency) with an orders line\n * (right axis, count) to correlate the two metrics per period.\n *\n * @example\n * ```tsx\n * import { RevenueOrdersComposedChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueOrdersComposedChart\n *   data={[{ date: '2026-06-01', revenue: 12400, orders: 87 }]}\n * />\n * ```\n */\nexport const RevenueOrdersComposedChart = ({\n  data,\n  revenueLabel = 'Revenue',\n  ordersLabel = 'Orders',\n  revenueColor = 'var(--chart-1)',\n  ordersColor = 'var(--chart-4)',\n  revenueFormatter = value => formatCurrency(value),\n  ordersFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueOrdersComposedChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => ({\n      revenue: { label: revenueLabel, color: revenueColor },\n      orders: { label: ordersLabel, color: ordersColor },\n    }),\n    [revenueLabel, revenueColor, ordersLabel, ordersColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-orders-composed-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis yAxisId=\"revenue\" tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={revenueFormatter} />\n        <YAxis\n          yAxisId=\"orders\"\n          orientation=\"right\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          width={48}\n          allowDecimals={false}\n          tickFormatter={ordersFormatter}\n        />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">\n                    {name === 'revenue' ? revenueFormatter(Number(value)) : ordersFormatter(Number(value))}\n                  </span>\n                </>\n              )}\n            />\n          }\n        />\n        <Bar dataKey=\"revenue\" yAxisId=\"revenue\" fill={revenueColor} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        <Line type=\"natural\" dataKey=\"orders\" yAxisId=\"orders\" stroke={ordersColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA8CA,MAAa,GAA8B,CACzC,OACA,eAAe,UACf,cAAc,SACd,eAAe,iBACf,cAAc,iBACd,mBAAmB,GAASA,EAAAA,eAAe,CAAK,EAChD,kBAAkB,GAAS,EAAM,eAAe,OAAO,EACvD,gBAAgBC,EAAAA,YAChB,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,YACqC,CACrC,IAAM,GAAA,EAAA,EAAA,QAAA,MACG,CACL,QAAS,CAAE,MAAO,EAAc,MAAO,CAAa,EACpD,OAAQ,CAAE,MAAO,EAAa,MAAO,CAAY,CACnD,GACA,CAAC,EAAc,EAAc,EAAa,CAAW,CACvD,EAEA,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,gCACF,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,cAAD,CAAqB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAA5E,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,GACtG,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,UAAU,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAmB,CAAA,GACvH,EAAA,EAAA,IAAA,CAACA,EAAAA,MAAD,CACE,QAAQ,SACR,YAAY,QACZ,SAAU,GACV,SAAU,GACV,WAAY,EACZ,MAAO,GACP,cAAe,GACf,cAAe,CAChB,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,WAAY,EAAO,EAAM,KACvB,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,GAC1F,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,sBAAc,EAAO,OAAO,CAAI,EAAE,EAAE,OAAS,CAAW,CAAA,GACxE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kFACb,IAAS,UAAY,EAAiB,OAAO,CAAK,CAAC,EAAI,EAAgB,OAAO,CAAK,CAAC,CACjF,CAAA,CACN,CAAA,CAAA,CAEL,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAAK,QAAQ,UAAU,QAAQ,UAAU,KAAM,EAAc,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,GAChH,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAD,CAAM,KAAK,UAAU,QAAQ,SAAS,QAAQ,SAAS,OAAQ,EAAa,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,EACpI,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACjD,GACD,CAAA,CAEpB"}

package/dist/revenue-orders-composed-chart-DwkbWZSX.mjs

@@ -0,0 +1,2 @@
+import{formatCurrency as e,toDateLabel as t}from"./features/charts/index.mjs";import{ChartContainer as n,ChartLegend as r,ChartLegendContent as i,ChartTooltip as a,ChartTooltipContent as o}from"./ui/chart.mjs";import{useMemo as s}from"react";import{cn as c}from"@customafk/react-toolkit/utils";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{Bar as f,CartesianGrid as p,ComposedChart as m,Line as h,XAxis as g,YAxis as _}from"recharts";const v=({data:v,revenueLabel:y=`Revenue`,ordersLabel:b=`Orders`,revenueColor:x=`var(--chart-1)`,ordersColor:S=`var(--chart-4)`,revenueFormatter:C=t=>e(t),ordersFormatter:w=e=>e.toLocaleString(`en-US`),dateFormatter:T=t,showLegend:E=!0,showGrid:D=!0,className:O,animate:k=!0,height:A})=>{let j=s(()=>({revenue:{label:y,color:x},orders:{label:b,color:S}}),[y,x,b,S]);return u(n,{"data-slot":`revenue-orders-composed-chart`,config:j,className:c(`w-full`,O),style:A===void 0?void 0:{height:A,aspectRatio:`auto`},children:d(m,{data:v,margin:{top:8,right:12,bottom:0,left:12},children:[D&&u(p,{vertical:!1}),u(g,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:T}),u(_,{yAxisId:`revenue`,tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:C}),u(_,{yAxisId:`orders`,orientation:`right`,tickLine:!1,axisLine:!1,tickMargin:8,width:48,allowDecimals:!1,tickFormatter:w}),u(a,{content:u(o,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?T(n):null},formatter:(e,t,n)=>d(l,{children:[u(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),u(`span`,{className:`text-muted`,children:j[String(t)]?.label||t}),u(`span`,{className:`text-text-positive-strong font-number ml-auto font-medium tabular-nums`,children:t===`revenue`?C(Number(e)):w(Number(e))})]})})}),u(f,{dataKey:`revenue`,yAxisId:`revenue`,fill:x,radius:[4,4,0,0],isAnimationActive:k}),u(h,{type:`natural`,dataKey:`orders`,yAxisId:`orders`,stroke:S,strokeWidth:2,dot:!1,isAnimationActive:k}),E&&u(r,{content:u(i,{})})]})})};export{v as RevenueOrdersComposedChart};
+//# sourceMappingURL=revenue-orders-composed-chart-DwkbWZSX.mjs.map

package/dist/revenue-orders-composed-chart-DwkbWZSX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"revenue-orders-composed-chart-DwkbWZSX.mjs","names":[],"sources":["../packages/components/features/charts/components/revenue-orders-composed-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueOrdersPoint = {\n  date: string | Date;\n  revenue: number;\n  orders: number;\n};\n\nexport type RevenueOrdersComposedChartProps = BaseChartProps & {\n  data: RevenueOrdersPoint[];\n  revenueLabel?: string;\n  ordersLabel?: string;\n  revenueColor?: string;\n  ordersColor?: string;\n  /** Formats the left (revenue) axis and tooltip values. Defaults to compact currency. */\n  revenueFormatter?: (value: number) => string;\n  /** Formats the right (orders) axis and tooltip values. */\n  ordersFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A dual-axis chart combining revenue bars (left axis, currency) with an orders line\n * (right axis, count) to correlate the two metrics per period.\n *\n * @example\n * ```tsx\n * import { RevenueOrdersComposedChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueOrdersComposedChart\n *   data={[{ date: '2026-06-01', revenue: 12400, orders: 87 }]}\n * />\n * ```\n */\nexport const RevenueOrdersComposedChart = ({\n  data,\n  revenueLabel = 'Revenue',\n  ordersLabel = 'Orders',\n  revenueColor = 'var(--chart-1)',\n  ordersColor = 'var(--chart-4)',\n  revenueFormatter = value => formatCurrency(value),\n  ordersFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueOrdersComposedChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => ({\n      revenue: { label: revenueLabel, color: revenueColor },\n      orders: { label: ordersLabel, color: ordersColor },\n    }),\n    [revenueLabel, revenueColor, ordersLabel, ordersColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-orders-composed-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis yAxisId=\"revenue\" tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={revenueFormatter} />\n        <YAxis\n          yAxisId=\"orders\"\n          orientation=\"right\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          width={48}\n          allowDecimals={false}\n          tickFormatter={ordersFormatter}\n        />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">\n                    {name === 'revenue' ? revenueFormatter(Number(value)) : ordersFormatter(Number(value))}\n                  </span>\n                </>\n              )}\n            />\n          }\n        />\n        <Bar dataKey=\"revenue\" yAxisId=\"revenue\" fill={revenueColor} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        <Line type=\"natural\" dataKey=\"orders\" yAxisId=\"orders\" stroke={ordersColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"2cA8CA,MAAa,GAA8B,CACzC,OACA,eAAe,UACf,cAAc,SACd,eAAe,iBACf,cAAc,iBACd,mBAAmB,GAAS,EAAe,CAAK,EAChD,kBAAkB,GAAS,EAAM,eAAe,OAAO,EACvD,gBAAgB,EAChB,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,YACqC,CACrC,IAAM,EAAS,OACN,CACL,QAAS,CAAE,MAAO,EAAc,MAAO,CAAa,EACpD,OAAQ,CAAE,MAAO,EAAa,MAAO,CAAY,CACnD,GACA,CAAC,EAAc,EAAc,EAAa,CAAW,CACvD,EAEA,OACE,EAAC,EAAD,CACE,YAAU,gCACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAqB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAA5E,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,EACtG,EAAC,EAAD,CAAO,QAAQ,UAAU,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAmB,CAAA,EACvH,EAAC,EAAD,CACE,QAAQ,SACR,YAAY,QACZ,SAAU,GACV,SAAU,GACV,WAAY,EACZ,MAAO,GACP,cAAe,GACf,cAAe,CAChB,CAAA,EACD,EAAC,EAAD,CACE,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,WAAY,EAAO,EAAM,IACvB,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,EAC1F,EAAC,OAAD,CAAM,UAAU,sBAAc,EAAO,OAAO,CAAI,EAAE,EAAE,OAAS,CAAW,CAAA,EACxE,EAAC,OAAD,CAAM,UAAU,kFACb,IAAS,UAAY,EAAiB,OAAO,CAAK,CAAC,EAAI,EAAgB,OAAO,CAAK,CAAC,CACjF,CAAA,CACN,CAAA,CAAA,CAEL,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CAAK,QAAQ,UAAU,QAAQ,UAAU,KAAM,EAAc,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EAChH,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,SAAS,QAAQ,SAAS,OAAQ,EAAa,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,EACpI,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACjD,GACD,CAAA,CAEpB"}

package/dist/role-badge-Bl4Rimpk.d.mts

@@ -0,0 +1,21 @@
+import { r as ERole } from "./types-cKvPPVBe.mjs";
+
+//#region packages/components/data-display/role-badge.d.ts
+type RoleBadgeProps = {
+  /** The user role enum value that determines the badge label and colour. */status: ERole;
+};
+/**
+ * Renders a colour-coded badge for a user role (e.g. Admin, Staff, User).
+ *
+ * @example
+ * ```tsx
+ * import { RoleBadge } from '@customafk/lunas-ui/data-display/role-badge';
+ * import { ERole } from '@customafk/lunas-ui/types';
+ *
+ * <RoleBadge status={ERole.ADMIN} />
+ * ```
+ */
+declare const RoleBadge: React.FC<RoleBadgeProps>;
+//#endregion
+export { RoleBadge as t };
+//# sourceMappingURL=role-badge-Bl4Rimpk.d.mts.map

package/dist/role-badge-IdZW0tsN.d.cts

@@ -0,0 +1,21 @@
+import { r as ERole } from "./types-cKvPPVBe.cjs";
+
+//#region packages/components/data-display/role-badge.d.ts
+type RoleBadgeProps = {
+  /** The user role enum value that determines the badge label and colour. */status: ERole;
+};
+/**
+ * Renders a colour-coded badge for a user role (e.g. Admin, Staff, User).
+ *
+ * @example
+ * ```tsx
+ * import { RoleBadge } from '@customafk/lunas-ui/data-display/role-badge';
+ * import { ERole } from '@customafk/lunas-ui/types';
+ *
+ * <RoleBadge status={ERole.ADMIN} />
+ * ```
+ */
+declare const RoleBadge: React.FC<RoleBadgeProps>;
+//#endregion
+export { RoleBadge as t };
+//# sourceMappingURL=role-badge-IdZW0tsN.d.cts.map

package/dist/sales-target-radial-chart-BFLxBT2m.mjs

@@ -0,0 +1,2 @@
+import{formatPercent as e}from"./features/charts/index.mjs";import{ChartContainer as t}from"./ui/chart.mjs";import{useMemo as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{Label as o,PolarAngleAxis as s,PolarRadiusAxis as c,RadialBar as l,RadialBarChart as u}from"recharts";const d=({value:d,target:f,label:p=`Target`,valueFormatter:m=(t,n)=>e(n===0?0:t/n),color:h=`var(--chart-1)`,className:g,animate:_=!0,height:v})=>{let y=n(()=>[{name:`progress`,value:Math.min(Math.max(d,0),f),fill:h}],[d,f,h]);return i(t,{"data-slot":`sales-target-radial-chart`,config:n(()=>({progress:{label:p,color:h}}),[p,h]),className:r(`mx-auto`,v===void 0&&`aspect-square`,g),style:v===void 0?void 0:{height:v,aspectRatio:`auto`},children:a(u,{data:y,startAngle:90,endAngle:-270,innerRadius:`75%`,outerRadius:`100%`,children:[i(s,{type:`number`,domain:[0,f],angleAxisId:0,tick:!1}),i(l,{dataKey:`value`,angleAxisId:0,background:!0,cornerRadius:10,isAnimationActive:_}),i(c,{tick:!1,tickLine:!1,axisLine:!1,children:i(o,{content:({viewBox:e})=>!e||!(`cx`in e)||!(`cy`in e)?null:a(`text`,{x:e.cx,y:e.cy,textAnchor:`middle`,dominantBaseline:`middle`,children:[i(`tspan`,{x:e.cx,y:e.cy,className:`fill-text-positive-strong font-number text-3xl font-bold`,children:m(d,f)}),i(`tspan`,{x:e.cx,y:(e.cy||0)+24,className:`fill-muted text-xs`,children:p})]})})})]})})};export{d as SalesTargetRadialChart};
+//# sourceMappingURL=sales-target-radial-chart-BFLxBT2m.mjs.map

package/dist/sales-target-radial-chart-BFLxBT2m.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sales-target-radial-chart-BFLxBT2m.mjs","names":[],"sources":["../packages/components/features/charts/components/sales-target-radial-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nimport { Label, PolarAngleAxis, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatPercent } from '../utils';\n\nexport type SalesTargetRadialChartProps = BaseChartProps & {\n  /** Current progress value, e.g. revenue to date. */\n  value: number;\n  /** The goal the value is measured against. */\n  target: number;\n  /** Text under the center figure. Defaults to `'Target'`. */\n  label?: string;\n  /** Formats the center figure. Defaults to percent-of-target. */\n  valueFormatter?: (value: number, target: number) => string;\n  color?: string;\n};\n\n/**\n * A radial gauge showing progress toward a sales target with the completion figure in the center.\n *\n * @example\n * ```tsx\n * import { SalesTargetRadialChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SalesTargetRadialChart value={65_000} target={100_000} label=\"Monthly target\" />\n * ```\n */\nexport const SalesTargetRadialChart = ({\n  value,\n  target,\n  label = 'Target',\n  valueFormatter = (current, goal) => formatPercent(goal === 0 ? 0 : current / goal),\n  color = 'var(--chart-1)',\n  className,\n  animate = true,\n  height,\n}: SalesTargetRadialChartProps) => {\n  const chartData = useMemo(() => [{ name: 'progress', value: Math.min(Math.max(value, 0), target), fill: color }], [value, target, color]);\n\n  const config = useMemo<ChartConfig>(() => ({ progress: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sales-target-radial-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <RadialBarChart data={chartData} startAngle={90} endAngle={-270} innerRadius=\"75%\" outerRadius=\"100%\">\n        <PolarAngleAxis type=\"number\" domain={[0, target]} angleAxisId={0} tick={false} />\n        <RadialBar dataKey=\"value\" angleAxisId={0} background cornerRadius={10} isAnimationActive={animate} />\n        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n          <Label\n            content={({ viewBox }) => {\n              if (!viewBox || !('cx' in viewBox) || !('cy' in viewBox)) return null;\n              return (\n                <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n                  <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-3xl font-bold\">\n                    {valueFormatter(value, target)}\n                  </tspan>\n                  <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className=\"fill-muted text-xs\">\n                    {label}\n                  </tspan>\n                </text>\n              );\n            }}\n          />\n        </PolarRadiusAxis>\n      </RadialBarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"+VAkCA,MAAa,GAA0B,CACrC,QACA,SACA,QAAQ,SACR,kBAAkB,EAAS,IAAS,EAAc,IAAS,EAAI,EAAI,EAAU,CAAI,EACjF,QAAQ,iBACR,YACA,UAAU,GACV,YACiC,CACjC,IAAM,EAAY,MAAc,CAAC,CAAE,KAAM,WAAY,MAAO,KAAK,IAAI,KAAK,IAAI,EAAO,CAAC,EAAG,CAAM,EAAG,KAAM,CAAM,CAAC,EAAG,CAAC,EAAO,EAAQ,CAAK,CAAC,EAIxI,OACE,EAAC,EAAD,CACE,YAAU,4BACV,OALW,OAA4B,CAAE,SAAU,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKxE,EACb,UAAW,EAAG,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAgB,KAAM,EAAW,WAAY,GAAI,SAAU,KAAM,YAAY,MAAM,YAAY,gBAA/F,CACE,EAAC,EAAD,CAAgB,KAAK,SAAS,OAAQ,CAAC,EAAG,CAAM,EAAG,YAAa,EAAG,KAAM,EAAQ,CAAA,EACjF,EAAC,EAAD,CAAW,QAAQ,QAAQ,YAAa,EAAG,WAAA,GAAW,aAAc,GAAI,kBAAmB,CAAU,CAAA,EACrG,EAAC,EAAD,CAAiB,KAAM,GAAO,SAAU,GAAO,SAAU,YACvD,EAAC,EAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,KAE/D,EAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,kBAAzE,CACE,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,oEAC5C,EAAe,EAAO,CAAM,CACxB,CAAA,EACP,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,8BACxD,CACI,CAAA,CACH,GAGX,CAAA,CACc,CAAA,CACH,GACF,CAAA,CAEpB"}

package/dist/sales-target-radial-chart-BoxSk7hW.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=({value:o,target:s,label:c=`Target`,valueFormatter:l=(t,n)=>e.formatPercent(n===0?0:t/n),color:u=`var(--chart-1)`,className:d,animate:f=!0,height:p})=>{let m=(0,n.useMemo)(()=>[{name:`progress`,value:Math.min(Math.max(o,0),s),fill:u}],[o,s,u]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`sales-target-radial-chart`,config:(0,n.useMemo)(()=>({progress:{label:c,color:u}}),[c,u]),className:(0,r.cn)(`mx-auto`,p===void 0&&`aspect-square`,d),style:p===void 0?void 0:{height:p,aspectRatio:`auto`},children:(0,i.jsxs)(a.RadialBarChart,{data:m,startAngle:90,endAngle:-270,innerRadius:`75%`,outerRadius:`100%`,children:[(0,i.jsx)(a.PolarAngleAxis,{type:`number`,domain:[0,s],angleAxisId:0,tick:!1}),(0,i.jsx)(a.RadialBar,{dataKey:`value`,angleAxisId:0,background:!0,cornerRadius:10,isAnimationActive:f}),(0,i.jsx)(a.PolarRadiusAxis,{tick:!1,tickLine:!1,axisLine:!1,children:(0,i.jsx)(a.Label,{content:({viewBox:e})=>!e||!(`cx`in e)||!(`cy`in e)?null:(0,i.jsxs)(`text`,{x:e.cx,y:e.cy,textAnchor:`middle`,dominantBaseline:`middle`,children:[(0,i.jsx)(`tspan`,{x:e.cx,y:e.cy,className:`fill-text-positive-strong font-number text-3xl font-bold`,children:l(o,s)}),(0,i.jsx)(`tspan`,{x:e.cx,y:(e.cy||0)+24,className:`fill-muted text-xs`,children:c})]})})})]})})};exports.SalesTargetRadialChart=o;
+//# sourceMappingURL=sales-target-radial-chart-BoxSk7hW.cjs.map

package/dist/sales-target-radial-chart-BoxSk7hW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sales-target-radial-chart-BoxSk7hW.cjs","names":["formatPercent","ChartContainer","RadialBarChart","PolarAngleAxis","RadialBar","PolarRadiusAxis","Label"],"sources":["../packages/components/features/charts/components/sales-target-radial-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nimport { Label, PolarAngleAxis, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatPercent } from '../utils';\n\nexport type SalesTargetRadialChartProps = BaseChartProps & {\n  /** Current progress value, e.g. revenue to date. */\n  value: number;\n  /** The goal the value is measured against. */\n  target: number;\n  /** Text under the center figure. Defaults to `'Target'`. */\n  label?: string;\n  /** Formats the center figure. Defaults to percent-of-target. */\n  valueFormatter?: (value: number, target: number) => string;\n  color?: string;\n};\n\n/**\n * A radial gauge showing progress toward a sales target with the completion figure in the center.\n *\n * @example\n * ```tsx\n * import { SalesTargetRadialChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SalesTargetRadialChart value={65_000} target={100_000} label=\"Monthly target\" />\n * ```\n */\nexport const SalesTargetRadialChart = ({\n  value,\n  target,\n  label = 'Target',\n  valueFormatter = (current, goal) => formatPercent(goal === 0 ? 0 : current / goal),\n  color = 'var(--chart-1)',\n  className,\n  animate = true,\n  height,\n}: SalesTargetRadialChartProps) => {\n  const chartData = useMemo(() => [{ name: 'progress', value: Math.min(Math.max(value, 0), target), fill: color }], [value, target, color]);\n\n  const config = useMemo<ChartConfig>(() => ({ progress: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sales-target-radial-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <RadialBarChart data={chartData} startAngle={90} endAngle={-270} innerRadius=\"75%\" outerRadius=\"100%\">\n        <PolarAngleAxis type=\"number\" domain={[0, target]} angleAxisId={0} tick={false} />\n        <RadialBar dataKey=\"value\" angleAxisId={0} background cornerRadius={10} isAnimationActive={animate} />\n        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n          <Label\n            content={({ viewBox }) => {\n              if (!viewBox || !('cx' in viewBox) || !('cy' in viewBox)) return null;\n              return (\n                <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n                  <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-3xl font-bold\">\n                    {valueFormatter(value, target)}\n                  </tspan>\n                  <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className=\"fill-muted text-xs\">\n                    {label}\n                  </tspan>\n                </text>\n              );\n            }}\n          />\n        </PolarRadiusAxis>\n      </RadialBarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAkCA,MAAa,GAA0B,CACrC,QACA,SACA,QAAQ,SACR,kBAAkB,EAAS,IAASA,EAAAA,cAAc,IAAS,EAAI,EAAI,EAAU,CAAI,EACjF,QAAQ,iBACR,YACA,UAAU,GACV,YACiC,CACjC,IAAM,GAAA,EAAA,EAAA,QAAA,KAA0B,CAAC,CAAE,KAAM,WAAY,MAAO,KAAK,IAAI,KAAK,IAAI,EAAO,CAAC,EAAG,CAAM,EAAG,KAAM,CAAM,CAAC,EAAG,CAAC,EAAO,EAAQ,CAAK,CAAC,EAIxI,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,4BACV,QAAA,EAAA,EAAA,QAAA,MALuC,CAAE,SAAU,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKxE,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,eAAD,CAAgB,KAAM,EAAW,WAAY,GAAI,SAAU,KAAM,YAAY,MAAM,YAAY,gBAA/F,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,KAAK,SAAS,OAAQ,CAAC,EAAG,CAAM,EAAG,YAAa,EAAG,KAAM,EAAQ,CAAA,GACjF,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,QAAQ,YAAa,EAAG,WAAA,GAAW,aAAc,GAAI,kBAAmB,CAAU,CAAA,GACrG,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,KAAM,GAAO,SAAU,GAAO,SAAU,aACvD,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,MAE/D,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,kBAAzE,EACE,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,oEAC5C,EAAe,EAAO,CAAM,CACxB,CAAA,GACP,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,8BACxD,CACI,CAAA,CACH,GAGX,CAAA,CACc,CAAA,CACH,GACF,CAAA,CAEpB"}

package/dist/sankey-flow-chart-CDUqIRMZ.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=e=>e.length*5.6+14,s=({nodes:s,links:c,valueFormatter:l=e=>e.toLocaleString(`en-US`),nodeWidth:u=14,nodePadding:d=24,labelWidth:f=170,className:p,animate:m=!0,height:h})=>{let{data:g,colorByName:_,effectiveLabelWidth:v,rootNames:y,leafNames:b}=(0,n.useMemo)(()=>{let t=s.map(e=>typeof e==`string`?{name:e}:e),n=new Map(t.map((e,t)=>[e.name,t])),r=new Map(t.map((t,n)=>[t.name,t.color||e.getChartColor(n)])),i=c.map(e=>({source:n.get(e.source),target:n.get(e.target),value:e.value})).filter(e=>e.source!==void 0&&e.target!==void 0),a=new Set(i.map(e=>e.target)),u=new Set(i.map(e=>e.source)),d=new Set(t.filter((e,t)=>!a.has(t)).map(e=>e.name)),p=new Set(t.filter((e,t)=>!u.has(t)).map(e=>e.name)),m=f;return t.forEach((e,t)=>{if(a.has(t)&&u.has(t))return;let n=i.filter(e=>e.source===t||e.target===t).reduce((e,t)=>e+t.value,0);m=Math.max(m,o(`${e.name}: ${l(n)}`)+16)}),{data:{nodes:t,links:i},colorByName:r,effectiveLabelWidth:m,rootNames:d,leafNames:p}},[s,c,f,l]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`sankey-flow-chart`,config:{},className:(0,r.cn)(`w-full`,p),style:h===void 0?void 0:{height:h,aspectRatio:`auto`},children:(0,i.jsx)(a.Sankey,{data:g,nodeWidth:u,nodePadding:d,linkCurvature:.45,margin:{top:28,right:v,bottom:8,left:v},node:e=>{let{x:t,y:n,width:r,height:s,payload:c}=e,u=_.get(c.name)??`var(--chart-1)`,d=y.has(c.name),f=b.has(c.name),p=`${c.name}: ${l(c.value)}`,h=o(p),g,v,x,S,C;return d||f?(x=d?`end`:`start`,v=n+s/2,C=v-18/2,S=d?t-8-h:t+r+8,g=d?S+h-6:S+6):(x=`middle`,v=c.depth%2==0?n-10:n-30,C=v-18+4,S=t+r/2-h/2,g=t+r/2),(0,i.jsxs)(`g`,{children:[(0,i.jsx)(a.Rectangle,{className:`recharts-sankey-node`,x:t,y:n,width:r,height:s,fill:u,stroke:`var(--background)`,strokeWidth:1.5,isAnimationActive:m}),(0,i.jsx)(`rect`,{x:S,y:C,width:h,height:18,rx:4,fill:`var(--background)`,fillOpacity:.92}),(0,i.jsx)(`text`,{x:g,y:v,textAnchor:x,dominantBaseline:`middle`,className:`fill-text-positive-strong text-[11px] font-medium`,children:p})]})},link:e=>{let{sourceX:t,sourceY:n,sourceControlX:r,targetX:a,targetY:o,targetControlX:s,linkWidth:c,payload:l}=e,u=_.get(l.source.name)??`var(--chart-1)`,d=`color-mix(in oklch, ${u} 60%, ${_.get(l.target.name)??u} 40%)`;return(0,i.jsx)(`path`,{className:`recharts-sankey-link`,d:`M${t},${n} C${r},${n} ${s},${o} ${a},${o}`,fill:`none`,stroke:d,strokeWidth:c,strokeOpacity:.4})}})})};exports.SankeyFlowChart=s;
+//# sourceMappingURL=sankey-flow-chart-CDUqIRMZ.cjs.map

package/dist/sankey-flow-chart-CDUqIRMZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sankey-flow-chart-CDUqIRMZ.cjs","names":["getChartColor","ChartContainer","Sankey","Rectangle"],"sources":["../packages/components/features/charts/components/sankey-flow-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { ChartContainer } from '@/components/ui/chart';\n\nimport type { SankeyLinkProps, SankeyNodeProps } from 'recharts';\nimport { Rectangle, Sankey } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { getChartColor } from '../utils';\n\nexport type SankeyFlowNode = {\n  name: string;\n  color?: string;\n};\n\nexport type SankeyFlowLink = {\n  /** Node name, matching an entry in `nodes`. */\n  source: string;\n  /** Node name, matching an entry in `nodes`. */\n  target: string;\n  value: number;\n};\n\nexport type SankeyFlowChartProps = BaseChartProps & {\n  nodes: Array<SankeyFlowNode | string>;\n  links: SankeyFlowLink[];\n  valueFormatter?: (value: number) => string;\n  nodeWidth?: number;\n  nodePadding?: number;\n  /** Minimum horizontal space reserved for node labels outside the plot area; grows to fit the longest root/leaf label. Defaults to `170`. */\n  labelWidth?: number;\n};\n\n/**\n * A Sankey flow diagram — revenue/cost breakdowns, funnels with branching paths, budget\n * allocation — where band width is proportional to the flow value between named nodes.\n *\n * @example\n * ```tsx\n * import { SankeyFlowChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SankeyFlowChart\n *   height={500}\n *   nodes={['iPhone', 'Mac', 'Net Sales', 'Cost of Sales', 'Gross Profit']}\n *   links={[\n *     { source: 'iPhone', target: 'Net Sales', value: 205489 },\n *     { source: 'Mac', target: 'Net Sales', value: 40177 },\n *     { source: 'Net Sales', target: 'Cost of Sales', value: 223546 },\n *     { source: 'Net Sales', target: 'Gross Profit', value: 170782 },\n *   ]}\n * />\n * ```\n */\nconst estimateLabelWidth = (label: string): number => label.length * 5.6 + 14;\n\nexport const SankeyFlowChart = ({\n  nodes,\n  links,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  nodeWidth = 14,\n  nodePadding = 24,\n  labelWidth = 170,\n  className,\n  animate = true,\n  height,\n}: SankeyFlowChartProps) => {\n  const { data, colorByName, effectiveLabelWidth, rootNames, leafNames } = useMemo(() => {\n    const nodeList = nodes.map(node => (typeof node === 'string' ? { name: node } : node));\n    const nameToIndex = new Map(nodeList.map((node, index) => [node.name, index]));\n    const colors = new Map(nodeList.map((node, index) => [node.name, node.color || getChartColor(index)]));\n\n    const sankeyLinks = links\n      .map(link => ({ source: nameToIndex.get(link.source), target: nameToIndex.get(link.target), value: link.value }))\n      .filter((link): link is { source: number; target: number; value: number } => link.source !== undefined && link.target !== undefined);\n\n    // Computed from our own link list rather than trusting recharts' `payload.depth`/`sourceLinks`\n    // at render time — the latter don't reliably flag terminal (leaf) nodes as such.\n    const hasIncoming = new Set(sankeyLinks.map(link => link.target));\n    const hasOutgoing = new Set(sankeyLinks.map(link => link.source));\n    const roots = new Set(nodeList.filter((_, index) => !hasIncoming.has(index)).map(node => node.name));\n    const leaves = new Set(nodeList.filter((_, index) => !hasOutgoing.has(index)).map(node => node.name));\n\n    // Only root/leaf nodes get side labels using this margin; widen it to fit the longest one\n    // so long names don't clip past the SVG edge.\n    let maxWidth = labelWidth;\n    nodeList.forEach((node, index) => {\n      if (hasIncoming.has(index) && hasOutgoing.has(index)) return;\n      const relatedValue = sankeyLinks.filter(link => link.source === index || link.target === index).reduce((sum, link) => sum + link.value, 0);\n      maxWidth = Math.max(maxWidth, estimateLabelWidth(`${node.name}: ${valueFormatter(relatedValue)}`) + 16);\n    });\n\n    return { data: { nodes: nodeList, links: sankeyLinks }, colorByName: colors, effectiveLabelWidth: maxWidth, rootNames: roots, leafNames: leaves };\n  }, [nodes, links, labelWidth, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sankey-flow-chart\"\n      config={{}}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <Sankey\n        data={data}\n        nodeWidth={nodeWidth}\n        nodePadding={nodePadding}\n        linkCurvature={0.45}\n        margin={{ top: 28, right: effectiveLabelWidth, bottom: 8, left: effectiveLabelWidth }}\n        node={(props: SankeyNodeProps) => {\n          const { x, y, width, height: nodeHeight, payload } = props;\n          const color = colorByName.get(payload.name) ?? 'var(--chart-1)';\n          const isRoot = rootNames.has(payload.name);\n          const isLeaf = leafNames.has(payload.name);\n          const label = `${payload.name}: ${valueFormatter(payload.value)}`;\n          const pillWidth = estimateLabelWidth(label);\n          const pillHeight = 18;\n\n          let textX: number;\n          let textY: number;\n          let textAnchor: 'start' | 'end' | 'middle';\n          let pillX: number;\n          let pillY: number;\n\n          if (isRoot || isLeaf) {\n            textAnchor = isRoot ? 'end' : 'start';\n            textY = y + nodeHeight / 2;\n            pillY = textY - pillHeight / 2;\n            pillX = isRoot ? x - 8 - pillWidth : x + width + 8;\n            textX = isRoot ? pillX + pillWidth - 6 : pillX + 6;\n          } else {\n            // Intermediate nodes label above the bar (not beside it) so chained, closely-spaced\n            // depth columns never collide sideways. Consecutive depths are additionally staggered\n            // to two alternating heights (zigzag) — when almost all of a node's value passes\n            // straight through to the next depth (e.g. Operating Income -> Profit before tax),\n            // both nodes land at nearly the same y, so same-height labels would still overlap.\n            textAnchor = 'middle';\n            textY = payload.depth % 2 === 0 ? y - 10 : y - 30;\n            pillY = textY - pillHeight + 4;\n            pillX = x + width / 2 - pillWidth / 2;\n            textX = x + width / 2;\n          }\n\n          return (\n            <g>\n              <Rectangle\n                className=\"recharts-sankey-node\"\n                x={x}\n                y={y}\n                width={width}\n                height={nodeHeight}\n                fill={color}\n                stroke=\"var(--background)\"\n                strokeWidth={1.5}\n                isAnimationActive={animate}\n              />\n              <rect x={pillX} y={pillY} width={pillWidth} height={pillHeight} rx={4} fill=\"var(--background)\" fillOpacity={0.92} />\n              <text x={textX} y={textY} textAnchor={textAnchor} dominantBaseline=\"middle\" className=\"fill-text-positive-strong text-[11px] font-medium\">\n                {label}\n              </text>\n            </g>\n          );\n        }}\n        link={(props: SankeyLinkProps) => {\n          const { sourceX, sourceY, sourceControlX, targetX, targetY, targetControlX, linkWidth, payload } = props;\n          const sourceColor = colorByName.get(payload.source.name) ?? 'var(--chart-1)';\n          const targetColor = colorByName.get(payload.target.name) ?? sourceColor;\n          // Blending toward the target's color (rather than a flat source-only fill) keeps sibling\n          // flows out of the same source visually distinct from each other wherever they run close\n          // together or cross — a flat single hue made e.g. Gross Profit's three outgoing flows\n          // (-> R&D, -> SG&A, -> Operating Income) indistinguishable from one another.\n          const color = `color-mix(in oklch, ${sourceColor} 60%, ${targetColor} 40%)`;\n          return (\n            <path\n              className=\"recharts-sankey-link\"\n              d={`M${sourceX},${sourceY} C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={linkWidth}\n              strokeOpacity={0.4}\n            />\n          );\n        }}\n      />\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}

package/dist/sankey-flow-chart-bQ3Dffet.mjs

@@ -0,0 +1,2 @@
+import{getChartColor as e}from"./features/charts/index.mjs";import{ChartContainer as t}from"./ui/chart.mjs";import{useMemo as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{Rectangle as o,Sankey as s}from"recharts";const c=e=>e.length*5.6+14,l=({nodes:l,links:u,valueFormatter:d=e=>e.toLocaleString(`en-US`),nodeWidth:f=14,nodePadding:p=24,labelWidth:m=170,className:h,animate:g=!0,height:_})=>{let{data:v,colorByName:y,effectiveLabelWidth:b,rootNames:x,leafNames:S}=n(()=>{let t=l.map(e=>typeof e==`string`?{name:e}:e),n=new Map(t.map((e,t)=>[e.name,t])),r=new Map(t.map((t,n)=>[t.name,t.color||e(n)])),i=u.map(e=>({source:n.get(e.source),target:n.get(e.target),value:e.value})).filter(e=>e.source!==void 0&&e.target!==void 0),a=new Set(i.map(e=>e.target)),o=new Set(i.map(e=>e.source)),s=new Set(t.filter((e,t)=>!a.has(t)).map(e=>e.name)),f=new Set(t.filter((e,t)=>!o.has(t)).map(e=>e.name)),p=m;return t.forEach((e,t)=>{if(a.has(t)&&o.has(t))return;let n=i.filter(e=>e.source===t||e.target===t).reduce((e,t)=>e+t.value,0);p=Math.max(p,c(`${e.name}: ${d(n)}`)+16)}),{data:{nodes:t,links:i},colorByName:r,effectiveLabelWidth:p,rootNames:s,leafNames:f}},[l,u,m,d]);return i(t,{"data-slot":`sankey-flow-chart`,config:{},className:r(`w-full`,h),style:_===void 0?void 0:{height:_,aspectRatio:`auto`},children:i(s,{data:v,nodeWidth:f,nodePadding:p,linkCurvature:.45,margin:{top:28,right:b,bottom:8,left:b},node:e=>{let{x:t,y:n,width:r,height:s,payload:l}=e,u=y.get(l.name)??`var(--chart-1)`,f=x.has(l.name),p=S.has(l.name),m=`${l.name}: ${d(l.value)}`,h=c(m),_,v,b,C,w;return f||p?(b=f?`end`:`start`,v=n+s/2,w=v-18/2,C=f?t-8-h:t+r+8,_=f?C+h-6:C+6):(b=`middle`,v=l.depth%2==0?n-10:n-30,w=v-18+4,C=t+r/2-h/2,_=t+r/2),a(`g`,{children:[i(o,{className:`recharts-sankey-node`,x:t,y:n,width:r,height:s,fill:u,stroke:`var(--background)`,strokeWidth:1.5,isAnimationActive:g}),i(`rect`,{x:C,y:w,width:h,height:18,rx:4,fill:`var(--background)`,fillOpacity:.92}),i(`text`,{x:_,y:v,textAnchor:b,dominantBaseline:`middle`,className:`fill-text-positive-strong text-[11px] font-medium`,children:m})]})},link:e=>{let{sourceX:t,sourceY:n,sourceControlX:r,targetX:a,targetY:o,targetControlX:s,linkWidth:c,payload:l}=e,u=y.get(l.source.name)??`var(--chart-1)`,d=`color-mix(in oklch, ${u} 60%, ${y.get(l.target.name)??u} 40%)`;return i(`path`,{className:`recharts-sankey-link`,d:`M${t},${n} C${r},${n} ${s},${o} ${a},${o}`,fill:`none`,stroke:d,strokeWidth:c,strokeOpacity:.4})}})})};export{l as SankeyFlowChart};
+//# sourceMappingURL=sankey-flow-chart-bQ3Dffet.mjs.map

package/dist/sankey-flow-chart-bQ3Dffet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sankey-flow-chart-bQ3Dffet.mjs","names":[],"sources":["../packages/components/features/charts/components/sankey-flow-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { ChartContainer } from '@/components/ui/chart';\n\nimport type { SankeyLinkProps, SankeyNodeProps } from 'recharts';\nimport { Rectangle, Sankey } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { getChartColor } from '../utils';\n\nexport type SankeyFlowNode = {\n  name: string;\n  color?: string;\n};\n\nexport type SankeyFlowLink = {\n  /** Node name, matching an entry in `nodes`. */\n  source: string;\n  /** Node name, matching an entry in `nodes`. */\n  target: string;\n  value: number;\n};\n\nexport type SankeyFlowChartProps = BaseChartProps & {\n  nodes: Array<SankeyFlowNode | string>;\n  links: SankeyFlowLink[];\n  valueFormatter?: (value: number) => string;\n  nodeWidth?: number;\n  nodePadding?: number;\n  /** Minimum horizontal space reserved for node labels outside the plot area; grows to fit the longest root/leaf label. Defaults to `170`. */\n  labelWidth?: number;\n};\n\n/**\n * A Sankey flow diagram — revenue/cost breakdowns, funnels with branching paths, budget\n * allocation — where band width is proportional to the flow value between named nodes.\n *\n * @example\n * ```tsx\n * import { SankeyFlowChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SankeyFlowChart\n *   height={500}\n *   nodes={['iPhone', 'Mac', 'Net Sales', 'Cost of Sales', 'Gross Profit']}\n *   links={[\n *     { source: 'iPhone', target: 'Net Sales', value: 205489 },\n *     { source: 'Mac', target: 'Net Sales', value: 40177 },\n *     { source: 'Net Sales', target: 'Cost of Sales', value: 223546 },\n *     { source: 'Net Sales', target: 'Gross Profit', value: 170782 },\n *   ]}\n * />\n * ```\n */\nconst estimateLabelWidth = (label: string): number => label.length * 5.6 + 14;\n\nexport const SankeyFlowChart = ({\n  nodes,\n  links,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  nodeWidth = 14,\n  nodePadding = 24,\n  labelWidth = 170,\n  className,\n  animate = true,\n  height,\n}: SankeyFlowChartProps) => {\n  const { data, colorByName, effectiveLabelWidth, rootNames, leafNames } = useMemo(() => {\n    const nodeList = nodes.map(node => (typeof node === 'string' ? { name: node } : node));\n    const nameToIndex = new Map(nodeList.map((node, index) => [node.name, index]));\n    const colors = new Map(nodeList.map((node, index) => [node.name, node.color || getChartColor(index)]));\n\n    const sankeyLinks = links\n      .map(link => ({ source: nameToIndex.get(link.source), target: nameToIndex.get(link.target), value: link.value }))\n      .filter((link): link is { source: number; target: number; value: number } => link.source !== undefined && link.target !== undefined);\n\n    // Computed from our own link list rather than trusting recharts' `payload.depth`/`sourceLinks`\n    // at render time — the latter don't reliably flag terminal (leaf) nodes as such.\n    const hasIncoming = new Set(sankeyLinks.map(link => link.target));\n    const hasOutgoing = new Set(sankeyLinks.map(link => link.source));\n    const roots = new Set(nodeList.filter((_, index) => !hasIncoming.has(index)).map(node => node.name));\n    const leaves = new Set(nodeList.filter((_, index) => !hasOutgoing.has(index)).map(node => node.name));\n\n    // Only root/leaf nodes get side labels using this margin; widen it to fit the longest one\n    // so long names don't clip past the SVG edge.\n    let maxWidth = labelWidth;\n    nodeList.forEach((node, index) => {\n      if (hasIncoming.has(index) && hasOutgoing.has(index)) return;\n      const relatedValue = sankeyLinks.filter(link => link.source === index || link.target === index).reduce((sum, link) => sum + link.value, 0);\n      maxWidth = Math.max(maxWidth, estimateLabelWidth(`${node.name}: ${valueFormatter(relatedValue)}`) + 16);\n    });\n\n    return { data: { nodes: nodeList, links: sankeyLinks }, colorByName: colors, effectiveLabelWidth: maxWidth, rootNames: roots, leafNames: leaves };\n  }, [nodes, links, labelWidth, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sankey-flow-chart\"\n      config={{}}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <Sankey\n        data={data}\n        nodeWidth={nodeWidth}\n        nodePadding={nodePadding}\n        linkCurvature={0.45}\n        margin={{ top: 28, right: effectiveLabelWidth, bottom: 8, left: effectiveLabelWidth }}\n        node={(props: SankeyNodeProps) => {\n          const { x, y, width, height: nodeHeight, payload } = props;\n          const color = colorByName.get(payload.name) ?? 'var(--chart-1)';\n          const isRoot = rootNames.has(payload.name);\n          const isLeaf = leafNames.has(payload.name);\n          const label = `${payload.name}: ${valueFormatter(payload.value)}`;\n          const pillWidth = estimateLabelWidth(label);\n          const pillHeight = 18;\n\n          let textX: number;\n          let textY: number;\n          let textAnchor: 'start' | 'end' | 'middle';\n          let pillX: number;\n          let pillY: number;\n\n          if (isRoot || isLeaf) {\n            textAnchor = isRoot ? 'end' : 'start';\n            textY = y + nodeHeight / 2;\n            pillY = textY - pillHeight / 2;\n            pillX = isRoot ? x - 8 - pillWidth : x + width + 8;\n            textX = isRoot ? pillX + pillWidth - 6 : pillX + 6;\n          } else {\n            // Intermediate nodes label above the bar (not beside it) so chained, closely-spaced\n            // depth columns never collide sideways. Consecutive depths are additionally staggered\n            // to two alternating heights (zigzag) — when almost all of a node's value passes\n            // straight through to the next depth (e.g. Operating Income -> Profit before tax),\n            // both nodes land at nearly the same y, so same-height labels would still overlap.\n            textAnchor = 'middle';\n            textY = payload.depth % 2 === 0 ? y - 10 : y - 30;\n            pillY = textY - pillHeight + 4;\n            pillX = x + width / 2 - pillWidth / 2;\n            textX = x + width / 2;\n          }\n\n          return (\n            <g>\n              <Rectangle\n                className=\"recharts-sankey-node\"\n                x={x}\n                y={y}\n                width={width}\n                height={nodeHeight}\n                fill={color}\n                stroke=\"var(--background)\"\n                strokeWidth={1.5}\n                isAnimationActive={animate}\n              />\n              <rect x={pillX} y={pillY} width={pillWidth} height={pillHeight} rx={4} fill=\"var(--background)\" fillOpacity={0.92} />\n              <text x={textX} y={textY} textAnchor={textAnchor} dominantBaseline=\"middle\" className=\"fill-text-positive-strong text-[11px] font-medium\">\n                {label}\n              </text>\n            </g>\n          );\n        }}\n        link={(props: SankeyLinkProps) => {\n          const { sourceX, sourceY, sourceControlX, targetX, targetY, targetControlX, linkWidth, payload } = props;\n          const sourceColor = colorByName.get(payload.source.name) ?? 'var(--chart-1)';\n          const targetColor = colorByName.get(payload.target.name) ?? sourceColor;\n          // Blending toward the target's color (rather than a flat source-only fill) keeps sibling\n          // flows out of the same source visually distinct from each other wherever they run close\n          // together or cross — a flat single hue made e.g. Gross Profit's three outgoing flows\n          // (-> R&D, -> SG&A, -> Operating Income) indistinguishable from one another.\n          const color = `color-mix(in oklch, ${sourceColor} 60%, ${targetColor} 40%)`;\n          return (\n            <path\n              className=\"recharts-sankey-link\"\n              d={`M${sourceX},${sourceY} C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={linkWidth}\n              strokeOpacity={0.4}\n            />\n          );\n        }}\n      />\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}

package/dist/scroll-area-PbkqIAaH.d.cts

@@ -0,0 +1,35 @@
+import { ScrollArea } from "radix-ui";
+
+//#region packages/components/ui/scroll-area.d.ts
+/**
+ * A scrollable container with a styled, custom scrollbar that overlays the content.
+ *
+ * @example
+ * ```tsx
+ * import { ScrollArea } from '@customafk/lunas-ui/ui/scroll-area';
+ *
+ * <ScrollArea className="h-64 w-full">
+ *   <div className="p-4">Long content goes here…</div>
+ * </ScrollArea>
+ * ```
+ */
+declare const ScrollArea$1: import("react").MemoExoticComponent<({
+  className,
+  children,
+  ref,
+  onScroll,
+  ...props
+}: React.ComponentProps<typeof ScrollArea.Root>) => import("react").JSX.Element>;
+/**
+ * The styled scrollbar track and thumb rendered inside a ScrollArea.
+ *
+ * @param orientation - Direction of the scrollbar: `'vertical'` (default) or `'horizontal'`.
+ */
+declare const ScrollBar: import("react").MemoExoticComponent<({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<typeof ScrollArea.ScrollAreaScrollbar>) => import("react").JSX.Element>;
+//#endregion
+export { ScrollBar as n, ScrollArea$1 as t };
+//# sourceMappingURL=scroll-area-PbkqIAaH.d.cts.map

package/dist/scroll-area-PbkqIAaH.d.mts

@@ -0,0 +1,35 @@
+import { ScrollArea } from "radix-ui";
+
+//#region packages/components/ui/scroll-area.d.ts
+/**
+ * A scrollable container with a styled, custom scrollbar that overlays the content.
+ *
+ * @example
+ * ```tsx
+ * import { ScrollArea } from '@customafk/lunas-ui/ui/scroll-area';
+ *
+ * <ScrollArea className="h-64 w-full">
+ *   <div className="p-4">Long content goes here…</div>
+ * </ScrollArea>
+ * ```
+ */
+declare const ScrollArea$1: import("react").MemoExoticComponent<({
+  className,
+  children,
+  ref,
+  onScroll,
+  ...props
+}: React.ComponentProps<typeof ScrollArea.Root>) => import("react").JSX.Element>;
+/**
+ * The styled scrollbar track and thumb rendered inside a ScrollArea.
+ *
+ * @param orientation - Direction of the scrollbar: `'vertical'` (default) or `'horizontal'`.
+ */
+declare const ScrollBar: import("react").MemoExoticComponent<({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<typeof ScrollArea.ScrollAreaScrollbar>) => import("react").JSX.Element>;
+//#endregion
+export { ScrollBar as n, ScrollArea$1 as t };
+//# sourceMappingURL=scroll-area-PbkqIAaH.d.mts.map

package/dist/search-input-Bq4enQzR.d.cts

@@ -0,0 +1,27 @@
+import { t as Input } from "./input-BieGEIDf.cjs";
+
+//#region packages/components/ui/inputs/search-input.d.ts
+/**
+ * Props for {@link SearchInput}. Accepts all native props of the underlying
+ * `Input` component (itself a thin wrapper around `<input>`), including
+ * `value`, `defaultValue`, `onChange`, `placeholder`, `disabled`, etc.
+ * The `type` prop is fixed to `"search"` and cannot be overridden.
+ */
+type Props = React.ComponentPropsWithoutRef<typeof Input>;
+/**
+ * A search input field with a leading search icon and a trailing arrow submit button, intended for use inside an HTML `<form>` element.
+ *
+ * @example
+ * import { SearchInput } from '@customafk/lunas-ui/ui/inputs/search-input';
+ *
+ * <form onSubmit={handleSearch}>
+ *   <SearchInput placeholder="Search…" value={query} onChange={(e) => setQuery(e.target.value)} />
+ * </form>
+ */
+declare const SearchInput: ({
+  className,
+  ...rest
+}: Props) => import("react").JSX.Element;
+//#endregion
+export { SearchInput as t };
+//# sourceMappingURL=search-input-Bq4enQzR.d.cts.map

package/dist/search-input-D51_mAY-.d.mts

@@ -0,0 +1,27 @@
+import { t as Input } from "./input-BieGEIDf.mjs";
+
+//#region packages/components/ui/inputs/search-input.d.ts
+/**
+ * Props for {@link SearchInput}. Accepts all native props of the underlying
+ * `Input` component (itself a thin wrapper around `<input>`), including
+ * `value`, `defaultValue`, `onChange`, `placeholder`, `disabled`, etc.
+ * The `type` prop is fixed to `"search"` and cannot be overridden.
+ */
+type Props = React.ComponentPropsWithoutRef<typeof Input>;
+/**
+ * A search input field with a leading search icon and a trailing arrow submit button, intended for use inside an HTML `<form>` element.
+ *
+ * @example
+ * import { SearchInput } from '@customafk/lunas-ui/ui/inputs/search-input';
+ *
+ * <form onSubmit={handleSearch}>
+ *   <SearchInput placeholder="Search…" value={query} onChange={(e) => setQuery(e.target.value)} />
+ * </form>
+ */
+declare const SearchInput: ({
+  className,
+  ...rest
+}: Props) => import("react").JSX.Element;
+//#endregion
+export { SearchInput as t };
+//# sourceMappingURL=search-input-D51_mAY-.d.mts.map