@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

package/dist/components/data-display/Carousel/Carousel.mjs

@@ -0,0 +1,374 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { flattenChildren as n } from "../../../utils/flattenChildren.mjs";
+import { VisuallyHidden as r } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { IconButton as i } from "../../primitives/Button/Button.mjs";
+import { PauseIcon as a, PlayIcon as o } from "../../primitives/Icon/icons.mjs";
+import { Icon as s } from "../../primitives/Icon/Icon.mjs";
+import c from "./Carousel.module.css.mjs";
+import { createContext as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as ee } from "react/jsx-runtime";
+//#region src/components/data-display/Carousel/Carousel.tsx
+var te = {
+	none: c.radiusNone,
+	xs: c.radiusXs,
+	sm: c.radiusSm,
+	md: c.radiusMd,
+	lg: c.radiusLg,
+	xl: c.radiusXl,
+	"2xl": c.radius2xl,
+	pill: c.radiusPill
+}, ne = {
+	overlay: c.overlay,
+	bottom: c.bottom
+}, y = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+function re(e, t, n, r) {
+	if (n === void 0) return;
+	if (typeof n != "object" || !n) {
+		e[`--_${t}-base`] = r(n);
+		return;
+	}
+	let i = n, a;
+	for (let n of y) {
+		let o = i[n];
+		if (o === void 0) continue;
+		let s = r(o);
+		s !== a && (e[`--_${t}-${n}`] = s), a = s;
+	}
+}
+var ie = (e) => e === 0 ? "0%" : `var(--space-${e})`, ae = l(null), oe = l(null), b = (e, t, n) => Math.min(Math.max(e, t), n), x = "(prefers-reduced-motion: reduce)";
+function S() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(x).matches;
+}
+function se() {
+	let [e, t] = _(S);
+	return f(() => {
+		if (typeof window.matchMedia != "function") return;
+		let e = window.matchMedia(x), n = () => t(e.matches);
+		return n(), e.addEventListener("change", n), () => e.removeEventListener("change", n);
+	}, []), e;
+}
+var ce = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]);
+function C(e) {
+	let t = Array.from(e.children).filter((e) => e instanceof HTMLElement && e.hasAttribute("data-carousel-slide"));
+	if (t.length === 0) return null;
+	let n = getComputedStyle(e), r = n.direction === "rtl", i = parseFloat(n.paddingInlineStart) || 0, a = e.getBoundingClientRect(), o = r ? a.right - i : a.left + i, s = r ? a.left + i : a.right - i, c = Math.abs(e.scrollLeft), l = Math.max(0, e.scrollWidth - e.clientWidth), u = [], d = [], f = [];
+	for (let e of t) {
+		let t = e.getBoundingClientRect(), n = r ? o - t.right : t.left - o;
+		u.push(b(Math.round(c + n), 0, l));
+		let i = Math.max(t.left, r ? s : o), a = Math.min(t.right, r ? o : s) - i;
+		d.push(a > 1), f.push(a >= t.width - 1);
+	}
+	let p = u.findIndex((e) => e >= l - 1);
+	p === -1 && (p = t.length - 1);
+	let m = 0, h = Infinity;
+	return u.forEach((e, t) => {
+		let n = Math.abs(e - c);
+		n < h - .5 && (h = n, m = t);
+	}), {
+		sign: r ? -1 : 1,
+		targets: u,
+		lastStart: p,
+		current: m,
+		visible: d,
+		fully: f
+	};
+}
+function le({ children: l, index: d, defaultIndex: y = 0, onIndexChange: x, slidesPerView: le = 1, gap: w = 4, loop: T = !1, indicators: ue = !1, autoplay: E = !1, interval: de = 5e3, controlsPlacement: D = "overlay", radius: fe = "lg", labels: pe, className: me, style: he, onFocus: ge, onPointerEnter: _e, onPointerLeave: ve, ...ye }) {
+	let O = e().carousel, k = h(() => ({
+		...O,
+		...pe
+	}), [O, pe]), be = n(l), A = be.length, [xe, Se] = _(y), j = d !== void 0, M = j ? d : xe, N = g(M);
+	N.current = M;
+	let P = g(x);
+	P.current = x;
+	let F = p(), I = g(null), L = g(null), R = g(null), Ce = g(null), z = g(M), B = g(null), [we, Te] = _([]), [Ee, De] = _(Math.max(0, A - 1)), [V, Oe] = _([0, 0]), ke = se(), [H, U] = _(() => E && !S()), [Ae, je] = _(!1);
+	f(() => {
+		U(E && !ke);
+	}, [E, ke]);
+	let W = Math.max(0, Math.min(Ee, A - 1)), G = b(M, 0, W), K = u((e) => {
+		e !== N.current && (j || Se(e), P.current?.(e));
+	}, [j]), q = u((e) => {
+		let t = I.current;
+		if (!t) return null;
+		let n = C(t);
+		if (!n) return null;
+		let r = document.activeElement;
+		if (r && r !== t && t.contains(r)) {
+			let e = Array.from(t.children).filter((e) => e.hasAttribute("data-carousel-slide")).findIndex((e) => e.contains(r));
+			e !== -1 && !n.visible[e] && t.focus({ preventScroll: !0 });
+		}
+		if (Te((e) => ce(e, n.visible) ? e : n.visible), De(n.lastStart), e) {
+			let e = n.fully.indexOf(!0), t = n.fully.lastIndexOf(!0), r = e === -1 ? [n.current, n.current] : [e, Math.max(e, t)];
+			Oe((e) => e[0] === r[0] && e[1] === r[1] ? e : r);
+		}
+		return n;
+	}, []), J = u((e, t = !1) => {
+		let n = I.current;
+		if (!n) return;
+		let r = C(n);
+		if (!r) return;
+		let i = b(e, 0, r.targets.length - 1);
+		z.current = i, n.scrollTo({
+			left: r.sign * r.targets[i],
+			behavior: t || S() ? "instant" : "smooth"
+		});
+	}, []), Y = u((e) => {
+		let t = b(e, 0, W);
+		j || J(t), K(t);
+	}, [
+		K,
+		j,
+		W,
+		J
+	]), X = u((e, t) => {
+		let n = G + e;
+		return n < 0 ? t ? W : null : n > W ? t ? 0 : null : n;
+	}, [G, W]);
+	m(() => {
+		q(!0) && N.current > 0 && J(N.current, !0);
+	}, []), m(() => {
+		q(!0);
+	}, [A, q]), f(() => {
+		let e = I.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = e.clientWidth, n = new ResizeObserver(() => {
+			let n = q(!0);
+			if (!n || e.clientWidth === t) return;
+			t = e.clientWidth;
+			let r = b(N.current, 0, Math.max(0, n.lastStart));
+			J(r, !0), K(r);
+		});
+		return n.observe(e), () => n.disconnect();
+	}, [
+		K,
+		q,
+		J
+	]), f(() => {
+		j && M !== G && P.current?.(G);
+	}, [
+		j,
+		M,
+		G
+	]), f(() => {
+		G !== z.current && J(G);
+	}, [G, J]), f(() => {
+		let e = I.current;
+		if (!e) return;
+		let t = 0, n, r = "onscrollend" in window, i = () => {
+			let e = q(!0);
+			e && (z.current = e.current, K(e.current));
+		}, a = () => {
+			cancelAnimationFrame(t), t = requestAnimationFrame(() => q(!1)), r || (clearTimeout(n), n = setTimeout(i, 150));
+		};
+		return e.addEventListener("scroll", a, { passive: !0 }), r && e.addEventListener("scrollend", i), () => {
+			cancelAnimationFrame(t), clearTimeout(n), e.removeEventListener("scroll", a), e.removeEventListener("scrollend", i);
+		};
+	}, [K, q]);
+	let Me = !T && G <= 0, Ne = !T && G >= W;
+	m(() => {
+		let e = document.activeElement, t = !e || e === document.body, n = (n, r, i) => !r?.disabled || !(e === r || t && B.current === n) ? !1 : (B.current = null, i && !i.disabled ? i.focus() : I.current?.focus(), !0);
+		n("prev", L.current, R.current) || n("next", R.current, L.current);
+	}, [
+		Me,
+		Ne,
+		A
+	]);
+	let Pe = (e) => ({
+		onFocus: () => {
+			B.current = e;
+		},
+		onBlur: (e) => {
+			e.relatedTarget && (B.current = null);
+		}
+	}), Fe = (e) => {
+		let t = X(e, T);
+		t !== null && Y(t);
+	}, Ie = E && H && !Ae && A > 1;
+	f(() => {
+		if (!Ie) return;
+		let e = setTimeout(() => {
+			let e = X(1, !0);
+			e !== null && Y(e);
+		}, de);
+		return () => clearTimeout(e);
+	}, [
+		Ie,
+		de,
+		G,
+		X,
+		Y
+	]);
+	let Le = (e) => {
+		if (ge?.(e), !E || !H) return;
+		let t = e.target, n = !0;
+		try {
+			n = t.matches(":focus-visible");
+		} catch {}
+		if (!n) return;
+		let r = e.currentTarget, i = e.relatedTarget instanceof Node && r.contains(e.relatedTarget);
+		t === Ce.current && i || U(!1);
+	}, Re = (e) => {
+		_e?.(e), e.pointerType === "mouse" && je(!0);
+	}, ze = (e) => {
+		ve?.(e), je(!1);
+	}, Be = (e) => {
+		if (e.target !== e.currentTarget) return;
+		let t = getComputedStyle(e.currentTarget).direction === "rtl", n = null;
+		switch (e.key) {
+			case "ArrowRight":
+				n = X(t ? -1 : 1, T);
+				break;
+			case "ArrowLeft":
+				n = X(t ? 1 : -1, T);
+				break;
+			case "Home":
+				n = 0;
+				break;
+			case "End":
+				n = W;
+				break;
+			default: return;
+		}
+		e.preventDefault(), n !== null && Y(n);
+	}, Ve = (e) => {
+		let t = e.currentTarget;
+		if (e.target === t) return;
+		let n = e.target.closest("[data-carousel-slide]");
+		if (!n || n.parentElement !== t) return;
+		let r = C(t), i = Number(n.dataset.index);
+		r && !r.fully[i] && n.scrollIntoView({
+			block: "nearest",
+			inline: "nearest",
+			behavior: S() ? "instant" : "smooth"
+		});
+	}, Z = {};
+	re(Z, "spv", le, (e) => String(e)), re(Z, "gap", w, ie);
+	let He = h(() => ({
+		count: A,
+		visible: we,
+		labels: k
+	}), [
+		A,
+		we,
+		k
+	]), Q = b(Math.max(G, V[0]), 0, Math.max(0, A - 1)), Ue = b(Math.max(Q, G + (V[1] - V[0])), 0, Math.max(0, A - 1)), We = A > 0 ? k.status(Q + 1, Ue + 1, A) : "", $ = D === "overlay" ? "soft" : "outline";
+	return /* @__PURE__ */ ee("section", {
+		"aria-roledescription": "carousel",
+		...ye,
+		className: t(c.root, ne[D], te[fe], me),
+		style: {
+			...Z,
+			...he
+		},
+		"data-placement": D,
+		onFocus: Le,
+		onPointerEnter: Re,
+		onPointerLeave: ze,
+		children: [
+			E && /* @__PURE__ */ v(i, {
+				ref: Ce,
+				className: t(c.control, c.rotation),
+				variant: $,
+				tone: "neutral",
+				"aria-label": H ? k.stop : k.start,
+				onClick: () => U((e) => !e),
+				children: v(H ? a : o, {})
+			}),
+			/* @__PURE__ */ v(i, {
+				ref: L,
+				className: t(c.control, c.prev),
+				variant: $,
+				tone: "neutral",
+				"aria-label": k.previous,
+				"aria-controls": F,
+				disabled: Me || A < 2,
+				...Pe("prev"),
+				onClick: () => Fe(-1),
+				children: /* @__PURE__ */ v(s, {
+					name: "chevron-left",
+					className: c.directional
+				})
+			}),
+			/* @__PURE__ */ v(i, {
+				ref: R,
+				className: t(c.control, c.next),
+				variant: $,
+				tone: "neutral",
+				"aria-label": k.next,
+				"aria-controls": F,
+				disabled: Ne || A < 2,
+				...Pe("next"),
+				onClick: () => Fe(1),
+				children: /* @__PURE__ */ v(s, {
+					name: "chevron-right",
+					className: c.directional
+				})
+			}),
+			/* @__PURE__ */ ee("div", {
+				className: c.slides,
+				children: [/* @__PURE__ */ v(r, {
+					"aria-live": E && H ? "off" : "polite",
+					"aria-atomic": "true",
+					"data-carousel-status": "",
+					children: We
+				}), /* @__PURE__ */ v("div", {
+					ref: I,
+					id: F,
+					className: c.viewport,
+					role: "group",
+					"aria-label": k.slides,
+					tabIndex: 0,
+					onKeyDown: Be,
+					onFocus: Ve,
+					children: /* @__PURE__ */ v(ae.Provider, {
+						value: He,
+						children: be.map((e, t) => /* @__PURE__ */ v(oe.Provider, {
+							value: t,
+							children: e
+						}, e.key ?? t))
+					})
+				})]
+			}),
+			ue && A > 1 && /* @__PURE__ */ v("div", {
+				className: c.indicators,
+				role: "group",
+				"aria-label": k.indicators,
+				children: Array.from({ length: W + 1 }, (e, t) => /* @__PURE__ */ v("button", {
+					type: "button",
+					className: c.dot,
+					"aria-label": k.goTo(t + 1, A),
+					"aria-current": t === G ? "true" : void 0,
+					"aria-controls": F,
+					onClick: () => Y(t)
+				}, t))
+			})
+		]
+	});
+}
+function w({ label: e, className: n, children: r, "aria-label": i, "aria-labelledby": a, ...o }) {
+	let s = d(ae), l = d(oe) ?? 0, u = s?.count ?? 1, f = s?.visible[l] === !1, p = a ? void 0 : i ?? e ?? (s ? s.labels.slide(l + 1, u) : void 0);
+	return /* @__PURE__ */ v("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"aria-label": p,
+		"aria-labelledby": a,
+		...o,
+		className: t(c.slide, n),
+		"data-carousel-slide": "",
+		"data-index": l,
+		"data-hidden": f ? "" : void 0,
+		inert: f,
+		children: r
+	});
+}
+var T = Object.assign(le, { Slide: w });
+//#endregion
+export { T as Carousel, w as CarouselSlide };

