@alpic-ai/ui 0.0.0-staging.gfab86f0 → 0.0.0-staging.gfabea7f

package/dist/components/accordion-card.d.mts

@@ -9,11 +9,7 @@ declare function AccordionCard({ defaultOpen, open, onOpenChange, disabled, clas
 } & Omit<React$1.ComponentProps<typeof AccordionPrimitive.Root>, "type" | "collapsible" | "defaultValue" | "value" | "onValueChange" | "disabled">): React$1.JSX.Element;
 declare function AccordionCardHeader({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): React$1.JSX.Element;
 declare function AccordionCardTitle({ className, children, ...props }: React$1.HTMLAttributes<HTMLHeadingElement>): React$1.JSX.Element;
-/**
- * `className` is forwarded to the inner padding wrapper, not the Radix Content root.
- * The root always applies overflow-hidden and the accordion animations.
- * To override overflow or animation behavior, wrap this component in an additional element.
- */
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 declare function AccordionCardContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): React$1.JSX.Element;
 //#endregion
 export { AccordionCard, AccordionCardContent, AccordionCardHeader, AccordionCardTitle };

package/dist/components/accordion-card.mjs

@@ -41,11 +41,7 @@ function AccordionCardTitle({ className, children, ...props }) {
 		children
 	});
 }
-/**
-* `className` is forwarded to the inner padding wrapper, not the Radix Content root.
-* The root always applies overflow-hidden and the accordion animations.
-* To override overflow or animation behavior, wrap this component in an additional element.
-*/
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 function AccordionCardContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
 		"data-slot": "accordion-card-content",

package/dist/components/accordion.d.mts

@@ -4,11 +4,7 @@ import * as React$1 from "react";
 declare function Accordion({ ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root>): React$1.JSX.Element;
 declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): React$1.JSX.Element;
 declare function AccordionTrigger({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): React$1.JSX.Element;
-/**
- * `className` is forwarded to the inner padding wrapper, not the Radix Content root.
- * The root always applies overflow-hidden and the accordion animations.
- * To override overflow or animation behavior, wrap this component in an additional element.
- */
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): React$1.JSX.Element;
 //#endregion
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/accordion.mjs

@@ -28,11 +28,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		})
 	});
 }
-/**
-* `className` is forwarded to the inner padding wrapper, not the Radix Content root.
-* The root always applies overflow-hidden and the accordion animations.
-* To override overflow or animation behavior, wrap this component in an additional element.
-*/
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 function AccordionContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
 		"data-slot": "accordion-content",

package/dist/components/attachment-tile.d.mts

@@ -1,14 +1,9 @@
 //#region src/components/attachment-tile.d.ts
 interface AttachmentTileProps {
-  /** Source URL for the attachment thumbnail */
   src?: string;
-  /** Whether the attachment is an image */
   isImage?: boolean;
-  /** Accessible label describing the attachment */
   label?: string;
-  /** Called when the remove button is clicked */
   onRemove?: () => void;
-  /** Called when the tile is clicked (e.g. to open a preview) */
   onClick?: () => void;
   className?: string;
 }

package/dist/components/bar-chart.d.mts

