@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/Rating/Rating.mjs

@@ -0,0 +1,228 @@
+import { en as e } from "../../../i18n/en.mjs";
+import { useControllableState as t } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as n } from "../../../hooks/useFormReset.mjs";
+import { useLocale as r } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as i } from "../../../utils/cx.mjs";
+import { VisuallyHidden as a } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { StarFilledIcon as o, StarIcon as s } from "../../primitives/Icon/icons.mjs";
+import { useFieldContext as ee, useFieldControl as c } from "../Field/FieldContext.mjs";
+import l from "./Rating.module.css.mjs";
+import { useId as u, useState as te } from "react";
+import { Fragment as ne, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/forms/Rating/Rating.tsx
+var p = {
+	sm: l.sm,
+	md: l.md,
+	lg: l.lg
+}, re = {
+	sm: l.displaySm,
+	md: l.displayMd,
+	lg: l.displayLg
+}, ie = {
+	neutral: l.toneNeutral,
+	primary: l.tonePrimary,
+	accent: l.toneAccent,
+	success: l.toneSuccess,
+	warning: l.toneWarning,
+	danger: l.toneDanger,
+	info: l.toneInfo
+}, m = (...e) => e.filter(Boolean).join(" ") || void 0, h = (e, t, n) => Math.min(n, Math.max(t, e));
+function g(e, t) {
+	let n = Math.round(e * 10) / 10, r = +!Number.isInteger(n);
+	return new Intl.NumberFormat(t, {
+		minimumFractionDigits: r,
+		maximumFractionDigits: r
+	}).format(n);
+}
+var _ = (t, n) => e.rating.option(g(t, "en"), n), v = (t, n) => e.rating.display(g(t, "en"), n), y = (t) => e.rating.count(t);
+function b({ fill: e, icon: t, emptyIcon: n }) {
+	let r = `${Math.round(h(e, 0, 1) * 1e3) / 10}%`;
+	return /* @__PURE__ */ f("span", {
+		className: l.icon,
+		"aria-hidden": "true",
+		"data-fill": e >= 1 ? "full" : e > 0 ? "partial" : "empty",
+		style: { "--rating-fill": r },
+		children: [/* @__PURE__ */ d("span", {
+			className: l.empty,
+			children: n
+		}), /* @__PURE__ */ d("span", {
+			className: l.filled,
+			children: t
+		})]
+	});
+}
+var x = /* @__PURE__ */ d(o, {}), S = /* @__PURE__ */ d(s, {});
+function C({ value: e, max: t = 5, size: n, tone: a = "warning", icon: o = x, emptyIcon: s = S, showValue: c = !1, count: u, formatCount: te, getLabel: ne, className: p, "aria-label": m, ..._ }) {
+	let { messages: v, locale: y } = r(), C = te ?? v.rating.count, w = ne ?? ((e, t) => v.rating.display(g(e, y), t)), T = ee(), ae = n ?? T?.size ?? "md", E = Math.max(1, Math.round(t)), D = h(Number.isFinite(e) ? e : 0, 0, E);
+	return /* @__PURE__ */ f("span", {
+		..._,
+		className: i(l.display, re[ae], ie[a], p),
+		children: [
+			/* @__PURE__ */ d("span", {
+				role: "img",
+				"aria-label": m ?? w(D, E),
+				className: l.icons,
+				children: Array.from({ length: E }, (e, t) => /* @__PURE__ */ d("span", {
+					className: l.displayCell,
+					children: /* @__PURE__ */ d(b, {
+						fill: D - t,
+						icon: o,
+						emptyIcon: s
+					})
+				}, t))
+			}),
+			c && /* @__PURE__ */ f("span", {
+				className: l.valueText,
+				"aria-hidden": "true",
+				children: [
+					g(D, y),
+					" / ",
+					E
+				]
+			}),
+			u !== void 0 && /* @__PURE__ */ d("span", {
+				className: l.count,
+				children: C(u)
+			})
+		]
+	});
+}
+function w({ value: e, defaultValue: o = null, onValueChange: s, max: re = 5, precision: _ = 1, allowZero: v = !1, allowClear: y = !1, clearHint: w, hoverPreview: T = !0, size: ae, tone: E = "warning", icon: D = x, emptyIcon: oe = S, showValue: se = !1, disabled: ce, readOnly: le, invalid: ue, required: de, name: O, getLabel: fe, getReadOnlyLabel: pe, unratedLabel: me, label: k, description: A, className: he, id: ge, onKeyDown: _e, onPointerLeave: ve, "aria-describedby": j, "aria-labelledby": M, ...ye }) {
+	let { messages: N, locale: P } = r(), be = w ?? N.rating.clearHint, xe = fe ?? ((e, t) => N.rating.option(g(e, P), t)), Se = pe ?? ((e, t) => N.rating.display(g(e, P), t)), Ce = me ?? N.rating.unrated, F = ee(), I = u(), L = `${I}-label`, R = `${I}-description`, z = `${I}-clear`, B = F !== null, V = !B && k != null, H = A != null, U = c({
+		id: ge,
+		invalid: ue,
+		required: de,
+		disabled: ce,
+		readOnly: le,
+		size: ae,
+		"aria-describedby": m(H && R, j)
+	}), [W, G] = t({
+		value: e,
+		defaultValue: o,
+		onChange: s
+	});
+	n(() => U.id ? document.getElementById(U.id) : null, () => G(o ?? null), e === void 0);
+	let [K, we] = te(null), Te = U.size ?? "md", q = Math.max(1, Math.round(re)), J = _ === .5 ? .5 : 1, Ee = O ?? `rating-${I}`, De = !U.disabled && !U.readOnly, Y = y && De, X = W === null || !Number.isFinite(W) ? null : W < J / 2 ? v ? 0 : null : h(Math.round(W / J) * J, J, q), Z = T && De && K !== null, Oe = Z ? K : X ?? 0, Q = F?.isGroup === !0 && M === void 0, ke = M ?? (B ? F.labelId : V ? L : void 0), Ae = U.readOnly ? "group" : "radiogroup", je = Q ? { "aria-describedby": m(H && R, j) } : {
+		role: Ae,
+		"aria-labelledby": ke,
+		...U.ariaProps,
+		"aria-disabled": U.disabled || void 0,
+		"aria-required": U.required && !U.readOnly || void 0
+	}, Me = (e) => {
+		_e?.(e), !e.defaultPrevented && Y && (e.key === "Delete" || e.key === "Backspace") && e.target instanceof HTMLInputElement && (e.preventDefault(), G(null));
+	}, Ne = (e) => {
+		ve?.(e), we(null);
+	}, Pe = [];
+	for (let e = J; e <= q + 1e-9; e += J) Pe.push(Math.round(e * 10) / 10);
+	let $ = (e, t) => {
+		let n = X === e;
+		return /* @__PURE__ */ f("span", {
+			className: i(l.hit, l[t]),
+			children: [/* @__PURE__ */ d("input", {
+				type: "radio",
+				className: l.input,
+				name: Ee,
+				value: String(e),
+				checked: n,
+				disabled: U.disabled,
+				required: U.required,
+				"aria-label": xe(e, q),
+				"aria-describedby": Y ? z : void 0,
+				"aria-invalid": Q && U.invalid ? !0 : void 0,
+				onChange: (t) => {
+					t.target.checked && G(e);
+				},
+				onClick: (e) => {
+					Y && n && G(null);
+				},
+				onPointerEnter: (t) => {
+					T && t.pointerType !== "touch" && we(e);
+				}
+			}), /* @__PURE__ */ d("span", {
+				className: l.focusBox,
+				"aria-hidden": "true"
+			})]
+		}, e);
+	}, Fe = Z && K !== null ? Math.ceil(K) - 1 : -1;
+	return /* @__PURE__ */ f("div", {
+		id: U.id,
+		...je,
+		...ye,
+		"data-disabled": U.disabled || void 0,
+		"data-invalid": U.invalid || void 0,
+		"data-readonly": U.readOnly || void 0,
+		"data-precision": J === .5 ? "half" : "whole",
+		"data-previewing": Z || void 0,
+		className: i(l.rating, p[Te], ie[E], he),
+		onKeyDown: Me,
+		onPointerLeave: Ne,
+		children: [
+			(V || H) && /* @__PURE__ */ f("div", {
+				className: l.header,
+				children: [V && /* @__PURE__ */ f("span", {
+					id: L,
+					className: l.label,
+					children: [k, U.required && !U.readOnly && /* @__PURE__ */ f("span", {
+						className: l.requiredMark,
+						"aria-hidden": "true",
+						children: [" ", "*"]
+					})]
+				}), H && /* @__PURE__ */ d("span", {
+					id: R,
+					className: l.description,
+					children: A
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: l.row,
+				children: [U.readOnly ? /* @__PURE__ */ f(ne, { children: [/* @__PURE__ */ d(C, {
+					value: X ?? 0,
+					max: q,
+					size: Te,
+					tone: E,
+					icon: D,
+					emptyIcon: oe,
+					getLabel: Se,
+					"aria-label": X === null ? Ce : void 0
+				}), O !== void 0 && X !== null && /* @__PURE__ */ d("input", {
+					type: "hidden",
+					name: O,
+					value: String(X)
+				})] }) : /* @__PURE__ */ f("div", {
+					className: l.icons,
+					children: [v && /* @__PURE__ */ f("span", {
+						className: i(l.cell, l.zeroCell),
+						"data-hovered": Z && K === 0 ? !0 : void 0,
+						children: [/* @__PURE__ */ d("span", {
+							className: l.zeroMark,
+							"aria-hidden": "true",
+							children: "0"
+						}), $(0, "whole")]
+					}), Array.from({ length: q }, (e, t) => /* @__PURE__ */ f("span", {
+						className: l.cell,
+						"data-hovered": t === Fe || void 0,
+						children: [/* @__PURE__ */ d(b, {
+							fill: Oe - t,
+							icon: D,
+							emptyIcon: oe
+						}), J === .5 ? [$(t + .5, "start"), $(t + 1, "end")] : $(t + 1, "whole")]
+					}, t))]
+				}), se && /* @__PURE__ */ f("span", {
+					className: l.valueText,
+					"aria-hidden": "true",
+					children: [
+						X === null ? "–" : g(X, P),
+						" / ",
+						q
+					]
+				})]
+			}),
+			Y && /* @__PURE__ */ d(a, {
+				id: z,
+				children: be
+			})
+		]
+	});
+}
+//#endregion
+export { w as Rating, C as RatingDisplay, y as defaultRatingCountText, v as defaultRatingDisplayLabel, _ as defaultRatingOptionLabel, g as formatRatingValue };

package/dist/components/forms/Rating/Rating.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_sm_ot4i7_19`,t=`_md_ot4i7_23`,n=`_lg_ot4i7_27`,r=`_displaySm_ot4i7_33`,i=`_displayMd_ot4i7_37`,a=`_displayLg_ot4i7_41`,o=`_toneNeutral_ot4i7_47`,s=`_tonePrimary_ot4i7_50`,c=`_toneAccent_ot4i7_53`,l=`_toneSuccess_ot4i7_56`,u=`_toneWarning_ot4i7_59`,d=`_toneDanger_ot4i7_62`,f=`_toneInfo_ot4i7_65`,p=`_icon_ot4i7_73`,m=`_empty_ot4i7_82`,h=`_filled_ot4i7_83`,g=`_display_ot4i7_33`,_=`_icons_ot4i7_126`,v=`_displayCell_ot4i7_135`,y=`_valueText_ot4i7_139`,b=`_count_ot4i7_149`,x=`_rating_ot4i7_159`,S=`_header_ot4i7_173`,C=`_label_ot4i7_179`,w=`_requiredMark_ot4i7_187`,T=`_description_ot4i7_191`,E=`_row_ot4i7_197`,D=`_cell_ot4i7_207`,O=`_zeroCell_ot4i7_223`,k=`_zeroMark_ot4i7_228`,A=`_input_ot4i7_244`,j=`_pop_ot4i7_1`,M=`_hit_ot4i7_265`,N=`_whole_ot4i7_270`,P=`_start_ot4i7_273`,F=`_end_ot4i7_277`,I=`_focusBox_ot4i7_294`,L={sm:e,md:t,lg:n,displaySm:r,displayMd:i,displayLg:a,toneNeutral:o,tonePrimary:s,toneAccent:c,toneSuccess:l,toneWarning:u,toneDanger:d,toneInfo:f,icon:p,empty:m,filled:h,display:g,icons:_,displayCell:v,valueText:y,count:b,rating:x,header:S,label:C,requiredMark:w,description:T,row:E,cell:D,zeroCell:O,zeroMark:k,input:A,pop:j,hit:M,whole:N,start:P,end:F,focusBox:I};exports.cell=D,exports.count=b,exports.default=L,exports.description=T,exports.display=g,exports.displayCell=v,exports.displayLg=a,exports.displayMd=i,exports.displaySm=r,exports.empty=m,exports.end=F,exports.filled=h,exports.focusBox=I,exports.header=S,exports.hit=M,exports.icon=p,exports.icons=_,exports.input=A,exports.label=C,exports.lg=n,exports.md=t,exports.pop=j,exports.rating=x,exports.requiredMark=w,exports.row=E,exports.sm=e,exports.start=P,exports.toneAccent=c,exports.toneDanger=d,exports.toneInfo=f,exports.toneNeutral=o,exports.tonePrimary=s,exports.toneSuccess=l,exports.toneWarning=u,exports.valueText=y,exports.whole=N,exports.zeroCell=O,exports.zeroMark=k;

package/dist/components/forms/Rating/Rating.module.css.mjs

@@ -0,0 +1,42 @@
+//#region src/components/forms/Rating/Rating.module.css
+var e = "_sm_ot4i7_19", t = "_md_ot4i7_23", n = "_lg_ot4i7_27", r = "_displaySm_ot4i7_33", i = "_displayMd_ot4i7_37", a = "_displayLg_ot4i7_41", o = "_toneNeutral_ot4i7_47", s = "_tonePrimary_ot4i7_50", c = "_toneAccent_ot4i7_53", l = "_toneSuccess_ot4i7_56", u = "_toneWarning_ot4i7_59", d = "_toneDanger_ot4i7_62", f = "_toneInfo_ot4i7_65", p = "_icon_ot4i7_73", m = "_empty_ot4i7_82", h = "_filled_ot4i7_83", g = "_display_ot4i7_33", _ = "_icons_ot4i7_126", v = "_displayCell_ot4i7_135", y = "_valueText_ot4i7_139", b = "_count_ot4i7_149", x = "_rating_ot4i7_159", S = "_header_ot4i7_173", C = "_label_ot4i7_179", w = "_requiredMark_ot4i7_187", T = "_description_ot4i7_191", E = "_row_ot4i7_197", D = "_cell_ot4i7_207", O = "_zeroCell_ot4i7_223", k = "_zeroMark_ot4i7_228", A = "_input_ot4i7_244", j = "_pop_ot4i7_1", M = "_hit_ot4i7_265", N = "_whole_ot4i7_270", P = "_start_ot4i7_273", F = "_end_ot4i7_277", I = "_focusBox_ot4i7_294", L = {
+	sm: e,
+	md: t,
+	lg: n,
+	displaySm: r,
+	displayMd: i,
+	displayLg: a,
+	toneNeutral: o,
+	tonePrimary: s,
+	toneAccent: c,
+	toneSuccess: l,
+	toneWarning: u,
+	toneDanger: d,
+	toneInfo: f,
+	icon: p,
+	empty: m,
+	filled: h,
+	display: g,
+	icons: _,
+	displayCell: v,
+	valueText: y,
+	count: b,
+	rating: x,
+	header: S,
+	label: C,
+	requiredMark: w,
+	description: T,
+	row: E,
+	cell: D,
+	zeroCell: O,
+	zeroMark: k,
+	input: A,
+	pop: j,
+	hit: M,
+	whole: N,
+	start: P,
+	end: F,
+	focusBox: I
+};
+//#endregion
+export { D as cell, b as count, L as default, T as description, g as display, v as displayCell, a as displayLg, i as displayMd, r as displaySm, m as empty, F as end, h as filled, I as focusBox, S as header, M as hit, p as icon, _ as icons, A as input, C as label, n as lg, t as md, j as pop, x as rating, w as requiredMark, E as row, e as sm, P as start, c as toneAccent, d as toneDanger, f as toneInfo, o as toneNeutral, s as tonePrimary, l as toneSuccess, u as toneWarning, y as valueText, N as whole, O as zeroCell, k as zeroMark };

package/dist/components/forms/Rating/index.d.ts

@@ -0,0 +1 @@
+export * from './Rating';

package/dist/components/forms/SearchInput/SearchInput.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../i18n/en.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../../hooks/useFormReset.cjs.js"),r=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),i=require("../../../utils/refs.cjs.js"),a=require("../../../utils/cx.cjs.js"),o=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),s=require("../../primitives/Icon/icons.cjs.js"),c=require("../../primitives/Kbd/Kbd.cjs.js"),ee=require("../Field/FieldContext.cjs.js"),te=require("../Input/Input.cjs.js"),l=require("./SearchInput.module.css.cjs.js");let u=require("react"),d=require("react/jsx-runtime");function ne(e,t){let n=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`)?.set;n?n.call(e,t):e.value=t,e.dispatchEvent(new Event(`input`,{bubbles:!0}))}var f=new Set([`checkbox`,`radio`,`button`,`submit`,`reset`,`range`,`color`,`file`,`image`]);function re(e){return e instanceof HTMLElement?e.isContentEditable||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?!0:e instanceof HTMLInputElement&&!f.has(e.type):!1}function p(e,t){let n={meta:!1,ctrl:!1,alt:!1,shift:!1,key:``};for(let r of e){let e=r.toLowerCase();e===`mod`?t===`mac`?n.meta=!0:n.ctrl=!0:e===`cmd`||e===`meta`?n.meta=!0:e===`ctrl`?n.ctrl=!0:e===`alt`||e===`option`?n.alt=!0:e===`shift`?n.shift=!0:n.key=e===`esc`?`escape`:e===`space`?` `:e}return n.key?n:null}function ie(e,t){if(e.metaKey!==t.meta||e.ctrlKey!==t.ctrl||e.altKey!==t.alt)return!1;let n=/^[a-z]$/.test(t.key);return(t.shift||n)&&e.shiftKey!==t.shift?!1:e.key.toLowerCase()===t.key?!0:n?e.code===`Key${t.key.toUpperCase()}`:/^[0-9]$/.test(t.key)?e.code===`Digit${t.key}`:!1}function ae(e){let t=[];e.ctrl&&t.push(`Control`),e.meta&&t.push(`Meta`),e.alt&&t.push(`Alt`),e.shift&&t.push(`Shift`);let n=e.key===` `?`Space`:e.key===`escape`?`Escape`:e.key;return t.push(n.length===1?n.toUpperCase():n[0].toUpperCase()+n.slice(1)),t.join(`+`)}function m(t){return e.en.searchInput.results(t)}var h=(0,u.createContext)(null),g=({value:e,defaultValue:f=``,onValueChange:m,onSearch:g,debounce:_,minLength:oe=0,onClear:v,clearable:se=!0,clearLabel:ce,blurOnEscape:le=!0,shortcut:y,shortcutEnabled:ue=!0,shortcutPlatform:de,resultsCount:b,resultsLabel:fe,announceDelay:x=700,radius:pe=`pill`,size:S,loading:C=!1,startIcon:w,endIcon:T,endElement:me,inputClassName:he,autoComplete:ge=`off`,enterKeyHint:_e=`search`,disabled:E,readOnly:D,ref:O,onChange:ve,onKeyDown:ye,onFocus:be,onBlur:xe,"aria-label":k,"aria-labelledby":A,"aria-keyshortcuts":Se,...Ce})=>{let j=r.useMessages(),we=ce??j.searchInput.clear,M=fe??j.searchInput.results,[N,P]=t.useControllableState({value:e,defaultValue:f,onChange:m});n.useFormReset(()=>R.current,()=>P(f??``),e===void 0);let F=ee.useFieldContext(),I=(0,u.useContext)(h),L=c.useKbdPlatform(de),R=(0,u.useRef)(null),Te=(0,u.useCallback)(e=>{R.current=e,i.assignRef(O,e)},[O]),Ee=E??F?.disabled??!1,De=D??F?.readOnly??!1,Oe=S??F?.size??`md`,z=(0,u.useRef)(g);z.current=g;let B=(0,u.useRef)(null),V=(0,u.useRef)(e??f),[H,U]=(0,u.useState)(0),W=()=>{B.current!=null&&clearTimeout(B.current),B.current=null};(0,u.useEffect)(()=>W,[]);let G=e=>{W(),V.current=e,U(e=>e+1),z.current?.(e)},ke=e=>{if(_!=null&&(W(),e!==V.current)){if(e===``){G(``);return}e.trim().length<oe||(B.current=setTimeout(()=>{B.current=null,e!==V.current&&G(e)},_))}},K=(0,u.useRef)(N);K.current=N;let q=(0,u.useRef)(G);q.current=G,(0,u.useEffect)(()=>{if(!I)return;let e={search:()=>(q.current(K.current),K.current)};return I.current=e,()=>{I.current===e&&(I.current=null)}},[I]);let J=(0,u.useRef)(!1),Ae=e=>{ve?.(e);let t=e.target.value;P(t),U(e=>e+1),J.current||ke(t)},je=()=>{let e=R.current;if(e){J.current=!0;try{ne(e,``)}finally{J.current=!1}W(),_!=null&&V.current!==``&&G(``),v?.()}},Me=()=>{W(),v?.()},Ne=e=>{if(ye?.(e),!(e.defaultPrevented||e.nativeEvent.isComposing)){if(e.key===`Enter`){let t=e.currentTarget.form;I&&t?(e.preventDefault(),typeof t.requestSubmit==`function`?t.requestSubmit():G(N)):(t&&g&&e.preventDefault(),G(N));return}e.key===`Escape`&&(N!==``&&!De?(e.preventDefault(),e.stopPropagation(),je()):le&&e.currentTarget.blur())}},[Pe,Y]=(0,u.useState)(!1),Fe=e=>{Y(!0),be?.(e)},Ie=e=>{Y(!1),xe?.(e)},Le=y?.join(`+`)??``,X=y?p(y,L):null,Z=X!=null&&ue&&!Ee;(0,u.useEffect)(()=>{if(!Z||!y)return;let e=p(y,L);if(!e)return;let t=t=>{if(t.defaultPrevented||t.isComposing)return;let n=R.current;n&&!n.disabled&&(t.target!==n&&re(t.target)||ie(t,e)&&n.getClientRects().length!==0&&(t.preventDefault(),n.focus(),n.select()))};return document.addEventListener(`keydown`,t),()=>document.removeEventListener(`keydown`,t)},[Z,Le,L]);let[Re,ze]=(0,u.useState)(!1);(0,u.useEffect)(()=>{let e=(R.current?.labels?.length??0)>0;ze(t=>t===e?t:e)});let Be=!k&&!A&&!F&&!Re,[Ve,Q]=(0,u.useState)(``),He=(0,u.useRef)(M);He.current=M,(0,u.useEffect)(()=>{if(b==null||C||H===0)return;Q(``);let e=setTimeout(()=>Q(He.current(b)),x);return()=>clearTimeout(e)},[b,C,H,x]);let $=Z&&!Pe&&N===``&&!C&&y!=null?(0,d.jsx)(c.KbdShortcut,{keys:y,size:Oe===`lg`?`md`:`sm`,platform:L,className:l.default.hint}):null,Ue=$||T!=null?(0,d.jsxs)(d.Fragment,{children:[$,T]}):void 0;return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(te.Input,{...Ce,ref:Te,type:`search`,value:N,size:S,radius:pe,loading:C,disabled:E,readOnly:D,autoComplete:ge,enterKeyHint:_e,"aria-label":k??(Be?j.searchInput.search:void 0),"aria-labelledby":A,"aria-keyshortcuts":Se??(Z&&X?ae(X):void 0),startIcon:w===void 0?(0,d.jsx)(s.SearchIcon,{}):w,endIcon:Ue,endElement:me,clearable:se,clearLabel:we,onClear:Me,inputClassName:a.cx(l.default.input,he),onChange:Ae,onKeyDown:Ne,onFocus:Fe,onBlur:Ie}),(0,d.jsx)(o.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:Ve})]})};function _({onSearch:e,onSubmit:t,className:n,children:r,noValidate:i=!0,...o}){let s=(0,u.useRef)(null),c=n=>{t?.(n),n.preventDefault();let r;r=s.current?s.current.search():n.currentTarget.querySelector(`input[type="search"]`)?.value??``,e?.(r,n)};return(0,d.jsx)(h.Provider,{value:s,children:(0,d.jsx)(`form`,{...o,role:`search`,noValidate:i,className:a.cx(l.default.form,n),onSubmit:c,children:r})})}exports.SearchForm=_,exports.SearchInput=g,exports.defaultResultsLabel=m;

