entangle-ui 0.6.3 → 0.8.0

package/dist/esm/components/feedback/Dialog/useDialogAnimation.js

@@ -1,6 +1,6 @@
 "use client";
 import { useState, useRef, useEffect } from 'react';
-import { FOCUSABLE_SELECTOR } from './useFocusTrap.js';
+import { FOCUSABLE_SELECTOR } from '../../../hooks/useFocusTrap/useFocusTrap.js';
 import { DIALOG_ANIMATION_MS } from './Dialog.css.js';
 
 /**
@@ -25,9 +25,16 @@ function useDialogAnimation({ open, panelRef, initialFocusRef, }) {
             wasOpenRef.current = true;
         }
         else if (wasOpenRef.current) {
-            // Closing: start close animation, unmount after delay
+            // Closing: start close animation, unmount after delay. Under
+            // prefers-reduced-motion: reduce, the close animation is suppressed
+            // (Dialog.css.ts), so honor that here too — snap the unmount to
+            // 0 ms instead of holding the dialog focus-trapped for nothing.
             wasOpenRef.current = false;
             setClosing(true);
+            const prefersReducedMotion = typeof window !== 'undefined' &&
+                typeof window.matchMedia === 'function' &&
+                window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            const delay = prefersReducedMotion ? 0 : DIALOG_ANIMATION_MS;
             const timer = setTimeout(() => {
                 setMounted(false);
                 setClosing(false);
@@ -36,7 +43,7 @@ function useDialogAnimation({ open, panelRef, initialFocusRef, }) {
                     previousFocusRef.current.focus();
                     previousFocusRef.current = null;
                 }
-            }, DIALOG_ANIMATION_MS);
+            }, delay);
             return () => clearTimeout(timer);
         }
         return undefined;

package/dist/esm/components/feedback/Dialog/useDialogAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDialogAnimation.js","sources":["../../../../../../src/components/feedback/Dialog/useDialogAnimation.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAiBA;;;;;;;AAOG;AACG;;;AAOJ;AACA;;;;AAKI;;;AAGA;;AACK;;AAEL;;AAEA;;;;AAKE;AACE;AACA;;;AAGJ;;AAEF;AACF;;;AAIE;;AAEA;AACE;AACE;;;AAEA;;;;;;;;;;;;AAaJ;;AAGF;AACF;;"}
+{"version":3,"file":"useDialogAnimation.js","sources":["../../../../../../src/components/feedback/Dialog/useDialogAnimation.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAiBA;;;;;;;AAOG;AACG;;;AAOJ;AACA;;;;AAKI;;;AAGA;;AACK;;;;;AAKL;;AAEA;AAEE;AACA;;AAEF;;;;AAKE;AACE;AACA;;;AAGJ;;AAEF;AACF;;;AAIE;;AAEA;AACE;AACE;;;AAEA;;;;;;;;;;;;AAaJ;;AAGF;AACF;;"}

package/dist/esm/components/feedback/EmptyState/EmptyState.css.js

@@ -0,0 +1,13 @@
+import './../../../assets/src/components/feedback/EmptyState/EmptyState.css.ts.vanilla-B_TWsTOW.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var emptyStateActionStyle = 'EmptyState_emptyStateActionStyle__1ihe8h18';
+var emptyStateDescriptionStyle = 'EmptyState_emptyStateDescriptionStyle__1ihe8h15';
+var emptyStateIconStyle = 'EmptyState_emptyStateIconStyle__1ihe8h13';
+var emptyStateRecipe = createRuntimeFn({defaultClassName:'EmptyState_emptyStateRecipe__1ihe8h10',variantClassNames:{variant:{'default':'EmptyState_emptyStateRecipe_variant_default__1ihe8h11',compact:'EmptyState_emptyStateRecipe_variant_compact__1ihe8h12'}},defaultVariants:{variant:'default'},compoundVariants:[]});
+var emptyStateTextColumnCompactStyle = 'EmptyState_emptyStateTextColumnCompactStyle__1ihe8h17';
+var emptyStateTextColumnStyle = 'EmptyState_emptyStateTextColumnStyle__1ihe8h16';
+var emptyStateTitleStyle = 'EmptyState_emptyStateTitleStyle__1ihe8h14';
+
+export { emptyStateActionStyle, emptyStateDescriptionStyle, emptyStateIconStyle, emptyStateRecipe, emptyStateTextColumnCompactStyle, emptyStateTextColumnStyle, emptyStateTitleStyle };
+//# sourceMappingURL=EmptyState.css.js.map

package/dist/esm/components/feedback/EmptyState/EmptyState.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/esm/components/feedback/EmptyState/EmptyState.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import { emptyStateIconStyle, emptyStateTextColumnCompactStyle, emptyStateTextColumnStyle, emptyStateTitleStyle, emptyStateDescriptionStyle, emptyStateActionStyle, emptyStateRecipe } from './EmptyState.css.js';
+
+/**
+ * Generic empty / loading state surface.
+ *
+ * Use for empty lists, filtered-out results, or "not yet started"
+ * placeholders. When `loading` is `true`, a `Spinner` is rendered in
+ * place of the icon and the root uses `role="status"`.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon={<SearchIcon size="lg" />}
+ *   title="No results"
+ *   description="Try a different search term."
+ *   action={<Button>Reset filters</Button>}
+ * />
+ *
+ * <EmptyState loading title="Loading conversation..." />
+ * ```
+ */
+const EmptyState = /*#__PURE__*/ React.memo(({ icon, title, description, action, variant = 'default', loading = false, className, style, testId, ref, ...rest }) => {
+    const textColumnClass = variant === 'compact'
+        ? emptyStateTextColumnCompactStyle
+        : emptyStateTextColumnStyle;
+    const statusAttrs = loading
+        ? {
+            role: 'status',
+            'aria-live': 'polite',
+        }
+        : {};
+    return (jsxs("div", { ref: ref, className: cx(emptyStateRecipe({ variant }), className), style: style, "data-testid": testId, ...statusAttrs, ...rest, children: [loading ? (jsx("span", { className: emptyStateIconStyle, children: jsx(Spinner, { size: "lg" }) })) : (icon && jsx("span", { className: emptyStateIconStyle, children: icon })), (title !== undefined && title !== null) ||
+                (description !== undefined && description !== null) ? (jsxs("div", { className: textColumnClass, children: [title !== undefined && title !== null && (jsx("h3", { className: emptyStateTitleStyle, children: title })), description !== undefined && description !== null && (jsx("p", { className: emptyStateDescriptionStyle, children: description }))] })) : null, action && jsx("div", { className: emptyStateActionStyle, children: action })] }));
+});
+EmptyState.displayName = 'EmptyState';
+
+export { EmptyState };
+//# sourceMappingURL=EmptyState.js.map

