@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/ui/chart.tsx","../src/components/ui/size-context.tsx","../src/components/ui/bar-chart.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"../../lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\n/**\n * Markers use `--color-surface-brand` as a placeholder. Giddaa has no\n * categorical chart palette yet — add `chart-1`…`chart-N` tokens and bind each\n * series (its legend marker and tooltip dot) to its own colour once they exist.\n * Until then any series without an explicit colour paints brand-green.\n */\nconst SERIES_COLOR_PLACEHOLDER = \"var(--color-surface-brand)\";\n\n/** How a precise value is formatted in the tooltip and which prefix/suffix it carries. */\nexport type ChartValueType = \"number\" | \"percentage\" | \"currency\";\n\nfunction formatChartValue(\n\tvalue: TooltipValueType | undefined,\n\ttype: ChartValueType,\n) {\n\tif (Array.isArray(value)) {\n\t\treturn value.join(\", \");\n\t}\n\n\tif (typeof value !== \"number\") {\n\t\treturn value == null ? \"\" : String(value);\n\t}\n\n\tswitch (type) {\n\t\tcase \"currency\":\n\t\t\treturn `₦${value.toLocaleString(\"en-NG\")}`;\n\t\tcase \"percentage\":\n\t\t\treturn `${value.toLocaleString(\"en-NG\", {\n\t\t\t\tminimumFractionDigits: 1,\n\t\t\t\tmaximumFractionDigits: 1,\n\t\t\t})}%`;\n\t\tdefault:\n\t\t\treturn value.toLocaleString(\"en-NG\");\n\t}\n}\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n\tstring,\n\t{\n\t\tlabel?: React.ReactNode;\n\t\ticon?: React.ComponentType;\n\t} & (\n\t\t| { color?: string; theme?: never }\n\t\t| { color?: never; theme: Record<keyof typeof THEMES, string> }\n\t)\n>;\n\ntype ChartContextProps = {\n\tconfig: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n\tconst context = React.useContext(ChartContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useChart must be used within a <ChartContainer />\");\n\t}\n\n\treturn context;\n}\n\n/**\n * Shared chart frame — the chrome that surrounds the plot of any chart type\n * (bar, line, area, pie). These are presentational, domain-free, and size-aware:\n * a `size` flows through `SizeProvider` so the plot and its labels can scale\n * with the card. Compose them with the plot primitives:\n *\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Revenue Overview</ChartTitle>\n *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>\n *   </ChartHeader>\n *   <ChartContainer config={config}>{/* recharts plot *\\/}</ChartContainer>\n * </ChartCard>\n */\nconst chartCardVariants = cva(\n\t\"flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-3 p-4\",\n\t\t\t\tmd: \"gap-4 p-5\",\n\t\t\t\tlg: \"gap-5 p-6\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartCard({\n\tclassName,\n\tsize,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"section\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<SizeProvider size={resolvedSize}>\n\t\t\t<section\n\t\t\t\tdata-slot=\"chart-card\"\n\t\t\t\tclassName={cn(chartCardVariants({ size: resolvedSize }), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</section>\n\t\t</SizeProvider>\n\t);\n}\n\nfunction ChartHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"chart-header\"\n\t\t\tclassName={cn(\"flex min-w-0 flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartTitleVariants = cva(\"min-w-0 font-bold text-fg-primary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-md\",\n\t\t\tmd: \"text-gdt-lg\",\n\t\t\tlg: \"text-gdt-h5\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartTitle({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"h3\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<h3\n\t\t\tdata-slot=\"chart-title\"\n\t\t\tclassName={cn(chartTitleVariants({ size: resolvedSize }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartDescriptionVariants = cva(\"min-w-0 font-normal text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartDescription({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"p\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"chart-description\"\n\t\t\tclassName={cn(\n\t\t\t\tchartDescriptionVariants({ size: resolvedSize }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ChartContainer({\n\tid,\n\tclassName,\n\tchildren,\n\tconfig,\n\tinitialDimension = INITIAL_DIMENSION,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tconfig: ChartConfig;\n\tchildren: React.ComponentProps<\n\t\ttypeof RechartsPrimitive.ResponsiveContainer\n\t>[\"children\"];\n\tinitialDimension?: {\n\t\twidth: number;\n\t\theight: number;\n\t};\n}) {\n\tconst uniqueId = React.useId();\n\tconst chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n\treturn (\n\t\t<ChartContext.Provider value={{ config }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"chart\"\n\t\t\t\tdata-chart={chartId}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ChartStyle id={chartId} config={config} />\n\t\t\t\t<RechartsPrimitive.ResponsiveContainer\n\t\t\t\t\tinitialDimension={initialDimension}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</RechartsPrimitive.ResponsiveContainer>\n\t\t\t</div>\n\t\t</ChartContext.Provider>\n\t);\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n\tconst colorConfig = Object.entries(config).filter(\n\t\t([, config]) => config.theme ?? config.color,\n\t);\n\n\tif (!colorConfig.length) {\n\t\treturn null;\n\t}\n\n\tconst styleContent = Object.entries(THEMES)\n\t\t.map(\n\t\t\t([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n\t.map(([key, itemConfig]) => {\n\t\tconst color =\n\t\t\titemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n\t\t\titemConfig.color;\n\t\treturn color ? `  --color-${key}: ${color};` : null;\n\t})\n\t.join(\"\\n\")}\n}\n`,\n\t\t)\n\t\t.join(\"\\n\");\n\n\treturn <style>{styleContent}</style>;\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/**\n * Hover tooltip for a chart data point. It surfaces a single precise value with\n * type-appropriate formatting — grouped integers, percentages, or ₦-prefixed\n * currency — sitting on an elevated overlay (bg-surface-overlay, Shadow-2,\n * 1px border-subtle) so users can read exact figures without leaving the chart.\n *\n * Anatomy: series dot · metric label · hero value · period caption.\n */\nconst chartTooltipVariants = cva(\n\t\"flex flex-col bg-surface-overlay border border-line-subtle shadow-2\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"gap-0.5 rounded-md p-2\",\n\t\t\t\tsm: \"gap-0.5 rounded-md p-2.5\",\n\t\t\t\tmd: \"gap-1 rounded-lg p-3\",\n\t\t\t\tlg: \"gap-1 rounded-xl p-3.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nconst chartTooltipDotVariants = cva(\"shrink-0 rounded-full\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"size-1.5\",\n\t\t\tsm: \"size-2\",\n\t\t\tmd: \"size-2.5\",\n\t\t\tlg: \"size-2.5\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nconst chartTooltipLabelVariants = cva(\"font-medium text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"text-gdt-xs\",\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nconst chartTooltipValueVariants = cva(\n\t\"font-extrabold text-fg-primary tabular-nums\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"text-gdt-sm\",\n\t\t\t\tsm: \"text-gdt-md\",\n\t\t\t\tmd: \"text-gdt-lg\",\n\t\t\t\tlg: \"text-gdt-xl\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartTooltipContent({\n\tactive,\n\tpayload,\n\tclassName,\n\thideIndicator = false,\n\tlabel,\n\tlabelFormatter,\n\tformatter,\n\tcolor,\n\tnameKey,\n\tvalueType = \"number\",\n\tsize = \"md\",\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n\tReact.ComponentProps<\"div\"> & {\n\t\thideIndicator?: boolean;\n\t\tnameKey?: string;\n\t\tvalueType?: ChartValueType;\n\t} & VariantProps<typeof chartTooltipVariants> &\n\tOmit<\n\t\tRechartsPrimitive.DefaultTooltipContentProps<\n\t\t\tTooltipValueType,\n\t\t\tTooltipNameType\n\t\t>,\n\t\t\"accessibilityLayer\"\n\t>) {\n\tconst { config } = useChart();\n\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst [item] = payload.filter((entry) => entry.type !== \"none\");\n\n\tif (!item) {\n\t\treturn null;\n\t}\n\n\tconst key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\tconst dotColor =\n\t\tcolor ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;\n\n\t// Metric label — the short name of the series being read, e.g. \"Total Revenue\".\n\tconst metricLabel = itemConfig?.label ?? item.name;\n\t// Hero value — the precise, formatted figure, the visual focus of the tooltip.\n\tconst heroValue = formatter\n\t\t? formatter(item.value, item.name ?? \"\", item, 0, item.payload)\n\t\t: formatChartValue(item.value, valueType);\n\t// Period caption — the time context for the value, e.g. \"March 2026\".\n\tconst periodCaption = labelFormatter\n\t\t? labelFormatter(label, payload)\n\t\t: ((typeof label === \"string\" ? config[label]?.label : null) ?? label);\n\n\treturn (\n\t\t<div className={cn(chartTooltipVariants({ size }), className)}>\n\t\t\t{metricLabel != null && (\n\t\t\t\t<div className=\"flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0\">\n\t\t\t\t\t{!hideIndicator &&\n\t\t\t\t\t\t(itemConfig?.icon ? (\n\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName={cn(chartTooltipDotVariants({ size }))}\n\t\t\t\t\t\t\t\tstyle={{ backgroundColor: dotColor }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t<span className={cn(chartTooltipLabelVariants({ size }))}>\n\t\t\t\t\t\t{metricLabel}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<p className={cn(chartTooltipValueVariants({ size }))}>{heroValue}</p>\n\t\t\t{periodCaption != null && periodCaption !== \"\" && (\n\t\t\t\t<p className=\"text-gdt-xs text-fg-caption-placeholder\">\n\t\t\t\t\t{periodCaption}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/** Marker shape that ties a legend item to its series. */\ntype ChartLegendMarker = \"dot\" | \"square\" | \"line\";\n\nconst chartLegendItemVariants = cva(\n\t\"group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3\",\n\t\t\t\tmd: \"gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5\",\n\t\t\t},\n\t\t\tinteractive: {\n\t\t\t\ttrue: \"cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t\tinactive: {\n\t\t\t\ttrue: \"text-fg-caption-placeholder line-through\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tinteractive: false,\n\t\t\tinactive: false,\n\t\t},\n\t},\n);\n\nconst chartLegendMarkerSizeVariants = cva(\"shrink-0\", {\n\tvariants: {\n\t\tmarker: {\n\t\t\tdot: \"rounded-full\",\n\t\t\tsquare: \"rounded-[2px]\",\n\t\t\tline: \"rounded-full\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"\",\n\t\t\tmd: \"\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{ marker: [\"dot\", \"square\"], size: \"sm\", className: \"size-2\" },\n\t\t{ marker: [\"dot\", \"square\"], size: \"md\", className: \"size-2.5\" },\n\t\t{ marker: \"line\", size: \"sm\", className: \"h-[3px] w-3\" },\n\t\t{ marker: \"line\", size: \"md\", className: \"h-[3px] w-3.5\" },\n\t],\n\tdefaultVariants: { marker: \"dot\", size: \"md\" },\n});\n\n/**\n * A shared legend for all chart types. Each item pairs a series marker with a\n * label and can be toggled to hide or show its series — the inactive state mutes\n * the marker and strikes through the label. Items compose into horizontal rows\n * or vertical columns, in two sizes, with dot, square, or line markers.\n *\n * Toggling: pass `onToggle` to make items interactive. Inactive items are read\n * from each payload entry's `inactive` flag (recharts sets this when wired) or\n * the controlled `inactiveKeys` set.\n */\nfunction ChartLegendContent({\n\tclassName,\n\thideIcon = false,\n\tpayload,\n\tverticalAlign = \"bottom\",\n\tnameKey,\n\tmarker = \"dot\",\n\tsize = \"md\",\n\torientation = \"horizontal\",\n\tinactiveKeys,\n\tonToggle,\n}: React.ComponentProps<\"div\"> & {\n\thideIcon?: boolean;\n\tnameKey?: string;\n\tmarker?: ChartLegendMarker;\n\tsize?: \"sm\" | \"md\";\n\torientation?: \"horizontal\" | \"vertical\";\n\tinactiveKeys?: Iterable<string>;\n\tonToggle?: (key: string) => void;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n\tconst { config } = useChart();\n\n\tif (!payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst inactiveSet = inactiveKeys ? new Set(inactiveKeys) : undefined;\n\tconst interactive = Boolean(onToggle);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex\",\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"flex-col items-start gap-0.5\"\n\t\t\t\t\t: \"flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5\",\n\t\t\t\tverticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{payload\n\t\t\t\t.filter((item) => item.type !== \"none\")\n\t\t\t\t.map((item, index) => {\n\t\t\t\t\tconst key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n\t\t\t\t\tconst itemKey = `${item.dataKey ?? item.value ?? index}`;\n\t\t\t\t\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\t\t\t\t\tconst inactive =\n\t\t\t\t\t\t(inactiveSet?.has(key) ?? false) || Boolean(item.inactive);\n\t\t\t\t\tconst markerColor = inactive\n\t\t\t\t\t\t? \"var(--color-fg-caption-placeholder)\"\n\t\t\t\t\t\t: (item.color ?? SERIES_COLOR_PLACEHOLDER);\n\n\t\t\t\t\tconst content = (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{itemConfig?.icon && !hideIcon ? (\n\t\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\tchartLegendMarkerSizeVariants({ marker, size }),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tstyle={{ backgroundColor: markerColor }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{itemConfig?.label ?? item.value}\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\n\t\t\t\t\tif (interactive) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-pressed={!inactive}\n\t\t\t\t\t\t\t\tonClick={() => onToggle?.(key)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t</div>\n\t);\n}\n\n/** The size-scaled layout numbers a cartesian chart needs to build axis props. */\ntype CartesianAxisLayout = {\n\ttickMargin: number;\n\ttickFontSize: number;\n\tyAxisWidth: number;\n};\n\n/**\n * Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick\n * or axis lines, a size-scaled tick font, and a reserved value-axis width) that\n * every bar and line chart would otherwise repeat per axis. Spread the result\n * onto the recharts axis, then add the chart-specific props (`dataKey`,\n * `domain`, `ticks`, a `width`/`type` override, …):\n *\n *   const chart = useBarChartLayout();\n *   <XAxis dataKey=\"month\" {...chart.xAxis} />\n *   <YAxis domain={[0, 120]} {...chart.yAxis} />\n */\nfunction cartesianAxisProps(layout: CartesianAxisLayout) {\n\tconst tick = { fontSize: layout.tickFontSize };\n\treturn {\n\t\txAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\ttickMargin: layout.tickMargin,\n\t\t\ttick,\n\t\t},\n\t\tyAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\twidth: layout.yAxisWidth,\n\t\t\ttick,\n\t\t},\n\t} as const;\n}\n\nfunction getPayloadConfigFromPayload(\n\tconfig: ChartConfig,\n\tpayload: unknown,\n\tkey: string,\n) {\n\tif (typeof payload !== \"object\" || payload === null) {\n\t\treturn undefined;\n\t}\n\n\tconst payloadPayload =\n\t\t\"payload\" in payload &&\n\t\ttypeof payload.payload === \"object\" &&\n\t\tpayload.payload !== null\n\t\t\t? payload.payload\n\t\t\t: undefined;\n\n\tlet configLabelKey: string = key;\n\n\tif (\n\t\tkey in payload &&\n\t\ttypeof payload[key as keyof typeof payload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payload[key as keyof typeof payload] as string;\n\t} else if (\n\t\tpayloadPayload &&\n\t\tkey in payloadPayload &&\n\t\ttypeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payloadPayload[\n\t\t\tkey as keyof typeof payloadPayload\n\t\t] as string;\n\t}\n\n\treturn configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n\tcartesianAxisProps,\n\tChartCard,\n\tChartContainer,\n\tChartDescription,\n\tChartHeader,\n\tChartLegend,\n\tChartLegendContent,\n\tChartStyle,\n\tChartTitle,\n\tChartTooltip,\n\tChartTooltipContent,\n};\nexport type { CartesianAxisLayout };\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n","\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { cartesianAxisProps } from \"./chart\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * Bar charts are composed from recharts plot primitives directly — recharts\n * identifies `Bar`, `XAxis`, `YAxis`, `CartesianGrid`, and `LabelList` by\n * component identity, so they cannot be wrapped without breaking the chart.\n * This module supplies the giddaa-specific defaults that would otherwise be\n * copy-pasted into every bar chart: per-size layout numbers and a value-label\n * renderer. Pair them with the shared frame and overlays from `./chart`.\n *\n * @example\n * const chart = useBarChartLayout();\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Revenue Overview</ChartTitle>\n *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>\n *   </ChartHeader>\n *   <ChartContainer config={config} {...chart.container}>\n *     <BarChart data={data} {...chart.chart}>\n *       <CartesianGrid vertical={false} stroke=\"var(--color-line-subtle)\" />\n *       <XAxis dataKey=\"month\" {...chart.xAxis} />\n *       <YAxis {...chart.yAxis} />\n *       <ChartLegend verticalAlign=\"top\" content={<ChartLegendContent />} />\n *       <ChartTooltip content={<ChartTooltipContent />} />\n *       <Bar dataKey=\"revenue\" fill=\"var(--color-revenue)\" {...chart.bar}>\n *         <LabelList dataKey=\"revenue\" content={<BarValueLabel />} />\n *       </Bar>\n *     </BarChart>\n *   </ChartContainer>\n * </ChartCard>\n */\n\ntype BarChartLayout = {\n\t/** Plot height in px. Width stays fluid via the ResponsiveContainer. */\n\theight: number;\n\t/** Outer margin — top leaves room for value labels above the tallest bar. */\n\tmargin: { top: number; right: number; bottom: number; left: number };\n\t/** Cap on bar thickness so a few categories don't render slab-wide bars. */\n\tmaxBarSize: number;\n\t/** Gap between categories (groups), as a percentage of the band. */\n\tbarCategoryGap: string;\n\t/** Gap between bars within a group (grouped layout). */\n\tbarGap: number;\n\t/** Corner radius for a bar. */\n\tbarRadius: number;\n\t/** Axis tick label font size. */\n\ttickFontSize: number;\n\t/** Value label (on-bar number) font size. */\n\tvalueFontSize: number;\n\t/** Reserved width for the value axis. */\n\tyAxisWidth: number;\n\t/** Space between an axis and its tick labels. */\n\ttickMargin: number;\n};\n\nconst BAR_CHART_LAYOUT: Record<ComponentSize, BarChartLayout> = {\n\tsm: {\n\t\theight: 180,\n\t\tmargin: { top: 20, right: 8, bottom: 0, left: 0 },\n\t\tmaxBarSize: 22,\n\t\tbarCategoryGap: \"8%\",\n\t\tbarGap: 4,\n\t\tbarRadius: 4,\n\t\ttickFontSize: 10,\n\t\tvalueFontSize: 10,\n\t\tyAxisWidth: 28,\n\t\ttickMargin: 6,\n\t},\n\tmd: {\n\t\theight: 220,\n\t\tmargin: { top: 24, right: 12, bottom: 0, left: 0 },\n\t\tmaxBarSize: 28,\n\t\tbarCategoryGap: \"8%\",\n\t\tbarGap: 6,\n\t\tbarRadius: 6,\n\t\ttickFontSize: 11,\n\t\tvalueFontSize: 11,\n\t\tyAxisWidth: 32,\n\t\ttickMargin: 8,\n\t},\n\tlg: {\n\t\theight: 280,\n\t\tmargin: { top: 28, right: 16, bottom: 0, left: 0 },\n\t\tmaxBarSize: 36,\n\t\tbarCategoryGap: \"8%\",\n\t\tbarGap: 8,\n\t\tbarRadius: 8,\n\t\ttickFontSize: 12,\n\t\tvalueFontSize: 12,\n\t\tyAxisWidth: 36,\n\t\ttickMargin: 10,\n\t},\n};\n\n/**\n * Resolve the bar-chart layout for an explicit or inherited component size. The\n * returned object groups the giddaa defaults by the recharts component they\n * belong to — spread each onto its element, then pass the data-specific props\n * (`config`, `data`, `dataKey`, `fill`, …) directly afterwards to add or\n * override anything:\n *\n *   const chart = useBarChartLayout(size);\n *   <ChartContainer config={config} {...chart.container}>\n *     <BarChart data={data} {...chart.chart}>\n *       <XAxis dataKey=\"month\" {...chart.xAxis} />\n *       <YAxis {...chart.yAxis} />\n *       <Bar dataKey=\"revenue\" fill=\"var(--color-revenue)\" {...chart.bar} />\n */\nfunction useBarChartLayout(size?: ComponentSize) {\n\tconst layout = BAR_CHART_LAYOUT[useComponentSize(size)];\n\tconst axes = cartesianAxisProps(layout);\n\n\treturn {\n\t\tcontainer: {\n\t\t\tclassName: \"aspect-auto w-full\",\n\t\t\tstyle: { height: layout.height },\n\t\t},\n\t\tchart: {\n\t\t\taccessibilityLayer: true,\n\t\t\tmargin: layout.margin,\n\t\t\tbarCategoryGap: layout.barCategoryGap,\n\t\t\tbarGap: layout.barGap,\n\t\t},\n\t\txAxis: axes.xAxis,\n\t\tyAxis: axes.yAxis,\n\t\tbar: {\n\t\t\tradius: [layout.barRadius, layout.barRadius, 0, 0] as [\n\t\t\t\tnumber,\n\t\t\t\tnumber,\n\t\t\t\tnumber,\n\t\t\t\tnumber,\n\t\t\t],\n\t\t\tmaxBarSize: layout.maxBarSize,\n\t\t},\n\t};\n}\n\n/**\n * Renderer for recharts `<LabelList content={<BarValueLabel />} />`. recharts\n * injects the bar geometry (`x`, `y`, `width`, `height`, `value`); the rest are\n * caller props. For a vertical bar the label sits above the bar; for a\n * horizontal bar (`orientation=\"horizontal\"`) it sits to the right of the bar.\n */\ntype BarValueLabelProps = {\n\t/** Bar layout direction — drives where the label is placed. */\n\torientation?: \"vertical\" | \"horizontal\";\n\t/** Override the on-bar font size (defaults to the size-scaled value). */\n\tfontSize?: number;\n\t/** Format the raw value before display, e.g. `(v) => `₦${v}``. */\n\tformatter?: (value: React.ReactNode) => React.ReactNode;\n\tclassName?: string;\n\t// Injected by recharts at render time.\n\tx?: string | number;\n\ty?: string | number;\n\twidth?: string | number;\n\theight?: string | number;\n\tvalue?: React.ReactNode;\n};\n\nfunction BarValueLabel({\n\torientation = \"vertical\",\n\tfontSize,\n\tformatter,\n\tclassName,\n\tx,\n\ty,\n\twidth,\n\theight,\n\tvalue,\n}: BarValueLabelProps) {\n\tconst valueFontSize = BAR_CHART_LAYOUT[useComponentSize()].valueFontSize;\n\n\tif (value == null || x == null || y == null || width == null) {\n\t\treturn null;\n\t}\n\n\tconst numX = Number(x);\n\tconst numY = Number(y);\n\tconst numWidth = Number(width);\n\tconst numHeight = Number(height ?? 0);\n\tconst gap = 6;\n\n\tconst isHorizontal = orientation === \"horizontal\";\n\tconst labelX = isHorizontal ? numX + numWidth + gap : numX + numWidth / 2;\n\tconst labelY = isHorizontal ? numY + numHeight / 2 : numY - gap;\n\n\treturn (\n\t\t<text\n\t\t\tx={labelX}\n\t\t\ty={labelY}\n\t\t\ttextAnchor={isHorizontal ? \"start\" : \"middle\"}\n\t\t\tdominantBaseline={isHorizontal ? \"central\" : \"auto\"}\n\t\t\tclassName={cn(\"fill-fg-primary font-semibold tabular-nums\", className)}\n\t\t\tstyle={{ fontSize: fontSize ?? valueFontSize }}\n\t\t>\n\t\t\t{formatter ? formatter(value) : value}\n\t\t</text>\n\t);\n}\n\nexport { BAR_CHART_LAYOUT, BarValueLabel, useBarChartLayout };\nexport type { BarChartLayout, BarValueLabelProps };\n"],"mappings":"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","names":["Fragment","jsx","jsx"]}
+{"version":3,"sources":["../src/bar-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n\tBar,\n\tBarChart as BarChartPrimitive,\n\tCartesianGrid,\n\tXAxis,\n\tYAxis,\n} from \"recharts\";\nimport { type ChartConfig, ChartContainer, cartesianAxisProps } from \"./chart\";\nimport { cn } from \"./lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\n/**\n * Bar charts are composable wrappers over the recharts cartesian primitives.\n * recharts 3 registers graphical items through context when they render, so the\n * primitives CAN be wrapped in our own components. Each wrapper bakes in the\n * giddaa defaults (tokens, size-scaled type, mark specs) and forwards every\n * recharts prop, so anything can be overridden in place or replaced with the\n * raw recharts element.\n *\n * Anatomy: `BarChart` is the plot root (frame + responsive box + recharts\n * chart); compose the grid, axes, series, and the shared overlays from\n * `./chart` as children:\n *\n * @example\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Revenue Overview</ChartTitle>\n *     <ChartDescription>Monthly revenue - Jan-Jul</ChartDescription>\n *   </ChartHeader>\n *   <BarChart config={config} data={data}>\n *     <BarChartGrid />\n *     <BarChartXAxis dataKey=\"month\" />\n *     <BarChartYAxis domain={[0, 120]} />\n *     <ChartTooltip content={<ChartTooltipContent />} />\n *     <BarChartSeries dataKey=\"revenue\" name=\"Revenue\">\n *       <LabelList dataKey=\"revenue\" content={<BarValueLabel />} />\n *     </BarChartSeries>\n *   </BarChart>\n * </ChartCard>\n */\n\n/**\n * Categorical series palette - the theme-aware `chart-1`...`chart-3` tokens.\n * Assign colours in this fixed order, never cycled: a fourth series folds into\n * \"Other\" or becomes a second chart.\n */\nconst BAR_CHART_PALETTE = [\n\t\"var(--color-chart-1)\",\n\t\"var(--color-chart-2)\",\n\t\"var(--color-chart-3)\",\n] as const;\n\nconst DEFAULT_SERIES_COLOR = BAR_CHART_PALETTE[0];\n\ntype BarChartOrientation = \"vertical\" | \"horizontal\";\n\ntype BarChartLayout = {\n\t/** Plot height in px. Width stays fluid via the ResponsiveContainer. */\n\theight: number;\n\t/** Outer margin - top leaves room for value labels above the tallest bar. */\n\tmargin: { top: number; right: number; bottom: number; left: number };\n\t/** Cap on bar thickness so a few categories don't render slab-wide bars. */\n\tmaxBarSize: number;\n\t/** Gap between categories (groups), as a percentage of the band. */\n\tbarCategoryGap: string;\n\t/** Gap between bars within a group (grouped layout). */\n\tbarGap: number;\n\t/** Corner radius for a bar. */\n\tbarRadius: number;\n\t/** Axis tick label font size. */\n\ttickFontSize: number;\n\t/** Value label (on-bar number) font size. */\n\tvalueFontSize: number;\n\t/** Reserved width for the value axis. */\n\tyAxisWidth: number;\n\t/** Space between an axis and its tick labels. */\n\ttickMargin: number;\n};\n\nconst BAR_CHART_LAYOUT: Record<ComponentSize, BarChartLayout> = {\n\tsm: {\n\t\theight: 180,\n\t\tmargin: { top: 20, right: 8, bottom: 0, left: 0 },\n\t\tmaxBarSize: 22,\n\t\tbarCategoryGap: \"8%\",\n\t\tbarGap: 4,\n\t\tbarRadius: 4,\n\t\ttickFontSize: 10,\n\t\tvalueFontSize: 10,\n\t\tyAxisWidth: 28,\n\t\ttickMargin: 6,\n\t},\n\tmd: {\n\t\theight: 220,\n\t\tmargin: { top: 24, right: 12, bottom: 0, left: 0 },\n\t\tmaxBarSize: 28,\n\t\tbarCategoryGap: \"8%\",\n\t\tbarGap: 6,\n\t\tbarRadius: 6,\n\t\ttickFontSize: 11,\n\t\tvalueFontSize: 11,\n\t\tyAxisWidth: 32,\n\t\ttickMargin: 8,\n\t},\n\tlg: {\n\t\theight: 280,\n\t\tmargin: { top: 28, right: 16, bottom: 0, left: 0 },\n\t\tmaxBarSize: 36,\n\t\tbarCategoryGap: \"8%\",\n\t\tbarGap: 8,\n\t\tbarRadius: 8,\n\t\ttickFontSize: 12,\n\t\tvalueFontSize: 12,\n\t\tyAxisWidth: 36,\n\t\ttickMargin: 10,\n\t},\n};\n\nconst BarChartContext = React.createContext<{\n\torientation: BarChartOrientation;\n} | null>(null);\n\nfunction useBarChartOrientation(orientation?: BarChartOrientation) {\n\tconst context = React.useContext(BarChartContext);\n\treturn orientation ?? context?.orientation ?? \"vertical\";\n}\n\nfunction barChartAxisProps(layout: BarChartLayout) {\n\tconst axes = cartesianAxisProps(layout);\n\tconst tick = {\n\t\t...axes.xAxis.tick,\n\t\tfill: \"var(--color-fg-caption-placeholder)\",\n\t};\n\n\treturn {\n\t\txAxis: {\n\t\t\t...axes.xAxis,\n\t\t\ttick,\n\t\t},\n\t\tyAxis: {\n\t\t\t...axes.yAxis,\n\t\t\ttick,\n\t\t},\n\t} as const;\n}\n\ntype BarChartProps = Omit<\n\tReact.ComponentProps<typeof BarChartPrimitive>,\n\t\"width\" | \"height\"\n> & {\n\t/** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */\n\tconfig?: ChartConfig;\n\t/** Plot scale; inherited from the nearest `SizeProvider` when omitted. */\n\tsize?: ComponentSize;\n\t/** Applied to the responsive plot box, e.g. to override its height. */\n\tclassName?: string;\n\t/** Visual bar direction. `horizontal` maps to recharts `layout=\"vertical\"`. */\n\torientation?: BarChartOrientation;\n};\n\n/**\n * Plot root - wraps the shared `ChartContainer` (tooltip/legend theming,\n * responsive box) around the recharts `BarChart` with size-scaled height,\n * margin, and bar gaps. `size` also flows to the child primitives through\n * `SizeProvider`. Extra props reach the recharts chart (`data`, `syncId`,\n * `layout`, ...); passing `layout` directly overrides `orientation`.\n */\nfunction BarChart({\n\tconfig = {},\n\tsize,\n\tclassName,\n\tchildren,\n\torientation = \"vertical\",\n\tlayout,\n\t...props\n}: BarChartProps) {\n\tconst resolvedSize = useComponentSize(size);\n\tconst chartLayout = BAR_CHART_LAYOUT[resolvedSize];\n\tconst rechartsLayout =\n\t\tlayout ?? (orientation === \"horizontal\" ? \"vertical\" : \"horizontal\");\n\n\treturn (\n\t\t<SizeProvider size={resolvedSize}>\n\t\t\t<BarChartContext.Provider value={{ orientation }}>\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={config}\n\t\t\t\t\tclassName={cn(\"aspect-auto w-full\", className)}\n\t\t\t\t\tstyle={{ height: chartLayout.height }}\n\t\t\t\t>\n\t\t\t\t\t<BarChartPrimitive\n\t\t\t\t\t\taccessibilityLayer\n\t\t\t\t\t\tmargin={chartLayout.margin}\n\t\t\t\t\t\tbarCategoryGap={chartLayout.barCategoryGap}\n\t\t\t\t\t\tbarGap={chartLayout.barGap}\n\t\t\t\t\t\tlayout={rechartsLayout}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</BarChartPrimitive>\n\t\t\t\t</ChartContainer>\n\t\t\t</BarChartContext.Provider>\n\t\t</SizeProvider>\n\t);\n}\n\ntype BarChartGridProps = React.ComponentProps<typeof CartesianGrid>;\n\n/**\n * Value reference lines - recharts `CartesianGrid` with vertical lines hidden\n * and the visible grid painted with the `line` token (`line-subtle` matches the\n * chart card surface in both themes, so it would vanish). For horizontal bar\n * charts, pass `horizontal={false} vertical`.\n */\nfunction BarChartGrid(props: BarChartGridProps) {\n\treturn (\n\t\t<CartesianGrid vertical={false} stroke=\"var(--color-line)\" {...props} />\n\t);\n}\n\ntype BarChartXAxisProps = React.ComponentProps<typeof XAxis> & {\n\t/** Explicit axis scale; otherwise inherited from the chart's `size`. */\n\tsize?: ComponentSize;\n};\n\n/**\n * Category/value axis - recharts `XAxis` with no axis/tick lines,\n * size-scaled tick margin, and caption-placeholder tick ink. Passing your own\n * `tick` replaces the default styling entirely.\n */\nfunction BarChartXAxis({ size, tick, ...props }: BarChartXAxisProps) {\n\tconst layout = BAR_CHART_LAYOUT[useComponentSize(size)];\n\tconst axes = barChartAxisProps(layout);\n\n\treturn (\n\t\t<XAxis\n\t\t\ttickLine={axes.xAxis.tickLine}\n\t\t\taxisLine={axes.xAxis.axisLine}\n\t\t\ttickMargin={axes.xAxis.tickMargin}\n\t\t\ttick={tick ?? axes.xAxis.tick}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\ntype BarChartYAxisProps = React.ComponentProps<typeof YAxis> & {\n\t/** Explicit axis scale; otherwise inherited from the chart's `size`. */\n\tsize?: ComponentSize;\n};\n\n/**\n * Value/category axis - recharts `YAxis` with no axis/tick lines,\n * size-scaled tick type, and reserved width for value labels. Override `width`\n * for long horizontal-category labels.\n */\nfunction BarChartYAxis({ size, tick, ...props }: BarChartYAxisProps) {\n\tconst layout = BAR_CHART_LAYOUT[useComponentSize(size)];\n\tconst axes = barChartAxisProps(layout);\n\n\treturn (\n\t\t<YAxis\n\t\t\ttickLine={axes.yAxis.tickLine}\n\t\t\taxisLine={axes.yAxis.axisLine}\n\t\t\twidth={axes.yAxis.width}\n\t\t\ttick={tick ?? axes.yAxis.tick}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\ntype BarChartSeriesProps = React.ComponentProps<typeof Bar> & {\n\t/** Series colour for the bar. Defaults to the first categorical chart token. */\n\tcolor?: string;\n\t/** Explicit mark scale; otherwise inherited from the chart's `size`. */\n\tsize?: ComponentSize;\n\t/** Override visual direction for radius when the root orientation is absent. */\n\torientation?: BarChartOrientation;\n};\n\n/**\n * One data series - recharts `Bar` with the giddaa mark spec: a theme-aware\n * series colour, size-scaled max thickness, and a small radius only on the\n * leading edge (top for vertical bars, right for horizontal bars). `color`\n * drives `fill`; `fill`, `radius`, and `maxBarSize` still win when passed\n * directly.\n */\nfunction BarChartSeries({\n\tcolor = DEFAULT_SERIES_COLOR,\n\tsize,\n\torientation,\n\t...props\n}: BarChartSeriesProps) {\n\tconst layout = BAR_CHART_LAYOUT[useComponentSize(size)];\n\tconst resolvedOrientation = useBarChartOrientation(orientation);\n\tconst radius =\n\t\tresolvedOrientation === \"horizontal\"\n\t\t\t? ([0, layout.barRadius, layout.barRadius, 0] as [\n\t\t\t\t\tnumber,\n\t\t\t\t\tnumber,\n\t\t\t\t\tnumber,\n\t\t\t\t\tnumber,\n\t\t\t\t])\n\t\t\t: ([layout.barRadius, layout.barRadius, 0, 0] as [\n\t\t\t\t\tnumber,\n\t\t\t\t\tnumber,\n\t\t\t\t\tnumber,\n\t\t\t\t\tnumber,\n\t\t\t\t]);\n\n\treturn (\n\t\t<Bar\n\t\t\tfill={color}\n\t\t\tradius={radius}\n\t\t\tmaxBarSize={layout.maxBarSize}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Renderer for recharts `<LabelList content={<BarValueLabel />} />`. recharts\n * injects the bar geometry (`x`, `y`, `width`, `height`, `value`); the rest are\n * caller props. For a vertical bar the label sits above the bar; for a\n * horizontal bar it sits to the right of the bar. When used inside `BarChart`,\n * the root `orientation` is inherited unless this component receives an\n * explicit `orientation`.\n */\ntype BarValueLabelProps = {\n\t/** Bar visual direction - drives where the label is placed. */\n\torientation?: BarChartOrientation;\n\t/** Override the on-bar font size (defaults to the size-scaled value). */\n\tfontSize?: number;\n\t/** Format the raw value before display, e.g. `(v) => String(v)`. */\n\tformatter?: (value: React.ReactNode) => React.ReactNode;\n\t/** Explicit label scale; otherwise inherited from the chart's `size`. */\n\tsize?: ComponentSize;\n\tclassName?: string;\n\t// Injected by recharts at render time.\n\tx?: string | number;\n\ty?: string | number;\n\twidth?: string | number;\n\theight?: string | number;\n\tvalue?: React.ReactNode;\n};\n\nfunction BarValueLabel({\n\torientation,\n\tfontSize,\n\tformatter,\n\tsize,\n\tclassName,\n\tx,\n\ty,\n\twidth,\n\theight,\n\tvalue,\n}: BarValueLabelProps) {\n\tconst resolvedOrientation = useBarChartOrientation(orientation);\n\tconst valueFontSize = BAR_CHART_LAYOUT[useComponentSize(size)].valueFontSize;\n\n\tif (value == null || x == null || y == null || width == null) {\n\t\treturn null;\n\t}\n\n\tconst numX = Number(x);\n\tconst numY = Number(y);\n\tconst numWidth = Number(width);\n\tconst numHeight = Number(height ?? 0);\n\tconst gap = 6;\n\n\tif (\n\t\t!Number.isFinite(numX) ||\n\t\t!Number.isFinite(numY) ||\n\t\t!Number.isFinite(numWidth) ||\n\t\t!Number.isFinite(numHeight)\n\t) {\n\t\treturn null;\n\t}\n\n\tconst isHorizontal = resolvedOrientation === \"horizontal\";\n\tconst labelX = isHorizontal ? numX + numWidth + gap : numX + numWidth / 2;\n\tconst labelY = isHorizontal ? numY + numHeight / 2 : numY - gap;\n\n\treturn (\n\t\t<text\n\t\t\tx={labelX}\n\t\t\ty={labelY}\n\t\t\ttextAnchor={isHorizontal ? \"start\" : \"middle\"}\n\t\t\tdominantBaseline={isHorizontal ? \"central\" : \"auto\"}\n\t\t\tclassName={cn(\"fill-fg-primary font-semibold tabular-nums\", className)}\n\t\t\tstyle={{ fontSize: fontSize ?? valueFontSize }}\n\t\t>\n\t\t\t{formatter ? formatter(value) : value}\n\t\t</text>\n\t);\n}\n\nexport {\n\tBAR_CHART_LAYOUT,\n\tBAR_CHART_PALETTE,\n\tBarChart,\n\tBarChartGrid,\n\tBarChartSeries,\n\tBarChartXAxis,\n\tBarChartYAxis,\n\tBarValueLabel,\n};\nexport type {\n\tBarChartGridProps,\n\tBarChartLayout,\n\tBarChartOrientation,\n\tBarChartProps,\n\tBarChartSeriesProps,\n\tBarChartXAxisProps,\n\tBarChartYAxisProps,\n\tBarValueLabelProps,\n};\n"],"mappings":"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","names":[]}