@@ -13,6 +13,8 @@ interface BarChartProps {
   valueLabels?: boolean;
   height?: number;
   yAxisWidth?: number;
+  bare?: boolean;
+  barCategoryGap?: number | string;
   palette?: ChartPaletteName;
   referenceLine?: {
     y: number;
@@ -27,6 +29,6 @@ interface BarChartProps {
   labelFormatter?: (label: string | number) => string;
   className?: string;
 }
-declare function BarChart({ data, index, series, variant, legend, legendAlign, valueLabels, height, yAxisWidth, palette, referenceLine, markers, texture, partialLastBar, loading, valueFormatter, labelFormatter, className }: BarChartProps): React$1.JSX.Element;
+declare function BarChart({ data, index, series, variant, legend, legendAlign, valueLabels, height, yAxisWidth, bare, barCategoryGap, palette, referenceLine, markers, texture, partialLastBar, loading, valueFormatter, labelFormatter, className }: BarChartProps): React$1.JSX.Element;
 //#endregion
 export { BarChart, BarChartProps };

package/dist/components/bar-chart.mjs

@@ -12,7 +12,7 @@ import { Bar, BarChart as BarChart$1, CartesianGrid, Cell, LabelList, Responsive
 //#region src/components/bar-chart.tsx
 const BAR_RADIUS = 4;
 const MAX_BAR_SIZE = 48;
-function BarChart({ data, index, series, variant = "stacked", legend = false, legendAlign = "left", valueLabels = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, texture = false, partialLastBar = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+function BarChart({ data, index, series, variant = "stacked", legend = false, legendAlign = "left", valueLabels = false, height = 200, yAxisWidth = 48, bare = false, barCategoryGap, palette, referenceLine, markers, texture = false, partialLastBar = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
 	const reactId = React$1.useId().replace(/:/g, "");
 	const resolved = resolveSeries(series, paletteColors, theme);
@@ -39,7 +39,12 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 		rendered,
 		stacked
 	]);
-	const margin = {
+	const margin = bare ? {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	} : {
 		top: markers?.length || valueLabels ? 18 : 8,
 		right: 8,
 		bottom: 2,
@@ -100,7 +105,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 					data,
 					stackOffset: variant === "expand" ? "expand" : "none",
 					margin,
-					barCategoryGap: stacked ? "20%" : "16%",
+					barCategoryGap: barCategoryGap ?? (stacked ? "20%" : "16%"),
 					children: [
 						/* @__PURE__ */ jsxs("defs", { children: [!stacked && rendered.map((entry, slot) => /* @__PURE__ */ jsxs("linearGradient", {
 							id: `bar-${reactId}-${slot}`,
@@ -138,7 +143,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 								strokeOpacity: .65
 							})]
 						})] }),
-						/* @__PURE__ */ jsx(CartesianGrid, {
+						!bare && /* @__PURE__ */ jsx(CartesianGrid, {
 							vertical: false,
 							stroke: theme.grid,
 							strokeDasharray: "2 4"
@@ -146,17 +151,20 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 						/* @__PURE__ */ jsx(XAxis, {
 							dataKey: index,
 							...axis,
+							hide: bare,
+							height: bare ? 0 : void 0,
 							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
 							minTickGap: 56
 						}),
 						/* @__PURE__ */ jsx(YAxis, {
 							...axis,
-							width: yAxisWidth,
+							hide: bare,
+							width: bare ? 0 : yAxisWidth,
 							domain: referenceLine && variant !== "expand" ? [0, Math.ceil(Math.max(numericMax, referenceLine.y) * 1.15)] : void 0,
 							tickFormatter: (value) => variant === "expand" ? `${Math.round(value * 100)}%` : valueFormatter(value)
 						}),
-						/* @__PURE__ */ jsx(Tooltip, {
+						!bare && /* @__PURE__ */ jsx(Tooltip, {
 							offset: 12,
 							allowEscapeViewBox: {
 								x: false,
@@ -172,7 +180,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 								showTotal: withTotal
 							})
 						}),
-						renderReferenceLine({
+						!bare && renderReferenceLine({
 							referenceLine,
 							numericMax,
 							theme
@@ -215,11 +223,11 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 								content: renderValueLabel(entry.color)
 							})]
 						}, entry.key)),
-						renderMarkers(markers, theme)
+						!bare && renderMarkers(markers, theme)
 					]
 				})
 			})
-		}), legend && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
+		}), legend && !bare && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
 			items: legendItems,
 			align: legendAlign,
 			insetLeft: yAxisWidth

package/dist/components/bar-list.d.mts

