@customafk/lunas-ui 0.2.64 → 0.2.66

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-display-BuRCso6J.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/list-display.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableListDisplay} component. */\ntype Props = {\n  /** Array of strings or numbers to render as inline pills. */\n  items: (string | number)[] | null | undefined;\n  /**\n   * Maximum number of pills shown before a `+N more` overflow badge appears\n   * (default: `3`).\n   */\n  maxVisible?: number;\n};\n\n/**\n * Renders an array of values as compact inline pills in a table cell.  When the\n * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all\n * remaining items in a tooltip.  Renders {@link UITableEmpty} for empty or absent\n * arrays.\n *\n * @example\n * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />\n */\nexport const UITableListDisplay: React.FC<Props> = ({ items, maxVisible = 3 }) => {\n  if (!items || items.length === 0) return <UITableEmpty />;\n\n  const visible = items.slice(0, maxVisible);\n  const overflow = items.slice(maxVisible);\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {visible.map((item, i) => (\n        <span key={i} className=\"inline-flex items-center rounded-full border border-border bg-muted-weak px-2 py-0.5 text-text-positive text-xs\">\n          {item}\n        </span>\n      ))}\n\n      {overflow.length > 0 && (\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span className=\"inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs\">\n                +{overflow.length} more\n              </span>\n            </TooltipTrigger>\n            <TooltipContent align=\"start\" className=\"flex max-w-64 flex-wrap gap-1 p-2\">\n              {overflow.map((item, i) => (\n                <span key={i} className=\"inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs\">\n                  {item}\n                </span>\n              ))}\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      )}\n    </div>\n  );\n};\n"],"mappings":"oMA2BA,MAAa,GAAuC,CAAE,QAAO,aAAa,KAAQ,CAChF,GAAI,CAAC,GAAS,EAAM,SAAW,EAAG,OAAO,EAAC,EAAD,CAAe,CAAA,EAExD,IAAM,EAAU,EAAM,MAAM,EAAG,CAAU,EACnC,EAAW,EAAM,MAAM,CAAU,EAEvC,OACE,EAAC,MAAD,CAAK,UAAU,gCAAf,CACG,EAAQ,KAAK,EAAM,IAClB,EAAC,OAAD,CAAc,UAAU,2HACrB,CACG,EAFK,CAEL,CACP,EAEA,EAAS,OAAS,GACjB,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,OAAD,CAAM,UAAU,8HAAhB,CAAqI,IACjI,EAAS,OAAO,OACd,GACQ,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,6CACrC,EAAS,KAAK,EAAM,IACnB,EAAC,OAAD,CAAc,UAAU,6GACrB,CACG,EAFK,CAEL,CACP,CACa,CAAA,CACT,CAAA,CAAA,CACM,CAAA,CAEhB,GAET"}

package/dist/list-display-DEU6yFa9.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/tooltip.cjs"),t=require("./tables-7aC9WFs9.cjs");let n=require("react/jsx-runtime");const r=({items:r,maxVisible:i=3})=>{if(!r||r.length===0)return(0,n.jsx)(t.Y,{});let a=r.slice(0,i),o=r.slice(i);return(0,n.jsxs)(`div`,{className:`flex flex-wrap gap-1`,children:[a.map((e,t)=>(0,n.jsx)(`span`,{className:`inline-flex items-center rounded-full border border-border bg-muted-weak px-2 py-0.5 text-text-positive text-xs`,children:e},t)),o.length>0&&(0,n.jsx)(e.TooltipProvider,{children:(0,n.jsxs)(e.Tooltip,{children:[(0,n.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,n.jsxs)(`span`,{className:`inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs`,children:[`+`,o.length,` more`]})}),(0,n.jsx)(e.TooltipContent,{align:`start`,className:`flex max-w-64 flex-wrap gap-1 p-2`,children:o.map((e,t)=>(0,n.jsx)(`span`,{className:`inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs`,children:e},t))})]})})]})};exports.UITableListDisplay=r;
+//# sourceMappingURL=list-display-DEU6yFa9.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-display-DEU6yFa9.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/list-display.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableListDisplay} component. */\ntype Props = {\n  /** Array of strings or numbers to render as inline pills. */\n  items: (string | number)[] | null | undefined;\n  /**\n   * Maximum number of pills shown before a `+N more` overflow badge appears\n   * (default: `3`).\n   */\n  maxVisible?: number;\n};\n\n/**\n * Renders an array of values as compact inline pills in a table cell.  When the\n * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all\n * remaining items in a tooltip.  Renders {@link UITableEmpty} for empty or absent\n * arrays.\n *\n * @example\n * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />\n */\nexport const UITableListDisplay: React.FC<Props> = ({ items, maxVisible = 3 }) => {\n  if (!items || items.length === 0) return <UITableEmpty />;\n\n  const visible = items.slice(0, maxVisible);\n  const overflow = items.slice(maxVisible);\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {visible.map((item, i) => (\n        <span key={i} className=\"inline-flex items-center rounded-full border border-border bg-muted-weak px-2 py-0.5 text-text-positive text-xs\">\n          {item}\n        </span>\n      ))}\n\n      {overflow.length > 0 && (\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span className=\"inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs\">\n                +{overflow.length} more\n              </span>\n            </TooltipTrigger>\n            <TooltipContent align=\"start\" className=\"flex max-w-64 flex-wrap gap-1 p-2\">\n              {overflow.map((item, i) => (\n                <span key={i} className=\"inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs\">\n                  {item}\n                </span>\n              ))}\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      )}\n    </div>\n  );\n};\n"],"mappings":"0GA2BA,MAAa,GAAuC,CAAE,QAAO,aAAa,KAAQ,CAChF,GAAI,CAAC,GAAS,EAAM,SAAW,EAAG,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAExD,IAAM,EAAU,EAAM,MAAM,EAAG,CAAU,EACnC,EAAW,EAAM,MAAM,CAAU,EAEvC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gCAAf,CACG,EAAQ,KAAK,EAAM,KAClB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAc,UAAU,2HACrB,CACG,EAFK,CAEL,CACP,EAEA,EAAS,OAAS,IACjB,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,8HAAhB,CAAqI,IACjI,EAAS,OAAO,OACd,GACQ,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,6CACrC,EAAS,KAAK,EAAM,KACnB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAc,UAAU,6GACrB,CACG,EAFK,CAEL,CACP,CACa,CAAA,CACT,CAAA,CAAA,CACM,CAAA,CAEhB,GAET"}

package/dist/loading-dialog-C73EJx9s.d.cts

@@ -0,0 +1,19 @@
+//#region packages/components/dialogs/loading-dialog.d.ts
+type LoadingDialogProps = {
+  /** Controls whether the dialog is open. */open?: boolean; /** Callback invoked when the dialog open state changes. */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Displays a transparent, pointer-events-disabled modal overlay with a centered loading spinner.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingDialog } from '@customafk/lunas-ui/dialogs/loading-dialog';
+ *
+ * <LoadingDialog open={isLoading} onOpenChange={setIsLoading} />
+ * ```
+ */
+declare const LoadingDialog: React.FC<LoadingDialogProps>;
+//#endregion
+export { LoadingDialogProps as n, LoadingDialog as t };
+//# sourceMappingURL=loading-dialog-C73EJx9s.d.cts.map

package/dist/loading-dialog-C73EJx9s.d.mts

@@ -0,0 +1,19 @@
+//#region packages/components/dialogs/loading-dialog.d.ts
+type LoadingDialogProps = {
+  /** Controls whether the dialog is open. */open?: boolean; /** Callback invoked when the dialog open state changes. */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Displays a transparent, pointer-events-disabled modal overlay with a centered loading spinner.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingDialog } from '@customafk/lunas-ui/dialogs/loading-dialog';
+ *
+ * <LoadingDialog open={isLoading} onOpenChange={setIsLoading} />
+ * ```
+ */
+declare const LoadingDialog: React.FC<LoadingDialogProps>;
+//#endregion
+export { LoadingDialogProps as n, LoadingDialog as t };
+//# sourceMappingURL=loading-dialog-C73EJx9s.d.mts.map

package/dist/menubar-CFrn3S96.d.cts

@@ -0,0 +1,133 @@
+import { Menubar } from "radix-ui";
+
+//#region packages/components/ui/menubar.d.ts
+/**
+ * A horizontal menu bar similar to a desktop application menu, composed of menus with dropdown content.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
+ *   MenubarItem, MenubarSeparator,
+ * } from '@customafk/lunas-ui/ui/menubar';
+ *
+ * <Menubar>
+ *   <MenubarMenu>
+ *     <MenubarTrigger>File</MenubarTrigger>
+ *     <MenubarContent>
+ *       <MenubarItem>New Window</MenubarItem>
+ *       <MenubarSeparator />
+ *       <MenubarItem>Exit</MenubarItem>
+ *     </MenubarContent>
+ *   </MenubarMenu>
+ * </Menubar>
+ * ```
+ */
+declare function Menubar$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.Root>): import("react").JSX.Element;
+/** Root container for a single drop-down menu entry within a Menubar. */
+declare function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof Menubar.Menu>): import("react").JSX.Element;
+/** Groups related MenubarItems under a shared logical section. */
+declare function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof Menubar.Group>): import("react").JSX.Element;
+/** Portals Menubar content outside the current DOM hierarchy. */
+declare function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof Menubar.Portal>): import("react").JSX.Element;
+/** Groups MenubarRadioItems so only one can be selected at a time. */
+declare function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof Menubar.RadioGroup>): import("react").JSX.Element;
+/** Button in the Menubar that opens its associated MenubarContent dropdown. */
+declare function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.Trigger>): import("react").JSX.Element;
+/** Animated floating panel that contains MenubarItems for a given MenubarMenu. */
+declare function MenubarContent({
+  className,
+  align,
+  alignOffset,
+  sideOffset,
+  ...props
+}: React.ComponentProps<typeof Menubar.Content>): import("react").JSX.Element;
+/**
+ * A single clickable row inside a MenubarContent.
+ *
+ * @param inset - When true, adds left padding to align with items that have icons.
+ * @param variant - Visual style: `'default'` or `'destructive'`.
+ */
+declare function MenubarItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof Menubar.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}): import("react").JSX.Element;
+/** A checkable menubar item that displays a checkmark when selected. */
+declare function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof Menubar.CheckboxItem>): import("react").JSX.Element;
+/** A radio-button menubar item; shows a filled circle when selected. */
+declare function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Menubar.RadioItem>): import("react").JSX.Element;
+/**
+ * Non-interactive label used to describe a group of menubar items.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof Menubar.Label> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Horizontal dividing line between groups of menubar items. */
+declare function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.Separator>): import("react").JSX.Element;
+/** Displays a keyboard shortcut hint aligned to the right of a menubar item. */
+declare function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+/** Root container for a nested sub-menu inside a Menubar dropdown. */
+declare function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof Menubar.Sub>): import("react").JSX.Element;
+/**
+ * Menu item that reveals a nested MenubarSubContent on hover or activation.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof Menubar.SubTrigger> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Floating panel that contains the items of a nested Menubar sub-menu. */
+declare function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.SubContent>): import("react").JSX.Element;
+//#endregion
+export { MenubarItem as a, MenubarPortal as c, MenubarSeparator as d, MenubarShortcut as f, MenubarTrigger as g, MenubarSubTrigger as h, MenubarGroup as i, MenubarRadioGroup as l, MenubarSubContent as m, MenubarCheckboxItem as n, MenubarLabel as o, MenubarSub as p, MenubarContent as r, MenubarMenu as s, Menubar$1 as t, MenubarRadioItem as u };
+//# sourceMappingURL=menubar-CFrn3S96.d.cts.map

