entangle-ui 0.7.0 → 0.8.0

package/dist/esm/components/editor/TransformControl/TransformControl.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { VectorInput } from '../../controls/VectorInput/VectorInput.js';
+import { Select } from '../../controls/Select/Select.js';
+import { LockIcon } from '../../Icons/LockIcon.js';
+import { UnlockIcon } from '../../Icons/UnlockIcon.js';
+import { PropertyRow } from '../PropertyInspector/PropertyRow.js';
+import { rowInner, lockSpacerRecipe, rowVectorWrapper, lockButtonRecipe, transformRoot } from './TransformControl.css.js';
+
+// --- Defaults ---
+const DEFAULT_TRANSFORM = {
+    position: { x: 0, y: 0, z: 0 },
+    rotation: { x: 0, y: 0, z: 0 },
+    scale: { x: 1, y: 1, z: 1 },
+};
+const DEFAULT_COORDINATE_SPACE_OPTIONS = [
+    { value: 'local', label: 'Local' },
+    { value: 'world', label: 'World' },
+    { value: 'parent', label: 'Parent' },
+];
+const DEFAULT_LABELS = {
+    position: 'Position',
+    rotation: 'Rotation',
+    scale: 'Scale',
+    coordinateSpace: 'Space',
+};
+const DEFAULT_PRECISION = { position: 3, rotation: 1, scale: 3 };
+const DEFAULT_STEP = { position: 0.1, rotation: 1, scale: 0.01 };
+const DEFAULT_UNITS = { position: 'm', rotation: '°', scale: '' };
+// Narrow label column so the three axis inputs (with units) have room
+// to render without clipping inside typical 320–400 px property panels.
+const ROW_SPLIT_RATIO = [25, 75];
+// --- Helpers ---
+const vecToArray = (v) => [v.x, v.y, v.z];
+const arrayToVec = (arr) => ({
+    x: arr[0] ?? 0,
+    y: arr[1] ?? 0,
+    z: arr[2] ?? 0,
+});
+// --- Component ---
+/**
+ * The canonical position / rotation / scale property control for 3D
+ * editor interfaces. Composes `VectorInput` (per row) with `Select`
+ * (coordinate space) and `PropertyRow` (layout) into one high-level
+ * component, mirroring the transform widget found in Blender, Unity and
+ * Unreal.
+ *
+ * Three independent atoms — `value`, `coordinateSpace`, `linkedScale` —
+ * each support controlled and uncontrolled usage.
+ *
+ * Changing the coordinate-space dropdown does NOT transform the numeric
+ * values. The component is purely a UI surface; the consumer's editor
+ * logic is responsible for re-projecting values when the space changes.
+ *
+ * The component intentionally renders no `PropertySection` wrapper — slot
+ * it inside an existing section in your panel.
+ *
+ * @example
+ * ```tsx
+ * <PropertySection title="Transform">
+ *   <TransformControl
+ *     value={transform}
+ *     onChange={setTransform}
+ *     showReset
+ *   />
+ * </PropertySection>
+ * ```
+ */
+const TransformControl = ({ value: valueProp, defaultValue, onChange, coordinateSpace: coordinateSpaceProp, defaultCoordinateSpace, onCoordinateSpaceChange, coordinateSpaceOptions, linkedScale: linkedScaleProp, defaultLinkedScale, onLinkedScaleChange, show, labels, precision, step, units, size = 'sm', disabled = false, showReset = false, className, style, testId, ref, ...rest }) => {
+    const [value, setValue] = useControlledState({
+        value: valueProp,
+        defaultValue,
+        onChange,
+        fallback: DEFAULT_TRANSFORM,
+    });
+    const [coordinateSpace, setCoordinateSpace] = useControlledState({
+        value: coordinateSpaceProp,
+        defaultValue: defaultCoordinateSpace,
+        onChange: onCoordinateSpaceChange,
+        fallback: 'local',
+    });
+    const [linkedScale, setLinkedScale] = useControlledState({
+        value: linkedScaleProp,
+        defaultValue: defaultLinkedScale,
+        onChange: onLinkedScaleChange,
+        fallback: true,
+    });
+    const showPosition = show?.position !== false;
+    const showRotation = show?.rotation !== false;
+    const showScale = show?.scale !== false;
+    const showCoordinateSpace = showPosition || showRotation;
+    const resolvedLabels = {
+        position: labels?.position ?? DEFAULT_LABELS.position,
+        rotation: labels?.rotation ?? DEFAULT_LABELS.rotation,
+        scale: labels?.scale ?? DEFAULT_LABELS.scale,
+        coordinateSpace: labels?.coordinateSpace ?? DEFAULT_LABELS.coordinateSpace,
+    };
+    const resolvedPrecision = {
+        position: precision?.position ?? DEFAULT_PRECISION.position,
+        rotation: precision?.rotation ?? DEFAULT_PRECISION.rotation,
+        scale: precision?.scale ?? DEFAULT_PRECISION.scale,
+    };
+    const resolvedStep = {
+        position: step?.position ?? DEFAULT_STEP.position,
+        rotation: step?.rotation ?? DEFAULT_STEP.rotation,
+        scale: step?.scale ?? DEFAULT_STEP.scale,
+    };
+    const resolvedUnits = {
+        position: units?.position ?? DEFAULT_UNITS.position,
+        rotation: units?.rotation ?? DEFAULT_UNITS.rotation,
+        scale: units?.scale ?? DEFAULT_UNITS.scale,
+    };
+    const resolvedSpaceOptions = useMemo(() => coordinateSpaceOptions ?? DEFAULT_COORDINATE_SPACE_OPTIONS, [coordinateSpaceOptions]);
+    // --- Per-row change handlers ---
+    const handlePositionChange = useCallback((next) => {
+        setValue(prev => ({ ...prev, position: arrayToVec(next) }));
+    }, [setValue]);
+    const handleRotationChange = useCallback((next) => {
+        setValue(prev => ({ ...prev, rotation: arrayToVec(next) }));
+    }, [setValue]);
+    const handleScaleChange = useCallback((next, axisIndex) => {
+        const nextScale = arrayToVec(next);
+        if (linkedScale) {
+            const v = next[axisIndex] ?? 0;
+            setValue(prev => ({ ...prev, scale: { x: v, y: v, z: v } }));
+        }
+        else {
+            setValue(prev => ({ ...prev, scale: nextScale }));
+        }
+    }, [linkedScale, setValue]);
+    const handleLockToggle = useCallback(() => {
+        setLinkedScale(prev => !prev);
+    }, [setLinkedScale]);
+    const handleSpaceChange = useCallback((next) => {
+        if (next == null)
+            return;
+        setCoordinateSpace(next);
+    }, [setCoordinateSpace]);
+    // --- Reset handlers ---
+    const handlePositionReset = useCallback(() => {
+        setValue(prev => ({ ...prev, position: { x: 0, y: 0, z: 0 } }));
+    }, [setValue]);
+    const handleRotationReset = useCallback(() => {
+        setValue(prev => ({ ...prev, rotation: { x: 0, y: 0, z: 0 } }));
+    }, [setValue]);
+    const handleScaleReset = useCallback(() => {
+        setValue(prev => ({ ...prev, scale: { x: 1, y: 1, z: 1 } }));
+    }, [setValue]);
+    // --- Render ---
+    return (jsxs("div", { ref: ref, className: cx(transformRoot, className), style: style, "data-testid": testId, ...rest, children: [showCoordinateSpace && (jsx(PropertyRow, { label: resolvedLabels.coordinateSpace, size: size, disabled: disabled, splitRatio: ROW_SPLIT_RATIO, children: jsx(Select, { value: coordinateSpace, options: resolvedSpaceOptions, onChange: handleSpaceChange, size: size, disabled: disabled, "aria-label": resolvedLabels.coordinateSpace }) })), showPosition && (jsx(PropertyRow, { label: resolvedLabels.position, size: size, disabled: disabled, splitRatio: ROW_SPLIT_RATIO, onReset: showReset ? handlePositionReset : undefined, children: jsxs("div", { className: rowInner, children: [jsx("span", { "aria-hidden": "true", className: lockSpacerRecipe({ size }) }), jsx("div", { className: rowVectorWrapper, children: jsx(VectorInput, { value: vecToArray(value.position), onChange: handlePositionChange, dimension: 3, labelPreset: "xyz", colorPreset: "spatial", precision: resolvedPrecision.position, step: resolvedStep.position, unit: resolvedUnits.position, size: size, disabled: disabled, "aria-label": resolvedLabels.position }) })] }) })), showRotation && (jsx(PropertyRow, { label: resolvedLabels.rotation, size: size, disabled: disabled, splitRatio: ROW_SPLIT_RATIO, onReset: showReset ? handleRotationReset : undefined, children: jsxs("div", { className: rowInner, children: [jsx("span", { "aria-hidden": "true", className: lockSpacerRecipe({ size }) }), jsx("div", { className: rowVectorWrapper, children: jsx(VectorInput, { value: vecToArray(value.rotation), onChange: handleRotationChange, dimension: 3, labelPreset: "xyz", colorPreset: "spatial", precision: resolvedPrecision.rotation, step: resolvedStep.rotation, unit: resolvedUnits.rotation, size: size, disabled: disabled, "aria-label": resolvedLabels.rotation }) })] }) })), showScale && (jsx(PropertyRow, { label: resolvedLabels.scale, size: size, disabled: disabled, splitRatio: ROW_SPLIT_RATIO, onReset: showReset ? handleScaleReset : undefined, children: jsxs("div", { className: rowInner, children: [jsx("button", { type: "button", className: lockButtonRecipe({ active: linkedScale, size }), onClick: handleLockToggle, disabled: disabled, "aria-pressed": linkedScale, "aria-label": linkedScale ? 'Unlink scale axes' : 'Link scale axes', title: linkedScale ? 'Linked scale' : 'Unlinked scale', "data-testid": "transform-scale-lock", children: linkedScale ? (jsx(LockIcon, { size: size, decorative: true })) : (jsx(UnlockIcon, { size: size, decorative: true })) }), jsx("div", { className: rowVectorWrapper, children: jsx(VectorInput, { value: vecToArray(value.scale), onChange: handleScaleChange, dimension: 3, labelPreset: "xyz", colorPreset: "spatial", precision: resolvedPrecision.scale, step: resolvedStep.scale, unit: resolvedUnits.scale, size: size, disabled: disabled, "aria-label": resolvedLabels.scale }) })] }) }))] }));
+};
+TransformControl.displayName = 'TransformControl';
+
+export { TransformControl };
+//# sourceMappingURL=TransformControl.js.map

