@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/feedback/Skeleton/Skeleton.d.ts

@@ -0,0 +1,151 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { Radius, Space } from '../../../types/common';
+import { AvatarShape, AvatarSize } from '../../data-display/Avatar';
+import { TypographyLeading, TypographySize } from '../../primitives/Typography';
+/**
+ * Placeholder shape.
+ * - `rect`: a rounded block (`--radius-md`). Full width, `--space-12` tall by default.
+ * - `text`: a bar the height of the font (`1em`), centered in one line box
+ *   (`1lh`), so stacked bars match the height of real text.
+ * - `circle`: a circle (`--space-10` by default); give it a `width` and the height follows.
+ * - `pill`: a pill (`--control-radius`), shaped like a button or chip.
+ */
+export type SkeletonVariant = "rect" | "text" | "circle" | "pill";
+/**
+ * Loading motion. Both stop under `prefers-reduced-motion: reduce`.
+ * - `pulse`: the fill gently fades in and out.
+ * - `shimmer`: a soft highlight sweeps across in the reading direction.
+ * - `none`: static.
+ */
+export type SkeletonAnimation = "pulse" | "shimmer" | "none";
+/** A CSS length. Numbers are treated as pixels. */
+export type SkeletonLength = string | number;
+export interface SkeletonOwnProps {
+    /** Placeholder shape. Ignored in wrapper mode, except that `circle` and `pill` round the overlay. @default "rect" */
+    variant?: SkeletonVariant;
+    /** Width as a CSS length (numbers are px). Defaults depend on `variant` (full width for `rect` and `text`). */
+    width?: SkeletonLength;
+    /** Height as a CSS length (numbers are px). Defaults depend on `variant`; a `circle` with only a `width` stays round. */
+    height?: SkeletonLength;
+    /** Corner rounding. Overrides the variant's default (`md` for `rect`, `sm` for `text`, round for `circle`, pill for `pill`). */
+    radius?: Radius;
+    /** Loading motion. Stops under `prefers-reduced-motion: reduce`. @default "pulse" */
+    animation?: SkeletonAnimation;
+    /**
+     * Wrapper mode only (when `children` are given): while `true`, the
+     * children are laid out but hidden (`visibility: hidden`, `inert`,
+     * `aria-hidden`) under a skeleton fill of the same size, so nothing shifts
+     * when the content arrives. While `false`, the children render normally.
+     * Without children, `false` renders nothing.
+     * @default true
+     */
+    loading?: boolean;
+    /**
+     * Wrapper mode only: render the wrapper as `inline-block`, so it shrinks to
+     * its content (for an `Avatar`, a `Badge`, or a `Button`). By default it is a
+     * full-width block (for cards, rows, and paragraphs).
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Wrapper mode only: when set, the wrapper also announces this text once
+     * through a polite `role="status"` region while loading. Leave it unset when
+     * a surrounding `SkeletonGroup` already announces.
+     */
+    loadingLabel?: string;
+    /** Wrapper mode only: text announced once loading finishes (e.g. "Profile loaded"). Needs `loadingLabel`. */
+    loadedLabel?: string;
+    /**
+     * Real content. When given, `Skeleton` becomes a wrapper that shows a
+     * placeholder shaped like this content while `loading`.
+     */
+    children?: ReactNode;
+    /** The root element: a `span` for a placeholder, a `div` in wrapper mode. */
+    ref?: Ref<HTMLElement>;
+}
+export type SkeletonProps = SkeletonOwnProps & Omit<ComponentPropsWithRef<"span">, keyof SkeletonOwnProps>;
+/**
+ * A soft, rounded placeholder shown while content loads.
+ *
+ * Use it two ways:
+ * - **Placeholder**: `<Skeleton variant="text" />`, sized with `width` and
+ *   `height`. Renders a decorative `span` (`aria-hidden`).
+ * - **Wrapper**: `<Skeleton loading={isLoading}>{content}</Skeleton>`. The
+ *   content is laid out invisibly under the fill, so the page doesn't shift
+ *   when it loads. When `loading` turns `false`, the same wrapper shows the
+ *   content.
+ *
+ * Accessibility:
+ * - Placeholders are hidden from assistive technology. While loading, wrapped
+ *   content is `inert` and hidden, so it can't be focused or read.
+ * - Many placeholders shouldn't announce many times: wrap the loading region
+ *   in one `SkeletonGroup` (or pass `loadingLabel` to a single wrapper), which
+ *   marks the region `aria-busy` and announces "Loading…" once.
+ */
+export declare const Skeleton: ({ variant, width, height, radius, animation, loading, inline, loadingLabel, loadedLabel, children, className, style, ref, ...rest }: SkeletonProps) => import("react").JSX.Element | null;
+export interface SkeletonTextOwnProps {
+    /** Number of lines. @default 3 */
+    lines?: number;
+    /** Width of the last line, as a CSS length (numbers are px). Ignored for a single line unless set. @default "60%" */
+    lastLineWidth?: SkeletonLength;
+    /** Width of the whole block (numbers are px). @default "100%" */
+    width?: SkeletonLength;
+    /**
+     * Font size of the text this stands in for, matching Typography's `size`.
+     * Each bar is `1em` tall inside a `1lh` line box, so the block is as tall
+     * as the real text. @default "md"
+     */
+    size?: TypographySize;
+    /** Line height, matching Typography's `leading`. Use `tight` for headings. @default "normal" */
+    leading?: TypographyLeading;
+    /**
+     * Extra space between lines (a `--space-*` step). Keep `0` to match real
+     * text height; line height already spaces the bars. @default 0
+     */
+    gap?: Space;
+    /** Loading motion. @default "pulse" */
+    animation?: SkeletonAnimation;
+}
+export type SkeletonTextProps = SkeletonTextOwnProps & Omit<ComponentPropsWithRef<"span">, keyof SkeletonTextOwnProps | "children">;
+/**
+ * Lines of placeholder text, sized like real `Text` or `Heading` content so
+ * nothing jumps when the text arrives. The last line is shorter. Decorative
+ * (`aria-hidden`).
+ */
+export declare const SkeletonText: ({ lines, lastLineWidth, width, size, leading, gap, animation, className, style, ...rest }: SkeletonTextProps) => import("react").JSX.Element;
+export interface SkeletonAvatarOwnProps {
+    /** Matches `Avatar` sizes: `xs` 24px, `sm` 32px, `md` 40px, `lg` 48px, `xl` 64px, `2xl` 96px. @default "md" */
+    size?: AvatarSize;
+    /** Matches `Avatar` shapes. @default "circle" */
+    shape?: AvatarShape;
+    /** Loading motion. @default "pulse" */
+    animation?: SkeletonAnimation;
+}
+export type SkeletonAvatarProps = SkeletonAvatarOwnProps & Omit<ComponentPropsWithRef<"span">, keyof SkeletonAvatarOwnProps | "children">;
+/** A placeholder the exact size and shape of an `Avatar`. Decorative (`aria-hidden`). */
+export declare const SkeletonAvatar: ({ size, shape, animation, className, ...rest }: SkeletonAvatarProps) => import("react").JSX.Element;
+export type SkeletonCircleProps = Omit<SkeletonAvatarProps, "shape">;
+/** A circular placeholder in `Avatar` sizes (`SkeletonAvatar` with `shape="circle"`). */
+export declare const SkeletonCircle: (props: SkeletonCircleProps) => import("react").JSX.Element;
+export interface SkeletonGroupOwnProps {
+    /**
+     * Whether the region is loading. While `true` it carries `aria-busy="true"`
+     * and `label` is announced once. @default true
+     */
+    loading?: boolean;
+    /** Text announced politely when loading starts. Localize it here. @default "Loading…" */
+    label?: string;
+    /** Text announced when loading finishes (e.g. "Results loaded"). Nothing is announced by default. */
+    loadedLabel?: string;
+    /** The placeholders while loading, then the real content. */
+    children?: ReactNode;
+}
+export type SkeletonGroupProps = SkeletonGroupOwnProps & Omit<ComponentPropsWithRef<"div">, keyof SkeletonGroupOwnProps>;
+/**
+ * Wraps a loading region so screen readers get one announcement instead of
+ * one per placeholder. The region carries `aria-busy` while loading; a
+ * visually hidden polite `role="status"` beside it says `label` once.
+ * Put the real content inside the same group, so `aria-busy` clears on the
+ * region that holds it.
+ */
+export declare const SkeletonGroup: ({ loading, label: labelProp, loadedLabel, children, ...rest }: SkeletonGroupProps) => import("react").JSX.Element;