package/dist/menubar-CFrn3S96.d.mts

@@ -0,0 +1,133 @@
+import { Menubar } from "radix-ui";
+
+//#region packages/components/ui/menubar.d.ts
+/**
+ * A horizontal menu bar similar to a desktop application menu, composed of menus with dropdown content.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
+ *   MenubarItem, MenubarSeparator,
+ * } from '@customafk/lunas-ui/ui/menubar';
+ *
+ * <Menubar>
+ *   <MenubarMenu>
+ *     <MenubarTrigger>File</MenubarTrigger>
+ *     <MenubarContent>
+ *       <MenubarItem>New Window</MenubarItem>
+ *       <MenubarSeparator />
+ *       <MenubarItem>Exit</MenubarItem>
+ *     </MenubarContent>
+ *   </MenubarMenu>
+ * </Menubar>
+ * ```
+ */
+declare function Menubar$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.Root>): import("react").JSX.Element;
+/** Root container for a single drop-down menu entry within a Menubar. */
+declare function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof Menubar.Menu>): import("react").JSX.Element;
+/** Groups related MenubarItems under a shared logical section. */
+declare function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof Menubar.Group>): import("react").JSX.Element;
+/** Portals Menubar content outside the current DOM hierarchy. */
+declare function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof Menubar.Portal>): import("react").JSX.Element;
+/** Groups MenubarRadioItems so only one can be selected at a time. */
+declare function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof Menubar.RadioGroup>): import("react").JSX.Element;
+/** Button in the Menubar that opens its associated MenubarContent dropdown. */
+declare function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.Trigger>): import("react").JSX.Element;
+/** Animated floating panel that contains MenubarItems for a given MenubarMenu. */
+declare function MenubarContent({
+  className,
+  align,
+  alignOffset,
+  sideOffset,
+  ...props
+}: React.ComponentProps<typeof Menubar.Content>): import("react").JSX.Element;
+/**
+ * A single clickable row inside a MenubarContent.
+ *
+ * @param inset - When true, adds left padding to align with items that have icons.
+ * @param variant - Visual style: `'default'` or `'destructive'`.
+ */
+declare function MenubarItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof Menubar.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}): import("react").JSX.Element;
+/** A checkable menubar item that displays a checkmark when selected. */
+declare function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof Menubar.CheckboxItem>): import("react").JSX.Element;
+/** A radio-button menubar item; shows a filled circle when selected. */
+declare function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Menubar.RadioItem>): import("react").JSX.Element;
+/**
+ * Non-interactive label used to describe a group of menubar items.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof Menubar.Label> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Horizontal dividing line between groups of menubar items. */
+declare function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.Separator>): import("react").JSX.Element;
+/** Displays a keyboard shortcut hint aligned to the right of a menubar item. */
+declare function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+/** Root container for a nested sub-menu inside a Menubar dropdown. */
+declare function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof Menubar.Sub>): import("react").JSX.Element;
+/**
+ * Menu item that reveals a nested MenubarSubContent on hover or activation.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof Menubar.SubTrigger> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Floating panel that contains the items of a nested Menubar sub-menu. */
+declare function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.SubContent>): import("react").JSX.Element;
+//#endregion
+export { MenubarItem as a, MenubarPortal as c, MenubarSeparator as d, MenubarShortcut as f, MenubarTrigger as g, MenubarSubTrigger as h, MenubarGroup as i, MenubarRadioGroup as l, MenubarSubContent as m, MenubarCheckboxItem as n, MenubarLabel as o, MenubarSub as p, MenubarContent as r, MenubarMenu as s, Menubar$1 as t, MenubarRadioItem as u };
+//# sourceMappingURL=menubar-CFrn3S96.d.mts.map

