@agentero/design-system 0.33.0 → 0.34.0

package/src/combobox/combobox.js

@@ -5,13 +5,14 @@ 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 { 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";
+import { InputSearch as o } from "../input-search/input-search.js";
+import { IconCancel as s, IconCheck as c, IconKeyboardArrowDown as l, IconSearch as u } from "./icons.js";
+import { tv as d } from "tailwind-variants";
+import { createContext as f, use as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Combobox as v } from "@base-ui/react/combobox";
 //#region src/combobox/combobox.tsx
-var v = u({ slots: {
+var y = d({ 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",
@@ -47,78 +48,94 @@ var v = u({ 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"]
-} }), 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 ?? ""));
+} }), b = y(), x = f(!1), S = ({ minInputLength: e = 0, open: t, defaultOpen: n = !1, onOpenChange: r, onOpenChangeComplete: i, onInputValueChange: a, ...o }) => {
+	let s = !!o.multiple, [c, l] = h(n), u = m(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) => {
+	let d = (t) => t.trim().length < e, f = m(!1), p = m(!1), _ = (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();
+		i?.(e), !e && f.current && (f.current = !1, p.current = !0, queueMicrotask(() => p.current = !1));
+	}, b = (e, n) => {
+		if (p.current) {
+			p.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, {
+	return /* @__PURE__ */ g(x, {
 		value: s,
-		children: /* @__PURE__ */ h(_.Root, {
+		children: /* @__PURE__ */ g(v.Root, {
 			open: S,
 			defaultOpen: n,
-			onOpenChange: v,
+			onOpenChange: _,
 			onOpenChangeComplete: y,
-			onInputValueChange: x,
+			onInputValueChange: b,
 			...o
 		})
 	});
 };
-x.displayName = "Combobox.Root";
-var S = /* @__PURE__ */ new Set([
+S.displayName = "Combobox.Root";
+var C = /* @__PURE__ */ new Set([
 	"value",
 	"defaultValue",
 	"onChange"
-]), 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;
+]), w = (e) => {
+	let i = p(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !C.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
 	return t({
 		...o,
 		...s
 	}, e);
-}, 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, {}),
+}, T = ({ variant: t = "search", showClear: n = t === "search", clearLabel: c = "Clear", triggerLabel: d = "Show options", ...f }) => {
+	let { className: m, size: h = "md", ...y } = w(f), S = p(x);
+	return t === "search" && n && !S ? /* @__PURE__ */ g(v.InputGroup, {
+		render: /* @__PURE__ */ g("div", {}),
+		"data-slot": "combobox-field",
+		children: /* @__PURE__ */ g(r, {
+			value: null,
+			children: /* @__PURE__ */ g(v.Input, {
+				"data-slot": "combobox-input",
+				className: m,
+				...y,
+				render: (e) => /* @__PURE__ */ g(o, {
+					...e,
+					size: h,
+					clearLabel: c
+				})
+			})
+		})
+	}) : /* @__PURE__ */ _(v.InputGroup, {
+		render: /* @__PURE__ */ g(a.Root, {}),
 		"data-slot": "combobox-field",
 		className: t === "plain" ? "px-4" : void 0,
 		children: [
-			t === "search" && /* @__PURE__ */ h(a.Addon, { children: /* @__PURE__ */ h(l, {}) }),
-			/* @__PURE__ */ h(_.Input, {
+			t === "search" && /* @__PURE__ */ g(a.Addon, { children: /* @__PURE__ */ g(u, {}) }),
+			/* @__PURE__ */ g(v.Input, {
 				"data-slot": "combobox-input",
-				"data-size": p,
-				className: e(i({ size: p }), d),
-				...m
+				"data-size": h,
+				className: e(i({ size: h }), m),
+				...y
 			}),
-			n && !v && /* @__PURE__ */ h(_.Clear, {
+			n && !S && /* @__PURE__ */ g(v.Clear, {
 				"data-slot": "combobox-clear",
-				"aria-label": r,
-				className: y.action(),
-				children: /* @__PURE__ */ h(o, {})
+				"aria-label": c,
+				className: b.action(),
+				children: /* @__PURE__ */ g(s, {})
 			}),
-			t === "select" && !v && /* @__PURE__ */ h(_.Trigger, {
+			t === "select" && !S && /* @__PURE__ */ g(v.Trigger, {
 				"data-slot": "combobox-trigger",
-				"aria-label": s,
-				className: e(y.action(), y.trigger(), n && y.triggerReplaced()),
-				children: /* @__PURE__ */ h(c, {})
+				"aria-label": d,
+				className: e(b.action(), b.trigger(), n && b.triggerReplaced()),
+				children: /* @__PURE__ */ g(l, {})
 			})
 		]
 	});
 };
-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, {
+T.displayName = "Combobox.Input";
+var E = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, ...c }) => /* @__PURE__ */ g(v.Portal, { children: /* @__PURE__ */ g(v.Positioner, {
 	side: n,
 	align: r,
 	sideOffset: i,
@@ -126,49 +143,49 @@ var T = ({ 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__ */ h(_.Popup, {
+	children: /* @__PURE__ */ g(v.Popup, {
 		"data-slot": "combobox-content",
-		className: e(y.content(), t),
+		className: e(b.content(), t),
 		...c
 	})
 }) });
-T.displayName = "Combobox.Content";
-var E = ({ className: t, ...n }) => {
+E.displayName = "Combobox.Content";
+var D = ({ className: t, ...n }) => {
 	let r = "aria-label" in n || "aria-labelledby" in n;
-	return /* @__PURE__ */ h(_.List, {
+	return /* @__PURE__ */ g(v.List, {
 		"data-slot": "combobox-list",
 		"aria-label": r ? void 0 : "Suggestions",
-		className: e(y.list(), t),
+		className: e(b.list(), t),
 		...n
 	});
 };
-E.displayName = "Combobox.List";
-var D = ({ className: t, children: n, ...r }) => {
-	let i = f(b);
-	return /* @__PURE__ */ g(_.Item, {
+D.displayName = "Combobox.List";
+var O = ({ className: t, children: n, ...r }) => {
+	let i = p(x);
+	return /* @__PURE__ */ _(v.Item, {
 		"data-slot": "combobox-item",
-		className: e(y.item(), t),
+		className: e(b.item(), t),
 		...r,
-		children: [i && /* @__PURE__ */ h(_.ItemIndicator, {
+		children: [i && /* @__PURE__ */ g(v.ItemIndicator, {
 			keepMounted: !0,
 			"data-slot": "combobox-item-indicator",
-			className: y.indicator(),
-			children: /* @__PURE__ */ h(s, { className: "size-3.5" })
+			className: b.indicator(),
+			children: /* @__PURE__ */ g(c, { className: "size-3.5" })
 		}), n]
 	});
 };
-D.displayName = "Combobox.Item";
-var O = ({ className: t, ...n }) => /* @__PURE__ */ h(_.Empty, {
+O.displayName = "Combobox.Item";
+var k = ({ className: t, ...n }) => /* @__PURE__ */ g(v.Empty, {
 	"data-slot": "combobox-empty",
-	className: e(y.message(), t),
+	className: e(b.message(), t),
 	...n
 });
-O.displayName = "Combobox.Empty";
-var k = ({ className: t, ...n }) => /* @__PURE__ */ h(_.Status, {
+k.displayName = "Combobox.Empty";
+var A = ({ className: t, ...n }) => /* @__PURE__ */ g(v.Status, {
 	"data-slot": "combobox-status",
-	className: e(y.message(), t),
+	className: e(b.message(), t),
 	...n
 });
-k.displayName = "Combobox.Status";
+A.displayName = "Combobox.Status";
 //#endregion
-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 };
+export { E as Content, k as Empty, T as Input, O as Item, D as List, S as Root, A as Status, y as comboboxRecipe };

package/src/field/context.d.ts

@@ -11,6 +11,8 @@ export type FieldErrorLike = {
      */
     types?: Record<string, string | string[] | boolean | undefined>;
 } | undefined;
+/** What a registered message is, which sets its place in `aria-describedby`. */
+export type FieldMessageKind = 'error' | 'description';
 /**
  * State of the surrounding `Field.Root`, shared with the Field family
  * (`Field.Description`, `Field.Error`) and with controls that have no context
@@ -39,9 +41,11 @@ export type FieldContextValue = {
     /**
      * Adds a message element to `describedBy` and returns the function that
      * removes it. `Field.Description` and `Field.Error` call it from a layout
-     * effect; a custom message element can do the same.
+     * effect; a custom message element can do the same. Errors are listed first,
+     * then descriptions, then messages registered without a `kind`, each in the
+     * order they registered.
      */
-    registerMessage: (id: string) => () => void;
+    registerMessage: (id: string, kind?: FieldMessageKind) => () => void;
     invalid: boolean;
     disabled: boolean;
     readOnly: boolean;

package/src/field/field.d.ts

@@ -141,8 +141,8 @@ export type FieldRootProps = ComponentPropsWithRef<'div'> & {
  * <Field.Root invalid={!!error} required>
  *   <Field.Label>Email</Field.Label>
  *   <Input type="email" />
- *   <Field.Description>We only use this for policy documents.</Field.Description>
  *   <Field.Error errors={[error]} />
+ *   <Field.Description>We only use this for policy documents.</Field.Description>
  * </Field.Root>
  */
 export declare const Root: {
@@ -201,7 +201,9 @@ export declare const Description: {
 };
 /**
  * Validation feedback for the field, announced as an alert when it appears.
- * Renders nothing without a message, so it can stay mounted unconditionally;
+ * Place it right after the control, before `Field.Description`: the control's
+ * `aria-describedby` reads the error first as well. Renders nothing without a
+ * message, so it can stay mounted unconditionally;
  * set `invalid` on `Field.Root` alongside it. Takes `children` or an `errors`
  * array, and a form adapter can supply `errors` through `FieldContext` so a
  * bare `<Field.Error />` renders them. One per field: it takes the field's

package/src/field/field.js

@@ -38,31 +38,34 @@ var m = s({
 		] }
 	} },
 	defaultVariants: { orientation: "vertical" }
-}), h = m(), g = ({ className: t, ...n }) => /* @__PURE__ */ f("div", {
+}), h = m(), g = (e) => e === "error" ? 0 : e === "description" ? 1 : 2, _ = ({ className: t, ...n }) => /* @__PURE__ */ f("div", {
 	"data-slot": "field-group",
 	className: e(h.group(), t),
 	...n
 });
-g.displayName = "Field.Group";
-var _ = ({ className: n, orientation: r = "vertical", invalid: a = !1, disabled: o = !1, readOnly: s = !1, required: u = !1, controlId: p, ...m }) => {
-	let g = l(), _ = p ?? `${g}-control`, v = `${g}-label`, y = `${g}-description`, b = `${g}-error`, [x, S] = d([]), C = c((e) => (S((t) => t.includes(e) ? t : [...t, e]), () => S((t) => t.filter((t) => t !== e))), []), w = {
-		controlId: _,
-		labelId: v,
-		descriptionId: y,
-		errorId: b,
-		describedBy: [...[y, b].filter((e) => x.includes(e)), ...x.filter((e) => e !== y && e !== b)].join(" ") || void 0,
-		registerMessage: C,
+_.displayName = "Field.Group";
+var v = ({ className: n, orientation: r = "vertical", invalid: a = !1, disabled: o = !1, readOnly: s = !1, required: u = !1, controlId: p, ...m }) => {
+	let _ = l(), v = p ?? `${_}-control`, y = `${_}-label`, b = `${_}-description`, x = `${_}-error`, [S, C] = d([]), w = c((e, t) => (C((n) => n.some((t) => t.id === e) ? n : [...n, {
+		id: e,
+		kind: t
+	}]), () => C((t) => t.filter((t) => t.id !== e))), []), T = {
+		controlId: v,
+		labelId: y,
+		descriptionId: b,
+		errorId: x,
+		describedBy: [...S].sort((e, t) => g(e.kind) - g(t.kind)).map((e) => e.id).join(" ") || void 0,
+		registerMessage: w,
 		invalid: a,
 		disabled: o,
 		readOnly: s,
 		required: u
 	};
 	return /* @__PURE__ */ f(i, {
-		value: w,
+		value: T,
 		children: /* @__PURE__ */ f(t, {
 			value: {
-				id: v,
-				htmlFor: _,
+				id: y,
+				htmlFor: v,
 				required: u || void 0
 			},
 			children: /* @__PURE__ */ f("div", {
@@ -77,14 +80,14 @@ var _ = ({ className: n, orientation: r = "vertical", invalid: a = !1, disabled:
 		})
 	});
 };
-_.displayName = "Field.Root";
-var v = ({ className: t, ...n }) => /* @__PURE__ */ f("div", {
+v.displayName = "Field.Root";
+var y = ({ className: t, ...n }) => /* @__PURE__ */ f("div", {
 	"data-slot": "field-content",
 	className: e(h.content(), t),
 	...n
 });
-v.displayName = "Field.Content";
-var y = ({ tooltip: e, tooltipSide: t, ...i }) => /* @__PURE__ */ p("div", {
+y.displayName = "Field.Content";
+var b = ({ tooltip: e, tooltipSide: t, ...i }) => /* @__PURE__ */ p("div", {
 	"data-slot": "field-label",
 	className: h.label(),
 	children: [/* @__PURE__ */ f(n, { ...i }), e && /* @__PURE__ */ f(r, {
@@ -100,23 +103,23 @@ var y = ({ tooltip: e, tooltipSide: t, ...i }) => /* @__PURE__ */ p("div", {
 		})
 	})]
 });
-y.displayName = "Field.Label";
-var b = ({ className: t, id: n, ...r }) => {
+b.displayName = "Field.Label";
+var x = ({ className: t, id: n, ...r }) => {
 	let i = a(), o = n ?? i?.descriptionId, s = i?.registerMessage;
-	return u(() => o ? s?.(o) : void 0, [s, o]), /* @__PURE__ */ f("p", {
+	return u(() => o ? s?.(o, "description") : void 0, [s, o]), /* @__PURE__ */ f("p", {
 		"data-slot": "field-description",
 		id: o,
 		className: e(h.description(), t),
 		...r
 	});
 };
-b.displayName = "Field.Description";
-var x = (e) => {
+x.displayName = "Field.Description";
+var S = (e) => {
 	let t = Object.values(e?.types ?? {}).flat().filter((e) => typeof e == "string" && e.length > 0);
 	return t.length ? t : e?.message ? [e.message] : [];
-}, S = ({ className: t, children: n, errors: r, id: i, ...o }) => {
-	let s = a(), c = i ?? s?.errorId, l = r ?? s?.errors, d = s?.registerMessage, p = [...new Set(l?.flatMap(x))], m = n ?? (p.length > 1 ? /* @__PURE__ */ f("ul", { children: p.map((e) => /* @__PURE__ */ f("li", { children: e }, e)) }) : p[0]), g = !!m;
-	return u(() => g && c ? d?.(c) : void 0, [
+}, C = ({ className: t, children: n, errors: r, id: i, ...o }) => {
+	let s = a(), c = i ?? s?.errorId, l = r ?? s?.errors, d = s?.registerMessage, p = [...new Set(l?.flatMap(S))], m = n ?? (p.length > 1 ? /* @__PURE__ */ f("ul", { children: p.map((e) => /* @__PURE__ */ f("li", { children: e }, e)) }) : p[0]), g = !!m;
+	return u(() => g && c ? d?.(c, "error") : void 0, [
 		d,
 		g,
 		c
@@ -129,6 +132,6 @@ var x = (e) => {
 		children: m
 	}) : null;
 };
-S.displayName = "Field.Error";
+C.displayName = "Field.Error";
 //#endregion
-export { v as Content, b as Description, S as Error, g as Group, y as Label, _ as Root, m as fieldRecipe };
+export { y as Content, x as Description, C as Error, _ as Group, b as Label, v as Root, m as fieldRecipe };

package/src/field/index.d.ts

@@ -1,7 +1,7 @@
 export { fieldRecipe } from './field';
 export { FieldContext, useFieldContext } from './context';
 export type { FieldContentProps, FieldGroupProps, FieldLabelProps, FieldRootProps, FieldVariants } from './field';
-export type { FieldContextValue, FieldDescriptionProps, FieldErrorLike, FieldErrorProps } from './context';
+export type { FieldContextValue, FieldDescriptionProps, FieldErrorLike, FieldErrorProps, FieldMessageKind } from './context';
 export declare const Field: {
     Root: {
         ({ className, orientation, invalid, disabled, readOnly, required, controlId: controlIdProp, ...props }: import('./field').FieldRootProps): import("react/jsx-runtime").JSX.Element;

package/src/field-text/field-text.d.ts

@@ -18,8 +18,8 @@ export type FieldTextProps = FieldRootProps;
  * <FieldText invalid={!!error} required>
  *   <Label>Email</Label>
  *   <Input type="email" />
- *   <Field.Description>We only use this for policy documents.</Field.Description>
  *   <Field.Error errors={[error]} />
+ *   <Field.Description>We only use this for policy documents.</Field.Description>
  * </FieldText>
  */
 export declare const FieldText: {

package/src/form-text/form-text.d.ts

@@ -55,9 +55,9 @@ export type FormTextProps<TFieldValues extends FieldValues = FieldValues, TName
     /** The caption, rendered as the field's label. Text in almost every case. */
     label: ReactNode;
     /**
-     * Helper text shown under the control and announced through its
-     * `aria-describedby`. Use it for guidance the user needs before typing; put
-     * details worth a click in `tooltip` instead.
+     * Helper text shown under the control, below the error when there is one,
+     * and announced through its `aria-describedby`. Use it for guidance the
+     * user needs before typing; put details worth a click in `tooltip` instead.
      */
     description?: ReactNode;
     /**
@@ -96,7 +96,7 @@ export type FormTextProps<TFieldValues extends FieldValues = FieldValues, TName
 };
 /**
  * A complete text field bound to one react-hook-form value: label, `Input`,
- * helper text and validation error, laid out in the standard order and wired
+ * validation error and helper text, laid out in the standard order and wired
  * through `useController`. It renders inside a `Form.Root`, which provides the
  * form, and needs only a `name`, which on a typed form must point at a string
  * (`FormTextPath`). The `required`, `invalid` and error states

package/src/form-text/form-text.js

@@ -30,8 +30,8 @@ var s = ({ name: s, control: c, rules: l, shouldUnregister: u, disabled: d, labe
 			children: f
 		}), /* @__PURE__ */ a(t.Content, { children: [
 			/* @__PURE__ */ i(n, { ...e(x, _ ?? {}) }),
-			p && /* @__PURE__ */ i(t.Description, { children: p }),
-			/* @__PURE__ */ i(t.Error, { errors: b.error ? [b.error] : void 0 })
+			/* @__PURE__ */ i(t.Error, { errors: b.error ? [b.error] : void 0 }),
+			p && /* @__PURE__ */ i(t.Description, { children: p })
 		] })]
 	});
 };

package/src/input-search/icons.d.ts

@@ -0,0 +1,16 @@
+import { SVGProps } from 'react';
+/**
+ * Magnifier leading InputSearch, the same glyph `Combobox` uses. Fill color
+ * comes from the input group addon, so the icon follows the field's state.
+ *
+ * @summary 24px search icon leading the InputSearch field
+ */
+export declare const IconSearch: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Circled cross on the InputSearch clear button, the same glyph `Combobox`
+ * uses. Fill color comes from the button's class, so the icon follows its
+ * hover and disabled states.
+ *
+ * @summary 24px cancel icon on the InputSearch clear button
+ */
+export declare const IconCancel: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/input-search/icons.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/input-search/icons.tsx
+var t = (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" })
+}), n = (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 13.0538L15.0731 16.1269C15.2115 16.2654 15.3856 16.3362 15.5952 16.3394C15.8048 16.3426 15.982 16.2718 16.1269 16.1269C16.2718 15.982 16.3442 15.8064 16.3442 15.6C16.3442 15.3936 16.2718 15.218 16.1269 15.0731L13.0538 12L16.1269 8.9269C16.2653 8.78845 16.3362 8.61442 16.3394 8.4048C16.3426 8.1952 16.2718 8.01797 16.1269 7.8731C15.982 7.72822 15.8064 7.65577 15.6 7.65577C15.3936 7.65577 15.2179 7.72822 15.0731 7.8731L12 10.9462L8.92688 7.8731C8.78842 7.73463 8.61439 7.6638 8.40478 7.6606C8.19518 7.65738 8.01794 7.72822 7.87308 7.8731C7.72819 8.01797 7.65575 8.1936 7.65575 8.4C7.65575 8.6064 7.72819 8.78203 7.87308 8.9269L10.9461 12L7.87308 15.0731C7.73461 15.2115 7.66378 15.3856 7.66058 15.5952C7.65736 15.8048 7.72819 15.982 7.87308 16.1269C8.01794 16.2718 8.19358 16.3442 8.39998 16.3442C8.60638 16.3442 8.78201 16.2718 8.92688 16.1269L12 13.0538ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5766 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45271 3.248 8.29657C3.74667 7.14042 4.42342 6.13474 5.27825 5.27952C6.1331 4.42429 7.13834 3.74723 8.29398 3.24835C9.44959 2.74947 10.6844 2.50002 11.9983 2.50002C13.3122 2.50002 14.5473 2.74936 15.7034 3.24802C16.8596 3.74669 17.8652 4.42344 18.7205 5.27827C19.5757 6.13312 20.2527 7.13837 20.7516 8.294C21.2505 9.44962 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8653 18.7217 18.7205C17.8669 19.5757 16.8616 20.2528 15.706 20.7516C14.5504 21.2505 13.3156 21.5 12.0016 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76664 4 7.87498 4.775 6.32498 6.325C4.77498 7.875 3.99998 9.76667 3.99998 12C3.99998 14.2333 4.77498 16.125 6.32498 17.675C7.87498 19.225 9.76664 20 12 20Z" })
+});
+//#endregion
+export { n as IconCancel, t as IconSearch };

package/src/input-search/index.d.ts

@@ -0,0 +1,2 @@
+export { InputSearch, inputSearchRecipe } from './input-search';
+export type { InputSearchProps } from './input-search';

package/src/input-search/index.js

@@ -0,0 +1,2 @@
+import { InputSearch as e, inputSearchRecipe as t } from "./input-search.js";
+export { e as InputSearch, t as inputSearchRecipe };

package/src/input-search/input-search.d.ts

@@ -0,0 +1,96 @@
+import { InputProps } from '../input';
+/**
+ * Style recipe for InputSearch. Slots: `input` (hides the browser's own
+ * cancel button and search decoration, so the field shows only the clear
+ * button it draws) and `clear` (the clear button, the same 24px icon button
+ * as the Combobox clear, removed while the input is disabled).
+ *
+ * @summary tailwind-variants recipe backing the InputSearch input and clear button
+ */
+export declare const inputSearchRecipe: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            clear?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            clear?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    input: string;
+    clear: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            clear?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    input: string;
+    clear: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    input: string;
+    clear: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type InputSearchProps = Omit<InputProps, 'type'> & {
+    /**
+     * Shows a spinner at the end of the frame, in place of the clear button,
+     * while the results for the current text are on their way. Defaults to
+     * `false`.
+     */
+    isLoading?: boolean;
+    /**
+     * Accessible name of the clear button. Defaults to `'Clear search'`; name it
+     * after what is searched (`'Clear agency search'`) when a page carries
+     * several search fields.
+     */
+    clearLabel?: string;
+};
+/**
+ * InputSearch is a search field: a magnifier in front of the text and, once
+ * there is text, a clear button after it, named "Clear search" unless
+ * `clearLabel` says otherwise. The clear button empties the field
+ * and puts focus back in it, and it reports the change through `onChange` like
+ * a keystroke would: a real change event whose `event.target.value` is `''`,
+ * so a controlled field, an uncontrolled one and one registered with
+ * react-hook-form all clear the same way. While `isLoading` is set, a spinner
+ * takes the clear button's place. The clear button is not rendered while the
+ * input is disabled, whether `disabled` comes from the prop, from a
+ * surrounding `FieldText` or from a `<fieldset disabled>`.
+ *
+ * It is an [Input](?path=/docs/components-input--docs) of `type="search"`
+ * inside an [InputGroup](?path=/docs/components-inputgroup--docs) frame, so
+ * it is announced as a search box. `className` styles the frame. Every other
+ * prop goes to the `<input>`: the `ref`, `id`, `name`, `value`, `onChange`,
+ * `aria-*` and every other standard attribute. Only `type` is not accepted.
+ * `placeholder` defaults to `'Search'`. Inside a `FieldText` the input takes
+ * its label, messages and states from the field as a plain `Input` does. The
+ * invalid state comes from `aria-invalid`, and the frame paints the
+ * destructive border.
+ *
+ * Do not use it to pick a value from a list; that is
+ * [Combobox](?path=/docs/components-combobox--docs), whose `search` field is
+ * drawn by InputSearch. For a filter that should
+ * run only once the user pauses typing, use `DebouncedInputSearch`.
+ *
+ * @summary Search input with a leading icon, a clear button and a loading slot
+ * @dataAttribute {string} data-slot - Always set to "input-search" on the frame
+ *
+ * @example
+ * <InputSearch
+ *   aria-label="Search agencies"
+ *   value={query}
+ *   onChange={event => setQuery(event.target.value)}
+ *   isLoading={isFetching}
+ * />
+ */
+export declare const InputSearch: {
+    ({ className, isLoading, clearLabel, placeholder, ref, onChange, ...props }: InputSearchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/input-search/input-search.js

@@ -0,0 +1,53 @@
+"use client";
+import { chain as e, mergeRefs as t } from "../../lib/merge-props.js";
+import { InputContext as n } from "../input/context.js";
+import { Input as r } from "../input/input.js";
+import { InputGroup as i } from "../input-group/index.js";
+import { Loading as a } from "../loading/loading.js";
+import { IconCancel as o, IconSearch as s } from "./icons.js";
+import { tv as c } from "tailwind-variants";
+import { use as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/input-search/input-search.tsx
+var h = c({ slots: {
+	input: "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
+	clear: [
+		"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",
+		"group-has-[input:disabled]/input-group:hidden"
+	]
+} }), g = h(), _ = (e) => e !== void 0 && String(e) !== "", v = ({ className: c, isLoading: h = !1, clearLabel: v = "Clear search", placeholder: y = "Search", ref: b, onChange: x, ...S }) => {
+	let C = d(null), w = l(n)?.value, [T, E] = f(() => _(S.defaultValue)), D = S.value === void 0 ? w : S.value, O = D === void 0 ? T : _(D), k = (e) => E(e.target.value !== ""), A = u(() => t(C, b, (e) => {
+		e && E(e.value !== "");
+	}), [b]), j = () => {
+		let e = C.current;
+		e && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), e.focus());
+	};
+	return /* @__PURE__ */ m(i.Root, {
+		"data-slot": "input-search",
+		className: c,
+		children: [
+			/* @__PURE__ */ p(i.Addon, { children: /* @__PURE__ */ p(s, {}) }),
+			/* @__PURE__ */ p(r, {
+				ref: A,
+				type: "search",
+				placeholder: y,
+				...S,
+				className: g.input(),
+				onChange: e(k, x)
+			}),
+			h ? /* @__PURE__ */ p(i.Addon, { children: /* @__PURE__ */ p(a, { size: "sm" }) }) : O && /* @__PURE__ */ p(i.Addon, { children: /* @__PURE__ */ p("button", {
+				type: "button",
+				className: g.clear(),
+				"aria-label": v,
+				onClick: j,
+				children: /* @__PURE__ */ p(o, {})
+			}) })
+		]
+	});
+};
+v.displayName = "InputSearch";
+//#endregion
+export { v as InputSearch, h as inputSearchRecipe };