package/dist/components/feedback/Skeleton/Skeleton.mjs

@@ -0,0 +1,157 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { VisuallyHidden as n } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import r from "./Skeleton.module.css.mjs";
+import { useEffect as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/feedback/Skeleton/Skeleton.tsx
+var l = {
+	rect: r.rect,
+	text: r.text,
+	circle: r.circle,
+	pill: r.pill
+}, u = {
+	pulse: r.pulse,
+	shimmer: r.shimmer,
+	none: ""
+}, d = {
+	none: r.radiusNone,
+	xs: r.radiusXs,
+	sm: r.radiusSm,
+	md: r.radiusMd,
+	lg: r.radiusLg,
+	xl: r.radiusXl,
+	"2xl": r.radius2xl,
+	pill: r.radiusPill
+}, f = (e) => e === void 0 ? void 0 : typeof e == "number" ? `${e}px` : e, p = (e, t) => {
+	let n = {}, r = f(e), i = f(t);
+	return r !== void 0 && (n["--_skeleton-width"] = r), i !== void 0 && (n["--_skeleton-height"] = i), n;
+}, m = (e, t, n) => {
+	let [r, o] = a("");
+	return i(() => {
+		if (!e) {
+			o(n ?? "");
+			return;
+		}
+		o("");
+		let r = window.setTimeout(() => o(t), 150);
+		return () => window.clearTimeout(r);
+	}, [
+		e,
+		t,
+		n
+	]), r;
+}, h = ({ message: e }) => /* @__PURE__ */ s(n, {
+	role: "status",
+	"aria-live": "polite",
+	"aria-atomic": "true",
+	children: e
+}), g = ({ variant: e = "rect", width: n, height: i, radius: a, animation: f = "pulse", loading: g = !0, inline: _ = !1, loadingLabel: v, loadedLabel: y, children: b, className: x, style: S, ref: C, ...w }) => {
+	let T = b != null && b !== !1, E = T && v !== void 0, D = m(E && g, v ?? "", E ? y : void 0);
+	if (!T) return g ? /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		...w,
+		ref: C,
+		className: t(r.root, l[e], u[f], a && d[a], x),
+		style: {
+			...p(n, i),
+			...S
+		},
+		"data-variant": e
+	}) : null;
+	let O = /* @__PURE__ */ c("div", {
+		"aria-busy": g || void 0,
+		...w,
+		ref: C,
+		className: t(r.wrapper, _ && r.wrapperInline, g && r.wrapperLoading, x),
+		style: {
+			...p(n, i),
+			...S
+		},
+		"data-loading": g ? "" : void 0,
+		children: [/* @__PURE__ */ s("div", {
+			className: t(r.content, g && r.hiddenContent),
+			inert: g,
+			"aria-hidden": g || void 0,
+			children: b
+		}), g && /* @__PURE__ */ s("span", {
+			"aria-hidden": "true",
+			className: t(r.root, r.overlay, e === "circle" && r.radiusRound, e === "pill" && r.radiusPill, u[f], a && d[a])
+		})]
+	});
+	return E ? /* @__PURE__ */ c(o, { children: [O, /* @__PURE__ */ s(h, { message: D })] }) : O;
+}, _ = {
+	xs: r.sizeXs,
+	sm: r.sizeSm,
+	md: r.sizeMd,
+	lg: r.sizeLg,
+	xl: r.sizeXl,
+	"2xl": r.size2xl,
+	"3xl": r.size3xl,
+	"4xl": r.size4xl,
+	"5xl": r.size5xl,
+	"6xl": r.size6xl
+}, v = {
+	tight: r.leadingTight,
+	snug: r.leadingSnug,
+	normal: r.leadingNormal,
+	relaxed: r.leadingRelaxed
+}, y = {
+	0: r.gap0,
+	1: r.gap1,
+	2: r.gap2,
+	3: r.gap3,
+	4: r.gap4,
+	5: r.gap5,
+	6: r.gap6,
+	8: r.gap8,
+	10: r.gap10,
+	12: r.gap12,
+	16: r.gap16,
+	20: r.gap20,
+	24: r.gap24
+}, b = ({ lines: e = 3, lastLineWidth: n, width: i, size: a = "md", leading: o = "normal", gap: c = 0, animation: l = "pulse", className: u, style: d, ...f }) => {
+	let m = Math.max(1, Math.floor(e)), h = n ?? (m > 1 ? "60%" : void 0);
+	return /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		...f,
+		className: t(r.textBlock, _[a], v[o], y[c], u),
+		style: {
+			...p(i, void 0),
+			...d
+		},
+		children: Array.from({ length: m }, (e, t) => /* @__PURE__ */ s(g, {
+			variant: "text",
+			animation: l,
+			width: t === m - 1 ? h : void 0,
+			"aria-hidden": void 0
+		}, t))
+	});
+}, x = {
+	xs: r.avatarXs,
+	sm: r.avatarSm,
+	md: r.avatarMd,
+	lg: r.avatarLg,
+	xl: r.avatarXl,
+	"2xl": r.avatar2xl
+}, S = {
+	circle: r.radiusRound,
+	rounded: r.radiusMd,
+	square: r.radiusSm
+}, C = ({ size: e = "md", shape: n = "circle", animation: i = "pulse", className: a, ...o }) => /* @__PURE__ */ s("span", {
+	"aria-hidden": "true",
+	...o,
+	className: t(r.root, r.avatar, x[e], S[n], u[i], a)
+}), w = (e) => /* @__PURE__ */ s(C, {
+	...e,
+	shape: "circle"
+}), T = ({ loading: t = !0, label: n, loadedLabel: r, children: i, ...a }) => {
+	let l = e(), u = m(t, n ?? l.skeleton.loading, r);
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+		"aria-busy": t || void 0,
+		...a,
+		children: i
+	}), /* @__PURE__ */ s(h, { message: u })] });
+};
+//#endregion
+export { g as Skeleton, C as SkeletonAvatar, w as SkeletonCircle, T as SkeletonGroup, b as SkeletonText };

