@agentero/design-system 0.34.1 → 0.35.0

package/src/combobox/combobox.js

@@ -8,11 +8,11 @@ import { InputGroup as a } from "../input-group/index.js";
 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";
+import { createContext as f, use as p, useEffect as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { Combobox as y } from "@base-ui/react/combobox";
 //#region src/combobox/combobox.tsx
-var y = d({ slots: {
+var b = 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",
@@ -48,144 +48,170 @@ var y = d({ 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"]
-} }), 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 = m(!1), p = m(!1), _ = (e, t) => {
-		if (e && d(u.current)) {
+} }), x = b(), S = f(!1), C = f(void 0), w = 500, T = (e, t) => {
+	let [n, r] = g(!1);
+	return m(() => {
+		if (!e) return;
+		let t = setTimeout(() => r(!0), w);
+		return () => {
+			clearTimeout(t), r(!1);
+		};
+	}, [e]), e && n ? t : null;
+}, E = ({ minInputLength: e = 0, loading: t, loadingLabel: n = "Loading…", open: r, defaultOpen: i = !1, onOpenChange: a, onOpenChangeComplete: o, onInputValueChange: s, children: c, ...l }) => {
+	let u = !!l.multiple, [d, f] = g(i), p = h(String(l.inputValue ?? l.defaultInputValue ?? ""));
+	l.inputValue !== void 0 && (p.current = String(l.inputValue));
+	let m = (t) => t.trim().length < e, b = h(!1), x = h(!1), w = (e, t) => {
+		if (e && m(p.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, p.current = !0, queueMicrotask(() => p.current = !1));
-	}, b = (e, n) => {
-		if (p.current) {
-			p.current = !1, n.cancel();
+		b.current = !1, a?.(e, t), u && !e && t.reason === "item-press" && t.cancel(), t.isCanceled || f(e);
+	}, E = (e) => {
+		o?.(e), !e && b.current && (b.current = !1, x.current = !0, queueMicrotask(() => x.current = !1));
+	}, D = (e, t) => {
+		if (x.current) {
+			x.current = !1, t.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__ */ g(x, {
-		value: s,
-		children: /* @__PURE__ */ g(v.Root, {
-			open: S,
-			defaultOpen: n,
-			onOpenChange: _,
-			onOpenChangeComplete: y,
-			onInputValueChange: b,
-			...o
+		p.current = e, s?.(e, t), m(e) && r === void 0 && d && (b.current = !0, f(!1));
+	}, O = r ?? (e > 0 ? d : void 0), k = T(!!t && (r ?? d), n);
+	return /* @__PURE__ */ _(S, {
+		value: u,
+		children: /* @__PURE__ */ _(C, {
+			value: t,
+			children: /* @__PURE__ */ v(y.Root, {
+				open: O,
+				defaultOpen: i,
+				onOpenChange: w,
+				onOpenChangeComplete: E,
+				onInputValueChange: D,
+				...l,
+				children: [c, t !== void 0 && /* @__PURE__ */ _(y.Status, {
+					"data-slot": "combobox-loading",
+					className: "sr-only",
+					children: k
+				})]
+			})
 		})
 	});
 };
-S.displayName = "Combobox.Root";
-var C = /* @__PURE__ */ new Set([
+E.displayName = "Combobox.Root";
+var D = /* @__PURE__ */ new Set([
 	"value",
 	"defaultValue",
 	"onChange"
-]), 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;
+]), O = (e) => {
+	let i = p(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !D.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
 	return t({
 		...o,
 		...s
 	}, e);
-}, 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", {}),
+}, k = ({ variant: t = "search", showClear: n = t === "search", clearLabel: c = "Clear", triggerLabel: d = "Show options", ...f }) => {
+	let { className: m, size: h = "md", ...g } = O(f), b = p(S);
+	return t === "search" && n && !b ? /* @__PURE__ */ _(y.InputGroup, {
+		render: /* @__PURE__ */ _("div", {}),
 		"data-slot": "combobox-field",
-		children: /* @__PURE__ */ g(r, {
+		children: /* @__PURE__ */ _(r, {
 			value: null,
-			children: /* @__PURE__ */ g(v.Input, {
+			children: /* @__PURE__ */ _(y.Input, {
 				"data-slot": "combobox-input",
 				className: m,
-				...y,
-				render: (e) => /* @__PURE__ */ g(o, {
+				...g,
+				render: (e) => /* @__PURE__ */ _(o, {
 					...e,
 					size: h,
 					clearLabel: c
 				})
 			})
 		})
-	}) : /* @__PURE__ */ _(v.InputGroup, {
-		render: /* @__PURE__ */ g(a.Root, {}),
+	}) : /* @__PURE__ */ v(y.InputGroup, {
+		render: /* @__PURE__ */ _(a.Root, {}),
 		"data-slot": "combobox-field",
 		className: t === "plain" ? "px-4" : void 0,
 		children: [
-			t === "search" && /* @__PURE__ */ g(a.Addon, { children: /* @__PURE__ */ g(u, {}) }),
-			/* @__PURE__ */ g(v.Input, {
+			t === "search" && /* @__PURE__ */ _(a.Addon, { children: /* @__PURE__ */ _(u, {}) }),
+			/* @__PURE__ */ _(y.Input, {
 				"data-slot": "combobox-input",
 				"data-size": h,
 				className: e(i({ size: h }), m),
-				...y
+				...g
 			}),
-			n && !S && /* @__PURE__ */ g(v.Clear, {
+			n && !b && /* @__PURE__ */ _(y.Clear, {
 				"data-slot": "combobox-clear",
 				"aria-label": c,
-				className: b.action(),
-				children: /* @__PURE__ */ g(s, {})
+				className: x.action(),
+				children: /* @__PURE__ */ _(s, {})
 			}),
-			t === "select" && !S && /* @__PURE__ */ g(v.Trigger, {
+			t === "select" && !b && /* @__PURE__ */ _(y.Trigger, {
 				"data-slot": "combobox-trigger",
 				"aria-label": d,
-				className: e(b.action(), b.trigger(), n && b.triggerReplaced()),
-				children: /* @__PURE__ */ g(l, {})
+				className: e(x.action(), x.trigger(), n && x.triggerReplaced()),
+				children: /* @__PURE__ */ _(l, {})
 			})
 		]
 	});
 };
-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,
-	alignOffset: a,
-	anchor: o,
-	collisionPadding: s,
-	className: "isolate z-(--z-index-top-layer) pointer-events-auto",
-	children: /* @__PURE__ */ g(v.Popup, {
-		"data-slot": "combobox-content",
-		className: e(b.content(), t),
-		...c
-	})
-}) });
-E.displayName = "Combobox.Content";
-var D = ({ className: t, ...n }) => {
+k.displayName = "Combobox.Input";
+var A = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, children: c, ...l }) => {
+	let u = p(C);
+	return /* @__PURE__ */ _(y.Portal, { children: /* @__PURE__ */ _(y.Positioner, {
+		side: n,
+		align: r,
+		sideOffset: i,
+		alignOffset: a,
+		anchor: o,
+		collisionPadding: s,
+		className: "isolate z-(--z-index-top-layer) pointer-events-auto",
+		children: /* @__PURE__ */ _(y.Popup, {
+			"data-slot": "combobox-content",
+			"aria-busy": u || void 0,
+			className: e(x.content(), t),
+			...l,
+			children: c
+		})
+	}) });
+};
+A.displayName = "Combobox.Content";
+var j = ({ className: t, ...n }) => {
 	let r = "aria-label" in n || "aria-labelledby" in n;
-	return /* @__PURE__ */ g(v.List, {
+	return /* @__PURE__ */ _(y.List, {
 		"data-slot": "combobox-list",
 		"aria-label": r ? void 0 : "Suggestions",
-		className: e(b.list(), t),
+		className: e(x.list(), t),
 		...n
 	});
 };
-D.displayName = "Combobox.List";
-var O = ({ className: t, children: n, ...r }) => {
-	let i = p(x);
-	return /* @__PURE__ */ _(v.Item, {
+j.displayName = "Combobox.List";
+var M = ({ className: t, children: n, ...r }) => {
+	let i = p(S);
+	return /* @__PURE__ */ v(y.Item, {
 		"data-slot": "combobox-item",
-		className: e(b.item(), t),
+		className: e(x.item(), t),
 		...r,
-		children: [i && /* @__PURE__ */ g(v.ItemIndicator, {
+		children: [i && /* @__PURE__ */ _(y.ItemIndicator, {
 			keepMounted: !0,
 			"data-slot": "combobox-item-indicator",
-			className: b.indicator(),
-			children: /* @__PURE__ */ g(c, { className: "size-3.5" })
+			className: x.indicator(),
+			children: /* @__PURE__ */ _(c, { className: "size-3.5" })
 		}), n]
 	});
 };
-O.displayName = "Combobox.Item";
-var k = ({ className: t, ...n }) => /* @__PURE__ */ g(v.Empty, {
-	"data-slot": "combobox-empty",
-	className: e(b.message(), t),
-	...n
-});
-k.displayName = "Combobox.Empty";
-var A = ({ className: t, ...n }) => /* @__PURE__ */ g(v.Status, {
+M.displayName = "Combobox.Item";
+var N = ({ className: t, children: n, ...r }) => {
+	let i = p(C);
+	return /* @__PURE__ */ _(y.Empty, {
+		"data-slot": "combobox-empty",
+		className: e(x.message(), t),
+		...r,
+		children: i ? null : n
+	});
+};
+N.displayName = "Combobox.Empty";
+var P = ({ className: t, ...n }) => /* @__PURE__ */ _(y.Status, {
 	"data-slot": "combobox-status",
-	className: e(b.message(), t),
+	className: e(x.message(), t),
 	...n
 });
-A.displayName = "Combobox.Status";
+P.displayName = "Combobox.Status";
 //#endregion
-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 };
+export { A as Content, N as Empty, k as Input, M as Item, j as List, E as Root, P as Status, b as comboboxRecipe };

package/src/combobox/index.d.ts

@@ -2,7 +2,7 @@ export { comboboxRecipe } from './combobox';
 export type { ComboboxRootProps } from './combobox';
 export declare const Combobox: {
     Root: {
-        <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;
+        <Value, Multiple extends boolean | undefined = false, Item = Value>({ minInputLength, loading, loadingLabel, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onInputValueChange, children, ...props }: import('./combobox').ComboboxRootProps<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Input: {
@@ -16,7 +16,7 @@ export declare const Combobox: {
         displayName: string;
     };
     Content: {
-        ({ className, side, align, sideOffset, alignOffset, anchor, collisionPadding, ...props }: Omit<import('@base-ui/react/combobox').ComboboxPopupProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & Pick<Omit<import('@base-ui/react/combobox').ComboboxPositionerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "anchor" | "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding">): import("react/jsx-runtime").JSX.Element;
+        ({ className, side, align, sideOffset, alignOffset, anchor, collisionPadding, children, ...props }: Omit<import('@base-ui/react/combobox').ComboboxPopupProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & Pick<Omit<import('@base-ui/react/combobox').ComboboxPositionerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "anchor" | "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding">): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     List: {
@@ -28,7 +28,7 @@ export declare const Combobox: {
         displayName: string;
     };
     Empty: {
-        ({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxEmptyProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ className, children, ...props }: Omit<import('@base-ui/react/combobox').ComboboxEmptyProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Status: {

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

@@ -0,0 +1,2 @@
+export { InputTel } from './input-tel';
+export type { InputTelProps } from './input-tel';

package/src/input-tel/index.js

@@ -0,0 +1,2 @@
+import { InputTel as e } from "./input-tel.js";
+export { e as InputTel };

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

@@ -0,0 +1,42 @@
+import { InputProps } from '../input';
+export type InputTelProps = Omit<InputProps, 'type'>;
+/**
+ * InputTel is a US phone number field that masks as you type: the digits the
+ * user enters are laid out as `(555) 123-4567` while typing, pasting or
+ * deleting, anything that is not a digit is dropped, and the caret stays next
+ * to the digit just edited instead of jumping to the end. A leading `+1`
+ * country code, as pasted or filled in by the browser's autofill, is dropped
+ * too; past that, the eleventh digit and beyond are ignored. `onChange`
+ * receives the native change event with the masked text already in
+ * `event.target.value`, so a controlled field, an uncontrolled one and one
+ * registered with react-hook-form all store `(555) 123-4567`, never the bare
+ * digits.
+ *
+ * It is an [Input](?path=/docs/components-input--docs) of `type="tel"` inside
+ * an [InputGroup](?path=/docs/components-inputgroup--docs) frame that always
+ * shows a `+1` prefix in front of the number. The prefix is part of the frame,
+ * not of the value. `className` styles the frame. Every other prop goes to the
+ * `<input>`: the `ref`, `id`, `name`, `value`, `onChange`, `aria-*` and every
+ * other standard attribute, such as `placeholder`, `autoComplete` or
+ * `required`. Only `type` is not accepted. 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 for international numbers or extensions; the mask only knows
+ * the ten-digit US format. For free-form text that happens to hold a number,
+ * use `Input`.
+ *
+ * @summary US phone input with a +1 prefix that masks as you type
+ * @dataAttribute {string} data-slot - Always set to "input-tel" on the frame
+ *
+ * @example
+ * <FieldText>
+ *   <Label>Phone number</Label>
+ *   <InputTel name="phone" autoComplete="tel-national" placeholder="(555) 000-0000" />
+ * </FieldText>
+ */
+export declare const InputTel: {
+    (props: InputTelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/input-tel/input-tel.js

@@ -0,0 +1,46 @@
+"use client";
+import { mergeRefs as e } from "../../lib/merge-props.js";
+import { InputContext as t, useInputContext as n } from "../input/context.js";
+import { Input as r } from "../input/input.js";
+import { InputGroup as i } from "../input-group/index.js";
+import { US_PHONE_MASK as a, applyMask as o, getCursorPosition as s, getDeletionType as c, toNationalDigits as l } from "./mask.js";
+import { useMemo as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/input-tel/input-tel.tsx
+var m = (m) => {
+	let { className: h, onChange: g, ref: _, ...v } = n(m), y = d(null), b = u(() => e(y, _), [_]), x = (e) => {
+		let t = c(e.nativeEvent.inputType), { value: n, selectionStart: r } = e.target, i = o({
+			value: l(n),
+			mask: a,
+			maskSymbol: ".",
+			trimNonMaskCharsLeftover: t === "backward"
+		}), u = s({
+			cursorPositionAfterInput: r ?? 0,
+			phoneAfterInput: n,
+			phoneAfterFormatted: i,
+			deletion: t
+		});
+		e.target.value = i;
+		let d = () => {
+			let e = y.current;
+			e && e === document.activeElement && e.setSelectionRange(u, u);
+		};
+		g ? (g(e), Promise.resolve().then(d)) : d();
+	};
+	return /* @__PURE__ */ p(i.Root, {
+		"data-slot": "input-tel",
+		className: h,
+		children: [/* @__PURE__ */ f(i.Text, { children: "+1" }), /* @__PURE__ */ f(t, {
+			value: null,
+			children: /* @__PURE__ */ f(r, {
+				...v,
+				type: "tel",
+				ref: b,
+				onChange: x
+			})
+		})]
+	});
+};
+m.displayName = "InputTel";
+//#endregion
+export { m as InputTel };

package/src/input-tel/mask.d.ts

@@ -0,0 +1,51 @@
+/** The US phone mask InputTel applies: three groups of 3, 3 and 4 digits. */
+export declare const US_PHONE_MASK = "(...) ...-....";
+/** The character that marks a digit slot in a mask. */
+export declare const MASK_SYMBOL = ".";
+/**
+ * Reduces a phone number in any format to its national digits: drops
+ * everything that is not a digit and, past ten digits, the leading `1` of the
+ * `+1` country code. No US area code starts with `1`, so a national number is
+ * never cut.
+ */
+export declare const toNationalDigits: (value: string) => string;
+type ApplyMaskArgs = {
+    value: string;
+    mask: string;
+    maskSymbol: string;
+    /**
+     * @description Removes all non-maskSymbol chars from the result's ending if the value is shorter than the mask
+     * @example
+     * value: "1234"
+     * mask: "(....) ...."
+     * if true -> "(1234"
+     * if false -> "(1234) "
+     */
+    trimNonMaskCharsLeftover?: boolean;
+};
+/**
+ * Places each character of `value` in the next `maskSymbol` slot of `mask`,
+ * keeping the mask's own characters in between. A value longer than the mask
+ * is cut; a shorter one stops at its last character, followed by the
+ * separators up to the next slot unless `trimNonMaskCharsLeftover` is set.
+ */
+export declare const applyMask: ({ value, mask, maskSymbol, trimNonMaskCharsLeftover }: ApplyMaskArgs) => string;
+export declare const isNumeric: (str?: string) => boolean;
+type GetCursorPositionProps = {
+    phoneAfterInput: string;
+    phoneAfterFormatted: string;
+    cursorPositionAfterInput: number;
+    deletion?: 'forward' | 'backward' | undefined;
+};
+/**
+ * Finds where the caret should sit in the formatted phone after an edit, so
+ * that it stays after the digit the user just typed or removed instead of
+ * jumping to the end when the mask characters move around it.
+ */
+export declare const getCursorPosition: ({ phoneAfterInput, phoneAfterFormatted, cursorPositionAfterInput, deletion }: GetCursorPositionProps) => number;
+/**
+ * Reads the `inputType` of a native `input` event and tells whether the edit
+ * removed characters, and in which direction. `undefined` for an insertion.
+ */
+export declare const getDeletionType: (inputType?: string) => "forward" | "backward" | undefined;
+export {};

package/src/input-tel/mask.js

@@ -0,0 +1,39 @@
+//#region src/input-tel/mask.ts
+var e = "(...) ...-....", t = (e) => {
+	let t = e.replace(/\D/g, "");
+	return t.length > 10 && t.startsWith("1") ? t.slice(1) : t;
+}, n = ({ value: e, mask: t, maskSymbol: n, trimNonMaskCharsLeftover: r = !1 }) => {
+	if (!e) return "";
+	let i = "", a = 0;
+	for (let o of t.split("")) {
+		if (a >= e.length) {
+			if (!r && o !== n) {
+				i += o;
+				continue;
+			}
+			break;
+		}
+		o === n ? (i += e[a], a += 1) : i += o;
+	}
+	return i;
+}, r = (e) => e ? /^\d+$/.test(e) : !1, i = ({ phoneAfterInput: e, phoneAfterFormatted: t, cursorPositionAfterInput: n, deletion: i }) => {
+	let a = null;
+	for (let t = n - 1; t >= 0; --t) if (r(e[t])) {
+		a = t;
+		break;
+	}
+	if (a === null) {
+		for (let n = 0; n < e.length; n += 1) if (r(t[n])) return n;
+		return e.length;
+	}
+	let o = 0;
+	for (let t = 0; t < a; t += 1) r(e[t]) && (o += 1);
+	let s = 0, c = 0;
+	for (let e = 0; e < t.length && (s += 1, r(t[e]) && (c += 1), !(c >= o + 1)); e += 1);
+	if (i !== "backward") for (; !r(t[s]) && s < t.length;) s += 1;
+	return s;
+}, a = (e) => {
+	if (e?.toLocaleLowerCase().includes("delete") ?? !1) return e?.toLocaleLowerCase().includes("forward") ? "forward" : "backward";
+};
+//#endregion
+export { e as US_PHONE_MASK, n as applyMask, i as getCursorPosition, a as getDeletionType, r as isNumeric, t as toNationalDigits };