@@ -5,6 +5,9 @@ interface BarListProps {
   data: ReadonlyArray<Record<string, string | number | null | undefined>>;
   index: string;
   dataKey?: string;
+  secondaryKey?: string;
+  secondaryVariantKey?: string;
+  titleKey?: string;
   maxItems?: number;
   palette?: ChartPaletteName;
   /** Renders bars in a single semantic hue (e.g. red for errors) rather than the palette ramp. */
@@ -14,6 +17,6 @@ interface BarListProps {
   labelFormatter?: (label: string | number) => string;
   className?: string;
 }
-declare function BarList({ data, index, dataKey, maxItems, palette, semantic, loading, valueFormatter, labelFormatter, className }: BarListProps): React$1.JSX.Element;
+declare function BarList({ data, index, dataKey, secondaryKey, secondaryVariantKey, titleKey, maxItems, palette, semantic, loading, valueFormatter, labelFormatter, className }: BarListProps): React$1.JSX.Element;
 //#endregion
 export { BarList, BarListProps };

package/dist/components/bar-list.mjs

@@ -1,8 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
 import { rampColor } from "../lib/chart-palette.mjs";
-import { formatShare } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
+import { Badge } from "./badge.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 //#region src/components/bar-list.tsx
@@ -11,19 +12,28 @@ const SEMANTIC_KEY = {
 	warning: "warning",
 	success: "success"
 };
+const SECONDARY_BADGE_VARIANT = {
+	error: "error",
+	warning: "warning",
+	success: "success"
+};
 const PLACEHOLDER_HEIGHT = 168;
 const RAMP_CEILING = .8;
 const SEMANTIC_FLOOR = .62;
 const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
-function BarList({ data, index, dataKey = "value", maxItems, palette, semantic, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+const ROW_INTERACTIVE_CLASS = "rounded-md text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card";
+function BarList({ data, index, dataKey = "value", secondaryKey, secondaryVariantKey, titleKey, maxItems, palette, semantic, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { paletteName, theme } = useChartContext(palette);
 	const accent = semantic ? theme[SEMANTIC_KEY[semantic]] : null;
 	const [active, setActive] = React$1.useState(null);
-	const total = React$1.useMemo(() => data.reduce((sum, row) => sum + (Number(row[dataKey]) || 0), 0), [data, dataKey]);
 	const rows = React$1.useMemo(() => {
+		const optionalText = (row, key) => key != null && row[key] != null ? String(row[key]) : void 0;
 		const mapped = data.map((row) => ({
 			name: String(row[index] ?? ""),
-			value: Number(row[dataKey]) || 0
+			value: Number(row[dataKey]) || 0,
+			secondary: optionalText(row, secondaryKey),
+			secondaryVariant: SECONDARY_BADGE_VARIANT[optionalText(row, secondaryVariantKey) ?? ""],
+			title: optionalText(row, titleKey)
 		}));
 		mapped.sort((lower, upper) => upper.value - lower.value);
 		const capped = maxItems ? mapped.slice(0, maxItems) : mapped;
@@ -39,11 +49,15 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, semantic,
 		data,
 		index,
 		dataKey,
+		secondaryKey,
+		secondaryVariantKey,
+		titleKey,
 		maxItems,
 		paletteName,
 		accent
 	]);
 	const maxValue = rows.reduce((max, row) => row.value > max ? row.value : max, 0);
+	const hasSecondary = rows.some((row) => row.secondary != null);
 	const isEmpty = rows.length === 0;
 	const formatName = (name) => labelFormatter ? labelFormatter(name) : name;
 	if (loading) return /* @__PURE__ */ jsxs("div", {
@@ -64,10 +78,12 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, semantic,
 			const fillWidth = `${fraction * 100}%`;
 			const dimmed = active !== null && active !== slot;
 			const isActive = active === slot;
-			return /* @__PURE__ */ jsxs("div", {
+			const hasTooltip = row.title != null;
+			const bar = /* @__PURE__ */ jsxs(hasTooltip ? "button" : "div", {
+				type: hasTooltip ? "button" : void 0,
 				onMouseEnter: () => setActive(slot),
 				onMouseLeave: () => setActive(null),
-				className: "flex items-center gap-3 py-1",
+				className: cn("flex items-center gap-3 py-1", hasTooltip && ROW_INTERACTIVE_CLASS),
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "relative h-[30px] flex-1 overflow-hidden rounded-md bg-muted",
 					children: [/* @__PURE__ */ jsx("span", {
@@ -91,12 +107,30 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, semantic,
 							children: formatName(row.name)
 						})
 					})]
-				}), /* @__PURE__ */ jsx("span", {
-					className: "min-w-[4rem] shrink-0 whitespace-nowrap text-right font-mono text-text-xs tabular-nums motion-safe:transition-colors",
-					style: { color: isActive ? row.color : void 0 },
-					children: isActive ? formatShare(total > 0 ? row.value / total : 0) : valueFormatter(row.value)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center justify-end gap-2.5 whitespace-nowrap font-mono text-text-xs tabular-nums",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-[4rem] text-right motion-safe:transition-colors",
+						style: { color: isActive ? row.color : void 0 },
+						children: valueFormatter(row.value)
+					}), hasSecondary && /* @__PURE__ */ jsx("span", {
+						className: "flex min-w-[3.5rem] justify-end",
+						children: row.secondary != null && /* @__PURE__ */ jsx(Badge, {
+							variant: row.secondaryVariant ?? "secondary",
+							size: "sm",
+							children: row.secondary
+						})
+					})]
 				})]
 			}, row.name);
+			if (row.title == null) return bar;
+			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: bar
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				className: "max-w-md text-pretty text-left",
+				children: row.title
+			})] }, row.name);
 		})
 	});
 }

