@studiolxd/brand 49.18.0 → 49.20.0

package/dist/autocomplete-field.js

@@ -0,0 +1,58 @@
+'use client';
+import './autocomplete-field.css';
+import { Autocomplete as e } from "./autocomplete.js";
+import { n as t } from "./_shared/form-size.js";
+import { ErrorText as n } from "./error-text.js";
+import { Label as r } from "./label.js";
+import { n as i } from "./_shared/field-labels.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/stories/molecules/AutocompleteField/AutocompleteField.tsx
+var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultValue: f, onValueChange: p, onSelect: m, options: h, onSearch: g, debounceMs: _, minChars: v, placeholder: y, name: b, disabled: x, readOnly: S, size: C, required: w, maxLength: T, error: E = !1, errorMessage: D, helperText: O, className: k, container: A, onBlur: j }, M) {
+	let N = i(u), P = t(C), F = o(), I = a ?? F, L = D ? `${I}-error` : void 0, R = O ? `${I}-helper` : void 0, z = [L, R].filter(Boolean).join(" ") || void 0, B = E || !!D;
+	return /* @__PURE__ */ c("div", {
+		className: ["autocomplete-field", k].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ s(r, {
+				htmlFor: I,
+				hidden: N,
+				size: P,
+				children: l
+			}),
+			/* @__PURE__ */ s(e, {
+				ref: M,
+				id: I,
+				name: b,
+				value: d,
+				defaultValue: f,
+				onValueChange: p,
+				onSelect: m,
+				options: h,
+				onSearch: g,
+				debounceMs: _,
+				minChars: v,
+				placeholder: y,
+				disabled: x,
+				readOnly: S,
+				size: P,
+				required: w,
+				maxLength: T,
+				error: B,
+				container: A,
+				"aria-describedby": z,
+				onBlur: j
+			}),
+			D && /* @__PURE__ */ s(n, {
+				id: L,
+				children: D
+			}),
+			O && /* @__PURE__ */ s("span", {
+				id: R,
+				className: "autocomplete-field__helper",
+				children: O
+			})
+		]
+	});
+});
+//#endregion
+export { l as AutocompleteField };

package/dist/autocomplete.css

