entangle-ui 0.2.0 → 0.4.0

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useDialogContext } from './Dialog.js';
+import { cx } from '../../../utils/cx.js';
+import { dialogHeaderContentStyle, dialogTitleStyle, dialogDescriptionStyle, dialogCloseButtonStyle, dialogHeaderStyle } from './Dialog.css.js';
+
+// --- Component ---
+/**
+ * DialogHeader renders the title, optional description, and close button
+ * for a Dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogHeader description="This cannot be undone">
+ *   Delete Item
+ * </DialogHeader>
+ * ```
+ */
+const DialogHeader = ({ children, showClose = true, description, className, style, testId, ref, ...rest }) => {
+    const { onClose, titleId, descriptionId } = useDialogContext();
+    return (jsxs("div", { ref: ref, className: cx(dialogHeaderStyle, className), style: style, "data-testid": testId, ...rest, children: [jsxs("div", { className: dialogHeaderContentStyle, children: [jsx("div", { id: titleId, className: dialogTitleStyle, children: children }), description && (jsx("div", { id: descriptionId, className: dialogDescriptionStyle, children: description }))] }), showClose && (jsx("button", { type: "button", onClick: onClose, "aria-label": "Close dialog", className: dialogCloseButtonStyle, "data-testid": testId ? `${testId}-close` : undefined, children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1 1L11 11M11 1L1 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }))] }));
+};
+DialogHeader.displayName = 'DialogHeader';
+
+export { DialogHeader };
+//# sourceMappingURL=DialogHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.js","sources":["../../../../../../src/components/feedback/Dialog/DialogHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEA;;;;;;;;;;AAUG;AACI;;AAYL;AA4CF;AAEA;;"}

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

