@zendir/ui 0.1.0

package/dist/react/core/Toast.js

@@ -0,0 +1,229 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useCallback, useContext, createContext, useEffect } from "react";
+import { safeAccentText } from "../utils/index.js";
+import { useBreakpoint } from "./layout/useBreakpoint.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const ToastContext = createContext(null);
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
+  return ctx.toast;
+}
+function useToastManager() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToastManager must be used within <ToastProvider>");
+  return ctx;
+}
+const ToastItem = memo(function ToastItem2({
+  toast: t,
+  onDismiss
+}) {
+  const { tokens } = useTheme();
+  const [exiting, setExiting] = useState(false);
+  const dismissTimeoutRef = useRef();
+  useEffect(() => {
+    return () => {
+      clearTimeout(dismissTimeoutRef.current);
+    };
+  }, []);
+  const statusColors = {
+    normal: tokens.colors.status.normal,
+    standby: tokens.colors.status.standby,
+    caution: tokens.colors.status.caution,
+    serious: tokens.colors.status.serious,
+    critical: tokens.colors.status.critical,
+    off: tokens.colors.status.off
+  };
+  const color = statusColors[t.status || "off"] || tokens.colors.status.off;
+  const handleDismiss = useCallback(() => {
+    setExiting(true);
+    dismissTimeoutRef.current = setTimeout(() => onDismiss(t.id), 200);
+  }, [t.id, onDismiss]);
+  useEffect(() => {
+    const dur = t.duration ?? 5e3;
+    if (dur <= 0) return;
+    const timer = setTimeout(handleDismiss, dur);
+    return () => clearTimeout(timer);
+  }, [t.duration, handleDismiss]);
+  const statusIcon = (() => {
+    const s = 10;
+    const h = s / 2;
+    const status = t.status || "off";
+    const sharedStyle = { flexShrink: 0, marginTop: "3px" };
+    switch (status) {
+      case "critical":
+        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: sharedStyle, children: /* @__PURE__ */ jsx("polygon", { points: `${h},${s} 0,0 ${s},0`, fill: color }) });
+      case "serious":
+        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: sharedStyle, children: /* @__PURE__ */ jsx("polygon", { points: `${h},0 ${s},${h} ${h},${s} 0,${h}`, fill: color }) });
+      case "caution":
+        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: sharedStyle, children: /* @__PURE__ */ jsx("rect", { width: s, height: s, fill: color }) });
+      case "standby":
+        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: "0 0 12 12", style: sharedStyle, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" }) });
+      case "off":
+        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: "0 0 12 12", style: sharedStyle, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: color }) });
+      default:
+        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: sharedStyle, children: /* @__PURE__ */ jsx("circle", { cx: h, cy: h, r: h, fill: color }) });
+    }
+  })();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      style: {
+        display: "flex",
+        gap: tokens.spacing.sm,
+        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+        backgroundColor: tokens.colors.background.elevated,
+        border: `1px solid ${color}30`,
+        borderLeft: `3px solid ${color}`,
+        borderRadius: tokens.borderRadius.md,
+        boxShadow: `${tokens.shadows.lg}, 0 0 20px ${color}15`,
+        maxWidth: "min(400px, calc(100vw - 32px))",
+        minWidth: "min(280px, calc(100vw - 32px))",
+        fontFamily: tokens.typography.fontFamily.primary,
+        animation: exiting ? `zendir-toast-exit 200ms ${tokens.animation.easing.default} forwards` : `zendir-toast-enter 300ms ${tokens.animation.easing.default}`,
+        transition: tokens.animation.normal
+      },
+      children: [
+        t.icon || statusIcon,
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx("div", { style: {
+            fontSize: tokens.typography.fontSize.sm,
+            fontWeight: tokens.typography.fontWeight.semibold,
+            color: tokens.colors.text.primary,
+            lineHeight: tokens.typography.lineHeight.tight
+          }, children: t.title }),
+          t.message && /* @__PURE__ */ jsx("div", { style: {
+            fontSize: tokens.typography.fontSize.xs,
+            color: tokens.colors.text.secondary,
+            marginTop: "2px",
+            lineHeight: tokens.typography.lineHeight.normal
+          }, children: t.message }),
+          t.action && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: t.action.onClick,
+              style: {
+                marginTop: tokens.spacing.xs,
+                fontSize: tokens.typography.fontSize.xs,
+                fontWeight: tokens.typography.fontWeight.semibold,
+                color: safeAccentText(tokens.colors.accent.primary),
+                background: "none",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                fontFamily: tokens.typography.fontFamily.primary
+              },
+              children: t.action.label
+            }
+          )
+        ] }),
+        t.dismissible !== false && /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Dismiss notification",
+            onClick: handleDismiss,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 44,
+              height: 44,
+              border: "none",
+              background: "none",
+              color: tokens.colors.text.tertiary,
+              cursor: "pointer",
+              borderRadius: tokens.borderRadius.sm,
+              padding: tokens.spacing.xs,
+              flexShrink: 0,
+              transition: tokens.animation.fast
+            },
+            children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+});
+const ToastProvider = memo(function ToastProvider2({
+  position = "top-right",
+  maxVisible = 5,
+  defaultDuration = 5e3,
+  children
+}) {
+  const { tokens } = useTheme();
+  const { isMobile } = useBreakpoint();
+  const [toasts, setToasts] = useState([]);
+  const idCounter = useRef(0);
+  const toast = useCallback((options) => {
+    const id = `toast-${++idCounter.current}-${Date.now()}`;
+    const instance = {
+      ...options,
+      id,
+      createdAt: Date.now(),
+      duration: options.duration ?? defaultDuration
+    };
+    setToasts((prev) => [...prev, instance].slice(-maxVisible * 2));
+    return id;
+  }, [defaultDuration, maxVisible]);
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const dismissAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+  const inset = isMobile ? tokens.spacing.sm : tokens.spacing.md;
+  const positionStyles = {
+    "top-right": { top: inset, right: inset },
+    "top-left": { top: inset, left: inset },
+    "bottom-right": { bottom: inset, right: inset },
+    "bottom-left": { bottom: inset, left: inset },
+    "top-center": { top: inset, left: "50%", transform: "translateX(-50%)" },
+    "bottom-center": { bottom: inset, left: "50%", transform: "translateX(-50%)" }
+  };
+  const isBottom = position.startsWith("bottom");
+  const visibleToasts = toasts.slice(-maxVisible);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast, dismiss, dismissAll }, children: [
+    children,
+    visibleToasts.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-live": visibleToasts.some((t) => t.status === "critical" || t.status === "serious") ? "assertive" : "polite",
+        "aria-atomic": "false",
+        style: {
+          position: "fixed",
+          zIndex: 9999,
+          display: "flex",
+          flexDirection: isBottom ? "column-reverse" : "column",
+          gap: tokens.spacing.sm,
+          pointerEvents: "none",
+          ...positionStyles[position]
+        },
+        children: visibleToasts.map((t) => /* @__PURE__ */ jsx("div", { style: { pointerEvents: "auto" }, children: /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }) }, t.id))
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes zendir-toast-enter {
+          from { opacity: 0; transform: translateX(20px); }
+          to { opacity: 1; transform: translateX(0); }
+        }
+        @keyframes zendir-toast-exit {
+          from { opacity: 1; transform: translateX(0); }
+          to { opacity: 0; transform: translateX(20px); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          @keyframes zendir-toast-enter { from { opacity: 0; } to { opacity: 1; } }
+          @keyframes zendir-toast-exit { from { opacity: 1; } to { opacity: 0; } }
+        }
+      ` })
+  ] });
+});
+export {
+  ToastProvider,
+  useToast,
+  useToastManager
+};
+//# sourceMappingURL=Toast.js.map

package/dist/react/core/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../src/react/core/Toast.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Toast / Notification System\r\n * \r\n * Contextual toast notifications with queue management, auto-dismiss,\r\n * and Astro UX status colors. Essential for operator dashboards surfacing\r\n * connection events, command results, and system alerts.\r\n * \r\n * Astro UX Compliance:\r\n * - 6-level status colors (off, standby, normal, caution, serious, critical)\r\n * - Positioned top-right (operator dashboard convention)\r\n * - Reduced motion support\r\n * - ARIA live region for screen readers\r\n * \r\n * @example\r\n * ```tsx\r\n * // Wrap app in ToastProvider\r\n * <ToastProvider>\r\n *   <App />\r\n * </ToastProvider>\r\n * \r\n * // Use in any component\r\n * const toast = useToast();\r\n * toast({ status: 'normal', title: 'Connected', message: 'MQTT link established' });\r\n * toast({ status: 'caution', title: 'SAFE Mode', message: 'Spacecraft entered SAFE mode', duration: 0 });\r\n * toast({ status: 'critical', title: 'Link Lost', message: 'Downlink signal below threshold' });\r\n * ```\r\n */\r\n\r\nimport React, { memo, createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';\r\nimport { useTheme } from '../theme';\r\nimport { safeAccentText } from '../utils';\r\nimport { useBreakpoint } from './layout/useBreakpoint';\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\nexport type ToastStatus = 'normal' | 'standby' | 'caution' | 'serious' | 'critical' | 'off';\r\nexport type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';\r\n\r\nexport interface ToastOptions {\r\n  /** Status level (determines color) */\r\n  status?: ToastStatus;\r\n  /** Title text (bold) */\r\n  title: string;\r\n  /** Description text */\r\n  message?: string;\r\n  /** Auto-dismiss duration in ms (0 = persistent, default 5000) */\r\n  duration?: number;\r\n  /** Dismissible by user click (default true) */\r\n  dismissible?: boolean;\r\n  /** Icon override */\r\n  icon?: React.ReactNode;\r\n  /** Action button */\r\n  action?: {\r\n    label: string;\r\n    onClick: () => void;\r\n  };\r\n}\r\n\r\ninterface ToastInstance extends ToastOptions {\r\n  id: string;\r\n  createdAt: number;\r\n}\r\n\r\n// ─── Context ─────────────────────────────────────────────────────────────────\r\n\r\ntype ToastFn = (options: ToastOptions) => string;\r\n\r\ninterface ToastContextValue {\r\n  toast: ToastFn;\r\n  dismiss: (id: string) => void;\r\n  dismissAll: () => void;\r\n}\r\n\r\nconst ToastContext = createContext<ToastContextValue | null>(null);\r\n\r\n// ─── Hook ────────────────────────────────────────────────────────────────────\r\n\r\n/**\r\n * Hook to show toast notifications.\r\n * Must be used within a `<ToastProvider>`.\r\n * \r\n * @example\r\n * ```tsx\r\n * const toast = useToast();\r\n * toast({ status: 'normal', title: 'Success', message: 'Command sent' });\r\n * ```\r\n */\r\nexport function useToast(): ToastFn {\r\n  const ctx = useContext(ToastContext);\r\n  if (!ctx) throw new Error('useToast must be used within <ToastProvider>');\r\n  return ctx.toast;\r\n}\r\n\r\n/**\r\n * Hook to access full toast API (toast, dismiss, dismissAll).\r\n */\r\nexport function useToastManager(): ToastContextValue {\r\n  const ctx = useContext(ToastContext);\r\n  if (!ctx) throw new Error('useToastManager must be used within <ToastProvider>');\r\n  return ctx;\r\n}\r\n\r\n// ─── Toast Item ──────────────────────────────────────────────────────────────\r\n\r\nconst ToastItem = memo(function ToastItem({\r\n  toast: t,\r\n  onDismiss,\r\n}: {\r\n  toast: ToastInstance;\r\n  onDismiss: (id: string) => void;\r\n}): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const [exiting, setExiting] = useState(false);\r\n  const dismissTimeoutRef = useRef<ReturnType<typeof setTimeout>>();\r\n  \r\n  // Cleanup dismiss timeout on unmount\r\n  useEffect(() => {\r\n    return () => { clearTimeout(dismissTimeoutRef.current); };\r\n  }, []);\r\n  \r\n  const statusColors: Record<string, string> = {\r\n    normal: tokens.colors.status.normal,\r\n    standby: tokens.colors.status.standby,\r\n    caution: tokens.colors.status.caution,\r\n    serious: tokens.colors.status.serious,\r\n    critical: tokens.colors.status.critical,\r\n    off: tokens.colors.status.off,\r\n  };\r\n  \r\n  const color = statusColors[t.status || 'off'] || tokens.colors.status.off;\r\n  \r\n  const handleDismiss = useCallback(() => {\r\n    setExiting(true);\r\n    dismissTimeoutRef.current = setTimeout(() => onDismiss(t.id), 200);\r\n  }, [t.id, onDismiss]);\r\n  \r\n  // Auto-dismiss\r\n  useEffect(() => {\r\n    const dur = t.duration ?? 5000;\r\n    if (dur <= 0) return;\r\n    const timer = setTimeout(handleDismiss, dur);\r\n    return () => clearTimeout(timer);\r\n  }, [t.duration, handleDismiss]);\r\n  \r\n  // Status icon — Astro UX dual-coded shapes\r\n  const statusIcon = (() => {\r\n    const s = 10;\r\n    const h = s / 2;\r\n    const status = t.status || 'off';\r\n    const sharedStyle: React.CSSProperties = { flexShrink: 0, marginTop: '3px' };\r\n    switch (status) {\r\n      case 'critical':\r\n        return (\r\n          <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={sharedStyle}>\r\n            <polygon points={`${h},${s} 0,0 ${s},0`} fill={color} />\r\n          </svg>\r\n        );\r\n      case 'serious':\r\n        return (\r\n          <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={sharedStyle}>\r\n            <polygon points={`${h},0 ${s},${h} ${h},${s} 0,${h}`} fill={color} />\r\n          </svg>\r\n        );\r\n      case 'caution':\r\n        return (\r\n          <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={sharedStyle}>\r\n            <rect width={s} height={s} fill={color} />\r\n          </svg>\r\n        );\r\n      case 'standby':\r\n        return (\r\n          <svg width={s} height={s} viewBox=\"0 0 12 12\" style={sharedStyle}>\r\n            <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" />\r\n          </svg>\r\n        );\r\n      case 'off':\r\n        return (\r\n          <svg width={s} height={s} viewBox=\"0 0 12 12\" style={sharedStyle}>\r\n            <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\r\n          </svg>\r\n        );\r\n      default: // normal\r\n        return (\r\n          <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={sharedStyle}>\r\n            <circle cx={h} cy={h} r={h} fill={color} />\r\n          </svg>\r\n        );\r\n    }\r\n  })();\r\n  \r\n  return (\r\n    <div\r\n      role=\"alert\"\r\n      style={{\r\n        display: 'flex',\r\n        gap: tokens.spacing.sm,\r\n        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\r\n        backgroundColor: tokens.colors.background.elevated,\r\n        border: `1px solid ${color}30`,\r\n        borderLeft: `3px solid ${color}`,\r\n        borderRadius: tokens.borderRadius.md,\r\n        boxShadow: `${tokens.shadows.lg}, 0 0 20px ${color}15`,\r\n        maxWidth: 'min(400px, calc(100vw - 32px))',\r\n        minWidth: 'min(280px, calc(100vw - 32px))',\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        animation: exiting\r\n          ? `zendir-toast-exit 200ms ${tokens.animation.easing.default} forwards`\r\n          : `zendir-toast-enter 300ms ${tokens.animation.easing.default}`,\r\n        transition: tokens.animation.normal,\r\n      }}\r\n    >\r\n      {t.icon || statusIcon}\r\n      \r\n      <div style={{ flex: 1, minWidth: 0 }}>\r\n        <div style={{\r\n          fontSize: tokens.typography.fontSize.sm,\r\n          fontWeight: tokens.typography.fontWeight.semibold,\r\n          color: tokens.colors.text.primary,\r\n          lineHeight: tokens.typography.lineHeight.tight,\r\n        }}>\r\n          {t.title}\r\n        </div>\r\n        {t.message && (\r\n          <div style={{\r\n            fontSize: tokens.typography.fontSize.xs,\r\n            color: tokens.colors.text.secondary,\r\n            marginTop: '2px',\r\n            lineHeight: tokens.typography.lineHeight.normal,\r\n          }}>\r\n            {t.message}\r\n          </div>\r\n        )}\r\n        {t.action && (\r\n          <button\r\n            onClick={t.action.onClick}\r\n            style={{\r\n              marginTop: tokens.spacing.xs,\r\n              fontSize: tokens.typography.fontSize.xs,\r\n              fontWeight: tokens.typography.fontWeight.semibold,\r\n              color: safeAccentText(tokens.colors.accent.primary),\r\n              background: 'none',\r\n              border: 'none',\r\n              padding: 0,\r\n              cursor: 'pointer',\r\n              fontFamily: tokens.typography.fontFamily.primary,\r\n            }}\r\n          >\r\n            {t.action.label}\r\n          </button>\r\n        )}\r\n      </div>\r\n      \r\n      {(t.dismissible !== false) && (\r\n        <button\r\n          aria-label=\"Dismiss notification\"\r\n          onClick={handleDismiss}\r\n          style={{\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            width: 44,\r\n            height: 44,\r\n            border: 'none',\r\n            background: 'none',\r\n            color: tokens.colors.text.tertiary,\r\n            cursor: 'pointer',\r\n            borderRadius: tokens.borderRadius.sm,\r\n            padding: tokens.spacing.xs,\r\n            flexShrink: 0,\r\n            transition: tokens.animation.fast,\r\n          }}\r\n        >\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n          </svg>\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Provider ────────────────────────────────────────────────────────────────\r\n\r\nexport interface ToastProviderProps {\r\n  /** Toast position (default: top-right) */\r\n  position?: ToastPosition;\r\n  /** Maximum visible toasts (default: 5) */\r\n  maxVisible?: number;\r\n  /** Default duration in ms (default: 5000) */\r\n  defaultDuration?: number;\r\n  /** Children */\r\n  children: React.ReactNode;\r\n}\r\n\r\nexport const ToastProvider = memo(function ToastProvider({\r\n  position = 'top-right',\r\n  maxVisible = 5,\r\n  defaultDuration = 5000,\r\n  children,\r\n}: ToastProviderProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { isMobile } = useBreakpoint();\r\n  const [toasts, setToasts] = useState<ToastInstance[]>([]);\r\n  const idCounter = useRef(0);\r\n  \r\n  const toast = useCallback((options: ToastOptions): string => {\r\n    const id = `toast-${++idCounter.current}-${Date.now()}`;\r\n    const instance: ToastInstance = {\r\n      ...options,\r\n      id,\r\n      createdAt: Date.now(),\r\n      duration: options.duration ?? defaultDuration,\r\n    };\r\n    setToasts(prev => [...prev, instance].slice(-maxVisible * 2)); // Keep buffer\r\n    return id;\r\n  }, [defaultDuration, maxVisible]);\r\n  \r\n  const dismiss = useCallback((id: string) => {\r\n    setToasts(prev => prev.filter(t => t.id !== id));\r\n  }, []);\r\n  \r\n  const dismissAll = useCallback(() => {\r\n    setToasts([]);\r\n  }, []);\r\n  \r\n  // Position styles\r\n  const inset = isMobile ? tokens.spacing.sm : tokens.spacing.md;\r\n  const positionStyles: Record<ToastPosition, React.CSSProperties> = {\r\n    'top-right': { top: inset, right: inset },\r\n    'top-left': { top: inset, left: inset },\r\n    'bottom-right': { bottom: inset, right: inset },\r\n    'bottom-left': { bottom: inset, left: inset },\r\n    'top-center': { top: inset, left: '50%', transform: 'translateX(-50%)' },\r\n    'bottom-center': { bottom: inset, left: '50%', transform: 'translateX(-50%)' },\r\n  };\r\n  \r\n  const isBottom = position.startsWith('bottom');\r\n  const visibleToasts = toasts.slice(-maxVisible);\r\n  \r\n  return (\r\n    <ToastContext.Provider value={{ toast, dismiss, dismissAll }}>\r\n      {children}\r\n      \r\n      {/* Toast container */}\r\n      {visibleToasts.length > 0 && (\r\n        <div\r\n          aria-live={visibleToasts.some(t => t.status === 'critical' || t.status === 'serious') ? 'assertive' : 'polite'}\r\n          aria-atomic=\"false\"\r\n          style={{\r\n            position: 'fixed',\r\n            zIndex: 9999,\r\n            display: 'flex',\r\n            flexDirection: isBottom ? 'column-reverse' : 'column',\r\n            gap: tokens.spacing.sm,\r\n            pointerEvents: 'none',\r\n            ...positionStyles[position],\r\n          }}\r\n        >\r\n          {visibleToasts.map(t => (\r\n            <div key={t.id} style={{ pointerEvents: 'auto' }}>\r\n              <ToastItem toast={t} onDismiss={dismiss} />\r\n            </div>\r\n          ))}\r\n        </div>\r\n      )}\r\n      \r\n      <style>{`\r\n        @keyframes zendir-toast-enter {\r\n          from { opacity: 0; transform: translateX(20px); }\r\n          to { opacity: 1; transform: translateX(0); }\r\n        }\r\n        @keyframes zendir-toast-exit {\r\n          from { opacity: 1; transform: translateX(0); }\r\n          to { opacity: 0; transform: translateX(20px); }\r\n        }\r\n        @media (prefers-reduced-motion: reduce) {\r\n          @keyframes zendir-toast-enter { from { opacity: 0; } to { opacity: 1; } }\r\n          @keyframes zendir-toast-exit { from { opacity: 1; } to { opacity: 0; } }\r\n        }\r\n      `}</style>\r\n    </ToastContext.Provider>\r\n  );\r\n});\r\n\r\nexport default ToastProvider;\r\n"],"names":["ToastItem","ToastProvider"],"mappings":"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"}

package/dist/react/core/Toggle.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+
+export interface ToggleProps {
+    /** Checked state */
+    checked?: boolean;
+    /** Change handler */
+    onChange?: (checked: boolean) => void;
+    /** Label text */
+    label?: string;
+    /** Label position */
+    labelPosition?: 'left' | 'right';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Size variant */
+    size?: 'small' | 'medium';
+    /** Custom className */
+    className?: string;
+    /** Name attribute */
+    name?: string;
+}
+export declare const Toggle: React.MemoExoticComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>>;
+export default Toggle;

package/dist/react/core/Toggle.js

@@ -0,0 +1,151 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useId } from "react";
+import { classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const Toggle = memo(forwardRef(function Toggle2({
+  checked = false,
+  onChange,
+  label,
+  labelPosition = "right",
+  disabled = false,
+  size = "medium",
+  className = "",
+  name
+}, ref) {
+  const { tokens, theme } = useTheme();
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const id = useId();
+  const sizeConfig = {
+    small: { width: 34, height: 18, knobSize: 14 },
+    medium: { width: 40, height: 22, knobSize: 16 }
+  };
+  const config = sizeConfig[size];
+  const touchPadV = Math.max(0, (44 - config.height) / 2);
+  const touchPadH = Math.max(0, (44 - config.width) / 2);
+  const handleClick = () => {
+    if (!disabled) {
+      onChange == null ? void 0 : onChange(!checked);
+    }
+  };
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const transparentDefault = tokens.colors.interactive.transparentDefault;
+  const transparentHover = tokens.colors.interactive.transparentHover;
+  const bgColor = checked ? tokens.colors.accent.primary : isTransparentTheme && transparentDefault && transparentHover ? hovered && !disabled ? transparentHover : transparentDefault : hovered && !disabled ? `${tokens.colors.border.muted}` : tokens.colors.border.muted;
+  const toggle = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "switch",
+      "aria-checked": checked,
+      "aria-disabled": disabled,
+      "aria-label": !label ? name ?? "Toggle" : void 0,
+      tabIndex: disabled ? -1 : 0,
+      onClick: handleClick,
+      onKeyDown: (e) => (e.key === " " || e.key === "Enter") && (e.preventDefault(), handleClick()),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      style: {
+        padding: `${touchPadV}px ${touchPadH}px`,
+        cursor: disabled ? "not-allowed" : "pointer",
+        flexShrink: 0,
+        outline: "none",
+        display: "inline-flex",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: config.width,
+              height: config.height,
+              backgroundColor: bgColor,
+              ...isTransparentTheme && !checked && { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" },
+              borderRadius: config.height / 2,
+              opacity: disabled ? 0.5 : 1,
+              position: "relative",
+              transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,
+              flexShrink: 0,
+              boxShadow: checked ? `0 0 10px ${tokens.colors.accent.primary}25, inset 0 1px 1px rgba(255,255,255,0.08)` : focused ? `0 0 0 2px ${tokens.colors.accent.primary}25` : "inset 0 1px 2px rgba(0,0,0,0.15)"
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: (config.height - config.knobSize) / 2,
+                  left: checked ? config.width - config.knobSize - 3 : 3,
+                  width: config.knobSize,
+                  height: config.knobSize,
+                  backgroundColor: "#ffffff",
+                  borderRadius: "50%",
+                  boxShadow: checked ? "0 1px 4px rgba(0,0,0,0.25)" : "0 1px 3px rgba(0,0,0,0.2)",
+                  transition: tokens.animation.spring,
+                  transform: hovered && !disabled ? "scale(1.05)" : "scale(1)"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            id,
+            name,
+            checked,
+            disabled,
+            onChange: () => {
+            },
+            tabIndex: -1,
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              opacity: 0,
+              width: 0,
+              height: 0,
+              pointerEvents: "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+  if (!label) {
+    return /* @__PURE__ */ jsx("div", { className: classNames("zendir-toggle", className), children: toggle });
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: id,
+      className: classNames("zendir-toggle", className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: tokens.spacing.sm,
+        cursor: disabled ? "not-allowed" : "pointer",
+        flexDirection: labelPosition === "left" ? "row-reverse" : "row"
+      },
+      children: [
+        toggle,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: tokens.typography.fontSize.sm,
+              color: disabled ? tokens.colors.text.muted : tokens.colors.text.primary
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}));
+export {
+  Toggle
+};
+//# sourceMappingURL=Toggle.js.map

package/dist/react/core/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../../src/react/core/Toggle.tsx"],"sourcesContent":["/**\n * @zendir/ui - Toggle/Switch Component\n * \n * Toggle switch following Astro UX Design System with Zendir purple accents.\n * \n * Astro UX Compliance:\n * - Binary on/off control\n * - Clear visual states\n * - Accessible keyboard support\n * \n * Zendir Enhancements:\n * - Purple accent when active\n * - Subtle glow effect\n * - Smooth spring animation\n * \n * @example\n * ```tsx\n * <Toggle checked={enabled} onChange={setEnabled} label=\"Enable telemetry\" />\n * ```\n */\n\nimport React, { memo, forwardRef, useId, useState } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames } from '../utils';\n\nexport interface ToggleProps {\n  /** Checked state */\n  checked?: boolean;\n  /** Change handler */\n  onChange?: (checked: boolean) => void;\n  /** Label text */\n  label?: string;\n  /** Label position */\n  labelPosition?: 'left' | 'right';\n  /** Disabled state */\n  disabled?: boolean;\n  /** Size variant */\n  size?: 'small' | 'medium';\n  /** Custom className */\n  className?: string;\n  /** Name attribute */\n  name?: string;\n}\n\nexport const Toggle = memo(forwardRef<HTMLInputElement, ToggleProps>(function Toggle(\n  {\n    checked = false,\n    onChange,\n    label,\n    labelPosition = 'right',\n    disabled = false,\n    size = 'medium',\n    className = '',\n    name,\n  },\n  ref\n): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const [focused, setFocused] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const id = useId();\n  \n  const sizeConfig = {\n    small: { width: 34, height: 18, knobSize: 14 },\n    medium: { width: 40, height: 22, knobSize: 16 },\n  };\n  const config = sizeConfig[size];\n  // Touch target: 44px minimum via padding around the visual toggle\n  const touchPadV = Math.max(0, (44 - config.height) / 2);\n  const touchPadH = Math.max(0, (44 - config.width) / 2);\n  \n  const handleClick = () => {\n    if (!disabled) {\n      onChange?.(!checked);\n    }\n  };\n  \n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const transparentDefault = tokens.colors.interactive.transparentDefault;\n  const transparentHover = tokens.colors.interactive.transparentHover;\n  const bgColor = checked\n    ? tokens.colors.accent.primary\n    : isTransparentTheme && transparentDefault && transparentHover\n      ? (hovered && !disabled ? transparentHover : transparentDefault)\n      : hovered && !disabled\n        ? `${tokens.colors.border.muted}`\n        : tokens.colors.border.muted;\n  \n  const toggle = (\n    <div\n      role=\"switch\"\n      aria-checked={checked}\n      aria-disabled={disabled}\n      aria-label={!label ? (name ?? 'Toggle') : undefined}\n      tabIndex={disabled ? -1 : 0}\n      onClick={handleClick}\n      onKeyDown={(e) => (e.key === ' ' || e.key === 'Enter') && (e.preventDefault(), handleClick())}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n      style={{\n        padding: `${touchPadV}px ${touchPadH}px`,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        flexShrink: 0,\n        outline: 'none',\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n    >\n      <div\n        style={{\n          width: config.width,\n          height: config.height,\n          backgroundColor: bgColor,\n          ...(isTransparentTheme && !checked && { backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)' }),\n          borderRadius: config.height / 2,\n          opacity: disabled ? 0.5 : 1,\n          position: 'relative',\n          transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,\n          flexShrink: 0,\n          boxShadow: checked \n            ? `0 0 10px ${tokens.colors.accent.primary}25, inset 0 1px 1px rgba(255,255,255,0.08)` \n            : focused \n            ? `0 0 0 2px ${tokens.colors.accent.primary}25` \n            : 'inset 0 1px 2px rgba(0,0,0,0.15)',\n        }}\n      >\n        <div\n          style={{\n            position: 'absolute',\n            top: (config.height - config.knobSize) / 2,\n            left: checked ? config.width - config.knobSize - 3 : 3,\n            width: config.knobSize,\n            height: config.knobSize,\n            backgroundColor: '#ffffff',\n            borderRadius: '50%',\n            boxShadow: checked \n              ? '0 1px 4px rgba(0,0,0,0.25)' \n              : '0 1px 3px rgba(0,0,0,0.2)',\n            transition: tokens.animation.spring,\n            transform: hovered && !disabled ? 'scale(1.05)' : 'scale(1)',\n          }}\n        />\n      </div>\n      <input\n        ref={ref}\n        type=\"checkbox\"\n        id={id}\n        name={name}\n        checked={checked}\n        disabled={disabled}\n        onChange={() => {}}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        style={{\n          position: 'absolute',\n          opacity: 0,\n          width: 0,\n          height: 0,\n          pointerEvents: 'none',\n        }}\n      />\n    </div>\n  );\n  \n  if (!label) {\n    return (\n      <div className={classNames('zendir-toggle', className)}>\n        {toggle}\n      </div>\n    );\n  }\n  \n  return (\n    <label\n      htmlFor={id}\n      className={classNames('zendir-toggle', className)}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: tokens.spacing.sm,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        flexDirection: labelPosition === 'left' ? 'row-reverse' : 'row',\n      }}\n    >\n      {toggle}\n      <span\n        style={{\n          fontSize: tokens.typography.fontSize.sm,\n          color: disabled ? tokens.colors.text.muted : tokens.colors.text.primary,\n        }}\n      >\n        {label}\n      </span>\n    </label>\n  );\n}));\n\nexport default Toggle;\n"],"names":["Toggle"],"mappings":"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"}

package/dist/react/core/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipProps {
+    /** Tooltip content */
+    content: React.ReactNode;
+    /** Placement */
+    placement?: TooltipPlacement;
+    /** Delay before showing (ms) */
+    delay?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Children element to trigger tooltip */
+    children: React.ReactElement;
+    /** Custom className */
+    className?: string;
+}
+export declare const Tooltip: React.NamedExoticComponent<TooltipProps>;
+export default Tooltip;