package/dist/breadcrumb.js

@@ -1,41 +1,11 @@
-// src/components/ui/breadcrumb.tsx
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/breadcrumb.tsx
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/breadcrumb.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function Breadcrumb({ className, ...props }) {
   return /* @__PURE__ */ jsx(

package/dist/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/breadcrumb.tsx","../src/lib/cn.ts"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n\treturn (\n\t\t<nav\n\t\t\taria-label=\"breadcrumb\"\n\t\t\tdata-slot=\"breadcrumb\"\n\t\t\tclassName={cn(\"min-w-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n\treturn (\n\t\t<ol\n\t\t\tdata-slot=\"breadcrumb-list\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-wrap items-center gap-2 wrap-break-word text-gdt-sm text-fg-secondary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"breadcrumb-item\"\n\t\t\tclassName={cn(\"inline-flex min-w-0 items-center gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbLink({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"a\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"a\",\n\t\tprops: mergeProps<\"a\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"inline-flex min-w-0 items-center rounded-sm text-gdt-sm font-normal text-fg-secondary transition-colors hover:text-fg-primary focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"breadcrumb-link\",\n\t\t},\n\t});\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-page\"\n\t\t\taria-current=\"page\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex min-w-0 items-center text-gdt-sm font-semibold text-fg-brand\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbSeparator({\n\tchildren,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"breadcrumb-separator\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex shrink-0 items-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? <ChevronRightIcon className=\"cn-rtl-flip\" />}\n\t\t</li>\n\t);\n}\n\nfunction BreadcrumbEllipsis({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-ellipsis\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex items-center justify-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<MoreHorizontalIcon />\n\t\t\t<span className=\"sr-only\">More</span>\n\t\t</span>\n\t);\n}\n\nexport {\n\tBreadcrumb,\n\tBreadcrumbList,\n\tBreadcrumbItem,\n\tBreadcrumbLink,\n\tBreadcrumbPage,\n\tBreadcrumbSeparator,\n\tBreadcrumbEllipsis,\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB,0BAA0B;;;ACFrD,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EACnC,QAAQ;AAAA,IACP,aAAa;AAAA,MACZ,aAAa;AAAA,QACZ;AAAA,UACC,MAAM;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC3C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC5B;;;ADtBE,cA+FA,YA/FA;AAFF,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACzE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,WAAW,SAAS;AAAA,MACjC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA+B;AAC5E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA+B;AAC5E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,0CAA0C,SAAS;AAAA,MAChE,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,eAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkC;AACjC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAiC;AAC9E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,gBAAa;AAAA,MACb,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,oBAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA+B;AAC9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA,MAEH,sBAAY,oBAAC,oBAAiB,WAAU,eAAc;AAAA;AAAA,EACxD;AAEF;AAEA,SAAS,mBAAmB;AAAA,EAC3B;AAAA,EACA,GAAG;AACJ,GAAiC;AAChC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,sBAAmB;AAAA,QACpB,oBAAC,UAAK,WAAU,WAAU,kBAAI;AAAA;AAAA;AAAA,EAC/B;AAEF;","names":[]}
+{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"./lib/cn\";\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n\treturn (\n\t\t<nav\n\t\t\taria-label=\"breadcrumb\"\n\t\t\tdata-slot=\"breadcrumb\"\n\t\t\tclassName={cn(\"min-w-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n\treturn (\n\t\t<ol\n\t\t\tdata-slot=\"breadcrumb-list\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-wrap items-center gap-2 wrap-break-word text-gdt-sm text-fg-secondary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"breadcrumb-item\"\n\t\t\tclassName={cn(\"inline-flex min-w-0 items-center gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbLink({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"a\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"a\",\n\t\tprops: mergeProps<\"a\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"inline-flex min-w-0 items-center rounded-sm text-gdt-sm font-normal text-fg-secondary transition-colors hover:text-fg-primary focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"breadcrumb-link\",\n\t\t},\n\t});\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-page\"\n\t\t\taria-current=\"page\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex min-w-0 items-center text-gdt-sm font-semibold text-fg-brand\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbSeparator({\n\tchildren,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"breadcrumb-separator\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex shrink-0 items-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? <ChevronRightIcon className=\"cn-rtl-flip\" />}\n\t\t</li>\n\t);\n}\n\nfunction BreadcrumbEllipsis({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-ellipsis\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex items-center justify-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<MoreHorizontalIcon />\n\t\t\t<span className=\"sr-only\">More</span>\n\t\t</span>\n\t);\n}\n\nexport {\n\tBreadcrumb,\n\tBreadcrumbList,\n\tBreadcrumbItem,\n\tBreadcrumbLink,\n\tBreadcrumbPage,\n\tBreadcrumbSeparator,\n\tBreadcrumbEllipsis,\n};\n"],"mappings":";;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB,0BAA0B;AAOnD,cA+FA,YA/FA;AAFF,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACzE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,WAAW,SAAS;AAAA,MACjC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA+B;AAC5E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA+B;AAC5E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,0CAA0C,SAAS;AAAA,MAChE,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,eAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkC;AACjC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAiC;AAC9E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,gBAAa;AAAA,MACb,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,oBAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA+B;AAC9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA,MAEH,sBAAY,oBAAC,oBAAiB,WAAU,eAAc;AAAA;AAAA,EACxD;AAEF;AAEA,SAAS,mBAAmB;AAAA,EAC3B;AAAA,EACA,GAAG;AACJ,GAAiC;AAChC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,sBAAmB;AAAA,QACpB,oBAAC,UAAK,WAAU,WAAU,kBAAI;AAAA;AAAA;AAAA,EAC/B;AAEF;","names":[]}