package/dist/esm/components/feedback/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sources":["../../../../../../src/components/feedback/EmptyState/EmptyState.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAgBA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAcH;AAEI;;;AAIF;AACI;AACA;AACD;;AAGL;AAkBI;AAcN;AAGF;;"}

package/dist/esm/components/feedback/ProgressBar/CircularProgress.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { progressColorVar, circularSvgStyle, circularTrackCircleStyle, circularIndeterminateStyle, circularFillCircleStyle, circularLabelStyle, circularRootStyle } from './ProgressBar.css.js';
+
+const SIZE_MAP = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 32,
+    xl: 48,
+};
+const DEFAULT_THICKNESS = {
+    xs: 1.5,
+    sm: 2,
+    md: 2,
+    lg: 2.5,
+    xl: 3,
+};
+const LABEL_FONT_SIZE = {
+    xs: vars.typography.fontSize.xxs,
+    sm: vars.typography.fontSize.xxs,
+    md: vars.typography.fontSize.xs,
+    lg: vars.typography.fontSize.xs,
+    xl: vars.typography.fontSize.sm,
+};
+const NAMED_COLOR_MAP = {
+    primary: vars.colors.accent.primary,
+    success: vars.colors.accent.success,
+    warning: vars.colors.accent.warning,
+    error: vars.colors.accent.error,
+};
+function resolveColor(color) {
+    return NAMED_COLOR_MAP[color] ?? color;
+}
+function clampValue(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+function toPercent(clamped, min, max) {
+    if (max === min)
+        return 0;
+    return ((clamped - min) / (max - min)) * 100;
+}
+function deriveValueText(ariaValueText, label) {
+    if (ariaValueText !== undefined)
+        return ariaValueText;
+    if (typeof label === 'string')
+        return label;
+    if (typeof label === 'number')
+        return String(label);
+    return undefined;
+}
+/**
+ * Circular progress indicator.
+ *
+ * Determinate when `value` is provided; indeterminate (rotating arc) when
+ * `value` is `undefined`. Renders an SVG with two stacked circles — track
+ * and fill — using `stroke-dasharray` to draw the progress arc. Honors
+ * `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <CircularProgress value={75} />
+ * <CircularProgress size="xl" value={42} showLabel />
+ * <CircularProgress /> // indeterminate
+ * ```
+ */
+const CircularProgress = /*#__PURE__*/ React.memo(({ value, min = 0, max = 100, size = 'md', thickness, color = 'primary', showLabel = false, label, ariaLabel, ariaValueText, className, style, testId, ref, ...rest }) => {
+    const indeterminate = value === undefined;
+    const clampedValue = indeterminate ? 0 : clampValue(value, min, max);
+    const percent = toPercent(clampedValue, min, max);
+    const resolvedColor = resolveColor(color);
+    const diameter = SIZE_MAP[size];
+    const stroke = thickness ?? DEFAULT_THICKNESS[size];
+    const radius = (diameter - stroke) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = indeterminate
+        ? circumference * 0.75
+        : circumference * (1 - percent / 100);
+    const inlineVars = assignInlineVars({
+        [progressColorVar]: resolvedColor,
+    });
+    const percentText = `${Math.round(percent)}%`;
+    const labelContent = label ?? (indeterminate ? null : percentText);
+    const showLabelText = showLabel && labelContent !== null;
+    const ariaProps = {
+        'aria-valuemin': min,
+        'aria-valuemax': max,
+        'aria-label': ariaLabel ?? (indeterminate ? 'Loading' : undefined),
+    };
+    if (!indeterminate) {
+        ariaProps['aria-valuenow'] = clampedValue;
+        const valueText = deriveValueText(ariaValueText, label);
+        if (valueText !== undefined) {
+            ariaProps['aria-valuetext'] = valueText;
+        }
+    }
+    return (jsxs("div", { ref: ref, role: "progressbar", className: cx(circularRootStyle, className), style: {
+            ...inlineVars,
+            width: diameter,
+            height: diameter,
+            ...style,
+        }, "data-testid": testId, "data-indeterminate": indeterminate ? 'true' : undefined, ...ariaProps, ...rest, children: [jsxs("svg", { className: circularSvgStyle, width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, "aria-hidden": true, children: [jsx("circle", { className: circularTrackCircleStyle, cx: diameter / 2, cy: diameter / 2, r: radius, fill: "none", strokeWidth: stroke }), jsx("circle", { className: cx(circularFillCircleStyle, indeterminate && circularIndeterminateStyle), cx: diameter / 2, cy: diameter / 2, r: radius, fill: "none", strokeWidth: stroke, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: dashOffset, transform: indeterminate
+                            ? undefined
+                            : `rotate(-90 ${diameter / 2} ${diameter / 2})` })] }), showLabelText ? (jsx("span", { className: circularLabelStyle, style: { fontSize: LABEL_FONT_SIZE[size] }, children: labelContent })) : null] }));
+});
+CircularProgress.displayName = 'CircularProgress';
+
+export { CircularProgress };
+//# sourceMappingURL=CircularProgress.js.map

package/dist/esm/components/feedback/ProgressBar/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.js","sources":["../../../../../../src/components/feedback/ProgressBar/CircularProgress.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAqBA;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;AACE;AACF;AAEA;;AACmB;AACjB;AACF;AAEA;;AAImC;;AACF;;AACA;AAC/B;AACF;AAEA;;;;;;;;;;;;;;AAcG;AACI;AAkBH;AACA;;AAEA;AACA;;;;;;;;;AAUC;;AAGD;AACA;AAEA;AACE;AACA;AACA;;;AAGA;;AAEA;AACE;;;;AAUE;AACA;AACA;AACA;;AAqCM;AACA;AAcd;AAGF;;"}

package/dist/esm/components/feedback/ProgressBar/ProgressBar.css.js

@@ -0,0 +1,22 @@
+import './../../../assets/src/components/feedback/ProgressBar/ProgressBar.css.ts.vanilla-4WLVf1hx.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var circularFillCircleStyle = 'ProgressBar_circularFillCircleStyle__1ur4bdmj';
+var circularIndeterminateStyle = 'ProgressBar_circularIndeterminateStyle__1ur4bdmk';
+var circularLabelStyle = 'ProgressBar_circularLabelStyle__1ur4bdml';
+var circularRootStyle = 'ProgressBar_circularRootStyle__1ur4bdmg';
+var circularSvgStyle = 'ProgressBar_circularSvgStyle__1ur4bdmh';
+var circularTrackCircleStyle = 'ProgressBar_circularTrackCircleStyle__1ur4bdmi';
+var progressColorVar = 'var(--progressColorVar__1ur4bdm0)';
+var progressFillBaseStyle = 'ProgressBar_progressFillBaseStyle__1ur4bdma';
+var progressFillStripedAnimatedStyle = 'ProgressBar_progressFillStripedAnimatedStyle__1ur4bdmc';
+var progressFillStripedStyle = 'ProgressBar_progressFillStripedStyle__1ur4bdmb';
+var progressFillWidthVar = 'var(--progressFillWidthVar__1ur4bdm1)';
+var progressIndeterminateStyle = 'ProgressBar_progressIndeterminateStyle__1ur4bdmd';
+var progressInlineLabelStyle = 'ProgressBar_progressInlineLabelStyle__1ur4bdme';
+var progressOverlayLabelStyle = 'ProgressBar_progressOverlayLabelStyle__1ur4bdmf';
+var progressRootStyle = 'ProgressBar_progressRootStyle__1ur4bdm5';
+var progressTrackRecipe = createRuntimeFn({defaultClassName:'ProgressBar_progressTrackRecipe__1ur4bdm6',variantClassNames:{size:{sm:'ProgressBar_progressTrackRecipe_size_sm__1ur4bdm7',md:'ProgressBar_progressTrackRecipe_size_md__1ur4bdm8',lg:'ProgressBar_progressTrackRecipe_size_lg__1ur4bdm9'}},defaultVariants:{size:'md'},compoundVariants:[]});
+
+export { circularFillCircleStyle, circularIndeterminateStyle, circularLabelStyle, circularRootStyle, circularSvgStyle, circularTrackCircleStyle, progressColorVar, progressFillBaseStyle, progressFillStripedAnimatedStyle, progressFillStripedStyle, progressFillWidthVar, progressIndeterminateStyle, progressInlineLabelStyle, progressOverlayLabelStyle, progressRootStyle, progressTrackRecipe };
+//# sourceMappingURL=ProgressBar.css.js.map

package/dist/esm/components/feedback/ProgressBar/ProgressBar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/feedback/ProgressBar/ProgressBar.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { progressFillWidthVar, progressColorVar, progressFillStripedAnimatedStyle, progressFillStripedStyle, progressFillBaseStyle, progressIndeterminateStyle, progressOverlayLabelStyle, progressTrackRecipe, progressInlineLabelStyle, progressRootStyle } from './ProgressBar.css.js';
+
+const NAMED_COLOR_MAP = {
+    primary: vars.colors.accent.primary,
+    success: vars.colors.accent.success,
+    warning: vars.colors.accent.warning,
+    error: vars.colors.accent.error,
+};
+function resolveColor(color) {
+    return NAMED_COLOR_MAP[color] ?? color;
+}
+function clampValue(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+function toPercent(clamped, min, max) {
+    if (max === min)
+        return 0;
+    return ((clamped - min) / (max - min)) * 100;
+}
+function deriveValueText(ariaValueText, label) {
+    if (ariaValueText !== undefined)
+        return ariaValueText;
+    if (typeof label === 'string')
+        return label;
+    if (typeof label === 'number')
+        return String(label);
+    return undefined;
+}
+/**
+ * Linear progress indicator.
+ *
+ * Determinate when `value` is provided; indeterminate (animated sliding bar)
+ * when `value` is `undefined`. Supports inline / overlay / custom labels,
+ * striped texture (optionally animated), and arbitrary CSS colors. Honors
+ * `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={60} />
+ * <ProgressBar value={50} showLabel="inline" />
+ * <ProgressBar size="lg" value={75} striped animated />
+ * <ProgressBar /> // indeterminate
+ * ```
+ */
+const ProgressBar = /*#__PURE__*/ React.memo(({ value, min = 0, max = 100, size = 'md', color = 'primary', showLabel = false, label, striped = false, animated = false, ariaLabel, ariaValueText, className, style, testId, ref, ...rest }) => {
+    const indeterminate = value === undefined;
+    const clampedValue = indeterminate ? 0 : clampValue(value, min, max);
+    const percent = toPercent(clampedValue, min, max);
+    const resolvedColor = resolveColor(color);
+    const inlineVars = assignInlineVars({
+        [progressColorVar]: resolvedColor,
+        [progressFillWidthVar]: `${percent}%`,
+    });
+    const fillClassName = cx(progressFillBaseStyle, striped && progressFillStripedStyle, striped && animated && progressFillStripedAnimatedStyle);
+    const percentText = `${Math.round(percent)}%`;
+    const labelContent = label ?? (indeterminate ? null : percentText);
+    const ariaProps = {
+        'aria-valuemin': min,
+        'aria-valuemax': max,
+        'aria-label': ariaLabel ?? (indeterminate ? 'Loading' : undefined),
+    };
+    if (!indeterminate) {
+        ariaProps['aria-valuenow'] = clampedValue;
+        const valueText = deriveValueText(ariaValueText, label);
+        if (valueText !== undefined) {
+            ariaProps['aria-valuetext'] = valueText;
+        }
+    }
+    return (jsxs("div", { ref: ref, role: "progressbar", className: cx(progressRootStyle, className), style: { ...inlineVars, ...style }, "data-testid": testId, "data-indeterminate": indeterminate ? 'true' : undefined, ...ariaProps, ...rest, children: [jsxs("div", { className: progressTrackRecipe({ size }), children: [indeterminate ? (jsx("div", { className: progressIndeterminateStyle, "aria-hidden": true })) : (jsx("div", { className: fillClassName, "aria-hidden": true })), showLabel === 'overlay' && labelContent !== null ? (jsx("span", { className: progressOverlayLabelStyle, children: labelContent })) : null] }), showLabel === 'inline' && labelContent !== null ? (jsx("span", { className: progressInlineLabelStyle, children: labelContent })) : null] }));
+});
+ProgressBar.displayName = 'ProgressBar';
+
+export { ProgressBar };
+//# sourceMappingURL=ProgressBar.js.map

package/dist/esm/components/feedback/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../../../../../src/components/feedback/ProgressBar/ProgressBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAoBA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;AACE;AACF;AAEA;;AACmB;AACjB;AACF;AAEA;;AAImC;;AACF;;AACA;AAC/B;AACF;AAEA;;;;;;;;;;;;;;;AAeG;AACI;AAmBH;AACA;;AAEA;;;AAIE;AACD;AAED;;AAOA;AAEA;AACE;AACA;AACA;;;AAGA;;AAEA;AACE;;;AAIJ;AA0BF;AAGF;;"}

package/dist/esm/components/feedback/Skeleton/Skeleton.css.js

@@ -0,0 +1,13 @@
+import './../../../assets/src/utils/animations.css.ts.vanilla-CRLFsBSV.css';
+import './../../../assets/src/components/feedback/Skeleton/Skeleton.css.ts.vanilla-Dk2_SSsC.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var skeletonGroupGapVar = 'var(--skeletonGroupGapVar__m5ywe0a)';
+var skeletonGroupRecipe = createRuntimeFn({defaultClassName:'Skeleton_skeletonGroupRecipe__m5ywe0b',variantClassNames:{direction:{row:'Skeleton_skeletonGroupRecipe_direction_row__m5ywe0c',column:'Skeleton_skeletonGroupRecipe_direction_column__m5ywe0d'}},defaultVariants:{direction:'column'},compoundVariants:[]});
+var skeletonHeightVar = 'var(--skeletonHeightVar__m5ywe01)';
+var skeletonRadiusVar = 'var(--skeletonRadiusVar__m5ywe02)';
+var skeletonRecipe = createRuntimeFn({defaultClassName:'Skeleton_skeletonRecipe__m5ywe03',variantClassNames:{shape:{rect:'Skeleton_skeletonRecipe_shape_rect__m5ywe04',circle:'Skeleton_skeletonRecipe_shape_circle__m5ywe05',line:'Skeleton_skeletonRecipe_shape_line__m5ywe06'},animation:{pulse:'Skeleton_skeletonRecipe_animation_pulse__m5ywe07',wave:'Skeleton_skeletonRecipe_animation_wave__m5ywe08',none:'Skeleton_skeletonRecipe_animation_none__m5ywe09'}},defaultVariants:{shape:'rect',animation:'pulse'},compoundVariants:[]});
+var skeletonWidthVar = 'var(--skeletonWidthVar__m5ywe00)';
+
+export { skeletonGroupGapVar, skeletonGroupRecipe, skeletonHeightVar, skeletonRadiusVar, skeletonRecipe, skeletonWidthVar };
+//# sourceMappingURL=Skeleton.css.js.map

package/dist/esm/components/feedback/Skeleton/Skeleton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/esm/components/feedback/Skeleton/Skeleton.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { devWarn } from '../../../utils/devWarn.js';
+import { skeletonRadiusVar, skeletonHeightVar, skeletonWidthVar, skeletonRecipe } from './Skeleton.css.js';
+
+const LINE_DEFAULT_HEIGHT = '12px';
+const SHAPE_RADIUS_FALLBACK = {
+    rect: vars.borderRadius.sm,
+    line: vars.borderRadius.lg,
+    circle: '50%',
+};
+function resolveDimension(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === 'number' ? `${value}px` : value;
+}
+function resolveDefaults(shape, width, height, borderRadius) {
+    const resolvedWidth = resolveDimension(width) ?? '100%';
+    let resolvedHeight = resolveDimension(height);
+    if (resolvedHeight === undefined) {
+        if (shape === 'line') {
+            resolvedHeight = LINE_DEFAULT_HEIGHT;
+        }
+        else if (shape === 'circle') {
+            resolvedHeight = resolvedWidth;
+        }
+        else {
+            resolvedHeight = '100%';
+        }
+    }
+    const resolvedRadius = resolveDimension(borderRadius) ?? SHAPE_RADIUS_FALLBACK[shape];
+    return {
+        width: resolvedWidth,
+        height: resolvedHeight,
+        radius: resolvedRadius,
+    };
+}
+/**
+ * Loading-placeholder block.
+ *
+ * Renders a rectangle, circle, or line shape with a configurable animation
+ * (`pulse`, `wave`, `none`). Use it while waiting for real content to load.
+ *
+ * Skeletons are decorative — they set `aria-hidden="true"` and `aria-busy="true"`
+ * but do not announce themselves. The surrounding region should announce
+ * the loading state (e.g. via `Spinner` or `EmptyState loading`).
+ *
+ * @example
+ * ```tsx
+ * <Skeleton width={120} height={16} />
+ * <Skeleton shape="circle" width={32} />
+ * <Skeleton shape="line" width="60%" />
+ * <Skeleton animation="wave" height={80} />
+ * ```
+ */
+const Skeleton = /*#__PURE__*/ React.memo(({ shape = 'rect', width, height, borderRadius, animation = 'pulse', className, style, testId, ref, ...rest }) => {
+    if (shape === 'circle' &&
+        width !== undefined &&
+        height !== undefined &&
+        width !== height) {
+        devWarn('[Skeleton] shape="circle" expects equal width and height; received width=%o, height=%o.', width, height);
+    }
+    const { width: w, height: h, radius, } = resolveDefaults(shape, width, height, borderRadius);
+    const inlineVars = assignInlineVars({
+        [skeletonWidthVar]: w,
+        [skeletonHeightVar]: h,
+        [skeletonRadiusVar]: radius,
+    });
+    return (jsx("div", { ref: ref, "aria-hidden": "true", "aria-busy": "true", className: cx(skeletonRecipe({ shape, animation }), className), style: { ...inlineVars, ...style }, "data-testid": testId, "data-shape": shape, "data-animation": animation, ...rest }));
+});
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };
+//# sourceMappingURL=Skeleton.js.map

package/dist/esm/components/feedback/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../../../../src/components/feedback/Skeleton/Skeleton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAeA;AAEA;AACE;AACA;AACA;;AAGF;;AAG2B;AACzB;AACF;AAEA;;AAQE;AACA;AACE;;;AAEO;;;;;;;;;AAWP;AACA;AACA;;AAEJ;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAeD;AACA;;AAGA;;;;;;;AAiBD;;AAeH;AAGF;;"}

package/dist/esm/components/feedback/Skeleton/SkeletonGroup.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { Skeleton } from './Skeleton.js';
+import { skeletonGroupGapVar, skeletonGroupRecipe } from './Skeleton.css.js';
+
+const SPACING_SCALE = [
+    '0',
+    vars.spacing.xs,
+    vars.spacing.sm,
+    vars.spacing.md,
+    vars.spacing.lg,
+    vars.spacing.xl,
+    vars.spacing.xxl,
+    vars.spacing.xxxl,
+];
+function resolveSpacing(value) {
+    if (typeof value === 'string')
+        return value;
+    const clamped = Math.max(0, Math.min(SPACING_SCALE.length - 1, value));
+    const index = Math.floor(clamped);
+    return SPACING_SCALE[index] ?? vars.spacing.sm;
+}
+/**
+ * Lays out one or more `Skeleton` items consistently — handy for "show
+ * five skeleton rows then real data" patterns.
+ *
+ * Pass `count` to auto-generate that many skeletons (using `itemProps` to
+ * configure them), or pass `children` to lay out custom skeleton shapes
+ * yourself. `direction` and `spacing` control the flex container.
+ *
+ * @example
+ * ```tsx
+ * // Five lines stacked vertically
+ * <SkeletonGroup count={5} itemProps={{ shape: 'line' }} />
+ *
+ * // Custom composition
+ * <SkeletonGroup direction="row" spacing={3}>
+ *   <Skeleton shape="circle" width={32} />
+ *   <Skeleton shape="line" width={120} />
+ * </SkeletonGroup>
+ * ```
+ */
+const SkeletonGroup = /*#__PURE__*/ React.memo(({ count, spacing = 2, direction = 'column', itemProps, children, className, style, testId, ref, ...rest }) => {
+    const inlineVars = assignInlineVars({
+        [skeletonGroupGapVar]: resolveSpacing(spacing),
+    });
+    const content = children ??
+        Array.from({ length: count ?? 0 }, (_, i) => (jsx(Skeleton, { ...itemProps }, i)));
+    return (jsx("div", { ref: ref, "aria-hidden": "true", "aria-busy": "true", className: cx(skeletonGroupRecipe({ direction }), className), style: { ...inlineVars, ...style }, "data-testid": testId, ...rest, children: content }));
+});
+SkeletonGroup.displayName = 'SkeletonGroup';
+
+export { SkeletonGroup };
+//# sourceMappingURL=SkeletonGroup.js.map

package/dist/esm/components/feedback/Skeleton/SkeletonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonGroup.js","sources":["../../../../../../src/components/feedback/Skeleton/SkeletonGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAUA;;;;;;;;;;AAWA;;AACiC;;;;AAIjC;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;;AAcD;AACD;;AAIC;AAIF;AAaF;AAGF;;"}

package/dist/esm/components/feedback/Spinner/Spinner.css.js

@@ -0,0 +1,16 @@
+import './../../../assets/src/utils/animations.css.ts.vanilla-CRLFsBSV.css';
+import './../../../assets/src/components/feedback/Spinner/Spinner.css.ts.vanilla-DEUewqdK.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var spinnerColorVar = 'var(--spinnerColorVar__670vre0)';
+var spinnerDotRecipe = createRuntimeFn({defaultClassName:'Spinner_spinnerDotRecipe__670vre5',variantClassNames:{delay:{'0':'Spinner_spinnerDotRecipe_delay_0__670vre6','1':'Spinner_spinnerDotRecipe_delay_1__670vre7','2':'Spinner_spinnerDotRecipe_delay_2__670vre8'}},defaultVariants:{},compoundVariants:[]});
+var spinnerDotsSizerStyle = 'Spinner_spinnerDotsSizerStyle__670vre9';
+var spinnerLabelStyle = 'Spinner_spinnerLabelStyle__670vreb';
+var spinnerPulseStyle = 'Spinner_spinnerPulseStyle__670vrea';
+var spinnerRingStyle = 'Spinner_spinnerRingStyle__670vre3';
+var spinnerRootStyle = 'Spinner_spinnerRootStyle__670vre2';
+var spinnerSizeVar = 'var(--spinnerSizeVar__670vre1)';
+var visuallyHiddenStyle = 'Spinner_visuallyHiddenStyle__670vrec';
+
+export { spinnerColorVar, spinnerDotRecipe, spinnerDotsSizerStyle, spinnerLabelStyle, spinnerPulseStyle, spinnerRingStyle, spinnerRootStyle, spinnerSizeVar, visuallyHiddenStyle };
+//# sourceMappingURL=Spinner.css.js.map

package/dist/esm/components/feedback/Spinner/Spinner.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,50 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { spinnerSizeVar, spinnerColorVar, spinnerRingStyle, spinnerPulseStyle, spinnerDotsSizerStyle, spinnerDotRecipe, spinnerLabelStyle, visuallyHiddenStyle, spinnerRootStyle } from './Spinner.css.js';
+
+const SIZE_MAP = {
+    xs: '12px',
+    sm: '14px',
+    md: '16px',
+    lg: '20px',
+};
+const NAMED_COLOR_MAP = {
+    primary: vars.colors.text.primary,
+    secondary: vars.colors.text.secondary,
+    muted: vars.colors.text.muted,
+    accent: vars.colors.accent.primary,
+};
+function resolveColor(color) {
+    return NAMED_COLOR_MAP[color] ?? color;
+}
+/**
+ * Loading / activity indicator.
+ *
+ * Announces itself via `role="status"` and `aria-label`; honors
+ * `prefers-reduced-motion` by halting animation and dimming the indicator.
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ * <Spinner variant="dots" size="lg" />
+ * <Spinner showLabel label="Fetching results..." />
+ * ```
+ */
+const Spinner = /*#__PURE__*/ React.memo(({ size = 'md', variant = 'ring', color = 'accent', label = 'Loading...', showLabel = false, className, style, testId, ref, ...rest }) => {
+    const resolvedColor = resolveColor(color);
+    const resolvedSize = SIZE_MAP[size];
+    const inlineVars = assignInlineVars({
+        [spinnerColorVar]: resolvedColor,
+        [spinnerSizeVar]: resolvedSize,
+    });
+    const indicator = variant === 'ring' ? (jsx("span", { className: spinnerRingStyle, "aria-hidden": true })) : variant === 'pulse' ? (jsx("span", { className: spinnerPulseStyle, "aria-hidden": true })) : (jsxs("span", { className: spinnerDotsSizerStyle, "aria-hidden": true, children: [jsx("span", { className: spinnerDotRecipe({ delay: '0' }) }), jsx("span", { className: spinnerDotRecipe({ delay: '1' }) }), jsx("span", { className: spinnerDotRecipe({ delay: '2' }) })] }));
+    return (jsxs("span", { ref: ref, role: "status", "aria-live": "polite", "aria-label": label, className: cx(spinnerRootStyle, className), style: { ...inlineVars, ...style }, "data-testid": testId, ...rest, children: [indicator, showLabel ? (jsx("span", { className: spinnerLabelStyle, children: label })) : (jsx("span", { className: visuallyHiddenStyle, children: label }))] }));
+});
+Spinner.displayName = 'Spinner';
+
+export { Spinner };
+//# sourceMappingURL=Spinner.js.map

package/dist/esm/components/feedback/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../../../../src/components/feedback/Spinner/Spinner.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAmBA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;;;;;;;;;;;;AAYG;;AAcC;AACA;;;;AAKC;AAED;AAaA;AAmBF;AAGF;;"}

package/dist/esm/components/feedback/Toast/ToastItem.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/feedback/Toast/ToastItem.css.ts.vanilla-D6UuPKAj.css';
+import './../../../assets/src/components/feedback/Toast/ToastItem.css.ts.vanilla-DUeXqiaH.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var actionButton = createRuntimeFn({defaultClassName:'ToastItem_actionButton__xlinlde',variantClassNames:{severity:{info:'ToastItem_actionButton_severity_info__xlinldf',success:'ToastItem_actionButton_severity_success__xlinldg',warning:'ToastItem_actionButton_severity_warning__xlinldh',error:'ToastItem_actionButton_severity_error__xlinldi'}},defaultVariants:{severity:'info'},compoundVariants:[]});

package/dist/esm/components/form/InputWrapper.css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/components/form/InputWrapper.css.ts.vanilla-Bl7u62PI.css';
+import './../../assets/src/components/form/InputWrapper.css.ts.vanilla-CLpKbEjq.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var inputWrapperRecipe = createRuntimeFn({defaultClassName:'InputWrapper_inputWrapperRecipe__1h1gl4m0',variantClassNames:{size:{sm:'InputWrapper_inputWrapperRecipe_size_sm__1h1gl4m1',md:'InputWrapper_inputWrapperRecipe_size_md__1h1gl4m2',lg:'InputWrapper_inputWrapperRecipe_size_lg__1h1gl4m3'},error:{true:'InputWrapper_inputWrapperRecipe_error_true__1h1gl4m4',false:'InputWrapper_inputWrapperRecipe_error_false__1h1gl4m5'},disabled:{true:'InputWrapper_inputWrapperRecipe_disabled_true__1h1gl4m6',false:'InputWrapper_inputWrapperRecipe_disabled_false__1h1gl4m7'},focused:{true:'InputWrapper_inputWrapperRecipe_focused_true__1h1gl4m8',false:'InputWrapper_inputWrapperRecipe_focused_false__1h1gl4m9'}},defaultVariants:{size:'md',error:false,disabled:false,focused:false},compoundVariants:[[{focused:true,error:false},'InputWrapper_inputWrapperRecipe_compound_0__1h1gl4ma'],[{focused:false,error:false,disabled:false},'InputWrapper_inputWrapperRecipe_compound_1__1h1gl4mb'],[{focused:false,error:false,disabled:true},'InputWrapper_inputWrapperRecipe_compound_2__1h1gl4mc']]});

package/dist/esm/components/layout/Accordion/Accordion.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/layout/Accordion/Accordion.css.ts.vanilla-Ck5Yew0e.css';
+import './../../../assets/src/components/layout/Accordion/Accordion.css.ts.vanilla-CJQum8px.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var accordionGapVar = 'var(--accordionGapVar__1j9ah930)';

package/dist/esm/components/layout/Divider/Divider.css.js

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/layout/Divider/Divider.css.ts.vanilla-CPvd_RW9.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var dividerLabelTextStyle = 'Divider_dividerLabelTextStyle__1desuf1c';
+var dividerRecipe = createRuntimeFn({defaultClassName:'Divider_dividerRecipe__1desuf10',variantClassNames:{orientation:{horizontal:'Divider_dividerRecipe_orientation_horizontal__1desuf11',vertical:'Divider_dividerRecipe_orientation_vertical__1desuf12'},variant:{solid:'Divider_dividerRecipe_variant_solid__1desuf13',dashed:'Divider_dividerRecipe_variant_dashed__1desuf14',dotted:'Divider_dividerRecipe_variant_dotted__1desuf15'}},defaultVariants:{orientation:'horizontal',variant:'solid'},compoundVariants:[[{orientation:'vertical',variant:'dashed'},'Divider_dividerRecipe_compound_0__1desuf16'],[{orientation:'vertical',variant:'dotted'},'Divider_dividerRecipe_compound_1__1desuf17']]});
+var dividerWithLabelRecipe = createRuntimeFn({defaultClassName:'Divider_dividerWithLabelRecipe__1desuf18',variantClassNames:{variant:{solid:'Divider_dividerWithLabelRecipe_variant_solid__1desuf19',dashed:'Divider_dividerWithLabelRecipe_variant_dashed__1desuf1a',dotted:'Divider_dividerWithLabelRecipe_variant_dotted__1desuf1b'}},defaultVariants:{variant:'solid'},compoundVariants:[]});
+
+export { dividerLabelTextStyle, dividerRecipe, dividerWithLabelRecipe };
+//# sourceMappingURL=Divider.css.js.map

package/dist/esm/components/layout/Divider/Divider.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}