@@ -0,0 +1 @@
+.autocomplete{align-items:center;gap:var(--autocomplete-content-gap);block-size:var(--autocomplete-height);padding-block:0;padding-inline:var(--autocomplete-padding-inline);font-family:var(--autocomplete-font-family);font-size:var(--autocomplete-font-size);line-height:var(--autocomplete-line-height);font-weight:var(--autocomplete-font-weight);color:var(--autocomplete-color);background-color:var(--autocomplete-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-border-color);border-radius:var(--autocomplete-border-radius);box-sizing:border-box;width:100%;display:inline-flex}.autocomplete:focus-within{outline:var(--autocomplete-focus-ring-width) solid var(--autocomplete-focus-ring-color);outline-offset:calc(-1 * (var(--autocomplete-focus-ring-width) + var(--autocomplete-border-width)))}.autocomplete.autocomplete--disabled{opacity:.5;cursor:var(--autocomplete-disabled-cursor);pointer-events:none}.autocomplete__input{all:unset;cursor:text;min-width:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.autocomplete__input::placeholder{color:var(--autocomplete-placeholder-color)}.autocomplete__input:disabled{cursor:var(--autocomplete-disabled-cursor)}.autocomplete__content{background-color:var(--autocomplete-content-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-content-border-color);min-width:var(--anchor-width);max-height:var(--autocomplete-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.autocomplete__content[data-side=bottom]{border-top:none}.autocomplete__content[data-side=top]{border-bottom:none}.autocomplete__item{all:unset;box-sizing:border-box;width:100%;padding-block:var(--autocomplete-item-padding-block);padding-inline:var(--autocomplete-padding-inline);font-size:var(--autocomplete-font-size);font-family:var(--autocomplete-font-family);color:var(--autocomplete-color);cursor:pointer;align-items:center;display:flex}.autocomplete__item:focus-visible,.autocomplete__item:hover{background-color:var(--autocomplete-item-highlighted-bg);color:var(--autocomplete-item-highlighted-color)}.autocomplete__item.autocomplete__item--selected{font-weight:var(--autocomplete-item-selected-font-weight)}.autocomplete__item.autocomplete__item--active{background-color:var(--autocomplete-item-highlighted-bg);color:var(--autocomplete-item-highlighted-color)}.autocomplete__content .autocomplete__item+.autocomplete__item,.autocomplete__content[data-side=bottom] .autocomplete__item:first-child{border-top:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete__content[data-side=top] .autocomplete__item:last-child{border-bottom:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete.autocomplete--sm{font-size:var(--autocomplete-sm-font-size);--autocomplete-height:var(--autocomplete-sm-height);padding-inline:var(--autocomplete-sm-padding-inline)}.autocomplete__content--sm .autocomplete__item{font-size:var(--autocomplete-sm-font-size);padding-block:var(--autocomplete-sm-item-padding-block)}.autocomplete.autocomplete--lg{font-size:var(--autocomplete-lg-font-size);--autocomplete-height:var(--autocomplete-lg-height);padding-inline:var(--autocomplete-lg-padding-inline)}.autocomplete__content--lg .autocomplete__item{font-size:var(--autocomplete-lg-font-size);padding-block:var(--autocomplete-lg-item-padding-block)}.autocomplete__positioner{z-index:var(--autocomplete-content-z-index)}.autocomplete.autocomplete--error{border-color:var(--autocomplete-error-border-color)}

package/dist/autocomplete.js

@@ -0,0 +1,145 @@
+'use client';
+import './autocomplete.css';
+import { Spinner as e } from "./spinner.js";
+import { n as t } from "./_shared/portal-container.js";
+import { forwardRef as n, useCallback as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Popover as u } from "@base-ui/react/popover";
+//#region src/stories/atoms/Autocomplete/Autocomplete.tsx
+function ee(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function d(e) {
+	return e.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+}
+var f = n(function({ value: n, defaultValue: f = "", onValueChange: p, onSelect: m, options: h, onSearch: g, debounceMs: _ = 200, minChars: v = 1, placeholder: y, disabled: b, readOnly: x, size: S = "md", id: C, name: w, error: T = !1, required: E, maxLength: D, onBlur: O, className: k, "aria-label": A, "aria-describedby": j, container: M }, N) {
+	let te = t(M), [ne, re] = s(f), [ie, P] = s(!1), [ae, F] = s(!1), [I, L] = s([]), [R, z] = s(-1), B = o(null), V = o(0), H = o(null), U = o(null), W = a(), G = a(), K = n === void 0 ? ne : n, q = ie && I.length > 0, J = (e) => `${G}-opt-${e}`, Y = r((e) => {
+		let t = ++V.current;
+		if (g) {
+			F(!0), Promise.resolve().then(() => g(e)).then((e) => e, () => []).then((e) => {
+				t === V.current && (L(e), z(-1), F(!1));
+			});
+			return;
+		}
+		let n = d(e);
+		L((h ?? []).filter((e) => d(e.label).includes(n))), z(-1);
+	}, [g, h]);
+	i(() => () => {
+		V.current += 1, B.current && clearTimeout(B.current);
+	}, []);
+	function X(e) {
+		B.current && clearTimeout(B.current), g && _ > 0 ? B.current = setTimeout(() => Y(e), _) : Y(e);
+	}
+	function Z() {
+		B.current && clearTimeout(B.current), V.current += 1, F(!1), P(!1), z(-1);
+	}
+	function Q(e) {
+		n === void 0 && re(e), p?.(e);
+	}
+	function oe(e) {
+		let t = e.target.value;
+		if (Q(t), t.length < v) {
+			Z();
+			return;
+		}
+		P(!0), X(t);
+	}
+	function $(e) {
+		Q(e.label), m?.(e), Z(), L([]);
+	}
+	function se(e) {
+		b || x || (e.key === "ArrowDown" ? (e.preventDefault(), q ? z((e) => Math.min(e + 1, I.length - 1)) : (P(!0), X(K))) : e.key === "ArrowUp" ? (e.preventDefault(), q && z((e) => Math.max(e - 1, -1))) : e.key === "Enter" ? q && R >= 0 && I[R] ? (e.preventDefault(), $(I[R])) : q && Z() : e.key === "Escape" ? q && (e.preventDefault(), e.stopPropagation(), Z()) : e.key === "Tab" && Z());
+	}
+	function ce(e, t) {
+		if (!e) {
+			if (t.reason === "outside-press") {
+				let e = t.event?.target;
+				if (e instanceof Node && U.current?.contains(e)) return;
+			}
+			Z();
+		}
+	}
+	let le = [
+		"autocomplete",
+		S === "md" ? "" : `autocomplete--${S}`,
+		b ? "autocomplete--disabled" : "",
+		T ? "autocomplete--error" : "",
+		k ?? ""
+	].filter(Boolean).join(" "), ue = ["autocomplete__content", S === "md" ? "" : `autocomplete__content--${S}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l(u.Root, {
+		open: q,
+		onOpenChange: ce,
+		children: [/* @__PURE__ */ l("div", {
+			ref: U,
+			className: le,
+			"data-popup-open": q || void 0,
+			children: [/* @__PURE__ */ c("input", {
+				ref: (e) => {
+					H.current = e, ee(N, e);
+				},
+				id: C,
+				name: w,
+				type: "text",
+				className: "autocomplete__input",
+				value: K,
+				onChange: oe,
+				onKeyDown: se,
+				placeholder: y,
+				disabled: b,
+				readOnly: x,
+				required: E,
+				maxLength: D,
+				"aria-label": A,
+				"aria-describedby": j,
+				"aria-invalid": T || void 0,
+				"aria-expanded": q,
+				"aria-haspopup": "listbox",
+				"aria-controls": q ? W : void 0,
+				"aria-activedescendant": q && R >= 0 ? J(R) : void 0,
+				autoComplete: "off",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				onBlur: O
+			}), ae && /* @__PURE__ */ c(e, {
+				size: "sm",
+				"aria-hidden": !0
+			})]
+		}), /* @__PURE__ */ c(u.Portal, {
+			container: te,
+			children: /* @__PURE__ */ c(u.Positioner, {
+				className: "autocomplete__positioner",
+				anchor: U,
+				align: "start",
+				sideOffset: -1,
+				children: /* @__PURE__ */ c(u.Popup, {
+					className: ue,
+					initialFocus: !1,
+					finalFocus: !1,
+					children: /* @__PURE__ */ c("div", {
+						role: "listbox",
+						"aria-label": A ?? y,
+						id: W,
+						children: I.map((e, t) => {
+							let n = e.label === K, r = R === t;
+							return /* @__PURE__ */ c("div", {
+								id: J(t),
+								role: "option",
+								"aria-selected": r,
+								className: [
+									"autocomplete__item",
+									n ? "autocomplete__item--selected" : "",
+									r ? "autocomplete__item--active" : ""
+								].filter(Boolean).join(" "),
+								onPointerDown: (e) => e.preventDefault(),
+								onClick: () => $(e),
+								children: e.label
+							}, e.value);
+						})
+					})
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { f as Autocomplete };