@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,178 @@
+import { cx as e } from "../../../utils/cx.mjs";
+import { FillSlotContext as t } from "../../../utils/fillSlot.mjs";
+import { Icon as n } from "../../primitives/Icon/Icon.mjs";
+import { Heading as r, Text as i } from "../../primitives/Typography/Typography.mjs";
+import a from "./Card.module.css.mjs";
+import { Children as o, createContext as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useId as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/data-display/Card/Card.tsx
+var g = {
+	elevated: a.elevated,
+	outline: a.outline,
+	filled: a.filled,
+	soft: a.soft
+}, _ = {
+	neutral: a.toneNeutral,
+	primary: a.tonePrimary,
+	accent: a.toneAccent,
+	success: a.toneSuccess,
+	warning: a.toneWarning,
+	danger: a.toneDanger,
+	info: a.toneInfo
+}, v = {
+	none: a.radiusNone,
+	xs: a.radiusXs,
+	sm: a.radiusSm,
+	md: a.radiusMd,
+	lg: a.radiusLg,
+	xl: a.radiusXl,
+	"2xl": a.radius2xl,
+	pill: a.radiusPill
+}, y = {
+	none: a.paddingNone,
+	sm: a.paddingSm,
+	md: a.paddingMd,
+	lg: a.paddingLg
+}, b = {
+	vertical: a.vertical,
+	horizontal: a.horizontal
+}, x = {
+	"16/9": a.aspect16x9,
+	"4/3": a.aspect4x3,
+	"3/2": a.aspect3x2,
+	"1/1": a.aspect1x1,
+	"21/9": a.aspect21x9,
+	auto: a.aspectAuto
+}, S = {
+	top: a.mediaTop,
+	bottom: a.mediaBottom,
+	start: a.mediaStart
+}, C = {
+	start: a.justifyStart,
+	center: a.justifyCenter,
+	end: a.justifyEnd,
+	between: a.justifyBetween,
+	stretch: a.justifyStretch
+}, w = s(null);
+function T(t) {
+	let { as: r, variant: i = "elevated", tone: s, radius: u = "xl", padding: d = "md", orientation: f = "vertical", interactive: x = !1, selected: S = !1, className: C, children: T, ...E } = t, D = r ?? "article", O = s ?? (i === "soft" ? "primary" : void 0), [k, A] = p([]), j = l((e) => (A((t) => t.includes(e) ? t : [...t, e]), () => A((t) => t.filter((t) => t !== e))), []), N = k[0] ?? null, P = {
+		orientation: f,
+		registerTitle: j
+	}, F = T;
+	if (f === "horizontal") {
+		let e = [], t = [];
+		o.forEach(T, (n) => {
+			c(n) && n.type === M ? e.push(n) : n != null && typeof n != "boolean" && t.push(n);
+		}), F = /* @__PURE__ */ h("div", {
+			className: a.layout,
+			children: [e, /* @__PURE__ */ m("div", {
+				className: a.content,
+				children: t
+			})]
+		});
+	}
+	let I = (r ?? "article") === "article" && N !== null && E["aria-label"] === void 0 && E["aria-labelledby"] === void 0;
+	return /* @__PURE__ */ m(w.Provider, {
+		value: P,
+		children: /* @__PURE__ */ h(D, {
+			"aria-labelledby": I ? N : void 0,
+			...E,
+			"data-selected": S || void 0,
+			className: e(a.root, g[i], O && _[O], v[u], y[d], b[f], x && a.interactive, S && a.selected, C),
+			children: [F, S && /* @__PURE__ */ m("span", {
+				className: a.selectedBadge,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ m(n, {
+					name: "check",
+					size: "sm",
+					strokeWidth: 3
+				})
+			})]
+		})
+	});
+}
+var E = (e) => typeof e == "string" || typeof e == "number";
+function D({ title: t, description: n, action: r, className: i, children: o, ...s }) {
+	let c = t != null || n != null || o != null && o !== !1;
+	return /* @__PURE__ */ h("div", {
+		...s,
+		className: e(a.header, i),
+		children: [c && /* @__PURE__ */ h("div", {
+			className: a.headerText,
+			children: [
+				E(t) ? /* @__PURE__ */ m(O, { children: t }) : t,
+				E(n) ? /* @__PURE__ */ m(k, { children: n }) : n,
+				o
+			]
+		}), r != null && /* @__PURE__ */ m("div", {
+			className: a.action,
+			children: r
+		})]
+	});
+}
+function O({ level: t = 3, size: n = "xl", href: i, id: o, className: s, children: c, ...l }) {
+	let p = u(w), h = f(), g = o ?? `${h}-title`, _ = p?.registerTitle;
+	return d(() => {
+		if (_) return _(g);
+	}, [_, g]), /* @__PURE__ */ m(r, {
+		...l,
+		id: g,
+		level: t,
+		size: n,
+		tone: "inherit",
+		className: e(a.title, s),
+		children: i === void 0 ? c : /* @__PURE__ */ m(N, {
+			href: i,
+			children: c
+		})
+	});
+}
+function k({ className: t, ...n }) {
+	return /* @__PURE__ */ m(i, {
+		...n,
+		size: "sm",
+		tone: "inherit",
+		className: e(a.description, t)
+	});
+}
+function A({ className: t, ...n }) {
+	return /* @__PURE__ */ m("div", {
+		...n,
+		className: e(a.body, t)
+	});
+}
+function j({ justify: t = "end", className: n, ...r }) {
+	return /* @__PURE__ */ m("div", {
+		...r,
+		className: e(a.footer, C[t], n)
+	});
+}
+function M({ aspectRatio: n = "16/9", position: r, className: i, ...o }) {
+	let s = u(w), c = r ?? (s?.orientation === "horizontal" ? "start" : "top");
+	return /* @__PURE__ */ m(t.Provider, {
+		value: !0,
+		children: /* @__PURE__ */ m("div", {
+			...o,
+			className: e(a.media, x[n], S[c], i)
+		})
+	});
+}
+function N(t) {
+	let { as: n, className: r, ...i } = t;
+	return /* @__PURE__ */ m(n ?? "a", {
+		type: n === "button" ? "button" : void 0,
+		...i,
+		className: e(a.overlay, r)
+	});
+}
+var P = Object.assign(T, {
+	Header: D,
+	Title: O,
+	Description: k,
+	Body: A,
+	Footer: j,
+	Media: M,
+	LinkOverlay: N
+});
+//#endregion
+export { P as Card, A as CardBody, k as CardDescription, j as CardFooter, D as CardHeader, N as CardLinkOverlay, M as CardMedia, O as CardTitle };

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

@@ -0,0 +1 @@
+var e=`_root_txzt6_33`,t=`_elevated_txzt6_113`,n=`_outline_txzt6_123`,r=`_toneNeutral_txzt6_137`,i=`_tonePrimary_txzt6_137`,a=`_toneAccent_txzt6_137`,o=`_toneSuccess_txzt6_137`,s=`_toneWarning_txzt6_137`,c=`_toneDanger_txzt6_137`,l=`_toneInfo_txzt6_137`,u=`_filled_txzt6_145`,d=`_soft_txzt6_159`,f=`_radiusNone_txzt6_249`,p=`_radiusXs_txzt6_255`,m=`_radiusSm_txzt6_261`,h=`_radiusMd_txzt6_267`,g=`_radiusLg_txzt6_273`,_=`_radiusXl_txzt6_279`,v=`_radius2xl_txzt6_285`,y=`_radiusPill_txzt6_293`,b=`_paddingNone_txzt6_303`,x=`_paddingSm_txzt6_311`,S=`_paddingMd_txzt6_319`,C=`_paddingLg_txzt6_327`,w=`_vertical_txzt6_341`,T=`_horizontal_txzt6_353`,E=`_layout_txzt6_365`,D=`_content_txzt6_379`,O=`_mediaStart_txzt6_409`,k=`_header_txzt6_449`,A=`_headerText_txzt6_465`,j=`_action_txzt6_481`,M=`_title_txzt6_497`,N=`_description_txzt6_507`,P=`_body_txzt6_521`,F=`_footer_txzt6_547`,I=`_justifyStart_txzt6_565`,L=`_justifyCenter_txzt6_571`,R=`_justifyEnd_txzt6_577`,z=`_justifyBetween_txzt6_583`,B=`_justifyStretch_txzt6_589`,V=`_media_txzt6_409`,H=`_aspect16x9_txzt6_651`,U=`_aspect4x3_txzt6_657`,W=`_aspect3x2_txzt6_663`,G=`_aspect1x1_txzt6_669`,K=`_aspect21x9_txzt6_675`,q=`_aspectAuto_txzt6_681`,J=`_mediaTop_txzt6_699`,Y=`_mediaBottom_txzt6_715`,X=`_overlay_txzt6_729`,Z=`_interactive_txzt6_831`,Q=`_selected_txzt6_883`,$=`_selectedBadge_txzt6_895`,ee={root:e,elevated:t,outline:n,toneNeutral:r,tonePrimary:i,toneAccent:a,toneSuccess:o,toneWarning:s,toneDanger:c,toneInfo:l,filled:u,soft:d,radiusNone:f,radiusXs:p,radiusSm:m,radiusMd:h,radiusLg:g,radiusXl:_,radius2xl:v,radiusPill:y,paddingNone:b,paddingSm:x,paddingMd:S,paddingLg:C,vertical:w,horizontal:T,layout:E,content:D,mediaStart:O,header:k,headerText:A,action:j,title:M,description:N,body:P,footer:F,justifyStart:I,justifyCenter:L,justifyEnd:R,justifyBetween:z,justifyStretch:B,media:V,aspect16x9:H,aspect4x3:U,aspect3x2:W,aspect1x1:G,aspect21x9:K,aspectAuto:q,mediaTop:J,mediaBottom:Y,overlay:X,interactive:Z,selected:Q,selectedBadge:$};exports.action=j,exports.aspect16x9=H,exports.aspect1x1=G,exports.aspect21x9=K,exports.aspect3x2=W,exports.aspect4x3=U,exports.aspectAuto=q,exports.body=P,exports.content=D,exports.default=ee,exports.description=N,exports.elevated=t,exports.filled=u,exports.footer=F,exports.header=k,exports.headerText=A,exports.horizontal=T,exports.interactive=Z,exports.justifyBetween=z,exports.justifyCenter=L,exports.justifyEnd=R,exports.justifyStart=I,exports.justifyStretch=B,exports.layout=E,exports.media=V,exports.mediaBottom=Y,exports.mediaStart=O,exports.mediaTop=J,exports.outline=n,exports.overlay=X,exports.paddingLg=C,exports.paddingMd=S,exports.paddingNone=b,exports.paddingSm=x,exports.radius2xl=v,exports.radiusLg=g,exports.radiusMd=h,exports.radiusNone=f,exports.radiusPill=y,exports.radiusSm=m,exports.radiusXl=_,exports.radiusXs=p,exports.root=e,exports.selected=Q,exports.selectedBadge=$,exports.soft=d,exports.title=M,exports.toneAccent=a,exports.toneDanger=c,exports.toneInfo=l,exports.toneNeutral=r,exports.tonePrimary=i,exports.toneSuccess=o,exports.toneWarning=s,exports.vertical=w;

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

@@ -0,0 +1,59 @@
+//#region src/components/data-display/Card/Card.module.css
+var e = "_root_txzt6_33", t = "_elevated_txzt6_113", n = "_outline_txzt6_123", r = "_toneNeutral_txzt6_137", i = "_tonePrimary_txzt6_137", a = "_toneAccent_txzt6_137", o = "_toneSuccess_txzt6_137", s = "_toneWarning_txzt6_137", c = "_toneDanger_txzt6_137", l = "_toneInfo_txzt6_137", u = "_filled_txzt6_145", d = "_soft_txzt6_159", f = "_radiusNone_txzt6_249", p = "_radiusXs_txzt6_255", m = "_radiusSm_txzt6_261", h = "_radiusMd_txzt6_267", g = "_radiusLg_txzt6_273", _ = "_radiusXl_txzt6_279", v = "_radius2xl_txzt6_285", y = "_radiusPill_txzt6_293", b = "_paddingNone_txzt6_303", x = "_paddingSm_txzt6_311", S = "_paddingMd_txzt6_319", C = "_paddingLg_txzt6_327", w = "_vertical_txzt6_341", T = "_horizontal_txzt6_353", E = "_layout_txzt6_365", D = "_content_txzt6_379", O = "_mediaStart_txzt6_409", k = "_header_txzt6_449", A = "_headerText_txzt6_465", j = "_action_txzt6_481", M = "_title_txzt6_497", N = "_description_txzt6_507", P = "_body_txzt6_521", F = "_footer_txzt6_547", I = "_justifyStart_txzt6_565", L = "_justifyCenter_txzt6_571", R = "_justifyEnd_txzt6_577", z = "_justifyBetween_txzt6_583", B = "_justifyStretch_txzt6_589", V = "_media_txzt6_409", H = "_aspect16x9_txzt6_651", U = "_aspect4x3_txzt6_657", W = "_aspect3x2_txzt6_663", G = "_aspect1x1_txzt6_669", K = "_aspect21x9_txzt6_675", q = "_aspectAuto_txzt6_681", J = "_mediaTop_txzt6_699", Y = "_mediaBottom_txzt6_715", X = "_overlay_txzt6_729", Z = "_interactive_txzt6_831", Q = "_selected_txzt6_883", $ = "_selectedBadge_txzt6_895", ee = {
+	root: e,
+	elevated: t,
+	outline: n,
+	toneNeutral: r,
+	tonePrimary: i,
+	toneAccent: a,
+	toneSuccess: o,
+	toneWarning: s,
+	toneDanger: c,
+	toneInfo: l,
+	filled: u,
+	soft: d,
+	radiusNone: f,
+	radiusXs: p,
+	radiusSm: m,
+	radiusMd: h,
+	radiusLg: g,
+	radiusXl: _,
+	radius2xl: v,
+	radiusPill: y,
+	paddingNone: b,
+	paddingSm: x,
+	paddingMd: S,
+	paddingLg: C,
+	vertical: w,
+	horizontal: T,
+	layout: E,
+	content: D,
+	mediaStart: O,
+	header: k,
+	headerText: A,
+	action: j,
+	title: M,
+	description: N,
+	body: P,
+	footer: F,
+	justifyStart: I,
+	justifyCenter: L,
+	justifyEnd: R,
+	justifyBetween: z,
+	justifyStretch: B,
+	media: V,
+	aspect16x9: H,
+	aspect4x3: U,
+	aspect3x2: W,
+	aspect1x1: G,
+	aspect21x9: K,
+	aspectAuto: q,
+	mediaTop: J,
+	mediaBottom: Y,
+	overlay: X,
+	interactive: Z,
+	selected: Q,
+	selectedBadge: $
+};
+//#endregion
+export { j as action, H as aspect16x9, G as aspect1x1, K as aspect21x9, W as aspect3x2, U as aspect4x3, q as aspectAuto, P as body, D as content, ee as default, N as description, t as elevated, u as filled, F as footer, k as header, A as headerText, T as horizontal, Z as interactive, z as justifyBetween, L as justifyCenter, R as justifyEnd, I as justifyStart, B as justifyStretch, E as layout, V as media, Y as mediaBottom, O as mediaStart, J as mediaTop, n as outline, X as overlay, C as paddingLg, S as paddingMd, b as paddingNone, x as paddingSm, v as radius2xl, g as radiusLg, h as radiusMd, f as radiusNone, y as radiusPill, m as radiusSm, _ as radiusXl, p as radiusXs, e as root, Q as selected, $ as selectedBadge, d as soft, M as title, a as toneAccent, c as toneDanger, l as toneInfo, r as toneNeutral, i as tonePrimary, o as toneSuccess, s as toneWarning, w as vertical };

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

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

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

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

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

@@ -0,0 +1,117 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Radius, Responsive, Space } from '../../../types/common';
+/**
+ * Where the Previous / Next (and Pause / Play) buttons sit.
+ * - `overlay`: on top of the slides, at the inline-start and inline-end edges.
+ * - `bottom`: in a row below the slides, after the indicators.
+ */
+export type CarouselControlsPlacement = "overlay" | "bottom";
+/** Text used for the carousel's built-in controls and announcements. Override for other languages. */
+export interface CarouselLabels {
+    /** Name of the Previous button. @default "Previous slide" */
+    previous: string;
+    /** Name of the Next button. @default "Next slide" */
+    next: string;
+    /** Name of the rotation button while autoplay is stopped. @default "Start automatic slide show" */
+    start: string;
+    /** Name of the rotation button while autoplay is running. @default "Stop automatic slide show" */
+    stop: string;
+    /** Name of the scrollable slides region. @default "Slides" */
+    slides: string;
+    /** Name of the indicator group. @default "Choose slide" */
+    indicators: string;
+    /** Name of an indicator button. @default (n) => `Go to slide ${n}` */
+    goTo: (slide: number, total: number) => string;
+    /** Default name of a slide without its own `label`. @default (n, total) => `${n} of ${total}` */
+    slide: (slide: number, total: number) => string;
+    /**
+     * Text announced (politely) when the shown slides change while autoplay is off.
+     * `first` and `last` are 1-based; they are equal when one slide is fully visible.
+     * @default "Slide 2 of 8" or "Slides 2 to 4 of 8"
+     */
+    status: (first: number, last: number, total: number) => string;
+}
+/** The carousel needs an accessible name: `aria-label` or `aria-labelledby` (one is required). */
+type CarouselNameProps = {
+    /** Accessible name of the carousel, e.g. "Game highlights". Required unless `aria-labelledby` is set. */
+    "aria-label": string;
+    /** Id of a visible heading that names the carousel. Required unless `aria-label` is set. */
+    "aria-labelledby"?: string;
+} | {
+    /** Accessible name of the carousel, e.g. "Game highlights". Required unless `aria-labelledby` is set. */
+    "aria-label"?: string;
+    /** Id of a visible heading that names the carousel. Required unless `aria-label` is set. */
+    "aria-labelledby": string;
+};
+export interface CarouselOwnProps {
+    /** The slides: `Carousel.Slide` elements. Fragments are flattened, so each slide counts on its own. */
+    children?: ReactNode;
+    /** Controlled index of the current (leading) slide, 0-based. */
+    index?: number;
+    /** Initial index when uncontrolled. @default 0 */
+    defaultIndex?: number;
+    /** Called with the new index when the current slide changes (buttons, indicators, swipe, autoplay). */
+    onIndexChange?: (index: number) => void;
+    /**
+     * How many slides fit in view. Fractions show a peek of the next slide (e.g. `1.2`).
+     * Responsive: `{ base: 1, md: 2, lg: 3 }`. @default 1
+     */
+    slidesPerView?: Responsive<number>;
+    /** Space between slides (a `--space-*` step). Responsive. @default 4 */
+    gap?: Responsive<Space>;
+    /**
+     * Wraps Previous / Next (and arrow keys) around the ends. When `false`, the
+     * buttons disable at the first and last positions. @default false
+     */
+    loop?: boolean;
+    /** Shows a row of slide picker buttons ("Go to slide 3") below the slides. @default false */
+    indicators?: boolean;
+    /**
+     * Rotates slides automatically every `interval` ms and shows a Pause / Play
+     * button as the first control. Rotation pauses while hovered, stops when
+     * keyboard focus enters the carousel, and doesn't start on its own under
+     * `prefers-reduced-motion` (the Play button still works). @default false
+     */
+    autoplay?: boolean;
+    /** Time each slide shows during autoplay, in milliseconds. @default 5000 */
+    interval?: number;
+    /** Where the Previous / Next buttons sit. @default "overlay" */
+    controlsPlacement?: CarouselControlsPlacement;
+    /** Corner rounding of each slide. @default "lg" */
+    radius?: Radius;
+    /** Overrides for the built-in control names and announcements. */
+    labels?: Partial<CarouselLabels>;
+    /** Additional class names for the root `<section>`. */
+    className?: string;
+}
+export type CarouselProps = CarouselOwnProps & CarouselNameProps & Omit<ComponentPropsWithRef<"section">, keyof CarouselOwnProps | "aria-label" | "aria-labelledby">;
+export interface CarouselSlideProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Accessible name of the slide. Defaults to its position, e.g. "3 of 8".
+     * Ignored when `aria-label` or `aria-labelledby` is passed.
+     */
+    label?: string;
+    /** The slide content. */
+    children?: ReactNode;
+}
+/**
+ * A row of slides that scroll horizontally with CSS scroll snap (so touch,
+ * trackpad, and swipe work natively), plus Previous / Next buttons, optional
+ * slide picker indicators, and optional autoplay with a Pause / Play button.
+ * Follows the WAI-ARIA APG carousel pattern: a named `<section>` with
+ * `aria-roledescription="carousel"`, and slides as `role="group"` with
+ * `aria-roledescription="slide"`. Slides fully out of view are `inert`.
+ */
+declare function CarouselRoot({ children, index: indexProp, defaultIndex, onIndexChange, slidesPerView, gap, loop, indicators, autoplay, interval, controlsPlacement, radius, labels: labelsProp, className, style, onFocus, onPointerEnter, onPointerLeave, ...rest }: CarouselProps): import("react").JSX.Element;
+/**
+ * One slide. Renders `role="group"` with `aria-roledescription="slide"`, named
+ * by `label` or by its position ("3 of 8"). Becomes `inert` while fully out of
+ * view, so keyboard and screen reader users only reach what is shown.
+ */
+export declare function CarouselSlide({ label, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: CarouselSlideProps): import("react").JSX.Element;
+type CarouselComponent = typeof CarouselRoot & {
+    /** One slide. See `CarouselSlide`. */
+    Slide: typeof CarouselSlide;
+};
+export declare const Carousel: CarouselComponent;
+export {};