@agentero/design-system 0.32.0 → 0.32.2

package/src/combobox/combobox.d.ts

@@ -2,8 +2,13 @@ import { ComponentPropsWithRef } from 'react';
 import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
 import { InputSize } from '../input';
 /**
- * Style recipe for Combobox. The surface carries its own chrome — border,
- * background and shadow — because the list it holds is plain content.
+ * Style recipe for Combobox. Slots: `action` and `trigger` (the clear and
+ * chevron buttons inside the input's frame, which is `InputGroup`'s),
+ * `triggerReplaced` (hides the chevron once the clear button has a value to
+ * clear), `content`,
+ * `list`, `item`, `indicator` and `message`. The surface carries its
+ * own chrome — border, background and shadow — because the list it holds is
+ * plain content.
  *
  * @summary tailwind-variants recipe backing the Combobox surface and list styles
  */
@@ -12,11 +17,12 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
         [key: string]: import('tailwind-merge').ClassNameValue | {
             content?: import('tailwind-merge').ClassNameValue;
             list?: import('tailwind-merge').ClassNameValue;
-            clear?: import('tailwind-merge').ClassNameValue;
             item?: import('tailwind-merge').ClassNameValue;
             indicator?: import('tailwind-merge').ClassNameValue;
             message?: import('tailwind-merge').ClassNameValue;
-            field?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            trigger?: import('tailwind-merge').ClassNameValue;
+            triggerReplaced?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
@@ -24,16 +30,18 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
         [x: string]: import('tailwind-merge').ClassNameValue | {
             content?: import('tailwind-merge').ClassNameValue;
             list?: import('tailwind-merge').ClassNameValue;
-            clear?: import('tailwind-merge').ClassNameValue;
             item?: import('tailwind-merge').ClassNameValue;
             indicator?: import('tailwind-merge').ClassNameValue;
             message?: import('tailwind-merge').ClassNameValue;
-            field?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            trigger?: import('tailwind-merge').ClassNameValue;
+            triggerReplaced?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
-    field: string;
-    clear: string[];
+    action: string[];
+    trigger: string;
+    triggerReplaced: string;
     content: string[];
     list: string[];
     item: string[];
@@ -44,39 +52,60 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
         [key: string]: import('tailwind-merge').ClassNameValue | {
             content?: import('tailwind-merge').ClassNameValue;
             list?: import('tailwind-merge').ClassNameValue;
-            clear?: import('tailwind-merge').ClassNameValue;
             item?: import('tailwind-merge').ClassNameValue;
             indicator?: import('tailwind-merge').ClassNameValue;
             message?: import('tailwind-merge').ClassNameValue;
-            field?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            trigger?: import('tailwind-merge').ClassNameValue;
+            triggerReplaced?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
-    field: string;
-    clear: string[];
+    action: string[];
+    trigger: string;
+    triggerReplaced: string;
     content: string[];
     list: string[];
     item: string[];
     indicator: string[];
     message: string[];
 }, import('tailwind-variants').TVReturnType<unknown, {
-    field: string;
-    clear: string[];
+    action: string[];
+    trigger: string;
+    triggerReplaced: string;
     content: string[];
     list: string[];
     item: string[];
     indicator: string[];
     message: string[];
 }, undefined, unknown, unknown, undefined>>;
+export type ComboboxRootProps<Value, Multiple extends boolean | undefined, Item> = ComboboxPrimitive.Root.Props<Value, Multiple, Item> & {
+    /**
+     * Characters the query needs, spaces aside, before the list opens. Below it
+     * focusing, clicking or pressing the chevron leaves the list shut, and
+     * deleting back under it closes the list. Defaults to `0`: the list opens on
+     * focus.
+     */
+    minInputLength?: number;
+};
 /**
  * Root of a combobox: a text input that filters a list of options and writes the
- * chosen one back into itself. With `Input` as the only trigger, the list opens on
- * focus or on the first keystroke.
+ * chosen one back into itself. The list opens on focus, on the first keystroke
+ * or from the chevron of `Input`'s `select` variant.
+ *
+ * For a search against an API, set `minInputLength` so the list stays shut until
+ * the query is worth sending: a field that opens an empty list on focus reads as
+ * broken. For a pick from a short fixed list with no typing at all, prefer a
+ * select.
  *
  * Pass the options as `items`. For a list that comes from the server, set
  * `filter={null}`, hand the already-filtered rows to `filteredItems`, and request
  * them from `onInputValueChange`; `Status` then announces the wait.
  *
+ * Every Base UI root prop is accepted and forwarded — `items`, `filter`,
+ * `value`, `onValueChange` and so on. `open` stays the consumer's to control;
+ * `minInputLength` only refuses to open below the minimum.
+ *
  * With `multiple`, the value is an array and picking a row toggles it. The list
  * stays open and keeps the typed query between picks, so several rows can be
  * ticked from one search; closing the list (Escape, a click outside) still resets
@@ -102,20 +131,37 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
  * ```
  */
 export declare const Root: {
-    <Value, Multiple extends boolean | undefined = false, Item = Value>({ onOpenChange, ...props }: ComboboxPrimitive.Root.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
+    <Value, Multiple extends boolean | undefined = false, Item = Value>({ minInputLength, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onInputValueChange, ...props }: ComboboxRootProps<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 'size'> & {
     /** Control height, matching `Input`. Defaults to `'md'`. */
     size?: InputSize;
+    /**
+     * What surrounds the input. Defaults to `'search'`.
+     * - `search` — magnifier in front, clear button after: a lookup the user types
+     * - `plain` — the input alone
+     * - `select` — a chevron that toggles the list: a short list to browse
+     */
+    variant?: 'search' | 'plain' | 'select';
+    /**
+     * Whether a clear button follows the input once an option is picked.
+     * Defaults to `true` for `search` and `false` for `plain` and `select`; pass
+     * it to override the variant. On a `select` it replaces the chevron while
+     * there is a value. Ignored under a `multiple` root, which never
+     * shows one.
+     */
+    showClear?: boolean;
     /**
      * Accessible name for the clear button. Defaults to `'Clear'`; name it after
      * the field when a page carries several comboboxes.
      */
     clearLabel?: string;
+    /** Accessible name for the chevron of the `select` variant. Defaults to `'Show options'`. */
+    triggerLabel?: string;
 };
 /**
- * The search field, which doubles as the trigger: focusing or typing opens the
+ * The text field, which doubles as the trigger: focusing or typing opens the
  * list. It wears the same styling as `Input` and takes the same wiring from
  * `InputContext`, so inside a `FieldText` the label, the hint and the error point
  * at it with nothing passed by hand. Its own props win over the context.
@@ -127,21 +173,38 @@ type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 's
  * reference keeps the name. Outside a field, give it `aria-label` or an
  * `aria-labelledby` of your own.
  *
- * It carries a clear button, which Base UI mounts only once there is something
- * to clear, so an untouched field shows nothing. Name it with `clearLabel` when
- * a page has more than one combobox. Under a `multiple` root there is no clear
- * button: Base UI's would drop the whole selection, while a cross inside a search
- * field reads as "clear what I typed" — and the selection is rendered outside
- * the field, with its own way to remove each entry.
+ * It is drawn as an `InputGroup` frame, and the list anchors to that whole
+ * frame, so it is as wide as the field and starts at its left edge whatever
+ * sits beside the input. `variant` picks what does:
+ *
+ * - `search` (default): a magnifier in front and a clear button. For any field
+ *   where the user types to look something up.
+ * - `plain`: the input alone, with no icon and no button. When the field needs
+ *   no affordance at all.
+ * - `select`: a chevron that opens and closes the list. For a short known list
+ *   the user may want to browse before typing.
+ *
+ * Only `search` carries a clear button by default; `showClear` adds it to the
+ * other two or drops it from `search`. On a `select`, the clear button takes the
+ * chevron's place once an option is picked; the list still opens from the input. Base UI mounts it only once there is
+ * something to clear — a picked option — so an untouched field shows nothing. Name it with
+ * `clearLabel`, and the chevron with `triggerLabel`, when a page has more than
+ * one combobox.
+ *
+ * Under a `multiple` root there is neither: the list stays open between picks,
+ * so a chevron has nothing to toggle, and Base UI's clear button would drop the
+ * whole selection while a cross inside a search field reads as "clear what I
+ * typed". The selection is rendered outside the field, with its own way to
+ * remove each entry.
  *
- * Pass `render` to swap the element for a richer control — a field with a leading
- * search icon, for instance — and the combobox wiring rides along.
+ * Every native input attribute is accepted and forwarded to the `<input>` —
+ * `placeholder`, `disabled`, `autoComplete` — and so is `className`.
  *
- * @summary Search field that opens the list on focus and filters it as you type
+ * @summary Search, plain or select field that opens and filters the list
  * @dataAttribute {string} data-slot - Always set to "combobox-input"
  */
 export declare const Input: {
-    ({ clearLabel, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, showClear, clearLabel, triggerLabel, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type ContentProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Popup> & Pick<ComponentPropsWithRef<typeof ComboboxPrimitive.Positioner>, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor' | 'collisionPadding'>;

package/src/combobox/combobox.js

@@ -4,20 +4,22 @@ import { useMergeProps as t } from "../../lib/merge-props.js";
 import { useFieldContext as n } from "../field/context.js";
 import { InputContext as r } from "../input/context.js";
 import { inputRecipe as i } from "../input/input.js";
-import { IconCancel as a, IconCheck as o } from "./icons.js";
-import { tv as s } from "tailwind-variants";
-import { createContext as c, use as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Combobox as f } from "@base-ui/react/combobox";
+import { InputGroup as a } from "../input-group/index.js";
+import { IconCancel as o, IconCheck as s, IconKeyboardArrowDown as c, IconSearch as l } from "./icons.js";
+import { tv as u } from "tailwind-variants";
+import { createContext as d, use as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Combobox as _ } from "@base-ui/react/combobox";
 //#region src/combobox/combobox.tsx
-var p = s({ slots: {
-	field: "relative",
-	clear: [
-		"absolute top-1/2 right-3 flex size-6 -translate-y-1/2 cursor-pointer items-center",
-		"justify-center rounded-sm [&>svg>path]:fill-icon-input-default",
-		"hover:[&>svg>path]:fill-icon-default-base-primary",
+var v = u({ slots: {
+	action: [
+		"flex size-6 shrink-0 cursor-pointer items-center justify-center self-center rounded-sm",
+		"[&>svg>path]:fill-icon-input-default hover:[&>svg>path]:fill-icon-default-base-primary",
+		"focus-visible:outline-2 focus-visible:outline-border-input-focus",
 		"disabled:cursor-default disabled:[&>svg>path]:fill-icon-input-disable"
 	],
+	trigger: "transition-[rotate] duration-100 data-popup-open:rotate-180 motion-reduce:transition-none",
+	triggerReplaced: "[[data-slot=combobox-field]:not([data-placeholder])_&]:hidden",
 	content: [
 		"w-(--anchor-width) max-h-(--available-height) overflow-hidden rounded-md",
 		"border border-border-default-base-primary bg-bg-default-base-primary shadow-lg",
@@ -27,7 +29,7 @@ var p = s({ slots: {
 		"data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
 		"motion-reduce:transition-none"
 	],
-	list: ["max-h-[min(10.25rem,var(--available-height))] overflow-y-auto scroll-py-2 py-2 outline-none", "data-empty:py-0"],
+	list: ["max-h-[min(10.25rem,var(--available-height))] overflow-y-auto scroll-py-2 py-2 outline-none", "empty:py-0"],
 	item: [
 		"group/item mx-2 my-px flex cursor-pointer items-center rounded-[calc(var(--radius-md)-2px)]",
 		"px-3 py-2 text-sm text-text-default-base-primary select-none",
@@ -37,7 +39,7 @@ var p = s({ slots: {
 	indicator: [
 		"mr-2 flex size-4 shrink-0 items-center justify-center rounded-sm",
 		"border border-border-input-default bg-bg-input-normal",
-		"text-text-default-base-inverse-primary transition-colors duration-200 ease-in-out",
+		"text-text-default-base-inverse-primary transition-colors duration-150",
 		"data-selected:border-bg-checkbox-selected data-selected:bg-bg-checkbox-selected",
 		"[&>svg]:hidden data-selected:[&>svg]:block",
 		"group-data-disabled/item:border-border-checkbox-disabled",
@@ -45,49 +47,78 @@ var p = s({ slots: {
 		"group-data-disabled/item:data-selected:bg-bg-checkbox-disabled"
 	],
 	message: ["mx-2 my-px px-3 py-2 text-sm text-text-default-base-tertiary", "empty:m-0 empty:p-0"]
-} }), m = p(), h = c(!1), g = ({ onOpenChange: e, ...t }) => {
-	let n = !!t.multiple;
-	return /* @__PURE__ */ u(h, {
-		value: n,
-		children: /* @__PURE__ */ u(f.Root, {
-			onOpenChange: (t, r) => {
-				e?.(t, r), n && !t && r.reason === "item-press" && r.cancel();
-			},
-			...t
+} }), y = v(), b = d(!1), x = ({ minInputLength: e = 0, open: t, defaultOpen: n = !1, onOpenChange: r, onOpenChangeComplete: i, onInputValueChange: a, ...o }) => {
+	let s = !!o.multiple, [c, l] = m(n), u = p(String(o.inputValue ?? o.defaultInputValue ?? ""));
+	o.inputValue !== void 0 && (u.current = String(o.inputValue));
+	let d = (t) => t.trim().length < e, f = p(!1), g = p(!1), v = (e, t) => {
+		if (e && d(u.current)) {
+			t.cancel();
+			return;
+		}
+		f.current = !1, r?.(e, t), s && !e && t.reason === "item-press" && t.cancel(), t.isCanceled || l(e);
+	}, y = (e) => {
+		i?.(e), !e && f.current && (f.current = !1, g.current = !0, queueMicrotask(() => g.current = !1));
+	}, x = (e, n) => {
+		if (g.current) {
+			g.current = !1, n.cancel();
+			return;
+		}
+		u.current = e, a?.(e, n), d(e) && t === void 0 && c && (f.current = !0, l(!1));
+	}, S = t ?? (e > 0 ? c : void 0);
+	return /* @__PURE__ */ h(b, {
+		value: s,
+		children: /* @__PURE__ */ h(_.Root, {
+			open: S,
+			defaultOpen: n,
+			onOpenChange: v,
+			onOpenChangeComplete: y,
+			onInputValueChange: x,
+			...o
 		})
 	});
 };
-g.displayName = "Combobox.Root";
-var _ = /* @__PURE__ */ new Set([
+x.displayName = "Combobox.Root";
+var S = /* @__PURE__ */ new Set([
 	"value",
 	"defaultValue",
 	"onChange"
-]), v = (e) => {
-	let i = l(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !_.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
+]), C = (e) => {
+	let i = f(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !S.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
 	return t({
 		...o,
 		...s
 	}, e);
-}, y = ({ clearLabel: t = "Clear", ...n }) => {
-	let { className: r, size: o = "md", ...s } = v(n), c = l(h);
-	return /* @__PURE__ */ d("div", {
+}, w = ({ variant: t = "search", showClear: n = t === "search", clearLabel: r = "Clear", triggerLabel: s = "Show options", ...u }) => {
+	let { className: d, size: p = "md", ...m } = C(u), v = f(b);
+	return /* @__PURE__ */ g(_.InputGroup, {
+		render: /* @__PURE__ */ h(a.Root, {}),
 		"data-slot": "combobox-field",
-		className: m.field(),
-		children: [/* @__PURE__ */ u(f.Input, {
-			"data-slot": "combobox-input",
-			"data-size": o,
-			className: e(i({ size: o }), "pr-11", r),
-			...s
-		}), !c && /* @__PURE__ */ u(f.Clear, {
-			"data-slot": "combobox-clear",
-			"aria-label": t,
-			className: m.clear(),
-			children: /* @__PURE__ */ u(a, {})
-		})]
+		className: t === "plain" ? "px-4" : void 0,
+		children: [
+			t === "search" && /* @__PURE__ */ h(a.Addon, { children: /* @__PURE__ */ h(l, {}) }),
+			/* @__PURE__ */ h(_.Input, {
+				"data-slot": "combobox-input",
+				"data-size": p,
+				className: e(i({ size: p }), d),
+				...m
+			}),
+			n && !v && /* @__PURE__ */ h(_.Clear, {
+				"data-slot": "combobox-clear",
+				"aria-label": r,
+				className: y.action(),
+				children: /* @__PURE__ */ h(o, {})
+			}),
+			t === "select" && !v && /* @__PURE__ */ h(_.Trigger, {
+				"data-slot": "combobox-trigger",
+				"aria-label": s,
+				className: e(y.action(), y.trigger(), n && y.triggerReplaced()),
+				children: /* @__PURE__ */ h(c, {})
+			})
+		]
 	});
 };
-y.displayName = "Combobox.Input";
-var b = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, ...c }) => /* @__PURE__ */ u(f.Portal, { children: /* @__PURE__ */ u(f.Positioner, {
+w.displayName = "Combobox.Input";
+var T = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, ...c }) => /* @__PURE__ */ h(_.Portal, { children: /* @__PURE__ */ h(_.Positioner, {
 	side: n,
 	align: r,
 	sideOffset: i,
@@ -95,49 +126,49 @@ var b = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i =
 	anchor: o,
 	collisionPadding: s,
 	className: "isolate z-(--z-index-top-layer) pointer-events-auto",
-	children: /* @__PURE__ */ u(f.Popup, {
+	children: /* @__PURE__ */ h(_.Popup, {
 		"data-slot": "combobox-content",
-		className: e(m.content(), t),
+		className: e(y.content(), t),
 		...c
 	})
 }) });
-b.displayName = "Combobox.Content";
-var x = ({ className: t, ...n }) => {
+T.displayName = "Combobox.Content";
+var E = ({ className: t, ...n }) => {
 	let r = "aria-label" in n || "aria-labelledby" in n;
-	return /* @__PURE__ */ u(f.List, {
+	return /* @__PURE__ */ h(_.List, {
 		"data-slot": "combobox-list",
 		"aria-label": r ? void 0 : "Suggestions",
-		className: e(m.list(), t),
+		className: e(y.list(), t),
 		...n
 	});
 };
-x.displayName = "Combobox.List";
-var S = ({ className: t, children: n, ...r }) => {
-	let i = l(h);
-	return /* @__PURE__ */ d(f.Item, {
+E.displayName = "Combobox.List";
+var D = ({ className: t, children: n, ...r }) => {
+	let i = f(b);
+	return /* @__PURE__ */ g(_.Item, {
 		"data-slot": "combobox-item",
-		className: e(m.item(), t),
+		className: e(y.item(), t),
 		...r,
-		children: [i && /* @__PURE__ */ u(f.ItemIndicator, {
+		children: [i && /* @__PURE__ */ h(_.ItemIndicator, {
 			keepMounted: !0,
 			"data-slot": "combobox-item-indicator",
-			className: m.indicator(),
-			children: /* @__PURE__ */ u(o, { className: "size-3.5" })
+			className: y.indicator(),
+			children: /* @__PURE__ */ h(s, { className: "size-3.5" })
 		}), n]
 	});
 };
-S.displayName = "Combobox.Item";
-var C = ({ className: t, ...n }) => /* @__PURE__ */ u(f.Empty, {
+D.displayName = "Combobox.Item";
+var O = ({ className: t, ...n }) => /* @__PURE__ */ h(_.Empty, {
 	"data-slot": "combobox-empty",
-	className: e(m.message(), t),
+	className: e(y.message(), t),
 	...n
 });
-C.displayName = "Combobox.Empty";
-var w = ({ className: t, ...n }) => /* @__PURE__ */ u(f.Status, {
+O.displayName = "Combobox.Empty";
+var k = ({ className: t, ...n }) => /* @__PURE__ */ h(_.Status, {
 	"data-slot": "combobox-status",
-	className: e(m.message(), t),
+	className: e(y.message(), t),
 	...n
 });
-w.displayName = "Combobox.Status";
+k.displayName = "Combobox.Status";
 //#endregion
-export { b as Content, C as Empty, y as Input, S as Item, x as List, g as Root, w as Status, p as comboboxRecipe };
+export { T as Content, O as Empty, w as Input, D as Item, E as List, x as Root, k as Status, v as comboboxRecipe };

package/src/combobox/icons.d.ts

@@ -16,3 +16,19 @@ export declare const IconCancel: (props: SVGProps<SVGSVGElement>) => import("rea
  * @summary 24px check used by the Combobox selection indicator
  */
 export declare const IconCheck: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Magnifier leading the `search` variant of `Combobox.Input`, the same glyph
+ * `Command` uses. Fill color comes from the input group addon, so it follows
+ * the field's disabled state.
+ *
+ * @summary 24px search icon leading the Combobox search field
+ */
+export declare const IconSearch: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Downward chevron inside the `chevron` variant's trigger, the same glyph
+ * `Accordion` uses. Fill color is supplied by the trigger's class so it
+ * follows the button's state.
+ *
+ * @summary 24px chevron-down icon used as the Combobox list trigger
+ */
+export declare const IconKeyboardArrowDown: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/combobox/icons.js

@@ -18,6 +18,24 @@ var t = (t) => /* @__PURE__ */ e("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	...t,
 	children: /* @__PURE__ */ e("path", { d: "M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" })
+}), r = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M9.52 15.615q-2.562 0-4.34-1.777Q3.405 12.062 3.405 9.5T5.18 5.162q1.776-1.777 4.338-1.777t4.339 1.777q1.777 1.776 1.777 4.338 0 1.071-.36 2.046a5.7 5.7 0 0 1-.96 1.696l5.754 5.754q.209.209.213.522a.7.7 0 0 1-.213.532.72.72 0 0 1-.527.217.72.72 0 0 1-.527-.217l-5.753-5.754q-.75.62-1.725.97t-2.018.35m0-1.5q1.933 0 3.273-1.341 1.342-1.34 1.342-3.274 0-1.932-1.342-3.274-1.34-1.341-3.274-1.341-1.932 0-3.274 1.34Q4.904 7.569 4.904 9.5q0 1.933 1.341 3.274 1.342 1.341 3.274 1.341" })
+}), i = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12 14.677a.83.83 0 0 1-.633-.256L6.873 9.927a.73.73 0 0 1-.212-.522.7.7 0 0 1 .212-.532.72.72 0 0 1 .527-.217q.31 0 .527.217L12 12.946l4.073-4.073a.73.73 0 0 1 .522-.212.7.7 0 0 1 .532.212q.217.217.217.527a.72.72 0 0 1-.217.527l-4.494 4.494a.83.83 0 0 1-.633.256" })
 });
 //#endregion
-export { t as IconCancel, n as IconCheck };
+export { t as IconCancel, n as IconCheck, i as IconKeyboardArrowDown, r as IconSearch };

package/src/combobox/index.d.ts

@@ -1,13 +1,17 @@
 export { comboboxRecipe } from './combobox';
+export type { ComboboxRootProps } from './combobox';
 export declare const Combobox: {
     Root: {
-        <Value, Multiple extends boolean | undefined = false, Item = Value>({ onOpenChange, ...props }: import("@base-ui/react/combobox").ComboboxRoot.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
+        <Value, Multiple extends boolean | undefined = false, Item = Value>({ minInputLength, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onInputValueChange, ...props }: import('./combobox').ComboboxRootProps<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Input: {
-        ({ clearLabel, ...props }: Omit<Omit<import('@base-ui/react/combobox').ComboboxInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>, "size"> & {
+        ({ variant, showClear, clearLabel, triggerLabel, ...props }: Omit<Omit<import('@base-ui/react/combobox').ComboboxInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>, "size"> & {
             size?: import('../input').InputSize;
+            variant?: "search" | "plain" | "select";
+            showClear?: boolean;
             clearLabel?: string;
+            triggerLabel?: string;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };

package/src/data-table/data-table.js

@@ -42,7 +42,7 @@ var y = ({ children: e }) => /* @__PURE__ */ d("div", {
 });
 y.displayName = "DataTable.ToolBar";
 var b = a({
-	base: "size-4 transition-transform duration-200",
+	base: "size-4 transition-transform duration-200 motion-reduce:transition-none",
 	variants: { direction: {
 		asc: "",
 		desc: "rotate-180",

package/src/dropdown-menu/dropdown-menu.js

@@ -20,16 +20,13 @@ var c = a.Portal, l = n({
 		"z-(--z-index-top-layer) flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
 		"border border-border-default-base-primary",
 		"will-change-[transform,opacity]",
-		"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
-		"data-[state=closed]:animate-[dropdownSlideOut_150ms_ease-in]",
-		"data-[side=bottom]:origin-top",
-		"data-[side=left]:origin-right",
-		"data-[side=right]:origin-left",
-		"data-[side=top]:origin-bottom",
-		"data-[side=bottom]:animate-[dropdownSlideInFromTop_200ms_ease-out]",
-		"data-[side=left]:animate-[dropdownSlideInFromRight_200ms_ease-out]",
-		"data-[side=right]:animate-[dropdownSlideInFromLeft_200ms_ease-out]",
-		"data-[side=top]:animate-[dropdownSlideInFromBottom_200ms_ease-out]"
+		"origin-(--radix-dropdown-menu-content-transform-origin)",
+		"data-[state=open]:data-[side=bottom]:animate-dropdown-slide-in-from-top",
+		"data-[state=open]:data-[side=left]:animate-dropdown-slide-in-from-right",
+		"data-[state=open]:data-[side=right]:animate-dropdown-slide-in-from-left",
+		"data-[state=open]:data-[side=top]:animate-dropdown-slide-in-from-bottom",
+		"data-[state=closed]:animate-dropdown-slide-out",
+		"motion-reduce:animate-none!"
 	],
 	variants: { hasTriggerWidth: { true: "w-[var(--radix-dropdown-menu-trigger-width)]" } }
 }), u = ({ className: e, hasTriggerWidth: t = !1, sideOffset: n = 8, ...i }) => /* @__PURE__ */ r(a.Content, {
@@ -44,7 +41,7 @@ var c = a.Portal, l = n({
 u.displayName = "DropdownMenu.Content";
 var d = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Item, {
 	"data-slot": "dropdown-menu-item",
-	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline transition-colors outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "data-disabled:active:bg-bg-default-base-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", t),
+	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "data-disabled:active:bg-bg-default-base-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", t),
 	...n
 });
 d.displayName = "DropdownMenu.Item";
@@ -67,7 +64,7 @@ var m = (e) => /* @__PURE__ */ r(a.Sub, {
 m.displayName = "DropdownMenu.Sub";
 var h = ({ className: n, children: o, ...s }) => /* @__PURE__ */ i(a.SubTrigger, {
 	"data-slot": "dropdown-menu-sub-trigger",
-	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline transition-colors outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-[state=open]:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", n),
+	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-[state=open]:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", n),
 	...s,
 	children: [o, /* @__PURE__ */ r(t, { className: "ml-auto h-4 w-4 [&>path]:fill-icon-default-base-tertiary" })]
 });
@@ -76,16 +73,13 @@ var g = n({ base: [
 	"z-(--z-index-top-layer) flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
 	"border border-border-default-base-primary",
 	"will-change-[transform,opacity]",
-	"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
-	"data-[state=closed]:animate-[dropdownSlideOut_150ms_ease-in]",
-	"data-[side=bottom]:origin-top",
-	"data-[side=left]:origin-right",
-	"data-[side=right]:origin-left",
-	"data-[side=top]:origin-bottom",
-	"data-[side=bottom]:animate-[dropdownSlideInFromTop_200ms_ease-out]",
-	"data-[side=left]:animate-[dropdownSlideInFromRight_200ms_ease-out]",
-	"data-[side=right]:animate-[dropdownSlideInFromLeft_200ms_ease-out]",
-	"data-[side=top]:animate-[dropdownSlideInFromBottom_200ms_ease-out]"
+	"origin-(--radix-dropdown-menu-content-transform-origin)",
+	"data-[state=open]:data-[side=bottom]:animate-dropdown-slide-in-from-top",
+	"data-[state=open]:data-[side=left]:animate-dropdown-slide-in-from-right",
+	"data-[state=open]:data-[side=right]:animate-dropdown-slide-in-from-left",
+	"data-[state=open]:data-[side=top]:animate-dropdown-slide-in-from-bottom",
+	"data-[state=closed]:animate-dropdown-slide-out",
+	"motion-reduce:animate-none!"
 ] }), _ = ({ className: e, sideOffset: t = 2, alignOffset: n = -5, ...i }) => /* @__PURE__ */ r(a.SubContent, {
 	"data-slot": "dropdown-menu-sub-content",
 	sideOffset: t,

package/src/hover-card/hover-card.js

@@ -20,10 +20,10 @@ var s = i.Portal, c = t({ base: [
 	"will-change-[transform,opacity]",
 	"data-[side=bottom]:origin-top data-[side=left]:origin-right",
 	"data-[side=right]:origin-left data-[side=top]:origin-bottom",
-	"transition-[opacity,transform] duration-200 ease-out",
+	"transition-[opacity,transform] duration-200 ease-out-quint",
 	"starting:opacity-0 starting:[transform:scale(0.9)]",
 	"data-[state=closed]:opacity-0 data-[state=closed]:[transform:scale(0.9)]",
-	"data-[state=closed]:duration-150 data-[state=closed]:ease-in",
+	"data-[state=closed]:duration-150",
 	"data-[state=closed]:animate-presence-hold",
 	"motion-reduce:transition-none motion-reduce:animate-none!"
 ] }), l = ({ className: e, sideOffset: t = 8, collisionPadding: r = 8, ...a }) => /* @__PURE__ */ n(i.Content, {

package/src/progress/progress.js

@@ -7,7 +7,7 @@ import * as i from "@radix-ui/react-progress";
 var a = e({ slots: {
 	root: "flex flex-col gap-2",
 	track: "relative h-2 w-full overflow-hidden rounded-sm bg-neutrals-200 text-neutrals-900",
-	indicator: "size-full bg-current transition-transform duration-600 ease-in-out motion-reduce:transition-none",
+	indicator: "size-full bg-current transition-transform duration-300 ease-in-out motion-reduce:transition-none",
 	labelRow: "flex items-center justify-between gap-2",
 	label: "text-sm text-text-default-base-primary",
 	value: "text-base text-text-default-base-primary"

package/src/switch/switch.js

@@ -15,7 +15,7 @@ var o = t({
 			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring-button-primary",
 			"disabled:cursor-not-allowed disabled:bg-slate-100"
 		],
-		thumb: "block translate-x-0 rounded-full bg-bg-default-base-primary shadow-sm transition-transform",
+		thumb: "block translate-x-0 rounded-full bg-bg-default-base-primary shadow-sm transition-transform motion-reduce:transition-none",
 		label: ["cursor-pointer text-sm text-text-default-base-primary select-none", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"]
 	},
 	variants: {