package/dist/bullet-chart.js

@@ -1,46 +1,13 @@
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
+"use client";
+import {
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
 
-// src/components/ui/bullet-chart.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+// src/bullet-chart.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 var BULLET_CHART_LAYOUT = {
   sm: {
     trackHeight: 26,
@@ -117,12 +84,12 @@ function BulletChart({
       className: cn("flex w-full flex-col gap-2", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative w-full", style: { height: layout.trackHeight }, children: [
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             "div",
             {
               className: "absolute inset-0 overflow-hidden rounded-full",
               style: { backgroundColor: BULLET_RANGE_PALETTE[0] },
-              children: zones.map((zone) => /* @__PURE__ */ jsx2(
+              children: zones.map((zone) => /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: "absolute inset-y-0",
@@ -136,7 +103,7 @@ function BulletChart({
               ))
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             "div",
             {
               className: "absolute left-0 top-1/2 rounded-full",
@@ -148,7 +115,7 @@ function BulletChart({
               }
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             "div",
             {
               className: "absolute top-1/2 rounded-full bg-fg-primary",
@@ -161,10 +128,10 @@ function BulletChart({
             }
           )
         ] }),
-        resolvedTicks.length > 0 && /* @__PURE__ */ jsx2("div", { className: "relative h-4 w-full", children: resolvedTicks.map((tick) => {
+        resolvedTicks.length > 0 && /* @__PURE__ */ jsx("div", { className: "relative h-4 w-full", children: resolvedTicks.map((tick) => {
           const pct = toPercent(tick, min, resolvedMax);
           const transform = pct <= 0 ? "translateX(0)" : pct >= 100 ? "translateX(-100%)" : "translateX(-50%)";
-          return /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(

package/dist/bullet-chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/ui/size-context.tsx","../src/components/ui/bullet-chart.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n","\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * A bullet chart — a compact linear gauge for KPI-vs-goal reporting where a full\n * bar chart would be excessive. It encodes three things on one horizontal track:\n * a **measure** bar (the actualized value), a **target** marker (the forecast to\n * beat), and qualitative **range** bands (poor · satisfactory · good context\n * zones) along a quantitative axis.\n *\n * This is just the gauge — no card, title, or value display — so it composes\n * into whatever surrounds it (a `ChartCard`, a `KpiCard`, a table cell). Unlike\n * the other charts in this folder it is not built on recharts (recharts has no\n * bullet/linear-gauge primitive); it is a few positioned bands, a centered bar,\n * and a tick. It stays size-aware via the shared `SizeProvider` and reuses the\n * brand colour tokens.\n *\n * Status colour signals whether the actual cleared the forecast: `auto` paints\n * the measure bar `status-success` when `value >= target` (OnTrack) and\n * `status-warning` when it falls short (Behind); pass `status` to override.\n *\n * Tokens:\n * - Measure bar — OnTrack `var(--color-status-success)`, Behind\n *   `var(--color-status-warning)`\n * - Target marker — `var(--color-fg-primary)`\n * - Range bands — progressively darker `stone` shades (poor → good); the base\n *   track is the lightest shade\n * - Axis ticks — `var(--color-fg-caption-placeholder)`\n *\n * @example\n * <BulletChart\n *   value={108}\n *   target={100}\n *   max={120}\n *   ranges={[60, 90]}\n *   ticks={[0, 60, 120]}\n *   valueFormatter={(v) => `₦${v}M`}\n * />\n *\n * @example\n * // Composed under a heading the consumer owns\n * <div className=\"flex flex-col gap-4\">\n *   <div className=\"flex items-start justify-between\">\n *     <div>\n *       <h3 className=\"font-bold\">Revenue</h3>\n *       <p className=\"text-fg-secondary\">Actual vs ₦100M forecast</p>\n *     </div>\n *     <span className=\"text-gdt-h3 font-extrabold\">₦108M</span>\n *   </div>\n *   <BulletChart value={108} target={100} max={120} ranges={[60, 90]} />\n * </div>\n */\n\n/** Bullet sizes line up with the three shared `ComponentSize` values. */\ntype BulletChartSize = ComponentSize;\n\n/** Measure-bar sentiment — `auto` derives it from `value` vs `target`. */\ntype BulletChartStatus = \"auto\" | \"success\" | \"warning\";\n\ntype BulletChartLayout = {\n\t/** Thickness of the range-band track (the pill) in px. */\n\ttrackHeight: number;\n\t/** Thickness of the centered measure bar in px. */\n\tmeasureHeight: number;\n\t/** Height of the target marker in px — taller than the bar, inside the track. */\n\tmarkerHeight: number;\n\t/** Target marker thickness in px. */\n\tmarkerWidth: number;\n\t/** Axis tick label class. */\n\ttickClass: string;\n};\n\nconst BULLET_CHART_LAYOUT: Record<BulletChartSize, BulletChartLayout> = {\n\tsm: {\n\t\ttrackHeight: 26,\n\t\tmeasureHeight: 11,\n\t\tmarkerHeight: 20,\n\t\tmarkerWidth: 3,\n\t\ttickClass: \"text-gdt-xs\",\n\t},\n\tmd: {\n\t\ttrackHeight: 34,\n\t\tmeasureHeight: 15,\n\t\tmarkerHeight: 26,\n\t\tmarkerWidth: 4,\n\t\ttickClass: \"text-gdt-sm\",\n\t},\n\tlg: {\n\t\ttrackHeight: 44,\n\t\tmeasureHeight: 19,\n\t\tmarkerHeight: 34,\n\t\tmarkerWidth: 5,\n\t\ttickClass: \"text-gdt-sm\",\n\t},\n};\n\n/**\n * Range-band shades, ordered poor → good. The base track is the lightest shade,\n * so the first (poorest) zone blends into it and each higher zone darkens —\n * giving the gauge its qualitative context without competing with the bar.\n */\nconst BULLET_RANGE_PALETTE = [\n\t\"var(--color-stone-200)\",\n\t\"var(--color-stone-300)\",\n\t\"var(--color-stone-400)\",\n] as const;\n\nconst STATUS_COLOR: Record<Exclude<BulletChartStatus, \"auto\">, string> = {\n\tsuccess: \"var(--color-status-success)\",\n\twarning: \"var(--color-status-warning)\",\n};\n\n/** Clamp a value into [min, max] and express it as a 0–100 track percentage. */\nfunction toPercent(value: number, min: number, max: number) {\n\tif (max <= min) return 0;\n\tconst ratio = (value - min) / (max - min);\n\treturn Math.min(Math.max(ratio, 0), 1) * 100;\n}\n\ntype BulletChartProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n\t/** The realized (actualized) value — drives the measure bar length. */\n\tvalue: number;\n\t/** The goal to beat — drives the target marker and the auto status colour. */\n\ttarget: number;\n\t/** Axis start. Default 0. */\n\tmin?: number;\n\t/** Axis end. Default the largest of `value`, `target`, and the top range. */\n\tmax?: number;\n\t/** Internal thresholds dividing [min, max] into qualitative zones, ascending. */\n\tranges?: number[];\n\t/** Axis tick values. Default `[min, midpoint, max]`. Pass `[]` to hide. */\n\tticks?: number[];\n\t/** Measure-bar sentiment. Default `auto` (success when `value >= target`). */\n\tstatus?: BulletChartStatus;\n\t/** Explicit size; otherwise inherited from the nearest `SizeProvider`. */\n\tsize?: BulletChartSize;\n\t/** Format the tick labels (and the aria summary). Default grouped integer. */\n\tvalueFormatter?: (value: number) => string;\n};\n\nfunction BulletChart({\n\tvalue,\n\ttarget,\n\tmin = 0,\n\tmax,\n\tranges,\n\tticks,\n\tstatus = \"auto\",\n\tsize,\n\tvalueFormatter = (v) => v.toLocaleString(\"en-NG\"),\n\tclassName,\n\t...props\n}: BulletChartProps) {\n\tconst layout = BULLET_CHART_LAYOUT[useComponentSize(size)];\n\n\tconst topRange = ranges?.length ? Math.max(...ranges) : 0;\n\tconst resolvedMax = max ?? (Math.max(value, target, topRange) || 1);\n\tconst resolvedTicks = ticks ?? [min, (min + resolvedMax) / 2, resolvedMax];\n\n\tconst resolvedStatus =\n\t\tstatus === \"auto\" ? (value >= target ? \"success\" : \"warning\") : status;\n\tconst measureColor = STATUS_COLOR[resolvedStatus];\n\n\t// Zones are the spans between consecutive thresholds (and the axis bounds).\n\tconst thresholds = [\n\t\tmin,\n\t\t...(ranges ?? [])\n\t\t\t.filter((r) => r > min && r < resolvedMax)\n\t\t\t.sort((a, b) => a - b),\n\t\tresolvedMax,\n\t];\n\tconst zones = thresholds.slice(0, -1).map((from, i) => ({\n\t\tfrom,\n\t\tto: thresholds[i + 1],\n\t\tcolor: BULLET_RANGE_PALETTE[Math.min(i, BULLET_RANGE_PALETTE.length - 1)],\n\t}));\n\n\tconst ariaLabel =\n\t\t(props[\"aria-label\"] as string | undefined) ??\n\t\t`${valueFormatter(value)} of ${valueFormatter(target)} target — ${\n\t\t\tresolvedStatus === \"success\" ? \"on track\" : \"behind\"\n\t\t}`;\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\trole=\"img\"\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn(\"flex w-full flex-col gap-2\", className)}\n\t\t>\n\t\t\t<div className=\"relative w-full\" style={{ height: layout.trackHeight }}>\n\t\t\t\t{/* Range bands — the lightest shade is the full-width base track,\n\t\t\t\t    darker zones layer on top, all clipped to the pill. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute inset-0 overflow-hidden rounded-full\"\n\t\t\t\t\tstyle={{ backgroundColor: BULLET_RANGE_PALETTE[0] }}\n\t\t\t\t>\n\t\t\t\t\t{zones.map((zone) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={zone.from}\n\t\t\t\t\t\t\tclassName=\"absolute inset-y-0\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tleft: `${toPercent(zone.from, min, resolvedMax)}%`,\n\t\t\t\t\t\t\t\twidth: `${\n\t\t\t\t\t\t\t\t\ttoPercent(zone.to, min, resolvedMax) -\n\t\t\t\t\t\t\t\t\ttoPercent(zone.from, min, resolvedMax)\n\t\t\t\t\t\t\t\t}%`,\n\t\t\t\t\t\t\t\tbackgroundColor: zone.color,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Measure / actual bar — centered, thinner than the track. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute left-0 top-1/2 rounded-full\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: layout.measureHeight,\n\t\t\t\t\t\twidth: `${toPercent(value, min, resolvedMax)}%`,\n\t\t\t\t\t\tbackgroundColor: measureColor,\n\t\t\t\t\t\ttransform: \"translateY(-50%)\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t{/* Target / forecast marker — taller than the bar, inside the track. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute top-1/2 rounded-full bg-fg-primary\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: layout.markerHeight,\n\t\t\t\t\t\twidth: layout.markerWidth,\n\t\t\t\t\t\tleft: `${toPercent(target, min, resolvedMax)}%`,\n\t\t\t\t\t\ttransform: \"translate(-50%, -50%)\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{resolvedTicks.length > 0 && (\n\t\t\t\t<div className=\"relative h-4 w-full\">\n\t\t\t\t\t{resolvedTicks.map((tick) => {\n\t\t\t\t\t\tconst pct = toPercent(tick, min, resolvedMax);\n\t\t\t\t\t\tconst transform =\n\t\t\t\t\t\t\tpct <= 0\n\t\t\t\t\t\t\t\t? \"translateX(0)\"\n\t\t\t\t\t\t\t\t: pct >= 100\n\t\t\t\t\t\t\t\t\t? \"translateX(-100%)\"\n\t\t\t\t\t\t\t\t\t: \"translateX(-50%)\";\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={tick}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"absolute top-0 whitespace-nowrap tabular-nums text-fg-caption-placeholder\",\n\t\t\t\t\t\t\t\t\tlayout.tickClass,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={{ left: `${pct}%`, transform }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{valueFormatter(tick)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport { BULLET_CHART_LAYOUT, BULLET_RANGE_PALETTE, BulletChart };\nexport type {\n\tBulletChartLayout,\n\tBulletChartProps,\n\tBulletChartSize,\n\tBulletChartStatus,\n};\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../src/bullet-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"./lib/cn\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * A bullet chart — a compact linear gauge for KPI-vs-goal reporting where a full\n * bar chart would be excessive. It encodes three things on one horizontal track:\n * a **measure** bar (the actualized value), a **target** marker (the forecast to\n * beat), and qualitative **range** bands (poor · satisfactory · good context\n * zones) along a quantitative axis.\n *\n * This is just the gauge — no card, title, or value display — so it composes\n * into whatever surrounds it (a `ChartCard`, a `KpiCard`, a table cell). Unlike\n * the other charts in this folder it is not built on recharts (recharts has no\n * bullet/linear-gauge primitive); it is a few positioned bands, a centered bar,\n * and a tick. It stays size-aware via the shared `SizeProvider` and reuses the\n * brand colour tokens.\n *\n * Status colour signals whether the actual cleared the forecast: `auto` paints\n * the measure bar `status-success` when `value >= target` (OnTrack) and\n * `status-warning` when it falls short (Behind); pass `status` to override.\n *\n * Tokens:\n * - Measure bar — OnTrack `var(--color-status-success)`, Behind\n *   `var(--color-status-warning)`\n * - Target marker — `var(--color-fg-primary)`\n * - Range bands — progressively darker `stone` shades (poor → good); the base\n *   track is the lightest shade\n * - Axis ticks — `var(--color-fg-caption-placeholder)`\n *\n * @example\n * <BulletChart\n *   value={108}\n *   target={100}\n *   max={120}\n *   ranges={[60, 90]}\n *   ticks={[0, 60, 120]}\n *   valueFormatter={(v) => `₦${v}M`}\n * />\n *\n * @example\n * // Composed under a heading the consumer owns\n * <div className=\"flex flex-col gap-4\">\n *   <div className=\"flex items-start justify-between\">\n *     <div>\n *       <h3 className=\"font-bold\">Revenue</h3>\n *       <p className=\"text-fg-secondary\">Actual vs ₦100M forecast</p>\n *     </div>\n *     <span className=\"text-gdt-h3 font-extrabold\">₦108M</span>\n *   </div>\n *   <BulletChart value={108} target={100} max={120} ranges={[60, 90]} />\n * </div>\n */\n\n/** Bullet sizes line up with the three shared `ComponentSize` values. */\ntype BulletChartSize = ComponentSize;\n\n/** Measure-bar sentiment — `auto` derives it from `value` vs `target`. */\ntype BulletChartStatus = \"auto\" | \"success\" | \"warning\";\n\ntype BulletChartLayout = {\n\t/** Thickness of the range-band track (the pill) in px. */\n\ttrackHeight: number;\n\t/** Thickness of the centered measure bar in px. */\n\tmeasureHeight: number;\n\t/** Height of the target marker in px — taller than the bar, inside the track. */\n\tmarkerHeight: number;\n\t/** Target marker thickness in px. */\n\tmarkerWidth: number;\n\t/** Axis tick label class. */\n\ttickClass: string;\n};\n\nconst BULLET_CHART_LAYOUT: Record<BulletChartSize, BulletChartLayout> = {\n\tsm: {\n\t\ttrackHeight: 26,\n\t\tmeasureHeight: 11,\n\t\tmarkerHeight: 20,\n\t\tmarkerWidth: 3,\n\t\ttickClass: \"text-gdt-xs\",\n\t},\n\tmd: {\n\t\ttrackHeight: 34,\n\t\tmeasureHeight: 15,\n\t\tmarkerHeight: 26,\n\t\tmarkerWidth: 4,\n\t\ttickClass: \"text-gdt-sm\",\n\t},\n\tlg: {\n\t\ttrackHeight: 44,\n\t\tmeasureHeight: 19,\n\t\tmarkerHeight: 34,\n\t\tmarkerWidth: 5,\n\t\ttickClass: \"text-gdt-sm\",\n\t},\n};\n\n/**\n * Range-band shades, ordered poor → good. The base track is the lightest shade,\n * so the first (poorest) zone blends into it and each higher zone darkens —\n * giving the gauge its qualitative context without competing with the bar.\n */\nconst BULLET_RANGE_PALETTE = [\n\t\"var(--color-stone-200)\",\n\t\"var(--color-stone-300)\",\n\t\"var(--color-stone-400)\",\n] as const;\n\nconst STATUS_COLOR: Record<Exclude<BulletChartStatus, \"auto\">, string> = {\n\tsuccess: \"var(--color-status-success)\",\n\twarning: \"var(--color-status-warning)\",\n};\n\n/** Clamp a value into [min, max] and express it as a 0–100 track percentage. */\nfunction toPercent(value: number, min: number, max: number) {\n\tif (max <= min) return 0;\n\tconst ratio = (value - min) / (max - min);\n\treturn Math.min(Math.max(ratio, 0), 1) * 100;\n}\n\ntype BulletChartProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n\t/** The realized (actualized) value — drives the measure bar length. */\n\tvalue: number;\n\t/** The goal to beat — drives the target marker and the auto status colour. */\n\ttarget: number;\n\t/** Axis start. Default 0. */\n\tmin?: number;\n\t/** Axis end. Default the largest of `value`, `target`, and the top range. */\n\tmax?: number;\n\t/** Internal thresholds dividing [min, max] into qualitative zones, ascending. */\n\tranges?: number[];\n\t/** Axis tick values. Default `[min, midpoint, max]`. Pass `[]` to hide. */\n\tticks?: number[];\n\t/** Measure-bar sentiment. Default `auto` (success when `value >= target`). */\n\tstatus?: BulletChartStatus;\n\t/** Explicit size; otherwise inherited from the nearest `SizeProvider`. */\n\tsize?: BulletChartSize;\n\t/** Format the tick labels (and the aria summary). Default grouped integer. */\n\tvalueFormatter?: (value: number) => string;\n};\n\nfunction BulletChart({\n\tvalue,\n\ttarget,\n\tmin = 0,\n\tmax,\n\tranges,\n\tticks,\n\tstatus = \"auto\",\n\tsize,\n\tvalueFormatter = (v) => v.toLocaleString(\"en-NG\"),\n\tclassName,\n\t...props\n}: BulletChartProps) {\n\tconst layout = BULLET_CHART_LAYOUT[useComponentSize(size)];\n\n\tconst topRange = ranges?.length ? Math.max(...ranges) : 0;\n\tconst resolvedMax = max ?? (Math.max(value, target, topRange) || 1);\n\tconst resolvedTicks = ticks ?? [min, (min + resolvedMax) / 2, resolvedMax];\n\n\tconst resolvedStatus =\n\t\tstatus === \"auto\" ? (value >= target ? \"success\" : \"warning\") : status;\n\tconst measureColor = STATUS_COLOR[resolvedStatus];\n\n\t// Zones are the spans between consecutive thresholds (and the axis bounds).\n\tconst thresholds = [\n\t\tmin,\n\t\t...(ranges ?? [])\n\t\t\t.filter((r) => r > min && r < resolvedMax)\n\t\t\t.sort((a, b) => a - b),\n\t\tresolvedMax,\n\t];\n\tconst zones = thresholds.slice(0, -1).map((from, i) => ({\n\t\tfrom,\n\t\tto: thresholds[i + 1],\n\t\tcolor: BULLET_RANGE_PALETTE[Math.min(i, BULLET_RANGE_PALETTE.length - 1)],\n\t}));\n\n\tconst ariaLabel =\n\t\t(props[\"aria-label\"] as string | undefined) ??\n\t\t`${valueFormatter(value)} of ${valueFormatter(target)} target — ${\n\t\t\tresolvedStatus === \"success\" ? \"on track\" : \"behind\"\n\t\t}`;\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\trole=\"img\"\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn(\"flex w-full flex-col gap-2\", className)}\n\t\t>\n\t\t\t<div className=\"relative w-full\" style={{ height: layout.trackHeight }}>\n\t\t\t\t{/* Range bands — the lightest shade is the full-width base track,\n\t\t\t\t    darker zones layer on top, all clipped to the pill. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute inset-0 overflow-hidden rounded-full\"\n\t\t\t\t\tstyle={{ backgroundColor: BULLET_RANGE_PALETTE[0] }}\n\t\t\t\t>\n\t\t\t\t\t{zones.map((zone) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={zone.from}\n\t\t\t\t\t\t\tclassName=\"absolute inset-y-0\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tleft: `${toPercent(zone.from, min, resolvedMax)}%`,\n\t\t\t\t\t\t\t\twidth: `${\n\t\t\t\t\t\t\t\t\ttoPercent(zone.to, min, resolvedMax) -\n\t\t\t\t\t\t\t\t\ttoPercent(zone.from, min, resolvedMax)\n\t\t\t\t\t\t\t\t}%`,\n\t\t\t\t\t\t\t\tbackgroundColor: zone.color,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Measure / actual bar — centered, thinner than the track. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute left-0 top-1/2 rounded-full\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: layout.measureHeight,\n\t\t\t\t\t\twidth: `${toPercent(value, min, resolvedMax)}%`,\n\t\t\t\t\t\tbackgroundColor: measureColor,\n\t\t\t\t\t\ttransform: \"translateY(-50%)\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t{/* Target / forecast marker — taller than the bar, inside the track. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute top-1/2 rounded-full bg-fg-primary\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: layout.markerHeight,\n\t\t\t\t\t\twidth: layout.markerWidth,\n\t\t\t\t\t\tleft: `${toPercent(target, min, resolvedMax)}%`,\n\t\t\t\t\t\ttransform: \"translate(-50%, -50%)\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{resolvedTicks.length > 0 && (\n\t\t\t\t<div className=\"relative h-4 w-full\">\n\t\t\t\t\t{resolvedTicks.map((tick) => {\n\t\t\t\t\t\tconst pct = toPercent(tick, min, resolvedMax);\n\t\t\t\t\t\tconst transform =\n\t\t\t\t\t\t\tpct <= 0\n\t\t\t\t\t\t\t\t? \"translateX(0)\"\n\t\t\t\t\t\t\t\t: pct >= 100\n\t\t\t\t\t\t\t\t\t? \"translateX(-100%)\"\n\t\t\t\t\t\t\t\t\t: \"translateX(-50%)\";\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={tick}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"absolute top-0 whitespace-nowrap tabular-nums text-fg-caption-placeholder\",\n\t\t\t\t\t\t\t\t\tlayout.tickClass,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={{ left: `${pct}%`, transform }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{valueFormatter(tick)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport { BULLET_CHART_LAYOUT, BULLET_RANGE_PALETTE, BulletChart };\nexport type {\n\tBulletChartLayout,\n\tBulletChartProps,\n\tBulletChartSize,\n\tBulletChartStatus,\n};\n"],"mappings":"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","names":[]}

package/dist/button-group.js

@@ -1,95 +1,19 @@
-// src/components/ui/button-group.tsx
+import {
+  Separator
+} from "./chunk-CHII2QHH.js";
+import {
+  SizeProvider,
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/button-group.tsx
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/separator.tsx
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 import { jsx } from "react/jsx-runtime";
-function Separator({
-  className,
-  orientation = "horizontal",
-  dashed = false,
-  shade = "feint",
-  thickness = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    SeparatorPrimitive,
-    {
-      "data-slot": "separator",
-      orientation,
-      className: cn(
-        "shrink-0 data-horizontal:h-0 data-horizontal:w-full data-vertical:w-0 data-vertical:self-stretch",
-        // style
-        dashed ? "border-dashed" : "border-solid",
-        // shade
-        shade === "feint" && "border-line-subtle",
-        shade === "deep" && "border-line",
-        // thickness
-        thickness === "hairline" && "data-horizontal:border-t-[0.5px] data-vertical:border-l-[0.5px]",
-        thickness === "default" && "data-horizontal:border-t data-vertical:border-l",
-        thickness === "thick" && "data-horizontal:border-t-2 data-vertical:border-l-2",
-        thickness === "extra-thick" && "data-horizontal:border-t-[3px] data-vertical:border-l-[3px]",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx2(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx2(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/button-group.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
 var buttonGroupVariants = cva(
   "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
@@ -110,7 +34,7 @@ function ButtonGroup({
   ...props
 }) {
   const size = useComponentSize();
-  return /* @__PURE__ */ jsx3(SizeProvider, { size, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(SizeProvider, { size, children: /* @__PURE__ */ jsx(
     "div",
     {
       role: "group",
@@ -148,7 +72,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     Separator,
     {
       "data-slot": "button-group-separator",

package/dist/button-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/button-group.tsx","../src/lib/cn.ts","../src/components/ui/separator.tsx","../src/components/ui/size-context.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\nimport { Separator } from \"./separator\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\nconst buttonGroupVariants = cva(\n\t\"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n\t{\n\t\tvariants: {\n\t\t\torientation: {\n\t\t\t\thorizontal:\n\t\t\t\t\t\"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-full! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n\t\t\t\tvertical:\n\t\t\t\t\t\"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-full! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\torientation: \"horizontal\",\n\t\t},\n\t},\n);\n\nfunction ButtonGroup({\n\tclassName,\n\torientation,\n\t...props\n}: React.ComponentProps<\"div\"> &\n\tVariantProps<typeof buttonGroupVariants> & { size?: ComponentSize }) {\n\tconst size = useComponentSize();\n\n\treturn (\n\t\t<SizeProvider size={size}>\n\t\t\t{/* biome-ignore lint/a11y/useSemanticElements: this primitive groups composite controls without forcing fieldset semantics. */}\n\t\t\t<div\n\t\t\t\trole=\"group\"\n\t\t\t\tdata-slot=\"button-group\"\n\t\t\t\tdata-orientation={orientation}\n\t\t\t\tclassName={cn(buttonGroupVariants({ orientation }), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</SizeProvider>\n\t);\n}\n\nfunction ButtonGroupText({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"div\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"button-group-text\",\n\t\t},\n\t});\n}\n\nfunction ButtonGroupSeparator({\n\tclassName,\n\torientation = \"vertical\",\n\t...props\n}: React.ComponentProps<typeof Separator>) {\n\treturn (\n\t\t<Separator\n\t\t\tdata-slot=\"button-group-separator\"\n\t\t\torientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tButtonGroup,\n\tButtonGroupSeparator,\n\tButtonGroupText,\n\tbuttonGroupVariants,\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\";\nimport { cn } from \"../../lib/cn\";\n\nfunction Separator({\n\tclassName,\n\torientation = \"horizontal\",\n\tdashed = false,\n\tshade = \"feint\",\n\tthickness = \"default\",\n\t...props\n}: SeparatorPrimitive.Props & {\n\tdashed?: boolean;\n\tshade?: \"feint\" | \"deep\";\n\tthickness?: \"hairline\" | \"default\" | \"thick\" | \"extra-thick\";\n}) {\n\treturn (\n\t\t<SeparatorPrimitive\n\t\t\tdata-slot=\"separator\"\n\t\t\torientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\t\"shrink-0 data-horizontal:h-0 data-horizontal:w-full data-vertical:w-0 data-vertical:self-stretch\",\n\t\t\t\t// style\n\t\t\t\tdashed ? \"border-dashed\" : \"border-solid\",\n\t\t\t\t// shade\n\t\t\t\tshade === \"feint\" && \"border-line-subtle\",\n\t\t\t\tshade === \"deep\" && \"border-line\",\n\t\t\t\t// thickness\n\t\t\t\tthickness === \"hairline\" &&\n\t\t\t\t\t\"data-horizontal:border-t-[0.5px] data-vertical:border-l-[0.5px]\",\n\t\t\t\tthickness === \"default\" &&\n\t\t\t\t\t\"data-horizontal:border-t data-vertical:border-l\",\n\t\t\t\tthickness === \"thick\" &&\n\t\t\t\t\t\"data-horizontal:border-t-2 data-vertical:border-l-2\",\n\t\t\t\tthickness === \"extra-thick\" &&\n\t\t\t\t\t\"data-horizontal:border-t-[3px] data-vertical:border-l-[3px]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Separator };\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n"],"mappings":"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","names":["jsx","jsx"]}
+{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"./lib/cn\";\nimport { Separator } from \"./separator\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\nconst buttonGroupVariants = cva(\n\t\"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n\t{\n\t\tvariants: {\n\t\t\torientation: {\n\t\t\t\thorizontal:\n\t\t\t\t\t\"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-full! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n\t\t\t\tvertical:\n\t\t\t\t\t\"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-full! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\torientation: \"horizontal\",\n\t\t},\n\t},\n);\n\nfunction ButtonGroup({\n\tclassName,\n\torientation,\n\t...props\n}: React.ComponentProps<\"div\"> &\n\tVariantProps<typeof buttonGroupVariants> & { size?: ComponentSize }) {\n\tconst size = useComponentSize();\n\n\treturn (\n\t\t<SizeProvider size={size}>\n\t\t\t{/* biome-ignore lint/a11y/useSemanticElements: this primitive groups composite controls without forcing fieldset semantics. */}\n\t\t\t<div\n\t\t\t\trole=\"group\"\n\t\t\t\tdata-slot=\"button-group\"\n\t\t\t\tdata-orientation={orientation}\n\t\t\t\tclassName={cn(buttonGroupVariants({ orientation }), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</SizeProvider>\n\t);\n}\n\nfunction ButtonGroupText({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"div\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"button-group-text\",\n\t\t},\n\t});\n}\n\nfunction ButtonGroupSeparator({\n\tclassName,\n\torientation = \"vertical\",\n\t...props\n}: React.ComponentProps<typeof Separator>) {\n\treturn (\n\t\t<Separator\n\t\t\tdata-slot=\"button-group-separator\"\n\t\t\torientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tButtonGroup,\n\tButtonGroupSeparator,\n\tButtonGroupText,\n\tbuttonGroupVariants,\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,WAA8B;AAqCpC;AA5BH,IAAM,sBAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,aAAa;AAAA,QACZ,YACC;AAAA,QACD,UACC;AAAA,MACF;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,aAAa;AAAA,IACd;AAAA,EACD;AACD;AAEA,SAAS,YAAY;AAAA,EACpB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GACsE;AACrE,QAAM,OAAO,iBAAiB;AAE9B,SACC,oBAAC,gBAAa,MAEb;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,GAAG,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACL,GACD;AAEF;AAEA,SAAS,gBAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoC;AACnC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,qBAAqB;AAAA,EAC7B;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACJ,GAA2C;AAC1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;","names":[]}

package/dist/button.d.ts

@@ -1,19 +1,19 @@
+import * as React from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { Button as Button$1 } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
 
 declare const buttonVariants: (props?: ({
-    variant?: "ghost" | "danger" | "secondary" | "primary" | "primary-outline" | "secondary-outline" | "tertiary" | "tertiary-outline" | "glass-overlay" | "link-brand" | "link-neutral" | null | undefined;
+    variant?: "danger" | "secondary" | "primary" | "primary-outline" | "secondary-outline" | "tertiary" | "tertiary-outline" | "ghost" | "whatsapp" | "glass-overlay" | "link-brand" | "link-neutral" | null | undefined;
     size?: "sm" | "md" | "lg" | "icon" | "xl" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, isLoading, children, disabled, ...props }: Button$1.Props & VariantProps<typeof buttonVariants> & {
     isLoading?: boolean;
 }): React.JSX.Element;
-type ButtonLinkProps = Omit<React.ComponentProps<"a">, "href"> & VariantProps<typeof buttonVariants> & {
+type ButtonLinkProps = useRender.ComponentProps<"a"> & VariantProps<typeof buttonVariants> & {
     disabled?: boolean;
-    href: string;
 };
-declare function ButtonLink({ className, href, variant, size, disabled, onClick, ...props }: ButtonLinkProps): React.JSX.Element;
+declare function ButtonLink({ className, render, variant, size, disabled, onClick, children, ...props }: ButtonLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 
 export { Button, ButtonLink, buttonVariants };