@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

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

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useMergedRef.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../primitives/Icon/icons.cjs.js"),i=require("./Accordion.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime"),s=require("react-dom");var c=6,l={separated:i.default.separated,contained:i.default.contained,flush:i.default.flush},u={sm:i.default.sm,md:i.default.md,lg:i.default.lg},d={start:i.default.iconStart,end:i.default.iconEnd},f={sm:`sm`,md:`md`,lg:`md`},p=(0,a.createContext)(null);function m(e){let t=(0,a.useContext)(p);if(!t)throw Error(`<${e}> must be used inside <Accordion>.`);return t}var h=(0,a.createContext)(null);function g(e){let t=(0,a.useContext)(h);if(!t)throw Error(`<${e}> must be used inside <Accordion.Item>.`);return t}var _=e=>Array.isArray(e)?e:e==null?[]:[e],v=r=>{let{type:s=`single`,collapsible:c=!0,value:f,defaultValue:m,onValueChange:h,variant:g=`separated`,size:v=`md`,headingLevel:y=3,icon:b=`chevron`,iconPosition:x=`end`,keyboardNavigation:S=!0,regionRole:C=`auto`,forceMount:w=!1,hiddenUntilFound:T=!1,disabled:E=!1,className:D,children:O,ref:k,...A}=r,j=s===`multiple`,[M,N]=e.useControllableState({value:f,defaultValue:m??(j?[]:null),onChange:h}),P=(0,a.useMemo)(()=>_(M),[M]),F=(0,a.useCallback)((e,t)=>{N(n=>{let r=_(n);return t===r.includes(e)?n:j?t?[...r,e]:r.filter(t=>t!==e):t?e:c?null:n})},[N,j,c]),I=(0,a.useCallback)(e=>F(e,!P.includes(e)),[F,P]),[L,R]=(0,a.useState)(0),z=(0,a.useCallback)(()=>(R(e=>e+1),()=>R(e=>e-1)),[]),B=C===`auto`?L<=6:C,V=(0,a.useRef)(null),H=t.useMergedRef(k,V),U=(0,a.useMemo)(()=>({rootRef:V,openValues:P,multiple:j,collapsible:j?!0:c,disabled:E,headingLevel:y,size:v,icon:b,iconPosition:x,keyboardNavigation:S,isRegion:B,forceMount:w,hiddenUntilFound:T,toggle:I,setItemOpen:F,registerItem:z}),[P,j,c,E,y,v,b,x,S,B,w,T,I,F,z]);return(0,o.jsx)(p.Provider,{value:U,children:(0,o.jsx)(`div`,{...A,ref:H,"data-accordion-root":``,"data-orientation":`vertical`,className:n.cx(i.default.root,l[g],u[v],d[x],D),children:O})})},y=({value:e,disabled:t=!1,headingLevel:r,className:s,children:c,...l})=>{let u=m(`Accordion.Item`),d=(0,a.useId)(),[f,p]=(0,a.useState)(),[g,_]=(0,a.useState)(),{registerItem:v}=u;(0,a.useLayoutEffect)(()=>v(),[v]);let y=u.openValues.includes(e),b=u.disabled||t,x=(0,a.useMemo)(()=>({value:e,open:y,disabled:b,headingLevel:r??u.headingLevel,triggerId:f??`${d}-trigger`,contentId:g??`${d}-content`,setTriggerId:p,setContentId:_}),[e,y,b,r,u.headingLevel,f,g,d]);return(0,o.jsx)(h.Provider,{value:x,children:(0,o.jsx)(`div`,{...l,"data-state":y?`open`:`closed`,"data-disabled":b?``:void 0,className:n.cx(i.default.item,s),children:c})})},b=({size:e})=>(0,o.jsx)(r.ChevronDownIcon,{size:e,className:i.default.rotating}),x=({size:e})=>(0,o.jsxs)(`span`,{className:i.default.plusMinus,children:[(0,o.jsx)(r.PlusIcon,{size:e,className:i.default.plus}),(0,o.jsx)(r.MinusIcon,{size:e,className:i.default.minus})]}),S=({children:e,description:t,startIcon:r,badge:s,headingClassName:c,className:l,id:u,onClick:d,onKeyDown:p,disabled:h,..._})=>{let v=m(`Accordion.Trigger`),y=g(`Accordion.Trigger`),S=(0,a.useId)(),C=`${S}-title`,w=`${S}-description`,T=`${S}-badge`,{setTriggerId:E}=y;(0,a.useLayoutEffect)(()=>{E(u)},[u,E]);let D=y.disabled||!!h,O=y.open&&!v.collapsible,k=e=>{d?.(e),!(e.defaultPrevented||D||O)&&v.toggle(y.value)},A=e=>{if(p?.(e),e.defaultPrevented||!v.keyboardNavigation||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey)return;let t=v.rootRef.current;if(!t)return;let n=Array.from(t.querySelectorAll(`[data-accordion-trigger]`)).filter(e=>e.closest(`[data-accordion-root]`)===t&&!e.disabled),r=n.indexOf(e.currentTarget);if(r===-1||n.length===0)return;let i=null;switch(e.key){case`ArrowDown`:i=(r+1)%n.length;break;case`ArrowUp`:i=(r-1+n.length)%n.length;break;case`Home`:i=0;break;case`End`:i=n.length-1;break;default:return}e.preventDefault(),n[i]?.focus()},j=f[v.size],{icon:M}=v,N=null;M===`chevron`?N=(0,o.jsx)(b,{size:j}):M===`plus-minus`?N=(0,o.jsx)(x,{size:j}):typeof M==`function`?N=M({open:y.open,disabled:D}):(0,a.isValidElement)(M)&&(N=(0,o.jsx)(`span`,{className:i.default.rotating,children:M}));let P=M===`none`||N==null?null:(0,o.jsx)(`span`,{className:i.default.indicator,"aria-hidden":`true`,children:N}),F=s!=null&&s!==!1,I=t!=null&&t!==!1&&t!==``,L=`h${y.headingLevel}`;return(0,o.jsx)(L,{className:n.cx(i.default.heading,c),children:(0,o.jsxs)(`button`,{"aria-labelledby":F?`${C} ${T}`:C,"aria-describedby":I?w:void 0,..._,type:`button`,id:y.triggerId,"data-accordion-trigger":``,"data-state":y.open?`open`:`closed`,"data-disabled":D?``:void 0,"aria-expanded":y.open,"aria-controls":y.contentId,"aria-disabled":O&&!D?!0:void 0,disabled:D,className:n.cx(i.default.trigger,O&&i.default.locked,l),onClick:k,onKeyDown:A,children:[v.iconPosition===`start`&&P,r!=null&&(0,o.jsx)(`span`,{className:i.default.startIcon,"aria-hidden":`true`,children:r}),(0,o.jsxs)(`span`,{className:i.default.text,children:[(0,o.jsx)(`span`,{id:C,className:i.default.title,children:e}),I&&(0,o.jsx)(`span`,{id:w,className:i.default.description,children:t})]}),F&&(0,o.jsx)(`span`,{id:T,className:i.default.badge,children:s}),v.iconPosition===`end`&&P]})})};function C(e){let t=getComputedStyle(e),n=e=>e.split(`,`).map(e=>{let t=parseFloat(e);return Number.isNaN(t)?0:e.trim().endsWith(`ms`)?t:t*1e3}),r=n(t.transitionDuration),i=n(t.transitionDelay);return Math.max(0,...r.map((e,t)=>e+(i[t]??i[0]??0)))}var w=()=>typeof document<`u`&&!!document.body&&`onbeforematch`in document.body,T=({forceMount:e,hiddenUntilFound:r,bodyClassName:c,className:l,children:u,id:d,ref:f,...p})=>{let h=m(`Accordion.Content`),_=g(`Accordion.Content`),v=e??h.forceMount,y=r??h.hiddenUntilFound,{setContentId:b}=_;(0,a.useLayoutEffect)(()=>{b(d)},[d,b]);let x=_.open,S=(0,a.useRef)(null),T=t.useMergedRef(f,S),[E,D]=(0,a.useState)(x),[O,k]=(0,a.useState)(x),[A,j]=(0,a.useState)(!1),M=(0,a.useRef)(!1);(0,a.useLayoutEffect)(()=>{if(x){if(M.current){M.current=!1,j(!0),D(!0),k(!0);return}if(!E){D(!0);return}O||(S.current?.getBoundingClientRect(),k(!0))}else O&&k(!1)},[x,E,O]),(0,a.useEffect)(()=>{if(x||O||!E)return;let e=S.current,t=e?C(e):0;if(!e||t===0){D(!1);return}let n=()=>D(!1),r=t=>{t.target===e&&n()};e.addEventListener(`transitionend`,r);let i=window.setTimeout(n,t+50);return()=>{e.removeEventListener(`transitionend`,r),window.clearTimeout(i)}},[x,O,E]),(0,a.useEffect)(()=>{if(!A)return;let e=requestAnimationFrame(()=>j(!1));return()=>cancelAnimationFrame(e)},[A]);let[N,P]=(0,a.useState)(!1);(0,a.useEffect)(()=>{P(y&&w())},[y]),(0,a.useLayoutEffect)(()=>{let e=S.current;e&&N&&!E&&e.setAttribute(`hidden`,`until-found`)},[N,E]);let{setItemOpen:F}=h,I=_.value,L=_.disabled;(0,a.useEffect)(()=>{let e=S.current;if(!e||!N)return;let t=()=>{L||(M.current=!0,(0,s.flushSync)(()=>F(I,!0)))};return e.addEventListener(`beforematch`,t),()=>e.removeEventListener(`beforematch`,t)},[N,F,I,L]);let R=v||y||E;return(0,o.jsx)(`div`,{role:h.isRegion?`region`:void 0,"aria-labelledby":_.triggerId,...p,ref:T,id:_.contentId,"data-state":O?`open`:`closed`,"data-instant":A?``:void 0,hidden:!E,inert:E&&!O?!0:void 0,className:n.cx(i.default.content,l),children:(0,o.jsx)(`div`,{className:i.default.clip,children:(0,o.jsx)(`div`,{className:n.cx(i.default.body,c),children:R?u:null})})})},E=v;E.Item=y,E.Trigger=S,E.Content=T,exports.ACCORDION_AUTO_REGION_MAX=c,exports.Accordion=E,exports.AccordionContent=T,exports.AccordionItem=y,exports.AccordionTrigger=S;

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