@@ -0,0 +1,71 @@
+"use client";
+import { useState, useRef, useEffect } from 'react';
+import { FOCUSABLE_SELECTOR } from './useFocusTrap.js';
+import { DIALOG_ANIMATION_MS } from './Dialog.css.js';
+
+/**
+ * Manages Dialog mount/unmount animation lifecycle and focus management.
+ *
+ * Combines three concerns into a single hook:
+ * 1. Mount/unmount with closing animation delay
+ * 2. Initial focus on open (respects initialFocusRef)
+ * 3. Return focus to previously focused element on close
+ */
+function useDialogAnimation({ open, panelRef, initialFocusRef, }) {
+    const [mounted, setMounted] = useState(false);
+    const [closing, setClosing] = useState(false);
+    const previousFocusRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        if (open) {
+            // Opening: capture previous focus, mount immediately
+            previousFocusRef.current = document.activeElement;
+            setClosing(false);
+            setMounted(true);
+            wasOpenRef.current = true;
+        }
+        else if (wasOpenRef.current) {
+            // Closing: start close animation, unmount after delay
+            wasOpenRef.current = false;
+            setClosing(true);
+            const timer = setTimeout(() => {
+                setMounted(false);
+                setClosing(false);
+                // Return focus after unmount
+                if (previousFocusRef.current) {
+                    previousFocusRef.current.focus();
+                    previousFocusRef.current = null;
+                }
+            }, DIALOG_ANIMATION_MS);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [open]);
+    // Initial focus after mount
+    useEffect(() => {
+        if (!open || !mounted)
+            return;
+        const timer = setTimeout(() => {
+            if (initialFocusRef?.current) {
+                initialFocusRef.current.focus();
+            }
+            else {
+                const panel = panelRef.current;
+                if (panel) {
+                    const firstFocusable = panel.querySelector(FOCUSABLE_SELECTOR);
+                    if (firstFocusable) {
+                        firstFocusable.focus();
+                    }
+                    else {
+                        panel.focus();
+                    }
+                }
+            }
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [open, mounted, initialFocusRef, panelRef]);
+    return { mounted, closing };
+}
+
+export { useDialogAnimation };
+//# sourceMappingURL=useDialogAnimation.js.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,56 @@
+"use client";
+import { useCallback } from 'react';
+
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'textarea:not([disabled])',
+    'select:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+/**
+ * Reusable focus trap hook.
+ *
+ * Traps Tab/Shift+Tab navigation within a container element,
+ * wrapping focus from last to first element and vice versa.
+ *
+ * @returns onKeyDown handler to attach to the container element
+ *
+ * @example
+ * ```tsx
+ * const handleKeyDown = useFocusTrap({ containerRef: panelRef, enabled: true });
+ * <div ref={panelRef} onKeyDown={handleKeyDown}>...</div>
+ * ```
+ */
+function useFocusTrap({ containerRef, enabled = true, }) {
+    return useCallback((e) => {
+        if (!enabled || e.key !== 'Tab')
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const focusableElements = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+        if (focusableElements.length === 0) {
+            e.preventDefault();
+            return;
+        }
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (e.shiftKey) {
+            if (document.activeElement === firstElement) {
+                e.preventDefault();
+                lastElement.focus();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                e.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }, [enabled, containerRef]);
+}
+
+export { FOCUSABLE_SELECTOR, useFocusTrap };
+//# sourceMappingURL=useFocusTrap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","sources":["../../../../../../src/components/feedback/Dialog/useFocusTrap.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;;;AAOC;AAOD;;;;;;;;;;;;;AAaG;AACG;AAIJ;AAEI;;AAEA;AACA;;AAEA;AAIA;;;;AAKA;;AAKA;AACE;;;;;;AAKA;;;;;AAKJ;AAGJ;;"}

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

@@ -0,0 +1,10 @@
+import './../../../assets/src/components/feedback/Toast/ToastContainer.css.ts.vanilla-tBLsZ_70.css';
+
+var container = 'ToastContainer_container__155m4yq2';
+var containerNormal = 'ToastContainer_containerNormal__155m4yq4';
+var containerReverse = 'ToastContainer_containerReverse__155m4yq3';
+var gapVar = 'var(--gapVar__155m4yq0)';
+var zIndexVar = 'var(--zIndexVar__155m4yq1)';
+
+export { container, containerNormal, containerReverse, gapVar, zIndexVar };
+//# sourceMappingURL=ToastContainer.css.js.map

package/dist/esm/components/feedback/Toast/ToastContainer.css.js.map

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

package/dist/esm/components/feedback/Toast/ToastContainer.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
+import { ToastItem } from './ToastItem.js';
+import { zIndexVar, gapVar, containerReverse, containerNormal, container } from './ToastContainer.css.js';
+
+// --- Position style map ---
+const POSITION_STYLES = {
+    'top-right': { top: 16, right: 16 },
+    'top-left': { top: 16, left: 16 },
+    'top-center': { top: 16, left: '50%', transform: 'translateX(-50%)' },
+    'bottom-right': { bottom: 16, right: 16 },
+    'bottom-left': { bottom: 16, left: 16 },
+    'bottom-center': { bottom: 16, left: '50%', transform: 'translateX(-50%)' },
+};
+/**
+ * ToastContainer positions toast items at the specified screen edge.
+ * Bottom positions use column-reverse so the newest toast appears at the bottom.
+ */
+const ToastContainer = ({ toasts, position, gap, zIndex, onDismiss, }) => {
+    const isBottom = position.startsWith('bottom');
+    const positionStyle = POSITION_STYLES[position];
+    const inlineVars = assignInlineVars({
+        [gapVar]: `${gap}px`,
+        [zIndexVar]: String(zIndex),
+    });
+    return (jsx("div", { className: cx(container, isBottom ? containerReverse : containerNormal), style: {
+            ...positionStyle,
+            ...inlineVars,
+        }, "aria-label": "Notifications", role: "region", children: toasts.map(toast => (jsx(ToastItem, { toast: toast, onDismiss: onDismiss }, toast.id))) }));
+};
+ToastContainer.displayName = 'ToastContainer';
+
+export { ToastContainer };
+//# sourceMappingURL=ToastContainer.js.map

package/dist/esm/components/feedback/Toast/ToastContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.js","sources":["../../../../../../src/components/feedback/Toast/ToastContainer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;AAEA;;;AAGE;;;AAGA;;AAaF;;;AAGG;AACI;;AAQL;;AAGE;AACA;AACD;;AAMK;AACA;AACD;AASP;AAEA;;"}

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

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/feedback/Toast/ToastItem.css.ts.vanilla-D6UuPKAj.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+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:[]});
+var closeButton = 'ToastItem_closeButton__xlinldd';
+var content = 'ToastItem_content__xlinld8';
+var iconWrapper = 'ToastItem_iconWrapper__xlinld9';
+var message = 'ToastItem_message__xlinldc';
+var progressBar = createRuntimeFn({defaultClassName:'ToastItem_progressBar__xlinldj',variantClassNames:{severity:{info:'ToastItem_progressBar_severity_info__xlinldk',success:'ToastItem_progressBar_severity_success__xlinldl',warning:'ToastItem_progressBar_severity_warning__xlinldm',error:'ToastItem_progressBar_severity_error__xlinldn'},paused:{true:'ToastItem_progressBar_paused_true__xlinldo',false:'ToastItem_progressBar_paused_false__xlinldp'}},defaultVariants:{severity:'info',paused:false},compoundVariants:[]});
+var progressDurationVar = 'var(--progressDurationVar__xlinld0)';
+var textContent = 'ToastItem_textContent__xlinlda';
+var titleStyle = 'ToastItem_titleStyle__xlinldb';
+var toast = createRuntimeFn({defaultClassName:'ToastItem_toast__xlinld3',variantClassNames:{severity:{info:'ToastItem_toast_severity_info__xlinld4',success:'ToastItem_toast_severity_success__xlinld5',warning:'ToastItem_toast_severity_warning__xlinld6',error:'ToastItem_toast_severity_error__xlinld7'}},defaultVariants:{severity:'info'},compoundVariants:[]});
+
+export { actionButton, closeButton, content, iconWrapper, message, progressBar, progressDurationVar, textContent, titleStyle, toast };
+//# sourceMappingURL=ToastItem.css.js.map

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

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

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

@@ -0,0 +1,84 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { content, iconWrapper, textContent, titleStyle, message, actionButton, closeButton, progressDurationVar, progressBar, toast } from './ToastItem.css.js';
+
+// --- Severity icons (inline SVGs) ---
+const SeverityIcon = ({ severity, color, }) => {
+    const size = 16;
+    const commonProps = {
+        width: size,
+        height: size,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        'aria-hidden': true,
+    };
+    switch (severity) {
+        case 'info':
+            return (jsxs("svg", { ...commonProps, children: [jsx("circle", { cx: "8", cy: "8", r: "7", stroke: color, strokeWidth: "1.5" }), jsx("line", { x1: "8", y1: "7", x2: "8", y2: "11", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }), jsx("circle", { cx: "8", cy: "5", r: "0.75", fill: color })] }));
+        case 'success':
+            return (jsxs("svg", { ...commonProps, children: [jsx("circle", { cx: "8", cy: "8", r: "7", stroke: color, strokeWidth: "1.5" }), jsx("path", { d: "M5 8L7 10L11 6", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+        case 'warning':
+            return (jsxs("svg", { ...commonProps, children: [jsx("path", { d: "M8 2L14.5 13H1.5L8 2Z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }), jsx("line", { x1: "8", y1: "6", x2: "8", y2: "9", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }), jsx("circle", { cx: "8", cy: "11", r: "0.75", fill: color })] }));
+        case 'error':
+            return (jsxs("svg", { ...commonProps, children: [jsx("circle", { cx: "8", cy: "8", r: "7", stroke: color, strokeWidth: "1.5" }), jsx("line", { x1: "5.5", y1: "5.5", x2: "10.5", y2: "10.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }), jsx("line", { x1: "10.5", y1: "5.5", x2: "5.5", y2: "10.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" })] }));
+    }
+};
+/**
+ * Individual toast notification with severity indicator, auto-dismiss,
+ * optional progress bar, and action button support.
+ *
+ * - info/success: role="status", aria-live="polite"
+ * - warning/error: role="alert", aria-live="assertive"
+ * - Auto-dismiss pauses on hover
+ */
+const ToastItem = ({ toast: toastData, onDismiss, }) => {
+    const { id, title, message: msg, severity, duration, closable, showProgress, icon, action, } = toastData;
+    const [paused, setPaused] = useState(false);
+    const timerRef = useRef(null);
+    const remainingRef = useRef(duration);
+    const startRef = useRef(Date.now());
+    const isAlert = severity === 'warning' || severity === 'error';
+    const role = isAlert ? 'alert' : 'status';
+    const ariaLive = isAlert ? 'assertive' : 'polite';
+    const clearTimer = useCallback(() => {
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+    const startTimer = useCallback(() => {
+        if (duration <= 0)
+            return;
+        clearTimer();
+        startRef.current = Date.now();
+        timerRef.current = setTimeout(() => {
+            onDismiss(id);
+        }, remainingRef.current);
+    }, [duration, clearTimer, onDismiss, id]);
+    const handleMouseEnter = useCallback(() => {
+        if (duration <= 0)
+            return;
+        setPaused(true);
+        clearTimer();
+        remainingRef.current -= Date.now() - startRef.current;
+    }, [duration, clearTimer]);
+    const handleMouseLeave = useCallback(() => {
+        if (duration <= 0)
+            return;
+        setPaused(false);
+        startTimer();
+    }, [duration, startTimer]);
+    useEffect(() => {
+        startTimer();
+        return clearTimer;
+    }, [startTimer, clearTimer]);
+    return (jsxs("div", { className: toast({ severity }), role: role, "aria-live": ariaLive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-testid": `toast-${id}`, children: [jsxs("div", { className: content, children: [jsx("div", { className: iconWrapper, children: icon ?? jsx(SeverityIcon, { severity: severity, color: "currentColor" }) }), jsxs("div", { className: textContent, children: [title && jsx("div", { className: titleStyle, children: title }), jsx("div", { className: message, children: msg }), action && (jsx("button", { className: actionButton({ severity }), onClick: action.onClick, type: "button", children: action.label }))] }), closable && (jsx("button", { className: closeButton, onClick: () => onDismiss(id), "aria-label": "Dismiss notification", type: "button", children: jsxs("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: [jsx("line", { x1: "2", y1: "2", x2: "10", y2: "10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), jsx("line", { x1: "10", y1: "2", x2: "2", y2: "10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }) }))] }), showProgress && duration > 0 && (jsx("div", { className: progressBar({ severity, paused }), style: assignInlineVars({
+                    [progressDurationVar]: `${duration}ms`,
+                }), "data-testid": `toast-progress-${id}` }))] }));
+};
+ToastItem.displayName = 'ToastItem';
+
+export { ToastItem };
+//# sourceMappingURL=ToastItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastItem.js","sources":["../../../../../../src/components/feedback/Toast/ToastItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkBA;AAEA;;AAKE;AACE;AACA;AACA;AACA;AACA;;;AAIA;AACE;AAeF;;AAaA;AACE;AAoBF;AACE;;AAwBN;AASA;;;;;;;AAOG;AACI;;;AAiBL;AACA;;;;;AAOA;AACE;AACE;AACA;;;AAIJ;;;AAEE;AACA;AACA;;AAEA;;AAGF;;;;AAGE;;AAEF;AAEA;;;;AAGE;AACF;;AAGE;AACA;AACF;;AAoEU;;AAOZ;AAEA;;"}

package/dist/esm/components/feedback/Toast/ToastProvider.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useReducer, useMemo, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { ToastContainer } from './ToastContainer.js';
+
+const ToastContext = 
+/*#__PURE__*/ createContext(null);
+// --- Reducer ---
+function toastReducer(state, action) {
+    switch (action.type) {
+        case 'ADD_TOAST':
+            return [...state, action.toast];
+        case 'DISMISS_TOAST':
+            return state.filter(t => t.id !== action.id);
+        case 'DISMISS_ALL':
+            return [];
+        default:
+            return state;
+    }
+}
+/**
+ * ToastProvider manages toast notification state and renders them via portal.
+ *
+ * Wrap your application (or a section of it) with this provider, then use
+ * the `useToast()` hook to trigger notifications from any child component.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider position="bottom-right" maxVisible={5}>
+ *   <App />
+ * </ToastProvider>
+ * ```
+ */
+const ToastProvider = ({ children, position = 'bottom-right', maxVisible = 5, defaultDuration = 5000, gap = 8, zIndex = 1200, }) => {
+    const [toasts, dispatch] = useReducer(toastReducer, []);
+    const contextValue = useMemo(() => ({ dispatch, defaultDuration }), [dispatch, defaultDuration]);
+    const visibleToasts = toasts.slice(-maxVisible);
+    const handleDismiss = (id) => {
+        dispatch({ type: 'DISMISS_TOAST', id });
+    };
+    return (jsxs(ToastContext.Provider, { value: contextValue, children: [children, typeof document !== 'undefined' &&
+                createPortal(jsx(ToastContainer, { toasts: visibleToasts, position: position, gap: gap, zIndex: zIndex, onDismiss: handleDismiss }), document.body)] }));
+};
+ToastProvider.displayName = 'ToastProvider';
+
+export { ToastContext, ToastProvider };
+//# sourceMappingURL=ToastProvider.js.map

package/dist/esm/components/feedback/Toast/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","sources":["../../../../../../src/components/feedback/Toast/ToastProvider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAsBE;AAEF;AAEA;AAIE;AACE;;AAEA;AACE;AACF;AACE;AACF;AACE;;AAEN;AAEA;;;;;;;;;;;;AAYG;AACI;AAQL;;;AASA;;AAEA;AAEA;AAIM;AAYR;AAEA;;"}

package/dist/esm/components/feedback/Toast/useToast.js

@@ -0,0 +1,61 @@
+"use client";
+import { useContext, useRef, useCallback } from 'react';
+import { ToastContext } from './ToastProvider.js';
+
+/**
+ * Hook to trigger toast notifications from any component
+ * inside a `<ToastProvider>`.
+ *
+ * @throws Error if used outside of a `<ToastProvider>`
+ *
+ * @example
+ * ```tsx
+ * const { toast, success, error, dismiss } = useToast();
+ *
+ * success('File saved successfully');
+ * error('Failed to export', { title: 'Export Error' });
+ *
+ * const id = toast({ message: 'Custom toast', severity: 'info' });
+ * dismiss(id);
+ * ```
+ */
+function useToast() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    const { dispatch, defaultDuration } = context;
+    const counterRef = useRef(0);
+    const generateId = useCallback(() => {
+        counterRef.current += 1;
+        return `toast-${Date.now()}-${counterRef.current}`;
+    }, []);
+    const toast = useCallback((data) => {
+        const id = data.id ?? generateId();
+        const internalData = {
+            ...data,
+            id,
+            severity: data.severity ?? 'info',
+            duration: data.duration ?? defaultDuration,
+            closable: data.closable ?? true,
+            showProgress: data.showProgress ?? false,
+            createdAt: Date.now(),
+        };
+        dispatch({ type: 'ADD_TOAST', toast: internalData });
+        return id;
+    }, [dispatch, defaultDuration, generateId]);
+    const info = useCallback((message, options) => toast({ message, severity: 'info', ...options }), [toast]);
+    const success = useCallback((message, options) => toast({ message, severity: 'success', ...options }), [toast]);
+    const warning = useCallback((message, options) => toast({ message, severity: 'warning', ...options }), [toast]);
+    const error = useCallback((message, options) => toast({ message, severity: 'error', ...options }), [toast]);
+    const dismiss = useCallback((id) => {
+        dispatch({ type: 'DISMISS_TOAST', id });
+    }, [dispatch]);
+    const dismissAll = useCallback(() => {
+        dispatch({ type: 'DISMISS_ALL' });
+    }, [dispatch]);
+    return { toast, info, success, warning, error, dismiss, dismissAll };
+}
+
+export { useToast };
+//# sourceMappingURL=useToast.js.map

package/dist/esm/components/feedback/Toast/useToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.js","sources":["../../../../../../src/components/feedback/Toast/useToast.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAUA;;;;;;;;;;;;;;;;AAgBG;;AAED;;AAEE;;AAGF;AACA;AAEA;AACE;;;AAIF;;AAGI;AACE;;AAEA;AACA;AACA;AACA;AACA;;;AAGF;;AAKJ;AAMA;AAMA;AAMA;AAMA;;AAGE;AAIF;AACE;AACF;AAEA;AACF;;"}

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

@@ -0,0 +1,7 @@
+import './../../assets/src/components/form/FormHelperText.css.ts.vanilla-CXKd9jtx.css';
+import { c as createRuntimeFn } from '../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var formHelperTextRecipe = createRuntimeFn({defaultClassName:'FormHelperText_formHelperTextRecipe__cuqj3k0',variantClassNames:{error:{true:'FormHelperText_formHelperTextRecipe_error_true__cuqj3k1',false:'FormHelperText_formHelperTextRecipe_error_false__cuqj3k2'}},defaultVariants:{error:false},compoundVariants:[]});
+
+export { formHelperTextRecipe };
+//# sourceMappingURL=FormHelperText.css.js.map

package/dist/esm/components/form/FormHelperText.css.js.map

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

package/dist/esm/components/form/FormHelperText.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../utils/cx.js';
+import { formHelperTextRecipe } from './FormHelperText.css.js';
+
+/**
+ * A standardized helper text component for use with form controls.
+ *
+ * Provides consistent styling for helper text and error messages
+ * across different form components.
+ *
+ * @example
+ * ```tsx
+ * <Input label="Email" />
+ * <FormHelperText>We'll never share your email with anyone else.</FormHelperText>
+ *
+ * <Input label="Username" error={!!usernameError} />
+ * <FormHelperText error>{usernameError}</FormHelperText>
+ * ```
+ */
+const FormHelperText = /*#__PURE__*/ React.memo(({ children, error = false, className, style, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(formHelperTextRecipe({ error }), className), style: style, ...rest, children: children }));
+});
+FormHelperText.displayName = 'FormHelperText';
+
+export { FormHelperText };
+//# sourceMappingURL=FormHelperText.js.map

package/dist/esm/components/form/FormHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHelperText.js","sources":["../../../../../src/components/form/FormHelperText.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAuBA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAUF;AAGF;;"}

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

@@ -0,0 +1,8 @@
+import './../../assets/src/components/form/FormLabel.css.ts.vanilla-DHn6CB2v.css';
+import { c as createRuntimeFn } from '../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var formLabelRecipe = createRuntimeFn({defaultClassName:'FormLabel_formLabelRecipe__1xpmfd40',variantClassNames:{disabled:{true:'FormLabel_formLabelRecipe_disabled_true__1xpmfd41',false:'FormLabel_formLabelRecipe_disabled_false__1xpmfd42'}},defaultVariants:{disabled:false},compoundVariants:[]});
+var requiredIndicatorStyle = 'FormLabel_requiredIndicatorStyle__1xpmfd43';
+
+export { formLabelRecipe, requiredIndicatorStyle };
+//# sourceMappingURL=FormLabel.css.js.map

package/dist/esm/components/form/FormLabel.css.js.map

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

package/dist/esm/components/form/FormLabel.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../utils/cx.js';
+import { requiredIndicatorStyle, formLabelRecipe } from './FormLabel.css.js';
+
+/**
+ * A standardized form label component for use with form controls.
+ *
+ * Provides consistent styling and behavior for labels across different
+ * form components, with support for required indicators and disabled states.
+ *
+ * @example
+ * ```tsx
+ * <FormLabel htmlFor="name-input" required>
+ *   Full Name
+ * </FormLabel>
+ * <Input id="name-input" />
+ * ```
+ */
+const FormLabel = /*#__PURE__*/ React.memo(({ children, htmlFor, disabled = false, required = false, className, style, ref, ...rest }) => {
+    return (jsxs("label", { ref: ref, htmlFor: htmlFor, className: cx(formLabelRecipe({ disabled }), className), style: style, ...rest, children: [children, required && jsx("span", { className: requiredIndicatorStyle, children: " *" })] }));
+});
+FormLabel.displayName = 'FormLabel';
+
+export { FormLabel };
+//# sourceMappingURL=FormLabel.js.map

package/dist/esm/components/form/FormLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/form/FormLabel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkCA;;;;;;;;;;;;;AAaG;AACI;AAWH;AAYF;AAGF;;"}

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

@@ -0,0 +1,7 @@
+import './../../assets/src/components/form/InputWrapper.css.ts.vanilla-Bl7u62PI.css';
+import { c as createRuntimeFn } from '../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+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']]});
+
+export { inputWrapperRecipe };
+//# sourceMappingURL=InputWrapper.css.js.map

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

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

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

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../utils/cx.js';
+import { inputWrapperRecipe } from './InputWrapper.css.js';
+
+/**
+ * A standardized wrapper component for form inputs.
+ *
+ * Provides consistent styling and behavior for input containers
+ * across different form components, with support for different sizes,
+ * states (error, disabled, focused), and consistent border styling.
+ *
+ * @example
+ * ```tsx
+ * <InputWrapper
+ *   size="md"
+ *   error={!!inputError}
+ *   disabled={isDisabled}
+ *   focused={isFocused}
+ * >
+ *   <input type="text" />
+ * </InputWrapper>
+ * ```
+ */
+const InputWrapper = /*#__PURE__*/ React.memo(({ children, size = 'md', error = false, disabled = false, focused = false, className, style, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(inputWrapperRecipe({ size, error, disabled, focused }), className), style: style, ...rest, children: children }));
+});
+InputWrapper.displayName = 'InputWrapper';
+
+export { InputWrapper };
+//# sourceMappingURL=InputWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputWrapper.js","sources":["../../../../../src/components/form/InputWrapper.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA4CA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAYH;AAaF;AAGF;;"}

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

@@ -0,0 +1,20 @@
+import './../../../assets/src/components/layout/Accordion/Accordion.css.ts.vanilla-Ck5Yew0e.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var accordionGapVar = 'var(--accordionGapVar__1j9ah930)';
+var accordionItem = 'Accordion_accordionItem__1j9ah932';
+var accordionRoot = 'Accordion_accordionRoot__1j9ah931';
+var actionsArea = 'Accordion_actionsArea__1j9ah93f';
+var chevronCollapsed = 'Accordion_chevronCollapsed__1j9ah93e';
+var chevronExpanded = 'Accordion_chevronExpanded__1j9ah93d';
+var chevronStyle = 'Accordion_chevronStyle__1j9ah93c';
+var contentBody = createRuntimeFn({defaultClassName:'Accordion_contentBody__1j9ah93l',variantClassNames:{size:{sm:'Accordion_contentBody_size_sm__1j9ah93m',md:'Accordion_contentBody_size_md__1j9ah93n',lg:'Accordion_contentBody_size_lg__1j9ah93o'}},defaultVariants:{},compoundVariants:[]});
+var contentInner = 'Accordion_contentInner__1j9ah93k';
+var contentWrapper = 'Accordion_contentWrapper__1j9ah93h';
+var contentWrapperCollapsed = 'Accordion_contentWrapperCollapsed__1j9ah93j';
+var contentWrapperExpanded = 'Accordion_contentWrapperExpanded__1j9ah93i';
+var iconArea = 'Accordion_iconArea__1j9ah93g';
+var triggerButton = createRuntimeFn({defaultClassName:'Accordion_triggerButton__1j9ah933',variantClassNames:{variant:{'default':'Accordion_triggerButton_variant_default__1j9ah934',ghost:'Accordion_triggerButton_variant_ghost__1j9ah935',filled:'Accordion_triggerButton_variant_filled__1j9ah936'},size:{sm:'Accordion_triggerButton_size_sm__1j9ah937',md:'Accordion_triggerButton_size_md__1j9ah938',lg:'Accordion_triggerButton_size_lg__1j9ah939'},disabled:{true:'Accordion_triggerButton_disabled_true__1j9ah93a',false:'Accordion_triggerButton_disabled_false__1j9ah93b'}},defaultVariants:{variant:'default',size:'md',disabled:false},compoundVariants:[]});
+
+export { accordionGapVar, accordionItem, accordionRoot, actionsArea, chevronCollapsed, chevronExpanded, chevronStyle, contentBody, contentInner, contentWrapper, contentWrapperCollapsed, contentWrapperExpanded, iconArea, triggerButton };
+//# sourceMappingURL=Accordion.css.js.map

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

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