entangle-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,214 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+
+// --- Severity color map ---
+const SEVERITY_COLOR_MAP = {
+    info: 'primary',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+};
+// --- 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" })] }));
+    }
+};
+// --- Animations ---
+const slideIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const progressShrink = keyframes `
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+`;
+const StyledToast = styled.div `
+  width: 360px;
+  background: ${props => props.theme.colors.background.elevated};
+  border: 1px solid ${props => props.theme.colors.border.default};
+  border-left: 3px solid
+    ${props => props.theme.colors.accent[SEVERITY_COLOR_MAP[props.$severity]]};
+  border-radius: ${props => props.theme.borderRadius.lg}px;
+  box-shadow: ${props => props.theme.shadows.md};
+  padding: ${props => props.theme.spacing.md}px;
+  pointer-events: auto;
+  position: relative;
+  overflow: hidden;
+  animation: ${slideIn} ${props => props.theme.transitions.normal} forwards;
+`;
+const StyledContent = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: ${props => props.theme.spacing.md}px;
+`;
+const StyledIconWrapper = styled.div `
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-top: 1px;
+`;
+const StyledTextContent = styled.div `
+  flex: 1;
+  min-width: 0;
+`;
+const StyledTitle = styled.div `
+  font-weight: ${props => props.theme.typography.fontWeight.semibold};
+  color: ${props => props.theme.colors.text.primary};
+  font-size: ${props => props.theme.typography.fontSize.sm}px;
+  line-height: ${props => props.theme.typography.lineHeight.normal};
+`;
+const StyledMessage = styled.div `
+  color: ${props => props.theme.colors.text.secondary};
+  font-size: ${props => props.theme.typography.fontSize.xs}px;
+  line-height: ${props => props.theme.typography.lineHeight.normal};
+  margin-top: ${props => props.theme.spacing.xs}px;
+`;
+const StyledCloseButton = styled.button `
+  /* Reset */
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  outline: none;
+
+  /* Layout */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: ${props => props.theme.borderRadius.sm}px;
+  color: ${props => props.theme.colors.text.muted};
+  transition:
+    color ${props => props.theme.transitions.fast},
+    background ${props => props.theme.transitions.fast};
+
+  &:hover {
+    color: ${props => props.theme.colors.text.primary};
+    background: ${props => props.theme.colors.surface.hover};
+  }
+
+  &:focus-visible {
+    box-shadow: ${props => props.theme.shadows.focus};
+  }
+`;
+const StyledActionButton = styled.button `
+  /* Reset */
+  padding: ${props => props.theme.spacing.xs}px
+    ${props => props.theme.spacing.sm}px;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  outline: none;
+
+  /* Styling */
+  color: ${props => props.theme.colors.accent[SEVERITY_COLOR_MAP[props.$severity]]};
+  font-size: ${props => props.theme.typography.fontSize.xs}px;
+  font-weight: ${props => props.theme.typography.fontWeight.medium};
+  border-radius: ${props => props.theme.borderRadius.sm}px;
+  transition: background ${props => props.theme.transitions.fast};
+  margin-top: ${props => props.theme.spacing.sm}px;
+
+  &:hover {
+    background: ${props => props.theme.colors.surface.hover};
+  }
+
+  &:focus-visible {
+    box-shadow: ${props => props.theme.shadows.focus};
+  }
+`;
+const StyledProgressBar = styled.div `
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: ${props => props.theme.colors.accent[SEVERITY_COLOR_MAP[props.$severity]]};
+  animation: ${progressShrink} ${props => props.$duration}ms linear forwards;
+  animation-play-state: ${props => (props.$paused ? 'paused' : 'running')};
+`;
+/**
+ * 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, onDismiss }) => {
+    const { id, title, message, severity, duration, closable, showProgress, icon, action, } = toast;
+    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(StyledToast, { "$severity": severity, role: role, "aria-live": ariaLive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-testid": `toast-${id}`, children: [jsxs(StyledContent, { children: [jsx(StyledIconWrapper, { children: icon ?? jsx(SeverityIcon, { severity: severity, color: "currentColor" }) }), jsxs(StyledTextContent, { children: [title && jsx(StyledTitle, { children: title }), jsx(StyledMessage, { children: message }), action && (jsx(StyledActionButton, { "$severity": severity, onClick: action.onClick, type: "button", children: action.label }))] }), closable && (jsx(StyledCloseButton, { 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(StyledProgressBar, { "$severity": severity, "$duration": duration, "$paused": paused, "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":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,47 @@
+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":["_jsxs","_jsx"],"mappings":";;;;;MAmBa,YAAY;AACvB,cAAc,aAAa,CAA2B,IAAI;AAE5D;AAEA,SAAS,YAAY,CACnB,KAA0B,EAC1B,MAAmB,EAAA;AAEnB,IAAA,QAAQ,MAAM,CAAC,IAAI;AACjB,QAAA,KAAK,WAAW;YACd,OAAO,CAAC,GAAG,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;AACjC,QAAA,KAAK,eAAe;AAClB,YAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC;AAC9C,QAAA,KAAK,aAAa;AAChB,YAAA,OAAO,EAAE;AACX,QAAA;AACE,YAAA,OAAO,KAAK;;AAElB;AAEA;;;;;;;;;;;;AAYG;AACI,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,QAAQ,GAAG,cAAc,EACzB,UAAU,GAAG,CAAC,EACd,eAAe,GAAG,IAAI,EACtB,GAAG,GAAG,CAAC,EACP,MAAM,GAAG,IAAI,GACd,KAAI;AACH,IAAA,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,YAAY,EAAE,EAAE,CAAC;IAEvD,MAAM,YAAY,GAAG,OAAO,CAC1B,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,EACrC,CAAC,QAAQ,EAAE,eAAe,CAAC,CAC5B;IAED,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;AAE/C,IAAA,MAAM,aAAa,GAAG,CAAC,EAAU,KAAI;QACnC,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;AACzC,KAAC;AAED,IAAA,QACEA,IAAA,CAAC,YAAY,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,aACvC,QAAQ,EACR,OAAO,QAAQ,KAAK,WAAW;AAC9B,gBAAA,YAAY,CACVC,GAAA,CAAC,cAAc,EAAA,EACb,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,EAAA,CACxB,EACF,QAAQ,CAAC,IAAI,CACd,CAAA,EAAA,CACmB;AAE5B;AAEA,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

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

@@ -0,0 +1,60 @@
+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":";;;AAQA;;;;;;;;;;;;;;;;AAgBG;SACa,QAAQ,GAAA;AACtB,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC;IACxC,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;;AAGjE,IAAA,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,OAAO;AAC7C,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC;AAE5B,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAClC,QAAA,UAAU,CAAC,OAAO,IAAI,CAAC;QACvB,OAAO,CAAA,MAAA,EAAS,IAAI,CAAC,GAAG,EAAE,IAAI,UAAU,CAAC,OAAO,CAAA,CAAE;KACnD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,IAAe,KAAY;QAC1B,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,UAAU,EAAE;AAClC,QAAA,MAAM,YAAY,GAAsB;AACtC,YAAA,GAAG,IAAI;YACP,EAAE;AACF,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,MAAM;AACjC,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,eAAe;AAC1C,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI;AAC/B,YAAA,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,KAAK;AACxC,YAAA,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;SACtB;QACD,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACpD,QAAA,OAAO,EAAE;KACV,EACD,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CACxC;AAED,IAAA,MAAM,IAAI,GAAG,WAAW,CACtB,CAAC,OAAe,EAAE,OAA4B,KAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,CAAC,EAClD,CAAC,KAAK,CAAC,CACR;AAED,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,OAAe,EAAE,OAA4B,KAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC,EACrD,CAAC,KAAK,CAAC,CACR;AAED,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,OAAe,EAAE,OAA4B,KAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC,EACrD,CAAC,KAAK,CAAC,CACR;AAED,IAAA,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,OAAe,EAAE,OAA4B,KAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC,EACnD,CAAC,KAAK,CAAC,CACR;AAED,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,EAAU,KAAI;QACb,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;AACzC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAClC,QAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;AACnC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE;AACtE;;;;"}

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

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../utils/styledUtils.js';
+
+const StyledHelperText = styled.div `
+  font-size: ${props => props.theme.typography.fontSize.xs}px;
+  line-height: ${props => props.theme.typography.lineHeight.tight};
+  color: ${props => props.$error
+    ? props.theme.colors.accent.error
+    : props.theme.colors.text.muted};
+  margin-top: ${props => props.theme.spacing.xs}px;
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * 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, css, ref, ...rest }) => {
+    return (jsx(StyledHelperText, { ref: ref, "$error": error, "$css": css, className: 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":["_jsx"],"mappings":";;;;;AAqBA,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAGjC;eACa,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAA;iBACzC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAA;AACtD,SAAA,EAAA,KAAK,IACZ,KAAK,CAAC;MACF,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;MAC1B,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;gBACrB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;AAG3C,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED;;;;;;;;;;;;;;AAcG;AACI,MAAM,cAAc,iBAAiB,KAAK,CAAC,IAAI,CACpD,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,KAAI;IACnE,QACEA,GAAC,CAAA,gBAAgB,EACf,EAAA,GAAG,EAAE,GAAG,EAAA,QAAA,EACA,KAAK,EAAA,MAAA,EACP,GAAG,EACT,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACR,GAAA,IAAI,EAEP,QAAA,EAAA,QAAQ,EACQ,CAAA;AAEvB,CAAC;AAGH,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

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

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../utils/styledUtils.js';
+
+const StyledLabel = styled.label `
+  font-size: ${props => props.theme.typography.fontSize.sm}px;
+  font-weight: ${props => props.theme.typography.fontWeight.medium};
+  color: ${props => props.$disabled
+    ? props.theme.colors.text.disabled
+    : props.theme.colors.text.secondary};
+  line-height: ${props => props.theme.typography.lineHeight.tight};
+  margin-bottom: ${props => props.theme.spacing.xs}px;
+  display: inline-block;
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+const RequiredIndicator = styled.span `
+  color: ${props => props.theme.colors.accent.error};
+  margin-left: 2px;
+`;
+/**
+ * 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, css, ref, ...rest }) => {
+    return (jsxs(StyledLabel, { ref: ref, htmlFor: htmlFor, "$disabled": disabled, "$css": css, className: className, style: style, ...rest, children: [children, required && jsx(RequiredIndicator, { 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":["_jsxs","_jsx"],"mappings":";;;;;AAgCA,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAG9B;eACa,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAA;iBACzC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM,CAAA;AACvD,SAAA,EAAA,KAAK,IACZ,KAAK,CAAC;MACF,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;MACxB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAA;iBACxB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAA;mBAC9C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;;AAI9C,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAA;WAC1B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAA;;CAElD;AAED;;;;;;;;;;;;;AAaG;AACU,MAAA,SAAS,iBAAiB,KAAK,CAAC,IAAI,CAC/C,CAAC,EACC,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,EACH,GAAG,IAAI,EACR,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EACV,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAAA,WAAA,EACL,QAAQ,EAAA,MAAA,EACb,GAAG,EACT,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,GACR,IAAI,EAEP,QAAA,EAAA,CAAA,QAAQ,EACR,QAAQ,IAAIC,GAAC,CAAA,iBAAiB,EAAuB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,CAC1C;AAElB,CAAC;AAGH,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

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

@@ -0,0 +1,100 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../utils/styledUtils.js';
+
+const StyledInputWrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid;
+  border-radius: ${props => props.theme.borderRadius.md}px;
+  transition: all ${props => props.theme.transitions.normal};
+  background: ${props => props.$disabled
+    ? props.theme.colors.surface.disabled
+    : props.theme.colors.surface.default};
+
+  /* Size variants */
+  ${props => {
+    const sizes = {
+        sm: {
+            height: '20px',
+            padding: `0 ${props.theme.spacing.sm}px`,
+        },
+        md: {
+            height: '24px',
+            padding: `0 ${props.theme.spacing.md}px`,
+        },
+        lg: {
+            height: '32px',
+            padding: `0 ${props.theme.spacing.lg}px`,
+        },
+    };
+    const size = sizes[props.$size];
+    return `
+      height: ${size.height};
+      padding: ${size.padding};
+    `;
+}}
+
+  /* Border color states */
+  border-color: ${props => {
+    if (props.$error)
+        return props.theme.colors.border.error;
+    if (props.$focused)
+        return props.theme.colors.border.focus;
+    return props.theme.colors.border.default;
+}};
+
+  /* Focus ring */
+  ${props => props.$focused &&
+    !props.$error &&
+    `
+    box-shadow: 0 0 0 2px ${props.theme.colors.accent.primary}20;
+  `}
+
+  /* Disabled state */
+  ${props => props.$disabled &&
+    `
+    opacity: 0.5;
+    cursor: not-allowed;
+  `}
+  
+  /* Hover state */
+  &:hover:not(:focus-within) {
+    border-color: ${props => {
+    if (props.$disabled || props.$error)
+        return 'inherit';
+    return props.theme.colors.border.focus;
+}};
+  }
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * 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, css, ref, ...rest }) => {
+    return (jsx(StyledInputWrapper, { ref: ref, "$size": size, "$error": error, "$disabled": disabled, "$focused": focused, "$css": css, className: className, style: style, ...rest, children: children }));
+});
+InputWrapper.displayName = 'InputWrapper';
+
+export { InputWrapper, StyledInputWrapper };
+//# 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":["_jsx"],"mappings":"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"}

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

@@ -0,0 +1,103 @@
+import { jsx } from 'react/jsx-runtime';
+import { useId, useState, useCallback, createContext, useContext } from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+// --- Contexts ---
+const AccordionContext = 
+/*#__PURE__*/ createContext(null);
+const AccordionItemContext = 
+/*#__PURE__*/ createContext(null);
+function useAccordionContext() {
+    const ctx = useContext(AccordionContext);
+    if (!ctx) {
+        throw new Error('Accordion compound components must be used within <Accordion>');
+    }
+    return ctx;
+}
+function useAccordionItemContext() {
+    const ctx = useContext(AccordionItemContext);
+    if (!ctx) {
+        throw new Error('AccordionTrigger/AccordionContent must be used within <AccordionItem>');
+    }
+    return ctx;
+}
+// --- Helpers ---
+function normalizeValue(value) {
+    if (value === undefined)
+        return [];
+    if (Array.isArray(value))
+        return value;
+    return [value];
+}
+const StyledAccordionRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${props => props.$gap}px;
+
+  ${props => processCss(props.$css, props.theme)}
+`;
+// --- Component ---
+/**
+ * Accordion component for collapsible sections in property inspectors
+ * and settings panels.
+ *
+ * Compound component pattern: use with AccordionItem, AccordionTrigger,
+ * and AccordionContent.
+ *
+ * @example
+ * ```tsx
+ * <Accordion defaultValue="transform">
+ *   <AccordionItem value="transform">
+ *     <AccordionTrigger>Transform</AccordionTrigger>
+ *     <AccordionContent>Position, rotation, scale fields...</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+const Accordion = ({ value: valueProp, defaultValue, multiple = false, collapsible = false, variant = 'default', size = 'md', gap = 0, children, onChange, className, style, css, testId, ref, ...rest }) => {
+    const autoId = useId();
+    const [internalValue, setInternalValue] = useState(normalizeValue(defaultValue));
+    const isControlled = valueProp !== undefined;
+    const expandedItems = isControlled
+        ? normalizeValue(valueProp)
+        : internalValue;
+    const toggleItem = useCallback((itemValue) => {
+        const isExpanded = expandedItems.includes(itemValue);
+        let nextExpanded;
+        if (multiple) {
+            nextExpanded = isExpanded
+                ? expandedItems.filter(v => v !== itemValue)
+                : [...expandedItems, itemValue];
+        }
+        else {
+            if (isExpanded) {
+                nextExpanded = collapsible ? [] : expandedItems;
+            }
+            else {
+                nextExpanded = [itemValue];
+            }
+        }
+        if (!isControlled) {
+            setInternalValue(nextExpanded);
+        }
+        if (multiple) {
+            onChange?.(nextExpanded);
+        }
+        else {
+            onChange?.(nextExpanded[0] ?? '');
+        }
+    }, [expandedItems, multiple, collapsible, isControlled, onChange]);
+    const contextValue = {
+        expandedItems,
+        toggleItem,
+        variant,
+        size,
+        accordionId: autoId,
+    };
+    return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx(StyledAccordionRoot, { ref: ref, "$gap": gap, "$css": css, className: className, style: style, "data-testid": testId, ...rest, children: children }) }));
+};
+Accordion.displayName = 'Accordion';
+
+export { Accordion, AccordionContext, AccordionItemContext, useAccordionContext, useAccordionItemContext };
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/layout/Accordion/Accordion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}