@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/utilities/LocaleProvider/LocaleProvider.mjs

@@ -0,0 +1,40 @@
+import { getLocaleDirection as e } from "../../../i18n/plural.mjs";
+import { en as t } from "../../../i18n/en.mjs";
+import { mergeMessages as n } from "../../../i18n/merge.mjs";
+import r from "./LocaleProvider.module.css.mjs";
+import { createContext as i, useContext as a, useMemo as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/utilities/LocaleProvider/LocaleProvider.tsx
+var c = i({
+	locale: void 0,
+	dir: void 0,
+	messages: t
+});
+function l() {
+	return a(c);
+}
+function u() {
+	return a(c).messages;
+}
+var d = ({ locale: t, messages: i, dir: l, children: u }) => {
+	let d = a(c), f = l ?? e(t), p = o(() => n(d.messages, i), [d.messages, i]), m = o(() => ({
+		locale: t,
+		dir: f,
+		messages: p
+	}), [
+		t,
+		f,
+		p
+	]);
+	return /* @__PURE__ */ s(c.Provider, {
+		value: m,
+		children: /* @__PURE__ */ s("div", {
+			lang: t,
+			dir: f,
+			className: r.root,
+			children: u
+		})
+	});
+};
+//#endregion
+export { d as LocaleProvider, l as useLocale, u as useMessages };

package/dist/components/utilities/LocaleProvider/LocaleProvider.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_sa02l_2`,t={root:e};exports.default=t,exports.root=e;

package/dist/components/utilities/LocaleProvider/LocaleProvider.module.css.mjs

@@ -0,0 +1,4 @@
+//#region src/components/utilities/LocaleProvider/LocaleProvider.module.css
+var e = "_root_sa02l_2", t = { root: e };
+//#endregion
+export { t as default, e as root };

package/dist/components/utilities/LocaleProvider/index.d.ts

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

package/dist/components/utilities/Portal/Portal.cjs.js

@@ -0,0 +1 @@
+const e=require("../LocaleProvider/LocaleProvider.cjs.js"),t=require("../Theme/Theme.cjs.js");let n=require("react"),r=require("react/jsx-runtime"),i=require("react-dom");var a=()=>()=>{},o=()=>!0,s=()=>!1,c=({children:c,container:l,disabled:u=!1})=>{let d=(0,n.useSyncExternalStore)(a,o,s),{brand:f,mode:p,brandVars:m,accent:h,accentVars:g}=t.useTheme(),{locale:_,dir:v}=e.useLocale();if(u)return(0,r.jsx)(r.Fragment,{children:c});if(!d)return null;let y=f||p||h||_?(0,r.jsx)(`div`,{"data-brand":f,"data-accent":h,"data-theme":p,lang:_,dir:v,style:{display:`contents`,...m,...g},children:c}):c;return(0,i.createPortal)(y,l??document.body)};exports.Portal=c;

package/dist/components/utilities/Portal/Portal.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface PortalProps {
+    children: ReactNode;
+    /** Element to render into. Defaults to document.body. */
+    container?: HTMLElement | null;
+    /** Render inline instead of portaling. */
+    disabled?: boolean;
+}
+/**
+ * Renders children at the end of document.body (or `container`) so
+ * overlays escape parent overflow and stacking contexts.
+ *
+ * On the client, children mount in the same commit as the Portal, so a
+ * parent's layout effects already see their refs. During server rendering
+ * (and the matching hydration pass) it renders nothing, then mounts.
+ *
+ * Inside a `Theme` wrapper, the portaled content is wrapped in an element
+ * (`display: contents`, so layout is unaffected) carrying the same
+ * `data-brand` / `data-accent` / `data-theme` (and a custom brand's generated colors), so
+ * overlays keep their area's theme. Inside a `LocaleProvider`, it also
+ * carries `lang` and `dir`, so overlays keep their area's language.
+ */
+export declare const Portal: ({ children, container, disabled }: PortalProps) => import("react").JSX.Element | null;

package/dist/components/utilities/Portal/Portal.mjs

@@ -0,0 +1,27 @@
+import { useLocale as e } from "../LocaleProvider/LocaleProvider.mjs";
+import { useTheme as t } from "../Theme/Theme.mjs";
+import { useSyncExternalStore as n } from "react";
+import { Fragment as r, jsx as i } from "react/jsx-runtime";
+import { createPortal as a } from "react-dom";
+//#region src/components/utilities/Portal/Portal.tsx
+var o = () => () => {}, s = () => !0, c = () => !1, l = ({ children: l, container: u, disabled: d = !1 }) => {
+	let f = n(o, s, c), { brand: p, mode: m, brandVars: h, accent: g, accentVars: _ } = t(), { locale: v, dir: y } = e();
+	if (d) return /* @__PURE__ */ i(r, { children: l });
+	if (!f) return null;
+	let b = p || m || g || v ? /* @__PURE__ */ i("div", {
+		"data-brand": p,
+		"data-accent": g,
+		"data-theme": m,
+		lang: v,
+		dir: y,
+		style: {
+			display: "contents",
+			...h,
+			..._
+		},
+		children: l
+	}) : l;
+	return a(b, u ?? document.body);
+};
+//#endregion
+export { l as Portal };

package/dist/components/utilities/Portal/index.d.ts

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

package/dist/components/utilities/Theme/Theme.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("../../../utils/brandPalette.cjs.js"),n=require("./Theme.module.css.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=globalThis.process?.env?.NODE_ENV!==`production`,o=[`black`,`blue`,`gold`,`green`,`purple`],s=e=>o.includes(e),c=[`brand`,`lime`],l=`volt`,u=e=>c.includes(e),d=(0,r.createContext)({});function f(){return(0,r.useContext)(d)}function p(e,t){if(!(e===void 0||t(e)))return typeof e==`string`?e:`${e.light}|${e.dark}`}function m(e){let[n,r]=e.split(`|`);return r===void 0?t.isHexColor(n)?n:null:t.isHexColor(n)&&t.isHexColor(r)?{light:n,dark:r}:null}var h=({brand:o,accent:c,mode:f,fill:h=!1,className:g,style:_,...v})=>{let y=(0,r.useContext)(d),b=c===l?`lime`:c;(0,r.useEffect)(()=>{a&&c===l&&console.warn(`[Theme] accent "volt" is now called "lime". "volt" still works; switch to "lime" when convenient.`)},[c]);let x=p(o,s),S=(0,r.useMemo)(()=>{if(x===void 0)return;let e=m(x);return e===null?null:t.createBrandPalette(e)},[x]),C=(0,r.useMemo)(()=>S?t.brandPaletteVars(S):void 0,[S]),w=p(b,u),T=(0,r.useMemo)(()=>{if(w===void 0)return;let e=m(w);return e===null?null:t.createAccentPalette(e)},[w]),E=(0,r.useMemo)(()=>T?t.accentPaletteVars(T):void 0,[T]);(0,r.useEffect)(()=>{if(a){S===null&&console.error(`[Theme] brand "${x}" is not a preset or a hex color (#rgb or #rrggbb); it is ignored.`);for(let{mode:e,requested:t,used:n}of S?.adjustments??[])console.warn(`[Theme] brand ${t} doesn't meet WCAG AA contrast in ${e} mode; using ${n} instead.`);T===null&&console.error(`[Theme] accent "${w}" is not "brand", "lime", or a hex color (#rgb or #rrggbb); it is ignored.`);for(let{mode:e,requested:t,used:n}of T?.adjustments??[])console.warn(`[Theme] accent ${t} is too dark for dark text in ${e} mode; using ${n} instead.`)}},[S,x,T,w]);let D=s(o)?o:C?`custom`:void 0,O=u(b)?b:E?`custom`:void 0,k=D??y.brand,A=D?C:y.brandVars,j=O??y.accent,M=O?E:y.accentVars,N=f??y.mode,P=(0,r.useMemo)(()=>({brand:k,mode:N,brandVars:A,accent:j,accentVars:M}),[k,N,A,j,M]),F=C||E?{...C,...E}:void 0;return(0,i.jsx)(d.Provider,{value:P,children:(0,i.jsx)(`div`,{...v,"data-brand":D,"data-accent":O,"data-theme":f,className:e.cx(n.default.root,h&&n.default.fill,g),style:F?{...F,..._}:_})})};exports.Theme=h,exports.useTheme=f;

package/dist/components/utilities/Theme/Theme.d.ts

@@ -0,0 +1,79 @@
+import { ComponentPropsWithRef } from 'react';
+import { BrandColor } from '../../../utils/brandPalette';
+/**
+ * Brand palette. `blue` is the default; `purple`, `gold`, `green` (emerald), and
+ * `black` (monochrome: near-black in light mode, near-white in dark mode)
+ * swap every primary color. Every brand passes WCAG 2.2 AA in both modes
+ * (checked by `scripts/check-contrast.mjs`).
+ */
+export type ThemeBrand = "black" | "blue" | "gold" | "green" | "purple";
+/**
+ * Accent preset. `brand` (the default) is a bright shade of the brand's own
+ * hue (blue gets a sky blue); `lime` is the original bright yellow-green, the
+ * same in every brand.
+ */
+export type ThemeAccent = "brand" | "lime";
+/** Light or dark color mode. */
+export type ThemeMode = "light" | "dark";
+/** The brand, accent, and mode set by the nearest `Theme` wrappers (unset: inherited from the page). */
+export interface ThemeValue {
+    /** A preset name, or `"custom"` for a hex `brand` (its tokens are in `brandVars`). */
+    brand?: ThemeBrand | "custom";
+    mode?: ThemeMode;
+    /** The generated `--brand-*` custom properties of a custom brand. */
+    brandVars?: Readonly<Record<string, string>>;
+    /** An accent preset, or `"custom"` for a hex `accent` (its tokens are in `accentVars`). */
+    accent?: ThemeAccent | "custom";
+    /** The generated `--accent-*` custom properties of a custom accent. */
+    accentVars?: Readonly<Record<string, string>>;
+}
+/**
+ * The brand, accent, and mode set by enclosing `Theme` wrappers (each falls
+ * back to the next one out). All are undefined when only the page (`<html>`)
+ * attributes apply. `Portal` uses this so overlays keep their area's theme.
+ */
+export declare function useTheme(): ThemeValue;
+export interface ThemeProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Brand palette for everything inside: buttons, links, focus rings,
+     * selection, and indicators all switch at once. Leave unset to inherit.
+     *
+     * A preset name, or any hex color (`"#e11d48"`) for a custom palette
+     * generated in both modes. One hex is used as given in the mode where it
+     * meets WCAG AA (dark colors in light mode, light colors in dark mode) and
+     * the other mode gets a matching shade; pass `{ light, dark }` to choose
+     * both. A color that fails contrast is shifted lighter or darker (same hue)
+     * just enough to pass, with a console warning in development.
+     */
+    brand?: ThemeBrand | BrandColor;
+    /**
+     * The accent: the energetic highlight on badges, switches, progress bars,
+     * sliders, steppers, and active navigation. Leave unset to inherit; with no
+     * accent set anywhere, each brand uses its own (a bright shade of its hue).
+     *
+     * `"lime"` for the original bright yellow-green, `"brand"` to go back to the
+     * brand's own inside an area with another accent, or any hex color for a
+     * custom accent. Accents always carry dark text, so a color too dark for
+     * that is lightened (same hue), with a console warning in development. An
+     * accent set here also holds inside nested brands.
+     */
+    accent?: ThemeAccent | BrandColor;
+    /** Color mode for everything inside. Leave unset to inherit. */
+    mode?: ThemeMode;
+    /**
+     * Paint the page background and text color of the theme on this wrapper
+     * (useful when `mode` differs from the page around it). @default false
+     */
+    fill?: boolean;
+}
+/**
+ * Applies a brand palette, accent, and/or color mode to everything inside
+ * it, through `data-brand`, `data-accent`, and `data-theme` (and, for hex
+ * colors, the generated custom properties inline). Wrap the whole app, or
+ * any part of it; themes nest (a blue area inside a purple app, a dark panel
+ * on a light page). Overlays opened inside (Popover, Menu, Modal, Tooltip,
+ * Toast, ...) render elsewhere in the page but keep this theme. For the whole
+ * page you can instead set the attributes on `<html>`:
+ * `<html data-theme="dark" data-brand="purple" data-accent="lime">`.
+ */
+export declare const Theme: ({ brand, accent: accentProp, mode, fill, className, style, ...rest }: ThemeProps) => import("react").JSX.Element;

package/dist/components/utilities/Theme/Theme.mjs

@@ -0,0 +1,86 @@
+import { cx as e } from "../../../utils/cx.mjs";
+import { accentPaletteVars as t, brandPaletteVars as n, createAccentPalette as r, createBrandPalette as i, isHexColor as a } from "../../../utils/brandPalette.mjs";
+import o from "./Theme.module.css.mjs";
+import { createContext as s, useContext as c, useEffect as l, useMemo as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/components/utilities/Theme/Theme.tsx
+var f = globalThis.process?.env?.NODE_ENV !== "production", p = [
+	"black",
+	"blue",
+	"gold",
+	"green",
+	"purple"
+], m = (e) => p.includes(e), h = ["brand", "lime"], g = "volt", _ = (e) => h.includes(e), v = s({});
+function y() {
+	return c(v);
+}
+function b(e, t) {
+	if (!(e === void 0 || t(e))) return typeof e == "string" ? e : `${e.light}|${e.dark}`;
+}
+function x(e) {
+	let [t, n] = e.split("|");
+	return n === void 0 ? a(t) ? t : null : a(t) && a(n) ? {
+		light: t,
+		dark: n
+	} : null;
+}
+var S = ({ brand: a, accent: s, mode: p, fill: h = !1, className: y, style: S, ...C }) => {
+	let w = c(v), T = s === g ? "lime" : s;
+	l(() => {
+		f && s === g && console.warn("[Theme] accent \"volt\" is now called \"lime\". \"volt\" still works; switch to \"lime\" when convenient.");
+	}, [s]);
+	let E = b(a, m), D = u(() => {
+		if (E === void 0) return;
+		let e = x(E);
+		return e === null ? null : i(e);
+	}, [E]), O = u(() => D ? n(D) : void 0, [D]), k = b(T, _), A = u(() => {
+		if (k === void 0) return;
+		let e = x(k);
+		return e === null ? null : r(e);
+	}, [k]), j = u(() => A ? t(A) : void 0, [A]);
+	l(() => {
+		if (f) {
+			D === null && console.error(`[Theme] brand "${E}" is not a preset or a hex color (#rgb or #rrggbb); it is ignored.`);
+			for (let { mode: e, requested: t, used: n } of D?.adjustments ?? []) console.warn(`[Theme] brand ${t} doesn't meet WCAG AA contrast in ${e} mode; using ${n} instead.`);
+			A === null && console.error(`[Theme] accent "${k}" is not "brand", "lime", or a hex color (#rgb or #rrggbb); it is ignored.`);
+			for (let { mode: e, requested: t, used: n } of A?.adjustments ?? []) console.warn(`[Theme] accent ${t} is too dark for dark text in ${e} mode; using ${n} instead.`);
+		}
+	}, [
+		D,
+		E,
+		A,
+		k
+	]);
+	let M = m(a) ? a : O ? "custom" : void 0, N = _(T) ? T : j ? "custom" : void 0, P = M ?? w.brand, F = M ? O : w.brandVars, I = N ?? w.accent, L = N ? j : w.accentVars, R = p ?? w.mode, z = u(() => ({
+		brand: P,
+		mode: R,
+		brandVars: F,
+		accent: I,
+		accentVars: L
+	}), [
+		P,
+		R,
+		F,
+		I,
+		L
+	]), B = O || j ? {
+		...O,
+		...j
+	} : void 0;
+	return /* @__PURE__ */ d(v.Provider, {
+		value: z,
+		children: /* @__PURE__ */ d("div", {
+			...C,
+			"data-brand": M,
+			"data-accent": N,
+			"data-theme": p,
+			className: e(o.root, h && o.fill, y),
+			style: B ? {
+				...B,
+				...S
+			} : S
+		})
+	});
+};
+//#endregion
+export { S as Theme, y as useTheme };

package/dist/components/utilities/Theme/Theme.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_qtdmn_3`,t=`_fill_qtdmn_11`,n={root:e,fill:t};exports.default=n,exports.fill=t,exports.root=e;

package/dist/components/utilities/Theme/Theme.module.css.mjs

@@ -0,0 +1,7 @@
+//#region src/components/utilities/Theme/Theme.module.css
+var e = "_root_qtdmn_3", t = "_fill_qtdmn_11", n = {
+	root: e,
+	fill: t
+};
+//#endregion
+export { n as default, t as fill, e as root };

package/dist/components/utilities/Theme/index.d.ts

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

package/dist/components/utilities/VisuallyHidden/VisuallyHidden.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("./VisuallyHidden.module.css.cjs.js");let n=require("react/jsx-runtime");var r=({className:r,...i})=>(0,n.jsx)(`span`,{className:e.cx(t.default.root,r),...i});exports.VisuallyHidden=r;

package/dist/components/utilities/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithRef } from 'react';
+export type VisuallyHiddenProps = ComponentPropsWithRef<"span">;
+/** Hides content visually while keeping it available to screen readers. */
+export declare const VisuallyHidden: ({ className, ...props }: VisuallyHiddenProps) => import("react").JSX.Element;

package/dist/components/utilities/VisuallyHidden/VisuallyHidden.mjs

@@ -0,0 +1,10 @@
+import { cx as e } from "../../../utils/cx.mjs";
+import t from "./VisuallyHidden.module.css.mjs";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/utilities/VisuallyHidden/VisuallyHidden.tsx
+var r = ({ className: r, ...i }) => /* @__PURE__ */ n("span", {
+	className: e(t.root, r),
+	...i
+});
+//#endregion
+export { r as VisuallyHidden };

package/dist/components/utilities/VisuallyHidden/VisuallyHidden.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1snyg_1`,t={root:e};exports.default=t,exports.root=e;

package/dist/components/utilities/VisuallyHidden/VisuallyHidden.module.css.mjs

@@ -0,0 +1,4 @@
+//#region src/components/utilities/VisuallyHidden/VisuallyHidden.module.css
+var e = "_root_1snyg_1", t = { root: e };
+//#endregion
+export { t as default, e as root };

package/dist/components/utilities/VisuallyHidden/index.d.ts

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

package/dist/hooks/elementSource.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t(e){return typeof e==`object`&&!!e&&`current`in e&&!(e instanceof Node)}function n(e){return e?t(e)?e.current??null:e:null}function r(t){let[r,i]=(0,e.useState)(()=>n(t));return(0,e.useLayoutEffect)(()=>{let e=n(t);i(t=>t===e?t:e)}),r}exports.resolveElement=n,exports.useResolvedElement=r;

package/dist/hooks/elementSource.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+/**
+ * An element given directly (for example from a `useState` callback ref) or
+ * through a ref object. Hooks that accept this re-check ref objects after
+ * every commit, so elements that mount late (inside a Portal, or after a
+ * presence animation) are still picked up.
+ */
+export type ElementSource<T extends HTMLElement = HTMLElement> = T | null | undefined | RefObject<T | null>;
+/** Reads the element out of an `ElementSource` right now. */
+export declare function resolveElement<T extends HTMLElement>(source: ElementSource<T>): T | null;
+/**
+ * Returns the element behind `source` as state, re-checking ref objects
+ * after every commit of the calling component. Effects that depend on the
+ * returned value re-run when the element appears, changes, or goes away.
+ */
+export declare function useResolvedElement<T extends HTMLElement>(source: ElementSource<T>): T | null;

package/dist/hooks/elementSource.mjs

@@ -0,0 +1,17 @@
+import { useLayoutEffect as e, useState as t } from "react";
+//#region src/hooks/elementSource.ts
+function n(e) {
+	return typeof e == "object" && !!e && "current" in e && !(e instanceof Node);
+}
+function r(e) {
+	return e ? n(e) ? e.current ?? null : e : null;
+}
+function i(n) {
+	let [i, a] = t(() => r(n));
+	return e(() => {
+		let e = r(n);
+		a((t) => t === e ? t : e);
+	}), i;
+}
+//#endregion
+export { r as resolveElement, i as useResolvedElement };

package/dist/hooks/index.d.ts

@@ -0,0 +1,21 @@
+export * from './elementSource';
+export * from './useControllableState';
+export * from './useDismiss';
+export * from './useFloatingPosition';
+export * from './useFocusTrap';
+export * from './useFormReset';
+export * from './useFormValidation';
+export * from './useInertOutside';
+export * from './useOverlayLayer';
+export * from './useScrollLock';
+export * from './useMergedRef';
+export * from './useMediaQuery';
+export * from './useResponsiveValue';
+export * from './useDisclosure';
+export * from './useTiming';
+export * from './useStorage';
+export * from './useClipboard';
+export * from './useHotkeys';
+export * from './useElementObservers';
+export * from './useEnvironment';
+export * from './useVirtualizer';

package/dist/hooks/useClipboard.cjs.js

@@ -0,0 +1 @@
+const e=require("../utils/clipboard.cjs.js");let t=require("react");function n({timeout:n=2e3}={}){let[r,i]=(0,t.useState)(!1),[a,o]=(0,t.useState)(null),s=(0,t.useRef)(void 0);return(0,t.useEffect)(()=>()=>clearTimeout(s.current),[]),{copy:(0,t.useCallback)(async t=>{clearTimeout(s.current);try{return await e.copyToClipboard(t),o(null),i(!0),s.current=setTimeout(()=>i(!1),n),!0}catch(e){return i(!1),o(e instanceof Error?e:Error(String(e))),!1}},[n]),copied:r,error:a,reset:(0,t.useCallback)(()=>{clearTimeout(s.current),i(!1),o(null)},[])}}exports.useClipboard=n;

package/dist/hooks/useClipboard.d.ts

@@ -0,0 +1,24 @@
+export interface UseClipboardResult {
+    /** Copies text; resolves to true on success. */
+    copy: (text: string) => Promise<boolean>;
+    /** True for `timeout` ms after a successful copy (for a "Copied" label). */
+    copied: boolean;
+    /** The error of the last failed copy, if any. */
+    error: Error | null;
+    /** Clears `copied` and `error`. */
+    reset: () => void;
+}
+/**
+ * Copies text to the clipboard, with a `copied` flag that resets after
+ * `timeout` ms. Uses the Clipboard API, with a fallback for browsers or
+ * contexts that block it. Pair a visible "Copied" change with an
+ * announcement (`announce`) so screen readers hear it too.
+ *
+ * ```tsx
+ * const { copy, copied } = useClipboard();
+ * <Button onClick={() => copy(inviteLink)}>{copied ? "Copied" : "Copy link"}</Button>
+ * ```
+ */
+export declare function useClipboard({ timeout }?: {
+    timeout?: number;
+}): UseClipboardResult;

package/dist/hooks/useClipboard.mjs

@@ -0,0 +1,23 @@
+import { copyToClipboard as e } from "../utils/clipboard.mjs";
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+//#region src/hooks/useClipboard.ts
+function a({ timeout: a = 2e3 } = {}) {
+	let [o, s] = i(!1), [c, l] = i(null), u = r(void 0);
+	return n(() => () => clearTimeout(u.current), []), {
+		copy: t(async (t) => {
+			clearTimeout(u.current);
+			try {
+				return await e(t), l(null), s(!0), u.current = setTimeout(() => s(!1), a), !0;
+			} catch (e) {
+				return s(!1), l(e instanceof Error ? e : Error(String(e))), !1;
+			}
+		}, [a]),
+		copied: o,
+		error: c,
+		reset: t(() => {
+			clearTimeout(u.current), s(!1), l(null);
+		}, [])
+	};
+}
+//#endregion
+export { a as useClipboard };

package/dist/hooks/useControllableState.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t({value:t,defaultValue:n,onChange:r}){let[i,a]=(0,e.useState)(n),o=t!==void 0,s=o?t:i,c=(0,e.useRef)(s);c.current=s;let l=(0,e.useRef)(r);return l.current=r,[s,(0,e.useCallback)(e=>{let t=typeof e==`function`?e(c.current):e;Object.is(t,c.current)||(o||a(t),l.current?.(t))},[o])]}exports.useControllableState=t;

package/dist/hooks/useControllableState.d.ts

@@ -0,0 +1,15 @@
+interface UseControllableStateOptions<T> {
+    /** Controlled value. When defined, the component is controlled. */
+    value?: T;
+    /** Initial value when uncontrolled. */
+    defaultValue: T;
+    /** Called with the next value whenever it changes, controlled or not. */
+    onChange?: (value: T) => void;
+}
+/**
+ * Supports both controlled (`value` + `onChange`) and uncontrolled
+ * (`defaultValue`) usage with one API. Every stateful component
+ * (Tabs, Accordion, Switch, Select, ...) should use this.
+ */
+export declare function useControllableState<T>({ value, defaultValue, onChange, }: UseControllableStateOptions<T>): [T, (next: T | ((prev: T) => T)) => void];
+export {};

package/dist/hooks/useControllableState.mjs

@@ -0,0 +1,13 @@
+import { useCallback as e, useRef as t, useState as n } from "react";
+//#region src/hooks/useControllableState.ts
+function r({ value: r, defaultValue: i, onChange: a }) {
+	let [o, s] = n(i), c = r !== void 0, l = c ? r : o, u = t(l);
+	u.current = l;
+	let d = t(a);
+	return d.current = a, [l, e((e) => {
+		let t = typeof e == "function" ? e(u.current) : e;
+		Object.is(t, u.current) || (c || s(t), d.current?.(t));
+	}, [c])];
+}
+//#endregion
+export { r as useControllableState };

package/dist/hooks/useDisclosure.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t(t=!1,n={}){let[r,i]=(0,e.useState)(t),a=(0,e.useRef)(n);a.current=n;let o=(0,e.useRef)(t),s=(0,e.useCallback)(e=>{o.current!==e&&(o.current=e,i(e),(e?a.current.onOpen:a.current.onClose)?.())},[]);return[r,(0,e.useMemo)(()=>({open:()=>s(!0),close:()=>s(!1),toggle:()=>s(!o.current),set:s}),[s])]}function n(t=[!1,!0]){let[n,r]=(0,e.useState)(0),i=(0,e.useRef)(t);i.current=t;let a=(0,e.useCallback)(e=>{r(t=>{if(e===void 0)return(t+1)%i.current.length;let n=i.current.indexOf(e);return n>=0?n:t})},[]);return[t[Math.min(n,t.length-1)],a]}exports.useDisclosure=t,exports.useToggle=n;

package/dist/hooks/useDisclosure.d.ts

@@ -0,0 +1,35 @@
+export interface DisclosureHandlers {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    /** Sets the state directly. */
+    set: (opened: boolean) => void;
+}
+export interface UseDisclosureOptions {
+    /** Called when the state changes to open. */
+    onOpen?: () => void;
+    /** Called when the state changes to closed. */
+    onClose?: () => void;
+}
+/**
+ * Open/closed state for anything that shows and hides (a Modal, Drawer,
+ * Popover, a collapsible section), with stable handlers.
+ *
+ * ```tsx
+ * const [opened, { open, close }] = useDisclosure();
+ * <Button onClick={open}>Edit</Button>
+ * <Modal open={opened} onOpenChange={(next) => (next ? open() : close())}>…</Modal>
+ * ```
+ */
+export declare function useDisclosure(initial?: boolean, options?: UseDisclosureOptions): [opened: boolean, handlers: DisclosureHandlers];
+/**
+ * Cycles through values: `[false, true]` by default (a boolean toggle), or
+ * any list (`["list", "grid"]`). `toggle()` moves to the next value (wrapping);
+ * `toggle(value)` jumps to one.
+ *
+ * ```tsx
+ * const [view, toggleView] = useToggle(["list", "grid"] as const);
+ * <Button onClick={() => toggleView()}>Show {view === "list" ? "grid" : "list"}</Button>
+ * ```
+ */
+export declare function useToggle<T = boolean>(values?: readonly T[]): [value: T, toggle: (value?: T) => void];

package/dist/hooks/useDisclosure.mjs

@@ -0,0 +1,29 @@
+import { useCallback as e, useMemo as t, useRef as n, useState as r } from "react";
+//#region src/hooks/useDisclosure.ts
+function i(i = !1, a = {}) {
+	let [o, s] = r(i), c = n(a);
+	c.current = a;
+	let l = n(i), u = e((e) => {
+		l.current !== e && (l.current = e, s(e), (e ? c.current.onOpen : c.current.onClose)?.());
+	}, []);
+	return [o, t(() => ({
+		open: () => u(!0),
+		close: () => u(!1),
+		toggle: () => u(!l.current),
+		set: u
+	}), [u])];
+}
+function a(t = [!1, !0]) {
+	let [i, a] = r(0), o = n(t);
+	o.current = t;
+	let s = e((e) => {
+		a((t) => {
+			if (e === void 0) return (t + 1) % o.current.length;
+			let n = o.current.indexOf(e);
+			return n >= 0 ? n : t;
+		});
+	}, []);
+	return [t[Math.min(i, t.length - 1)], s];
+}
+//#endregion
+export { i as useDisclosure, a as useToggle };

package/dist/hooks/useDismiss.cjs.js

@@ -0,0 +1 @@
+const e=require("./useOverlayLayer.cjs.js");let t=require("react");function n(n,{active:r,onDismiss:i,escapeKey:a=!0,outsidePress:o=!0,layer:s}){let c=e.useOverlayLayer({active:r&&!s}),l=s??c,u=(0,t.useRef)({});u.current=r?{onEscape:a?e=>i(e):void 0,onOutsidePress:o?e=>i(e):void 0,elements:()=>n}:{};let{addHandlers:d}=l;(0,t.useLayoutEffect)(()=>d(u),[d])}exports.useDismiss=n;

package/dist/hooks/useDismiss.d.ts

@@ -0,0 +1,33 @@
+import { ElementSource } from './elementSource';
+import { OverlayLayer } from './useOverlayLayer';
+/** The event that caused a dismissal: an Escape `keydown` or an outside `pointerdown`. */
+export type DismissEvent = KeyboardEvent | PointerEvent;
+export interface UseDismissOptions {
+    /** Listen only while active (e.g. while a Popover is open). */
+    active: boolean;
+    /**
+     * Called when the user presses Escape or presses outside. Receives the
+     * event; check `event.type === "keydown"` to tell Escape from a press.
+     */
+    onDismiss: (event: DismissEvent) => void;
+    /** Dismiss on Escape. Default true. */
+    escapeKey?: boolean;
+    /** Dismiss on a pointer press outside every ref (and every child layer). Default true. */
+    outsidePress?: boolean;
+    /**
+     * The overlay layer to attach to (from `useOverlayLayer`). When omitted,
+     * `useDismiss` registers its own non-modal layer, parented to the nearest
+     * `OverlayLayerProvider`.
+     */
+    layer?: OverlayLayer;
+}
+/**
+ * Closes floating UI on Escape or on a press outside the given elements.
+ * Pass the floating element and its trigger, so pressing the trigger
+ * doesn't count as "outside" (WCAG 1.4.13: dismissible).
+ *
+ * Built on the shared overlay layer stack: only the topmost layer answers
+ * Escape, an outside press closes layers from the top down until it reaches
+ * one that contains it, and events already `defaultPrevented` are ignored.
+ */
+export declare function useDismiss(refs: ElementSource[], { active, onDismiss, escapeKey, outsidePress, layer }: UseDismissOptions): void;

package/dist/hooks/useDismiss.mjs

@@ -0,0 +1,15 @@
+import { useOverlayLayer as e } from "./useOverlayLayer.mjs";
+import { useLayoutEffect as t, useRef as n } from "react";
+//#region src/hooks/useDismiss.ts
+function r(r, { active: i, onDismiss: a, escapeKey: o = !0, outsidePress: s = !0, layer: c }) {
+	let l = e({ active: i && !c }), u = c ?? l, d = n({});
+	d.current = i ? {
+		onEscape: o ? (e) => a(e) : void 0,
+		onOutsidePress: s ? (e) => a(e) : void 0,
+		elements: () => r
+	} : {};
+	let { addHandlers: f } = u;
+	t(() => f(d), [f]);
+}
+//#endregion
+export { r as useDismiss };

package/dist/hooks/useElementObservers.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t(t,n,r,i){let a=(0,e.useRef)(n);a.current=n;let o=typeof i==`boolean`?i:i?.capture,s=typeof i==`object`?i.passive:void 0,c=typeof i==`object`?i.once:void 0;(0,e.useEffect)(()=>{let e=r&&`current`in r?r.current:r??(typeof window<`u`?window:void 0);if(!e)return;let n=e=>a.current(e);return e.addEventListener(t,n,{capture:o,passive:s,once:c}),()=>e.removeEventListener(t,n,{capture:o})},[t,r,o,s,c])}function n(t,{enabled:n=!0,ignore:r=[]}={}){let i=(0,e.useRef)(null),a=(0,e.useRef)({handler:t,ignore:r});return a.current={handler:t,ignore:r},(0,e.useEffect)(()=>{if(!n||typeof document>`u`)return;let e=e=>{let t=e.target;t&&t.isConnected&&([i.current,...a.current.ignore.map(e=>e&&`current`in e?e.current:e)].some(e=>e?.contains(t))||a.current.handler(e))};return document.addEventListener(`pointerdown`,e),document.addEventListener(`focusin`,e),()=>{document.removeEventListener(`pointerdown`,e),document.removeEventListener(`focusin`,e)}},[n]),i}function r({root:t,rootMargin:n,threshold:r=0,once:i=!1}={}){let[a,o]=(0,e.useState)(null),[s,c]=(0,e.useState)(null),l=(0,e.useRef)(!1),u=Array.isArray(r)?r.join(`,`):String(r);return(0,e.useEffect)(()=>{if(!a||typeof IntersectionObserver>`u`||l.current)return;let e=new IntersectionObserver(([t])=>{c(t),i&&t.isIntersecting&&(l.current=!0,e.disconnect())},{root:t,rootMargin:n,threshold:u.split(`,`).map(Number)});return e.observe(a),()=>e.disconnect()},[a,t,n,u,i]),{ref:(0,e.useCallback)(e=>o(e),[]),entry:s,isIntersecting:s?.isIntersecting??!1}}function i(){let[t,n]=(0,e.useState)(null),[r,i]=(0,e.useState)({width:0,height:0});return(0,e.useEffect)(()=>{if(!t||typeof ResizeObserver>`u`)return;let e=new ResizeObserver(([e])=>{let{width:t,height:n}=e.contentRect;i(e=>e.width===t&&e.height===n?e:{width:t,height:n})});return e.observe(t),()=>e.disconnect()},[t]),{ref:(0,e.useCallback)(e=>n(e),[]),...r}}exports.useClickOutside=n,exports.useElementSize=i,exports.useEventListener=t,exports.useIntersection=r;