@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/ColorPicker/colorUtils.d.ts

@@ -0,0 +1,86 @@
+import { ColorNames } from '../../../i18n/types';
+/** Output format of the color string a picker emits. */
+export type ColorFormat = "hex" | "rgb" | "hsl";
+/** Hue 0-360, saturation 0-100, value (brightness) 0-100, alpha 0-1. */
+export interface HSVA {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+/** Red, green, blue 0-255 (may be fractional), alpha 0-1. */
+export interface RGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** Hue 0-360, saturation 0-100, lightness 0-100, alpha 0-1. */
+export interface HSLA {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+/** Options for `formatColor`. */
+export interface FormatColorOptions {
+    /**
+     * Include the alpha channel when it is below 1 (`#rrggbbaa`, `rgba()`,
+     * `hsla()`). When `false`, alpha is dropped and the color is opaque.
+     * @default true
+     */
+    alpha?: boolean;
+}
+/** HSV(A) to RGB(A). Channels come back unrounded. */
+export declare function hsvToRgb({ h, s, v, a }: HSVA): RGBA;
+/**
+ * RGB(A) to HSV(A). Pass `fallbackHue` to keep a hue when the color is
+ * achromatic (gray, black, white), where RGB carries no hue.
+ */
+export declare function rgbToHsv({ r, g, b, a }: RGBA, fallbackHue?: number): HSVA;
+/** HSV(A) to HSL(A). The hue is kept as-is. */
+export declare function hsvToHsl({ h, s, v, a }: HSVA): HSLA;
+/** HSL(A) to HSV(A). The hue is kept as-is. */
+export declare function hslToHsv({ h, s, l, a }: HSLA): HSVA;
+/**
+ * Parses a CSS color string into HSVA. Supports `#rgb`, `#rgba`, `#rrggbb`,
+ * `#rrggbbaa` (the `#` is optional), `rgb()` / `rgba()`, and `hsl()` /
+ * `hsla()` in both comma and space syntax (`rgb(0 0 0 / 50%)`). Returns
+ * `null` for anything else.
+ *
+ * Pass `fallbackHue` to keep a hue for achromatic RGB colors.
+ */
+export declare function parseColor(input: string, fallbackHue?: number): HSVA | null;
+/** True when `parseColor` understands the string. */
+export declare function isValidColor(input: string): boolean;
+/** `#rrggbb`, or `#rrggbbaa` when `withAlpha` and alpha is below 1. Lowercase. */
+export declare function toHex(color: HSVA, withAlpha?: boolean): string;
+/**
+ * Formats HSVA as a CSS color string:
+ * - `hex`: `#1d4ed8`, or `#1d4ed880` with alpha
+ * - `rgb`: `rgb(29, 78, 216)`, or `rgba(29, 78, 216, 0.5)` with alpha
+ * - `hsl`: `hsl(224, 76%, 48%)`, or `hsla(224, 76%, 48%, 0.5)` with alpha
+ *
+ * The alpha form is used only when alpha is below 1 (and `options.alpha`
+ * isn't `false`).
+ */
+export declare function formatColor(color: HSVA, format?: ColorFormat, { alpha }?: FormatColorOptions): string;
+/** Same color, compared as rounded 8-digit hex (`#rrggbbaa`). */
+export declare function colorsEqual(a: HSVA, b: HSVA): boolean;
+/**
+ * A plain name for a hue angle, e.g. `210` -> `"blue"`. Pass a locale's
+ * `colorPicker.colors` messages for another language (English by default).
+ */
+export declare function getHueName(hue: number, names?: ColorNames): string;
+/**
+ * A short, human description of a color for screen readers: hue name plus a
+ * lightness / vividness approximation, e.g. `"dark blue"`, `"light gray"`,
+ * `"vivid orange"`, `"brown"`. Alpha below 1 adds `", 50% opacity"`.
+ * Pass a locale's `colorPicker.colors` messages for another language.
+ */
+export declare function describeColor(color: HSVA, names?: ColorNames): string;
+/**
+ * Relative luminance (WCAG) of the color composited on white, 0-1. Useful
+ * for choosing a light or dark overlay on top of a swatch.
+ */
+export declare function getLuminance(color: HSVA): number;

package/dist/components/forms/ColorPicker/colorUtils.mjs

@@ -0,0 +1,184 @@
+import { en as e } from "../../../i18n/en.mjs";
+//#region src/components/forms/ColorPicker/colorUtils.ts
+var t = (e, t, n) => Math.min(n, Math.max(t, e)), n = (e, t = 0) => {
+	let n = 10 ** t;
+	return Math.round(e * n) / n;
+};
+function r({ h: e, s: n, v: r, a: i }) {
+	let a = t(n, 0, 100) / 100, o = t(r, 0, 100) / 100, s = (e % 360 + 360) % 360 / 60, c = (e) => {
+		let t = (e + s) % 6;
+		return o - o * a * Math.max(0, Math.min(t, 4 - t, 1));
+	};
+	return {
+		r: c(5) * 255,
+		g: c(3) * 255,
+		b: c(1) * 255,
+		a: i
+	};
+}
+function i({ r: e, g: n, b: r, a: i }, a = 0) {
+	let o = t(e, 0, 255) / 255, s = t(n, 0, 255) / 255, c = t(r, 0, 255) / 255, l = Math.max(o, s, c), u = l - Math.min(o, s, c), d = a;
+	return u > 0 && (d = l === o ? (s - c) / u % 6 : l === s ? (c - o) / u + 2 : (o - s) / u + 4, d *= 60, d < 0 && (d += 360)), {
+		h: d,
+		s: l === 0 ? 0 : u / l * 100,
+		v: l * 100,
+		a: i
+	};
+}
+function a({ h: e, s: t, v: n, a: r }) {
+	let i = t / 100, a = n / 100, o = a * (1 - i / 2);
+	return {
+		h: e,
+		s: (o === 0 || o === 1 ? 0 : (a - o) / Math.min(o, 1 - o)) * 100,
+		l: o * 100,
+		a: r
+	};
+}
+function o({ h: e, s: t, l: n, a: r }) {
+	let i = t / 100, a = n / 100, o = a + i * Math.min(a, 1 - a);
+	return {
+		h: e,
+		s: (o === 0 ? 0 : 2 * (1 - a / o)) * 100,
+		v: o * 100,
+		a: r
+	};
+}
+var s = /^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i, c = /^(rgba?|hsla?)\(\s*([^)]*)\)$/i;
+function l(e) {
+	let t = e.replace(/\//g, " / ").split(/[\s,]+/).filter(Boolean), n = t.indexOf("/");
+	return n === -1 ? t : n !== 3 || t.length !== 5 ? null : [
+		t[0],
+		t[1],
+		t[2],
+		t[4]
+	];
+}
+var u = /^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i;
+function d(e, t) {
+	if (e.endsWith("%")) {
+		let n = e.slice(0, -1);
+		return u.test(n) ? Number(n) / 100 * t : null;
+	}
+	return u.test(e) ? Number(e) : null;
+}
+function f(e) {
+	if (e === void 0) return 1;
+	let n = d(e, 1);
+	return n === null ? null : t(n, 0, 1);
+}
+function p(e) {
+	let t = /^(.*?)(deg|turn|rad|grad)?$/i.exec(e);
+	if (!t || !u.test(t[1])) return null;
+	let n = Number(t[1]), r = (t[2] ?? "deg").toLowerCase();
+	return r === "turn" ? n *= 360 : r === "rad" ? n = n * 180 / Math.PI : r === "grad" && (n *= .9), (n % 360 + 360) % 360;
+}
+function m(e, n = 0) {
+	let r = e.trim();
+	if (!r) return null;
+	let a = s.exec(r);
+	if (a) {
+		let e = a[1];
+		e.length <= 4 && (e = e.replace(/./g, (e) => e + e));
+		let t = (t) => parseInt(e.slice(t, t + 2), 16), r = e.length === 8 ? t(6) / 255 : 1;
+		return i({
+			r: t(0),
+			g: t(2),
+			b: t(4),
+			a: r
+		}, n);
+	}
+	let u = c.exec(r);
+	if (!u) return null;
+	let m = u[1].toLowerCase().startsWith("rgb") ? "rgb" : "hsl", h = l(u[2]);
+	if (!h || h.length < 3 || h.length > 4) return null;
+	let g = f(h[3]);
+	if (g === null) return null;
+	if (m === "rgb") {
+		let [e, r, a] = h.slice(0, 3).map((e) => d(e, 255));
+		return e === null || r === null || a === null ? null : i({
+			r: t(e, 0, 255),
+			g: t(r, 0, 255),
+			b: t(a, 0, 255),
+			a: g
+		}, n);
+	}
+	let _ = p(h[0]), v = d(h[1].endsWith("%") ? h[1] : `${h[1]}%`, 100), y = d(h[2].endsWith("%") ? h[2] : `${h[2]}%`, 100);
+	return _ === null || v === null || y === null ? null : o({
+		h: _,
+		s: t(v, 0, 100),
+		l: t(y, 0, 100),
+		a: g
+	});
+}
+function h(e) {
+	return m(e) !== null;
+}
+var g = (e) => Math.round(t(e, 0, 255)).toString(16).padStart(2, "0");
+function _(e, t = !0) {
+	let { r: n, g: i, b: a, a: o } = r(e), s = `#${g(n)}${g(i)}${g(a)}`;
+	return t && o < 1 ? `${s}${g(o * 255)}` : s;
+}
+function v(e, i = "hex", { alpha: o = !0 } = {}) {
+	let s = o && e.a < 1, c = n(t(e.a, 0, 1), 2);
+	if (i === "hex") return _(e, o);
+	if (i === "rgb") {
+		let { r: t, g: n, b: i } = r(e), a = `${Math.round(t)}, ${Math.round(n)}, ${Math.round(i)}`;
+		return s ? `rgba(${a}, ${c})` : `rgb(${a})`;
+	}
+	let { h: l, s: u, l: d } = a(e), f = `${Math.round(l) % 360}, ${Math.round(u)}%, ${Math.round(d)}%`;
+	return s ? `hsla(${f}, ${c})` : `hsl(${f})`;
+}
+function y(e, t) {
+	return _({
+		...e,
+		a: n(e.a, 2)
+	}) === _({
+		...t,
+		a: n(t.a, 2)
+	});
+}
+var b = [
+	[15, "red"],
+	[40, "orange"],
+	[55, "gold"],
+	[65, "yellow"],
+	[90, "yellowGreen"],
+	[150, "green"],
+	[175, "teal"],
+	[200, "cyan"],
+	[250, "blue"],
+	[280, "purple"],
+	[320, "magenta"],
+	[345, "pink"],
+	[361, "red"]
+], x = (e) => {
+	let t = (e % 360 + 360) % 360;
+	return b.find(([e]) => t < e)?.[1] ?? "red";
+};
+function S(t, n = e.colorPicker.colors) {
+	return n.hues[x(t)];
+}
+function C(t, n = e.colorPicker.colors) {
+	let { s: r, l: i } = a(t), o;
+	if (i < 8) o = n.black;
+	else if (i > 96) o = n.white;
+	else if (r < 10 || t.s < 8) o = i < 30 ? n.dark(n.gray) : i > 70 ? n.light(n.gray) : n.gray;
+	else {
+		let e = x(t.h);
+		if ((e === "orange" || e === "red" || e === "yellow") && i < 35 && r < 75) o = e === "yellow" ? n.olive : n.brown;
+		else {
+			let t = i < 30 ? n.dark : i > 72 ? n.light : void 0, a = r < 35 ? n.muted : !t && r > 85 ? n.vivid : void 0;
+			o = n.hues[e], a && (o = a(o)), t && (o = t(o));
+		}
+	}
+	return t.a < 1 && (o = n.withOpacity(o, Math.round(t.a * 100))), o;
+}
+function w(e) {
+	let { r: t, g: n, b: i, a } = r(e), o = (e) => {
+		let t = (e * a + 255 * (1 - a)) / 255;
+		return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * o(t) + .7152 * o(n) + .0722 * o(i);
+}
+//#endregion
+export { y as colorsEqual, C as describeColor, v as formatColor, S as getHueName, w as getLuminance, o as hslToHsv, a as hsvToHsl, r as hsvToRgb, h as isValidColor, m as parseColor, i as rgbToHsv, _ as toHex };

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

@@ -0,0 +1,2 @@
+export * from './ColorPicker';
+export * from './ColorInput';

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

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useOverlayLayer.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/refs.cjs.js"),i=require("../../../utils/cx.cjs.js"),ee=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),te=require("../../primitives/Icon/icons.cjs.js"),ne=require("../../data-display/Chip/Chip.cjs.js"),re=require("../Field/FieldContext.cjs.js"),a=require("./comboboxUtils.cjs.js"),o=require("./Combobox.module.css.cjs.js"),ie=require("./ComboboxPopup.cjs.js");let s=require("react"),c=require("react/jsx-runtime"),ae=require("react-dom");var oe={sm:o.default.sm,md:o.default.md,lg:o.default.lg},se={sm:`sm`,md:`sm`,lg:`md`};function l(e){return typeof e==`string`||typeof e==`number`?String(e):``}var ce=500,le=le=>{let u=n.useMessages().combobox,{options:d,renderOption:ue,multiple:f=!1,value:de,defaultValue:fe,onValueChange:pe,inputValue:me,defaultInputValue:he,onInputValueChange:ge,open:_e,defaultOpen:ve=!1,onOpenChange:ye,filter:be,loading:p=!1,loadingMessage:xe=u.loading,emptyMessage:m=u.empty,resultsMessage:Se=u.results,allowCustomValue:h=!1,onCreate:Ce,createLabel:we=u.create,clearable:Te=!1,clearLabel:Ee=u.clear,requiredMessage:De=u.required,clearOnEscape:Oe=!1,showSuggestionsLabel:ke=u.showSuggestions,hideSuggestionsLabel:Ae=u.hideSuggestions,selectedLabel:je=u.selected,autoHighlight:Me=!1,loop:Ne=!0,size:Pe,invalid:Fe,required:Ie,disabled:Le,readOnly:Re,name:g,placement:ze=`bottom-start`,maxHeight:Be,fullWidth:Ve=!0,container:He,inputClassName:Ue,className:We,style:Ge,id:Ke,ref:qe,placeholder:Je,onChange:Ye,onKeyDown:Xe,onBlur:Ze,"aria-describedby":Qe,"aria-label":_,"aria-labelledby":$e,...et}=le,v=re.useFieldContext(),y=re.useFieldControl({id:Ke,invalid:Fe,required:Ie,disabled:Le,readOnly:Re,size:Pe,"aria-describedby":Qe},{nativeRequired:!1}),b=y.size??`md`,x=!y.disabled&&!y.readOnly,tt=(0,s.useId)(),nt=y.id??`${tt}-input`,S=`${tt}-listbox`,C=(0,s.useRef)(null),w=(0,s.useRef)(null),T=(0,s.useRef)(null),rt=(0,s.useCallback)(e=>{C.current=e,r.assignRef(qe,e)},[qe]),E=(0,s.useRef)(new Map);for(let e of d)E.current.set(e.value,e);let D=e=>d.find(t=>t.value===e)??E.current.get(e),[O,k]=e.useControllableState({value:de,defaultValue:fe??(f?[]:null),onChange:pe}),A=f?Array.isArray(O)?O:[]:typeof O==`string`?[O]:[],j=!f&&typeof O==`string`?O:null,M=j===null?``:D(j)?.label??j,[N,P]=e.useControllableState({value:me,defaultValue:he??(f?``:M),onChange:ge}),it=A.length>0||h&&!f&&N.trim()!==``;(0,s.useEffect)(()=>{C.current?.setCustomValidity(y.required&&!it?De:``)},[y.required,it,De]);let[F,I]=e.useControllableState({value:_e,defaultValue:ve,onChange:ye}),at=F&&x,[L,R]=(0,s.useState)(!1),[z,B]=(0,s.useState)(null),ot=be===!1?null:be??a.defaultComboboxFilter,st=(e,t)=>{let n=[];d.forEach((t,r)=>{(!ot||ot(t,e))&&n.push({kind:`option`,key:t.value,option:t,id:`${S}-option-${r}`})});let r=N.trim();return Ce&&t&&r!==``&&!d.some(e=>a.normalizeText(e.label)===a.normalizeText(r))&&n.push({kind:`create`,key:a.CREATE_KEY,text:r,id:`${S}-create`}),a.orderItems(n)},V=f||L,H=st(V?N:``,V),U=z===null?-1:H.findIndex(e=>e.key===z);U>=0&&!a.isEnabled(H[U])&&(U=-1),U===-1&&Me&&V&&N.trim()!==``&&(U=a.findEnabled(H,-1,1,!0));let ct=m!=null&&m!==!1&&m!==``,W=at&&(H.length>0||p||ct),lt=W&&U>=0?H[U].id:void 0,[ut,G]=(0,s.useState)(``),dt=H.filter(e=>e.kind===`option`).length,ft=H.find(e=>e.kind===`create`),K=W?p?l(xe):dt>0?Se(dt):ft?.kind===`create`?l(we(ft.text)):l(m):``;(0,s.useEffect)(()=>{if(!K)return;let e=window.setTimeout(()=>G(K),ce);return()=>window.clearTimeout(e)},[K]),(0,s.useEffect)(()=>{W||G(``)},[W]);let q=(0,s.useRef)(me!==void 0&&!f&&M!==``?null:M);(0,s.useEffect)(()=>{f||q.current===M||(q.current=M,!(h&&M===``)&&(L||P(M)))},[f,M,L,h,P]);let J=e=>{(!e||x)&&(I(e),e||B(null))},pt=t.useOverlayLayer({active:W,elements:()=>[w,T],onEscape:()=>J(!1),onOutsidePress:()=>J(!1)}),Y=e=>{if(!x)return;let t=!f&&N===M,n=f||L&&!t;t&&R(!1);let r=st(n?N:``,n),i=-1;e===`first`?i=a.findEnabled(r,-1,1,!0):e===`last`?i=a.findEnabled(r,-1,-1,!0):e===`selected`&&(i=r.findIndex(e=>e.kind===`option`&&!e.option.disabled&&A.includes(e.option.value)),i<0&&(i=a.findEnabled(r,-1,1,!0))),B(i>=0?r[i].key:null),I(!0)},mt=e=>{let t=a.findEnabled(H,U,e,Ne);B(t>=0?H[t].key:null)},X=(e,t)=>{if(f){let n=A.includes(e);k(n?A.filter(t=>t!==e):[...A,e]),P(``),R(!1),B(e),G(n?u.optionRemoved(t):u.optionSelected(t));return}k(e),q.current=t,P(t),R(!1),J(!1)},ht=e=>{if(!a.isEnabled(e))return;if(e.kind===`option`){X(e.option.value,e.option.label);return}let t=Ce?.(e.text);if(typeof t==`string`){E.current.set(t,{value:t,label:e.text}),X(t,e.text);return}R(!1),f?P(``):J(!1)},gt=e=>{x&&(k(A.filter(t=>t!==e)),G(u.optionRemoved(D(e)?.label??e)))},Z=()=>{k(f?[]:null),q.current=``,P(``),R(!1),B(null)},_t=e=>{Ye?.(e),P(e.target.value),R(!0),B(null),F||J(!0)},vt=e=>{if(Xe?.(e),!(e.defaultPrevented||e.nativeEvent.isComposing||y.disabled))switch(e.key){case`ArrowDown`:if(!x)return;e.preventDefault(),e.altKey?W||Y(`none`):W?mt(1):Y(f?`first`:`selected`);return;case`ArrowUp`:if(!x)return;e.preventDefault(),e.altKey?J(!1):W?mt(-1):Y(`last`);return;case`Enter`:if(!W){f&&h&&N.trim()&&x&&(e.preventDefault(),e.repeat||yt()),!f&&x&&(0,ae.flushSync)(bt);return}if(e.preventDefault(),e.repeat)return;U>=0?ht(H[U]):f&&h&&N.trim()?yt():(!f&&h&&N!==M&&j!==null&&k(null),J(!1));return;case`Escape`:if(W)return;if(F){e.preventDefault(),I(!1);return}if(!x)return;{let t=f?``:M;if(N!==t){e.preventDefault(),P(t),R(!1);return}Oe&&(j!==null||A.length>0)&&(e.preventDefault(),Z())}return;case`Home`:case`End`:case`ArrowLeft`:case`ArrowRight`:z!==null&&B(null);return;case`Backspace`:f&&x&&!e.repeat&&N===``&&A.length>0&&gt(A[A.length-1]);return;default:return}},yt=()=>{let e=N.trim(),t=d.find(t=>a.normalizeText(t.label)===a.normalizeText(e));if(A.includes(t?.value??e)){P(``);return}if(t){t.disabled||X(t.value,t.label);return}E.current.set(e,{value:e,label:e}),X(e,e)},bt=()=>{if(!(f||N===M)){if(N.trim()===``){j===null?N!==``&&P(``):Z();return}if(h){j!==null&&k(null);return}P(M)}},xt=e=>{Ze?.(e),J(!1),R(!1),bt()},St=(0,s.useRef)(()=>{});St.current=()=>{if(de!==void 0)return;let e=fe??(f?[]:null);k(e);let t=typeof e==`string`?D(e)?.label??e:``;P(he??(f?``:t)),J(!1),R(!1)},(0,s.useEffect)(()=>{let e=C.current?.form;if(!e)return;let t=()=>St.current();return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)},[]);let Ct=e=>{let t=C.current;if(!t||y.disabled)return;let n=e.target;w.current?.contains(n)&&(n===t||n.closest(`button, a`)||(e.preventDefault(),t.focus()))},wt=e=>{let t=e.target;w.current?.contains(t)&&!t.closest(`button, a`)&&(F||Y(`none`))},Tt=()=>{C.current?.focus(),W||F?J(!1):Y(`none`)},Et=()=>{Z(),G(u.cleared),C.current?.focus()},Q=e=>e.preventDefault(),Dt=Te&&x&&(A.length>0||N!==``),$=f&&A.length>0,Ot=$e??(_?void 0:v&&!v.isGroup?v.labelId:void 0),kt=g===void 0?null:f?A.map(e=>(0,c.jsx)(`input`,{type:`hidden`,name:g,value:e,disabled:y.disabled},e)):(0,c.jsx)(`input`,{type:`hidden`,name:g,value:j??(h?N:``),disabled:y.disabled});return(0,c.jsxs)(`div`,{ref:w,className:i.cx(o.default.root,oe[b],Ve&&o.default.fullWidth,f&&o.default.multiple,$&&o.default.hasChips,y.invalid&&o.default.invalid,y.disabled&&o.default.disabled,y.readOnly&&!y.disabled&&o.default.readOnly,We),style:Ge,"data-size":b,"data-state":W?`open`:`closed`,onMouseDown:Ct,onClick:wt,children:[$&&(0,c.jsx)(ne.ChipGroup,{"aria-label":je,size:se[b],tone:`primary`,variant:`soft`,disabled:y.disabled,focusFallback:C,className:o.default.chips,children:A.map(e=>{let t=D(e);return(0,c.jsx)(ne.Chip,{startIcon:t?.icon,onRemove:x?()=>gt(e):void 0,children:t?.label??e},e)})}),(0,c.jsx)(`input`,{autoComplete:`off`,autoCorrect:`off`,autoCapitalize:`none`,spellCheck:!1,...et,ref:rt,id:nt,type:`text`,role:`combobox`,"aria-label":_,"aria-labelledby":$e,"aria-expanded":W,"aria-controls":S,"aria-autocomplete":`list`,"aria-activedescendant":lt,...y.ariaProps,placeholder:$?void 0:Je,value:N,disabled:y.disabled,readOnly:y.readOnly,className:i.cx(o.default.input,Ue),onChange:_t,onKeyDown:vt,onBlur:xt}),(0,c.jsxs)(`span`,{className:o.default.actions,children:[Dt&&(0,c.jsx)(`button`,{type:`button`,className:o.default.iconButton,"aria-label":Ee,onMouseDown:Q,onClick:Et,children:(0,c.jsx)(te.CloseIcon,{size:b===`lg`?`sm`:`xs`,strokeWidth:2.5})}),(0,c.jsx)(`button`,{type:`button`,tabIndex:-1,className:i.cx(o.default.iconButton,o.default.toggle),"aria-label":W?Ae:ke,disabled:!x,onMouseDown:Q,onClick:Tt,children:(0,c.jsx)(te.ChevronDownIcon,{size:b===`sm`?`sm`:`md`,className:o.default.chevron})})]}),kt,(0,c.jsx)(ee.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:ut}),W&&(0,c.jsx)(ie.ComboboxPopup,{anchorRef:w,positionerRef:T,layer:pt,listboxId:S,labelledBy:Ot,label:_,multiple:f,size:b,placement:ze,maxHeight:Be,items:H,highlightedIndex:U,isSelected:e=>A.includes(e),onHighlight:e=>B(H[e]?.key??null),onChoose:ht,renderOption:ue,createLabel:we,loading:p,loadingMessage:xe,emptyMessage:m,container:He})]})};exports.Combobox=le,exports.defaultComboboxFilter=a.defaultComboboxFilter;

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

@@ -0,0 +1,172 @@
+import { ComponentPropsWithRef, CSSProperties, ReactNode, Ref } from 'react';
+import { Placement, Size } from '../../../types/common';
+import { ComboboxOptionState } from './ComboboxPopup';
+import { ComboboxFilter, ComboboxOption } from './comboboxUtils';
+export type { ComboboxFilter, ComboboxOption } from './comboboxUtils';
+export { defaultComboboxFilter } from './comboboxUtils';
+export type { ComboboxOptionState } from './ComboboxPopup';
+interface ComboboxOwnProps {
+    /** The choices. Filtering, grouping, and keyboard order all follow this array. */
+    options: ComboboxOption[];
+    /**
+     * Custom content for each option, replacing the icon, label, and
+     * description. The selected check mark is still drawn. Return `undefined`
+     * to use the default content for an option. The option's accessible name
+     * is then its whole text content.
+     */
+    renderOption?: (option: ComboboxOption, state: ComboboxOptionState) => ReactNode;
+    /** Current input text (controlled). */
+    inputValue?: string;
+    /** Initial input text when uncontrolled. Defaults to the selected option's label (single) or "". */
+    defaultInputValue?: string;
+    /** Called with the new input text on typing, selection, clearing, and reverting. */
+    onInputValueChange?: (inputValue: string) => void;
+    /** Whether the list is open (controlled). */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * How options are matched against the input text. Defaults to a case- and
+     * diacritic-insensitive "contains" match on the label
+     * (`defaultComboboxFilter`). Pass `false` for async or server-side
+     * filtering: every option in `options` is shown as is.
+     */
+    filter?: ComboboxFilter | false;
+    /**
+     * Shows a loading row with a spinner in the list and marks the listbox
+     * `aria-busy`. The loading message is announced politely. @default false
+     */
+    loading?: boolean;
+    /** Text of the loading row. @default "Loading…" */
+    loadingMessage?: ReactNode;
+    /**
+     * Status row shown when no option matches (not an option, so it can't be
+     * chosen). Pass `null` to close the list instead. @default "No results"
+     */
+    emptyMessage?: ReactNode;
+    /**
+     * The polite, debounced announcement of how many options are shown.
+     * @default (count) => "5 results available"
+     */
+    resultsMessage?: (count: number) => string;
+    /**
+     * Lets the input hold text that matches no option.
+     * - Single: the text is kept on blur instead of reverting to the selected
+     *   label (the value becomes `null` when the text no longer matches it),
+     *   and the hidden form input submits the text.
+     * - Multiple: Enter with no highlighted option adds the typed text as a value.
+     * @default false
+     */
+    allowCustomValue?: boolean;
+    /**
+     * Makes the combobox creatable: when the trimmed text matches no option
+     * label exactly, a "Create “text”" option appears at the end of the list.
+     * Choosing it calls `onCreate(text)`. Add the new option to `options`;
+     * return its value to also select it.
+     */
+    onCreate?: (inputValue: string) => string | void;
+    /** Content of the create option. @default (text) => `Create “${text}”` */
+    createLabel?: (inputValue: string) => ReactNode;
+    /** Shows a clear button (a real button) while there is a selection or text. @default false */
+    clearable?: boolean;
+    /** Accessible name of the clear button. @default "Clear selection" */
+    clearLabel?: string;
+    /** Accessible name of the chevron button while the list is closed. @default "Show suggestions" */
+    showSuggestionsLabel?: string;
+    /** Accessible name of the chevron button while the list is open. @default "Hide suggestions" */
+    hideSuggestionsLabel?: string;
+    /** Accessible name of the list of selected chips (multiple). @default "Selected" */
+    selectedLabel?: string;
+    /**
+     * Highlights the first match while typing, so Enter picks it. Off by
+     * default (APG "list autocomplete without automatic selection").
+     */
+    autoHighlight?: boolean;
+    /** Arrow keys wrap from the last option to the first and back. @default true */
+    loop?: boolean;
+    /** Field height, padding, and type size. Inherits from a surrounding `Field`. @default "md" */
+    size?: Size;
+    /** Danger styling and `aria-invalid`. Inherits from a surrounding `Field`. @default false */
+    invalid?: boolean;
+    /**
+     * Required. Sets `aria-required` on the input and blocks native form
+     * submission (via `setCustomValidity`) while nothing is chosen. Inherits
+     * from a surrounding `Field`.
+     */
+    required?: boolean;
+    /** Validation message while `required` and empty. @default "Choose an option." */
+    requiredMessage?: string;
+    /**
+     * Escape on unchanged text clears the selection too. Off by default, so
+     * Escape doesn't silently drop a committed value and can close an
+     * enclosing Modal. (Escape always undoes typed text first.) @default false
+     */
+    clearOnEscape?: boolean;
+    /** Disables the field, chips, and buttons. Inherits from a surrounding `Field`. */
+    disabled?: boolean;
+    /** Shows the value without allowing changes; the list doesn't open. Inherits from a surrounding `Field`. */
+    readOnly?: boolean;
+    /**
+     * Name for form submission. Renders a hidden input with the selected
+     * value (one per value when `multiple`). The text input itself has no name.
+     */
+    name?: string;
+    /** Preferred side of the list. Flips when there isn't room. @default "bottom-start" */
+    placement?: Placement;
+    /** Maximum list height (CSS length, or px as a number). Always capped to the viewport. @default 20rem */
+    maxHeight?: CSSProperties["maxHeight"];
+    /** Stretches the field to fill its container. @default true */
+    fullWidth?: boolean;
+    /** Element the list portals into. @default document.body */
+    container?: HTMLElement | null;
+    /** Class name for the `<input>`. `className` goes to the field wrapper. */
+    inputClassName?: string;
+    /** Ref to the `<input role="combobox">`. */
+    ref?: Ref<HTMLInputElement>;
+}
+/** Single selection: the value is one option value or `null`. */
+export interface ComboboxSingleProps {
+    /** Select one option (default) or many. */
+    multiple?: false;
+    /** Selected value (controlled). `null` means nothing is selected. */
+    value?: string | null;
+    /** Initial value when uncontrolled. @default null */
+    defaultValue?: string | null;
+    /** Called with the new value, or `null` when cleared. */
+    onValueChange?: (value: string | null) => void;
+}
+/** Multiple selection: the value is an array; selections show as removable chips. */
+export interface ComboboxMultipleProps {
+    /** Select many options. They render as removable chips before the input. */
+    multiple: true;
+    /** Selected values (controlled). */
+    value?: string[];
+    /** Initial values when uncontrolled. @default [] */
+    defaultValue?: string[];
+    /** Called with the new array of values. */
+    onValueChange?: (value: string[]) => void;
+}
+type NativeInputProps = Omit<ComponentPropsWithRef<"input">, keyof ComboboxOwnProps | keyof ComboboxSingleProps | "type" | "role" | "children">;
+/**
+ * Props for `Combobox`. Native `<input>` props are spread onto the text
+ * input; `className` and `style` go on the field wrapper.
+ */
+export type ComboboxProps = NativeInputProps & ComboboxOwnProps & (ComboboxSingleProps | ComboboxMultipleProps);
+/**
+ * An editable combobox with a list of suggestions (WAI-ARIA APG Combobox,
+ * "list autocomplete" with a listbox popup). Type to filter, use the arrow
+ * keys to highlight, Enter to choose. Single or multiple selection (chips),
+ * groups, descriptions, icons, async loading, and creatable options.
+ *
+ * Inside a `Field`, the label, hint, error, required, disabled, read-only,
+ * and size are wired automatically, as with `Input`.
+ *
+ * ```tsx
+ * <Field label="Team">
+ *   <Combobox options={teams} value={team} onValueChange={setTeam} clearable />
+ * </Field>
+ * ```
+ */
+export declare const Combobox: (props: ComboboxProps) => import("react").JSX.Element;