package/dist/esm/components/editor/TransformControl/TransformControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransformControl.js","sources":["../../../../../../src/components/editor/TransformControl/TransformControl.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAyBA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AAEA;AACE;AACA;AACA;AACD;AAED;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AACI;AAyBL;AACE;;;AAGA;AACD;AAED;AAEI;AACA;AACA;AACA;AACD;AAEH;AACE;AACA;AACA;AACA;AACD;AAED;AACA;AACA;AACA;AAEA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;AAOA;AAEI;AACF;AAIF;AAEI;AACF;;AAME;;;AAGE;;;AAEA;;AAEJ;AAIF;;AAEA;AAEA;;;;AAIE;;AAMF;AACE;AACF;AAEA;AACE;AACF;AAEA;AACE;AACF;;AAIA;AAiIF;AAEA;;"}

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

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/feedback/Alert/Alert.css.ts.vanilla-CRAI-xHx.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var alertActionsRecipe = createRuntimeFn({defaultClassName:'Alert_alertActionsRecipe__156m7fzi',variantClassNames:{align:{left:'Alert_alertActionsRecipe_align_left__156m7fzj',right:'Alert_alertActionsRecipe_align_right__156m7fzk','space-between':'Alert_alertActionsRecipe_align_space-between__156m7fzl'}},defaultVariants:{align:'left'},compoundVariants:[]});
+var alertCloseButtonSolidStyle = 'Alert_alertCloseButtonSolidStyle__156m7fzf';
+var alertCloseColumnStyle = 'Alert_alertCloseColumnStyle__156m7fze';
+var alertColorVar = 'var(--alertColorVar__156m7fz0)';
+var alertContentStyle = 'Alert_alertContentStyle__156m7fzd';
+var alertDescriptionStyle = 'Alert_alertDescriptionStyle__156m7fzh';
+var alertIconSolidStyle = 'Alert_alertIconSolidStyle__156m7fzc';
+var alertIconStyle = 'Alert_alertIconStyle__156m7fzb';
+var alertRecipe = createRuntimeFn({defaultClassName:'Alert_alertRecipe__156m7fz2',variantClassNames:{variant:{info:'Alert_alertRecipe_variant_info__156m7fz3',success:'Alert_alertRecipe_variant_success__156m7fz4',warning:'Alert_alertRecipe_variant_warning__156m7fz5',error:'Alert_alertRecipe_variant_error__156m7fz6',neutral:'Alert_alertRecipe_variant_neutral__156m7fz7'},appearance:{subtle:'Alert_alertRecipe_appearance_subtle__156m7fz8',solid:'Alert_alertRecipe_appearance_solid__156m7fz9',outline:'Alert_alertRecipe_appearance_outline__156m7fza'}},defaultVariants:{variant:'info',appearance:'subtle'},compoundVariants:[]});
+var alertTitleStyle = 'Alert_alertTitleStyle__156m7fzg';
+
+export { alertActionsRecipe, alertCloseButtonSolidStyle, alertCloseColumnStyle, alertColorVar, alertContentStyle, alertDescriptionStyle, alertIconSolidStyle, alertIconStyle, alertRecipe, alertTitleStyle };
+//# sourceMappingURL=Alert.css.js.map

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

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

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

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
+import { vars } from '../../../theme/contract.css.js';
+import { IconButton } from '../../primitives/IconButton/IconButton.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { InfoIcon } from '../../Icons/InfoIcon.js';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { WarningIcon } from '../../Icons/WarningIcon.js';
+import { ErrorIcon } from '../../Icons/ErrorIcon.js';
+import { alertColorVar, alertIconSolidStyle, alertIconStyle, alertContentStyle, alertCloseColumnStyle, alertCloseButtonSolidStyle, alertRecipe } from './Alert.css.js';
+import { AlertTitle } from './AlertTitle.js';
+import { AlertDescription } from './AlertDescription.js';
+import { AlertActions } from './AlertActions.js';
+
+const VARIANT_COLOR = {
+    info: vars.colors.accent.primary,
+    success: vars.colors.accent.success,
+    warning: vars.colors.accent.warning,
+    error: vars.colors.accent.error,
+    neutral: vars.colors.text.muted,
+};
+const VARIANT_ROLE = {
+    info: { role: 'status' },
+    success: { role: 'status' },
+    warning: { role: 'alert' },
+    error: { role: 'alert' },
+    neutral: { role: 'region', ariaLabel: 'Notice' },
+};
+const VARIANT_DEFAULT_ICON = {
+    info: jsx(InfoIcon, { size: "md", decorative: true }),
+    success: jsx(CheckIcon, { size: "md", decorative: true }),
+    warning: jsx(WarningIcon, { size: "md", decorative: true }),
+    error: jsx(ErrorIcon, { size: "md", decorative: true }),
+    neutral: null,
+};
+/**
+ * Persistent inline alert / callout.
+ *
+ * Use for non-transient status messages tied to the surrounding UI — read-only
+ * notices, expired credentials, unsaved-changes banners, etc. For transient
+ * confirmations like "File saved", reach for `useToast` instead.
+ *
+ * Compound API: pair with `<Alert.Title>`, `<Alert.Description>`, and
+ * `<Alert.Actions>` for richer layouts. The same components are also
+ * available as standalone named exports (`AlertTitle`, `AlertDescription`,
+ * `AlertActions`).
+ *
+ * Accessibility: roles are derived from the variant — `alert` for
+ * `error`/`warning`, `status` for `info`/`success`, `region` for `neutral`.
+ * The component never auto-focuses; inline alerts shouldn't grab focus.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="warning" title="Read-only mode">
+ *   Switch to edit mode to make changes.
+ * </Alert>
+ *
+ * <Alert variant="error" onClose={() => setOpen(false)}>
+ *   <Alert.Title>Couldn't reach the server</Alert.Title>
+ *   <Alert.Description>The request timed out.</Alert.Description>
+ *   <Alert.Actions align="right">
+ *     <Button onClick={retry}>Retry</Button>
+ *   </Alert.Actions>
+ * </Alert>
+ * ```
+ */
+const AlertImpl = /*#__PURE__*/ React.memo(({ variant = 'info', appearance = 'subtle', icon = true, onClose, title, children, className, style, testId, 'aria-label': ariaLabelProp, ref, ...rest }) => {
+    const isSolid = appearance === 'solid';
+    const { role, ariaLabel: defaultAriaLabel } = VARIANT_ROLE[variant];
+    const resolvedIcon = icon === false
+        ? null
+        : icon === true
+            ? VARIANT_DEFAULT_ICON[variant]
+            : icon;
+    const inlineVars = assignInlineVars({
+        [alertColorVar]: VARIANT_COLOR[variant],
+    });
+    return (jsxs("div", { ref: ref, role: role, "aria-label": ariaLabelProp ?? defaultAriaLabel, className: cx(alertRecipe({ variant, appearance }), className), style: { ...inlineVars, ...style }, "data-testid": testId, "data-variant": variant, "data-appearance": appearance, ...rest, children: [resolvedIcon ? (jsx("div", { className: cx(alertIconStyle, isSolid && alertIconSolidStyle), "data-alert-icon": "", "aria-hidden": "true", children: resolvedIcon })) : null, jsxs("div", { className: alertContentStyle, children: [title !== undefined && title !== null ? (jsx(AlertTitle, { children: title })) : null, typeof children === 'string' ? (jsx(AlertDescription, { children: children })) : (children)] }), onClose ? (jsx("div", { className: alertCloseColumnStyle, children: jsx(IconButton, { type: "button", "aria-label": "Close alert", variant: "ghost", size: "sm", radius: "sm", onClick: onClose, className: isSolid ? alertCloseButtonSolidStyle : undefined, children: jsx(CloseIcon, { size: "sm", decorative: true }) }) })) : null] }));
+});
+AlertImpl.displayName = 'Alert';
+const Alert = AlertImpl;
+Alert.Title = AlertTitle;
+Alert.Description = AlertDescription;
+Alert.Actions = AlertActions;
+
+export { Alert };
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0BA;AACE;AACA;AACA;AACA;AACA;;AAGF;AAEI;AACA;AACA;AACA;;;AAIJ;;;;;AAKE;;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACH;AAeI;AACA;AAEA;AAEI;;AAEE;;;AAIJ;AACD;;AAoDH;AAGF;AAeO;AACP;AACA;AACA;;"}