package/dist/components/chart-legend.d.mts

@@ -1,5 +1,6 @@
 //#region src/components/chart-legend.d.ts
 interface ChartLegendItem {
+  key: string;
   name: string;
   color: string;
   dashed?: boolean;
@@ -8,7 +9,9 @@ interface ChartLegendProps extends React.HTMLAttributes<HTMLDivElement> {
   items: ChartLegendItem[];
   align?: "left" | "center" | "right";
   insetLeft?: number;
+  hiddenKeys?: ReadonlySet<string>;
+  onItemClick?: (key: string) => void;
 }
-declare function ChartLegend({ items, align, insetLeft, className, style, ...props }: ChartLegendProps): import("react").JSX.Element;
+declare function ChartLegend({ items, align, insetLeft, hiddenKeys, onItemClick, className, style, ...props }: ChartLegendProps): import("react").JSX.Element;
 //#endregion
 export { ChartLegend, ChartLegendItem, ChartLegendProps };

package/dist/components/chart-legend.mjs

@@ -1,12 +1,14 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/chart-legend.tsx
 const ALIGN_CLASS = {
 	left: "justify-start",
 	center: "justify-center",
 	right: "justify-end"
 };
+const ITEM_CLASS = "inline-flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground uppercase tracking-[0.12em]";
+const INTERACTIVE_CLASS = "rounded-sm outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card [@media(hover:hover)]:hover:text-foreground";
 function Swatch({ color, dashed }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
@@ -14,7 +16,7 @@ function Swatch({ color, dashed }) {
 		style: dashed ? { border: `1.5px solid ${color}` } : { background: color }
 	});
 }
-function ChartLegend({ items, align = "left", insetLeft, className, style, ...props }) {
+function ChartLegend({ items, align = "left", insetLeft, hiddenKeys, onItemClick, className, style, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex flex-wrap gap-x-4 gap-y-1.5", ALIGN_CLASS[align], className),
 		style: {
@@ -22,13 +24,25 @@ function ChartLegend({ items, align = "left", insetLeft, className, style, ...pr
 			...style
 		},
 		...props,
-		children: items.map((item) => /* @__PURE__ */ jsxs("span", {
-			className: "inline-flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground uppercase tracking-[0.12em]",
-			children: [/* @__PURE__ */ jsx(Swatch, {
+		children: items.map((item) => {
+			const swatchAndName = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Swatch, {
 				color: item.color,
 				dashed: item.dashed
-			}), item.name]
-		}, item.name))
+			}), item.name] });
+			if (!onItemClick) return /* @__PURE__ */ jsx("span", {
+				className: ITEM_CLASS,
+				children: swatchAndName
+			}, item.key);
+			const hidden = hiddenKeys?.has(item.key) ?? false;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `${item.name} series`,
+				"aria-pressed": !hidden,
+				onClick: () => onItemClick(item.key),
+				className: cn(ITEM_CLASS, INTERACTIVE_CLASS, hidden && "opacity-40"),
+				children: swatchAndName
+			}, item.key);
+		})
 	});
 }
 //#endregion

package/dist/components/chart-primitives.d.mts

@@ -22,14 +22,12 @@ declare function makeChartAxis(theme: ChartTheme): {
   };
 };
 declare function makeLegendItems(resolved: ResolvedSeries[]): {
+  key: string;
   name: string;
   color: string;
   dashed: boolean | undefined;
 }[];
