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

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/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

@@ -12,7 +12,7 @@ declare const useFormField: () => {
   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/stat.d.mts

@@ -10,7 +10,7 @@ interface StatDelta {
   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;
@@ -19,8 +19,9 @@ interface StatProps extends React$1.ComponentProps<"div"> {
   }>;
   semantic?: "error" | "warning" | "success";
   compact?: boolean;
+  onClick?: () => void;
 }
-declare function Stat({ value, unit, delta, sparkline, semantic, compact, 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;

package/dist/components/stat.mjs

@@ -26,11 +26,14 @@ const SEMANTIC_KEY = {
 	warning: "warning",
 	success: "success"
 };
-function Stat({ value, unit, delta, sparkline, semantic, compact = false, className, ...props }) {
+const STAT_INTERACTIVE_CLASS = "rounded-sm text-left outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card";
+function Stat({ value, unit, delta, sparkline, semantic, compact = false, className, onClick, ...props }) {
 	const sentiment = delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(onClick ? "button" : "div", {
 		"data-slot": "stat",
-		className: cn("flex min-w-0 flex-col gap-2.5", className),
+		type: onClick ? "button" : void 0,
+		onClick,
+		className: cn("flex min-w-0 flex-col gap-2.5", onClick && STAT_INTERACTIVE_CLASS, className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("flex min-w-0 items-baseline gap-x-2.5", compact && "gap-x-1.5"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-staging.gfab65e2",
+  "version": "0.0.0-staging.gfabea7f",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -64,8 +64,8 @@
     "@tailwindcss/postcss": "^4.3.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",
-    "lucide-react": "^1.28.0",
-    "react-hook-form": "^7.84.0",
+    "lucide-react": "^1.30.0",
+    "react-hook-form": "^7.85.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.3.3",
@@ -79,6 +79,6 @@
     "test:type": "tsgo --noEmit",
     "test:format": "biome check --error-on-warnings .",
     "dev:ui": "ladle serve",
-    "publish:npm": "pnpm publish --tag \"${NPM_TAG}\" --access public --no-git-checks"
+    "publish:npm": "../../scripts/publish-if-new.sh"
   }
 }

package/src/components/bar-list.tsx

@@ -2,16 +2,20 @@
 
 import * as React from "react";
 
-import { formatShare } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { rampColor } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
+import { Badge, type BadgeVariant } from "./badge";
 import { useChartContext } from "./chart-container";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 
 export 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. */
@@ -23,6 +27,11 @@ export interface BarListProps {
 }
 
 const SEMANTIC_KEY = { error: "destructive", warning: "warning", success: "success" } as const;
+const SECONDARY_BADGE_VARIANT: Record<string, BadgeVariant> = {
+  error: "error",
+  warning: "warning",
+  success: "success",
+};
 
 const PLACEHOLDER_HEIGHT = 168;
 // Cap the ramp off its palest end so low-rank bars stay legible on a light card.
@@ -30,11 +39,16 @@ const RAMP_CEILING = 0.8;
 // The lightest semantic bar keeps this much hue (mixed toward white) so a long list never fades to near-invisible.
 const SEMANTIC_FLOOR = 0.62;
 const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
+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,
@@ -47,12 +61,15 @@ function BarList({
   const accent = semantic ? theme[SEMANTIC_KEY[semantic]] : null;
   const [active, setActive] = React.useState<number | null>(null);
 
-  const total = React.useMemo(() => data.reduce((sum, row) => sum + (Number(row[dataKey]) || 0), 0), [data, dataKey]);
-
   const rows = React.useMemo(() => {
+    const optionalText = (row: (typeof data)[number], key: string | undefined) =>
+      key != null && row[key] != null ? String(row[key]) : undefined;
     const mapped = data.map((row) => ({
       name: String(row[index] ?? ""),
       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;
@@ -66,9 +83,10 @@ function BarList({
           : rampColor(paletteName, rankFraction * RAMP_CEILING),
       };
     });
-  }, [data, index, dataKey, maxItems, paletteName, accent]);
+  }, [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: string) => (labelFormatter ? labelFormatter(name) : name);
 
@@ -108,13 +126,16 @@ function BarList({
         const fillWidth = `${fraction * 100}%`;
         const dimmed = active !== null && active !== slot;
         const isActive = active === slot;
-        return (
-          // biome-ignore lint/a11y/noStaticElementInteractions: decorative hover-sync; all values are visible without it
-          <div
+        const hasTooltip = row.title != null;
+        // Only tooltip rows take focus, so a list without one keeps the tab order it had.
+        const Row = hasTooltip ? "button" : "div";
+        const bar = (
+          <Row
             key={row.name}
+            type={hasTooltip ? "button" : undefined}
             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)}
           >
             <div className="relative h-[30px] flex-1 overflow-hidden rounded-md bg-muted">
               <span className="pointer-events-none absolute inset-x-3 top-1/2 z-0 -translate-y-1/2 truncate type-text-xs font-medium text-foreground">
@@ -141,13 +162,33 @@ function BarList({
                 </span>
               </div>
             </div>
-            <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 : undefined }}
-            >
-              {isActive ? formatShare(total > 0 ? row.value / total : 0) : valueFormatter(row.value)}
-            </span>
-          </div>
+            <div className="flex shrink-0 items-center justify-end gap-2.5 whitespace-nowrap font-mono text-text-xs tabular-nums">
+              <span
+                className="min-w-[4rem] text-right motion-safe:transition-colors"
+                style={{ color: isActive ? row.color : undefined }}
+              >
+                {valueFormatter(row.value)}
+              </span>
+              {hasSecondary && (
+                <span className="flex min-w-[3.5rem] justify-end">
+                  {row.secondary != null && (
+                    <Badge variant={row.secondaryVariant ?? "secondary"} size="sm">
+                      {row.secondary}
+                    </Badge>
+                  )}
+                </span>
+              )}
+            </div>
+          </Row>
+        );
+        if (row.title == null) {
+          return bar;
+        }
+        return (
+          <Tooltip key={row.name}>
+            <TooltipTrigger asChild>{bar}</TooltipTrigger>
+            <TooltipContent className="max-w-md text-pretty text-left">{row.title}</TooltipContent>
+          </Tooltip>
         );
       })}
     </div>

package/src/components/combobox.tsx

@@ -207,6 +207,7 @@ function ComboboxTrigger({ className, size, placeholder, children, ...props }: C
   const { multiple, value, values, open, onDeselect } = useComboboxContext();
 
   const isEmpty = multiple ? values.length === 0 : value === null || value === undefined;
+  const hasCustomMultipleValue = multiple && children !== undefined;
 
   return (
     <PopoverTrigger asChild>
@@ -220,12 +221,20 @@ function ComboboxTrigger({ className, size, placeholder, children, ...props }: C
       >
         <span
           className={cn(
-            "flex flex-1 items-center gap-1.5 text-left",
-            multiple && "flex-wrap",
-            isEmpty && "text-placeholder",
+            "flex min-w-0 flex-1 items-center gap-1.5 text-left",
+            multiple && !hasCustomMultipleValue && "flex-wrap",
+            isEmpty && !hasCustomMultipleValue && "text-placeholder",
           )}
         >
-          {isEmpty ? placeholder : multiple ? <ComboboxTags values={values} onDeselect={onDeselect} /> : children}
+          {hasCustomMultipleValue ? (
+            children
+          ) : isEmpty ? (
+            placeholder
+          ) : multiple ? (
+            <ComboboxTags values={values} onDeselect={onDeselect} />
+          ) : (
+            children
+          )}
         </span>
         <ChevronDownIcon className="size-5 shrink-0 text-muted-foreground" />
       </button>

package/src/components/stat.tsx

@@ -29,13 +29,14 @@ export interface StatDelta {
   indicator?: "arrow" | "sign";
 }
 
-export interface StatProps extends React.ComponentProps<"div"> {
+export interface StatProps extends Omit<React.HTMLAttributes<HTMLElement>, "onClick"> {
   value: React.ReactNode;
   unit?: string;
   delta?: StatDelta | null;
   sparkline?: number[] | Array<{ value: number }>;
   semantic?: "error" | "warning" | "success";
   compact?: boolean;
+  onClick?: () => void;
 }
 
 const toSparkData = (sparkline: StatProps["sparkline"]) =>
@@ -45,12 +46,22 @@ const toSparkData = (sparkline: StatProps["sparkline"]) =>
 
 const SEMANTIC_KEY = { error: "destructive", warning: "warning", success: "success" } as const;
 
-function Stat({ value, unit, delta, sparkline, semantic, compact = false, className, ...props }: StatProps) {
+const STAT_INTERACTIVE_CLASS =
+  "rounded-sm text-left outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card";
+
+function Stat({ value, unit, delta, sparkline, semantic, compact = false, className, onClick, ...props }: StatProps) {
   const sentiment =
     delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
+  const Root = onClick ? "button" : "div";
 
   return (
-    <div data-slot="stat" className={cn("flex min-w-0 flex-col gap-2.5", className)} {...props}>
+    <Root
+      data-slot="stat"
+      type={onClick ? "button" : undefined}
+      onClick={onClick}
+      className={cn("flex min-w-0 flex-col gap-2.5", onClick && STAT_INTERACTIVE_CLASS, className)}
+      {...props}
+    >
       <div className={cn("flex min-w-0 items-baseline gap-x-2.5", compact && "gap-x-1.5")}>
         <span
           className={cn(
@@ -78,7 +89,7 @@ function Stat({ value, unit, delta, sparkline, semantic, compact = false, classN
         )}
       </div>
       <StatSparkline sparkline={sparkline} semantic={semantic} />
-    </div>
+    </Root>
   );
 }