mythik-react 0.1.0

package/dist/primitives/text.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveTypographyHierarchy, resolveTextDecorations, resolveLabelStyle } from 'mythik';
+import { useDesignTokens } from './use-design-tokens.js';
+const VARIANT_TAGS = {
+    heading: 'h2',
+    body: 'p',
+    caption: 'span',
+    label: 'label',
+    mono: 'code',
+};
+export function Text({ content, variant = 'body', style, className, _tokens }) {
+    const t = useDesignTokens(_tokens);
+    const Tag = VARIANT_TAGS[variant] ?? 'p';
+    const ls = t.typography.letterSpacing ? `${t.typography.letterSpacing}em` : undefined;
+    const hls = t.typography.headingLetterSpacing ? `${t.typography.headingLetterSpacing}em` : undefined;
+    const typoH = resolveTypographyHierarchy(t.identity.typographyHierarchy);
+    const headingDeco = resolveTextDecorations(t.identity.textDecoration, t.colors.accent);
+    const labelDeco = resolveLabelStyle(t.identity.labelStyle, t.colors.accent);
+    // Resolve heading color: 'default' = inherit, others map to scheme colors
+    const hc = t.identity.headingColor;
+    const headingColorCSS = hc === 'primary' ? t.colors.primary
+        : hc === 'accent' ? t.colors.accent
+            : hc === 'primary-dark' ? t.colors.primaryDark
+                : 'inherit';
+    const variantStyles = {
+        heading: {
+            fontSize: Math.round(t.typography.scale.md.fontSize * typoH.headingScale),
+            fontWeight: typoH.headingWeight,
+            fontFamily: typoH.headingFontFamily === 'mono' ? t.typography.fontFamily.mono : t.typography.fontFamily.heading,
+            letterSpacing: typoH.headingLetterSpacing ?? hls,
+            color: headingColorCSS,
+            ...headingDeco,
+        },
+        body: { fontSize: t.typography.scale.md.fontSize, fontWeight: t.typography.weight.normal, fontFamily: t.typography.fontFamily.base, lineHeight: `${t.typography.scale.md.lineHeight}px`, letterSpacing: ls, color: 'inherit' },
+        caption: { fontSize: t.typography.scale.xs.fontSize, fontWeight: t.typography.weight.normal, opacity: t.opacity.muted, fontFamily: t.typography.fontFamily.base, letterSpacing: ls, color: 'inherit' },
+        label: {
+            fontSize: t.typography.scale.sm.fontSize,
+            fontWeight: t.typography.weight.medium,
+            fontFamily: t.typography.fontFamily.base,
+            letterSpacing: ls,
+            color: 'inherit',
+            ...labelDeco,
+        },
+        mono: { fontSize: t.typography.scale.sm.fontSize, fontFamily: t.typography.fontFamily.mono, color: 'inherit' },
+    };
+    // Gradient text: 'vibrant' (OKLCH), 'soft' (OKLCH light tones), 'muted' (sRGB desaturated center), true='vibrant', false=off
+    const gradientMode = t.identity.gradients.text;
+    const useGradientText = variant === 'heading' && gradientMode && !style?.color && !style?.background && !style?.backgroundImage;
+    const gradientColors = gradientMode === 'soft'
+        ? `linear-gradient(135deg in oklch, ${t.colors.primaryLight}, ${t.colors.accentLight})`
+        : gradientMode === 'muted'
+            ? `linear-gradient(135deg, ${t.colors.primary}, ${t.colors.accent})`
+            : `linear-gradient(135deg in oklch, ${t.colors.primary}, ${t.colors.accent})`;
+    // Use `backgroundImage` longhand instead of `background` shorthand so it
+    // composes with consumer-provided `backgroundColor` cleanly (no React
+    // shorthand/longhand conflict during rerender — see button.tsx).
+    const gradientStyle = useGradientText
+        ? {
+            backgroundImage: gradientColors,
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            color: 'transparent',
+            width: 'fit-content',
+        }
+        : {};
+    return _jsx(Tag, { style: { ...variantStyles[variant], ...gradientStyle, ...style }, className: className, children: content });
+}
+//# sourceMappingURL=text.js.map

