@mieweb/ui 0.6.1-dev.170 → 0.6.1-dev.172

package/README.md

@@ -246,6 +246,26 @@ npm run build-storybook
 
 The output will be in the `storybook-static` directory.
 
+### Configuring the Ozwell API (AI stories)
+
+The AI stories (AIChat, Hands-Free Chat, and the DataVis NITRO **Ozwell Assistant**
+story) call the real Ozwell backend when a key is configured and fall back to a
+canned reply when it isn't. Set the key and endpoint from the browser console:
+
+```js
+// Recommended — survives reloads and is shared with the story iframe:
+localStorage.setItem(
+  'ozwellConfig',
+  JSON.stringify({ apiKey: 'YOUR_KEY', baseURL: 'https://your-ozwell-host' })
+);
+```
+
+`baseURL` is optional (defaults to `https://api.ozwell.ai`); other optional keys are
+`model`, `system`, and `temperature`. Never commit a key — see
+[src/components/AI/OZWELL-BACKEND.md](src/components/AI/OZWELL-BACKEND.md) for full
+details, including why `window.__ozwell` is unreliable inside Storybook iframes and
+how to proxy the key for public deploys.
+
 ## Using in Other Projects
 
 ### Method 1: NPM Package (Recommended)

package/dist/{chunk-JHPFOG2N.cjs → chunk-ST2RE5UB.cjs}

@@ -148,6 +148,16 @@ var SystemIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
     )
   }
 );
