@agentero/design-system 0.33.1 → 0.34.1

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 };

package/src/label/label.d.ts

@@ -1,36 +1,48 @@
 import { ComponentPropsWithRef } from 'react';
 import { VariantProps } from 'tailwind-variants';
 import * as LabelPrimitive from '@radix-ui/react-label';
-/** Style recipe for Label. Slots: `root`, `text`, `required`. */
+/** Style recipe for Label. Slots: `root`, `text`, `optional`, `required`. */
 export declare const labelRecipe: import('tailwind-variants').TVReturnType<{
-    optional: {
-        true: {
-            text: string;
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            text?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            required?: import('tailwind-merge').ClassNameValue;
+            optional?: import('tailwind-merge').ClassNameValue;
         };
     };
-}, {
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            text?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            required?: import('tailwind-merge').ClassNameValue;
+            optional?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
     root: string;
     text: string;
+    optional: string;
     required: string;
 }, undefined, {
-    optional: {
-        true: {
-            text: string;
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            text?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            required?: import('tailwind-merge').ClassNameValue;
+            optional?: import('tailwind-merge').ClassNameValue;
         };
     };
-}, {
+} | {}, {
     root: string;
     text: string;
+    optional: string;
     required: string;
-}, import('tailwind-variants').TVReturnType<{
-    optional: {
-        true: {
-            text: string;
-        };
-    };
-}, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     root: string;
     text: string;
+    optional: string;
     required: string;
 }, undefined, unknown, unknown, undefined>>;
 export type LabelVariants = VariantProps<typeof labelRecipe>;

package/src/label/label.js

@@ -2,33 +2,33 @@
 import { cn as e } from "../../lib/utils.js";
 import { useLabelContext as t } from "./context.js";
 import { tv as n } from "tailwind-variants";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-label";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-label";
 //#region src/label/label.tsx
-var o = n({
-	slots: {
-		root: "flex flex-wrap gap-1 py-0.25 text-sm font-semibold text-text-input-normal",
-		text: "align-middle",
-		required: "align-middle text-text-input-destructive"
-	},
-	variants: { optional: { true: { text: "after:font-normal after:text-text-input-placeholder after:content-[\"_(optional)\"]" } } },
-	defaultVariants: { optional: !1 }
-}), s = (n) => {
-	let { className: s, children: c, optional: l = !1, required: u = !1, ...d } = t(n), f = o({ optional: l && !u });
-	return /* @__PURE__ */ i(a.Root, {
+var s = n({ slots: {
+	root: "flex flex-wrap gap-1 py-0.25 text-sm font-semibold text-text-input-normal",
+	text: "align-middle",
+	optional: "font-normal text-text-input-placeholder",
+	required: "align-middle text-text-input-destructive"
+} }), c = (n) => {
+	let { className: c, children: l, optional: u = !1, required: d = !1, ...f } = t(n), p = u && !d, m = s();
+	return /* @__PURE__ */ a(o.Root, {
 		"data-slot": "label",
-		className: e(f.root(), s),
-		...d,
-		children: [/* @__PURE__ */ r("span", {
-			className: f.text(),
-			children: c
-		}), u && /* @__PURE__ */ r("span", {
+		className: e(m.root(), c),
+		...f,
+		children: [/* @__PURE__ */ a("span", {
+			className: m.text(),
+			children: [l, p && /* @__PURE__ */ a(r, { children: [" ", /* @__PURE__ */ i("span", {
+				className: m.optional(),
+				children: "(optional)"
+			})] })]
+		}), d && /* @__PURE__ */ i("span", {
 			"aria-hidden": !0,
-			className: f.required(),
+			className: m.required(),
 			children: "*"
 		})]
 	});
 };
-s.displayName = "Label";
+c.displayName = "Label";
 //#endregion
-export { s as Label, o as labelRecipe };
+export { c as Label, s as labelRecipe };