package/dist/primitives/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/primitives/text.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/textarea.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+interface TextareaProps {
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    rows?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    style?: CSSProperties;
+    _tokens?: Record<string, unknown>;
+    onChange?: (value: string) => void;
+}
+export declare function Textarea({ value, placeholder, label, rows, disabled, readOnly, style, _tokens, onChange }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=textarea.d.ts.map

package/dist/primitives/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/primitives/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,UAAU,aAAa;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAU,EAAE,WAAW,EAAE,KAAK,EAAE,IAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAiCjI"}

package/dist/primitives/textarea.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { resolveLabelStyle } from 'mythik';
+import { useDesignTokens } from './use-design-tokens.js';
+export function Textarea({ value = '', placeholder, label, rows = 3, disabled, readOnly, style, _tokens, onChange }) {
+    const t = useDesignTokens(_tokens);
+    const [focused, setFocused] = React.useState(false);
+    const color = style?.color ?? 'inherit';
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: t.spacing.unit }, children: [label && _jsx("label", { style: { fontSize: t.typography.scale.sm.fontSize, fontWeight: t.typography.weight.medium, fontFamily: t.typography.fontFamily.base, color, ...resolveLabelStyle(t.identity.labelStyle, t.colors.accent) }, children: label }), _jsx("textarea", { value: value, placeholder: placeholder, rows: rows, disabled: disabled, readOnly: readOnly, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onChange: (e) => onChange?.(e.target.value), style: {
+                    padding: `${t.spacing.scale.sm}px ${t.spacing.scale.sm + t.spacing.unit}px`,
+                    borderRadius: t.radius(t.shape.radius.md),
+                    fontSize: t.typography.scale.sm.fontSize,
+                    fontFamily: t.typography.fontFamily.base,
+                    color,
+                    resize: 'vertical',
+                    outline: 'none',
+                    transition: `border-color ${t.motion.duration.fast}ms ${t.motion.easing.default}, box-shadow ${t.motion.duration.fast}ms ${t.motion.easing.default}`,
+                    ...t.surface.input,
+                    ...(focused ? t.surface.inputFocus : {}),
+                    ...style,
+                } })] }));
+}
+//# sourceMappingURL=textarea.js.map

package/dist/primitives/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/primitives/textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAczD,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAiB;IAChI,MAAM,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACnC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,KAAK,EAAE,KAAe,IAAI,SAAS,CAAC;IAElD,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,aAC1E,KAAK,IAAI,gBAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,YAAG,KAAK,GAAS,EAC5O,mBACE,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC3C,KAAK,EAAE;oBACL,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI;oBAC3E,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;oBACzC,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ;oBACxC,UAAU,EAAE,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI;oBACxC,KAAK;oBACL,MAAM,EAAE,UAAU;oBAClB,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,gBAAgB,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE;oBACpJ,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK;oBAClB,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;oBACxC,GAAG,KAAK;iBACT,GACD,IACE,CACP,CAAC;AACJ,CAAC"}