package/dist/components/forms/SearchInput/SearchInput.d.ts

@@ -0,0 +1,124 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { KbdKeyToken, KbdPlatform } from '../../primitives/Kbd';
+import { InputProps } from '../Input';
+/** A key in a `shortcut` chord: a platform token (`"mod"`, `"shift"`, ...) or a literal key (`"k"`, `"/"`). */
+export type SearchShortcutKey = KbdKeyToken | (string & {});
+export interface SearchInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "onValueChange" | "minLength"> {
+    /** Controlled query. Pair with `onValueChange`. */
+    value?: string;
+    /** Initial query when uncontrolled. @default "" */
+    defaultValue?: string;
+    /** Called with the new query on every edit (typing, pasting, clearing). Fires immediately, never debounced. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Called with the query when a search should run:
+     * - on Enter (always, even for an empty or short query; inside a plain
+     *   `<form>` this replaces the native submit, so use `SearchForm` to submit),
+     * - when `debounce` is set, after typing pauses for that many ms,
+     * - on submit of a surrounding `SearchForm`.
+     */
+    onSearch?: (query: string) => void;
+    /**
+     * Milliseconds of idle typing before `onSearch` fires automatically. Leave
+     * unset to search only on Enter. When set, emptying the field fires
+     * `onSearch("")` immediately so results can reset, and a query identical to
+     * the last debounced one is not re-sent.
+     */
+    debounce?: number;
+    /**
+     * Minimum trimmed length before a *debounced* search fires. Enter always
+     * searches. Not forwarded as the native `minlength` attribute. @default 0
+     */
+    minLength?: number;
+    /** Called after the user clears the field with the clear button or Escape. */
+    onClear?: () => void;
+    /** Shows a clear button while the field has a value. @default true */
+    clearable?: boolean;
+    /** Accessible name of the clear button. @default "Clear search" */
+    clearLabel?: string;
+    /**
+     * When Escape is pressed in an already-empty field, blur it. The Escape
+     * event always bubbles in that case (so a surrounding dialog can close);
+     * when the field has a value, Escape only clears it and stops there.
+     * @default true
+     */
+    blurOnEscape?: boolean;
+    /**
+     * A global keyboard chord that focuses the field, e.g. `["mod", "k"]`
+     * (Cmd+K on Mac, Ctrl+K elsewhere) or `["/"]`. Shows a key hint at the end
+     * while the field is empty and unfocused, and sets `aria-keyshortcuts`.
+     * Ignored while the user is typing in another text field.
+     */
+    shortcut?: SearchShortcutKey[];
+    /** Turns the global `shortcut` listener (and hint) on or off. @default true */
+    shortcutEnabled?: boolean;
+    /** Force the platform used for the shortcut hint and `mod` matching. Detected by default. */
+    shortcutPlatform?: KbdPlatform;
+    /**
+     * Number of results for the current query. When set, a polite live region
+     * announces `resultsLabel(resultsCount)` after the user searches or edits,
+     * once the count has been stable for `announceDelay` ms and `loading` is
+     * false. Nothing is announced before the first edit or search.
+     */
+    resultsCount?: number;
+    /** Builds the results announcement. @default "No results" / "1 result" / "N results" */
+    resultsLabel?: (count: number) => string;
+    /** Quiet period (ms) before announcing `resultsCount`, to avoid chatter while typing. @default 700 */
+    announceDelay?: number;
+    /** Corner rounding. @default "pill" */
+    radius?: InputProps["radius"];
+    /** Ref to the `<input>` element. */
+    ref?: Ref<HTMLInputElement>;
+}
+/** Default results announcement. */
+export declare function defaultResultsLabel(count: number): string;
+/** The submit event React passes to a form's `onSubmit`. */
+export type FormSubmitEvent = Parameters<NonNullable<ComponentPropsWithRef<"form">["onSubmit"]>>[0];
+/**
+ * A search field built on `Input`: `type="search"`, a search icon, a clear
+ * button, and pill rounding by default. Fires `onSearch` on Enter and,
+ * optionally, after a typing pause (`debounce`). Escape clears the field.
+ * An optional global `shortcut` (e.g. Cmd/Ctrl+K) focuses it, and
+ * `resultsCount` announces result counts politely.
+ *
+ * **Accessible name:** label it with a `Field`, a `<label htmlFor>`,
+ * `aria-label`, or `aria-labelledby`. If none of these is present,
+ * `aria-label="Search"` is applied as a fallback. The placeholder is never
+ * used as the name.
+ *
+ * **Landmark:** wrap it in `SearchForm` to get a `<form role="search">`
+ * landmark; Enter then submits the form, which calls both callbacks.
+ *
+ * ```tsx
+ * <SearchInput aria-label="Search players" debounce={300} onSearch={runSearch} shortcut={["mod", "k"]} />
+ * ```
+ */
+export declare const SearchInput: ({ value: valueProp, defaultValue, onValueChange, onSearch, debounce, minLength, onClear, clearable, clearLabel: clearLabelProp, blurOnEscape, shortcut, shortcutEnabled, shortcutPlatform, resultsCount, resultsLabel: resultsLabelProp, announceDelay, radius, size, loading, startIcon, endIcon, endElement, inputClassName, autoComplete, enterKeyHint, disabled, readOnly, ref, onChange, onKeyDown, onFocus, onBlur, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-keyshortcuts": ariaKeyShortcuts, ...rest }: SearchInputProps) => import("react").JSX.Element;
+type SearchFormName = {
+    /** Accessible name of the search landmark, e.g. "Site search". */
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    "aria-label"?: string;
+    /** id of a visible heading or label naming the landmark. */
+    "aria-labelledby": string;
+};
+/** Props for `SearchForm`. One of `aria-label` or `aria-labelledby` is required. */
+export type SearchFormProps = Omit<ComponentPropsWithRef<"form">, "role" | "aria-label" | "aria-labelledby"> & SearchFormName & {
+    /**
+     * Called on submit (Enter in the SearchInput, or a submit button) with
+     * the SearchInput's query. The native submit is always prevented.
+     */
+    onSearch?: (query: string, event: FormSubmitEvent) => void;
+    /** The SearchInput plus any filters or a submit button. */
+    children?: ReactNode;
+};
+/**
+ * A `<form role="search">` landmark around a `SearchInput`, so screen reader
+ * users can jump straight to search. Give it an accessible name, especially
+ * when a page has more than one search landmark. Submitting prevents the
+ * page navigation and calls both the form's `onSearch` and the input's
+ * `onSearch` with the current query. Use one SearchInput per SearchForm.
+ */
+export declare function SearchForm({ onSearch, onSubmit, className, children, noValidate, ...rest }: SearchFormProps): import("react").JSX.Element;
+export {};

package/dist/components/forms/SearchInput/SearchInput.mjs

@@ -0,0 +1,220 @@
+import { en as e } from "../../../i18n/en.mjs";
+import { useControllableState as t } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as n } from "../../../hooks/useFormReset.mjs";
+import { useMessages as r } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { assignRef as i } from "../../../utils/refs.mjs";
+import { cx as ee } from "../../../utils/cx.mjs";
+import { VisuallyHidden as a } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { SearchIcon as o } from "../../primitives/Icon/icons.mjs";
+import { KbdShortcut as s, useKbdPlatform as te } from "../../primitives/Kbd/Kbd.mjs";
+import { useFieldContext as ne } from "../Field/FieldContext.mjs";
+import { Input as re } from "../Input/Input.mjs";
+import c from "./SearchInput.module.css.mjs";
+import { createContext as l, useCallback as ie, useContext as ae, useEffect as u, useRef as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/forms/SearchInput/SearchInput.tsx
+function oe(e, t) {
+	let n = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+	n ? n.call(e, t) : e.value = t, e.dispatchEvent(new Event("input", { bubbles: !0 }));
+}
+var g = /* @__PURE__ */ new Set([
+	"checkbox",
+	"radio",
+	"button",
+	"submit",
+	"reset",
+	"range",
+	"color",
+	"file",
+	"image"
+]);
+function se(e) {
+	return e instanceof HTMLElement ? e.isContentEditable || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement ? !0 : e instanceof HTMLInputElement && !g.has(e.type) : !1;
+}
+function _(e, t) {
+	let n = {
+		meta: !1,
+		ctrl: !1,
+		alt: !1,
+		shift: !1,
+		key: ""
+	};
+	for (let r of e) {
+		let e = r.toLowerCase();
+		e === "mod" ? t === "mac" ? n.meta = !0 : n.ctrl = !0 : e === "cmd" || e === "meta" ? n.meta = !0 : e === "ctrl" ? n.ctrl = !0 : e === "alt" || e === "option" ? n.alt = !0 : e === "shift" ? n.shift = !0 : n.key = e === "esc" ? "escape" : e === "space" ? " " : e;
+	}
+	return n.key ? n : null;
+}
+function ce(e, t) {
+	if (e.metaKey !== t.meta || e.ctrlKey !== t.ctrl || e.altKey !== t.alt) return !1;
+	let n = /^[a-z]$/.test(t.key);
+	return (t.shift || n) && e.shiftKey !== t.shift ? !1 : e.key.toLowerCase() === t.key ? !0 : n ? e.code === `Key${t.key.toUpperCase()}` : /^[0-9]$/.test(t.key) ? e.code === `Digit${t.key}` : !1;
+}
+function le(e) {
+	let t = [];
+	e.ctrl && t.push("Control"), e.meta && t.push("Meta"), e.alt && t.push("Alt"), e.shift && t.push("Shift");
+	let n = e.key === " " ? "Space" : e.key === "escape" ? "Escape" : e.key;
+	return t.push(n.length === 1 ? n.toUpperCase() : n[0].toUpperCase() + n.slice(1)), t.join("+");
+}
+function v(t) {
+	return e.searchInput.results(t);
+}
+var ue = l(null), y = ({ value: e, defaultValue: l = "", onValueChange: g, onSearch: v, debounce: y, minLength: b = 0, onClear: x, clearable: de = !0, clearLabel: fe, blurOnEscape: pe = !0, shortcut: S, shortcutEnabled: me = !0, shortcutPlatform: he, resultsCount: C, resultsLabel: ge, announceDelay: w = 700, radius: _e = "pill", size: T, loading: E = !1, startIcon: D, endIcon: O, endElement: ve, inputClassName: ye, autoComplete: be = "off", enterKeyHint: xe = "search", disabled: k, readOnly: A, ref: j, onChange: Se, onKeyDown: Ce, onFocus: we, onBlur: Te, "aria-label": M, "aria-labelledby": N, "aria-keyshortcuts": Ee, ...De }) => {
+	let P = r(), Oe = fe ?? P.searchInput.clear, F = ge ?? P.searchInput.results, [I, L] = t({
+		value: e,
+		defaultValue: l,
+		onChange: g
+	});
+	n(() => V.current, () => L(l ?? ""), e === void 0);
+	let R = ne(), z = ae(ue), B = te(he), V = d(null), ke = ie((e) => {
+		V.current = e, i(j, e);
+	}, [j]), Ae = k ?? R?.disabled ?? !1, je = A ?? R?.readOnly ?? !1, Me = T ?? R?.size ?? "md", H = d(v);
+	H.current = v;
+	let U = d(null), W = d(e ?? l), [G, K] = f(0), q = () => {
+		U.current != null && clearTimeout(U.current), U.current = null;
+	};
+	u(() => q, []);
+	let J = (e) => {
+		q(), W.current = e, K((e) => e + 1), H.current?.(e);
+	}, Ne = (e) => {
+		if (y != null && (q(), e !== W.current)) {
+			if (e === "") {
+				J("");
+				return;
+			}
+			e.trim().length < b || (U.current = setTimeout(() => {
+				U.current = null, e !== W.current && J(e);
+			}, y));
+		}
+	}, Y = d(I);
+	Y.current = I;
+	let Pe = d(J);
+	Pe.current = J, u(() => {
+		if (!z) return;
+		let e = { search: () => (Pe.current(Y.current), Y.current) };
+		return z.current = e, () => {
+			z.current === e && (z.current = null);
+		};
+	}, [z]);
+	let X = d(!1), Fe = (e) => {
+		Se?.(e);
+		let t = e.target.value;
+		L(t), K((e) => e + 1), X.current || Ne(t);
+	}, Ie = () => {
+		let e = V.current;
+		if (e) {
+			X.current = !0;
+			try {
+				oe(e, "");
+			} finally {
+				X.current = !1;
+			}
+			q(), y != null && W.current !== "" && J(""), x?.();
+		}
+	}, Le = () => {
+		q(), x?.();
+	}, Re = (e) => {
+		if (Ce?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing)) {
+			if (e.key === "Enter") {
+				let t = e.currentTarget.form;
+				z && t ? (e.preventDefault(), typeof t.requestSubmit == "function" ? t.requestSubmit() : J(I)) : (t && v && e.preventDefault(), J(I));
+				return;
+			}
+			e.key === "Escape" && (I !== "" && !je ? (e.preventDefault(), e.stopPropagation(), Ie()) : pe && e.currentTarget.blur());
+		}
+	}, [ze, Z] = f(!1), Be = (e) => {
+		Z(!0), we?.(e);
+	}, Ve = (e) => {
+		Z(!1), Te?.(e);
+	}, He = S?.join("+") ?? "", Q = S ? _(S, B) : null, $ = Q != null && me && !Ae;
+	u(() => {
+		if (!$ || !S) return;
+		let e = _(S, B);
+		if (!e) return;
+		let t = (t) => {
+			if (t.defaultPrevented || t.isComposing) return;
+			let n = V.current;
+			n && !n.disabled && (t.target !== n && se(t.target) || ce(t, e) && n.getClientRects().length !== 0 && (t.preventDefault(), n.focus(), n.select()));
+		};
+		return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+	}, [
+		$,
+		He,
+		B
+	]);
+	let [Ue, We] = f(!1);
+	u(() => {
+		let e = (V.current?.labels?.length ?? 0) > 0;
+		We((t) => t === e ? t : e);
+	});
+	let Ge = !M && !N && !R && !Ue, [Ke, qe] = f(""), Je = d(F);
+	Je.current = F, u(() => {
+		if (C == null || E || G === 0) return;
+		qe("");
+		let e = setTimeout(() => qe(Je.current(C)), w);
+		return () => clearTimeout(e);
+	}, [
+		C,
+		E,
+		G,
+		w
+	]);
+	let Ye = $ && !ze && I === "" && !E && S != null ? /* @__PURE__ */ m(s, {
+		keys: S,
+		size: Me === "lg" ? "md" : "sm",
+		platform: B,
+		className: c.hint
+	}) : null, Xe = Ye || O != null ? /* @__PURE__ */ h(p, { children: [Ye, O] }) : void 0;
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(re, {
+		...De,
+		ref: ke,
+		type: "search",
+		value: I,
+		size: T,
+		radius: _e,
+		loading: E,
+		disabled: k,
+		readOnly: A,
+		autoComplete: be,
+		enterKeyHint: xe,
+		"aria-label": M ?? (Ge ? P.searchInput.search : void 0),
+		"aria-labelledby": N,
+		"aria-keyshortcuts": Ee ?? ($ && Q ? le(Q) : void 0),
+		startIcon: D === void 0 ? /* @__PURE__ */ m(o, {}) : D,
+		endIcon: Xe,
+		endElement: ve,
+		clearable: de,
+		clearLabel: Oe,
+		onClear: Le,
+		inputClassName: ee(c.input, ye),
+		onChange: Fe,
+		onKeyDown: Re,
+		onFocus: Be,
+		onBlur: Ve
+	}), /* @__PURE__ */ m(a, {
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		children: Ke
+	})] });
+};
+function b({ onSearch: e, onSubmit: t, className: n, children: r, noValidate: i = !0, ...a }) {
+	let o = d(null), s = (n) => {
+		t?.(n), n.preventDefault();
+		let r;
+		r = o.current ? o.current.search() : n.currentTarget.querySelector("input[type=\"search\"]")?.value ?? "", e?.(r, n);
+	};
+	return /* @__PURE__ */ m(ue.Provider, {
+		value: o,
+		children: /* @__PURE__ */ m("form", {
+			...a,
+			role: "search",
+			noValidate: i,
+			className: ee(c.form, n),
+			onSubmit: s,
+			children: r
+		})
+	});
+}
+//#endregion
+export { b as SearchForm, y as SearchInput, v as defaultResultsLabel };

package/dist/components/forms/SearchInput/SearchInput.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_input_1v7cb_15`,t=`_hint_1v7cb_27`,n=`_form_1v7cb_39`,r={input:e,hint:t,form:n};exports.default=r,exports.form=n,exports.hint=t,exports.input=e;

package/dist/components/forms/SearchInput/SearchInput.module.css.mjs

@@ -0,0 +1,8 @@
+//#region src/components/forms/SearchInput/SearchInput.module.css
+var e = "_input_1v7cb_15", t = "_hint_1v7cb_27", n = "_form_1v7cb_39", r = {
+	input: e,
+	hint: t,
+	form: n
+};
+//#endregion
+export { r as default, n as form, t as hint, e as input };

package/dist/components/forms/SearchInput/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchInput';