@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/Theme/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+export type ThemeMode = 'light' | 'dark' | 'system';
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** Default theme mode for uncontrolled usage */
+    defaultMode?: ThemeMode;
+    /** Alias for defaultMode (more intuitive naming) */
+    defaultTheme?: ThemeMode;
+    /** Controlled theme mode */
+    mode?: ThemeMode;
+    /** Callback when mode changes */
+    onModeChange?: (mode: ThemeMode) => void;
+    /** localStorage key for persistence (default: 'fui-theme') */
+    storageKey?: string;
+    /** How to apply theme to DOM */
+    attribute?: 'data-theme' | 'class';
+}
+export interface UseThemeReturn {
+    /** Current theme mode setting */
+    mode: ThemeMode;
+    /** Set the theme mode */
+    setMode: (mode: ThemeMode) => void;
+    /** Resolved mode (never 'system', always 'light' or 'dark') */
+    resolvedMode: 'light' | 'dark';
+    /** System preference detected from prefers-color-scheme */
+    systemPreference: 'light' | 'dark';
+    /** Toggle between light and dark (skips system) */
+    toggleMode: () => void;
+}
+export interface ThemeToggleProps {
+    /** Size of the toggle button */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to include system mode option (default: false) */
+    showSystem?: boolean;
+    /** Controlled value for custom usage (bypasses theme context) */
+    value?: 'light' | 'dark';
+    /** Callback when value changes (for controlled usage) */
+    onValueChange?: (value: 'light' | 'dark') => void;
+    /** Accessible label for the group */
+    'aria-label'?: string;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Hook to access theme context
+ */
+declare function useTheme(): UseThemeReturn;
+/**
+ * ThemeProvider - Provides theme context to children
+ * SSR-safe: initializes from localStorage in useEffect
+ */
+declare function ThemeProvider({ children, defaultMode, defaultTheme, mode: controlledMode, onModeChange, storageKey, attribute, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ThemeToggle - Fragmented button group to toggle between light and dark themes
+ *
+ * Can be used in two modes:
+ * 1. Uncontrolled (default): Uses ThemeProvider context to get/set theme
+ * 2. Controlled: Pass `value` and `onValueChange` props for custom behavior
+ */
+declare function ThemeToggle({ size, showSystem, value: controlledValue, onValueChange, 'aria-label': ariaLabel, className, }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare const Theme: typeof ThemeProvider & {
+    Root: typeof ThemeProvider;
+    Provider: typeof ThemeProvider;
+    Toggle: typeof ThemeToggle;
+    useTheme: typeof useTheme;
+};
+export { ThemeProvider, ThemeToggle, useTheme };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Theme/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gDAAgD;IAChD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oDAAoD;IACpD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,SAAS,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,IAAI,EAAE,SAAS,CAAC;IAChB,yBAAyB;IACzB,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,+DAA+D;IAC/D,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,2DAA2D;IAC3D,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC;IACnC,mDAAmD;IACnD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,yDAAyD;IACzD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAClD,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4CD;;GAEG;AACH,iBAAS,QAAQ,IAAI,cAAc,CAelC;AAuDD;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,UAAwB,EACxB,SAAwB,GACzB,EAAE,kBAAkB,2CA4EpB;AAED;;;;;;GAMG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAW,EACX,UAAkB,EAClB,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,YAAY,EAAE,SAAS,EACvB,SAAS,GACV,EAAE,gBAAgB,2CAmElB;AAMD,eAAO,MAAM,KAAK;;;;;CAKhB,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Theme/index.js

@@ -0,0 +1,220 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./ThemeToggle.module.scss.js";
+const ThemeContext = React.createContext(null);
+function useSystemPreference() {
+  const [preference, setPreference] = React.useState("light");
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setPreference(mq.matches ? "dark" : "light");
+    const handler = (e) => {
+      setPreference(e.matches ? "dark" : "light");
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return preference;
+}
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    return {
+      mode: "system",
+      setMode: () => {
+      },
+      resolvedMode: "light",
+      systemPreference: "light",
+      toggleMode: () => {
+      }
+    };
+  }
+  return context;
+}
+function SunIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z" })
+    }
+  );
+}
+function MoonIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z" })
+    }
+  );
+}
+function MonitorIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Zm-48,48a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,224Z" })
+    }
+  );
+}
+function ThemeProvider({
+  children,
+  defaultMode,
+  defaultTheme,
+  mode: controlledMode,
+  onModeChange,
+  storageKey = "fui-theme",
+  attribute = "data-theme"
+}) {
+  const systemPreference = useSystemPreference();
+  const resolvedDefault = defaultMode ?? defaultTheme ?? "system";
+  const [internalMode, setInternalMode] = React.useState(resolvedDefault);
+  const [mounted, setMounted] = React.useState(false);
+  const isControlled = controlledMode !== void 0;
+  const mode = isControlled ? controlledMode : internalMode;
+  const resolvedMode = mode === "system" ? systemPreference : mode;
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!isControlled && storageKey) {
+      const stored = localStorage.getItem(storageKey);
+      if (stored && ["light", "dark", "system"].includes(stored)) {
+        setInternalMode(stored);
+      }
+    }
+    setMounted(true);
+  }, [isControlled, storageKey]);
+  React.useEffect(() => {
+    if (typeof document === "undefined" || !mounted) return;
+    const root = document.documentElement;
+    if (attribute === "data-theme") {
+      root.setAttribute("data-theme", resolvedMode);
+    } else if (attribute === "class") {
+      root.classList.remove("light", "dark");
+      root.classList.add(resolvedMode);
+    }
+  }, [resolvedMode, attribute, mounted]);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !storageKey || !mounted) return;
+    localStorage.setItem(storageKey, mode);
+  }, [mode, storageKey, mounted]);
+  const setMode = React.useCallback((newMode) => {
+    if (!isControlled) {
+      setInternalMode(newMode);
+    }
+    onModeChange == null ? void 0 : onModeChange(newMode);
+  }, [isControlled, onModeChange]);
+  const toggleMode = React.useCallback(() => {
+    const next = resolvedMode === "light" ? "dark" : "light";
+    setMode(next);
+  }, [resolvedMode, setMode]);
+  const contextValue = {
+    mode,
+    setMode,
+    resolvedMode,
+    systemPreference,
+    toggleMode
+  };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
+}
+function ThemeToggle({
+  size = "md",
+  showSystem = false,
+  value: controlledValue,
+  onValueChange,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const { mode: contextMode, setMode: setContextMode } = useTheme();
+  const isControlled = controlledValue !== void 0;
+  const currentMode = isControlled ? controlledValue : contextMode;
+  const handleModeChange = (newMode) => {
+    if (isControlled) {
+      onValueChange == null ? void 0 : onValueChange(newMode);
+    } else {
+      setContextMode(newMode);
+    }
+  };
+  const groupClasses = [
+    styles.toggleGroup,
+    styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
+    className
+  ].filter(Boolean).join(" ");
+  const getButtonClasses = (buttonMode) => {
+    return [
+      styles.toggleButton,
+      currentMode === buttonMode && styles.toggleButtonActive
+    ].filter(Boolean).join(" ");
+  };
+  const label = ariaLabel || "Theme toggle";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: groupClasses,
+      role: "group",
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getButtonClasses("light"),
+            onClick: () => handleModeChange("light"),
+            "aria-pressed": currentMode === "light",
+            "aria-label": "Light mode",
+            children: /* @__PURE__ */ jsx(SunIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getButtonClasses("dark"),
+            onClick: () => handleModeChange("dark"),
+            "aria-pressed": currentMode === "dark",
+            "aria-label": "Dark mode",
+            children: /* @__PURE__ */ jsx(MoonIcon, {})
+          }
+        ),
+        showSystem && !isControlled && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getButtonClasses("system"),
+            onClick: () => setContextMode("system"),
+            "aria-pressed": contextMode === "system",
+            "aria-label": "System preference",
+            children: /* @__PURE__ */ jsx(MonitorIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+Object.assign(ThemeProvider, {
+  Root: ThemeProvider,
+  Provider: ThemeProvider,
+  Toggle: ThemeToggle,
+  useTheme
+});
+export {
+  ThemeProvider,
+  ThemeToggle,
+  useTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Theme/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './ThemeToggle.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type ThemeMode = 'light' | 'dark' | 'system';\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode;\n  /** Default theme mode for uncontrolled usage */\n  defaultMode?: ThemeMode;\n  /** Alias for defaultMode (more intuitive naming) */\n  defaultTheme?: ThemeMode;\n  /** Controlled theme mode */\n  mode?: ThemeMode;\n  /** Callback when mode changes */\n  onModeChange?: (mode: ThemeMode) => void;\n  /** localStorage key for persistence (default: 'fui-theme') */\n  storageKey?: string;\n  /** How to apply theme to DOM */\n  attribute?: 'data-theme' | 'class';\n}\n\nexport interface UseThemeReturn {\n  /** Current theme mode setting */\n  mode: ThemeMode;\n  /** Set the theme mode */\n  setMode: (mode: ThemeMode) => void;\n  /** Resolved mode (never 'system', always 'light' or 'dark') */\n  resolvedMode: 'light' | 'dark';\n  /** System preference detected from prefers-color-scheme */\n  systemPreference: 'light' | 'dark';\n  /** Toggle between light and dark (skips system) */\n  toggleMode: () => void;\n}\n\nexport interface ThemeToggleProps {\n  /** Size of the toggle button */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether to include system mode option (default: false) */\n  showSystem?: boolean;\n  /** Controlled value for custom usage (bypasses theme context) */\n  value?: 'light' | 'dark';\n  /** Callback when value changes (for controlled usage) */\n  onValueChange?: (value: 'light' | 'dark') => void;\n  /** Accessible label for the group */\n  'aria-label'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface ThemeContextValue {\n  mode: ThemeMode;\n  setMode: (mode: ThemeMode) => void;\n  resolvedMode: 'light' | 'dark';\n  systemPreference: 'light' | 'dark';\n  toggleMode: () => void;\n}\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\n// ============================================\n// Hooks\n// ============================================\n\n/**\n * Hook to detect system color scheme preference\n */\nfunction useSystemPreference(): 'light' | 'dark' {\n  const [preference, setPreference] = React.useState<'light' | 'dark'>('light');\n\n  React.useEffect(() => {\n    // Check if window is available (SSR safety)\n    if (typeof window === 'undefined') return;\n\n    const mq = window.matchMedia('(prefers-color-scheme: dark)');\n    setPreference(mq.matches ? 'dark' : 'light');\n\n    const handler = (e: MediaQueryListEvent) => {\n      setPreference(e.matches ? 'dark' : 'light');\n    };\n\n    mq.addEventListener('change', handler);\n    return () => mq.removeEventListener('change', handler);\n  }, []);\n\n  return preference;\n}\n\n/**\n * Hook to access theme context\n */\nfunction useTheme(): UseThemeReturn {\n  const context = React.useContext(ThemeContext);\n\n  if (!context) {\n    // Return safe defaults when used outside provider\n    return {\n      mode: 'system',\n      setMode: () => {},\n      resolvedMode: 'light',\n      systemPreference: 'light',\n      toggleMode: () => {},\n    };\n  }\n\n  return context;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction SunIcon({ size = 20 }: { size?: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 256 256\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z\" />\n    </svg>\n  );\n}\n\nfunction MoonIcon({ size = 20 }: { size?: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 256 256\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z\" />\n    </svg>\n  );\n}\n\nfunction MonitorIcon({ size = 20 }: { size?: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 256 256\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Zm-48,48a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,224Z\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\n/**\n * ThemeProvider - Provides theme context to children\n * SSR-safe: initializes from localStorage in useEffect\n */\nfunction ThemeProvider({\n  children,\n  defaultMode,\n  defaultTheme,\n  mode: controlledMode,\n  onModeChange,\n  storageKey = 'fui-theme',\n  attribute = 'data-theme',\n}: ThemeProviderProps) {\n  const systemPreference = useSystemPreference();\n\n  // Resolve default: defaultMode takes precedence, then defaultTheme, then 'system'\n  const resolvedDefault = defaultMode ?? defaultTheme ?? 'system';\n\n  // Initialize with resolvedDefault, then hydrate from localStorage in useEffect\n  const [internalMode, setInternalMode] = React.useState<ThemeMode>(resolvedDefault);\n  const [mounted, setMounted] = React.useState(false);\n\n  // Determine if controlled\n  const isControlled = controlledMode !== undefined;\n  const mode = isControlled ? controlledMode : internalMode;\n\n  // Calculate resolved mode\n  const resolvedMode: 'light' | 'dark' = mode === 'system' ? systemPreference : mode;\n\n  // Hydrate from localStorage on mount (SSR-safe)\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    if (!isControlled && storageKey) {\n      const stored = localStorage.getItem(storageKey) as ThemeMode | null;\n      if (stored && ['light', 'dark', 'system'].includes(stored)) {\n        setInternalMode(stored);\n      }\n    }\n    setMounted(true);\n  }, [isControlled, storageKey]);\n\n  // Apply theme to DOM — skip until mounted so we don't overwrite\n  // the inline script that prevents flash on initial page load\n  React.useEffect(() => {\n    if (typeof document === 'undefined' || !mounted) return;\n\n    const root = document.documentElement;\n\n    if (attribute === 'data-theme') {\n      root.setAttribute('data-theme', resolvedMode);\n    } else if (attribute === 'class') {\n      root.classList.remove('light', 'dark');\n      root.classList.add(resolvedMode);\n    }\n  }, [resolvedMode, attribute, mounted]);\n\n  // Persist to localStorage when mode changes\n  React.useEffect(() => {\n    if (typeof window === 'undefined' || !storageKey || !mounted) return;\n    localStorage.setItem(storageKey, mode);\n  }, [mode, storageKey, mounted]);\n\n  const setMode = React.useCallback((newMode: ThemeMode) => {\n    if (!isControlled) {\n      setInternalMode(newMode);\n    }\n    onModeChange?.(newMode);\n  }, [isControlled, onModeChange]);\n\n  const toggleMode = React.useCallback(() => {\n    const next = resolvedMode === 'light' ? 'dark' : 'light';\n    setMode(next);\n  }, [resolvedMode, setMode]);\n\n  const contextValue: ThemeContextValue = {\n    mode,\n    setMode,\n    resolvedMode,\n    systemPreference,\n    toggleMode,\n  };\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n/**\n * ThemeToggle - Fragmented button group to toggle between light and dark themes\n *\n * Can be used in two modes:\n * 1. Uncontrolled (default): Uses ThemeProvider context to get/set theme\n * 2. Controlled: Pass `value` and `onValueChange` props for custom behavior\n */\nfunction ThemeToggle({\n  size = 'md',\n  showSystem = false,\n  value: controlledValue,\n  onValueChange,\n  'aria-label': ariaLabel,\n  className,\n}: ThemeToggleProps) {\n  const { mode: contextMode, setMode: setContextMode } = useTheme();\n\n  // Use controlled value if provided, otherwise use context\n  const isControlled = controlledValue !== undefined;\n  const currentMode = isControlled ? controlledValue : contextMode;\n\n  const handleModeChange = (newMode: 'light' | 'dark') => {\n    if (isControlled) {\n      onValueChange?.(newMode);\n    } else {\n      setContextMode(newMode);\n    }\n  };\n\n  const groupClasses = [\n    styles.toggleGroup,\n    styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  const getButtonClasses = (buttonMode: ThemeMode) => {\n    return [\n      styles.toggleButton,\n      currentMode === buttonMode && styles.toggleButtonActive,\n    ].filter(Boolean).join(' ');\n  };\n\n  const label = ariaLabel || 'Theme toggle';\n\n  return (\n    <div\n      className={groupClasses}\n      role=\"group\"\n      aria-label={label}\n    >\n      <button\n        type=\"button\"\n        className={getButtonClasses('light')}\n        onClick={() => handleModeChange('light')}\n        aria-pressed={currentMode === 'light'}\n        aria-label=\"Light mode\"\n      >\n        <SunIcon />\n      </button>\n      <button\n        type=\"button\"\n        className={getButtonClasses('dark')}\n        onClick={() => handleModeChange('dark')}\n        aria-pressed={currentMode === 'dark'}\n        aria-label=\"Dark mode\"\n      >\n        <MoonIcon />\n      </button>\n      {showSystem && !isControlled && (\n        <button\n          type=\"button\"\n          className={getButtonClasses('system')}\n          onClick={() => setContextMode('system')}\n          aria-pressed={contextMode === 'system'}\n          aria-label=\"System preference\"\n        >\n          <MonitorIcon />\n        </button>\n      )}\n    </div>\n  );\n}\n\n// ============================================\n// Exports\n// ============================================\n\nexport const Theme = Object.assign(ThemeProvider, {\n  Root: ThemeProvider,\n  Provider: ThemeProvider,\n  Toggle: ThemeToggle,\n  useTheme,\n});\n\nexport { ThemeProvider, ThemeToggle, useTheme };\n"],"names":[],"mappings":"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"}

package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const thinkingIndicator = "_thinkingIndicator_12dch_1";
+const main = "_main_12dch_8";
+const label = "_label_12dch_14";
+const elapsed = "_elapsed_12dch_25";
+const dots = "_dots_12dch_34";
+const dot = "_dot_12dch_34";
+const bounce = "_bounce_12dch_1";
+const pulse = "_pulse_12dch_73";
+const pulseRing = "_pulseRing_12dch_82";
+const pulseDot = "_pulseDot_12dch_98";
+const spinner = "_spinner_12dch_116";
+const spinnerIcon = "_spinnerIcon_12dch_123";
+const spin = "_spin_12dch_116";
+const steps = "_steps_12dch_140";
+const step = "_step_12dch_140";
+const stepIndicator = "_stepIndicator_12dch_157";
+const stepDot = "_stepDot_12dch_166";
+const stepLabel = "_stepLabel_12dch_174";
+const stepPending = "_stepPending_12dch_178";
+const stepActive = "_stepActive_12dch_182";
+const stepComplete = "_stepComplete_12dch_189";
+const stepError = "_stepError_12dch_196";
+const styles = {
+  thinkingIndicator,
+  main,
+  label,
+  elapsed,
+  dots,
+  dot,
+  bounce,
+  pulse,
+  pulseRing,
+  pulseDot,
+  spinner,
+  spinnerIcon,
+  spin,
+  steps,
+  step,
+  stepIndicator,
+  stepDot,
+  stepLabel,
+  stepPending,
+  stepActive,
+  stepComplete,
+  stepError
+};
+exports.bounce = bounce;
+exports.default = styles;
+exports.dot = dot;
+exports.dots = dots;
+exports.elapsed = elapsed;
+exports.label = label;
+exports.main = main;
+exports.pulse = pulse;
+exports.pulseDot = pulseDot;
+exports.pulseRing = pulseRing;
+exports.spin = spin;
+exports.spinner = spinner;
+exports.spinnerIcon = spinnerIcon;
+exports.step = step;
+exports.stepActive = stepActive;
+exports.stepComplete = stepComplete;
+exports.stepDot = stepDot;
+exports.stepError = stepError;
+exports.stepIndicator = stepIndicator;
+exports.stepLabel = stepLabel;
+exports.stepPending = stepPending;
+exports.steps = steps;
+exports.thinkingIndicator = thinkingIndicator;
+//# sourceMappingURL=ThinkingIndicator.module.scss.cjs.map

package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThinkingIndicator.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.js

@@ -0,0 +1,72 @@
+const thinkingIndicator = "_thinkingIndicator_12dch_1";
+const main = "_main_12dch_8";
+const label = "_label_12dch_14";
+const elapsed = "_elapsed_12dch_25";
+const dots = "_dots_12dch_34";
+const dot = "_dot_12dch_34";
+const bounce = "_bounce_12dch_1";
+const pulse = "_pulse_12dch_73";
+const pulseRing = "_pulseRing_12dch_82";
+const pulseDot = "_pulseDot_12dch_98";
+const spinner = "_spinner_12dch_116";
+const spinnerIcon = "_spinnerIcon_12dch_123";
+const spin = "_spin_12dch_116";
+const steps = "_steps_12dch_140";
+const step = "_step_12dch_140";
+const stepIndicator = "_stepIndicator_12dch_157";
+const stepDot = "_stepDot_12dch_166";
+const stepLabel = "_stepLabel_12dch_174";
+const stepPending = "_stepPending_12dch_178";
+const stepActive = "_stepActive_12dch_182";
+const stepComplete = "_stepComplete_12dch_189";
+const stepError = "_stepError_12dch_196";
+const styles = {
+  thinkingIndicator,
+  main,
+  label,
+  elapsed,
+  dots,
+  dot,
+  bounce,
+  pulse,
+  pulseRing,
+  pulseDot,
+  spinner,
+  spinnerIcon,
+  spin,
+  steps,
+  step,
+  stepIndicator,
+  stepDot,
+  stepLabel,
+  stepPending,
+  stepActive,
+  stepComplete,
+  stepError
+};
+export {
+  bounce,
+  styles as default,
+  dot,
+  dots,
+  elapsed,
+  label,
+  main,
+  pulse,
+  pulseDot,
+  pulseRing,
+  spin,
+  spinner,
+  spinnerIcon,
+  step,
+  stepActive,
+  stepComplete,
+  stepDot,
+  stepError,
+  stepIndicator,
+  stepLabel,
+  stepPending,
+  steps,
+  thinkingIndicator
+};
+//# sourceMappingURL=ThinkingIndicator.module.scss.js.map

package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.js.map

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

package/dist/components/ThinkingIndicator/index.cjs

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ThinkingIndicator_module = require("./ThinkingIndicator.module.scss.cjs");
+const index = require("../Loading/index.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ThinkingIndicatorContext = React__namespace.createContext(null);
+function useThinkingIndicatorContext() {
+  const context = React__namespace.useContext(ThinkingIndicatorContext);
+  if (!context) {
+    throw new Error("ThinkingIndicator compound components must be used within a ThinkingIndicator");
+  }
+  return context;
+}
+function useElapsedTime(active) {
+  const [elapsed, setElapsed] = React__namespace.useState(0);
+  const startTimeRef = React__namespace.useRef(Date.now());
+  React__namespace.useEffect(() => {
+    if (!active) {
+      setElapsed(0);
+      return;
+    }
+    startTimeRef.current = Date.now();
+    const interval = setInterval(() => {
+      setElapsed(Date.now() - startTimeRef.current);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [active]);
+  if (elapsed < 1e3) return "";
+  const seconds = Math.floor(elapsed / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function ErrorIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function ThinkingSteps({ children, className, ...htmlProps }) {
+  const classes = [ThinkingIndicator_module.default.steps, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
+}
+function ThinkingStep({
+  label,
+  status = "pending",
+  className,
+  ...htmlProps
+}) {
+  const classes = [
+    ThinkingIndicator_module.default.step,
+    ThinkingIndicator_module.default[`step${status.charAt(0).toUpperCase() + status.slice(1)}`],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: classes, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: ThinkingIndicator_module.default.stepIndicator, children: [
+      status === "complete" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}),
+      status === "error" && /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {}),
+      status === "active" && /* @__PURE__ */ jsxRuntime.jsx(index.Loading, { size: "sm", variant: "spinner", color: "current", label: "" }),
+      status === "pending" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.stepDot })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.stepLabel, children: label })
+  ] });
+}
+function ThinkingIndicatorRoot({
+  active = true,
+  label = "Thinking...",
+  variant = "dots",
+  showElapsed = false,
+  steps,
+  className,
+  ...htmlProps
+}) {
+  const elapsedTime = useElapsedTime(active && showElapsed);
+  const contextValue = {
+    active,
+    variant
+  };
+  if (!active) return null;
+  const classes = [
+    ThinkingIndicator_module.default.thinkingIndicator,
+    className
+  ].filter(Boolean).join(" ");
+  const loadingVariant = variant === "dots" ? "dots" : variant === "pulse" ? "pulse" : "spinner";
+  return /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicatorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...htmlProps,
+      className: classes,
+      role: "status",
+      "aria-label": label,
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ThinkingIndicator_module.default.main, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(index.Loading, { size: "sm", variant: loadingVariant, color: "muted", label: "" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.label, children: label }),
+          showElapsed && elapsedTime && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.elapsed, children: elapsedTime })
+        ] }),
+        steps && steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ThinkingSteps, { children: steps.map((step) => /* @__PURE__ */ jsxRuntime.jsx(
+          ThinkingStep,
+          {
+            label: step.label,
+            status: step.status
+          },
+          step.id
+        )) })
+      ]
+    }
+  ) });
+}
+const ThinkingIndicator = Object.assign(ThinkingIndicatorRoot, {
+  Steps: ThinkingSteps,
+  Step: ThinkingStep
+});
+exports.ThinkingIndicator = ThinkingIndicator;
+exports.ThinkingIndicatorRoot = ThinkingIndicatorRoot;
+exports.ThinkingStep = ThinkingStep;
+exports.ThinkingSteps = ThinkingSteps;
+exports.useThinkingIndicatorContext = useThinkingIndicatorContext;
+//# sourceMappingURL=index.cjs.map