package/dist/metric-radar-chart-6LTGQHsL.mjs

@@ -0,0 +1,2 @@
+import{getChartColor as e}from"./features/charts/index.mjs";import{ChartContainer as t,ChartLegend as n,ChartLegendContent as r,ChartTooltip as i,ChartTooltipContent as a}from"./ui/chart.mjs";import{useMemo as o}from"react";import{cn as s}from"@customafk/react-toolkit/utils";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{PolarAngleAxis as u,PolarGrid as d,PolarRadiusAxis as f,Radar as p,RadarChart as m}from"recharts";const h=({data:h,series:g,valueFormatter:_=e=>e.toLocaleString(`en-US`),domain:v=[`auto`,`auto`],showLegend:y=!0,className:b,animate:x=!0,height:S})=>c(t,{"data-slot":`metric-radar-chart`,config:o(()=>Object.fromEntries(g.map((t,n)=>[t.key,{label:t.label,color:t.color||e(n)}])),[g]),className:s(`mx-auto`,S===void 0&&`aspect-square`,b),style:S===void 0?void 0:{height:S,aspectRatio:`auto`},children:l(m,{data:h,children:[c(d,{}),c(u,{dataKey:`metric`,tick:{fontSize:12}}),c(f,{domain:v,tick:!1,axisLine:!1}),c(i,{content:c(a,{formatter:e=>_(Number(e))})}),g.map((t,n)=>{let r=t.color||e(n);return c(p,{dataKey:t.key,stroke:r,fill:r,fillOpacity:.25,isAnimationActive:x},t.key)}),y&&c(n,{content:c(r,{})})]})});export{h as MetricRadarChart};
+//# sourceMappingURL=metric-radar-chart-6LTGQHsL.mjs.map

package/dist/metric-radar-chart-6LTGQHsL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-radar-chart-6LTGQHsL.mjs","names":[],"sources":["../packages/components/features/charts/components/metric-radar-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 { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor } from '../utils';\n\nexport type MetricRadarChartProps = BaseChartProps & {\n  data: Array<{ metric: string } & Record<string, unknown>>;\n  /** One entry per entity being compared (e.g. a candidate, a product, a team). */\n  series: ChartSeries[];\n  valueFormatter?: (value: number) => string;\n  /** Radius-axis domain. Defaults to `['auto', 'auto']`. */\n  domain?: [number | 'auto', number | 'auto'];\n  showLegend?: boolean;\n};\n\n/**\n * A radar chart comparing one or more entities across several metrics/dimensions — performance\n * review scores, feature comparisons, skill matrices.\n *\n * @example\n * ```tsx\n * import { MetricRadarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <MetricRadarChart\n *   data={[\n *     { metric: 'Speed', teamA: 80, teamB: 65 },\n *     { metric: 'Quality', teamA: 70, teamB: 90 },\n *     { metric: 'Cost', teamA: 60, teamB: 75 },\n *   ]}\n *   series={[\n *     { key: 'teamA', label: 'Team A' },\n *     { key: 'teamB', label: 'Team B' },\n *   ]}\n * />\n * ```\n */\nexport const MetricRadarChart = ({\n  data,\n  series,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  domain = ['auto', 'auto'],\n  showLegend = true,\n  className,\n  animate = true,\n  height,\n}: MetricRadarChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => Object.fromEntries(series.map((item, index) => [item.key, { label: item.label, color: item.color || getChartColor(index) }])),\n    [series]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"metric-radar-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <RadarChart data={data}>\n        <PolarGrid />\n        <PolarAngleAxis dataKey=\"metric\" tick={{ fontSize: 12 }} />\n        <PolarRadiusAxis domain={domain} tick={false} axisLine={false} />\n        <ChartTooltip content={<ChartTooltipContent formatter={value => valueFormatter(Number(value))} />} />\n        {series.map((item, index) => {\n          const color = item.color || getChartColor(index);\n          return <Radar key={item.key} dataKey={item.key} stroke={color} fill={color} fillOpacity={0.25} isAnimationActive={animate} />;\n        })}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </RadarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"+aA2CA,MAAa,GAAoB,CAC/B,OACA,SACA,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,SAAS,CAAC,OAAQ,MAAM,EACxB,aAAa,GACb,YACA,UAAU,GACV,YAQE,EAAC,EAAD,CACE,YAAU,qBACV,OARW,MACP,OAAO,YAAY,EAAO,KAAK,EAAM,IAAU,CAAC,EAAK,IAAK,CAAE,MAAO,EAAK,MAAO,MAAO,EAAK,OAAS,EAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EAClI,CAAC,CAAM,CAMQ,EACb,UAAW,EAAG,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAkB,gBAAlB,CACE,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,EAAD,CAAgB,QAAQ,SAAS,KAAM,CAAE,SAAU,EAAG,CAAI,CAAA,EAC1D,EAAC,EAAD,CAAyB,SAAQ,KAAM,GAAO,SAAU,EAAQ,CAAA,EAChE,EAAC,EAAD,CAAc,QAAS,EAAC,EAAD,CAAqB,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CAAI,CAAA,CAAI,CAAA,EACnG,EAAO,KAAK,EAAM,IAAU,CAC3B,IAAM,EAAQ,EAAK,OAAS,EAAc,CAAK,EAC/C,OAAO,EAAC,EAAD,CAAsB,QAAS,EAAK,IAAK,OAAQ,EAAO,KAAM,EAAO,YAAa,IAAM,kBAAmB,CAAU,EAAzG,EAAK,GAAoG,CAC9H,CAAC,EACA,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACpD,GACE,CAAA"}

package/dist/metric-radar-chart-DwgbXgJX.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,series:s,valueFormatter:c=e=>e.toLocaleString(`en-US`),domain:l=[`auto`,`auto`],showLegend:u=!0,className:d,animate:f=!0,height:p})=>(0,i.jsx)(t.ChartContainer,{"data-slot":`metric-radar-chart`,config:(0,n.useMemo)(()=>Object.fromEntries(s.map((t,n)=>[t.key,{label:t.label,color:t.color||e.getChartColor(n)}])),[s]),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.RadarChart,{data:o,children:[(0,i.jsx)(a.PolarGrid,{}),(0,i.jsx)(a.PolarAngleAxis,{dataKey:`metric`,tick:{fontSize:12}}),(0,i.jsx)(a.PolarRadiusAxis,{domain:l,tick:!1,axisLine:!1}),(0,i.jsx)(t.ChartTooltip,{content:(0,i.jsx)(t.ChartTooltipContent,{formatter:e=>c(Number(e))})}),s.map((t,n)=>{let r=t.color||e.getChartColor(n);return(0,i.jsx)(a.Radar,{dataKey:t.key,stroke:r,fill:r,fillOpacity:.25,isAnimationActive:f},t.key)}),u&&(0,i.jsx)(t.ChartLegend,{content:(0,i.jsx)(t.ChartLegendContent,{})})]})});exports.MetricRadarChart=o;
+//# sourceMappingURL=metric-radar-chart-DwgbXgJX.cjs.map

