@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

package/dist/components/layout/ResizablePanels/ResizablePanels.mjs

@@ -0,0 +1,174 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useMergedRef as n } from "../../../hooks/useMergedRef.mjs";
+import { cx as r } from "../../../utils/cx.mjs";
+import i from "./ResizablePanels.module.css.mjs";
+import { Children as a, createContext as o, isValidElement as s, useContext as c, useId as l, useRef as u, useState as d } from "react";
+import { jsx as f } from "react/jsx-runtime";
+//#region src/components/layout/ResizablePanels/ResizablePanels.tsx
+var p = o(null), m = o(0);
+function h(e) {
+	let t = c(p);
+	if (!t) throw Error(`${e} must be a direct child of <ResizablePanels>.`);
+	return t;
+}
+var g = (e) => Math.round(e * 100) / 100, _ = (e, t, n) => Math.min(n, Math.max(t, e));
+function v(e) {
+	let t = e.reduce((e, t) => e + (t ?? 0), 0), n = e.filter((e) => e === void 0).length, r = n > 0 ? Math.max(0, 100 - t) / n : 0, i = e.map((e) => e ?? r), a = i.reduce((e, t) => e + t, 0) || 1;
+	return i.map((e) => g(e / a * 100));
+}
+var y = ({ orientation: t = "horizontal", layout: o, defaultLayout: c, onLayoutChange: h, keyboardStep: y = 5, className: x, children: S, ref: C, ...w }) => {
+	let T = u(null), E = n(T, C), D = l(), [O, k] = d(!1), A = a.toArray(S).filter((e) => s(e) && e.type === b), j = A.map((e, t) => ({
+		min: e.props.minSize ?? 10,
+		max: e.props.maxSize ?? 100,
+		collapsible: e.props.collapsible ?? !1,
+		collapsed: e.props.collapsedSize ?? 0,
+		label: e.props.label,
+		id: e.props.id ?? `${D}-panel-${t}`
+	})), [M, N] = e({
+		value: o,
+		defaultValue: c ?? v(A.map((e) => e.props.defaultSize)),
+		onChange: h
+	}), P = u(/* @__PURE__ */ new Map()), F = (e, t, { snap: n = !0 } = {}) => {
+		let r = e, i = e + 1, a = j[r], o = j[i];
+		if (!a || !o) return;
+		let s = M[r] + M[i], c = (e, t) => t.collapsible && e < t.min ? n && e < (t.min + t.collapsed) / 2 ? t.collapsed : t.min : _(e, t.min, t.max), l = c(t, a), u = c(s - l, o);
+		if (l = s - u, (l > a.max || l < a.min && !(a.collapsible && l === a.collapsed)) && (l = _(l, a.min, a.max), u = s - l), g(l) === g(M[r]) && g(u) === g(M[i])) return;
+		a.collapsible && l <= a.collapsed && M[r] > a.collapsed && P.current.set(r, M[r]);
+		let d = M.slice();
+		d[r] = g(l), d[i] = g(u), N(d);
+	}, I = (e) => {
+		let t = j[e];
+		if (!t?.collapsible) return;
+		let n = M[e];
+		if (n <= t.collapsed) {
+			let n = P.current.get(e) ?? Math.max(t.min, 100 / j.length);
+			F(e, n, { snap: !1 });
+		} else {
+			P.current.set(e, n);
+			let r = M[e] + M[e + 1], i = M.slice();
+			i[e] = t.collapsed, i[e + 1] = g(r - t.collapsed), N(i);
+		}
+	}, L = -1, R = a.map(S, (e) => (s(e) && e.type === b && (L += 1), /* @__PURE__ */ f(m.Provider, {
+		value: Math.max(0, L),
+		children: e
+	})));
+	return /* @__PURE__ */ f(p.Provider, {
+		value: {
+			orientation: t,
+			layout: M,
+			panels: j,
+			resize: F,
+			toggleCollapse: I,
+			keyboardStep: y,
+			groupRef: T,
+			setResizing: k
+		},
+		children: /* @__PURE__ */ f("div", {
+			...w,
+			ref: E,
+			className: r(i.group, x),
+			"data-orientation": t,
+			"data-resizing": O ? "" : void 0,
+			children: R
+		})
+	});
+}, b = ({ defaultSize: e, minSize: t, maxSize: n, collapsible: a, collapsedSize: o, label: s, className: l, style: u, children: d, ...p }) => {
+	let g = h("ResizablePanels.Panel"), _ = c(m), v = g.panels[_], y = g.layout[_] ?? 0, b = !!v?.collapsible && y <= v.collapsed, x = b && y === 0;
+	return /* @__PURE__ */ f("div", {
+		...p,
+		id: v?.id,
+		"aria-label": p["aria-label"] ?? s,
+		className: r(i.panel, l),
+		style: {
+			...u,
+			flex: `${y} 1 0px`
+		},
+		"data-collapsed": b ? "" : void 0,
+		inert: x || void 0,
+		"aria-hidden": x || void 0,
+		children: d
+	});
+}, x = ({ className: e, onKeyDown: n, onPointerDown: a, onPointerMove: o, onPointerUp: s, onPointerCancel: l, onDoubleClick: d, "aria-label": p, ...g }) => {
+	let _ = h("ResizablePanels.Handle"), v = t().resizablePanels, y = c(m), b = _.panels[y], x = _.layout[y] ?? 0, S = _.orientation === "horizontal", C = u(null), w = (e) => {
+		if (a?.(e), e.defaultPrevented || e.button !== 0 || !_.groupRef.current) return;
+		e.preventDefault();
+		let t = _.groupRef.current, n = t.getBoundingClientRect(), r = 0;
+		for (let e of Array.from(t.children)) if (e.getAttribute("role") === "separator") {
+			let t = e.getBoundingClientRect();
+			r += S ? t.width : t.height;
+		}
+		let i = (S ? n.width : n.height) - r;
+		C.current = {
+			start: S ? e.clientX : e.clientY,
+			size: x,
+			perPx: i > 0 ? 100 / i : 0,
+			rtl: S && getComputedStyle(t).direction === "rtl"
+		};
+		try {
+			e.currentTarget.setPointerCapture(e.pointerId);
+		} catch {}
+		e.currentTarget.focus({ preventScroll: !0 }), _.setResizing(!0);
+	}, T = (e) => {
+		o?.(e);
+		let t = C.current;
+		if (!t) return;
+		let n = ((S ? e.clientX : e.clientY) - t.start) * t.perPx;
+		_.resize(y, t.size + (t.rtl ? -n : n));
+	}, E = () => {
+		C.current && (C.current = null, _.setResizing(!1));
+	}, D = (e) => {
+		if (n?.(e), e.defaultPrevented || !b) return;
+		let t = S && getComputedStyle(e.currentTarget).direction === "rtl", r = _.keyboardStep, i = S ? t ? "ArrowLeft" : "ArrowRight" : "ArrowDown", a = S ? t ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+		switch (e.key) {
+			case i:
+				e.preventDefault(), _.resize(y, x + r, { snap: !1 });
+				return;
+			case a:
+				e.preventDefault(), b.collapsible && x <= b.min && x > b.collapsed ? _.toggleCollapse(y) : _.resize(y, Math.max(x - r, b.min), { snap: !1 });
+				return;
+			case "Home":
+				e.preventDefault(), _.resize(y, b.min, { snap: !1 });
+				return;
+			case "End":
+				e.preventDefault(), _.resize(y, b.max, { snap: !1 });
+				return;
+			case "Enter": e.preventDefault(), _.toggleCollapse(y);
+		}
+	};
+	return /* @__PURE__ */ f("div", {
+		role: "separator",
+		tabIndex: 0,
+		"aria-orientation": S ? "vertical" : "horizontal",
+		"aria-valuenow": Math.round(x),
+		"aria-valuemin": b?.collapsible ? Math.round(b.collapsed) : Math.round(b?.min ?? 0),
+		"aria-valuemax": Math.round(b?.max ?? 100),
+		"aria-controls": b?.id,
+		"aria-label": p ?? (b?.label ? v.resizePanel(b.label) : v.handle),
+		...g,
+		className: r(i.handle, e),
+		"data-orientation": _.orientation,
+		onPointerDown: w,
+		onPointerMove: T,
+		onPointerUp: (e) => {
+			s?.(e), E();
+		},
+		onPointerCancel: (e) => {
+			l?.(e), E();
+		},
+		onLostPointerCapture: E,
+		onDoubleClick: (e) => {
+			d?.(e), e.defaultPrevented || _.toggleCollapse(y);
+		},
+		onKeyDown: D,
+		children: /* @__PURE__ */ f("span", {
+			className: i.grip,
+			"aria-hidden": "true"
+		})
+	});
+}, S = Object.assign(y, {
+	Panel: b,
+	Handle: x
+});
+//#endregion
+export { b as ResizablePanel, S as ResizablePanels, x as ResizablePanelsHandle };