-/**
- * Stacked series must reach the stack height (sum per x-point), not the tallest
- * single series, or reference bands and explicit Y domains clip a tall stack short.
- */
+/** Stacked series must reach the stack height (sum per x-point), or reference bands and explicit Y domains clip a tall stack short. */
 declare function computeNumericMax(data: ChartData, series: ChartSeries[], stacked: boolean): number;
 declare function makeActiveDot(entry: ResolvedSeries, { valueFlags, theme, valueFormatter }: {
   valueFlags: boolean;
@@ -55,10 +53,7 @@ declare function makeLastValueLabel(color: string, { dataLength, theme, valueFor
   value?: string | number | boolean | Array<string | number | boolean> | null;
   index?: number;
 }) => import("react").JSX.Element | null;
-/**
- * Returns recharts elements (not a wrapper component) so recharts still detects
- * them as direct children when spread into a chart via `{renderReferenceLine(...)}`.
- */
+/** Returns recharts elements (not a wrapper component) so recharts still detects them as direct chart children. */
 declare function renderReferenceLine({ referenceLine, numericMax, theme }: {
   referenceLine: ReferenceLineConfig | undefined;
   numericMax: number;

package/dist/components/chart-primitives.mjs

@@ -19,15 +19,13 @@ function makeChartAxis(theme) {
 }
 function makeLegendItems(resolved) {
 	return resolved.map((entry) => ({
+		key: entry.key,
 		name: entry.name,
 		color: entry.color,
 		dashed: entry.dashed
 	}));
 }
-/**
-* Stacked series must reach the stack height (sum per x-point), not the tallest
-* single series, or reference bands and explicit Y domains clip a tall stack short.
-*/
+/** Stacked series must reach the stack height (sum per x-point), or reference bands and explicit Y domains clip a tall stack short. */
 function computeNumericMax(data, series, stacked) {
 	let max = 0;
 	for (const row of data) {
@@ -87,10 +85,7 @@ function makeLastValueLabel(color, { dataLength, theme, valueFormatter }) {
 		});
 	};
 }
-/**
-* Returns recharts elements (not a wrapper component) so recharts still detects
-* them as direct children when spread into a chart via `{renderReferenceLine(...)}`.
-*/
+/** Returns recharts elements (not a wrapper component) so recharts still detects them as direct chart children. */
 function renderReferenceLine({ referenceLine, numericMax, theme }) {
 	if (!referenceLine) return null;
 	return [referenceLine.band ? /* @__PURE__ */ jsx(ReferenceArea, {

package/dist/components/combobox.d.mts

@@ -42,7 +42,6 @@ declare function ComboboxEmpty({ className, ...props }: React.ComponentProps<typ
 declare function ComboboxGroup({ className, ...props }: React.ComponentProps<typeof Command.Group>): import("react").JSX.Element;
 declare function ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof Command.Separator>): import("react").JSX.Element;
 interface ComboboxItemProps extends Omit<React.ComponentProps<typeof Command.Item>, "onSelect"> {
-  /** The value stored when this item is selected */
   itemValue: string;
 }
 declare function ComboboxItem({ className, children, itemValue, ...props }: ComboboxItemProps): import("react").JSX.Element;

package/dist/components/combobox.mjs

@@ -102,6 +102,7 @@ function Combobox(props) {
 function ComboboxTrigger({ className, size, placeholder, children, ...props }) {
 	const { multiple, value, values, open, onDeselect } = useComboboxContext();
 	const isEmpty = multiple ? values.length === 0 : value === null || value === void 0;
+	const hasCustomMultipleValue = multiple && children !== void 0;
 	return /* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs("button", {
@@ -112,8 +113,8 @@ function ComboboxTrigger({ className, size, placeholder, children, ...props }) {
 			className: cn(selectTriggerVariants({ size }), className),
 			...props,
 			children: [/* @__PURE__ */ jsx("span", {
-				className: cn("flex flex-1 items-center gap-1.5 text-left", multiple && "flex-wrap", isEmpty && "text-placeholder"),
-				children: isEmpty ? placeholder : multiple ? /* @__PURE__ */ jsx(ComboboxTags, {
+				className: cn("flex min-w-0 flex-1 items-center gap-1.5 text-left", multiple && !hasCustomMultipleValue && "flex-wrap", isEmpty && !hasCustomMultipleValue && "text-placeholder"),
+				children: hasCustomMultipleValue ? children : isEmpty ? placeholder : multiple ? /* @__PURE__ */ jsx(ComboboxTags, {
 					values,
 					onDeselect
 				}) : children

package/dist/components/form.d.mts

@@ -5,14 +5,14 @@ import * as React$1 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 //#region src/components/form.d.ts
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React$1.JSX.Element;
 declare const useFormField: () => {
   invalid: boolean;
   isDirty: boolean;
   isTouched: boolean;
   isValidating: boolean;
-  error?: import("react-hook-form").FieldError;
+  error?: import("react-hook-form").FieldError | undefined;
   id: string;
   name: string;
   formItemId: string;

package/dist/components/line-chart.d.mts

@@ -28,10 +28,12 @@ interface LineChartProps {
   markers?: ChartMarker[];
   lastValueLabel?: boolean;
   loading?: boolean;
+  hiddenSeries?: ReadonlySet<string>;
+  onLegendItemClick?: (key: string) => void;
   valueFormatter?: (value: number) => string;
   labelFormatter?: (label: string | number) => string;
   className?: string;
 }
-declare function LineChart({ data, index, series, curve, legend, legendAlign, valueFlags, dots, height, yAxisWidth, palette, referenceLine, markers, lastValueLabel, loading, valueFormatter, labelFormatter, className }: LineChartProps): React$1.JSX.Element;
+declare function LineChart({ data, index, series, curve, legend, legendAlign, valueFlags, dots, height, yAxisWidth, palette, referenceLine, markers, lastValueLabel, loading, hiddenSeries, onLegendItemClick, valueFormatter, labelFormatter, className }: LineChartProps): React$1.JSX.Element;
 //#endregion
 export { LineChart, LineChartProps };

package/dist/components/line-chart.mjs

@@ -15,10 +15,11 @@ const CURVE_TYPE = {
 	linear: "linear",
 	step: "stepAfter"
 };
-function LineChart({ data, index, series, curve = "monotone", legend = false, legendAlign = "left", valueFlags = false, dots = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+function LineChart({ data, index, series, curve = "monotone", legend = false, legendAlign = "left", valueFlags = false, dots = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, loading = false, hiddenSeries, onLegendItemClick, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
 	const resolved = resolveSeries(series, paletteColors, theme);
-	const numericMax = React$1.useMemo(() => computeNumericMax(data, series, false), [data, series]);
+	const visible = resolved.filter((entry) => !hiddenSeries?.has(entry.key));
+	const numericMax = React$1.useMemo(() => computeNumericMax(data, visible, false), [data, visible]);
 	const curveType = CURVE_TYPE[curve];
 	const margin = {
 		top: markers?.length ? 18 : 8,
@@ -88,7 +89,7 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 							numericMax,
 							theme
 						}),
-						resolved.map((entry) => /* @__PURE__ */ jsx(Line, {
+						visible.map((entry) => /* @__PURE__ */ jsx(Line, {
 							type: curveType,
 							dataKey: entry.key,
 							name: entry.name,
@@ -124,7 +125,9 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 		}), legend && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
 			items: legendItems,
 			align: legendAlign,
-			insetLeft: yAxisWidth
+			insetLeft: yAxisWidth,
+			hiddenKeys: hiddenSeries,
+			onItemClick: onLegendItemClick
 		})]
 	});
 }

package/dist/components/select-trigger-variants.d.mts

@@ -1,9 +1,5 @@
 //#region src/components/select-trigger-variants.d.ts
-/**
- * Shared trigger styles for Select and Combobox.
- * Both components use the same visual treatment for their trigger buttons.
- * Edit here to keep them in sync.
- */
+/** Shared by Select and Combobox so their trigger buttons stay visually in sync. */
 declare const selectTriggerVariants: (props?: ({
   size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/select-trigger-variants.mjs

@@ -1,10 +1,6 @@
 import { cva } from "class-variance-authority";
 //#region src/components/select-trigger-variants.ts
-/**
-* Shared trigger styles for Select and Combobox.
-* Both components use the same visual treatment for their trigger buttons.
-* Edit here to keep them in sync.
-*/
+/** Shared by Select and Combobox so their trigger buttons stay visually in sync. */
 const selectTriggerVariants = cva([
 	"flex w-full items-center gap-2 rounded-md border bg-background text-foreground shadow-xs outline-hidden",
 	"transition-colors",

package/dist/components/stat.d.mts

@@ -8,8 +8,9 @@ interface StatDelta {
   direction: "up" | "down";
   invert?: boolean;
   label?: React$1.ReactNode;
+  indicator?: "arrow" | "sign";
 }
-interface StatProps extends React$1.ComponentProps<"div"> {
+interface StatProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
   value: React$1.ReactNode;
   unit?: string;
   delta?: StatDelta | null;
@@ -17,7 +18,12 @@ interface StatProps extends React$1.ComponentProps<"div"> {
     value: number;
   }>;
   semantic?: "error" | "warning" | "success";
+  compact?: boolean;
+  onClick?: () => void;
 }
-declare function Stat({ value, unit, delta, sparkline, semantic, className, ...props }: StatProps): React$1.JSX.Element;
+declare function Stat({ value, unit, delta, sparkline, semantic, compact, className, onClick, ...props }: StatProps): React$1.JSX.Element;
+declare function StatSparkline({ sparkline, semantic, className }: Pick<StatProps, "sparkline" | "semantic"> & {
+  className?: string;
+}): React$1.JSX.Element | null;
 //#endregion
-export { Stat, StatDelta, StatProps, statDeltaVariants };
+export { Stat, StatDelta, StatProps, StatSparkline, statDeltaVariants };