@@ -0,0 +1,154 @@
+import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { Size } from '../../../types/common';
+import { HeadingLevel } from '../../primitives/Typography';
+/**
+ * Visual style of the accordion.
+ * - `separated`: each item is its own rounded, softly shadowed card (the default, friendly look).
+ * - `contained`: one bordered card with dividers between items.
+ * - `flush`: dividers only, no outer border or background. Good inside cards and sidebars.
+ */
+export type AccordionVariant = "separated" | "contained" | "flush";
+/** Which side of the trigger the expand indicator sits on. Logical, so `end` flips in RTL. */
+export type AccordionIconPosition = "start" | "end";
+/** Heading level (`h1`-`h6`) that wraps each trigger. */
+export type AccordionHeadingLevel = HeadingLevel;
+/** Render function for a fully custom indicator. Receives the item's open state; not rotated for you. */
+export type AccordionIconRender = (state: {
+    open: boolean;
+    disabled: boolean;
+}) => ReactNode;
+/**
+ * Expand indicator.
+ * - `"chevron"`: a chevron that rotates 180 degrees when open (springy).
+ * - `"plus-minus"`: a plus that turns into a minus when open.
+ * - `"none"`: no indicator (the trigger still exposes `aria-expanded`).
+ * - A React element: your own icon, rotated 180 degrees when open like the chevron.
+ * - A function: `({ open, disabled }) => ReactNode`, rendered as-is with no rotation.
+ */
+export type AccordionIcon = "chevron" | "plus-minus" | "none" | ReactElement | AccordionIconRender;
+/**
+ * Whether each panel is a `region` landmark labelled by its trigger.
+ * - `"auto"` (default): a region while the accordion has 6 items or fewer, and
+ *   a plain group otherwise, per WAI-ARIA APG advice to avoid landmark proliferation.
+ * - `true`: always a region. `false`: never a region.
+ */
+export type AccordionRegionRole = "auto" | boolean;
+/** Largest item count for which `regionRole="auto"` still renders regions. */
+export declare const ACCORDION_AUTO_REGION_MAX = 6;
+interface AccordionSharedProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange"> {
+    /** Visual style. @default "separated" */
+    variant?: AccordionVariant;
+    /** Trigger padding and type size. @default "md" */
+    size?: Size;
+    /** Heading level wrapping each trigger. Choose it by the page outline; override per item. @default 3 */
+    headingLevel?: AccordionHeadingLevel;
+    /** Expand indicator: `"chevron"`, `"plus-minus"`, `"none"`, a custom element, or a render function. @default "chevron" */
+    icon?: AccordionIcon;
+    /** Side of the trigger the indicator sits on. @default "end" */
+    iconPosition?: AccordionIconPosition;
+    /** WAI-ARIA APG arrow-key navigation between triggers (ArrowUp/ArrowDown wrap, Home, End). Tab always works. @default true */
+    keyboardNavigation?: boolean;
+    /** Panel landmark behavior. `"auto"` uses `role="region"` only when there are 6 items or fewer. @default "auto" */
+    regionRole?: AccordionRegionRole;
+    /** Keep every panel's children mounted while closed (still `hidden` from view and assistive technology). @default false */
+    forceMount?: boolean;
+    /**
+     * Hide closed panels with `hidden="until-found"` so the browser's find-in-page
+     * can search them; a match opens the item (via the `beforematch` event).
+     * Implies `forceMount`. Falls back to plain `hidden` in browsers without
+     * support (feature-detected with `"onbeforematch" in document.body`). @default false
+     */
+    hiddenUntilFound?: boolean;
+    /** Disable every item. @default false */
+    disabled?: boolean;
+    /** `Accordion.Item` elements. */
+    children?: ReactNode;
+}
+export interface AccordionSingleProps extends AccordionSharedProps {
+    /** `single` allows one open item at a time; `multiple` allows any number. @default "single" */
+    type?: "single";
+    /** In `single` mode, whether the open item can be closed so none is open. @default true */
+    collapsible?: boolean;
+    /** Controlled open item value (`null` for none). */
+    value?: string | null;
+    /** Initially open item value when uncontrolled. @default null */
+    defaultValue?: string | null;
+    /** Called with the open item value (or `null`) when it changes. */
+    onValueChange?: (value: string | null) => void;
+}
+export interface AccordionMultipleProps extends AccordionSharedProps {
+    /** `single` allows one open item at a time; `multiple` allows any number. */
+    type: "multiple";
+    /** Not used in `multiple` mode: every item can always close. */
+    collapsible?: never;
+    /** Controlled list of open item values. */
+    value?: string[];
+    /** Initially open item values when uncontrolled. @default [] */
+    defaultValue?: string[];
+    /** Called with the list of open item values when it changes. */
+    onValueChange?: (value: string[]) => void;
+}
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+/**
+ * A vertically stacked set of headings that each reveal a section of
+ * content. Follows the WAI-ARIA APG Accordion pattern: every trigger is a
+ * real `<button>` inside a heading, with `aria-expanded` and
+ * `aria-controls`, and each panel is labelled by its trigger.
+ *
+ * Compose with `Accordion.Item`, `Accordion.Trigger`, and `Accordion.Content`
+ * (also exported as `AccordionItem`, `AccordionTrigger`, `AccordionContent`).
+ */
+declare const AccordionRoot: (props: AccordionProps) => import("react").JSX.Element;
+export interface AccordionItemProps extends ComponentPropsWithRef<"div"> {
+    /** Unique value identifying this item in the accordion's `value`. */
+    value: string;
+    /** Prevent opening or closing this item. Its trigger is a disabled button and is skipped by arrow keys. @default false */
+    disabled?: boolean;
+    /** Heading level for this item's trigger, overriding the accordion's `headingLevel`. */
+    headingLevel?: AccordionHeadingLevel;
+    /** One `Accordion.Trigger` followed by one `Accordion.Content`. */
+    children?: ReactNode;
+}
+/** One collapsible section: a trigger and its content. Exposes `data-state="open" | "closed"` and `data-disabled`. */
+export declare const AccordionItem: ({ value, disabled: disabledProp, headingLevel, className, children, ...rest }: AccordionItemProps) => import("react").JSX.Element;
+export interface AccordionTriggerProps extends Omit<ComponentPropsWithRef<"button">, "type"> {
+    /** The trigger's visible title. Rendered in the bold display font; this is the accessible name. */
+    children?: ReactNode;
+    /** A secondary line under the title, in muted body text. Exposed as the button's accessible description. */
+    description?: ReactNode;
+    /** Decorative icon before the title (hidden from assistive technology). */
+    startIcon?: ReactNode;
+    /** A slot after the title, typically a `Badge`. Its text is included in the accessible name. */
+    badge?: ReactNode;
+    /** Class for the heading element that wraps the button. */
+    headingClassName?: string;
+}
+/**
+ * The button that toggles an item, rendered inside a heading (`h3` by
+ * default). Enter and Space toggle it; ArrowUp/ArrowDown/Home/End move
+ * between triggers when `keyboardNavigation` is on.
+ */
+export declare const AccordionTrigger: ({ children, description, startIcon, badge, headingClassName, className, id, onClick, onKeyDown, disabled: disabledProp, ...rest }: AccordionTriggerProps) => import("react").JSX.Element;
+export interface AccordionContentProps extends ComponentPropsWithRef<"div"> {
+    /** Keep the children mounted while closed (still hidden). Overrides the accordion's `forceMount`. */
+    forceMount?: boolean;
+    /** Use `hidden="until-found"` so find-in-page can reveal this panel. Overrides the accordion's `hiddenUntilFound`. */
+    hiddenUntilFound?: boolean;
+    /** Class for the inner padded element that holds the children. */
+    bodyClassName?: string;
+    /** The panel content. */
+    children?: ReactNode;
+}
+/**
+ * The collapsible panel. Animates its height open and closed, then gets the
+ * `hidden` attribute so closed content is invisible to assistive technology
+ * and unfocusable. A `role="region"` labelled by its trigger (see `regionRole`).
+ */
+export declare const AccordionContent: ({ forceMount: forceMountProp, hiddenUntilFound: hiddenUntilFoundProp, bodyClassName, className, children, id, ref, ...rest }: AccordionContentProps) => import("react").JSX.Element;
+type AccordionComponent = typeof AccordionRoot & {
+    Item: typeof AccordionItem;
+    Trigger: typeof AccordionTrigger;
+    Content: typeof AccordionContent;
+};
+export declare const Accordion: AccordionComponent;
+export {};

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