package/dist/components/layout/ResizablePanels/ResizablePanels.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_group_uqqbm_21`,t=`_panel_uqqbm_75`,n=`_handle_uqqbm_97`,r=`_grip_uqqbm_171`,i={group:e,panel:t,handle:n,grip:r};exports.default=i,exports.grip=r,exports.group=e,exports.handle=n,exports.panel=t;

package/dist/components/layout/ResizablePanels/ResizablePanels.module.css.mjs

@@ -0,0 +1,9 @@
+//#region src/components/layout/ResizablePanels/ResizablePanels.module.css
+var e = "_group_uqqbm_21", t = "_panel_uqqbm_75", n = "_handle_uqqbm_97", r = "_grip_uqqbm_171", i = {
+	group: e,
+	panel: t,
+	handle: n,
+	grip: r
+};
+//#endregion
+export { i as default, r as grip, e as group, n as handle, t as panel };

package/dist/components/layout/ResizablePanels/index.d.ts

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

package/dist/components/layout/ScrollArea/ScrollArea.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useMergedRef.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("./ScrollArea.module.css.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a={sm:n.default.sm,md:n.default.md},o=({children:o,type:s=`auto`,scrollbars:c=`vertical`,size:l=`md`,maxHeight:u,shadows:d=!0,hideDelay:f=800,viewportRef:p,viewportClassName:m,onViewportScroll:h,className:g,style:_,tabIndex:v,role:y,"aria-label":b,"aria-labelledby":x,ref:S,...C})=>{let w=(0,r.useRef)(null),T=e.useMergedRef(w,S),E=(0,r.useRef)(null),D=(0,r.useRef)(null),O=(0,r.useRef)(null),k=(0,r.useRef)(null),A=(0,r.useRef)(null),j=(0,r.useRef)(null),M=e.useMergedRef(E,p),N=c!==`horizontal`,P=c!==`vertical`,F=!!(b||x),I=(0,r.useRef)({rtl:!1,minThumb:24}),L=(0,r.useCallback)(()=>{let e=E.current,t=A.current??j.current;if(e&&(I.current.rtl=getComputedStyle(e).direction===`rtl`),t){let e=parseFloat(getComputedStyle(t).getPropertyValue(`--_min-thumb`));e>0&&(I.current.minThumb=e)}},[]),R=(0,r.useCallback)(()=>{let e=w.current,t=E.current;if(!e||!t)return;let{rtl:n,minThumb:r}=I.current,i=t.scrollHeight-t.clientHeight,a=t.scrollWidth-t.clientWidth,o=N&&i>1,s=P&&a>1,c=t.scrollTop,l=Math.abs(t.scrollLeft),u=(t,n)=>{n?e.setAttribute(t,``):e.removeAttribute(t)};u(`data-overflow-y`,o),u(`data-overflow-x`,s),u(`data-scroll-top`,o&&c>1),u(`data-scroll-bottom`,o&&c<i-1),u(`data-scroll-start`,s&&l>1),u(`data-scroll-end`,s&&l<a-1),v===void 0&&(o||s?t.tabIndex=0:t.removeAttribute(`tabindex`));let d=(e,t,i,a,o,s,c)=>{if(!e||!t)return;let l=c===`y`?e.clientHeight:e.clientWidth,u=a>0?Math.max(r,Math.min(l,i/a*l)):l,d=s>0?o/s*(l-u):0;t.style.setProperty(`--_thumb-size`,`${u}px`);let f=c===`x`&&n?-d:d;t.style.transform=c===`y`?`translateY(${f}px)`:`translateX(${f}px)`};d(O.current,A.current,t.clientHeight,t.scrollHeight,c,i,`y`),d(k.current,j.current,t.clientWidth,t.scrollWidth,l,a,`x`)},[N,P,v]);(0,r.useLayoutEffect)(()=>{L(),R();let e=E.current,t=D.current;if(!e||typeof ResizeObserver>`u`)return;let n=new ResizeObserver(()=>{L(),R()});return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[L,R]);let z=(0,r.useRef)(void 0);(0,r.useEffect)(()=>()=>window.clearTimeout(z.current),[]);let B=()=>{let e=w.current;!e||s!==`hover`&&s!==`scroll`||(e.setAttribute(`data-scrolling`,``),window.clearTimeout(z.current),z.current=window.setTimeout(()=>e.removeAttribute(`data-scrolling`),f))},V=(0,r.useRef)(h);V.current=h,(0,r.useEffect)(()=>{let e=E.current;if(!e)return;let t=e=>{R(),B(),V.current?.(e)};return e.addEventListener(`scroll`,t,{passive:!0}),()=>e.removeEventListener(`scroll`,t)},[R,s,f]);let H=(0,r.useRef)(null),U=e=>t=>{let n=E.current,r=t.currentTarget,i=e===`y`?A.current:j.current;if(!n||!i||t.button!==0)return;if(t.preventDefault(),t.target===i){let a=e===`y`?r.clientHeight:r.clientWidth,o=e===`y`?i.offsetHeight:i.offsetWidth,s=e===`y`?n.scrollHeight-n.clientHeight:n.scrollWidth-n.clientWidth;H.current={axis:e,start:e===`y`?t.clientY:t.clientX,scroll:e===`y`?n.scrollTop:n.scrollLeft,ratio:s/Math.max(1,a-o)};try{r.setPointerCapture(t.pointerId)}catch{}w.current?.setAttribute(`data-dragging`,``);return}let a=i.getBoundingClientRect();if(e===`y`){let e=t.clientY<a.top?-1:1;n.scrollBy({top:e*n.clientHeight*.9})}else{let e=t.clientX<a.left;n.scrollBy({left:(e?-1:1)*n.clientWidth*.9})}},W=e=>{let t=H.current,n=E.current;if(!t||!n)return;let r=(t.axis===`y`?e.clientY:e.clientX)-t.start;t.axis===`y`?n.scrollTop=t.scroll+r*t.ratio:n.scrollLeft=t.scroll+r*t.ratio},G=()=>{H.current=null,w.current?.removeAttribute(`data-dragging`)},K=e=>({className:n.default.scrollbar,"data-orientation":e===`y`?`vertical`:`horizontal`,"aria-hidden":!0,onPointerDown:U(e),onPointerMove:W,onPointerUp:G,onPointerCancel:G}),q=u===void 0?_:{..._,"--_max-h":typeof u==`number`?`${u}px`:u};return(0,i.jsxs)(`div`,{...C,ref:T,className:t.cx(n.default.root,a[l],d&&n.default.shadows,g),style:q,"data-type":s,"data-scrollbars":c,children:[(0,i.jsx)(`div`,{ref:M,className:t.cx(n.default.viewport,m),role:y??(F?`region`:void 0),"aria-label":b,"aria-labelledby":x,tabIndex:v,children:(0,i.jsx)(`div`,{ref:D,className:n.default.content,children:o})}),N&&(0,i.jsx)(`div`,{ref:O,...K(`y`),children:(0,i.jsx)(`div`,{ref:A,className:n.default.thumb})}),P&&(0,i.jsx)(`div`,{ref:k,...K(`x`),children:(0,i.jsx)(`div`,{ref:j,className:n.default.thumb})})]})};exports.ScrollArea=o;

package/dist/components/layout/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,65 @@
+import { ComponentPropsWithRef, CSSProperties, ReactNode, Ref } from 'react';
+/**
+ * When the scrollbars show.
+ * - `auto` (default): whenever the content overflows. The most discoverable.
+ * - `hover`: while the pointer is over the area, it is scrolling, or focus is inside.
+ * - `scroll`: only while scrolling.
+ * - `always`: always, with an empty track when nothing overflows.
+ */
+export type ScrollAreaType = "auto" | "hover" | "scroll" | "always";
+/** Which directions scroll. The other direction is clipped. */
+export type ScrollAreaScrollbars = "vertical" | "horizontal" | "both";
+/** Scrollbar thickness. */
+export type ScrollAreaSize = "sm" | "md";
+export interface ScrollAreaProps extends Omit<ComponentPropsWithRef<"div">, "dir"> {
+    /** The scrolling content. */
+    children?: ReactNode;
+    /** When the scrollbars show. @default "auto" */
+    type?: ScrollAreaType;
+    /** Which directions scroll. @default "vertical" */
+    scrollbars?: ScrollAreaScrollbars;
+    /** Scrollbar thickness. @default "md" */
+    size?: ScrollAreaSize;
+    /** Maximum height of the area (any CSS length, or px as a number). Without it, give the area a height. */
+    maxHeight?: CSSProperties["maxHeight"];
+    /**
+     * Fade the edges where more content is hidden, so it's clear the area
+     * scrolls even before the scrollbar is noticed. @default true
+     */
+    shadows?: boolean;
+    /** How long the scrollbars stay after scrolling stops, for `hover` and `scroll`, in ms. @default 800 */
+    hideDelay?: number;
+    /**
+     * Ref to the scrolling viewport element (to read or set `scrollTop`, or
+     * call `scrollTo`). `ref` goes to the outer root.
+     */
+    viewportRef?: Ref<HTMLDivElement>;
+    /** Class name for the viewport. */
+    viewportClassName?: string;
+    /** Called on every scroll of the viewport. */
+    onViewportScroll?: (event: Event & {
+        currentTarget: HTMLDivElement;
+    }) => void;
+}
+/**
+ * A scrolling region with slim, on-brand scrollbars that work the same in
+ * every browser. Scrolling itself stays native (wheel, touch, trackpad
+ * momentum, keyboard, find-in-page, scroll anchoring); only the look of the
+ * bars is custom. The thumbs can be dragged, and pressing the track pages
+ * toward the press.
+ *
+ * Accessibility: while the content overflows, the viewport is focusable
+ * (`tabIndex=0`) so keyboard users can scroll it with the arrow keys, Page
+ * Up / Page Down, and Home / End. Give it a name with `aria-label` or
+ * `aria-labelledby`, which also makes it a `region` landmark. The custom
+ * bars are hidden from assistive technology (they duplicate native
+ * scrolling). Edge shadows show there is more to see. In Windows High
+ * Contrast mode the native scrollbars come back.
+ *
+ * ```tsx
+ * <ScrollArea maxHeight="20rem" aria-label="Roster">
+ *   <List>…</List>
+ * </ScrollArea>
+ * ```
+ */
+export declare const ScrollArea: ({ children, type, scrollbars, size, maxHeight, shadows, hideDelay, viewportRef: viewportRefProp, viewportClassName, onViewportScroll, className, style, tabIndex, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...rest }: ScrollAreaProps) => import("react").JSX.Element;

package/dist/components/layout/ScrollArea/ScrollArea.mjs

@@ -0,0 +1,152 @@
+import { useMergedRef as e } from "../../../hooks/useMergedRef.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import n from "./ScrollArea.module.css.mjs";
+import { useCallback as r, useEffect as i, useLayoutEffect as a, useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/layout/ScrollArea/ScrollArea.tsx
+var l = {
+	sm: n.sm,
+	md: n.md
+}, u = ({ children: u, type: d = "auto", scrollbars: f = "vertical", size: p = "md", maxHeight: m, shadows: h = !0, hideDelay: g = 800, viewportRef: _, viewportClassName: v, onViewportScroll: y, className: b, style: x, tabIndex: S, role: C, "aria-label": w, "aria-labelledby": T, ref: E, ...D }) => {
+	let O = o(null), k = e(O, E), A = o(null), j = o(null), M = o(null), N = o(null), P = o(null), F = o(null), I = e(A, _), L = f !== "horizontal", R = f !== "vertical", z = !!(w || T), B = o({
+		rtl: !1,
+		minThumb: 24
+	}), V = r(() => {
+		let e = A.current, t = P.current ?? F.current;
+		if (e && (B.current.rtl = getComputedStyle(e).direction === "rtl"), t) {
+			let e = parseFloat(getComputedStyle(t).getPropertyValue("--_min-thumb"));
+			e > 0 && (B.current.minThumb = e);
+		}
+	}, []), H = r(() => {
+		let e = O.current, t = A.current;
+		if (!e || !t) return;
+		let { rtl: n, minThumb: r } = B.current, i = t.scrollHeight - t.clientHeight, a = t.scrollWidth - t.clientWidth, o = L && i > 1, s = R && a > 1, c = t.scrollTop, l = Math.abs(t.scrollLeft), u = (t, n) => {
+			n ? e.setAttribute(t, "") : e.removeAttribute(t);
+		};
+		u("data-overflow-y", o), u("data-overflow-x", s), u("data-scroll-top", o && c > 1), u("data-scroll-bottom", o && c < i - 1), u("data-scroll-start", s && l > 1), u("data-scroll-end", s && l < a - 1), S === void 0 && (o || s ? t.tabIndex = 0 : t.removeAttribute("tabindex"));
+		let d = (e, t, i, a, o, s, c) => {
+			if (!e || !t) return;
+			let l = c === "y" ? e.clientHeight : e.clientWidth, u = a > 0 ? Math.max(r, Math.min(l, i / a * l)) : l, d = s > 0 ? o / s * (l - u) : 0;
+			t.style.setProperty("--_thumb-size", `${u}px`);
+			let f = c === "x" && n ? -d : d;
+			t.style.transform = c === "y" ? `translateY(${f}px)` : `translateX(${f}px)`;
+		};
+		d(M.current, P.current, t.clientHeight, t.scrollHeight, c, i, "y"), d(N.current, F.current, t.clientWidth, t.scrollWidth, l, a, "x");
+	}, [
+		L,
+		R,
+		S
+	]);
+	a(() => {
+		V(), H();
+		let e = A.current, t = j.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(() => {
+			V(), H();
+		});
+		return n.observe(e), t && n.observe(t), () => n.disconnect();
+	}, [V, H]);
+	let U = o(void 0);
+	i(() => () => window.clearTimeout(U.current), []);
+	let W = () => {
+		let e = O.current;
+		!e || d !== "hover" && d !== "scroll" || (e.setAttribute("data-scrolling", ""), window.clearTimeout(U.current), U.current = window.setTimeout(() => e.removeAttribute("data-scrolling"), g));
+	}, G = o(y);
+	G.current = y, i(() => {
+		let e = A.current;
+		if (!e) return;
+		let t = (e) => {
+			H(), W(), G.current?.(e);
+		};
+		return e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
+	}, [
+		H,
+		d,
+		g
+	]);
+	let K = o(null), q = (e) => (t) => {
+		let n = A.current, r = t.currentTarget, i = e === "y" ? P.current : F.current;
+		if (!n || !i || t.button !== 0) return;
+		if (t.preventDefault(), t.target === i) {
+			let a = e === "y" ? r.clientHeight : r.clientWidth, o = e === "y" ? i.offsetHeight : i.offsetWidth, s = e === "y" ? n.scrollHeight - n.clientHeight : n.scrollWidth - n.clientWidth;
+			K.current = {
+				axis: e,
+				start: e === "y" ? t.clientY : t.clientX,
+				scroll: e === "y" ? n.scrollTop : n.scrollLeft,
+				ratio: s / Math.max(1, a - o)
+			};
+			try {
+				r.setPointerCapture(t.pointerId);
+			} catch {}
+			O.current?.setAttribute("data-dragging", "");
+			return;
+		}
+		let a = i.getBoundingClientRect();
+		if (e === "y") {
+			let e = t.clientY < a.top ? -1 : 1;
+			n.scrollBy({ top: e * n.clientHeight * .9 });
+		} else {
+			let e = t.clientX < a.left;
+			n.scrollBy({ left: (e ? -1 : 1) * n.clientWidth * .9 });
+		}
+	}, J = (e) => {
+		let t = K.current, n = A.current;
+		if (!t || !n) return;
+		let r = (t.axis === "y" ? e.clientY : e.clientX) - t.start;
+		t.axis === "y" ? n.scrollTop = t.scroll + r * t.ratio : n.scrollLeft = t.scroll + r * t.ratio;
+	}, Y = () => {
+		K.current = null, O.current?.removeAttribute("data-dragging");
+	}, X = (e) => ({
+		className: n.scrollbar,
+		"data-orientation": e === "y" ? "vertical" : "horizontal",
+		"aria-hidden": !0,
+		onPointerDown: q(e),
+		onPointerMove: J,
+		onPointerUp: Y,
+		onPointerCancel: Y
+	}), Z = m === void 0 ? x : {
+		...x,
+		"--_max-h": typeof m == "number" ? `${m}px` : m
+	};
+	return /* @__PURE__ */ c("div", {
+		...D,
+		ref: k,
+		className: t(n.root, l[p], h && n.shadows, b),
+		style: Z,
+		"data-type": d,
+		"data-scrollbars": f,
+		children: [
+			/* @__PURE__ */ s("div", {
+				ref: I,
+				className: t(n.viewport, v),
+				role: C ?? (z ? "region" : void 0),
+				"aria-label": w,
+				"aria-labelledby": T,
+				tabIndex: S,
+				children: /* @__PURE__ */ s("div", {
+					ref: j,
+					className: n.content,
+					children: u
+				})
+			}),
+			L && /* @__PURE__ */ s("div", {
+				ref: M,
+				...X("y"),
+				children: /* @__PURE__ */ s("div", {
+					ref: P,
+					className: n.thumb
+				})
+			}),
+			R && /* @__PURE__ */ s("div", {
+				ref: N,
+				...X("x"),
+				children: /* @__PURE__ */ s("div", {
+					ref: F,
+					className: n.thumb
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { u as ScrollArea };

package/dist/components/layout/ScrollArea/ScrollArea.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_mgaew_19`,t=`_sm_mgaew_49`,n=`_md_mgaew_59`,r=`_viewport_mgaew_69`,i=`_content_mgaew_149`,a=`_scrollbar_mgaew_163`,o=`_thumb_mgaew_237`,s=`_shadows_mgaew_345`,c={root:e,sm:t,md:n,viewport:r,content:i,scrollbar:a,thumb:o,shadows:s};exports.content=i,exports.default=c,exports.md=n,exports.root=e,exports.scrollbar=a,exports.shadows=s,exports.sm=t,exports.thumb=o,exports.viewport=r;