package/dist/components/feedback/Skeleton/Skeleton.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1vcl4_17`,t=`_rect_1vcl4_55`,n=`_text_1vcl4_65`,r=`_circle_1vcl4_77`,i=`_pill_1vcl4_91`,a=`_radiusNone_1vcl4_105`,o=`_radiusXs_1vcl4_111`,s=`_radiusSm_1vcl4_117`,c=`_radiusMd_1vcl4_123`,l=`_radiusLg_1vcl4_129`,u=`_radiusXl_1vcl4_135`,d=`_radius2xl_1vcl4_141`,f=`_radiusPill_1vcl4_147`,p=`_radiusRound_1vcl4_153`,m=`_pulse_1vcl4_163`,h=`_shimmer_1vcl4_191`,g=`_textBlock_1vcl4_271`,_=`_sizeXs_1vcl4_285`,v=`_sizeSm_1vcl4_291`,y=`_sizeMd_1vcl4_297`,b=`_sizeLg_1vcl4_303`,x=`_sizeXl_1vcl4_309`,S=`_size2xl_1vcl4_315`,C=`_size3xl_1vcl4_321`,w=`_size4xl_1vcl4_327`,T=`_size5xl_1vcl4_333`,E=`_size6xl_1vcl4_339`,D=`_leadingTight_1vcl4_347`,O=`_leadingSnug_1vcl4_353`,k=`_leadingNormal_1vcl4_359`,A=`_leadingRelaxed_1vcl4_365`,j=`_gap0_1vcl4_373`,M=`_gap1_1vcl4_379`,N=`_gap2_1vcl4_385`,P=`_gap3_1vcl4_391`,F=`_gap4_1vcl4_397`,I=`_gap5_1vcl4_403`,L=`_gap6_1vcl4_409`,R=`_gap8_1vcl4_415`,z=`_gap10_1vcl4_421`,B=`_gap12_1vcl4_427`,V=`_gap16_1vcl4_433`,H=`_gap20_1vcl4_439`,U=`_gap24_1vcl4_445`,W=`_avatar_1vcl4_461`,G=`_avatarXs_1vcl4_471`,K=`_avatarSm_1vcl4_477`,q=`_avatarMd_1vcl4_483`,J=`_avatarLg_1vcl4_489`,Y=`_avatarXl_1vcl4_495`,X=`_avatar2xl_1vcl4_501`,Z=`_wrapper_1vcl4_531`,Q=`_wrapperInline_1vcl4_547`,$=`_content_1vcl4_561`,ee=`_hiddenContent_1vcl4_571`,te=`_overlay_1vcl4_579`,ne={root:e,rect:t,text:n,circle:r,pill:i,radiusNone:a,radiusXs:o,radiusSm:s,radiusMd:c,radiusLg:l,radiusXl:u,radius2xl:d,radiusPill:f,radiusRound:p,pulse:m,"skeleton-pulse":`_skeleton-pulse_1vcl4_1`,shimmer:h,"skeleton-shimmer":`_skeleton-shimmer_1vcl4_1`,textBlock:g,sizeXs:_,sizeSm:v,sizeMd:y,sizeLg:b,sizeXl:x,size2xl:S,size3xl:C,size4xl:w,size5xl:T,size6xl:E,leadingTight:D,leadingSnug:O,leadingNormal:k,leadingRelaxed:A,gap0:j,gap1:M,gap2:N,gap3:P,gap4:F,gap5:I,gap6:L,gap8:R,gap10:z,gap12:B,gap16:V,gap20:H,gap24:U,avatar:W,avatarXs:G,avatarSm:K,avatarMd:q,avatarLg:J,avatarXl:Y,avatar2xl:X,wrapper:Z,wrapperInline:Q,content:$,hiddenContent:ee,overlay:te};exports.avatar=W,exports.avatar2xl=X,exports.avatarLg=J,exports.avatarMd=q,exports.avatarSm=K,exports.avatarXl=Y,exports.avatarXs=G,exports.circle=r,exports.content=$,exports.default=ne,exports.gap0=j,exports.gap1=M,exports.gap10=z,exports.gap12=B,exports.gap16=V,exports.gap2=N,exports.gap20=H,exports.gap24=U,exports.gap3=P,exports.gap4=F,exports.gap5=I,exports.gap6=L,exports.gap8=R,exports.hiddenContent=ee,exports.leadingNormal=k,exports.leadingRelaxed=A,exports.leadingSnug=O,exports.leadingTight=D,exports.overlay=te,exports.pill=i,exports.pulse=m,exports.radius2xl=d,exports.radiusLg=l,exports.radiusMd=c,exports.radiusNone=a,exports.radiusPill=f,exports.radiusRound=p,exports.radiusSm=s,exports.radiusXl=u,exports.radiusXs=o,exports.rect=t,exports.root=e,exports.shimmer=h,exports.size2xl=S,exports.size3xl=C,exports.size4xl=w,exports.size5xl=T,exports.size6xl=E,exports.sizeLg=b,exports.sizeMd=y,exports.sizeSm=v,exports.sizeXl=x,exports.sizeXs=_,exports.text=n,exports.textBlock=g,exports.wrapper=Z,exports.wrapperInline=Q;

package/dist/components/feedback/Skeleton/Skeleton.module.css.mjs

@@ -0,0 +1,63 @@
+//#region src/components/feedback/Skeleton/Skeleton.module.css
+var e = "_root_1vcl4_17", t = "_rect_1vcl4_55", n = "_text_1vcl4_65", r = "_circle_1vcl4_77", i = "_pill_1vcl4_91", a = "_radiusNone_1vcl4_105", o = "_radiusXs_1vcl4_111", s = "_radiusSm_1vcl4_117", c = "_radiusMd_1vcl4_123", l = "_radiusLg_1vcl4_129", u = "_radiusXl_1vcl4_135", d = "_radius2xl_1vcl4_141", f = "_radiusPill_1vcl4_147", p = "_radiusRound_1vcl4_153", m = "_pulse_1vcl4_163", h = "_shimmer_1vcl4_191", g = "_textBlock_1vcl4_271", _ = "_sizeXs_1vcl4_285", v = "_sizeSm_1vcl4_291", y = "_sizeMd_1vcl4_297", b = "_sizeLg_1vcl4_303", x = "_sizeXl_1vcl4_309", S = "_size2xl_1vcl4_315", C = "_size3xl_1vcl4_321", w = "_size4xl_1vcl4_327", T = "_size5xl_1vcl4_333", E = "_size6xl_1vcl4_339", D = "_leadingTight_1vcl4_347", O = "_leadingSnug_1vcl4_353", k = "_leadingNormal_1vcl4_359", A = "_leadingRelaxed_1vcl4_365", j = "_gap0_1vcl4_373", M = "_gap1_1vcl4_379", N = "_gap2_1vcl4_385", P = "_gap3_1vcl4_391", F = "_gap4_1vcl4_397", I = "_gap5_1vcl4_403", L = "_gap6_1vcl4_409", R = "_gap8_1vcl4_415", z = "_gap10_1vcl4_421", B = "_gap12_1vcl4_427", V = "_gap16_1vcl4_433", H = "_gap20_1vcl4_439", U = "_gap24_1vcl4_445", W = "_avatar_1vcl4_461", G = "_avatarXs_1vcl4_471", K = "_avatarSm_1vcl4_477", q = "_avatarMd_1vcl4_483", J = "_avatarLg_1vcl4_489", Y = "_avatarXl_1vcl4_495", X = "_avatar2xl_1vcl4_501", Z = "_wrapper_1vcl4_531", Q = "_wrapperInline_1vcl4_547", $ = "_content_1vcl4_561", ee = "_hiddenContent_1vcl4_571", te = "_overlay_1vcl4_579", ne = {
+	root: e,
+	rect: t,
+	text: n,
+	circle: r,
+	pill: i,
+	radiusNone: a,
+	radiusXs: o,
+	radiusSm: s,
+	radiusMd: c,
+	radiusLg: l,
+	radiusXl: u,
+	radius2xl: d,
+	radiusPill: f,
+	radiusRound: p,
+	pulse: m,
+	"skeleton-pulse": "_skeleton-pulse_1vcl4_1",
+	shimmer: h,
+	"skeleton-shimmer": "_skeleton-shimmer_1vcl4_1",
+	textBlock: g,
+	sizeXs: _,
+	sizeSm: v,
+	sizeMd: y,
+	sizeLg: b,
+	sizeXl: x,
+	size2xl: S,
+	size3xl: C,
+	size4xl: w,
+	size5xl: T,
+	size6xl: E,
+	leadingTight: D,
+	leadingSnug: O,
+	leadingNormal: k,
+	leadingRelaxed: A,
+	gap0: j,
+	gap1: M,
+	gap2: N,
+	gap3: P,
+	gap4: F,
+	gap5: I,
+	gap6: L,
+	gap8: R,
+	gap10: z,
+	gap12: B,
+	gap16: V,
+	gap20: H,
+	gap24: U,
+	avatar: W,
+	avatarXs: G,
+	avatarSm: K,
+	avatarMd: q,
+	avatarLg: J,
+	avatarXl: Y,
+	avatar2xl: X,
+	wrapper: Z,
+	wrapperInline: Q,
+	content: $,
+	hiddenContent: ee,
+	overlay: te
+};
+//#endregion
+export { W as avatar, X as avatar2xl, J as avatarLg, q as avatarMd, K as avatarSm, Y as avatarXl, G as avatarXs, r as circle, $ as content, ne as default, j as gap0, M as gap1, z as gap10, B as gap12, V as gap16, N as gap2, H as gap20, U as gap24, P as gap3, F as gap4, I as gap5, L as gap6, R as gap8, ee as hiddenContent, k as leadingNormal, A as leadingRelaxed, O as leadingSnug, D as leadingTight, te as overlay, i as pill, m as pulse, d as radius2xl, l as radiusLg, c as radiusMd, a as radiusNone, f as radiusPill, p as radiusRound, s as radiusSm, u as radiusXl, o as radiusXs, t as rect, e as root, h as shimmer, S as size2xl, C as size3xl, w as size4xl, T as size5xl, E as size6xl, b as sizeLg, y as sizeMd, v as sizeSm, x as sizeXl, _ as sizeXs, n as text, g as textBlock, Z as wrapper, Q as wrapperInline };

package/dist/components/feedback/Skeleton/index.d.ts

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

package/dist/components/feedback/Spinner/Spinner.cjs.js

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),r=require("./Spinner.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o={xs:r.default.xs,sm:r.default.sm,md:r.default.md,lg:r.default.lg,xl:r.default.xl},s={inherit:r.default.toneInherit,neutral:r.default.toneNeutral,primary:r.default.tonePrimary,accent:r.default.toneAccent,success:r.default.toneSuccess,warning:r.default.toneWarning,danger:r.default.toneDanger,info:r.default.toneInfo},c={ring:r.default.ring,dots:r.default.dots,bars:r.default.bars};function l(e){let[t,n]=(0,i.useState)(e<=0);return(0,i.useEffect)(()=>{if(e<=0){n(!0);return}n(!1);let t=setTimeout(()=>n(!0),e);return()=>clearTimeout(t)},[e]),t}var u=({size:i=`md`,tone:u=`inherit`,variant:d=`ring`,thickness:f,label:p,decorative:m=!1,delay:h=0,className:g,style:_,...v})=>{let y=e.useMessages(),b=p??y.spinner.loading;if(!l(h))return null;let x=typeof i==`string`,S={};x||(S[`--_size`]=`${i}px`),f!=null&&(S[`--_thickness`]=`${f}px`);let C=Object.keys(S).length>0;return(0,a.jsxs)(`span`,{role:m?void 0:`status`,"aria-hidden":m?!0:void 0,...v,className:t.cx(r.default.root,x&&o[i],s[u],c[d],g),style:C?{...S,..._}:_,children:[(0,a.jsx)(`span`,{className:r.default.indicator,"aria-hidden":`true`,children:d!==`ring`&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`span`,{className:r.default.part}),(0,a.jsx)(`span`,{className:r.default.part}),(0,a.jsx)(`span`,{className:r.default.part})]})}),!m&&(0,a.jsx)(n.VisuallyHidden,{children:b})]})};exports.Spinner=u;

package/dist/components/feedback/Spinner/Spinner.d.ts

@@ -0,0 +1,72 @@
+import { ComponentPropsWithRef } from 'react';
+import { Tone } from '../../../types/common';
+/** Named spinner size. Maps to the `--icon-size-*` tokens (12, 16, 20, 24, 32px). */
+export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Spinner color. `"inherit"` uses `currentColor`, so the spinner matches the
+ * surrounding text (the right choice inside buttons and on solid surfaces).
+ */
+export type SpinnerTone = "inherit" | Tone;
+/**
+ * Spinner look:
+ * - `ring`: a rotating arc over a faint track (default).
+ * - `dots`: three springy bouncing dots, the playful athletic option.
+ * - `bars`: three bars pumping up and down, like an equalizer.
+ */
+export type SpinnerVariant = "ring" | "dots" | "bars";
+export interface SpinnerProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    /**
+     * Size of the spinner: a named step from the `--icon-size-*` scale, or a
+     * number of pixels for one-off cases. @default "md"
+     */
+    size?: SpinnerSize | number;
+    /**
+     * Color. `"inherit"` follows the text color (`currentColor`). Tones map to
+     * contrast-verified text tokens: `primary` uses `--color-primary`,
+     * `neutral` uses `--color-text`, the rest use `--color-{tone}-subtle-text`.
+     * @default "inherit"
+     */
+    tone?: SpinnerTone;
+    /** Visual style. @default "ring" */
+    variant?: SpinnerVariant;
+    /**
+     * Stroke width of the `ring` variant, in pixels. Ignored by `dots` and
+     * `bars`. Defaults to scaling with the size (never thinner than
+     * `--border-width-thick`).
+     */
+    thickness?: number;
+    /**
+     * Text announced to screen readers through a `role="status"` region.
+     * Not shown visually. Ignored when `decorative`. @default "Loading"
+     */
+    label?: string;
+    /**
+     * Hides the spinner from assistive technology (`aria-hidden`, no role, no
+     * label). Use when a parent already announces the busy state, such as a
+     * `Button` with `loading` or a region with `aria-busy`. @default false
+     */
+    decorative?: boolean;
+    /**
+     * Milliseconds to wait before rendering anything. Avoids a flash of
+     * spinner when the work finishes quickly. @default 0
+     */
+    delay?: number;
+}
+/**
+ * An indeterminate loading indicator.
+ *
+ * By default it is a `role="status"` region with a visually hidden label
+ * ("Loading"), so screen readers hear that something is in progress. Pass
+ * `decorative` when a parent already communicates the busy state.
+ *
+ * Under `prefers-reduced-motion: reduce` the spinning and bouncing stop: the
+ * ring holds a static partial arc (its faint track gently pulses), and dots
+ * and bars fade in sequence instead of moving.
+ *
+ * ```tsx
+ * <Spinner />
+ * <Spinner variant="dots" tone="primary" size="lg" label="Loading roster" />
+ * <Button startIcon={<Spinner decorative size="sm" />}>Syncing</Button>
+ * ```
+ */
+export declare const Spinner: ({ size, tone, variant, thickness, label: labelProp, decorative, delay, className, style, ...rest }: SpinnerProps) => import("react").JSX.Element | null;

package/dist/components/feedback/Spinner/Spinner.mjs

@@ -0,0 +1,67 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { VisuallyHidden as n } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import r from "./Spinner.module.css.mjs";
+import { useEffect as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/feedback/Spinner/Spinner.tsx
+var l = {
+	xs: r.xs,
+	sm: r.sm,
+	md: r.md,
+	lg: r.lg,
+	xl: r.xl
+}, u = {
+	inherit: r.toneInherit,
+	neutral: r.toneNeutral,
+	primary: r.tonePrimary,
+	accent: r.toneAccent,
+	success: r.toneSuccess,
+	warning: r.toneWarning,
+	danger: r.toneDanger,
+	info: r.toneInfo
+}, d = {
+	ring: r.ring,
+	dots: r.dots,
+	bars: r.bars
+};
+function f(e) {
+	let [t, n] = a(e <= 0);
+	return i(() => {
+		if (e <= 0) {
+			n(!0);
+			return;
+		}
+		n(!1);
+		let t = setTimeout(() => n(!0), e);
+		return () => clearTimeout(t);
+	}, [e]), t;
+}
+var p = ({ size: i = "md", tone: a = "inherit", variant: p = "ring", thickness: m, label: h, decorative: g = !1, delay: _ = 0, className: v, style: y, ...b }) => {
+	let x = e(), S = h ?? x.spinner.loading;
+	if (!f(_)) return null;
+	let C = typeof i == "string", w = {};
+	C || (w["--_size"] = `${i}px`), m != null && (w["--_thickness"] = `${m}px`);
+	let T = Object.keys(w).length > 0;
+	return /* @__PURE__ */ c("span", {
+		role: g ? void 0 : "status",
+		"aria-hidden": g ? !0 : void 0,
+		...b,
+		className: t(r.root, C && l[i], u[a], d[p], v),
+		style: T ? {
+			...w,
+			...y
+		} : y,
+		children: [/* @__PURE__ */ s("span", {
+			className: r.indicator,
+			"aria-hidden": "true",
+			children: p !== "ring" && /* @__PURE__ */ c(o, { children: [
+				/* @__PURE__ */ s("span", { className: r.part }),
+				/* @__PURE__ */ s("span", { className: r.part }),
+				/* @__PURE__ */ s("span", { className: r.part })
+			] })
+		}), !g && /* @__PURE__ */ s(n, { children: S })]
+	});
+};
+//#endregion
+export { p as Spinner };

package/dist/components/feedback/Spinner/Spinner.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1tf1b_17`,t=`_xs_1tf1b_51`,n=`_sm_1tf1b_57`,r=`_md_1tf1b_63`,i=`_lg_1tf1b_69`,a=`_xl_1tf1b_75`,o=`_toneInherit_1tf1b_85`,s=`_toneNeutral_1tf1b_91`,c=`_tonePrimary_1tf1b_97`,l=`_toneAccent_1tf1b_103`,u=`_toneSuccess_1tf1b_109`,d=`_toneWarning_1tf1b_115`,f=`_toneDanger_1tf1b_121`,p=`_toneInfo_1tf1b_127`,m=`_indicator_1tf1b_135`,h=`_ring_1tf1b_153`,g=`_dots_1tf1b_195`,_=`_bars_1tf1b_197`,v=`_part_1tf1b_209`,y={root:e,xs:t,sm:n,md:r,lg:i,xl:a,toneInherit:o,toneNeutral:s,tonePrimary:c,toneAccent:l,toneSuccess:u,toneWarning:d,toneDanger:f,toneInfo:p,indicator:m,ring:h,"spinner-rotate":`_spinner-rotate_1tf1b_1`,dots:g,bars:_,part:v,"spinner-bounce":`_spinner-bounce_1tf1b_1`,"spinner-pump":`_spinner-pump_1tf1b_1`,"spinner-track-pulse":`_spinner-track-pulse_1tf1b_1`,"spinner-fade":`_spinner-fade_1tf1b_1`};exports.bars=_,exports.default=y,exports.dots=g,exports.indicator=m,exports.lg=i,exports.md=r,exports.part=v,exports.ring=h,exports.root=e,exports.sm=n,exports.toneAccent=l,exports.toneDanger=f,exports.toneInfo=p,exports.toneInherit=o,exports.toneNeutral=s,exports.tonePrimary=c,exports.toneSuccess=u,exports.toneWarning=d,exports.xl=a,exports.xs=t;