package/dist/metric-radar-chart-DwgbXgJX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-radar-chart-DwgbXgJX.cjs","names":["ChartContainer","getChartColor","RadarChart","PolarGrid","PolarAngleAxis","PolarRadiusAxis","ChartTooltip","ChartTooltipContent","Radar","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/metric-radar-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 { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor } from '../utils';\n\nexport type MetricRadarChartProps = BaseChartProps & {\n  data: Array<{ metric: string } & Record<string, unknown>>;\n  /** One entry per entity being compared (e.g. a candidate, a product, a team). */\n  series: ChartSeries[];\n  valueFormatter?: (value: number) => string;\n  /** Radius-axis domain. Defaults to `['auto', 'auto']`. */\n  domain?: [number | 'auto', number | 'auto'];\n  showLegend?: boolean;\n};\n\n/**\n * A radar chart comparing one or more entities across several metrics/dimensions — performance\n * review scores, feature comparisons, skill matrices.\n *\n * @example\n * ```tsx\n * import { MetricRadarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <MetricRadarChart\n *   data={[\n *     { metric: 'Speed', teamA: 80, teamB: 65 },\n *     { metric: 'Quality', teamA: 70, teamB: 90 },\n *     { metric: 'Cost', teamA: 60, teamB: 75 },\n *   ]}\n *   series={[\n *     { key: 'teamA', label: 'Team A' },\n *     { key: 'teamB', label: 'Team B' },\n *   ]}\n * />\n * ```\n */\nexport const MetricRadarChart = ({\n  data,\n  series,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  domain = ['auto', 'auto'],\n  showLegend = true,\n  className,\n  animate = true,\n  height,\n}: MetricRadarChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => Object.fromEntries(series.map((item, index) => [item.key, { label: item.label, color: item.color || getChartColor(index) }])),\n    [series]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"metric-radar-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <RadarChart data={data}>\n        <PolarGrid />\n        <PolarAngleAxis dataKey=\"metric\" tick={{ fontSize: 12 }} />\n        <PolarRadiusAxis domain={domain} tick={false} axisLine={false} />\n        <ChartTooltip content={<ChartTooltipContent formatter={value => valueFormatter(Number(value))} />} />\n        {series.map((item, index) => {\n          const color = item.color || getChartColor(index);\n          return <Radar key={item.key} dataKey={item.key} stroke={color} fill={color} fillOpacity={0.25} isAnimationActive={animate} />;\n        })}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </RadarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA2CA,MAAa,GAAoB,CAC/B,OACA,SACA,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,SAAS,CAAC,OAAQ,MAAM,EACxB,aAAa,GACb,YACA,UAAU,GACV,aAQE,EAAA,EAAA,IAAA,CAACA,EAAAA,eAAD,CACE,YAAU,qBACV,QAAA,EAAA,EAAA,QAAA,KAPI,OAAO,YAAY,EAAO,KAAK,EAAM,IAAU,CAAC,EAAK,IAAK,CAAE,MAAO,EAAK,MAAO,MAAO,EAAK,OAASC,EAAAA,cAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EAClI,CAAC,CAAM,CAMQ,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,WAAD,CAAkB,gBAAlB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAQ,SAAS,KAAM,CAAE,SAAU,EAAG,CAAI,CAAA,GAC1D,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAyB,SAAQ,KAAM,GAAO,SAAU,EAAQ,CAAA,GAChE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CAAI,CAAA,CAAI,CAAA,EACnG,EAAO,KAAK,EAAM,IAAU,CAC3B,IAAM,EAAQ,EAAK,OAASN,EAAAA,cAAc,CAAK,EAC/C,OAAO,EAAA,EAAA,IAAA,CAACO,EAAAA,MAAD,CAAsB,QAAS,EAAK,IAAK,OAAQ,EAAO,KAAM,EAAO,YAAa,IAAM,kBAAmB,CAAU,EAAzG,EAAK,GAAoG,CAC9H,CAAC,EACA,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACpD,GACE,CAAA"}

