@agentero/design-system 0.31.8 → 0.32.1

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",
@@ -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/input-group/index.d.ts

@@ -0,0 +1,16 @@
+export { inputGroupRecipe } from './input-group';
+export type { InputGroupAddonProps, InputGroupRootProps, InputGroupTextProps } from './input-group';
+export declare const InputGroup: {
+    Root: {
+        ({ className, ...props }: import('./input-group').InputGroupRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Addon: {
+        ({ className, variant, onMouseDown, ...props }: import('./input-group').InputGroupAddonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Text: {
+        ({ className, ...props }: import('./input-group').InputGroupTextProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/input-group/index.js

@@ -0,0 +1,9 @@
+import { Addon as e, Root as t, Text as n, inputGroupRecipe as r } from "./input-group.js";
+//#region src/input-group/index.ts
+var i = {
+	Root: t,
+	Addon: e,
+	Text: n
+};
+//#endregion
+export { i as InputGroup, r as inputGroupRecipe };

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

@@ -0,0 +1,130 @@
+import { ComponentPropsWithRef } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Style recipe for InputGroup. Slots: `root` (the bordered frame), `addon` and
+ * `text`. Focus, disabled, invalid and size all come from the `<input>` or
+ * `<textarea>` inside through `:has()`, so the frame can never disagree with
+ * its control.
+ *
+ * @summary tailwind-variants recipe backing the InputGroup frame and addons
+ */
+export declare const inputGroupRecipe: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {};
+        action: {
+            addon: string[];
+        };
+    };
+}, {
+    root: string[];
+    addon: string[];
+    text: string[];
+}, undefined, {
+    variant: {
+        default: {};
+        action: {
+            addon: string[];
+        };
+    };
+}, {
+    root: string[];
+    addon: string[];
+    text: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {};
+        action: {
+            addon: string[];
+        };
+    };
+}, {
+    root: string[];
+    addon: string[];
+    text: string[];
+}, undefined, unknown, unknown, undefined>>;
+type InputGroupVariants = VariantProps<typeof inputGroupRecipe>;
+export type InputGroupRootProps = ComponentPropsWithRef<'div'>;
+/**
+ * The bordered frame of an input group: one box around an `Input` and its
+ * addons, drawn as a single control. It carries the border, the shadow, the
+ * focus ring and the horizontal padding; the `Input` inside renders bare and
+ * gives the frame its state — focus, `disabled`, `aria-invalid` and `size`
+ * all propagate through `:has()`, so nothing is passed to the frame by hand.
+ *
+ * Put the `Input` and any `InputGroup.Addon` or `InputGroup.Text` inside, in
+ * reading order. Inside a `FieldText` the `Input` still takes its label and
+ * messages from the field, at any depth; the frame needs nothing.
+ *
+ * Use it for an input with a leading icon, a currency or unit affix, or a
+ * trailing action. A plain input with nothing around it is just `Input`, and a
+ * button beside an input that submits on its own is a form layout, not a group.
+ * Not a `role="group"`, like `Field`.
+ *
+ * @summary Bordered frame drawing an Input and its addons as one control
+ * @dataAttribute {string} data-slot - Always set to "input-group"
+ *
+ * @example
+ * <InputGroup.Root>
+ *   <InputGroup.Text>$</InputGroup.Text>
+ *   <Input inputMode="decimal" placeholder="0.00" />
+ *   <InputGroup.Text>USD</InputGroup.Text>
+ * </InputGroup.Root>
+ */
+export declare const Root: {
+    ({ className, ...props }: InputGroupRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type InputGroupAddonProps = ComponentPropsWithRef<'div'> & {
+    /**
+     * `action` runs a button edge to edge at the frame's height.
+     *
+     * @default 'default'
+     */
+    variant?: InputGroupVariants['variant'];
+};
+/**
+ * A slot for an icon, a tag or a button inside the frame. Icons take the input
+ * colour and size (24px) and follow the disabled state. A press on the addon
+ * itself focuses the input, so the whole frame reads as the control; a press on
+ * a button or link inside it is left alone.
+ *
+ * For a text affix use `InputGroup.Text`, which sets the type and colour a
+ * prefix needs.
+ *
+ * @summary Icon, tag or button slot inside the input group frame
+ * @dataAttribute {string} data-slot - Always set to "input-group-addon"
+ *
+ * @example
+ * <InputGroup.Root>
+ *   <InputGroup.Addon><IconSearch /></InputGroup.Addon>
+ *   <Input type="search" placeholder="Search agencies" />
+ * </InputGroup.Root>
+ */
+export declare const Addon: {
+    ({ className, variant, onMouseDown, ...props }: InputGroupAddonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type InputGroupTextProps = ComponentPropsWithRef<'span'>;
+/**
+ * A text affix inside the frame: a currency symbol, a protocol, a unit. Set in
+ * the placeholder colour so the typed value stands out, at the input's text
+ * size (`base` when the input is `lg`), and greyed out with a disabled input.
+ * It is decoration only: a screen reader does not read it as part of the value,
+ * so say the unit in the label or the description when it matters — and the
+ * value excludes it too, so a `https://` prefix goes with a `type="text"`
+ * input, not `type="url"`, whose native validation would reject the bare host.
+ *
+ * @summary Currency, protocol or unit affix set beside the input
+ * @dataAttribute {string} data-slot - Always set to "input-group-text"
+ *
+ * @example
+ * <InputGroup.Root>
+ *   <InputGroup.Text>https://</InputGroup.Text>
+ *   <Input type="text" inputMode="url" autoCapitalize="none" placeholder="www.agentero.com" />
+ * </InputGroup.Root>
+ */
+export declare const Text: {
+    ({ className, ...props }: InputGroupTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/src/input-group/input-group.js

@@ -0,0 +1,79 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { tv as t } from "tailwind-variants";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/input-group/input-group.tsx
+var r = t({
+	slots: {
+		root: [
+			"group/input-group [--input-group-gap:0.75rem]",
+			"flex gap-(--input-group-gap) rounded-md border border-solid border-border-input-default",
+			"bg-bg-input-normal px-3 text-text-input-normal shadow-sm",
+			"cursor-text overflow-hidden outline-0 -outline-offset-1 outline-[transparent]",
+			"transition-[color,box-shadow,outline-color,outline-offset,outline-width] duration-75",
+			"has-[input:focus-within,textarea:focus-within]:border-border-input-focus",
+			"has-[input:focus-within,textarea:focus-within]:outline-border-input-focus",
+			"has-[input:focus-within,textarea:focus-within]:outline-[0.125rem]",
+			"has-[input:focus-within,textarea:focus-within]:outline-offset-[-0.0625rem]",
+			"has-[input:disabled,textarea:disabled]:cursor-default",
+			"has-[input:disabled,textarea:disabled]:border-border-input-disable",
+			"has-[input:disabled,textarea:disabled]:bg-bg-input-disable",
+			"has-[input:disabled,textarea:disabled]:text-text-input-disable",
+			"has-[input:disabled,textarea:disabled]:shadow-none",
+			"has-[input[data-size=\"lg\"],textarea[data-size=\"lg\"]]:rounded-lg",
+			"has-[input[aria-invalid=\"true\"],textarea[aria-invalid=\"true\"]]:border-border-input-destructive",
+			"has-[input[aria-invalid=\"true\"]:focus-within,textarea[aria-invalid=\"true\"]:focus-within]:outline-outline-input-destructive",
+			"**:[input,textarea]:-my-0.25 **:[input,textarea]:border-none **:[input,textarea]:bg-transparent",
+			"**:[input,textarea]:px-0 **:[input,textarea]:pb-0.125 **:[input,textarea]:shadow-none",
+			"**:[input,textarea]:outline-none **:[input,textarea]:focus-visible:outline-none",
+			"**:[[data-slot=separator]]:bg-border-input-default",
+			"**:[[data-slot=tag]]:-ms-1 **:[[data-slot=tag]]:rounded-sm",
+			"**:[input+[data-slot=input-group-addon]>[data-slot=tag]]:ms-0",
+			"**:[input+[data-slot=input-group-addon]>[data-slot=tag]]:-me-1"
+		],
+		addon: [
+			"flex h-auto cursor-text items-center justify-center",
+			"*:[svg]:-mx-1 *:[svg]:size-6 [&_path]:fill-icon-input-default",
+			"group-has-[input:disabled,textarea:disabled]/input-group:[&_path]:fill-icon-input-disable"
+		],
+		text: [
+			"flex items-center text-sm text-text-input-placeholder",
+			"group-has-[input[data-size=\"lg\"]]/input-group:text-base",
+			"group-has-[input:disabled,textarea:disabled]/input-group:text-text-input-disable"
+		]
+	},
+	variants: { variant: {
+		default: {},
+		action: { addon: [
+			"-mx-(--input-group-gap) shrink-0 items-stretch rounded-[inherit]",
+			"*:[button]:h-auto *:[button]:rounded-none *:[button]:focus-visible:-outline-offset-2",
+			"first:*:[button]:rounded-s-[inherit] last:*:[button]:rounded-e-[inherit]"
+		] }
+	} },
+	defaultVariants: { variant: "default" }
+}), i = r(), a = ({ className: t, ...r }) => /* @__PURE__ */ n("div", {
+	"data-slot": "input-group",
+	className: e(i.root(), t),
+	...r
+});
+a.displayName = "InputGroup.Root";
+var o = ({ className: t, variant: i, onMouseDown: a, ...o }) => /* @__PURE__ */ n("div", {
+	"data-slot": "input-group-addon",
+	className: e(r({ variant: i }).addon(), t),
+	onMouseDown: (e) => {
+		if (a?.(e), e.defaultPrevented || e.target.closest("button, a")) return;
+		e.preventDefault();
+		let t = e.currentTarget.parentElement, n = t?.querySelector("input, textarea");
+		n && !t?.querySelector("input:focus, textarea:focus") && n.focus();
+	},
+	...o
+});
+o.displayName = "InputGroup.Addon";
+var s = ({ className: t, ...r }) => /* @__PURE__ */ n("span", {
+	"data-slot": "input-group-text",
+	className: e(i.text(), t),
+	...r
+});
+s.displayName = "InputGroup.Text";
+//#endregion
+export { o as Addon, a as Root, s as Text, r as inputGroupRecipe };