package/dist/components/feedback/Spinner/Spinner.module.css.mjs

@@ -0,0 +1,29 @@
+//#region src/components/feedback/Spinner/Spinner.module.css
+var e = "_root_1tf1b_17", t = "_xs_1tf1b_51", n = "_sm_1tf1b_57", r = "_md_1tf1b_63", i = "_lg_1tf1b_69", a = "_xl_1tf1b_75", o = "_toneInherit_1tf1b_85", s = "_toneNeutral_1tf1b_91", c = "_tonePrimary_1tf1b_97", l = "_toneAccent_1tf1b_103", u = "_toneSuccess_1tf1b_109", d = "_toneWarning_1tf1b_115", f = "_toneDanger_1tf1b_121", p = "_toneInfo_1tf1b_127", m = "_indicator_1tf1b_135", h = "_ring_1tf1b_153", g = "_dots_1tf1b_195", _ = "_bars_1tf1b_197", v = "_part_1tf1b_209", y = {
+	root: e,
+	xs: t,
+	sm: n,
+	md: r,
+	lg: i,
+	xl: a,
+	toneInherit: o,
+	toneNeutral: s,
+	tonePrimary: c,
+	toneAccent: l,
+	toneSuccess: u,
+	toneWarning: d,
+	toneDanger: f,
+	toneInfo: p,
+	indicator: m,
+	ring: h,
+	"spinner-rotate": "_spinner-rotate_1tf1b_1",
+	dots: g,
+	bars: _,
+	part: v,
+	"spinner-bounce": "_spinner-bounce_1tf1b_1",
+	"spinner-pump": "_spinner-pump_1tf1b_1",
+	"spinner-track-pulse": "_spinner-track-pulse_1tf1b_1",
+	"spinner-fade": "_spinner-fade_1tf1b_1"
+};
+//#endregion
+export { _ as bars, y as default, g as dots, m as indicator, i as lg, r as md, v as part, h as ring, e as root, n as sm, l as toneAccent, f as toneDanger, p as toneInfo, o as toneInherit, s as toneNeutral, c as tonePrimary, u as toneSuccess, d as toneWarning, a as xl, t as xs };