+var THREE_WAY_NEXT = {
+  light: "dark",
+  dark: "system",
+  system: "light"
+};
+var THEME_LABELS = {
+  light: "Switch to light mode",
+  dark: "Switch to dark mode",
+  system: "Switch to system theme"
+};
 var ThemeToggle = React__namespace.forwardRef(
   ({
     className,
@@ -167,33 +177,35 @@ var ThemeToggle = React__namespace.forwardRef(
       if (mode === "two-way") {
         setTheme(resolvedTheme === "dark" ? "light" : "dark");
       } else {
-        const nextTheme = {
-          light: "dark",
-          dark: "system",
-          system: "light"
-        };
-        setTheme(nextTheme[theme]);
+        setTheme(THREE_WAY_NEXT[theme]);
       }
     }, [mode, theme, resolvedTheme, setTheme]);
     const getLabel = () => {
       if (mode === "two-way") {
         return resolvedTheme === "dark" ? "Switch to light mode" : "Switch to dark mode";
       }
-      const nextThemeLabels = {
-        light: "Switch to dark mode",
-        dark: "Switch to system theme",
-        system: "Switch to light mode"
-      };
-      return nextThemeLabels[theme];
+      return THEME_LABELS[THREE_WAY_NEXT[theme]];
     };
     const getCurrentIcon = () => {
-      if (mode === "three-way" && theme === "system") {
-        return systemIcon || /* @__PURE__ */ jsxRuntime.jsx(SystemIcon, { className: themeToggleIconVariants({ size }) });
+      const iconClass = themeToggleIconVariants({ size });
+      if (mode === "three-way") {
+        const override = {
+          light: lightIcon,
+          dark: darkIcon,
+          system: systemIcon
+        }[theme];
+        if (override) return override;
+        const defaultIcons = {
+          light: /* @__PURE__ */ jsxRuntime.jsx(SunIcon, { className: iconClass }),
+          dark: /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, { className: iconClass }),
+          system: /* @__PURE__ */ jsxRuntime.jsx(SystemIcon, { className: iconClass })
+        };
+        return defaultIcons[THREE_WAY_NEXT[theme]];
       }
       if (resolvedTheme === "dark") {
-        return darkIcon || /* @__PURE__ */ jsxRuntime.jsx(SunIcon, { className: themeToggleIconVariants({ size }) });
+        return darkIcon || /* @__PURE__ */ jsxRuntime.jsx(SunIcon, { className: iconClass });
       }
-      return lightIcon || /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, { className: themeToggleIconVariants({ size }) });
+      return lightIcon || /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, { className: iconClass });
     };
     const label = getLabel();
     const button = /* @__PURE__ */ jsxRuntime.jsx(
@@ -230,5 +242,5 @@ exports.ThemeToggle = ThemeToggle;
 exports.themeToggleIconVariants = themeToggleIconVariants;
 exports.themeToggleVariants = themeToggleVariants;
 exports.useThemeContext = useThemeContext;
-//# sourceMappingURL=chunk-JHPFOG2N.cjs.map
-//# sourceMappingURL=chunk-JHPFOG2N.cjs.map
+//# sourceMappingURL=chunk-ST2RE5UB.cjs.map
+//# sourceMappingURL=chunk-ST2RE5UB.cjs.map

package/dist/chunk-ST2RE5UB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ThemeProvider/ThemeProvider.tsx","../src/components/ThemeProvider/ThemeToggle.tsx"],"names":["React","useTheme","jsx","cva","React2","cn","Tooltip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAM,oBAAA,GAA6BA,+BAEjC,MAAS;AAwBX,SAAS,aAAA,CAAc;AAAA,EACrB,QAAA;AAAA,EACA,cAAc,aAAA,GAAgB;AAChC,CAAA,EAAuB;AACrB,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,aAAA,KAAkBC,0BAAA,EAAS;AAEpD,EAAA,MAAM,KAAA,GAAcD,gBAAA,CAAA,OAAA;AAAA,IAClB,OAAO,EAAE,KAAA,EAAO,QAAA,EAAU,aAAA,EAAc,CAAA;AAAA,IACxC,CAAC,KAAA,EAAO,QAAA,EAAU,aAAa;AAAA,GACjC;AAEA,EAAA,uBACEE,cAAA,CAAC,oBAAA,CAAqB,QAAA,EAArB,EAA8B,OAC5B,QAAA,EACH,CAAA;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;AAiB5B,SAAS,eAAA,GAA6C;AACpD,EAAA,MAAM,OAAA,GAAgBF,4BAAW,oBAAoB,CAAA;AACrD,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,qDAAqD,CAAA;AAAA,EACvE;AACA,EAAA,OAAO,OAAA;AACT;AClEA,IAAM,mBAAA,GAAsBG,0BAAA;AAAA,EAC1B;AAAA,IACE,yCAAA;AAAA,IACA,qCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,wDAAA;AAAA,UACA,sBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,oDAAA;AAAA,UACA,sBAAA;AAAA,UACA;AAAA;AACF;AACF,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,OAAA,EAAS;AAAA;AACX;AAEJ;AAEA,IAAM,uBAAA,GAA0BA,2BAAI,EAAA,EAAI;AAAA,EACtC,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,aAAA;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC;AAUD,IAAM,OAAA,GAA+B,CAAC,EAAE,SAAA,uBACtCD,cAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA;AAAA,IACA,IAAA,EAAK,MAAA;AAAA,IACL,OAAA,EAAQ,WAAA;AAAA,IACR,MAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,CAAA;AAAA,IACb,aAAA,EAAY,MAAA;AAAA,IAEZ,QAAA,kBAAAA,cAAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAe,OAAA;AAAA,QACf,CAAA,EAAE;AAAA;AAAA;AACJ;AACF,CAAA;AAGF,IAAM,QAAA,GAAgC,CAAC,EAAE,SAAA,uBACvCA,cAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA;AAAA,IACA,IAAA,EAAK,MAAA;AAAA,IACL,OAAA,EAAQ,WAAA;AAAA,IACR,MAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,CAAA;AAAA,IACb,aAAA,EAAY,MAAA;AAAA,IAEZ,QAAA,kBAAAA,cAAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAe,OAAA;AAAA,QACf,CAAA,EAAE;AAAA;AAAA;AACJ;AACF,CAAA;AAGF,IAAM,UAAA,GAAkC,CAAC,EAAE,SAAA,uBACzCA,cAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA;AAAA,IACA,IAAA,EAAK,MAAA;AAAA,IACL,OAAA,EAAQ,WAAA;AAAA,IACR,MAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,CAAA;AAAA,IACb,aAAA,EAAY,MAAA;AAAA,IAEZ,QAAA,kBAAAA,cAAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAe,OAAA;AAAA,QACf,CAAA,EAAE;AAAA;AAAA;AACJ;AACF,CAAA;AASF,IAAM,cAAA,GAAuC;AAAA,EAC3C,KAAA,EAAO,MAAA;AAAA,EACP,IAAA,EAAM,QAAA;AAAA,EACN,MAAA,EAAQ;AACV,CAAA;AAEA,IAAM,YAAA,GAAsC;AAAA,EAC1C,KAAA,EAAO,sBAAA;AAAA,EACP,IAAA,EAAM,qBAAA;AAAA,EACN,MAAA,EAAQ;AACV,CAAA;AAmEA,IAAM,WAAA,GAAoBE,gBAAA,CAAA,UAAA;AAAA,EACxB,CACE;AAAA,IACE,SAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA,GAAO,SAAA;AAAA,IACP,WAAA,GAAc,IAAA;AAAA,IACd,gBAAA,GAAmB,QAAA;AAAA,IACnB,YAAA,GAAe,GAAA;AAAA,IACf,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,aAAA,KAAkBH,0BAAA,EAAS;AAEpD,IAAA,MAAM,WAAA,GAAoBG,6BAAY,MAAM;AAC1C,MAAA,IAAI,SAAS,SAAA,EAAW;AAEtB,QAAA,QAAA,CAAS,aAAA,KAAkB,MAAA,GAAS,OAAA,GAAU,MAAM,CAAA;AAAA,MACtD,CAAA,MAAO;AACL,QAAA,QAAA,CAAS,cAAA,CAAe,KAAK,CAAC,CAAA;AAAA,MAChC;AAAA,IACF,GAAG,CAAC,IAAA,EAAM,KAAA,EAAO,aAAA,EAAe,QAAQ,CAAC,CAAA;AAEzC,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,IAAI,SAAS,SAAA,EAAW;AACtB,QAAA,OAAO,aAAA,KAAkB,SACrB,sBAAA,GACA,qBAAA;AAAA,MACN;AAEA,MAAA,OAAO,YAAA,CAAa,cAAA,CAAe,KAAK,CAAC,CAAA;AAAA,IAC3C,CAAA;AAEA,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,MAAM,SAAA,GAAY,uBAAA,CAAwB,EAAE,IAAA,EAAM,CAAA;AAClD,MAAA,IAAI,SAAS,WAAA,EAAa;AAMxB,QAAA,MAAM,QAAA,GAAW;AAAA,UACf,KAAA,EAAO,SAAA;AAAA,UACP,IAAA,EAAM,QAAA;AAAA,UACN,MAAA,EAAQ;AAAA,UACR,KAAK,CAAA;AACP,QAAA,IAAI,UAAU,OAAO,QAAA;AACrB,QAAA,MAAM,YAAA,GAA+C;AAAA,UACnD,KAAA,kBAAOF,cAAAA,CAAC,OAAA,EAAA,EAAQ,WAAW,SAAA,EAAW,CAAA;AAAA,UACtC,IAAA,kBAAMA,cAAAA,CAAC,QAAA,EAAA,EAAS,WAAW,SAAA,EAAW,CAAA;AAAA,UACtC,MAAA,kBAAQA,cAAAA,CAAC,UAAA,EAAA,EAAW,WAAW,SAAA,EAAW;AAAA,SAC5C;AACA,QAAA,OAAO,YAAA,CAAa,cAAA,CAAe,KAAK,CAAC,CAAA;AAAA,MAC3C;AAIA,MAAA,IAAI,kBAAkB,MAAA,EAAQ;AAC5B,QAAA,OAAO,QAAA,oBAAYA,cAAAA,CAAC,OAAA,EAAA,EAAQ,WAAW,SAAA,EAAW,CAAA;AAAA,MACpD;AAEA,MAAA,OAAO,SAAA,oBAAaA,cAAAA,CAAC,QAAA,EAAA,EAAS,WAAW,SAAA,EAAW,CAAA;AAAA,IACtD,CAAA;AAEA,IAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,IAAA,MAAM,yBACJA,cAAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAY,KAAA;AAAA,QACZ,OAAA,EAAS,WAAA;AAAA,QACT,SAAA,EAAWG,qBAAG,mBAAA,CAAoB,EAAE,MAAM,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QAC9D,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA,cAAA;AAAe;AAAA,KAClB;AAGF,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,uBACEH,cAAAA;AAAA,QAACI,yBAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,KAAA;AAAA,UACT,SAAA,EAAW,gBAAA;AAAA,UACX,KAAA,EAAO,YAAA;AAAA,UAEN,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,IAEJ;AAEA,IAAA,OAAO,MAAA;AAAA,EACT;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-ST2RE5UB.cjs","sourcesContent":["import * as React from 'react';\nimport { useTheme, type Theme, type ResolvedTheme } from '../../hooks/useTheme';\n\nexport interface ThemeProviderContextValue {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: ResolvedTheme;\n}\n\nconst ThemeProviderContext = React.createContext<\n  ThemeProviderContextValue | undefined\n>(undefined);\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode;\n  /** Default theme to use on first load */\n  defaultTheme?: Theme;\n  /** Storage key for persisting theme */\n  storageKey?: string;\n}\n\n/**\n * Provider component that wraps your app to enable theme switching.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <ThemeProvider defaultTheme=\"system\">\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n * ```\n */\nfunction ThemeProvider({\n  children,\n  defaultTheme: _defaultTheme = 'system',\n}: ThemeProviderProps) {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n\n  const value = React.useMemo(\n    () => ({ theme, setTheme, resolvedTheme }),\n    [theme, setTheme, resolvedTheme]\n  );\n\n  return (\n    <ThemeProviderContext.Provider value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n\nThemeProvider.displayName = 'ThemeProvider';\n\n/**\n * Hook to access the theme context.\n *\n * @example\n * ```tsx\n * function ThemeToggle() {\n *   const { theme, setTheme, resolvedTheme } = useThemeContext();\n *   return (\n *     <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>\n *       Toggle theme\n *     </button>\n *   );\n * }\n * ```\n */\nfunction useThemeContext(): ThemeProviderContextValue {\n  const context = React.useContext(ThemeProviderContext);\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider');\n  }\n  return context;\n}\n\nexport { ThemeProvider, ThemeProviderContext, useThemeContext };\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useTheme, type Theme } from '../../hooks/useTheme';\nimport { Tooltip } from '../Tooltip';\n\n// ============================================================================\n// Theme Toggle Variants\n// ============================================================================\n\nconst themeToggleVariants = cva(\n  [\n    'inline-flex items-center justify-center',\n    'rounded-md border transition-colors',\n    'focus:outline-none focus:ring-2 focus:ring-primary-500/40',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-7 w-7',\n        md: 'h-8 w-8',\n        lg: 'h-9 w-9',\n      },\n      variant: {\n        default: [\n          'border-neutral-300 bg-white text-neutral-600 shadow-sm',\n          'hover:bg-neutral-100',\n          'dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n        ghost: [\n          'border-transparent bg-transparent text-neutral-600',\n          'hover:bg-neutral-100',\n          'dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nconst themeToggleIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'h-3.5 w-3.5',\n      md: 'h-4 w-4',\n      lg: 'h-5 w-5',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n// ============================================================================\n// Icon Components\n// ============================================================================\n\ninterface IconProps {\n  className?: string;\n}\n\nconst SunIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\n    />\n  </svg>\n);\n\nconst MoonIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n    />\n  </svg>\n);\n\nconst SystemIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// Three-way cycle (single source of truth)\n// ============================================================================\n\n/** The three-way cycle order: light → dark → system → light. Click handler,\n *  tooltip label, and default icon are all derived from this one map. */\nconst THREE_WAY_NEXT: Record<Theme, Theme> = {\n  light: 'dark',\n  dark: 'system',\n  system: 'light',\n};\n\nconst THEME_LABELS: Record<Theme, string> = {\n  light: 'Switch to light mode',\n  dark: 'Switch to dark mode',\n  system: 'Switch to system theme',\n};\n\n// ============================================================================\n// ThemeToggle Component\n// ============================================================================\n\nexport interface ThemeToggleProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    VariantProps<typeof themeToggleVariants> {\n  /**\n   * What themes to cycle through.\n   * - 'two-way': Toggle between light and dark only\n   * - 'three-way': Cycle through light → dark → system\n   * @default 'two-way'\n   */\n  mode?: 'two-way' | 'three-way';\n  /**\n   * Whether to show a tooltip with the current/next theme\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Tooltip placement\n   * @default 'bottom'\n   */\n  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * Delay before showing tooltip in ms\n   * @default 140\n   */\n  tooltipDelay?: number;\n  /**\n   * Custom icon for light theme\n   */\n  lightIcon?: React.ReactNode;\n  /**\n   * Custom icon for dark theme\n   */\n  darkIcon?: React.ReactNode;\n  /**\n   * Custom icon for system theme (only used in three-way mode)\n   */\n  systemIcon?: React.ReactNode;\n}\n\n/**\n * An accessible theme toggle button that switches between light/dark modes.\n *\n * Uses the mieweb-ui useTheme hook for state management and persists\n * the user's preference to localStorage.\n *\n * @example\n * ```tsx\n * // Simple two-way toggle (light/dark)\n * <ThemeToggle />\n *\n * // Three-way cycle (light → dark → system)\n * <ThemeToggle mode=\"three-way\" />\n *\n * // With custom styling\n * <ThemeToggle size=\"lg\" variant=\"ghost\" />\n *\n * // Without tooltip\n * <ThemeToggle showTooltip={false} />\n * ```\n */\nconst ThemeToggle = React.forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  (\n    {\n      className,\n      size,\n      variant,\n      mode = 'two-way',\n      showTooltip = true,\n      tooltipPlacement = 'bottom',\n      tooltipDelay = 140,\n      lightIcon,\n      darkIcon,\n      systemIcon,\n      ...props\n    },\n    ref\n  ) => {\n    const { theme, setTheme, resolvedTheme } = useTheme();\n\n    const handleClick = React.useCallback(() => {\n      if (mode === 'two-way') {\n        // Simple toggle between light and dark\n        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');\n      } else {\n        setTheme(THREE_WAY_NEXT[theme]);\n      }\n    }, [mode, theme, resolvedTheme, setTheme]);\n\n    const getLabel = () => {\n      if (mode === 'two-way') {\n        return resolvedTheme === 'dark'\n          ? 'Switch to light mode'\n          : 'Switch to dark mode';\n      }\n      // Three-way mode - name the next stop in the cycle\n      return THEME_LABELS[THREE_WAY_NEXT[theme]];\n    };\n\n    const getCurrentIcon = () => {\n      const iconClass = themeToggleIconVariants({ size });\n      if (mode === 'three-way') {\n        // The DEFAULT icon previews the next theme in the cycle, matching the\n        // tooltip (previously dark showed a sun while the click gave system,\n        // and system showed the current state instead of the next). The\n        // lightIcon/darkIcon/systemIcon overrides are keyed by the CURRENT\n        // theme — they replace the icon shown while in that theme.\n        const override = {\n          light: lightIcon,\n          dark: darkIcon,\n          system: systemIcon,\n        }[theme];\n        if (override) return override;\n        const defaultIcons: Record<Theme, React.ReactNode> = {\n          light: <SunIcon className={iconClass} />,\n          dark: <MoonIcon className={iconClass} />,\n          system: <SystemIcon className={iconClass} />,\n        };\n        return defaultIcons[THREE_WAY_NEXT[theme]];\n      }\n\n      // Two-way keeps the classic convention: sun while dark (\"click for\n      // light\"), moon while light (\"click for dark\").\n      if (resolvedTheme === 'dark') {\n        return darkIcon || <SunIcon className={iconClass} />;\n      }\n\n      return lightIcon || <MoonIcon className={iconClass} />;\n    };\n\n    const label = getLabel();\n\n    const button = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={label}\n        onClick={handleClick}\n        className={cn(themeToggleVariants({ size, variant }), className)}\n        {...props}\n      >\n        {getCurrentIcon()}\n      </button>\n    );\n\n    if (showTooltip) {\n      return (\n        <Tooltip\n          content={label}\n          placement={tooltipPlacement}\n          delay={tooltipDelay}\n        >\n          {button}\n        </Tooltip>\n      );\n    }\n\n    return button;\n  }\n);\n\nThemeToggle.displayName = 'ThemeToggle';\n\nexport { ThemeToggle, themeToggleVariants, themeToggleIconVariants };\n"]}

package/dist/{chunk-I56VBDSC.js → chunk-XDFDVF2O.js}

@@ -126,6 +126,16 @@ var SystemIcon = ({ className }) => /* @__PURE__ */ jsx(
     )
   }
 );
+var THREE_WAY_NEXT = {
+  light: "dark",
+  dark: "system",
+  system: "light"
+};
+var THEME_LABELS = {
+  light: "Switch to light mode",
+  dark: "Switch to dark mode",
+  system: "Switch to system theme"
+};
 var ThemeToggle = React.forwardRef(
   ({
     className,
@@ -145,33 +155,35 @@ var ThemeToggle = React.forwardRef(
       if (mode === "two-way") {
         setTheme(resolvedTheme === "dark" ? "light" : "dark");
       } else {
-        const nextTheme = {
-          light: "dark",
-          dark: "system",
-          system: "light"
-        };
-        setTheme(nextTheme[theme]);
+        setTheme(THREE_WAY_NEXT[theme]);
       }
     }, [mode, theme, resolvedTheme, setTheme]);
     const getLabel = () => {
       if (mode === "two-way") {
         return resolvedTheme === "dark" ? "Switch to light mode" : "Switch to dark mode";
       }
-      const nextThemeLabels = {
-        light: "Switch to dark mode",
-        dark: "Switch to system theme",
-        system: "Switch to light mode"
-      };
-      return nextThemeLabels[theme];
+      return THEME_LABELS[THREE_WAY_NEXT[theme]];
     };
     const getCurrentIcon = () => {
-      if (mode === "three-way" && theme === "system") {
-        return systemIcon || /* @__PURE__ */ jsx(SystemIcon, { className: themeToggleIconVariants({ size }) });
+      const iconClass = themeToggleIconVariants({ size });
+      if (mode === "three-way") {
+        const override = {
+          light: lightIcon,
+          dark: darkIcon,
+          system: systemIcon
+        }[theme];
+        if (override) return override;
+        const defaultIcons = {
+          light: /* @__PURE__ */ jsx(SunIcon, { className: iconClass }),
+          dark: /* @__PURE__ */ jsx(MoonIcon, { className: iconClass }),
+          system: /* @__PURE__ */ jsx(SystemIcon, { className: iconClass })
+        };
+        return defaultIcons[THREE_WAY_NEXT[theme]];
       }
       if (resolvedTheme === "dark") {
-        return darkIcon || /* @__PURE__ */ jsx(SunIcon, { className: themeToggleIconVariants({ size }) });
+        return darkIcon || /* @__PURE__ */ jsx(SunIcon, { className: iconClass });
       }
-      return lightIcon || /* @__PURE__ */ jsx(MoonIcon, { className: themeToggleIconVariants({ size }) });
+      return lightIcon || /* @__PURE__ */ jsx(MoonIcon, { className: iconClass });
     };
     const label = getLabel();
     const button = /* @__PURE__ */ jsx(
@@ -203,5 +215,5 @@ var ThemeToggle = React.forwardRef(
 ThemeToggle.displayName = "ThemeToggle";
 
 export { ThemeProvider, ThemeProviderContext, ThemeToggle, themeToggleIconVariants, themeToggleVariants, useThemeContext };
-//# sourceMappingURL=chunk-I56VBDSC.js.map
-//# sourceMappingURL=chunk-I56VBDSC.js.map
+//# sourceMappingURL=chunk-XDFDVF2O.js.map
+//# sourceMappingURL=chunk-XDFDVF2O.js.map

package/dist/chunk-XDFDVF2O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ThemeProvider/ThemeProvider.tsx","../src/components/ThemeProvider/ThemeToggle.tsx"],"names":["jsx","React2"],"mappings":"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","file":"chunk-XDFDVF2O.js","sourcesContent":["import * as React from 'react';\nimport { useTheme, type Theme, type ResolvedTheme } from '../../hooks/useTheme';\n\nexport interface ThemeProviderContextValue {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: ResolvedTheme;\n}\n\nconst ThemeProviderContext = React.createContext<\n  ThemeProviderContextValue | undefined\n>(undefined);\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode;\n  /** Default theme to use on first load */\n  defaultTheme?: Theme;\n  /** Storage key for persisting theme */\n  storageKey?: string;\n}\n\n/**\n * Provider component that wraps your app to enable theme switching.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <ThemeProvider defaultTheme=\"system\">\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n * ```\n */\nfunction ThemeProvider({\n  children,\n  defaultTheme: _defaultTheme = 'system',\n}: ThemeProviderProps) {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n\n  const value = React.useMemo(\n    () => ({ theme, setTheme, resolvedTheme }),\n    [theme, setTheme, resolvedTheme]\n  );\n\n  return (\n    <ThemeProviderContext.Provider value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n\nThemeProvider.displayName = 'ThemeProvider';\n\n/**\n * Hook to access the theme context.\n *\n * @example\n * ```tsx\n * function ThemeToggle() {\n *   const { theme, setTheme, resolvedTheme } = useThemeContext();\n *   return (\n *     <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>\n *       Toggle theme\n *     </button>\n *   );\n * }\n * ```\n */\nfunction useThemeContext(): ThemeProviderContextValue {\n  const context = React.useContext(ThemeProviderContext);\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider');\n  }\n  return context;\n}\n\nexport { ThemeProvider, ThemeProviderContext, useThemeContext };\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useTheme, type Theme } from '../../hooks/useTheme';\nimport { Tooltip } from '../Tooltip';\n\n// ============================================================================\n// Theme Toggle Variants\n// ============================================================================\n\nconst themeToggleVariants = cva(\n  [\n    'inline-flex items-center justify-center',\n    'rounded-md border transition-colors',\n    'focus:outline-none focus:ring-2 focus:ring-primary-500/40',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-7 w-7',\n        md: 'h-8 w-8',\n        lg: 'h-9 w-9',\n      },\n      variant: {\n        default: [\n          'border-neutral-300 bg-white text-neutral-600 shadow-sm',\n          'hover:bg-neutral-100',\n          'dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n        ghost: [\n          'border-transparent bg-transparent text-neutral-600',\n          'hover:bg-neutral-100',\n          'dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nconst themeToggleIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'h-3.5 w-3.5',\n      md: 'h-4 w-4',\n      lg: 'h-5 w-5',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n// ============================================================================\n// Icon Components\n// ============================================================================\n\ninterface IconProps {\n  className?: string;\n}\n\nconst SunIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\n    />\n  </svg>\n);\n\nconst MoonIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n    />\n  </svg>\n);\n\nconst SystemIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// Three-way cycle (single source of truth)\n// ============================================================================\n\n/** The three-way cycle order: light → dark → system → light. Click handler,\n *  tooltip label, and default icon are all derived from this one map. */\nconst THREE_WAY_NEXT: Record<Theme, Theme> = {\n  light: 'dark',\n  dark: 'system',\n  system: 'light',\n};\n\nconst THEME_LABELS: Record<Theme, string> = {\n  light: 'Switch to light mode',\n  dark: 'Switch to dark mode',\n  system: 'Switch to system theme',\n};\n\n// ============================================================================\n// ThemeToggle Component\n// ============================================================================\n\nexport interface ThemeToggleProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    VariantProps<typeof themeToggleVariants> {\n  /**\n   * What themes to cycle through.\n   * - 'two-way': Toggle between light and dark only\n   * - 'three-way': Cycle through light → dark → system\n   * @default 'two-way'\n   */\n  mode?: 'two-way' | 'three-way';\n  /**\n   * Whether to show a tooltip with the current/next theme\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Tooltip placement\n   * @default 'bottom'\n   */\n  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * Delay before showing tooltip in ms\n   * @default 140\n   */\n  tooltipDelay?: number;\n  /**\n   * Custom icon for light theme\n   */\n  lightIcon?: React.ReactNode;\n  /**\n   * Custom icon for dark theme\n   */\n  darkIcon?: React.ReactNode;\n  /**\n   * Custom icon for system theme (only used in three-way mode)\n   */\n  systemIcon?: React.ReactNode;\n}\n\n/**\n * An accessible theme toggle button that switches between light/dark modes.\n *\n * Uses the mieweb-ui useTheme hook for state management and persists\n * the user's preference to localStorage.\n *\n * @example\n * ```tsx\n * // Simple two-way toggle (light/dark)\n * <ThemeToggle />\n *\n * // Three-way cycle (light → dark → system)\n * <ThemeToggle mode=\"three-way\" />\n *\n * // With custom styling\n * <ThemeToggle size=\"lg\" variant=\"ghost\" />\n *\n * // Without tooltip\n * <ThemeToggle showTooltip={false} />\n * ```\n */\nconst ThemeToggle = React.forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  (\n    {\n      className,\n      size,\n      variant,\n      mode = 'two-way',\n      showTooltip = true,\n      tooltipPlacement = 'bottom',\n      tooltipDelay = 140,\n      lightIcon,\n      darkIcon,\n      systemIcon,\n      ...props\n    },\n    ref\n  ) => {\n    const { theme, setTheme, resolvedTheme } = useTheme();\n\n    const handleClick = React.useCallback(() => {\n      if (mode === 'two-way') {\n        // Simple toggle between light and dark\n        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');\n      } else {\n        setTheme(THREE_WAY_NEXT[theme]);\n      }\n    }, [mode, theme, resolvedTheme, setTheme]);\n\n    const getLabel = () => {\n      if (mode === 'two-way') {\n        return resolvedTheme === 'dark'\n          ? 'Switch to light mode'\n          : 'Switch to dark mode';\n      }\n      // Three-way mode - name the next stop in the cycle\n      return THEME_LABELS[THREE_WAY_NEXT[theme]];\n    };\n\n    const getCurrentIcon = () => {\n      const iconClass = themeToggleIconVariants({ size });\n      if (mode === 'three-way') {\n        // The DEFAULT icon previews the next theme in the cycle, matching the\n        // tooltip (previously dark showed a sun while the click gave system,\n        // and system showed the current state instead of the next). The\n        // lightIcon/darkIcon/systemIcon overrides are keyed by the CURRENT\n        // theme — they replace the icon shown while in that theme.\n        const override = {\n          light: lightIcon,\n          dark: darkIcon,\n          system: systemIcon,\n        }[theme];\n        if (override) return override;\n        const defaultIcons: Record<Theme, React.ReactNode> = {\n          light: <SunIcon className={iconClass} />,\n          dark: <MoonIcon className={iconClass} />,\n          system: <SystemIcon className={iconClass} />,\n        };\n        return defaultIcons[THREE_WAY_NEXT[theme]];\n      }\n\n      // Two-way keeps the classic convention: sun while dark (\"click for\n      // light\"), moon while light (\"click for dark\").\n      if (resolvedTheme === 'dark') {\n        return darkIcon || <SunIcon className={iconClass} />;\n      }\n\n      return lightIcon || <MoonIcon className={iconClass} />;\n    };\n\n    const label = getLabel();\n\n    const button = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={label}\n        onClick={handleClick}\n        className={cn(themeToggleVariants({ size, variant }), className)}\n        {...props}\n      >\n        {getCurrentIcon()}\n      </button>\n    );\n\n    if (showTooltip) {\n      return (\n        <Tooltip\n          content={label}\n          placement={tooltipPlacement}\n          delay={tooltipDelay}\n        >\n          {button}\n        </Tooltip>\n      );\n    }\n\n    return button;\n  }\n);\n\nThemeToggle.displayName = 'ThemeToggle';\n\nexport { ThemeToggle, themeToggleVariants, themeToggleIconVariants };\n"]}

package/dist/components/ThemeProvider/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkJHPFOG2N_cjs = require('../../chunk-JHPFOG2N.cjs');
+var chunkST2RE5UB_cjs = require('../../chunk-ST2RE5UB.cjs');
 require('../../chunk-RH43XBNV.cjs');
 require('../../chunk-2O7D6F67.cjs');
 require('../../chunk-6HFFWEM3.cjs');
@@ -10,27 +10,27 @@ require('../../chunk-OR5DRJCW.cjs');
 
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.ThemeProvider; }
+  get: function () { return chunkST2RE5UB_cjs.ThemeProvider; }
 });
 Object.defineProperty(exports, "ThemeProviderContext", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.ThemeProviderContext; }
+  get: function () { return chunkST2RE5UB_cjs.ThemeProviderContext; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.ThemeToggle; }
+  get: function () { return chunkST2RE5UB_cjs.ThemeToggle; }
 });
 Object.defineProperty(exports, "themeToggleIconVariants", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.themeToggleIconVariants; }
+  get: function () { return chunkST2RE5UB_cjs.themeToggleIconVariants; }
 });
 Object.defineProperty(exports, "themeToggleVariants", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.themeToggleVariants; }
+  get: function () { return chunkST2RE5UB_cjs.themeToggleVariants; }
 });
 Object.defineProperty(exports, "useThemeContext", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.useThemeContext; }
+  get: function () { return chunkST2RE5UB_cjs.useThemeContext; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/ThemeProvider/index.js

@@ -1,4 +1,4 @@
-export { ThemeProvider, ThemeProviderContext, ThemeToggle, themeToggleIconVariants, themeToggleVariants, useThemeContext } from '../../chunk-I56VBDSC.js';
+export { ThemeProvider, ThemeProviderContext, ThemeToggle, themeToggleIconVariants, themeToggleVariants, useThemeContext } from '../../chunk-XDFDVF2O.js';
 import '../../chunk-FZJBFJJR.js';
 import '../../chunk-KJZNEVYM.js';
 import '../../chunk-HB7C7NB5.js';

package/dist/index.cjs

@@ -15,7 +15,7 @@ var chunkUVSODK6V_cjs = require('./chunk-UVSODK6V.cjs');
 var chunkTN33E2VN_cjs = require('./chunk-TN33E2VN.cjs');
 var chunkQASIWBXU_cjs = require('./chunk-QASIWBXU.cjs');
 var chunkPJAQDAMZ_cjs = require('./chunk-PJAQDAMZ.cjs');
-var chunkJHPFOG2N_cjs = require('./chunk-JHPFOG2N.cjs');
+var chunkST2RE5UB_cjs = require('./chunk-ST2RE5UB.cjs');
 var chunkDLNJLCNO_cjs = require('./chunk-DLNJLCNO.cjs');
 var chunkUO3KEUYK_cjs = require('./chunk-UO3KEUYK.cjs');
 var chunkKJ5BSGEO_cjs = require('./chunk-KJ5BSGEO.cjs');
@@ -42640,27 +42640,27 @@ Object.defineProperty(exports, "textVariants", {
 });
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.ThemeProvider; }
+  get: function () { return chunkST2RE5UB_cjs.ThemeProvider; }
 });
 Object.defineProperty(exports, "ThemeProviderContext", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.ThemeProviderContext; }
