@alpic-ai/ui 1.163.0 → 1.165.0

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 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": "1.163.0",
+  "version": "1.165.0",
   "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",

package/src/components/area-chart.tsx

@@ -133,7 +133,10 @@ function AreaChart({
         ) : (
           <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
             <RechartsAreaChart
-              data={data as Record<string, string | number>[]}
+              data={
+                // biome-ignore lint/plugin/no-type-assertion: Recharts expects a string-indexed data shape.
+                data as Record<string, string | number>[]
+              }
               stackOffset={variant === "expand" ? "expand" : "none"}
               margin={margin}
             >

package/src/components/bar-chart.tsx

@@ -176,7 +176,10 @@ function BarChart({
         ) : (
           <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
             <RechartsBarChart
-              data={data as Record<string, string | number>[]}
+              data={
+                // biome-ignore lint/plugin/no-type-assertion: Recharts expects a string-indexed data shape.
+                data as Record<string, string | number>[]
+              }
               stackOffset={variant === "expand" ? "expand" : "none"}
               margin={margin}
               barCategoryGap={barCategoryGap ?? (stacked ? "20%" : "16%")}
@@ -262,6 +265,7 @@ function BarChart({
                     data.map((row, rowIndex) => {
                       const roundedTop = stacked ? topSlotByRow[rowIndex] === slot : true;
                       const isPartial = partialLastBar && rowIndex === data.length - 1;
+                      // biome-ignore lint/plugin/no-type-assertion: Recharts' Cell radius type does not model its tuple input.
                       const cellRadius = (roundedTop
                         ? [BAR_RADIUS, BAR_RADIUS, 0, 0]
                         : [0, 0, 0, 0]) as unknown as number;

package/src/components/combobox.tsx

@@ -69,10 +69,12 @@ function Combobox(props: ComboboxProps) {
   } = props;
 
   const [uncontrolledSingleValue, setUncontrolledSingleValue] = useState<string | null>(
+    // biome-ignore lint/plugin/no-type-assertion: discriminated props cannot narrow through the separate multiple flag.
     !multiple ? ((props as ComboboxSingleProps).defaultValue ?? null) : null,
   );
 
   const [uncontrolledMultiValue, setUncontrolledMultiValue] = useState<string[]>(
+    // biome-ignore lint/plugin/no-type-assertion: discriminated props cannot narrow through the separate multiple flag.
     multiple ? ((props as ComboboxMultipleProps).defaultValue ?? []) : [],
   );
 
@@ -93,13 +95,17 @@ function Combobox(props: ComboboxProps) {
 
   const singleValue = multiple
     ? null
-    : (((props as ComboboxSingleProps).value !== undefined
-        ? (props as ComboboxSingleProps).value
+    : // biome-ignore lint/plugin/no-type-assertion: discriminated props cannot narrow through the separate multiple flag.
+      (((props as ComboboxSingleProps).value !== undefined
+        ? // biome-ignore lint/plugin/no-type-assertion: discriminated props cannot narrow through the separate multiple flag.
+          (props as ComboboxSingleProps).value
         : uncontrolledSingleValue) ?? null);
 
   const multiValues = multiple
-    ? (props as ComboboxMultipleProps).value !== undefined
-      ? ((props as ComboboxMultipleProps).value as string[])
+    ? // biome-ignore lint/plugin/no-type-assertion: discriminated props cannot narrow through the separate multiple flag.
+      (props as ComboboxMultipleProps).value !== undefined
+      ? // biome-ignore lint/plugin/no-type-assertion: discriminated props cannot narrow through the separate multiple flag.
+        ((props as ComboboxMultipleProps).value as string[])
       : uncontrolledMultiValue
     : [];
 
@@ -114,9 +120,13 @@ function Combobox(props: ComboboxProps) {
   );
 
   // Extract specific callbacks to avoid depending on the entire props object
+  // biome-ignore lint/plugin/no-type-assertion: discriminated props cannot narrow through the separate multiple flag.
   const onValueChangeSingle = !multiple ? (props as ComboboxSingleProps).onValueChange : undefined;
+  // biome-ignore lint/plugin/no-type-assertion: discriminated props cannot narrow through the separate multiple flag.
   const onValueChangeMulti = multiple ? (props as ComboboxMultipleProps).onValueChange : undefined;
+  // biome-ignore lint/plugin/no-type-assertion: discriminated props cannot narrow through the separate multiple flag.
   const isControlledSingle = !multiple && (props as ComboboxSingleProps).value !== undefined;
+  // biome-ignore lint/plugin/no-type-assertion: discriminated props cannot narrow through the separate multiple flag.
   const isControlledMulti = multiple && (props as ComboboxMultipleProps).value !== undefined;
 
   const onSelect = useCallback(
@@ -197,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>
@@ -211,11 +222,19 @@ 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",
+            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/form.tsx

@@ -31,6 +31,7 @@ type FormFieldContextValue<
   name: TName;
 };
 
+// biome-ignore lint/plugin/no-type-assertion: consumers require a non-null context default before a provider is mounted.
 const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
 
 const FormField = <
@@ -74,6 +75,7 @@ type FormItemContextValue = {
   id: string;
 };
 
+// biome-ignore lint/plugin/no-type-assertion: consumers require a non-null context default before a provider is mounted.
 const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {

package/src/components/input-group.tsx

@@ -68,6 +68,7 @@ function InputGroupAddon({
       data-align={align}
       className={cn(inputGroupAddonVariants({ align }), className)}
       onClick={(event) => {
+        // biome-ignore lint/plugin/no-type-assertion: click targets are DOM elements for this handler.
         if ((event.target as HTMLElement).closest("button")) {
           return;
         }

package/src/components/line-chart.tsx

@@ -111,6 +111,7 @@ function LineChart({
           </div>
         ) : (
           <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
+            {/* biome-ignore lint/plugin/no-type-assertion: Recharts expects a string-indexed data shape. */}
             <RechartsLineChart data={data as Record<string, string | number>[]} margin={margin}>
               <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
               <XAxis

package/src/components/sidebar.tsx

@@ -127,6 +127,7 @@ function SidebarProvider({
       <div
         data-slot="sidebar-wrapper"
         style={
+          // biome-ignore lint/plugin/no-type-assertion: CSS custom properties are not included in React's style type.
           {
             "--sidebar-width": SIDEBAR_WIDTH,
             "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
@@ -195,6 +196,7 @@ function Sidebar({
           data-mobile="true"
           className="bg-sidebar-surface text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
+            // biome-ignore lint/plugin/no-type-assertion: CSS custom properties are not included in React's style type.
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
             } as React.CSSProperties

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>
   );
 }
 

package/src/hooks/use-chart-theme.ts

@@ -54,8 +54,10 @@ const readTheme = (): ChartTheme => {
   const styles = window.getComputedStyle(document.documentElement);
   const entries = Object.entries(TOKEN_MAP).map(([key, token]) => {
     const value = styles.getPropertyValue(token).trim();
+    // biome-ignore lint/plugin/no-type-assertion: token keys correspond to the chart theme's required color keys.
     return [key, value || FALLBACK[key as keyof ChartTheme]] as const;
   });
+  // biome-ignore lint/plugin/no-type-assertion: Object.fromEntries cannot preserve the statically known chart-theme keys.
   const colors = Object.fromEntries(entries) as unknown as Omit<ChartTheme, "isDark">;
   return { ...colors, isDark: document.documentElement.classList.contains("dark") };
 };

package/src/stories/area-chart.stories.tsx

@@ -82,9 +82,11 @@ const fmtK = (value: number) => (value >= 1000 ? `${(value / 1000).toFixed(value
 const ms = (value: number) => `${value}ms`;
 
 const sessionsTotal = stacked.reduce(
+  // biome-ignore lint/plugin/no-type-assertion: each client key is populated with a numeric sample in this fixture.
   (sum, row) => sum + CLIENTS.reduce((acc, client) => acc + (row[client] as number), 0),
   0,
 );
+// biome-ignore lint/plugin/no-type-assertion: each client key is populated with a numeric sample in this fixture.
 const sessionsSpark = stacked.map((row) => CLIENTS.reduce((acc, client) => acc + (row[client] as number), 0));
 
 const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? row : best));

package/src/stories/bar-chart.stories.tsx

@@ -70,9 +70,11 @@ const fmtK = (value: number) => (value >= 1000 ? `${(value / 1000).toFixed(value
 const ms = (value: number) => `${value}ms`;
 
 const sessionsTotal = stacked.reduce(
+  // biome-ignore lint/plugin/no-type-assertion: each client key is populated with a numeric sample in this fixture.
   (sum, row) => sum + CLIENTS.reduce((acc, client) => acc + (row[client] as number), 0),
   0,
 );
+// biome-ignore lint/plugin/no-type-assertion: each client key is populated with a numeric sample in this fixture.
 const sessionsSpark = stacked.map((row) => CLIENTS.reduce((acc, client) => acc + (row[client] as number), 0));
 
 const errorsPeak = errors.reduce((best, row) => (row.mcp + row.tool > best.mcp + best.tool ? row : best));