package/dist/mirrored-bar-chart-BT7AYPJB.mjs

@@ -0,0 +1,2 @@
+import{ChartContainer as e,ChartLegend as t,ChartLegendContent as n,ChartTooltip as r,ChartTooltipContent as i}from"./ui/chart.mjs";import{useMemo as a}from"react";import{cn as o}from"@customafk/react-toolkit/utils";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{Bar as u,BarChart as d,CartesianGrid as f,ReferenceLine as p,XAxis as m,YAxis as h}from"recharts";const g=({data:g,leftLabel:_=`Left`,rightLabel:v=`Right`,leftColor:y=`var(--chart-1)`,rightColor:b=`var(--chart-4)`,valueFormatter:x=e=>e.toLocaleString(`en-US`),showLegend:S=!0,showGrid:C=!0,className:w,animate:T=!0,height:E})=>{let D=a(()=>({left:{label:_,color:y},right:{label:v,color:b}}),[_,y,v,b]),O=a(()=>g.map(e=>({category:e.category,left:-e.left,right:e.right,originalLeft:e.left})),[g]);return c(e,{"data-slot":`mirrored-bar-chart`,config:D,className:o(`w-full`,w),style:E===void 0?void 0:{height:E,aspectRatio:`auto`},children:l(d,{data:O,layout:`vertical`,margin:{top:8,right:12,bottom:0,left:12},children:[C&&c(f,{horizontal:!1}),c(m,{type:`number`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:e=>x(Math.abs(e))}),c(h,{type:`category`,dataKey:`category`,tickLine:!1,axisLine:!1,tickMargin:8,width:64}),c(p,{x:0,stroke:`var(--border)`}),c(r,{content:c(i,{formatter:(e,t,n)=>{let r=t===`left`,i=r?n.payload.originalLeft:Number(e);return l(s,{children:[c(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),c(`span`,{className:`text-muted`,children:r?_:v}),c(`span`,{className:`ml-auto font-medium font-number text-text-positive-strong tabular-nums`,children:x(i)})]})}})}),c(u,{dataKey:`left`,fill:y,radius:[4,0,0,4],isAnimationActive:T}),c(u,{dataKey:`right`,fill:b,radius:[0,4,4,0],isAnimationActive:T}),S&&c(t,{content:c(n,{})})]})})};export{g as MirroredBarChart};
+//# sourceMappingURL=mirrored-bar-chart-BT7AYPJB.mjs.map