package/dist/primitives/toast-container.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { StateStore } from 'mythik';
+export interface ToastContainerProps {
+    store: StateStore;
+    onDismiss: (id: string) => void;
+    position?: string;
+    duration?: number;
+    maxVisible?: number;
+    offset?: number;
+    gap?: number;
+    _tokens?: Record<string, unknown>;
+    renderIcon?: (name: string, size: number, color: string) => React.ReactNode;
+}
+export declare function ToastContainer({ store, onDismiss, position, duration, maxVisible, offset, gap, _tokens, renderIcon, }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toast-container.d.ts.map

package/dist/primitives/toast-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-container.d.ts","sourceRoot":"","sources":["../../src/primitives/toast-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAyGzC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,UAAU,CAAC;IAClB,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7E;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,SAAS,EACT,QAAsB,EACtB,QAAe,EACf,UAAc,EACd,MAAW,EACX,GAAG,EACH,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAwJrB"}

package/dist/primitives/toast-container.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { useDesignTokens } from './use-design-tokens.js';
+/** Color config per notification type — light and dark variants */
+const TYPE_COLORS = {
+    success: { color: '#10B981', bgLight: '#ECFDF5', bgDark: '#052E1C' },
+    error: { color: '#EF4444', bgLight: '#FEF2F2', bgDark: '#3B1114' },
+    warning: { color: '#F59E0B', bgLight: '#FFFBEB', bgDark: '#3B2506' },
+    info: { color: '#3B82F6', bgLight: '#EFF6FF', bgDark: '#0C1F3D' },
+};
+/** Fallback SVG icons when no icon plugin is available */
+function FallbackIcon({ type, color }) {
+    const size = 20;
+    const common = {
+        width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
+        stroke: color, strokeWidth: 2,
+        strokeLinecap: 'round', strokeLinejoin: 'round',
+    };
+    switch (type) {
+        case 'success':
+            return (_jsxs("svg", { ...common, "data-toast-icon": "success", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M9 12l2 2 4-4" })] }));
+        case 'error':
+            return (_jsxs("svg", { ...common, "data-toast-icon": "error", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M15 9l-6 6M9 9l6 6" })] }));
+        case 'warning':
+            return (_jsxs("svg", { ...common, "data-toast-icon": "warning", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }));
+        case 'info':
+        default:
+            return (_jsxs("svg", { ...common, "data-toast-icon": "info", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] }));
+    }
+}
+/** Icon name mapping per notification type */
+const TYPE_ICON_NAMES = {
+    success: 'check-circle',
+    error: 'x-circle',
+    warning: 'warning',
+    info: 'info',
+};
+/** Positions → CSS properties */
+function getPositionStyles(position, offset) {
+    const base = {
+        position: 'fixed', zIndex: 9999,
+        display: 'flex', flexDirection: 'column',
+        pointerEvents: 'none',
+    };
+    const [vertical, horizontal] = position.split('-');
+    if (vertical === 'top')
+        base.top = offset;
+    else
+        base.bottom = offset;
+    if (horizontal === 'left') {
+        base.left = offset;
+        base.alignItems = 'flex-start';
+    }
+    else if (horizontal === 'center') {
+        base.left = '50%';
+        base.transform = 'translateX(-50%)';
+        base.alignItems = 'center';
+    }
+    else {
+        base.right = offset;
+        base.alignItems = 'flex-end';
+    }
+    return base;
+}
+/** Slide direction based on position */
+function getSlideX(position) {
+    return position.includes('left') ? -80 : 80;
+}
+export function ToastContainer({ store, onDismiss, position = 'top-right', duration = 4000, maxVisible = 5, offset = 24, gap, _tokens, renderIcon, }) {
+    const t = useDesignTokens(_tokens);
+    const resolvedGap = gap ?? t.spacing.scale.sm;
+    const [notifications, setNotifications] = React.useState(() => {
+        return store.get('/ui/notifications') ?? [];
+    });
+    const [isDark, setIsDark] = React.useState(() => {
+        return store.get('/preferences/theme') === 'dark';
+    });
+    const timersRef = React.useRef(new Map());
+    const onDismissRef = React.useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    // Subscribe to /ui/notifications and /preferences/theme
+    React.useEffect(() => {
+        const unsubNotifs = store.subscribePath('/ui/notifications', (updated) => {
+            setNotifications(updated ?? []);
+        });
+        const unsubTheme = store.subscribePath('/preferences/theme', (updated) => {
+            setIsDark(updated === 'dark');
+        });
+        return () => {
+            unsubNotifs();
+            unsubTheme();
+            for (const timer of timersRef.current.values()) {
+                clearTimeout(timer);
+            }
+            timersRef.current.clear();
+        };
+    }, [store]);
+    // Set up auto-dismiss timers for new notifications
+    React.useEffect(() => {
+        for (const notif of notifications) {
+            if (timersRef.current.has(notif.id))
+                continue;
+            const notifDuration = notif.duration !== undefined ? notif.duration : duration;
+            if (notifDuration === null)
+                continue;
+            const timer = setTimeout(() => {
+                timersRef.current.delete(notif.id);
+                onDismissRef.current(notif.id);
+            }, notifDuration);
+            timersRef.current.set(notif.id, timer);
+        }
+        // Clean up timers for removed notifications
+        for (const [id, timer] of timersRef.current.entries()) {
+            if (!notifications.find(n => n.id === id)) {
+                clearTimeout(timer);
+                timersRef.current.delete(id);
+            }
+        }
+    }, [notifications, duration]);
+    const visible = notifications.slice(-maxVisible);
+    const slideX = getSlideX(position);
+    return (_jsxs("div", { style: getPositionStyles(position, offset), "data-toast-container": true, children: [_jsx(AnimatePresence, { mode: "popLayout", children: visible.map((notif) => {
+                    const typeConfig = TYPE_COLORS[notif.type] ?? TYPE_COLORS.info;
+                    const bg = isDark ? typeConfig.bgDark : typeConfig.bgLight;
+                    const titleColor = isDark ? '#F1F5F9' : '#0F172A';
+                    const messageColor = isDark ? '#CBD5E1' : '#334155';
+                    const closeColor = isDark ? '#64748B' : '#94A3B8';
+                    const shadow = t.elevation.lg;
+                    const notifDuration = notif.duration !== undefined ? notif.duration : duration;
+                    const showProgress = notifDuration !== null;
+                    return (_jsxs(motion.div, { layout: true, initial: { x: slideX, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: slideX, opacity: 0, height: 0, marginBottom: 0, overflow: 'hidden' }, transition: { duration: 0.2, ease: 'easeOut' }, style: {
+                            pointerEvents: 'auto',
+                            marginBottom: resolvedGap,
+                            width: 360,
+                            backgroundColor: bg,
+                            borderLeft: `4px solid ${typeConfig.color}`,
+                            borderRadius: t.radius(t.shape.radius.md),
+                            boxShadow: shadow,
+                            overflow: 'hidden',
+                        }, "data-toast": true, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', padding: '12px 12px 8px 12px', gap: 10 }, children: [_jsx("div", { style: { flexShrink: 0, marginTop: 1 }, children: renderIcon
+                                            ? renderIcon(TYPE_ICON_NAMES[notif.type] ?? 'info', 20, typeConfig.color)
+                                            : _jsx(FallbackIcon, { type: notif.type, color: typeConfig.color }) }), _jsxs("div", { style: { flex: 1, minWidth: 0, fontFamily: t.typography.fontFamily.base }, children: [notif.title && (_jsx("div", { style: { fontWeight: t.typography.weight.semibold, fontSize: t.typography.scale.sm.fontSize, color: titleColor, marginBottom: 2, lineHeight: 1.3 }, children: notif.title })), _jsx("div", { style: { fontSize: 13, color: messageColor, lineHeight: 1.4 }, children: notif.message })] }), _jsx("button", { "data-toast-close": true, onClick: () => onDismiss(notif.id), style: {
+                                            flexShrink: 0, background: 'none', border: 'none', cursor: 'pointer',
+                                            padding: 4, borderRadius: 4, color: closeColor, lineHeight: 1,
+                                            fontSize: 16, fontWeight: 'bold',
+                                        }, "aria-label": "Dismiss notification", children: "\u2715" })] }), showProgress && (_jsx("div", { "data-toast-progress": true, style: {
+                                    height: 3,
+                                    backgroundColor: typeConfig.color,
+                                    opacity: 0.3,
+                                    animation: `sv-toast-progress ${notifDuration}ms linear forwards`,
+                                } }))] }, notif.id));
+                }) }), _jsx("style", { children: `
+        @keyframes sv-toast-progress {
+          from { width: 100%; }
+          to { width: 0%; }
+        }
+      ` })] }));
+}
+//# sourceMappingURL=toast-container.js.map