package/dist/esm/components/feedback/Alert/AlertActions.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { alertActionsRecipe } from './Alert.css.js';
+
+/**
+ * Action-button row for an `Alert`. Lays out children with a horizontal gap
+ * and configurable alignment. Renders only when actions are needed — for
+ * dismissible alerts the close button in the top-right is usually enough.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="error">
+ *   <Alert.Title>Couldn't reach the server</Alert.Title>
+ *   <Alert.Description>The request timed out after 30 seconds.</Alert.Description>
+ *   <Alert.Actions align="right">
+ *     <Button variant="filled" onClick={retry}>Retry</Button>
+ *     <Button onClick={dismiss}>Dismiss</Button>
+ *   </Alert.Actions>
+ * </Alert>
+ * ```
+ */
+const AlertActions = /*#__PURE__*/ React.memo(({ children, align = 'left', className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(alertActionsRecipe({ align }), className), style: style, "data-testid": testId, "data-alert-actions": "", ...rest, children: children }));
+});
+AlertActions.displayName = 'AlertActions';
+
+export { AlertActions };
+//# sourceMappingURL=AlertActions.js.map

package/dist/esm/components/feedback/Alert/AlertActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertActions.js","sources":["../../../../../../src/components/feedback/Alert/AlertActions.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;;;AAgBG;AACI;AAEH;AAYF;AAGF;;"}

