@alpic-ai/ui 1.165.1 → 1.167.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.165.1",
+  "version": "1.167.0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -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>