package/dist/primitives/toast-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-container.js","sourceRoot":"","sources":["../../src/primitives/toast-container.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/toggle.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'react';
+interface ToggleProps {
+    checked?: boolean;
+    label?: string;
+    disabled?: boolean;
+    style?: CSSProperties;
+    _tokens?: Record<string, unknown>;
+    onChange?: (checked: boolean) => void;
+}
+export declare function Toggle({ checked, label, disabled, style, _tokens, onChange }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=toggle.d.ts.map

package/dist/primitives/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/primitives/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,WAAW,2CA0BjG"}

package/dist/primitives/toggle.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDesignTokens } from './use-design-tokens.js';
+export function Toggle({ checked = false, label, disabled, style, _tokens, onChange }) {
+    const t = useDesignTokens(_tokens);
+    const trackColor = checked ? t.colors.primary : t.colors.border;
+    const thumbPosition = checked ? 20 : 2;
+    return (_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: t.spacing.scale.sm, cursor: disabled ? 'default' : 'pointer', color: t.colors.text, ...style }, children: [_jsx("button", { role: "switch", type: "button", "aria-checked": checked, disabled: disabled, onClick: () => onChange?.(!checked), style: {
+                    width: 44, height: 24, borderRadius: 12, backgroundColor: trackColor,
+                    border: 'none', padding: 0, cursor: disabled ? 'default' : 'pointer',
+                    position: 'relative', transition: `background-color ${t.motion.duration.fast}ms`,
+                    opacity: disabled ? t.opacity.disabled : 1,
+                }, children: _jsx("span", { style: {
+                        position: 'absolute', top: 2, left: thumbPosition, width: 20, height: 20,
+                        borderRadius: '50%', backgroundColor: '#fff', transition: `left ${t.motion.duration.fast}ms`,
+                        boxShadow: t.elevation.sm,
+                    } }) }), label && _jsx("span", { style: { fontSize: t.typography.scale.md.fontSize, fontFamily: t.typography.fontFamily.base }, children: label })] }));
+}
+//# sourceMappingURL=toggle.js.map