package/dist/esm/components/feedback/Alert/AlertDescription.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { alertDescriptionStyle } from './Alert.css.js';
+
+/**
+ * Body text slot for an `Alert`. Most one-line alerts can pass a string as
+ * children to `<Alert>` directly; reach for this when you need to compose
+ * multiple paragraphs or inline elements.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="info">
+ *   <Alert.Title>Heads up</Alert.Title>
+ *   <Alert.Description>
+ *     This editor is read-only. Open the file in edit mode to make changes.
+ *   </Alert.Description>
+ * </Alert>
+ * ```
+ */
+const AlertDescription = /*#__PURE__*/ React.memo(({ children, className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(alertDescriptionStyle, className), style: style, "data-testid": testId, "data-alert-description": "", ...rest, children: children }));
+});
+AlertDescription.displayName = 'AlertDescription';
+
+export { AlertDescription };
+//# sourceMappingURL=AlertDescription.js.map

package/dist/esm/components/feedback/Alert/AlertDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDescription.js","sources":["../../../../../../src/components/feedback/Alert/AlertDescription.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAYF;AAGF;;"}

package/dist/esm/components/feedback/Alert/AlertTitle.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { alertTitleStyle } from './Alert.css.js';
+
+/**
+ * Title slot for an `Alert`. Renders a single line of emphasized text above
+ * the description.
+ *
+ * Equivalent to passing `title` directly on `<Alert>`. Use this form when you
+ * want richer content (links, inline elements) inside the title.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="warning">
+ *   <Alert.Title>Read-only mode</Alert.Title>
+ *   <Alert.Description>Switch to edit to change this file.</Alert.Description>
+ * </Alert>
+ * ```
+ */
+const AlertTitle = /*#__PURE__*/ React.memo(({ children, className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(alertTitleStyle, className), style: style, "data-testid": testId, "data-alert-title": "", ...rest, children: children }));
+});
+AlertTitle.displayName = 'AlertTitle';
+
+export { AlertTitle };
+//# sourceMappingURL=AlertTitle.js.map

