@customafk/lunas-ui 0.2.65 → 0.2.66

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

package/dist/multi-select-BoBHt_Z9.d.mts

@@ -0,0 +1,116 @@
+import { t as Command$1 } from "./command-Bb6SneVI.mjs";
+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-BoBHt_Z9.d.mts.map

package/dist/name-7aoM5rAW.d.cts

@@ -0,0 +1,18 @@
+//#region packages/components/data-display/name.d.ts
+type NameDisplayProps = {
+  /** The full name string to display; shown truncated inline and in full via tooltip. */name: string;
+};
+/**
+ * Renders a clamped, truncated name with a tooltip that reveals the complete text on hover.
+ *
+ * @example
+ * ```tsx
+ * import { NameDisplay } from '@customafk/lunas-ui/data-display/name';
+ *
+ * <NameDisplay name="Nguyễn Văn An" />
+ * ```
+ */
+declare const NameDisplay: React.FC<NameDisplayProps>;
+//#endregion
+export { NameDisplay as t };
+//# sourceMappingURL=name-7aoM5rAW.d.cts.map

package/dist/name-7aoM5rAW.d.mts

@@ -0,0 +1,18 @@
+//#region packages/components/data-display/name.d.ts
+type NameDisplayProps = {
+  /** The full name string to display; shown truncated inline and in full via tooltip. */name: string;
+};
+/**
+ * Renders a clamped, truncated name with a tooltip that reveals the complete text on hover.
+ *
+ * @example
+ * ```tsx
+ * import { NameDisplay } from '@customafk/lunas-ui/data-display/name';
+ *
+ * <NameDisplay name="Nguyễn Văn An" />
+ * ```
+ */
+declare const NameDisplay: React.FC<NameDisplayProps>;
+//#endregion
+export { NameDisplay as t };
+//# sourceMappingURL=name-7aoM5rAW.d.mts.map

package/dist/name-display-B6X52ip_.cjs

@@ -0,0 +1,2 @@
+const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-7aC9WFs9.cjs");let r=require("react/jsx-runtime");const i=({name:i})=>i?(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{children:(0,r.jsx)(e.Paragraph,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:i})}),(0,r.jsx)(t.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,r.jsx)(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:i}),(0,r.jsxs)(`p`,{className:`w-full text-end`,children:[i.length,` chars`]})]})})]}):(0,r.jsx)(n.Y,{});exports.UITableNameDisplay=i;
+//# sourceMappingURL=name-display-B6X52ip_.cjs.map

package/dist/name-display-B6X52ip_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"name-display-B6X52ip_.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. */\ntype NameDisplayProps = {\n  /** The name string to display; renders an empty placeholder when falsy. */\n  name?: string | null | undefined;\n};\n\n/**\n * Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n *\n * @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  if (!name) return <UITableEmpty />;\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n          <p className=\"w-full text-end\">{name.length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"kJAqBA,MAAa,GAAkD,CAAE,UAC1D,GAEH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,mEAC/B,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,yCACtC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,oDAA4C,CAAQ,CAAA,GACjE,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAK,OAAO,QAAS,GAClD,GACS,CAAA,CACT,CAAA,CAAA,GAdO,EAAA,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAe,CAAA"}

package/dist/name-display-DXMZ8Lug.mjs

@@ -0,0 +1,2 @@
+import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Y as i}from"./tables-UikqnT9q.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({name:s})=>s?o(t,{children:[a(r,{children:a(e,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:s})}),a(n,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:o(`div`,{className:`flex flex-col gap-y-2`,children:[a(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:s}),o(`p`,{className:`w-full text-end`,children:[s.length,` chars`]})]})})]}):a(i,{});export{s as UITableNameDisplay};
+//# sourceMappingURL=name-display-DXMZ8Lug.mjs.map

package/dist/name-display-DXMZ8Lug.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"name-display-DXMZ8Lug.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. */\ntype NameDisplayProps = {\n  /** The name string to display; renders an empty placeholder when falsy. */\n  name?: string | null | undefined;\n};\n\n/**\n * Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n *\n * @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  if (!name) return <UITableEmpty />;\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n          <p className=\"w-full text-end\">{name.length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"sOAqBA,MAAa,GAAkD,CAAE,UAC1D,EAEH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,mEAC/B,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,wCACtC,EAAC,MAAD,CAAK,UAAU,iCAAf,CACE,EAAC,IAAD,CAAG,UAAU,oDAA4C,CAAQ,CAAA,EACjE,EAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAK,OAAO,QAAS,GAClD,GACS,CAAA,CACT,CAAA,CAAA,EAdO,EAAC,EAAD,CAAe,CAAA"}

package/dist/navigation-menu-B1BY9Zll.d.cts

@@ -0,0 +1,73 @@
+import { NavigationMenu } from "radix-ui";
+
+//#region packages/components/ui/navigation-menu.d.ts
+/**
+ * Root provider for the NavigationMenu — a horizontal nav bar with dropdown content panels.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   NavigationMenu, NavigationMenuList, NavigationMenuItem,
+ *   NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
+ * } from '@customafk/lunas-ui/ui/navigation-menu';
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <NavigationMenuLink href="/products">All Products</NavigationMenuLink>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ */
+declare function NavigationMenu$1({
+  className,
+  children,
+  viewport,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Root> & {
+  /** When false, the viewport animation panel is omitted (useful for inline menus). */viewport?: boolean;
+}): import("react").JSX.Element;
+/** Horizontal list that holds NavigationMenuItems. */
+declare function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.List>): import("react").JSX.Element;
+/** A single navigation entry that may contain a trigger and a dropdown content panel. */
+declare function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Item>): import("react").JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Button that opens the associated NavigationMenuContent panel on focus or hover. */
+declare function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Trigger>): import("react").JSX.Element;
+/** Dropdown content panel revealed when a NavigationMenuTrigger is activated. */
+declare function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Content>): import("react").JSX.Element;
+/** Animated viewport container that hosts the active NavigationMenuContent. */
+declare function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Viewport>): import("react").JSX.Element;
+/** A styled link used inside NavigationMenuContent that highlights when active. */
+declare function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Link>): import("react").JSX.Element;
+/** Small arrow indicator that points from the active NavigationMenuTrigger to its content panel. */
+declare function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Indicator>): import("react").JSX.Element;
+//#endregion
+export { NavigationMenuLink as a, NavigationMenuViewport as c, NavigationMenuItem as i, navigationMenuTriggerStyle as l, NavigationMenuContent as n, NavigationMenuList as o, NavigationMenuIndicator as r, NavigationMenuTrigger as s, NavigationMenu$1 as t };
+//# sourceMappingURL=navigation-menu-B1BY9Zll.d.cts.map