package/dist/primitives/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/primitives/toggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAWzD,MAAM,UAAU,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAe;IAChG,MAAM,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;IAChE,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,iBAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,KAAK,EAAE,aACxJ,iBACE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,kBAAe,OAAO,EAAE,QAAQ,EAAE,QAAQ,EACrE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,EACnC,KAAK,EAAE;oBACL,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,eAAe,EAAE,UAAU;oBACpE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;oBACpE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,oBAAoB,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,IAAI;oBAChF,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;iBAC3C,YAED,eAAM,KAAK,EAAE;wBACX,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;wBACxE,YAAY,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,IAAI;wBAC5F,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE;qBAC1B,GAAI,GACE,EACR,KAAK,IAAI,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,YAAG,KAAK,GAAQ,IACvH,CACT,CAAC;AACJ,CAAC"}

package/dist/primitives/touchable.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties, ReactNode } from 'react';
+interface TouchableProps {
+    style?: CSSProperties;
+    className?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+}
+export declare function Touchable({ style, className, children, onClick }: TouchableProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=touchable.d.ts.map

package/dist/primitives/touchable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touchable.d.ts","sourceRoot":"","sources":["../../src/primitives/touchable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,cAAc,2CAahF"}

package/dist/primitives/touchable.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Touchable({ style, className, children, onClick }) {
+    return (_jsx("div", { role: "button", tabIndex: 0, onClick: onClick, className: className, onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ')
+            onClick?.(); }, style: { cursor: 'pointer', transition: 'all 0.15s ease', ...style }, children: children }));
+}
+//# sourceMappingURL=touchable.js.map

