@alpic-ai/ui 1.163.0 → 1.164.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.163.0",
+  "version": "1.164.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/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));