package/dist/components/feedback/Spinner/index.d.ts

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

package/dist/components/feedback/Toast/Toast.cjs.js

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),r=require("../Spinner/Spinner.cjs.js"),i=require("../../primitives/Button/Button.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("./Toast.module.css.cjs.js");let s=require("react/jsx-runtime");var c={neutral:o.default.neutral,info:o.default.info,success:o.default.success,warning:o.default.warning,danger:o.default.danger,loading:o.default.loading},l={neutral:(0,s.jsx)(a.BellIcon,{size:`sm`}),info:(0,s.jsx)(a.InfoIcon,{size:`sm`}),success:(0,s.jsx)(a.SuccessIcon,{size:`sm`}),warning:(0,s.jsx)(a.WarningIcon,{size:`sm`}),danger:(0,s.jsx)(a.ErrorIcon,{size:`sm`}),loading:(0,s.jsx)(r.Spinner,{size:`sm`,tone:`primary`,decorative:!0})},u=({tone:r=`neutral`,title:u,description:d,icon:f,action:p,dismissible:m=!0,onDismiss:h,closeLabel:g,toneLabel:_,progressDuration:v,progressKey:y,paused:b=!1,children:x,className:S,...C})=>{let w=e.useMessages(),T=g??w.toast.dismiss,E=f===void 0?l[r]:f,D=_??(r===`neutral`?``:w.toast.tone[r]),O=v!==void 0&&Number.isFinite(v);return(0,s.jsxs)(`div`,{...C,className:t.cx(o.default.toast,c[r],S),"data-tone":r,"aria-busy":r===`loading`||C[`aria-busy`],children:[E!=null&&(0,s.jsx)(`span`,{className:o.default.icon,"aria-hidden":`true`,children:E}),(0,s.jsxs)(`div`,{className:o.default.body,children:[u!=null&&u!==``&&(0,s.jsxs)(`p`,{className:o.default.title,children:[D&&(0,s.jsx)(n.VisuallyHidden,{children:`${D}: `}),u]}),d!=null&&d!==``&&(0,s.jsxs)(`div`,{className:o.default.description,children:[(u==null||u===``)&&D&&(0,s.jsx)(n.VisuallyHidden,{children:`${D}: `}),d]}),x,p&&(0,s.jsx)(`div`,{className:o.default.actions,children:(0,s.jsx)(i.Button,{size:`sm`,variant:`soft`,tone:`primary`,onClick:e=>{p.onClick(e),e.defaultPrevented||h?.()},children:p.label})})]}),m&&(0,s.jsx)(i.IconButton,{className:o.default.close,size:`sm`,variant:`ghost`,tone:`neutral`,"aria-label":T,onClick:()=>h?.(),children:(0,s.jsx)(a.CloseIcon,{size:`sm`})}),O&&(0,s.jsx)(`span`,{className:o.default.progressTrack,"aria-hidden":`true`,children:(0,s.jsx)(`span`,{className:o.default.progressBar,"data-paused":b||void 0,style:{animationDuration:`${v}ms`}},y)})]})};exports.Toast=u;

package/dist/components/feedback/Toast/Toast.d.ts

@@ -0,0 +1,52 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ToastAction, ToastTone } from './toastTypes';
+export type { ToastAction, ToastApi, ToastOptions, ToastPlacement, ToastPoliteness, ToastPromiseMessages, ToastPromiseState, ToastRecord, ToastRenderContext, ToastShortcut, ToastTone, } from './toastTypes';
+export interface ToastOwnProps {
+    /** Semantic color and default icon. `loading` shows a Spinner. @default "neutral" */
+    tone?: ToastTone;
+    /** Bold display headline. */
+    title?: ReactNode;
+    /** Supporting text under the title. */
+    description?: ReactNode;
+    /** Replaces the tone's default icon (decorative). Pass `null` to hide the icon. */
+    icon?: ReactNode;
+    /**
+     * Action button. Pressing it calls `action.onClick`, then `onDismiss`
+     * unless the handler calls `event.preventDefault()`.
+     */
+    action?: ToastAction;
+    /** Shows the close button. @default true */
+    dismissible?: boolean;
+    /** Called by the close button and after an action. */
+    onDismiss?: () => void;
+    /** Accessible name of the close button. Localize it here. @default "Dismiss notification" */
+    closeLabel?: string;
+    /**
+     * Screen reader prefix that names the tone, so it is not conveyed by color
+     * and icon alone. @default "Success", "Error", "Warning", "Info", "Loading"; none for neutral
+     */
+    toneLabel?: string;
+    /**
+     * Shows a thin decorative bar that empties over this many milliseconds.
+     * Omit (or pass `Infinity`) for no bar.
+     */
+    progressDuration?: number;
+    /** Changing this value restarts the progress bar (e.g. after the toast is updated). */
+    progressKey?: string | number;
+    /** Freezes the progress bar (the viewport sets this while timers are paused). @default false */
+    paused?: boolean;
+    /** Extra content under the description. */
+    children?: ReactNode;
+}
+export type ToastProps = ToastOwnProps & Omit<ComponentPropsWithRef<"div">, keyof ToastOwnProps>;
+/**
+ * The toast card: a raised, rounded surface with a tone icon in a tinted
+ * circle, a bold title, a description, an optional action, and a close
+ * button. `ToastProvider` renders these for you; use `Toast` directly for
+ * custom `render` content or static previews.
+ *
+ * The card itself is not a live region; the viewport announces toasts
+ * through its own persistent regions. When rendered outside a viewport,
+ * announce it yourself if needed.
+ */
+export declare const Toast: ({ tone, title, description, icon, action, dismissible, onDismiss, closeLabel: closeLabelProp, toneLabel, progressDuration, progressKey, paused, children, className, ...rest }: ToastProps) => import("react").JSX.Element;