package/dist/mirrored-bar-chart-BT7AYPJB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mirrored-bar-chart-BT7AYPJB.mjs","names":[],"sources":["../packages/components/features/charts/components/mirrored-bar-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, BarChart, CartesianGrid, ReferenceLine, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps } from '../types';\n\nexport type MirroredBarRow = {\n  category: string;\n  left: number;\n  right: number;\n};\n\nexport type MirroredBarChartProps = BaseChartProps & {\n  data: MirroredBarRow[];\n  leftLabel?: string;\n  rightLabel?: string;\n  leftColor?: string;\n  rightColor?: string;\n  valueFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A two-sided horizontal bar comparison (population-pyramid style) — this period vs. last\n * period, male vs. female, before vs. after — mirrored around a shared zero baseline.\n *\n * @example\n * ```tsx\n * import { MirroredBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <MirroredBarChart\n *   data={[\n *     { category: '18-24', left: 1200, right: 1400 },\n *     { category: '25-34', left: 2600, right: 2100 },\n *   ]}\n *   leftLabel=\"Male\"\n *   rightLabel=\"Female\"\n * />\n * ```\n */\nexport const MirroredBarChart = ({\n  data,\n  leftLabel = 'Left',\n  rightLabel = 'Right',\n  leftColor = 'var(--chart-1)',\n  rightColor = 'var(--chart-4)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: MirroredBarChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => ({ left: { label: leftLabel, color: leftColor }, right: { label: rightLabel, color: rightColor } }),\n    [leftLabel, leftColor, rightLabel, rightColor]\n  );\n\n  const chartData = useMemo(() => data.map(row => ({ category: row.category, left: -row.left, right: row.right, originalLeft: row.left })), [data]);\n\n  const axisFormatter = (value: number) => valueFormatter(Math.abs(value));\n\n  return (\n    <ChartContainer\n      data-slot=\"mirrored-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={chartData} layout=\"vertical\" margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid horizontal={false} />}\n        <XAxis type=\"number\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={axisFormatter} />\n        <YAxis type=\"category\" dataKey=\"category\" tickLine={false} axisLine={false} tickMargin={8} width={64} />\n        <ReferenceLine x={0} stroke=\"var(--border)\" />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              formatter={(value, name, item) => {\n                const isLeft = name === 'left';\n                const rawValue = isLeft ? item.payload.originalLeft : Number(value);\n                return (\n                  <>\n                    <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                    <span className=\"text-muted\">{isLeft ? leftLabel : rightLabel}</span>\n                    <span className=\"ml-auto font-medium font-number text-text-positive-strong tabular-nums\">{valueFormatter(rawValue)}</span>\n                  </>\n                );\n              }}\n            />\n          }\n        />\n        <Bar dataKey=\"left\" fill={leftColor} radius={[4, 0, 0, 4]} isAnimationActive={animate} />\n        <Bar dataKey=\"right\" fill={rightColor} radius={[0, 4, 4, 0]} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"iYA8CA,MAAa,GAAoB,CAC/B,OACA,YAAY,OACZ,aAAa,QACb,YAAY,iBACZ,aAAa,iBACb,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,YAC2B,CAC3B,IAAM,EAAS,OACN,CAAE,KAAM,CAAE,MAAO,EAAW,MAAO,CAAU,EAAG,MAAO,CAAE,MAAO,EAAY,MAAO,CAAW,CAAE,GACvG,CAAC,EAAW,EAAW,EAAY,CAAU,CAC/C,EAEM,EAAY,MAAc,EAAK,IAAI,IAAQ,CAAE,SAAU,EAAI,SAAU,KAAM,CAAC,EAAI,KAAM,MAAO,EAAI,MAAO,aAAc,EAAI,IAAK,EAAE,EAAG,CAAC,CAAI,CAAC,EAIhJ,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,CAAU,KAAM,EAAW,OAAO,WAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAA9F,CACG,GAAY,EAAC,EAAD,CAAe,WAAY,EAAQ,CAAA,EAChD,EAAC,EAAD,CAAO,KAAK,SAAS,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAXrD,GAAkB,EAAe,KAAK,IAAI,CAAK,CAAC,CAWoC,CAAA,EACrG,EAAC,EAAD,CAAO,KAAK,WAAW,QAAQ,WAAW,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,EAAK,CAAA,EACvG,EAAC,EAAD,CAAe,EAAG,EAAG,OAAO,eAAiB,CAAA,EAC7C,EAAC,EAAD,CACE,QACE,EAAC,EAAD,CACE,WAAY,EAAO,EAAM,IAAS,CAChC,IAAM,EAAS,IAAS,OAClB,EAAW,EAAS,EAAK,QAAQ,aAAe,OAAO,CAAK,EAClE,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,EAC1F,EAAC,OAAD,CAAM,UAAU,sBAAc,EAAS,EAAY,CAAiB,CAAA,EACpE,EAAC,OAAD,CAAM,UAAU,kFAA0E,EAAe,CAAQ,CAAQ,CAAA,CACzH,CAAA,CAAA,CAEN,CACD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CAAK,QAAQ,OAAO,KAAM,EAAW,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EACxF,EAAC,EAAD,CAAK,QAAQ,QAAQ,KAAM,EAAY,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EACzF,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACtD,GACI,CAAA,CAEpB"}

package/dist/mirrored-bar-chart-BwjtExjh.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/chart.cjs");let t=require("react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime"),i=require("recharts");const a=({data:a,leftLabel:o=`Left`,rightLabel:s=`Right`,leftColor:c=`var(--chart-1)`,rightColor:l=`var(--chart-4)`,valueFormatter:u=e=>e.toLocaleString(`en-US`),showLegend:d=!0,showGrid:f=!0,className:p,animate:m=!0,height:h})=>{let g=(0,t.useMemo)(()=>({left:{label:o,color:c},right:{label:s,color:l}}),[o,c,s,l]),_=(0,t.useMemo)(()=>a.map(e=>({category:e.category,left:-e.left,right:e.right,originalLeft:e.left})),[a]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`mirrored-bar-chart`,config:g,className:(0,n.cn)(`w-full`,p),style:h===void 0?void 0:{height:h,aspectRatio:`auto`},children:(0,r.jsxs)(i.BarChart,{data:_,layout:`vertical`,margin:{top:8,right:12,bottom:0,left:12},children:[f&&(0,r.jsx)(i.CartesianGrid,{horizontal:!1}),(0,r.jsx)(i.XAxis,{type:`number`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:e=>u(Math.abs(e))}),(0,r.jsx)(i.YAxis,{type:`category`,dataKey:`category`,tickLine:!1,axisLine:!1,tickMargin:8,width:64}),(0,r.jsx)(i.ReferenceLine,{x:0,stroke:`var(--border)`}),(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{formatter:(e,t,n)=>{let i=t===`left`,a=i?n.payload.originalLeft:Number(e);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),(0,r.jsx)(`span`,{className:`text-muted`,children:i?o:s}),(0,r.jsx)(`span`,{className:`ml-auto font-medium font-number text-text-positive-strong tabular-nums`,children:u(a)})]})}})}),(0,r.jsx)(i.Bar,{dataKey:`left`,fill:c,radius:[4,0,0,4],isAnimationActive:m}),(0,r.jsx)(i.Bar,{dataKey:`right`,fill:l,radius:[0,4,4,0],isAnimationActive:m}),d&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})})};exports.MirroredBarChart=a;
+//# sourceMappingURL=mirrored-bar-chart-BwjtExjh.cjs.map

package/dist/mirrored-bar-chart-BwjtExjh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mirrored-bar-chart-BwjtExjh.cjs","names":["ChartContainer","BarChart","CartesianGrid","XAxis","YAxis","ReferenceLine","ChartTooltip","ChartTooltipContent","Bar","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/mirrored-bar-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, BarChart, CartesianGrid, ReferenceLine, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps } from '../types';\n\nexport type MirroredBarRow = {\n  category: string;\n  left: number;\n  right: number;\n};\n\nexport type MirroredBarChartProps = BaseChartProps & {\n  data: MirroredBarRow[];\n  leftLabel?: string;\n  rightLabel?: string;\n  leftColor?: string;\n  rightColor?: string;\n  valueFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A two-sided horizontal bar comparison (population-pyramid style) — this period vs. last\n * period, male vs. female, before vs. after — mirrored around a shared zero baseline.\n *\n * @example\n * ```tsx\n * import { MirroredBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <MirroredBarChart\n *   data={[\n *     { category: '18-24', left: 1200, right: 1400 },\n *     { category: '25-34', left: 2600, right: 2100 },\n *   ]}\n *   leftLabel=\"Male\"\n *   rightLabel=\"Female\"\n * />\n * ```\n */\nexport const MirroredBarChart = ({\n  data,\n  leftLabel = 'Left',\n  rightLabel = 'Right',\n  leftColor = 'var(--chart-1)',\n  rightColor = 'var(--chart-4)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: MirroredBarChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => ({ left: { label: leftLabel, color: leftColor }, right: { label: rightLabel, color: rightColor } }),\n    [leftLabel, leftColor, rightLabel, rightColor]\n  );\n\n  const chartData = useMemo(() => data.map(row => ({ category: row.category, left: -row.left, right: row.right, originalLeft: row.left })), [data]);\n\n  const axisFormatter = (value: number) => valueFormatter(Math.abs(value));\n\n  return (\n    <ChartContainer\n      data-slot=\"mirrored-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={chartData} layout=\"vertical\" margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid horizontal={false} />}\n        <XAxis type=\"number\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={axisFormatter} />\n        <YAxis type=\"category\" dataKey=\"category\" tickLine={false} axisLine={false} tickMargin={8} width={64} />\n        <ReferenceLine x={0} stroke=\"var(--border)\" />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              formatter={(value, name, item) => {\n                const isLeft = name === 'left';\n                const rawValue = isLeft ? item.payload.originalLeft : Number(value);\n                return (\n                  <>\n                    <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                    <span className=\"text-muted\">{isLeft ? leftLabel : rightLabel}</span>\n                    <span className=\"ml-auto font-medium font-number text-text-positive-strong tabular-nums\">{valueFormatter(rawValue)}</span>\n                  </>\n                );\n              }}\n            />\n          }\n        />\n        <Bar dataKey=\"left\" fill={leftColor} radius={[4, 0, 0, 4]} isAnimationActive={animate} />\n        <Bar dataKey=\"right\" fill={rightColor} radius={[0, 4, 4, 0]} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"0JA8CA,MAAa,GAAoB,CAC/B,OACA,YAAY,OACZ,aAAa,QACb,YAAY,iBACZ,aAAa,iBACb,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,YAC2B,CAC3B,IAAM,GAAA,EAAA,EAAA,QAAA,MACG,CAAE,KAAM,CAAE,MAAO,EAAW,MAAO,CAAU,EAAG,MAAO,CAAE,MAAO,EAAY,MAAO,CAAW,CAAE,GACvG,CAAC,EAAW,EAAW,EAAY,CAAU,CAC/C,EAEM,GAAA,EAAA,EAAA,QAAA,KAA0B,EAAK,IAAI,IAAQ,CAAE,SAAU,EAAI,SAAU,KAAM,CAAC,EAAI,KAAM,MAAO,EAAI,MAAO,aAAc,EAAI,IAAK,EAAE,EAAG,CAAC,CAAI,CAAC,EAIhJ,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,eAAD,CACE,YAAU,qBACF,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,SAAD,CAAU,KAAM,EAAW,OAAO,WAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAA9F,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,WAAY,EAAQ,CAAA,GAChD,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAXrD,GAAkB,EAAe,KAAK,IAAI,CAAK,CAAC,CAWoC,CAAA,GACrG,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,WAAW,QAAQ,WAAW,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,EAAK,CAAA,GACvG,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,EAAG,EAAG,OAAO,eAAiB,CAAA,GAC7C,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,WAAY,EAAO,EAAM,IAAS,CAChC,IAAM,EAAS,IAAS,OAClB,EAAW,EAAS,EAAK,QAAQ,aAAe,OAAO,CAAK,EAClE,OACE,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,EAAS,EAAY,CAAiB,CAAA,GACpE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kFAA0E,EAAe,CAAQ,CAAQ,CAAA,CACzH,CAAA,CAAA,CAEN,CACD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAAK,QAAQ,OAAO,KAAM,EAAW,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,GACxF,EAAA,EAAA,IAAA,CAACA,EAAAA,IAAD,CAAK,QAAQ,QAAQ,KAAM,EAAY,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EACzF,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACtD,GACI,CAAA,CAEpB"}

package/dist/more-button-BKBcXz6E.mjs

@@ -0,0 +1,2 @@
+import{Button as e}from"./ui/button.mjs";import{DropdownMenu as t,DropdownMenuContent as n,DropdownMenuGroup as r,DropdownMenuItem as i,DropdownMenuTrigger as a}from"./ui/dropdown-menu.mjs";import{MoreVerticalIcon as o}from"lucide-react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({items:l=[]})=>c(t,{children:[s(a,{asChild:!0,children:s(e,{size:`sm`,variant:`ghost`,color:`secondary`,className:`size-9 rounded-full`,children:s(o,{})})}),s(n,{children:s(r,{children:l.map(e=>s(i,{className:`px-3`,onSelect:t=>{e.onClick(e.id),t.preventDefault(),t.stopPropagation()},children:e.label},e.id))})})]});export{l as UITableMoreButton};
+//# sourceMappingURL=more-button-BKBcXz6E.mjs.map

package/dist/more-button-BKBcXz6E.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"more-button-BKBcXz6E.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/more-button.tsx"],"sourcesContent":["import { MoreVerticalIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\n\n/**\n * A vertical-ellipsis icon button that opens a dropdown menu populated from the\n * `items` array; intended for use in table row action columns.\n *\n * @example\n * import { UITableMoreButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableMoreButton\n *   items={[\n *     { id: 'edit', label: 'Edit', onClick: (id) => console.log(id) },\n *     { id: 'delete', label: 'Delete', onClick: (id) => console.log(id) },\n *   ]}\n * />\n */\nexport const UITableMoreButton: React.FC<{\n  /**\n   * List of menu items to render inside the dropdown.\n   * Each item must have a unique `id`, a display `label`, and an `onClick`\n   * handler that receives the item's `id`.\n   */\n  items?: { id: string; label: string; onClick: (id: string) => void }[];\n  /** Reserved for future use; currently unused by the component. */\n  onClick?: () => void;\n}> = ({ items = [] }) => {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button size=\"sm\" variant=\"ghost\" color=\"secondary\" className=\"size-9 rounded-full\">\n          <MoreVerticalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          {items.map(item => (\n            <DropdownMenuItem\n              key={item.id}\n              className=\"px-3\"\n              onSelect={e => {\n                item.onClick(item.id);\n                e.preventDefault();\n                e.stopPropagation();\n              }}\n            >\n              {item.label}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n"],"mappings":"gSAmBA,MAAa,GASP,CAAE,QAAQ,CAAC,KAEb,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAqB,QAAA,YACnB,EAAC,EAAD,CAAQ,KAAK,KAAK,QAAQ,QAAQ,MAAM,YAAY,UAAU,+BAC5D,EAAC,EAAD,CAAmB,CAAA,CACb,CAAA,CACW,CAAA,EACrB,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SACG,EAAM,IAAI,GACT,EAAC,EAAD,CAEE,UAAU,OACV,SAAU,GAAK,CACb,EAAK,QAAQ,EAAK,EAAE,EACpB,EAAE,eAAe,EACjB,EAAE,gBAAgB,CACpB,WAEC,EAAK,KACU,EATX,EAAK,EASM,CACnB,CACgB,CAAA,CACA,CAAA,CACT,CAAA,CAAA"}

package/dist/more-button-RYvZgYiu.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./ui/dropdown-menu.cjs");let n=require("lucide-react"),r=require("react/jsx-runtime");const i=({items:i=[]})=>(0,r.jsxs)(t.DropdownMenu,{children:[(0,r.jsx)(t.DropdownMenuTrigger,{asChild:!0,children:(0,r.jsx)(e.Button,{size:`sm`,variant:`ghost`,color:`secondary`,className:`size-9 rounded-full`,children:(0,r.jsx)(n.MoreVerticalIcon,{})})}),(0,r.jsx)(t.DropdownMenuContent,{children:(0,r.jsx)(t.DropdownMenuGroup,{children:i.map(e=>(0,r.jsx)(t.DropdownMenuItem,{className:`px-3`,onSelect:t=>{e.onClick(e.id),t.preventDefault(),t.stopPropagation()},children:e.label},e.id))})})]});exports.UITableMoreButton=i;
+//# sourceMappingURL=more-button-RYvZgYiu.cjs.map

package/dist/more-button-RYvZgYiu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"more-button-RYvZgYiu.cjs","names":["DropdownMenu","DropdownMenuTrigger","Button","MoreVerticalIcon","DropdownMenuContent","DropdownMenuGroup","DropdownMenuItem"],"sources":["../packages/components/features/tables/components/atoms/more-button.tsx"],"sourcesContent":["import { MoreVerticalIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\n\n/**\n * A vertical-ellipsis icon button that opens a dropdown menu populated from the\n * `items` array; intended for use in table row action columns.\n *\n * @example\n * import { UITableMoreButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableMoreButton\n *   items={[\n *     { id: 'edit', label: 'Edit', onClick: (id) => console.log(id) },\n *     { id: 'delete', label: 'Delete', onClick: (id) => console.log(id) },\n *   ]}\n * />\n */\nexport const UITableMoreButton: React.FC<{\n  /**\n   * List of menu items to render inside the dropdown.\n   * Each item must have a unique `id`, a display `label`, and an `onClick`\n   * handler that receives the item's `id`.\n   */\n  items?: { id: string; label: string; onClick: (id: string) => void }[];\n  /** Reserved for future use; currently unused by the component. */\n  onClick?: () => void;\n}> = ({ items = [] }) => {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button size=\"sm\" variant=\"ghost\" color=\"secondary\" className=\"size-9 rounded-full\">\n          <MoreVerticalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          {items.map(item => (\n            <DropdownMenuItem\n              key={item.id}\n              className=\"px-3\"\n              onSelect={e => {\n                item.onClick(item.id);\n                e.preventDefault();\n                e.stopPropagation();\n              }}\n            >\n              {item.label}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n"],"mappings":"oIAmBA,MAAa,GASP,CAAE,QAAQ,CAAC,MAEb,EAAA,EAAA,KAAA,CAACA,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAA,aACnB,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,KAAK,QAAQ,QAAQ,MAAM,YAAY,UAAU,gCAC5D,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAmB,CAAA,CACb,CAAA,CACW,CAAA,GACrB,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAA,SACG,EAAM,IAAI,IACT,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAEE,UAAU,OACV,SAAU,GAAK,CACb,EAAK,QAAQ,EAAK,EAAE,EACpB,EAAE,eAAe,EACjB,EAAE,gBAAgB,CACpB,WAEC,EAAK,KACU,EATX,EAAK,EASM,CACnB,CACgB,CAAA,CACA,CAAA,CACT,CAAA,CAAA"}

package/dist/multi-select-BbiKgAYs.d.cts

@@ -0,0 +1,116 @@
+import { t as Command$1 } from "./command-CHSJVU9o.cjs";
+import { Command } from "cmdk";
+
+//#region packages/components/ui/multi-select.d.ts
+/** Represents a single selectable option in the MultipleSelector. */
+interface Option {
+  /** Unique value used for selection and comparison. */
+  value: string;
+  /** Human-readable label displayed in the dropdown and as a badge. */
+  label: string;
+  /** When true, the option is disabled and cannot be selected. */
+  disable?: boolean;
+  /** fixed option that can‘t be removed. */
+  fixed?: boolean;
+  /** Group the options by providing key. */
+  [key: string]: string | boolean | undefined;
+}
+/** Props for the MultipleSelector component. */
+interface MultipleSelectorProps {
+  /** Controlled list of currently selected options. */
+  value?: Option[];
+  /** Initial options pre-loaded into the dropdown (uncontrolled). */
+  defaultOptions?: Option[];
+  /** manually controlled options */
+  options?: Option[];
+  placeholder?: string;
+  /** Loading component. */
+  loadingIndicator?: React.ReactNode;
+  /** Empty component. */
+  emptyIndicator?: React.ReactNode;
+  /** Debounce time for async search. Only work with `onSearch`. */
+  delay?: number;
+  /**
+   * Only work with `onSearch` prop. Trigger search when `onFocus`.
+   * For example, when user click on the input, it will trigger the search to get initial options.
+   **/
+  triggerSearchOnFocus?: boolean;
+  /** async search */
+  onSearch?: (value: string) => Promise<Option[]>;
+  /**
+   * sync search. This search will not showing loadingIndicator.
+   * The rest props are the same as async search.
+   * i.e.: creatable, groupBy, delay.
+   **/
+  onSearchSync?: (value: string) => Option[];
+  onChange?: (options: Option[]) => void;
+  /** Limit the maximum number of selected options. */
+  maxSelected?: number;
+  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
+  onMaxSelected?: (maxLimit: number) => void;
+  /** Hide the placeholder when there are options selected. */
+  hidePlaceholderWhenSelected?: boolean;
+  disabled?: boolean;
+  /** Group the options base on provided key. */
+  groupBy?: string;
+  className?: string;
+  badgeClassName?: string;
+  /**
+   * First item selected is a default behavior by cmdk. That is why the default is true.
+   * This is a workaround solution by add a dummy item.
+   *
+   * @reference: https://github.com/pacocoursey/cmdk/issues/171
+   */
+  selectFirstItem?: boolean;
+  /** Allow user to create option when there is no option matched. */
+  creatable?: boolean;
+  /** Props of `Command` */
+  commandProps?: React.ComponentPropsWithoutRef<typeof Command$1>;
+  /** Props of `CommandInput` */
+  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof Command.Input>, 'value' | 'placeholder' | 'disabled'>;
+  /** hide the clear all button. */
+  hideClearAllButton?: boolean;
+  /**  Add new item event for select with search */
+  onAddNewItem?: () => void;
+}
+/** Imperative handle exposed by MultipleSelector via `ref`. */
+interface MultipleSelectorRef {
+  /** The currently selected options. */
+  selectedValue: Option[];
+  /** The underlying `<input>` DOM element. */
+  input: HTMLInputElement;
+  /** Programmatically focus the search input. */
+  focus: () => void;
+  /** Clear all selected options. */
+  reset: () => void;
+}
+/**
+ * Returns a debounced copy of `value` that only updates after `delay` ms of inactivity.
+ *
+ * @param value - The value to debounce.
+ * @param delay - Debounce delay in milliseconds (default 500).
+ */
+declare function useDebounce<T>(value: T, delay?: number): T;
+/**
+ * A combobox-style input that allows selecting multiple options displayed as removable badge chips, with optional async search and creatable mode.
+ *
+ * @example
+ * ```tsx
+ * import { MultipleSelector } from '@customafk/lunas-ui/ui/multi-select';
+ *
+ * const options = [
+ *   { value: 'react', label: 'React' },
+ *   { value: 'vue', label: 'Vue' },
+ * ];
+ *
+ * <MultipleSelector
+ *   options={options}
+ *   placeholder="Select frameworks…"
+ *   onChange={(selected) => console.log(selected)}
+ * />
+ * ```
+ */
+declare const MultipleSelector: import("react").ForwardRefExoticComponent<MultipleSelectorProps & import("react").RefAttributes<MultipleSelectorRef>>;
+//#endregion
+export { useDebounce as i, MultipleSelectorRef as n, Option as r, MultipleSelector as t };
+//# sourceMappingURL=multi-select-BbiKgAYs.d.cts.map