package/dist/components/data-display/Carousel/Carousel.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_53pdn_31`,t=`_radiusNone_53pdn_155`,n=`_radiusXs_53pdn_157`,r=`_radiusSm_53pdn_159`,i=`_radiusMd_53pdn_161`,a=`_radiusLg_53pdn_163`,o=`_radiusXl_53pdn_165`,s=`_radius2xl_53pdn_167`,c=`_radiusPill_53pdn_169`,l=`_overlay_53pdn_175`,u=`_control_53pdn_191`,d=`_prev_53pdn_205`,f=`_next_53pdn_215`,p=`_rotation_53pdn_225`,m=`_indicators_53pdn_237`,h=`_bottom_53pdn_247`,g=`_slides_53pdn_285`,_=`_viewport_53pdn_297`,v=`_slide_53pdn_285`,y=`_directional_53pdn_405`,b=`_dot_53pdn_435`,x={root:e,radiusNone:t,radiusXs:n,radiusSm:r,radiusMd:i,radiusLg:a,radiusXl:o,radius2xl:s,radiusPill:c,overlay:l,control:u,prev:d,next:f,rotation:p,indicators:m,bottom:h,slides:g,viewport:_,slide:v,directional:y,dot:b};exports.bottom=h,exports.control=u,exports.default=x,exports.directional=y,exports.dot=b,exports.indicators=m,exports.next=f,exports.overlay=l,exports.prev=d,exports.radius2xl=s,exports.radiusLg=a,exports.radiusMd=i,exports.radiusNone=t,exports.radiusPill=c,exports.radiusSm=r,exports.radiusXl=o,exports.radiusXs=n,exports.root=e,exports.rotation=p,exports.slide=v,exports.slides=g,exports.viewport=_;

package/dist/components/data-display/Carousel/Carousel.module.css.mjs

@@ -0,0 +1,26 @@
+//#region src/components/data-display/Carousel/Carousel.module.css
+var e = "_root_53pdn_31", t = "_radiusNone_53pdn_155", n = "_radiusXs_53pdn_157", r = "_radiusSm_53pdn_159", i = "_radiusMd_53pdn_161", a = "_radiusLg_53pdn_163", o = "_radiusXl_53pdn_165", s = "_radius2xl_53pdn_167", c = "_radiusPill_53pdn_169", l = "_overlay_53pdn_175", u = "_control_53pdn_191", d = "_prev_53pdn_205", f = "_next_53pdn_215", p = "_rotation_53pdn_225", m = "_indicators_53pdn_237", h = "_bottom_53pdn_247", g = "_slides_53pdn_285", _ = "_viewport_53pdn_297", v = "_slide_53pdn_285", y = "_directional_53pdn_405", b = "_dot_53pdn_435", x = {
+	root: e,
+	radiusNone: t,
+	radiusXs: n,
+	radiusSm: r,
+	radiusMd: i,
+	radiusLg: a,
+	radiusXl: o,
+	radius2xl: s,
+	radiusPill: c,
+	overlay: l,
+	control: u,
+	prev: d,
+	next: f,
+	rotation: p,
+	indicators: m,
+	bottom: h,
+	slides: g,
+	viewport: _,
+	slide: v,
+	directional: y,
+	dot: b
+};
+//#endregion
+export { h as bottom, u as control, x as default, y as directional, b as dot, m as indicators, f as next, l as overlay, d as prev, s as radius2xl, a as radiusLg, i as radiusMd, t as radiusNone, c as radiusPill, r as radiusSm, o as radiusXl, n as radiusXs, e as root, p as rotation, v as slide, g as slides, _ as viewport };

package/dist/components/data-display/Carousel/index.d.ts

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

package/dist/components/data-display/Chip/Chip.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/refs.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("./Chip.module.css.cjs.js");let s=require("react"),c=require("react/jsx-runtime");var l={solid:o.default.solid,soft:o.default.soft,outline:o.default.outline},u={neutral:o.default.neutral,primary:o.default.primary,accent:o.default.accent,success:o.default.success,warning:o.default.warning,danger:o.default.danger,info:o.default.info},d={sm:o.default.sm,md:o.default.md,lg:o.default.lg},f={none:o.default.radiusNone,xs:o.default.radiusXs,sm:o.default.radiusSm,md:o.default.radiusMd,lg:o.default.radiusLg,xl:o.default.radiusXl,"2xl":o.default.radius2xl,pill:o.default.radiusPill},p=`data-chip`,m=`data-chip-part`,h=`data-chip-group`,g=(0,s.createContext)(null),_=({children:h,variant:_,tone:ee,size:v,radius:y=`pill`,startIcon:b,avatar:x,onRemove:S,removeLabel:C,removeTabIndex:te,disabled:w,selected:T,defaultSelected:E,onSelectedChange:D,value:O,href:k,target:A,rel:j,download:M,onClick:N,onKeyDown:P,className:F,style:I,type:ne,ref:L,...R})=>{let re=t.useMessages(),z=(0,s.useContext)(g),ie=_??z?.variant??`soft`,ae=ee??z?.tone??`neutral`,oe=v??z?.size??`md`,B=!!w||!!z?.disabled,se=(0,s.useId)(),ce=(0,s.useId)(),V=(0,s.useRef)(null),H=z?.selectionMode!==void 0&&O!==void 0,U=H||T!==void 0||E!==void 0||D!==void 0,[le,ue]=e.useControllableState({value:T,defaultValue:E??!1,onChange:H?void 0:D}),W=H?z.isSelected(O):U&&le,G=S!==void 0,K=k!==void 0&&!U,q=K||!K&&(U||N!==void 0),de=q&&G,fe=(0,s.useCallback)(e=>{V.current=e,n.assignRef(L,e)},[L]),pe=(0,s.useCallback)(e=>{V.current=e},[]),J=e=>{!B&&S&&(z&&V.current&&z.focusAfterRemoval(V.current,e),S())},me=e=>e.key===`Backspace`||e.key===`Delete`,Y=e=>{P?.(e),!e.defaultPrevented&&q&&G&&me(e)&&(e.preventDefault(),J(`action`))},he=e=>{if(B){e.preventDefault();return}N?.(e),!e.defaultPrevented&&U&&(H?(z.toggle(O),D?.(!W)):ue(!W))},ge=e=>{e.stopPropagation(),J(`remove`)},_e=e=>{me(e)&&(e.preventDefault(),e.stopPropagation(),J(`remove`))},X=typeof h==`string`||typeof h==`number`?String(h):void 0,Z=(0,c.jsxs)(c.Fragment,{children:[W&&(0,c.jsx)(`span`,{className:o.default.check,"aria-hidden":`true`,children:(0,c.jsx)(a.CheckIcon,{})}),x!=null&&(0,c.jsx)(`span`,{className:o.default.avatar,"aria-hidden":`true`,children:x}),b!=null&&(0,c.jsx)(`span`,{className:o.default.icon,"aria-hidden":`true`,children:b}),(0,c.jsx)(`span`,{id:se,className:o.default.label,title:X,children:h})]}),ve=G&&(0,c.jsxs)(`button`,{type:`button`,className:o.default.remove,[m]:`remove`,disabled:B,tabIndex:te,"aria-label":C??(X===void 0?void 0:re.chip.removeNamed(X)),"aria-labelledby":C===void 0&&X===void 0?`${ce} ${se}`:void 0,onClick:ge,onKeyDown:_e,children:[C===void 0&&X===void 0&&(0,c.jsx)(i.VisuallyHidden,{id:ce,children:re.chip.remove}),(0,c.jsx)(a.CloseIcon,{})]}),Q=r.cx(o.default.root,l[ie],u[ae],d[oe],f[y],q&&o.default.interactive,de&&o.default.split,G&&o.default.removable,x!=null&&o.default.hasAvatar,W&&o.default.selected,B&&o.default.disabled,F),ye=(e,t,n)=>{let r=n?{[p]:``,style:I}:{};return K?(0,c.jsx)(`a`,{...R,...r,[m]:`action`,ref:t,className:e,href:B?void 0:k,target:A,rel:j,download:M,role:B?`link`:void 0,"aria-disabled":B||void 0,onClick:he,onKeyDown:Y,children:Z}):(0,c.jsx)(`button`,{...R,...r,[m]:`action`,ref:t,type:ne??`button`,className:e,disabled:B,"aria-pressed":U?W:void 0,onClick:he,onKeyDown:Y,children:Z})},$;return $=de?(0,c.jsxs)(`span`,{ref:pe,className:Q,style:I,[p]:``,children:[ye(o.default.action,L??(()=>{}),!1),ve]}):q?ye(Q,fe,!0):(0,c.jsxs)(`span`,{...R,ref:fe,className:Q,style:I,"aria-disabled":B||void 0,onKeyDown:P,[p]:``,children:[Z,ve]}),z?.list?(0,c.jsx)(`span`,{role:`listitem`,className:o.default.item,children:$}):$},ee={sm:o.default.groupSm,md:o.default.groupMd,lg:o.default.groupLg};function v(e,t){let n=[...e.hasAttribute(m)?[e]:[],...Array.from(e.querySelectorAll(`[${m}]`))].filter(e=>!e.disabled&&e.getAttribute(`aria-disabled`)!==`true`);return n.find(e=>e.getAttribute(m)===t)??n[0]??null}var y=t=>{let{role:i,size:a=`md`,variant:l,tone:u,disabled:d=!1,focusFallback:f,selectionMode:m,value:_,defaultValue:y,onValueChange:b,className:x,children:S,ref:C,...te}=t,w=m===`multiple`,T=i??(m?`group`:`list`),[E,D]=e.useControllableState({value:_,defaultValue:y??(w?[]:null),onChange:b}),O=(0,s.useRef)(null),k=(0,s.useCallback)(e=>{O.current=e,n.assignRef(C,e)},[C]),A=(0,s.useRef)(f);A.current=f;let j=(0,s.useMemo)(()=>Array.isArray(E)?E:typeof E==`string`?[E]:[],[E]),M=(0,s.useCallback)(e=>j.includes(e),[j]),N=(0,s.useCallback)(e=>{D(t=>{if(w){let n=Array.isArray(t)?t:[];return n.includes(e)?n.filter(t=>t!==e):[...n,e]}return t===e?null:e})},[w,D]),P=(0,s.useCallback)((e,t)=>{let n=O.current;if(!n)return;let r=Array.from(n.querySelectorAll(`[${p}]`)).filter(e=>e.closest(`[${h}]`)===n),i=r.indexOf(e),a=i===-1?[]:[...r.slice(i+1),...r.slice(0,i).reverse()];for(let e of a){let n=v(e,t);if(n){n.focus();return}}let o=A.current,s=typeof o==`function`?o():o?.current;s?s.focus():n.focus()},[]),F=(0,s.useMemo)(()=>({list:T===`list`,size:a,variant:l,tone:u,disabled:d,selectionMode:m,isSelected:M,toggle:N,focusAfterRemoval:P}),[T,a,l,u,d,m,M,N,P]);return(0,c.jsx)(g.Provider,{value:F,children:(0,c.jsx)(`div`,{tabIndex:-1,...te,[h]:``,ref:k,role:T,className:r.cx(o.default.group,ee[a],x),children:S})})};exports.Chip=_,exports.ChipGroup=y;

package/dist/components/data-display/Chip/Chip.d.ts

@@ -0,0 +1,162 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, KeyboardEventHandler, MouseEventHandler, ReactNode, Ref, RefObject } from 'react';
+import { Radius, Size, Tone } from '../../../types/common';
+/** Visual style of a chip. Semantic color is set separately with `tone`. */
+export type ChipVariant = "solid" | "soft" | "outline";
+/** How a `ChipGroup` manages selectable chips. */
+export type ChipSelectionMode = "single" | "multiple";
+export interface ChipOwnProps {
+    /** The chip label. Long labels truncate with an ellipsis; the full text stays in the accessible name and in a `title` tooltip when it is a string. */
+    children?: ReactNode;
+    /** Visual style. Inside a `ChipGroup`, defaults to the group's `variant`. @default "soft" */
+    variant?: ChipVariant;
+    /** Semantic color. Inside a `ChipGroup`, defaults to the group's `tone`. @default "neutral" */
+    tone?: Tone;
+    /** Height, padding, and type size. Inside a `ChipGroup`, defaults to the group's `size`. @default "md" */
+    size?: Size;
+    /** Corner rounding. @default "pill" */
+    radius?: Radius;
+    /** Decorative icon before the label. Hidden from assistive technology, so the label must carry the meaning. */
+    startIcon?: ReactNode;
+    /**
+     * A small avatar before the label, e.g. `<Avatar size="xs" name="Dana" />`.
+     * Hidden from assistive technology because the label already names the person.
+     */
+    avatar?: ReactNode;
+    /**
+     * Makes the chip removable: shows a remove button (a real `<button>`, at
+     * least 24x24 px). Backspace or Delete on a focused chip also removes it.
+     * Inside a `ChipGroup`, focus moves to the next chip after removal.
+     */
+    onRemove?: () => void;
+    /** Accessible name of the remove button. @default "Remove {label}" */
+    removeLabel?: string;
+    /**
+     * `tabIndex` of the remove button. Pass `-1` when a parent manages focus
+     * across many chips (a roving tab stop, as TagInput does), so the list is
+     * one Tab stop; the button stays clickable and focusable from script.
+     */
+    removeTabIndex?: number;
+    /** Disables the chip and its remove button. Inside a `ChipGroup`, the group's `disabled` also applies. @default false */
+    disabled?: boolean;
+    /**
+     * Selected state for a filter chip (controlled). Setting `selected`,
+     * `defaultSelected`, or `onSelectedChange` makes the chip a toggle button
+     * (`aria-pressed`) that shows a check icon when selected.
+     */
+    selected?: boolean;
+    /** Initial selected state when uncontrolled. */
+    defaultSelected?: boolean;
+    /** Called with the next selected state when the chip is toggled. */
+    onSelectedChange?: (selected: boolean) => void;
+    /**
+     * Value of this chip inside a `ChipGroup` with `selectionMode`. The group
+     * then manages `selected`, and the chip's own `selected` is ignored.
+     */
+    value?: string;
+    /** Makes the chip a link. Ignored when the chip is selectable. */
+    href?: string;
+    /** Link target (with `href`). */
+    target?: ComponentPropsWithoutRef<"a">["target"];
+    /** Link relationship (with `href`). */
+    rel?: string;
+    /** Download hint (with `href`). */
+    download?: ComponentPropsWithoutRef<"a">["download"];
+    /** Click handler. Makes the chip a `<button>` (unless `href` is set). */
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** Key handler on the chip's interactive element (or its root when static). Call `preventDefault()` to skip Backspace/Delete removal. */
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    /**
+     * Ref to the chip's primary element: the `<button>` or `<a>` when the chip
+     * is clickable or selectable, otherwise the root `<span>`.
+     */
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * Native props are spread onto the chip's primary element (the `<button>`
+ * or `<a>` when interactive, otherwise the root `<span>`). `className` and
+ * `style` always go on the visual root.
+ */
+export type ChipProps = ChipOwnProps & Omit<ComponentPropsWithoutRef<"button">, keyof ChipOwnProps>;
+/**
+ * A compact pill for tags, filters, and selections. Unlike `Badge`, a chip
+ * can be removable (`onRemove`), clickable (`onClick` or `href`), or
+ * selectable (`selected` / `onSelectedChange`, or `value` in a `ChipGroup`).
+ *
+ * - Static: a `<span>`. A remove button, if any, is its only tab stop.
+ * - Clickable: a `<button>` or `<a>`.
+ * - Selectable: a `<button aria-pressed>` with a check icon when selected.
+ * - Interactive and removable: the action and the remove button are sibling
+ *   buttons inside one pill (never nested).
+ */
+export declare const Chip: ({ children, variant: variantProp, tone: toneProp, size: sizeProp, radius, startIcon, avatar, onRemove, removeLabel, removeTabIndex, disabled: disabledProp, selected: selectedProp, defaultSelected, onSelectedChange, value, href, target, rel, download, onClick, onKeyDown, className, style, type, ref, ...rest }: ChipProps) => import("react").JSX.Element;
+/** An element to focus when the last chip in a group is removed. */
+export type ChipFocusFallback = RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
+export interface ChipGroupBaseProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "defaultChecked" | "onChange"> {
+    /**
+     * `list` (default without `selectionMode`): a tag list; each chip is
+     * wrapped in a `listitem`. `group` (default with `selectionMode`): a set
+     * of filter chips; give it `aria-label` or `aria-labelledby`.
+     */
+    role?: "list" | "group";
+    /** Size for every chip (a chip's own `size` wins). Also sets the gap. @default "md" */
+    size?: Size;
+    /** Variant for every chip (a chip's own `variant` wins). */
+    variant?: ChipVariant;
+    /** Tone for every chip (a chip's own `tone` wins). */
+    tone?: Tone;
+    /** Disables every chip in the group. @default false */
+    disabled?: boolean;
+    /**
+     * Where focus goes when the last remaining chip is removed. Without it,
+     * the group container itself receives focus.
+     */
+    focusFallback?: ChipFocusFallback;
+    /** `Chip` elements. */
+    children?: ReactNode;
+}
+/** No selection: chips manage their own state (or none). */
+export interface ChipGroupNoSelectionProps {
+    /** Lets the group manage selectable chips (each needs a `value`). */
+    selectionMode?: undefined;
+    value?: undefined;
+    defaultValue?: undefined;
+    onValueChange?: undefined;
+}
+export interface ChipGroupSingleProps {
+    /** `single`: at most one chip selected (value is a string or `null`). */
+    selectionMode: "single";
+    /** Controlled value: the selected chip's value, or `null`. */
+    value?: string | null;
+    /** Initial value when uncontrolled. @default null */
+    defaultValue?: string | null;
+    /** Called with the next value (`null` when the selected chip is unselected). */
+    onValueChange?: (value: string | null) => void;
+}
+export interface ChipGroupMultipleProps {
+    /** `multiple`: any number of chips selected (value is a string array). */
+    selectionMode: "multiple";
+    /** Controlled value: the values of every selected chip. */
+    value?: string[];
+    /** Initial value when uncontrolled. @default [] */
+    defaultValue?: string[];
+    /** Called with the next array of selected values. */
+    onValueChange?: (value: string[]) => void;
+}
+/** A selection group needs an accessible name. */
+export type ChipGroupName = {
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    "aria-label"?: string;
+    "aria-labelledby": string;
+};
+export type ChipGroupProps = ChipGroupBaseProps & (ChipGroupNoSelectionProps | ((ChipGroupSingleProps | ChipGroupMultipleProps) & ChipGroupName));
+/**
+ * Lays out chips with a gap and wraps them. As a tag list (`role="list"`,
+ * the default), each chip becomes a listitem. With `selectionMode`, it is a
+ * `role="group"` that manages selected chips by their `value`.
+ *
+ * After a chip is removed, focus moves to the next chip, else the previous
+ * one, else `focusFallback`, else the group itself.
+ */
+export declare const ChipGroup: (props: ChipGroupProps) => import("react").JSX.Element;