package/dist/components/layout/ScrollArea/ScrollArea.module.css.mjs

@@ -0,0 +1,13 @@
+//#region src/components/layout/ScrollArea/ScrollArea.module.css
+var e = "_root_mgaew_19", t = "_sm_mgaew_49", n = "_md_mgaew_59", r = "_viewport_mgaew_69", i = "_content_mgaew_149", a = "_scrollbar_mgaew_163", o = "_thumb_mgaew_237", s = "_shadows_mgaew_345", c = {
+	root: e,
+	sm: t,
+	md: n,
+	viewport: r,
+	content: i,
+	scrollbar: a,
+	thumb: o,
+	shadows: s
+};
+//#endregion
+export { i as content, c as default, n as md, e as root, a as scrollbar, s as shadows, t as sm, o as thumb, r as viewport };

package/dist/components/layout/ScrollArea/index.d.ts

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

package/dist/components/layout/Stack/Stack.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/responsive.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("./Stack.module.css.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a={start:`flex-start`,center:`center`,end:`flex-end`,stretch:`stretch`,baseline:`baseline`},o={start:`flex-start`,center:`center`,end:`flex-end`,between:`space-between`,around:`space-around`,evenly:`space-evenly`},s=e.responsiveClasses(n.default,`dir`),c=e.responsiveClasses(n.default,`gap`),l=e.responsiveClasses(n.default,`wrap`),u=e.responsiveClasses(n.default,`align`),d=e.responsiveClasses(n.default,`justify`),f={sm:n.default.stackBelowSm,md:n.default.stackBelowMd,lg:n.default.stackBelowLg},p=e=>`var(--space-${e})`;function m(m){let{as:h,direction:g=`column`,gap:_=4,align:v=`stretch`,justify:y=`start`,wrap:b=!1,divider:x,dividerSemantics:S=`decorative`,fullWidth:C=!1,stackBelow:w,className:T,style:E,children:D,role:O,...k}=m,A=h??`div`,j=h===`ul`||h===`ol`,M=e.isResponsiveObject(g),N=g===`row`||g===`row-reverse`,P=r.Children.toArray(D).filter(e=>e!=null&&typeof e!=`boolean`),F=x!=null&&x!==!1,I=e=>{if(x===!0){let t=S===`separator`&&!j&&!w&&!M;return(0,i.jsx)(j?`li`:`div`,{className:n.default.divider,...t?{role:`separator`,"aria-orientation":N?`vertical`:`horizontal`}:{"aria-hidden":!0}},e)}return j?(0,i.jsx)(`li`,{className:n.default.dividerSlot,"aria-hidden":`true`,children:x},e):(0,i.jsx)(r.Fragment,{children:x},e)},L=F?P.flatMap((e,t)=>{let n=(0,r.isValidElement)(e)&&e.key!=null?String(e.key):String(t);return t===0?[e]:[I(`stack-divider-${n}`),e]}):P,R={},z=[];return e.responsiveVars(`stack-dir`,g,String,s,R,z),e.responsiveVars(`stack-gap`,_,p,c,R,z),e.responsiveVars(`stack-wrap`,b,e=>e?`wrap`:`nowrap`,l,R,z),e.responsiveVars(`stack-align`,v,e=>a[e],u,R,z),e.responsiveVars(`stack-justify`,y,e=>o[e],d,R,z),(0,i.jsx)(A,{...k,role:O??(j?`list`:void 0),className:t.cx(n.default.root,...z,C&&n.default.fullWidth,j&&n.default.list,N&&w&&f[w],T),style:{...R,...E},children:L})}function h({reverse:e=!1,...t}){return(0,i.jsx)(m,{...t,direction:e?`row-reverse`:`row`})}function g({reverse:e=!1,...t}){return(0,i.jsx)(m,{...t,direction:e?`column-reverse`:`column`})}exports.HStack=h,exports.Stack=m,exports.VStack=g;

package/dist/components/layout/Stack/Stack.d.ts

@@ -0,0 +1,81 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Responsive, Space } from '../../../types/common';
+/** Main-axis direction of a Stack. */
+export type StackDirection = "column" | "row" | "column-reverse" | "row-reverse";
+/** Cross-axis alignment of children (`align-items`). */
+export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+/** Main-axis distribution of children (`justify-content`). */
+export type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+/** Breakpoint below which a row Stack switches to a column. sm 640px, md 768px, lg 1024px. */
+export type StackBreakpoint = "sm" | "md" | "lg";
+/**
+ * How the built-in divider (`divider={true}`) is exposed to assistive tech.
+ * - `decorative`: `aria-hidden`, purely visual (default).
+ * - `separator`: `role="separator"` with `aria-orientation`, for dividers that
+ *   mark a meaningful boundary between groups.
+ */
+export type StackDividerSemantics = "decorative" | "separator";
+/** Elements a Stack can render as. */
+export type StackElement = "div" | "section" | "article" | "aside" | "nav" | "header" | "footer" | "main" | "form" | "fieldset" | "ul" | "ol" | "li" | "span";
+interface StackOwnProps<E extends StackElement> {
+    /** Element to render. Native props are typed for the chosen element. `ul`/`ol` drop bullets and padding but keep list semantics. */
+    as?: E;
+    /**
+     * Main-axis direction. Responsive: `{ base: "column", md: "row" }`.
+     * Reverse directions change visual order only; DOM, reading, and focus
+     * order stay the same.
+     */
+    direction?: Responsive<StackDirection>;
+    /** Space between children, as a step on the `--space-*` scale. Responsive. */
+    gap?: Responsive<Space>;
+    /** Cross-axis alignment of children. Responsive. */
+    align?: Responsive<StackAlign>;
+    /** Main-axis distribution of children. Responsive. */
+    justify?: Responsive<StackJustify>;
+    /**
+     * Let children wrap onto multiple lines. Responsive. Rows don't wrap by
+     * default: use `wrap`, a responsive `direction`, or `stackBelow` for rows
+     * that must reflow at 320px (SC 1.4.10).
+     */
+    wrap?: Responsive<boolean>;
+    /**
+     * Inserted between every pair of children. Pass `true` for the built-in
+     * token-styled line (see `dividerSemantics`), or any node for a custom
+     * divider (you own its semantics). In `ul`/`ol` stacks, dividers are wrapped
+     * in an `aria-hidden` `<li>` so the list stays valid and item counts stay correct.
+     */
+    divider?: ReactNode;
+    /**
+     * Accessibility semantics of the built-in divider. Ignored for custom
+     * dividers and in list stacks (always decorative there). A `separator`
+     * stays decorative when `stackBelow` is set or `direction` is
+     * responsive, since its orientation flips at a breakpoint.
+     */
+    dividerSemantics?: StackDividerSemantics;
+    /** Stretch to the full inline size of the container. */
+    fullWidth?: boolean;
+    /**
+     * Switch a `row`/`row-reverse` stack to a column below this breakpoint.
+     * Has no effect on column stacks or with a responsive `direction` (which
+     * covers this: `{ base: "column", md: "row" }`).
+     */
+    stackBelow?: StackBreakpoint;
+}
+/** Props for `Stack`, typed for the element chosen with `as`. */
+export type StackProps<E extends StackElement = "div"> = StackOwnProps<E> & Omit<ComponentPropsWithRef<E>, keyof StackOwnProps<E>>;
+/**
+ * One-dimensional flex layout. Lays children out in a column (default) or
+ * row with token-based gaps, optional dividers, and an optional responsive
+ * switch from row to column.
+ */
+export declare function Stack<E extends StackElement = "div">(props: StackProps<E>): import("react").JSX.Element;
+/** Props for `HStack` and `VStack` (direction is fixed). */
+export type DirectionalStackProps<E extends StackElement = "div"> = Omit<StackProps<E>, "direction"> & {
+    /** Reverse the visual order of children (DOM and focus order are unchanged). */
+    reverse?: boolean;
+};
+/** A horizontal Stack (`direction="row"`). */
+export declare function HStack<E extends StackElement = "div">({ reverse, ...props }: DirectionalStackProps<E>): import("react").JSX.Element;
+/** A vertical Stack (`direction="column"`). */
+export declare function VStack<E extends StackElement = "div">({ reverse, ...props }: DirectionalStackProps<E>): import("react").JSX.Element;
+export {};