@@ -0,0 +1,327 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMergedRef as t } from "../../../hooks/useMergedRef.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { ChevronDownIcon as r, MinusIcon as i, PlusIcon as a } from "../../primitives/Icon/icons.mjs";
+import o from "./Accordion.module.css.mjs";
+import { createContext as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useId as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { flushSync as y } from "react-dom";
+//#region src/components/data-display/Accordion/Accordion.tsx
+var b = 6, x = {
+	separated: o.separated,
+	contained: o.contained,
+	flush: o.flush
+}, S = {
+	sm: o.sm,
+	md: o.md,
+	lg: o.lg
+}, C = {
+	start: o.iconStart,
+	end: o.iconEnd
+}, w = {
+	sm: "sm",
+	md: "md",
+	lg: "md"
+}, T = s(null);
+function E(e) {
+	let t = u(T);
+	if (!t) throw Error(`<${e}> must be used inside <Accordion>.`);
+	return t;
+}
+var D = s(null);
+function O(e) {
+	let t = u(D);
+	if (!t) throw Error(`<${e}> must be used inside <Accordion.Item>.`);
+	return t;
+}
+var k = (e) => Array.isArray(e) ? e : e == null ? [] : [e], A = (r) => {
+	let { type: i = "single", collapsible: a = !0, value: s, defaultValue: c, onValueChange: u, variant: d = "separated", size: f = "md", headingLevel: p = 3, icon: v = "chevron", iconPosition: y = "end", keyboardNavigation: b = !0, regionRole: w = "auto", forceMount: E = !1, hiddenUntilFound: D = !1, disabled: O = !1, className: A, children: j, ref: M, ...N } = r, P = i === "multiple", [F, I] = e({
+		value: s,
+		defaultValue: c ?? (P ? [] : null),
+		onChange: u
+	}), L = m(() => k(F), [F]), R = l((e, t) => {
+		I((n) => {
+			let r = k(n);
+			return t === r.includes(e) ? n : P ? t ? [...r, e] : r.filter((t) => t !== e) : t ? e : a ? null : n;
+		});
+	}, [
+		I,
+		P,
+		a
+	]), z = l((e) => R(e, !L.includes(e)), [R, L]), [B, V] = g(0), H = l(() => (V((e) => e + 1), () => V((e) => e - 1)), []), U = w === "auto" ? B <= 6 : w, W = h(null), G = t(M, W), K = m(() => ({
+		rootRef: W,
+		openValues: L,
+		multiple: P,
+		collapsible: P ? !0 : a,
+		disabled: O,
+		headingLevel: p,
+		size: f,
+		icon: v,
+		iconPosition: y,
+		keyboardNavigation: b,
+		isRegion: U,
+		forceMount: E,
+		hiddenUntilFound: D,
+		toggle: z,
+		setItemOpen: R,
+		registerItem: H
+	}), [
+		L,
+		P,
+		a,
+		O,
+		p,
+		f,
+		v,
+		y,
+		b,
+		U,
+		E,
+		D,
+		z,
+		R,
+		H
+	]);
+	return /* @__PURE__ */ _(T.Provider, {
+		value: K,
+		children: /* @__PURE__ */ _("div", {
+			...N,
+			ref: G,
+			"data-accordion-root": "",
+			"data-orientation": "vertical",
+			className: n(o.root, x[d], S[f], C[y], A),
+			children: j
+		})
+	});
+}, j = ({ value: e, disabled: t = !1, headingLevel: r, className: i, children: a, ...s }) => {
+	let c = E("Accordion.Item"), l = f(), [u, d] = g(), [h, v] = g(), { registerItem: y } = c;
+	p(() => y(), [y]);
+	let b = c.openValues.includes(e), x = c.disabled || t, S = m(() => ({
+		value: e,
+		open: b,
+		disabled: x,
+		headingLevel: r ?? c.headingLevel,
+		triggerId: u ?? `${l}-trigger`,
+		contentId: h ?? `${l}-content`,
+		setTriggerId: d,
+		setContentId: v
+	}), [
+		e,
+		b,
+		x,
+		r,
+		c.headingLevel,
+		u,
+		h,
+		l
+	]);
+	return /* @__PURE__ */ _(D.Provider, {
+		value: S,
+		children: /* @__PURE__ */ _("div", {
+			...s,
+			"data-state": b ? "open" : "closed",
+			"data-disabled": x ? "" : void 0,
+			className: n(o.item, i),
+			children: a
+		})
+	});
+}, M = ({ size: e }) => /* @__PURE__ */ _(r, {
+	size: e,
+	className: o.rotating
+}), N = ({ size: e }) => /* @__PURE__ */ v("span", {
+	className: o.plusMinus,
+	children: [/* @__PURE__ */ _(a, {
+		size: e,
+		className: o.plus
+	}), /* @__PURE__ */ _(i, {
+		size: e,
+		className: o.minus
+	})]
+}), P = ({ children: e, description: t, startIcon: r, badge: i, headingClassName: a, className: s, id: l, onClick: u, onKeyDown: d, disabled: m, ...h }) => {
+	let g = E("Accordion.Trigger"), y = O("Accordion.Trigger"), b = f(), x = `${b}-title`, S = `${b}-description`, C = `${b}-badge`, { setTriggerId: T } = y;
+	p(() => {
+		T(l);
+	}, [l, T]);
+	let D = y.disabled || !!m, k = y.open && !g.collapsible, A = (e) => {
+		u?.(e), !(e.defaultPrevented || D || k) && g.toggle(y.value);
+	}, j = (e) => {
+		if (d?.(e), e.defaultPrevented || !g.keyboardNavigation || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+		let t = g.rootRef.current;
+		if (!t) return;
+		let n = Array.from(t.querySelectorAll("[data-accordion-trigger]")).filter((e) => e.closest("[data-accordion-root]") === t && !e.disabled), r = n.indexOf(e.currentTarget);
+		if (r === -1 || n.length === 0) return;
+		let i = null;
+		switch (e.key) {
+			case "ArrowDown":
+				i = (r + 1) % n.length;
+				break;
+			case "ArrowUp":
+				i = (r - 1 + n.length) % n.length;
+				break;
+			case "Home":
+				i = 0;
+				break;
+			case "End":
+				i = n.length - 1;
+				break;
+			default: return;
+		}
+		e.preventDefault(), n[i]?.focus();
+	}, P = w[g.size], { icon: F } = g, I = null;
+	F === "chevron" ? I = /* @__PURE__ */ _(M, { size: P }) : F === "plus-minus" ? I = /* @__PURE__ */ _(N, { size: P }) : typeof F == "function" ? I = F({
+		open: y.open,
+		disabled: D
+	}) : c(F) && (I = /* @__PURE__ */ _("span", {
+		className: o.rotating,
+		children: F
+	}));
+	let L = F === "none" || I == null ? null : /* @__PURE__ */ _("span", {
+		className: o.indicator,
+		"aria-hidden": "true",
+		children: I
+	}), R = i != null && i !== !1, z = t != null && t !== !1 && t !== "", B = `h${y.headingLevel}`;
+	return /* @__PURE__ */ _(B, {
+		className: n(o.heading, a),
+		children: /* @__PURE__ */ v("button", {
+			"aria-labelledby": R ? `${x} ${C}` : x,
+			"aria-describedby": z ? S : void 0,
+			...h,
+			type: "button",
+			id: y.triggerId,
+			"data-accordion-trigger": "",
+			"data-state": y.open ? "open" : "closed",
+			"data-disabled": D ? "" : void 0,
+			"aria-expanded": y.open,
+			"aria-controls": y.contentId,
+			"aria-disabled": k && !D ? !0 : void 0,
+			disabled: D,
+			className: n(o.trigger, k && o.locked, s),
+			onClick: A,
+			onKeyDown: j,
+			children: [
+				g.iconPosition === "start" && L,
+				r != null && /* @__PURE__ */ _("span", {
+					className: o.startIcon,
+					"aria-hidden": "true",
+					children: r
+				}),
+				/* @__PURE__ */ v("span", {
+					className: o.text,
+					children: [/* @__PURE__ */ _("span", {
+						id: x,
+						className: o.title,
+						children: e
+					}), z && /* @__PURE__ */ _("span", {
+						id: S,
+						className: o.description,
+						children: t
+					})]
+				}),
+				R && /* @__PURE__ */ _("span", {
+					id: C,
+					className: o.badge,
+					children: i
+				}),
+				g.iconPosition === "end" && L
+			]
+		})
+	});
+};
+function F(e) {
+	let t = getComputedStyle(e), n = (e) => e.split(",").map((e) => {
+		let t = parseFloat(e);
+		return Number.isNaN(t) ? 0 : e.trim().endsWith("ms") ? t : t * 1e3;
+	}), r = n(t.transitionDuration), i = n(t.transitionDelay);
+	return Math.max(0, ...r.map((e, t) => e + (i[t] ?? i[0] ?? 0)));
+}
+var I = () => typeof document < "u" && !!document.body && "onbeforematch" in document.body, L = ({ forceMount: e, hiddenUntilFound: r, bodyClassName: i, className: a, children: s, id: c, ref: l, ...u }) => {
+	let f = E("Accordion.Content"), m = O("Accordion.Content"), v = e ?? f.forceMount, b = r ?? f.hiddenUntilFound, { setContentId: x } = m;
+	p(() => {
+		x(c);
+	}, [c, x]);
+	let S = m.open, C = h(null), w = t(l, C), [T, D] = g(S), [k, A] = g(S), [j, M] = g(!1), N = h(!1);
+	p(() => {
+		if (S) {
+			if (N.current) {
+				N.current = !1, M(!0), D(!0), A(!0);
+				return;
+			}
+			if (!T) {
+				D(!0);
+				return;
+			}
+			k || (C.current?.getBoundingClientRect(), A(!0));
+		} else k && A(!1);
+	}, [
+		S,
+		T,
+		k
+	]), d(() => {
+		if (S || k || !T) return;
+		let e = C.current, t = e ? F(e) : 0;
+		if (!e || t === 0) {
+			D(!1);
+			return;
+		}
+		let n = () => D(!1), r = (t) => {
+			t.target === e && n();
+		};
+		e.addEventListener("transitionend", r);
+		let i = window.setTimeout(n, t + 50);
+		return () => {
+			e.removeEventListener("transitionend", r), window.clearTimeout(i);
+		};
+	}, [
+		S,
+		k,
+		T
+	]), d(() => {
+		if (!j) return;
+		let e = requestAnimationFrame(() => M(!1));
+		return () => cancelAnimationFrame(e);
+	}, [j]);
+	let [P, L] = g(!1);
+	d(() => {
+		L(b && I());
+	}, [b]), p(() => {
+		let e = C.current;
+		e && P && !T && e.setAttribute("hidden", "until-found");
+	}, [P, T]);
+	let { setItemOpen: R } = f, z = m.value, B = m.disabled;
+	d(() => {
+		let e = C.current;
+		if (!e || !P) return;
+		let t = () => {
+			B || (N.current = !0, y(() => R(z, !0)));
+		};
+		return e.addEventListener("beforematch", t), () => e.removeEventListener("beforematch", t);
+	}, [
+		P,
+		R,
+		z,
+		B
+	]);
+	let V = v || b || T;
+	return /* @__PURE__ */ _("div", {
+		role: f.isRegion ? "region" : void 0,
+		"aria-labelledby": m.triggerId,
+		...u,
+		ref: w,
+		id: m.contentId,
+		"data-state": k ? "open" : "closed",
+		"data-instant": j ? "" : void 0,
+		hidden: !T,
+		inert: T && !k ? !0 : void 0,
+		className: n(o.content, a),
+		children: /* @__PURE__ */ _("div", {
+			className: o.clip,
+			children: /* @__PURE__ */ _("div", {
+				className: n(o.body, i),
+				children: V ? s : null
+			})
+		})
+	});
+}, R = A;
+R.Item = j, R.Trigger = P, R.Content = L;
+//#endregion
+export { b as ACCORDION_AUTO_REGION_MAX, R as Accordion, L as AccordionContent, j as AccordionItem, P as AccordionTrigger };

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

@@ -0,0 +1 @@
+var e=`_root_aanju_11`,t=`_sm_aanju_45`,n=`_md_aanju_67`,r=`_lg_aanju_75`,i=`_iconEnd_aanju_97`,a=`_iconStart_aanju_105`,o=`_separated_aanju_123`,s=`_item_aanju_131`,c=`_trigger_aanju_155`,l=`_contained_aanju_175`,u=`_flush_aanju_189`,d=`_heading_aanju_251`,f=`_locked_aanju_301`,p=`_text_aanju_341`,m=`_title_aanju_357`,h=`_description_aanju_373`,g=`_startIcon_aanju_397`,_=`_badge_aanju_399`,v=`_indicator_aanju_429`,y=`_rotating_aanju_489`,b=`_plusMinus_aanju_507`,x=`_plus_aanju_507`,S=`_minus_aanju_517`,C=`_content_aanju_569`,w=`_clip_aanju_609`,T=`_body_aanju_619`,E={root:e,sm:t,md:n,lg:r,iconEnd:i,iconStart:a,separated:o,item:s,trigger:c,contained:l,flush:u,heading:d,locked:f,text:p,title:m,description:h,startIcon:g,badge:_,indicator:v,rotating:y,plusMinus:b,plus:x,minus:S,content:C,clip:w,body:T};exports.badge=_,exports.body=T,exports.clip=w,exports.contained=l,exports.content=C,exports.default=E,exports.description=h,exports.flush=u,exports.heading=d,exports.iconEnd=i,exports.iconStart=a,exports.indicator=v,exports.item=s,exports.lg=r,exports.locked=f,exports.md=n,exports.minus=S,exports.plus=x,exports.plusMinus=b,exports.root=e,exports.rotating=y,exports.separated=o,exports.sm=t,exports.startIcon=g,exports.text=p,exports.title=m,exports.trigger=c;

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

@@ -0,0 +1,31 @@
+//#region src/components/data-display/Accordion/Accordion.module.css
+var e = "_root_aanju_11", t = "_sm_aanju_45", n = "_md_aanju_67", r = "_lg_aanju_75", i = "_iconEnd_aanju_97", a = "_iconStart_aanju_105", o = "_separated_aanju_123", s = "_item_aanju_131", c = "_trigger_aanju_155", l = "_contained_aanju_175", u = "_flush_aanju_189", d = "_heading_aanju_251", f = "_locked_aanju_301", p = "_text_aanju_341", m = "_title_aanju_357", h = "_description_aanju_373", g = "_startIcon_aanju_397", _ = "_badge_aanju_399", v = "_indicator_aanju_429", y = "_rotating_aanju_489", b = "_plusMinus_aanju_507", x = "_plus_aanju_507", S = "_minus_aanju_517", C = "_content_aanju_569", w = "_clip_aanju_609", T = "_body_aanju_619", E = {
+	root: e,
+	sm: t,
+	md: n,
+	lg: r,
+	iconEnd: i,
+	iconStart: a,
+	separated: o,
+	item: s,
+	trigger: c,
+	contained: l,
+	flush: u,
+	heading: d,
+	locked: f,
+	text: p,
+	title: m,
+	description: h,
+	startIcon: g,
+	badge: _,
+	indicator: v,
+	rotating: y,
+	plusMinus: b,
+	plus: x,
+	minus: S,
+	content: C,
+	clip: w,
+	body: T
+};
+//#endregion
+export { _ as badge, T as body, w as clip, l as contained, C as content, E as default, h as description, u as flush, d as heading, i as iconEnd, a as iconStart, v as indicator, s as item, r as lg, f as locked, n as md, S as minus, x as plus, b as plusMinus, e as root, y as rotating, o as separated, t as sm, g as startIcon, p as text, m as title, c as trigger };

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

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

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

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../primitives/Icon/icons.cjs.js"),r=require("./Avatar.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");function o(e){let t=Intl.Segmenter;return t?Array.from(new t(void 0,{granularity:`grapheme`}).segment(e),e=>e.segment):Array.from(e)}var s=/[\p{L}\p{N}]/u;function c(e){let t=o(e).find(e=>s.test(e));return t?t.toLocaleUpperCase():``}function l(e){if(!e)return``;let t=e.trim().split(/\s+/u).filter(e=>s.test(e));if(t.length===0)return``;let n=c(t[0]);return t.length===1?n:n+c(t[t.length-1])}var u=Object.freeze([`primary`,`accent`,`success`,`info`,`neutral`]);function d(e){let t=5381;for(let n of e.trim().toLocaleLowerCase())t=(t<<5)+t+(n.codePointAt(0)??0)|0;return u[Math.abs(t)%u.length]}var f={xs:r.default.xs,sm:r.default.sm,md:r.default.md,lg:r.default.lg,xl:r.default.xl,"2xl":r.default.size2xl},p={circle:r.default.circle,rounded:r.default.rounded,square:r.default.square},m={soft:r.default.soft,solid:r.default.solid},h={neutral:r.default.toneNeutral,primary:r.default.tonePrimary,accent:r.default.toneAccent,success:r.default.toneSuccess,warning:r.default.toneWarning,danger:r.default.toneDanger,info:r.default.toneInfo},g={neutral:r.default.ringNeutral,primary:r.default.ringPrimary,accent:r.default.ringAccent,success:r.default.ringSuccess,warning:r.default.ringWarning,danger:r.default.ringDanger,info:r.default.ringInfo},_={online:r.default.statusOnline,away:r.default.statusAway,busy:r.default.statusBusy,offline:r.default.statusOffline},v={sm:r.default.spacingSm,md:r.default.spacingMd,lg:r.default.spacingLg},y=(0,i.createContext)(null);function b({src:o,alt:s,name:c,size:u,shape:v,tone:b=`neutral`,variant:x=`soft`,colorFromName:S=!1,status:C,statusLabel:w,ring:T=!1,ringTone:E=`accent`,decorative:D=!1,icon:O,imgProps:ee,onImageStatusChange:te,className:k,"aria-label":A,"aria-labelledby":j,...M}){let N=e.useMessages(),P=(0,i.useContext)(y),ne=P?.size??u??`md`,re=v??P?.shape??`circle`,[F,I]=(0,i.useState)(null),L=o?F?.src===o?F.status:`loading`:void 0,R=e=>{!o||F?.src===o&&F.status===e||(I({src:o,status:e}),te?.(e))},{onLoad:z,onError:B,className:V,ref:H,...U}=ee??{},W=e=>{e&&e.complete&&F?.src!==o&&R(e.naturalWidth>0?`loaded`:`error`),typeof H==`function`?H(e):H&&(H.current=e)},G=e=>{R(`loaded`),z?.(e)},K=e=>{R(`error`),B?.(e)},q=l(c),J=S&&c?.trim()?d(c):b,Y=!!o&&L!==`error`,X=D||s===``&&!c,Z=s||c?.trim()||N.avatar.fallbackName,Q=C?w??N.avatar.status[C]:void 0,ie=Q?`${Z} (${Q})`:Z,ae=X&&!Q?{"aria-hidden":!0}:X?{role:`img`,"aria-label":Q}:{role:`img`,"aria-label":j?A:A===void 0?ie:(e=>Q?`${e} (${Q})`:e)(A),"aria-labelledby":j},$;return $=Y?(0,a.jsx)(`img`,{...U,ref:W,src:o,alt:``,className:t.cx(r.default.image,L===`loaded`&&r.default.imageLoaded,V),onLoad:G,onError:K}):q?(0,a.jsx)(`span`,{className:r.default.initials,children:q}):O??(0,a.jsx)(n.UserIcon,{className:r.default.icon}),(0,a.jsxs)(`span`,{...M,...ae,"data-status":C,"data-image-status":L,className:t.cx(r.default.root,f[ne],p[re],m[x],h[J],P&&r.default.inGroup,T&&r.default.ring,T&&g[E],k),children:[(0,a.jsx)(`span`,{className:r.default.face,children:$}),C&&(0,a.jsx)(`span`,{className:t.cx(r.default.status,_[C]),"aria-hidden":`true`})]})}function x({size:n=`md`,shape:o,max:s,spacing:c=`md`,surplusLabel:l,renderSurplus:u,className:d,children:m,...h}){let g=e.useMessages(),_=l??g.avatar.surplus,b=i.Children.toArray(m).filter(i.isValidElement),x=s!==void 0&&s>=0&&s<b.length?Math.floor(s):b.length,S=b.slice(0,x),C=b.slice(x),w=C.length;return(0,a.jsx)(y.Provider,{value:{size:n,shape:o},children:(0,a.jsxs)(`div`,{role:`group`,...h,className:t.cx(r.default.group,f[n],v[c],d),children:[S,w>0&&(u?u(w,C):(0,a.jsx)(`span`,{role:`img`,"aria-label":_(w),className:t.cx(r.default.root,f[n],p[o??`circle`],r.default.soft,r.default.toneNeutral,r.default.inGroup),children:(0,a.jsx)(`span`,{className:r.default.face,children:(0,a.jsxs)(`span`,{className:t.cx(r.default.initials,r.default.surplus),"aria-hidden":`true`,children:[`+`,w]})})}))]})})}exports.Avatar=b,exports.AvatarGroup=x,exports.avatarNameTones=u,exports.avatarToneFromName=d,exports.getInitials=l;

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

@@ -0,0 +1,114 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Size, Tone } from '../../../types/common';
+/** Avatar size: `xs` 24px, `sm` 32px, `md` 40px, `lg` 48px, `xl` 64px, `2xl` 96px. */
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+/** Avatar corner shape: `circle` (`--radius-round`), `rounded` (`--radius-md`), `square` (`--radius-sm`). */
+export type AvatarShape = "circle" | "rounded" | "square";
+/** Fill style of the initials/icon fallback: `soft` (subtle tone fill) or `solid` (strong tone fill). */
+export type AvatarVariant = "soft" | "solid";
+/** Presence status shown as a dot at the bottom-end corner. */
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+/** Loading state of the avatar image. */
+export type AvatarImageStatus = "loading" | "loaded" | "error";
+/**
+ * Derives up to two initials from a name: the first letter of the first and
+ * last words. Single names give one initial. Handles extra whitespace and
+ * non-Latin scripts; returns `""` when nothing usable is found.
+ *
+ * `getInitials("Dana  Hernandez")` → `"DH"`, `getInitials("Zoë")` → `"Z"`,
+ * `getInitials("José María García")` → `"JG"`, `getInitials("王小明")` → `"王"`.
+ */
+export declare function getInitials(name: string | undefined | null): string;
+/**
+ * Tones cycled by `colorFromName`. No warning or danger: a person's avatar
+ * in alert amber or red reads as an error next to status dots. Changing this
+ * list re-colors every name, so treat it as stable.
+ */
+export declare const avatarNameTones: readonly Tone[];
+/**
+ * Deterministically picks a tone from a name (string hash), so the same name
+ * always gets the same color.
+ */
+export declare function avatarToneFromName(name: string): Tone;
+export interface AvatarProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    /** Image URL. When it fails to load, the avatar falls back to initials, then to a user icon. */
+    src?: string;
+    /**
+     * Text alternative for the image. Used as the accessible name (falls back to
+     * `name`). Pass `alt=""` with no `name` to make the avatar decorative.
+     */
+    alt?: string;
+    /** Person's name. Used for initials, `colorFromName`, and the accessible name when `alt` is not set. */
+    name?: string;
+    /** Size. `xs` 24px, `sm` 32px, `md` 40px, `lg` 48px, `xl` 64px, `2xl` 96px. Inside an `AvatarGroup`, the group's size wins. */
+    size?: AvatarSize;
+    /** Corner shape. */
+    shape?: AvatarShape;
+    /** Fallback fill color (initials or icon). Ignored when `colorFromName` is set and a name is given. */
+    tone?: Tone;
+    /** Fallback fill style: `soft` (subtle fill) or `solid` (strong fill). */
+    variant?: AvatarVariant;
+    /** Pick the fallback tone from a hash of `name`, so lists are colorful but stable. */
+    colorFromName?: boolean;
+    /** Presence dot at the bottom-end corner. Also appended to the accessible name, e.g. "Dana Hernandez (online)". */
+    status?: AvatarStatus;
+    /** Text for the status in the accessible name. Defaults to the status value ("online", "away", ...). */
+    statusLabel?: string;
+    /**
+     * Highlight ring (e.g. the active player). Visual only: also convey the
+     * state in text nearby or in `aria-label`.
+     */
+    ring?: boolean;
+    /** Color of the highlight ring. Uses the tone's `--color-*-border` token. */
+    ringTone?: Tone;
+    /**
+     * Hide the avatar from assistive technology. Use when the person's name is
+     * already visible next to the avatar.
+     */
+    decorative?: boolean;
+    /** Custom fallback icon shown when there is no image and no initials. Defaults to `UserIcon`. */
+    icon?: ReactNode;
+    /** Extra props for the inner `<img>` (e.g. `loading`, `crossOrigin`, `referrerPolicy`). */
+    imgProps?: Omit<ComponentPropsWithRef<"img">, "src" | "alt">;
+    /** Called with the new image status when the image loads or fails. */
+    onImageStatusChange?: (status: AvatarImageStatus) => void;
+}
+/**
+ * A person's picture, with a fallback chain of image, initials, then a user
+ * icon. Supports a presence status dot, a highlight ring, and stacking in an
+ * `AvatarGroup`.
+ */
+export declare function Avatar({ src, alt, name, size, shape, tone, variant, colorFromName, status, statusLabel, ring, ringTone, decorative, icon, imgProps, onImageStatusChange, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: AvatarProps): import("react").JSX.Element;
+type AvatarGroupName = {
+    /** Accessible name for the group, e.g. "Starting lineup". */
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    "aria-label"?: string;
+    /** ID of a visible element that names the group. */
+    "aria-labelledby": string;
+};
+interface AvatarGroupOwnProps {
+    /** Size applied to every avatar in the group (overrides each avatar's own `size`). */
+    size?: AvatarSize;
+    /** Default shape for avatars in the group. An avatar's own `shape` still wins. */
+    shape?: AvatarShape;
+    /** Maximum number of avatars shown. Extra avatars collapse into a "+N" surplus avatar. */
+    max?: number;
+    /** How much avatars overlap: `sm` 15%, `md` 25%, `lg` 40% of the avatar size. */
+    spacing?: Size;
+    /** Accessible label for the surplus avatar. Defaults to `and ${count} more`. */
+    surplusLabel?: (count: number) => string;
+    /** Replace the default "+N" surplus avatar. Receives the hidden count and the hidden children. */
+    renderSurplus?: (count: number, hidden: ReactNode[]) => ReactNode;
+    /** Avatars to stack. */
+    children?: ReactNode;
+}
+/** Props for `AvatarGroup`. Requires `aria-label` or `aria-labelledby`. */
+export type AvatarGroupProps = AvatarGroupOwnProps & AvatarGroupName & Omit<ComponentPropsWithRef<"div">, keyof AvatarGroupOwnProps | "aria-label" | "aria-labelledby">;
+/**
+ * Overlapping stack of avatars in a labelled `role="group"`. Avatars beyond
+ * `max` collapse into a "+N" surplus avatar with an accessible label.
+ */
+export declare function AvatarGroup({ size, shape, max, spacing, surplusLabel: surplusLabelProp, renderSurplus, className, children, ...rest }: AvatarGroupProps): import("react").JSX.Element;
+export {};