package/dist/primitives/touchable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"touchable.js","sourceRoot":"","sources":["../../src/primitives/touchable.tsx"],"names":[],"mappings":";AASA,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAkB;IAC/E,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;YAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,EAC1E,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,YAEnE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/primitives/use-design-tokens.d.ts

@@ -0,0 +1,127 @@
+/**
+ * Extract ALL design token categories from _tokens prop.
+ * Primitives call this to get typed, defaulted values for every visual dimension.
+ * Replaces useThemeColors (which only extracted 6 color values).
+ *
+ * Web-specific: elevation returns CSS boxShadow strings.
+ */
+import type { CSSProperties } from 'react';
+import type { SurfaceType, RadiusPattern, BorderStyle, BorderColorSource, ElevationStyle, TypographyHierarchy, TextDecoration, LabelStyle, HeadingColor, ColorScheme, ColorWeight, AccentApplication, ColorWeightResult, LayerBackground, GradientConfig, IconIdentity, ImageIdentity } from 'mythik';
+export interface DesignTokensWeb {
+    colors: {
+        primary: string;
+        primaryLight: string;
+        primaryDark: string;
+        accent: string;
+        accentLight: string;
+        surface: string;
+        background: string;
+        text: string;
+        textMuted: string;
+        border: string;
+        error: string;
+        success: string;
+        warning: string;
+    };
+    shape: {
+        radius: {
+            none: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            full: number;
+        };
+    };
+    typography: {
+        fontFamily: {
+            base: string;
+            heading: string;
+            mono: string;
+        };
+        scale: Record<string, {
+            fontSize: number;
+            lineHeight: number;
+        }>;
+        weight: {
+            normal: number;
+            medium: number;
+            semibold: number;
+            bold: number;
+        };
+        letterSpacing: number;
+        headingLetterSpacing: number;
+    };
+    spacing: {
+        unit: number;
+        scale: Record<string, number>;
+    };
+    elevation: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    motion: {
+        duration: {
+            fast: number;
+            normal: number;
+            slow: number;
+        };
+        easing: {
+            default: string;
+            enter: string;
+            exit: string;
+        };
+        spring: {
+            damping: number;
+            stiffness: number;
+            mass: number;
+        };
+        stagger: number;
+    };
+    opacity: {
+        disabled: number;
+        pressed: number;
+        backdrop: number;
+        muted: number;
+    };
+    surface: {
+        card: CSSProperties;
+        input: CSSProperties;
+        inputFocus: CSSProperties;
+        buttonPrimary: CSSProperties;
+        buttonSecondary: CSSProperties;
+        modal: CSSProperties;
+    };
+    identity: {
+        surface: SurfaceType;
+        radiusPattern: RadiusPattern;
+        borderWidth: number;
+        borderStyle: BorderStyle;
+        borderColor: BorderColorSource;
+        elevationStyle: ElevationStyle;
+        elevationColor: 'dark' | 'primary' | 'accent';
+        overrideSurfaceBorders: boolean;
+        overrideInputButtons: boolean;
+        typographyHierarchy: TypographyHierarchy;
+        textDecoration: TextDecoration | TextDecoration[];
+        labelStyle: LabelStyle;
+        headingColor: HeadingColor;
+        depth: number;
+        shadowAngle: number;
+        colorScheme: ColorScheme;
+        colorWeight: ColorWeight;
+        accentApplication: AccentApplication;
+        background: LayerBackground;
+        gradients: GradientConfig;
+        icons: IconIdentity;
+        images: ImageIdentity;
+    };
+    colorWeight: ColorWeightResult;
+    /** Resolve borderRadius with radiusPattern applied */
+    radius: (base: number) => string;
+}
+export declare function useDesignTokens(tokens: Record<string, unknown> | undefined): DesignTokensWeb;
+//# sourceMappingURL=use-design-tokens.d.ts.map

package/dist/primitives/use-design-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-design-tokens.d.ts","sourceRoot":"","sources":["../../src/primitives/use-design-tokens.ts"],"names":[],"mappings":"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"}