package/dist/esm/components/feedback/Alert/AlertTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertTitle.js","sources":["../../../../../../src/components/feedback/Alert/AlertTitle.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAYF;AAGF;;"}

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

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/feedback/Dialog/Dialog.css.ts.vanilla-BrXTOHwS.css';
+import './../../../assets/src/components/feedback/Dialog/Dialog.css.ts.vanilla-BxBFePLG.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var DIALOG_ANIMATION_MS = 200;

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

@@ -4,7 +4,8 @@ import { useId, useRef, useCallback, createContext, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { overlayRecipe, dialogPanelRecipe } from './Dialog.css.js';
 import { useDialogAnimation } from './useDialogAnimation.js';
-import { useFocusTrap } from './useFocusTrap.js';
+import { useFocusTrap } from '../../../hooks/useFocusTrap/useFocusTrap.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
 import { cx } from '../../../utils/cx.js';
 
 // --- Context ---
@@ -50,6 +51,7 @@ const Dialog = ({ open, onClose, size = 'md', title, description, closeOnOverlay
         containerRef: panelRef,
         enabled: trapFocus,
     });
+    const setPanelRef = useMergedRef(panelRef, ref);
     const handleKeyDown = useCallback((e) => {
         // Escape handler — inline instead of global document listener
         if (closeOnEscape && e.key === 'Escape') {
@@ -72,17 +74,7 @@ const Dialog = ({ open, onClose, size = 'md', title, description, closeOnOverlay
         titleId,
         descriptionId,
     };
-    const dialogContent = (jsxs(DialogContext.Provider, { value: contextValue, children: [showOverlay && (jsx("div", { className: overlayRecipe({ closing }), onClick: handleOverlayClick, "data-testid": testId ? `${testId}-overlay` : undefined })), jsxs("div", { ref: (node) => {
-                    panelRef.current =
-                        node;
-                    if (typeof ref === 'function') {
-                        ref(node);
-                    }
-                    else if (ref) {
-                        ref.current =
-                            node;
-                    }
-                }, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, className: cx(dialogPanelRecipe({ size, closing }), className), style: style, id: id, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [title && (jsx("span", { id: titleId, style: { display: 'none' }, children: title })), description && (jsx("span", { id: descriptionId, style: { display: 'none' }, children: description })), children] })] }));
+    const dialogContent = (jsxs(DialogContext.Provider, { value: contextValue, children: [showOverlay && (jsx("div", { className: overlayRecipe({ closing }), onClick: handleOverlayClick, "data-testid": testId ? `${testId}-overlay` : undefined })), jsxs("div", { ref: setPanelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, className: cx(dialogPanelRecipe({ size, closing }), className), style: style, id: id, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [title && (jsx("span", { id: titleId, style: { display: 'none' }, children: title })), description && (jsx("span", { id: descriptionId, style: { display: 'none' }, children: description })), children] })] }));
     if (portal) {
         return createPortal(dialogContent, document.body);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../../../src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAoBL;AACA;AACA;AACA;AAEA;;;;AAIC;;AAGC;AACA;AACD;AAED;;;;AAKM;;;;;;AASN;;AAGM;;AAEJ;AAIF;AAAc;AAEd;;;;;;AAiBS;AACC;AACF;;;;AAGG;AACC;;;;;;AAmCZ;AACF;AAEA;;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../../../src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAiBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAoBL;AACA;AACA;AACA;AAEA;;;;AAIC;;AAGC;AACA;AACD;;AAID;;;;AAKM;;;;;;AASN;;AAGM;;AAEJ;AAIF;AAAc;AAEd;;;;;AAMA;;;;AA2CA;AACF;AAEA;;"}

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/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":";;;;;;;;;;;;;;;;;;;;;;"}