+  get: function () { return chunkST2RE5UB_cjs.ThemeProviderContext; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.ThemeToggle; }
+  get: function () { return chunkST2RE5UB_cjs.ThemeToggle; }
 });
 Object.defineProperty(exports, "themeToggleIconVariants", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.themeToggleIconVariants; }
+  get: function () { return chunkST2RE5UB_cjs.themeToggleIconVariants; }
 });
 Object.defineProperty(exports, "themeToggleVariants", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.themeToggleVariants; }
+  get: function () { return chunkST2RE5UB_cjs.themeToggleVariants; }
 });
 Object.defineProperty(exports, "useThemeContext", {
   enumerable: true,
-  get: function () { return chunkJHPFOG2N_cjs.useThemeContext; }
+  get: function () { return chunkST2RE5UB_cjs.useThemeContext; }
 });
 Object.defineProperty(exports, "Toggle", {
   enumerable: true,

package/dist/index.js

@@ -16,7 +16,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from './chunk-MUYTGWGE.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants } from './chunk-MUYTGWGE.js';
 import { Text } from './chunk-JLBT76WH.js';
 export { SmallMuted, Text, textVariants } from './chunk-JLBT76WH.js';
-export { ThemeProvider, ThemeProviderContext, ThemeToggle, themeToggleIconVariants, themeToggleVariants, useThemeContext } from './chunk-I56VBDSC.js';
+export { ThemeProvider, ThemeProviderContext, ThemeToggle, themeToggleIconVariants, themeToggleVariants, useThemeContext } from './chunk-XDFDVF2O.js';
 export { Toggle, toggleVariants } from './chunk-Y2S6QMKU.js';
 export { TranscriptView, formatTimestampMs } from './chunk-FIWKHLWY.js';
 export { Sheet, SheetBody, SheetClose, SheetDescription, SheetFooter, SheetHeader, SheetTitle, sheetContentVariants, sheetOverlayVariants } from './chunk-4LVPQ44A.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mieweb/ui",
-  "version": "0.6.1-dev.170",
+  "version": "0.6.1-dev.172",
   "description": "A themeable, accessible React component library built with Tailwind CSS",
   "author": "Medical Informatics Engineering, Inc.",
   "license": "SEE LICENSE IN LICENSE",
@@ -235,7 +235,7 @@
     "@kerebron/editor": ">=0.7.9",
     "@kerebron/editor-kits": ">=0.7.9",
     "@kerebron/wasm": ">=0.7.9",
-    "@mieweb/datavis": "=1.5.0",
+    "@mieweb/datavis": "=1.6.0",
     "ag-grid-community": ">=32.0.0",
     "ag-grid-react": ">=32.0.0",
     "datavis-ace": "=4.1.0",
@@ -344,7 +344,7 @@
     "@kerebron/editor": "0.7.9",
     "@kerebron/editor-kits": "0.7.9",
     "@kerebron/wasm": "0.7.9",
-    "@mieweb/datavis": "=1.5.0",
+    "@mieweb/datavis": "=1.6.0",
     "@monaco-editor/react": "^4.7.0",
     "@playwright/test": "^1.58.2",
     "@storybook/addon-a11y": "^10.2.11",

package/dist/chunk-I56VBDSC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/ThemeProvider/ThemeProvider.tsx","../src/components/ThemeProvider/ThemeToggle.tsx"],"names":["jsx","React2"],"mappings":"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","file":"chunk-I56VBDSC.js","sourcesContent":["import * as React from 'react';\nimport { useTheme, type Theme, type ResolvedTheme } from '../../hooks/useTheme';\n\nexport interface ThemeProviderContextValue {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: ResolvedTheme;\n}\n\nconst ThemeProviderContext = React.createContext<\n  ThemeProviderContextValue | undefined\n>(undefined);\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode;\n  /** Default theme to use on first load */\n  defaultTheme?: Theme;\n  /** Storage key for persisting theme */\n  storageKey?: string;\n}\n\n/**\n * Provider component that wraps your app to enable theme switching.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <ThemeProvider defaultTheme=\"system\">\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n * ```\n */\nfunction ThemeProvider({\n  children,\n  defaultTheme: _defaultTheme = 'system',\n}: ThemeProviderProps) {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n\n  const value = React.useMemo(\n    () => ({ theme, setTheme, resolvedTheme }),\n    [theme, setTheme, resolvedTheme]\n  );\n\n  return (\n    <ThemeProviderContext.Provider value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n\nThemeProvider.displayName = 'ThemeProvider';\n\n/**\n * Hook to access the theme context.\n *\n * @example\n * ```tsx\n * function ThemeToggle() {\n *   const { theme, setTheme, resolvedTheme } = useThemeContext();\n *   return (\n *     <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>\n *       Toggle theme\n *     </button>\n *   );\n * }\n * ```\n */\nfunction useThemeContext(): ThemeProviderContextValue {\n  const context = React.useContext(ThemeProviderContext);\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider');\n  }\n  return context;\n}\n\nexport { ThemeProvider, ThemeProviderContext, useThemeContext };\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useTheme, type Theme } from '../../hooks/useTheme';\nimport { Tooltip } from '../Tooltip';\n\n// ============================================================================\n// Theme Toggle Variants\n// ============================================================================\n\nconst themeToggleVariants = cva(\n  [\n    'inline-flex items-center justify-center',\n    'rounded-md border transition-colors',\n    'focus:outline-none focus:ring-2 focus:ring-primary-500/40',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-7 w-7',\n        md: 'h-8 w-8',\n        lg: 'h-9 w-9',\n      },\n      variant: {\n        default: [\n          'border-neutral-300 bg-white text-neutral-600 shadow-sm',\n          'hover:bg-neutral-100',\n          'dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n        ghost: [\n          'border-transparent bg-transparent text-neutral-600',\n          'hover:bg-neutral-100',\n          'dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nconst themeToggleIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'h-3.5 w-3.5',\n      md: 'h-4 w-4',\n      lg: 'h-5 w-5',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n// ============================================================================\n// Icon Components\n// ============================================================================\n\ninterface IconProps {\n  className?: string;\n}\n\nconst SunIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\n    />\n  </svg>\n);\n\nconst MoonIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n    />\n  </svg>\n);\n\nconst SystemIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// ThemeToggle Component\n// ============================================================================\n\nexport interface ThemeToggleProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    VariantProps<typeof themeToggleVariants> {\n  /**\n   * What themes to cycle through.\n   * - 'two-way': Toggle between light and dark only\n   * - 'three-way': Cycle through light → dark → system\n   * @default 'two-way'\n   */\n  mode?: 'two-way' | 'three-way';\n  /**\n   * Whether to show a tooltip with the current/next theme\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Tooltip placement\n   * @default 'bottom'\n   */\n  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * Delay before showing tooltip in ms\n   * @default 140\n   */\n  tooltipDelay?: number;\n  /**\n   * Custom icon for light theme\n   */\n  lightIcon?: React.ReactNode;\n  /**\n   * Custom icon for dark theme\n   */\n  darkIcon?: React.ReactNode;\n  /**\n   * Custom icon for system theme (only used in three-way mode)\n   */\n  systemIcon?: React.ReactNode;\n}\n\n/**\n * An accessible theme toggle button that switches between light/dark modes.\n *\n * Uses the mieweb-ui useTheme hook for state management and persists\n * the user's preference to localStorage.\n *\n * @example\n * ```tsx\n * // Simple two-way toggle (light/dark)\n * <ThemeToggle />\n *\n * // Three-way cycle (light → dark → system)\n * <ThemeToggle mode=\"three-way\" />\n *\n * // With custom styling\n * <ThemeToggle size=\"lg\" variant=\"ghost\" />\n *\n * // Without tooltip\n * <ThemeToggle showTooltip={false} />\n * ```\n */\nconst ThemeToggle = React.forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  (\n    {\n      className,\n      size,\n      variant,\n      mode = 'two-way',\n      showTooltip = true,\n      tooltipPlacement = 'bottom',\n      tooltipDelay = 140,\n      lightIcon,\n      darkIcon,\n      systemIcon,\n      ...props\n    },\n    ref\n  ) => {\n    const { theme, setTheme, resolvedTheme } = useTheme();\n\n    const handleClick = React.useCallback(() => {\n      if (mode === 'two-way') {\n        // Simple toggle between light and dark\n        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');\n      } else {\n        // Three-way cycle: light → dark → system\n        const nextTheme: Record<Theme, Theme> = {\n          light: 'dark',\n          dark: 'system',\n          system: 'light',\n        };\n        setTheme(nextTheme[theme]);\n      }\n    }, [mode, theme, resolvedTheme, setTheme]);\n\n    const getLabel = () => {\n      if (mode === 'two-way') {\n        return resolvedTheme === 'dark'\n          ? 'Switch to light mode'\n          : 'Switch to dark mode';\n      }\n      // Three-way mode - show what the next theme will be\n      const nextThemeLabels: Record<Theme, string> = {\n        light: 'Switch to dark mode',\n        dark: 'Switch to system theme',\n        system: 'Switch to light mode',\n      };\n      return nextThemeLabels[theme];\n    };\n\n    const getCurrentIcon = () => {\n      if (mode === 'three-way' && theme === 'system') {\n        return (\n          systemIcon || (\n            <SystemIcon className={themeToggleIconVariants({ size })} />\n          )\n        );\n      }\n\n      if (resolvedTheme === 'dark') {\n        return (\n          darkIcon || <SunIcon className={themeToggleIconVariants({ size })} />\n        );\n      }\n\n      return (\n        lightIcon || <MoonIcon className={themeToggleIconVariants({ size })} />\n      );\n    };\n\n    const label = getLabel();\n\n    const button = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={label}\n        onClick={handleClick}\n        className={cn(themeToggleVariants({ size, variant }), className)}\n        {...props}\n      >\n        {getCurrentIcon()}\n      </button>\n    );\n\n    if (showTooltip) {\n      return (\n        <Tooltip\n          content={label}\n          placement={tooltipPlacement}\n          delay={tooltipDelay}\n        >\n          {button}\n        </Tooltip>\n      );\n    }\n\n    return button;\n  }\n);\n\nThemeToggle.displayName = 'ThemeToggle';\n\nexport { ThemeToggle, themeToggleVariants, themeToggleIconVariants };\n"]}

package/dist/chunk-JHPFOG2N.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/ThemeProvider/ThemeProvider.tsx","../src/components/ThemeProvider/ThemeToggle.tsx"],"names":["React","useTheme","jsx","cva","React2","cn","Tooltip"],"mappings":"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","file":"chunk-JHPFOG2N.cjs","sourcesContent":["import * as React from 'react';\nimport { useTheme, type Theme, type ResolvedTheme } from '../../hooks/useTheme';\n\nexport interface ThemeProviderContextValue {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: ResolvedTheme;\n}\n\nconst ThemeProviderContext = React.createContext<\n  ThemeProviderContextValue | undefined\n>(undefined);\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode;\n  /** Default theme to use on first load */\n  defaultTheme?: Theme;\n  /** Storage key for persisting theme */\n  storageKey?: string;\n}\n\n/**\n * Provider component that wraps your app to enable theme switching.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <ThemeProvider defaultTheme=\"system\">\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n * ```\n */\nfunction ThemeProvider({\n  children,\n  defaultTheme: _defaultTheme = 'system',\n}: ThemeProviderProps) {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n\n  const value = React.useMemo(\n    () => ({ theme, setTheme, resolvedTheme }),\n    [theme, setTheme, resolvedTheme]\n  );\n\n  return (\n    <ThemeProviderContext.Provider value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n\nThemeProvider.displayName = 'ThemeProvider';\n\n/**\n * Hook to access the theme context.\n *\n * @example\n * ```tsx\n * function ThemeToggle() {\n *   const { theme, setTheme, resolvedTheme } = useThemeContext();\n *   return (\n *     <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>\n *       Toggle theme\n *     </button>\n *   );\n * }\n * ```\n */\nfunction useThemeContext(): ThemeProviderContextValue {\n  const context = React.useContext(ThemeProviderContext);\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider');\n  }\n  return context;\n}\n\nexport { ThemeProvider, ThemeProviderContext, useThemeContext };\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useTheme, type Theme } from '../../hooks/useTheme';\nimport { Tooltip } from '../Tooltip';\n\n// ============================================================================\n// Theme Toggle Variants\n// ============================================================================\n\nconst themeToggleVariants = cva(\n  [\n    'inline-flex items-center justify-center',\n    'rounded-md border transition-colors',\n    'focus:outline-none focus:ring-2 focus:ring-primary-500/40',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-7 w-7',\n        md: 'h-8 w-8',\n        lg: 'h-9 w-9',\n      },\n      variant: {\n        default: [\n          'border-neutral-300 bg-white text-neutral-600 shadow-sm',\n          'hover:bg-neutral-100',\n          'dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n        ghost: [\n          'border-transparent bg-transparent text-neutral-600',\n          'hover:bg-neutral-100',\n          'dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nconst themeToggleIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'h-3.5 w-3.5',\n      md: 'h-4 w-4',\n      lg: 'h-5 w-5',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n// ============================================================================\n// Icon Components\n// ============================================================================\n\ninterface IconProps {\n  className?: string;\n}\n\nconst SunIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\n    />\n  </svg>\n);\n\nconst MoonIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n    />\n  </svg>\n);\n\nconst SystemIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// ThemeToggle Component\n// ============================================================================\n\nexport interface ThemeToggleProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    VariantProps<typeof themeToggleVariants> {\n  /**\n   * What themes to cycle through.\n   * - 'two-way': Toggle between light and dark only\n   * - 'three-way': Cycle through light → dark → system\n   * @default 'two-way'\n   */\n  mode?: 'two-way' | 'three-way';\n  /**\n   * Whether to show a tooltip with the current/next theme\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Tooltip placement\n   * @default 'bottom'\n   */\n  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * Delay before showing tooltip in ms\n   * @default 140\n   */\n  tooltipDelay?: number;\n  /**\n   * Custom icon for light theme\n   */\n  lightIcon?: React.ReactNode;\n  /**\n   * Custom icon for dark theme\n   */\n  darkIcon?: React.ReactNode;\n  /**\n   * Custom icon for system theme (only used in three-way mode)\n   */\n  systemIcon?: React.ReactNode;\n}\n\n/**\n * An accessible theme toggle button that switches between light/dark modes.\n *\n * Uses the mieweb-ui useTheme hook for state management and persists\n * the user's preference to localStorage.\n *\n * @example\n * ```tsx\n * // Simple two-way toggle (light/dark)\n * <ThemeToggle />\n *\n * // Three-way cycle (light → dark → system)\n * <ThemeToggle mode=\"three-way\" />\n *\n * // With custom styling\n * <ThemeToggle size=\"lg\" variant=\"ghost\" />\n *\n * // Without tooltip\n * <ThemeToggle showTooltip={false} />\n * ```\n */\nconst ThemeToggle = React.forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  (\n    {\n      className,\n      size,\n      variant,\n      mode = 'two-way',\n      showTooltip = true,\n      tooltipPlacement = 'bottom',\n      tooltipDelay = 140,\n      lightIcon,\n      darkIcon,\n      systemIcon,\n      ...props\n    },\n    ref\n  ) => {\n    const { theme, setTheme, resolvedTheme } = useTheme();\n\n    const handleClick = React.useCallback(() => {\n      if (mode === 'two-way') {\n        // Simple toggle between light and dark\n        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');\n      } else {\n        // Three-way cycle: light → dark → system\n        const nextTheme: Record<Theme, Theme> = {\n          light: 'dark',\n          dark: 'system',\n          system: 'light',\n        };\n        setTheme(nextTheme[theme]);\n      }\n    }, [mode, theme, resolvedTheme, setTheme]);\n\n    const getLabel = () => {\n      if (mode === 'two-way') {\n        return resolvedTheme === 'dark'\n          ? 'Switch to light mode'\n          : 'Switch to dark mode';\n      }\n      // Three-way mode - show what the next theme will be\n      const nextThemeLabels: Record<Theme, string> = {\n        light: 'Switch to dark mode',\n        dark: 'Switch to system theme',\n        system: 'Switch to light mode',\n      };\n      return nextThemeLabels[theme];\n    };\n\n    const getCurrentIcon = () => {\n      if (mode === 'three-way' && theme === 'system') {\n        return (\n          systemIcon || (\n            <SystemIcon className={themeToggleIconVariants({ size })} />\n          )\n        );\n      }\n\n      if (resolvedTheme === 'dark') {\n        return (\n          darkIcon || <SunIcon className={themeToggleIconVariants({ size })} />\n        );\n      }\n\n      return (\n        lightIcon || <MoonIcon className={themeToggleIconVariants({ size })} />\n      );\n    };\n\n    const label = getLabel();\n\n    const button = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={label}\n        onClick={handleClick}\n        className={cn(themeToggleVariants({ size, variant }), className)}\n        {...props}\n      >\n        {getCurrentIcon()}\n      </button>\n    );\n\n    if (showTooltip) {\n      return (\n        <Tooltip\n          content={label}\n          placement={tooltipPlacement}\n          delay={tooltipDelay}\n        >\n          {button}\n        </Tooltip>\n      );\n    }\n\n    return button;\n  }\n);\n\nThemeToggle.displayName = 'ThemeToggle';\n\nexport { ThemeToggle, themeToggleVariants, themeToggleIconVariants };\n"]}