package/dist/components/layout/Stack/Stack.mjs

@@ -0,0 +1,70 @@
+import { isResponsiveObject as e, responsiveClasses as t, responsiveVars as n } from "../../../utils/responsive.mjs";
+import { cx as r } from "../../../utils/cx.mjs";
+import i from "./Stack.module.css.mjs";
+import { Children as a, Fragment as o, isValidElement as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/layout/Stack/Stack.tsx
+var l = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	stretch: "stretch",
+	baseline: "baseline"
+}, u = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	between: "space-between",
+	around: "space-around",
+	evenly: "space-evenly"
+}, d = t(i, "dir"), f = t(i, "gap"), p = t(i, "wrap"), m = t(i, "align"), h = t(i, "justify"), g = {
+	sm: i.stackBelowSm,
+	md: i.stackBelowMd,
+	lg: i.stackBelowLg
+}, _ = (e) => `var(--space-${e})`;
+function v(t) {
+	let { as: v, direction: y = "column", gap: b = 4, align: x = "stretch", justify: S = "start", wrap: C = !1, divider: w, dividerSemantics: T = "decorative", fullWidth: E = !1, stackBelow: D, className: O, style: k, children: A, role: j, ...M } = t, N = v ?? "div", P = v === "ul" || v === "ol", F = e(y), I = y === "row" || y === "row-reverse", L = a.toArray(A).filter((e) => e != null && typeof e != "boolean"), R = w != null && w !== !1, z = (e) => {
+		if (w === !0) {
+			let t = T === "separator" && !P && !D && !F;
+			return /* @__PURE__ */ c(P ? "li" : "div", {
+				className: i.divider,
+				...t ? {
+					role: "separator",
+					"aria-orientation": I ? "vertical" : "horizontal"
+				} : { "aria-hidden": !0 }
+			}, e);
+		}
+		return P ? /* @__PURE__ */ c("li", {
+			className: i.dividerSlot,
+			"aria-hidden": "true",
+			children: w
+		}, e) : /* @__PURE__ */ c(o, { children: w }, e);
+	}, B = R ? L.flatMap((e, t) => {
+		let n = s(e) && e.key != null ? String(e.key) : String(t);
+		return t === 0 ? [e] : [z(`stack-divider-${n}`), e];
+	}) : L, V = {}, H = [];
+	return n("stack-dir", y, String, d, V, H), n("stack-gap", b, _, f, V, H), n("stack-wrap", C, (e) => e ? "wrap" : "nowrap", p, V, H), n("stack-align", x, (e) => l[e], m, V, H), n("stack-justify", S, (e) => u[e], h, V, H), /* @__PURE__ */ c(N, {
+		...M,
+		role: j ?? (P ? "list" : void 0),
+		className: r(i.root, ...H, E && i.fullWidth, P && i.list, I && D && g[D], O),
+		style: {
+			...V,
+			...k
+		},
+		children: B
+	});
+}
+function y({ reverse: e = !1, ...t }) {
+	return /* @__PURE__ */ c(v, {
+		...t,
+		direction: e ? "row-reverse" : "row"
+	});
+}
+function b({ reverse: e = !1, ...t }) {
+	return /* @__PURE__ */ c(v, {
+		...t,
+		direction: e ? "column-reverse" : "column"
+	});
+}
+//#endregion
+export { y as HStack, v as Stack, b as VStack };

package/dist/components/layout/Stack/Stack.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1737j_15`,t=`_dirBase_1737j_29`,n=`_gapBase_1737j_35`,r=`_wrapBase_1737j_41`,i=`_alignBase_1737j_47`,a=`_justifyBase_1737j_53`,o=`_dirSm_1737j_63`,s=`_gapSm_1737j_69`,c=`_wrapSm_1737j_75`,l=`_alignSm_1737j_81`,u=`_justifySm_1737j_87`,d=`_dirMd_1737j_99`,f=`_gapMd_1737j_105`,p=`_wrapMd_1737j_111`,m=`_alignMd_1737j_117`,h=`_justifyMd_1737j_123`,g=`_dirLg_1737j_135`,_=`_gapLg_1737j_141`,v=`_wrapLg_1737j_147`,y=`_alignLg_1737j_153`,b=`_justifyLg_1737j_159`,x=`_dirXl_1737j_171`,S=`_gapXl_1737j_177`,C=`_wrapXl_1737j_183`,w=`_alignXl_1737j_189`,T=`_justifyXl_1737j_195`,E=`_dir2xl_1737j_207`,D=`_gap2xl_1737j_213`,O=`_wrap2xl_1737j_219`,k=`_align2xl_1737j_225`,A=`_justify2xl_1737j_231`,j=`_fullWidth_1737j_243`,M=`_list_1737j_253`,N=`_divider_1737j_273`,P=`_dividerSlot_1737j_299`,F=`_stackBelowSm_1737j_313`,I=`_stackBelowMd_1737j_325`,L=`_stackBelowLg_1737j_337`,R={root:e,dirBase:t,gapBase:n,wrapBase:r,alignBase:i,justifyBase:a,dirSm:o,gapSm:s,wrapSm:c,alignSm:l,justifySm:u,dirMd:d,gapMd:f,wrapMd:p,alignMd:m,justifyMd:h,dirLg:g,gapLg:_,wrapLg:v,alignLg:y,justifyLg:b,dirXl:x,gapXl:S,wrapXl:C,alignXl:w,justifyXl:T,dir2xl:E,gap2xl:D,wrap2xl:O,align2xl:k,justify2xl:A,fullWidth:j,list:M,divider:N,dividerSlot:P,stackBelowSm:F,stackBelowMd:I,stackBelowLg:L};exports.align2xl=k,exports.alignBase=i,exports.alignLg=y,exports.alignMd=m,exports.alignSm=l,exports.alignXl=w,exports.default=R,exports.dir2xl=E,exports.dirBase=t,exports.dirLg=g,exports.dirMd=d,exports.dirSm=o,exports.dirXl=x,exports.divider=N,exports.dividerSlot=P,exports.fullWidth=j,exports.gap2xl=D,exports.gapBase=n,exports.gapLg=_,exports.gapMd=f,exports.gapSm=s,exports.gapXl=S,exports.justify2xl=A,exports.justifyBase=a,exports.justifyLg=b,exports.justifyMd=h,exports.justifySm=u,exports.justifyXl=T,exports.list=M,exports.root=e,exports.stackBelowLg=L,exports.stackBelowMd=I,exports.stackBelowSm=F,exports.wrap2xl=O,exports.wrapBase=r,exports.wrapLg=v,exports.wrapMd=p,exports.wrapSm=c,exports.wrapXl=C;

package/dist/components/layout/Stack/Stack.module.css.mjs

@@ -0,0 +1,43 @@
+//#region src/components/layout/Stack/Stack.module.css
+var e = "_root_1737j_15", t = "_dirBase_1737j_29", n = "_gapBase_1737j_35", r = "_wrapBase_1737j_41", i = "_alignBase_1737j_47", a = "_justifyBase_1737j_53", o = "_dirSm_1737j_63", s = "_gapSm_1737j_69", c = "_wrapSm_1737j_75", l = "_alignSm_1737j_81", u = "_justifySm_1737j_87", d = "_dirMd_1737j_99", f = "_gapMd_1737j_105", p = "_wrapMd_1737j_111", m = "_alignMd_1737j_117", h = "_justifyMd_1737j_123", g = "_dirLg_1737j_135", _ = "_gapLg_1737j_141", v = "_wrapLg_1737j_147", y = "_alignLg_1737j_153", b = "_justifyLg_1737j_159", x = "_dirXl_1737j_171", S = "_gapXl_1737j_177", C = "_wrapXl_1737j_183", w = "_alignXl_1737j_189", T = "_justifyXl_1737j_195", E = "_dir2xl_1737j_207", D = "_gap2xl_1737j_213", O = "_wrap2xl_1737j_219", k = "_align2xl_1737j_225", A = "_justify2xl_1737j_231", j = "_fullWidth_1737j_243", M = "_list_1737j_253", N = "_divider_1737j_273", P = "_dividerSlot_1737j_299", F = "_stackBelowSm_1737j_313", I = "_stackBelowMd_1737j_325", L = "_stackBelowLg_1737j_337", R = {
+	root: e,
+	dirBase: t,
+	gapBase: n,
+	wrapBase: r,
+	alignBase: i,
+	justifyBase: a,
+	dirSm: o,
+	gapSm: s,
+	wrapSm: c,
+	alignSm: l,
+	justifySm: u,
+	dirMd: d,
+	gapMd: f,
+	wrapMd: p,
+	alignMd: m,
+	justifyMd: h,
+	dirLg: g,
+	gapLg: _,
+	wrapLg: v,
+	alignLg: y,
+	justifyLg: b,
+	dirXl: x,
+	gapXl: S,
+	wrapXl: C,
+	alignXl: w,
+	justifyXl: T,
+	dir2xl: E,
+	gap2xl: D,
+	wrap2xl: O,
+	align2xl: k,
+	justify2xl: A,
+	fullWidth: j,
+	list: M,
+	divider: N,
+	dividerSlot: P,
+	stackBelowSm: F,
+	stackBelowMd: I,
+	stackBelowLg: L
+};
+//#endregion
+export { k as align2xl, i as alignBase, y as alignLg, m as alignMd, l as alignSm, w as alignXl, R as default, E as dir2xl, t as dirBase, g as dirLg, d as dirMd, o as dirSm, x as dirXl, N as divider, P as dividerSlot, j as fullWidth, D as gap2xl, n as gapBase, _ as gapLg, f as gapMd, s as gapSm, S as gapXl, A as justify2xl, a as justifyBase, b as justifyLg, h as justifyMd, u as justifySm, T as justifyXl, M as list, e as root, L as stackBelowLg, I as stackBelowMd, F as stackBelowSm, O as wrap2xl, r as wrapBase, v as wrapLg, p as wrapMd, c as wrapSm, C as wrapXl };

package/dist/components/layout/Stack/index.d.ts

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