@vritti/quantum-ui 0.2.6 → 0.2.8

package/dist/ThemeContext.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useLayoutEffect, useCallback, useMemo } from 'react';
+
+const THEME_STORAGE_KEY = "theme";
+const ThemeContext = createContext(null);
+ThemeContext.displayName = "ThemeContext";
+function getInitialTheme(storageKey, defaultTheme) {
+  if (typeof window !== "undefined") {
+    const savedTheme = localStorage.getItem(storageKey);
+    if (savedTheme === "dark" || savedTheme === "light") {
+      return savedTheme;
+    }
+  }
+  if (defaultTheme) {
+    return defaultTheme;
+  }
+  if (typeof window !== "undefined") {
+    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return systemPrefersDark ? "dark" : "light";
+  }
+  return "light";
+}
+function ThemeProvider({
+  children,
+  defaultTheme,
+  storageKey = THEME_STORAGE_KEY
+}) {
+  const [theme, setThemeState] = useState(
+    () => getInitialTheme(storageKey, defaultTheme)
+  );
+  useLayoutEffect(() => {
+    const isDark = theme === "dark";
+    document.documentElement.classList.toggle("dark", isDark);
+  }, [theme]);
+  useLayoutEffect(() => {
+    localStorage.setItem(storageKey, theme);
+  }, [theme, storageKey]);
+  const setTheme = useCallback((newTheme) => {
+    setThemeState(newTheme);
+  }, []);
+  const toggleTheme = useCallback(() => {
+    setThemeState((currentTheme) => currentTheme === "dark" ? "light" : "dark");
+  }, []);
+  const value = useMemo(
+    () => ({
+      theme,
+      toggleTheme,
+      setTheme
+    }),
+    [theme, toggleTheme, setTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+ThemeProvider.displayName = "ThemeProvider";
+
+export { ThemeContext as T, ThemeProvider as a };
+//# sourceMappingURL=ThemeContext.js.map

package/dist/ThemeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.js","sources":["../lib/context/ThemeContext.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\n\n/**\n * Theme mode type - either 'light' or 'dark'\n */\nexport type ThemeMode = 'light' | 'dark';\n\n/**\n * Shape of the theme context value\n */\nexport interface ThemeContextValue {\n  /** Current theme mode ('light' or 'dark') */\n  theme: ThemeMode;\n  /** Function to toggle between light and dark themes */\n  toggleTheme: () => void;\n  /** Function to set a specific theme */\n  setTheme: (theme: ThemeMode) => void;\n}\n\n/**\n * Props for the ThemeProvider component\n */\nexport interface ThemeProviderProps {\n  /** Child components that will have access to the theme context */\n  children: ReactNode;\n  /** Optional initial theme (defaults to system preference or localStorage) */\n  defaultTheme?: ThemeMode;\n  /** localStorage key for persisting theme preference */\n  storageKey?: string;\n}\n\nconst THEME_STORAGE_KEY = 'theme';\n\n/**\n * Theme context for sharing theme state across components.\n * Use the useTheme hook to access this context.\n */\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nThemeContext.displayName = 'ThemeContext';\n\n/**\n * Determines the initial theme based on localStorage and system preferences.\n * @param storageKey - The localStorage key to check for saved theme\n * @param defaultTheme - Optional default theme to use if no preference is found\n * @returns The determined initial theme\n */\nfunction getInitialTheme(storageKey: string, defaultTheme?: ThemeMode): ThemeMode {\n  // Check for saved theme in localStorage\n  if (typeof window !== 'undefined') {\n    const savedTheme = localStorage.getItem(storageKey);\n    if (savedTheme === 'dark' || savedTheme === 'light') {\n      return savedTheme;\n    }\n  }\n\n  // Use default theme if provided\n  if (defaultTheme) {\n    return defaultTheme;\n  }\n\n  // Fall back to system preference\n  if (typeof window !== 'undefined') {\n    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n    return systemPrefersDark ? 'dark' : 'light';\n  }\n\n  // Ultimate fallback\n  return 'light';\n}\n\n/**\n * ThemeProvider component that manages theme state and provides it to the component tree.\n *\n * Features:\n * - Single source of truth for theme state\n * - Persists theme preference to localStorage\n * - Detects system color scheme preference on initial load\n * - Toggles the 'dark' class on document.documentElement\n * - Avoids flash of incorrect theme using useLayoutEffect\n *\n * @example\n * ```tsx\n * // Wrap your app with ThemeProvider\n * function App() {\n *   return (\n *     <ThemeProvider>\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n *\n * // With default theme\n * <ThemeProvider defaultTheme=\"dark\">\n *   <YourApp />\n * </ThemeProvider>\n *\n * // With custom storage key\n * <ThemeProvider storageKey=\"my-app-theme\">\n *   <YourApp />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider({\n  children,\n  defaultTheme,\n  storageKey = THEME_STORAGE_KEY,\n}: ThemeProviderProps) {\n  const [theme, setThemeState] = useState<ThemeMode>(() =>\n    getInitialTheme(storageKey, defaultTheme)\n  );\n\n  // Apply theme to document on initial mount and when theme changes\n  useLayoutEffect(() => {\n    const isDark = theme === 'dark';\n    document.documentElement.classList.toggle('dark', isDark);\n  }, [theme]);\n\n  // Persist to localStorage whenever theme changes\n  useLayoutEffect(() => {\n    localStorage.setItem(storageKey, theme);\n  }, [theme, storageKey]);\n\n  const setTheme = useCallback((newTheme: ThemeMode) => {\n    setThemeState(newTheme);\n  }, []);\n\n  const toggleTheme = useCallback(() => {\n    setThemeState((currentTheme) => (currentTheme === 'dark' ? 'light' : 'dark'));\n  }, []);\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({\n      theme,\n      toggleTheme,\n      setTheme,\n    }),\n    [theme, toggleTheme, setTheme]\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nThemeProvider.displayName = 'ThemeProvider';\n"],"names":[],"mappings":";;;AAsCA,MAAM,iBAAA,GAAoB,OAAA;AAMnB,MAAM,YAAA,GAAe,cAAwC,IAAI;AAExE,YAAA,CAAa,WAAA,GAAc,cAAA;AAQ3B,SAAS,eAAA,CAAgB,YAAoB,YAAA,EAAqC;AAEhF,EAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,IAAA,MAAM,UAAA,GAAa,YAAA,CAAa,OAAA,CAAQ,UAAU,CAAA;AAClD,IAAA,IAAI,UAAA,KAAe,MAAA,IAAU,UAAA,KAAe,OAAA,EAAS;AACnD,MAAA,OAAO,UAAA;AAAA,IACT;AAAA,EACF;AAGA,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,OAAO,YAAA;AAAA,EACT;AAGA,EAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,IAAA,MAAM,iBAAA,GAAoB,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,OAAA;AAC5E,IAAA,OAAO,oBAAoB,MAAA,GAAS,OAAA;AAAA,EACtC;AAGA,EAAA,OAAO,OAAA;AACT;AAkCO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,KAAA,EAAO,aAAa,CAAA,GAAI,QAAA;AAAA,IAAoB,MACjD,eAAA,CAAgB,UAAA,EAAY,YAAY;AAAA,GAC1C;AAGA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,SAAS,KAAA,KAAU,MAAA;AACzB,IAAA,QAAA,CAAS,eAAA,CAAgB,SAAA,CAAU,MAAA,CAAO,MAAA,EAAQ,MAAM,CAAA;AAAA,EAC1D,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAGV,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,YAAA,CAAa,OAAA,CAAQ,YAAY,KAAK,CAAA;AAAA,EACxC,CAAA,EAAG,CAAC,KAAA,EAAO,UAAU,CAAC,CAAA;AAEtB,EAAA,MAAM,QAAA,GAAW,WAAA,CAAY,CAAC,QAAA,KAAwB;AACpD,IAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,EACxB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,aAAA,CAAc,CAAC,YAAA,KAAkB,YAAA,KAAiB,MAAA,GAAS,UAAU,MAAO,CAAA;AAAA,EAC9E,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,IACZ,OAAO;AAAA,MACL,KAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,WAAA,EAAa,QAAQ;AAAA,GAC/B;AAEA,EAAA,uBAAO,GAAA,CAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,OAAe,QAAA,EAAS,CAAA;AACxD;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;;;;"}

package/dist/ThemeToggle.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useLayoutEffect } from 'react';
+import { u as useTheme } from './useTheme.js';
 import { B as Button } from './Button.js';
 import { c as createLucideIcon } from './createLucideIcon.js';
 
@@ -44,20 +44,8 @@ const __iconNode = [
 const Sun = createLucideIcon("sun", __iconNode);
 
 const ThemeToggle = ({ className, size = "md" }) => {
-  const [isDarkMode, setIsDarkMode] = useState(false);
-  useLayoutEffect(() => {
-    const savedTheme = localStorage.getItem("theme");
-    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    const shouldUseDark = savedTheme === "dark" || !savedTheme && systemPrefersDark;
-    setIsDarkMode(shouldUseDark);
-    document.documentElement.classList.toggle("dark", shouldUseDark);
-  }, []);
-  const toggleTheme = () => {
-    const newDarkMode = !isDarkMode;
-    setIsDarkMode(newDarkMode);
-    document.documentElement.classList.toggle("dark", newDarkMode);
-    localStorage.setItem("theme", newDarkMode ? "dark" : "light");
-  };
+  const { theme, toggleTheme } = useTheme();
+  const isDarkMode = theme === "dark";
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -85,6 +73,7 @@ const ThemeToggle = ({ className, size = "md" }) => {
     }
   );
 };
+ThemeToggle.displayName = "ThemeToggle";
 
 export { ThemeToggle as T };
 //# sourceMappingURL=ThemeToggle.js.map

package/dist/ThemeToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.js","sources":["../node_modules/.pnpm/lucide-react@0.562.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/moon.js","../node_modules/.pnpm/lucide-react@0.562.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/sun.js","../lib/components/ThemeToggle/ThemeToggle.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.562.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\n    \"path\",\n    {\n      d: \"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\",\n      key: \"kfwtm\"\n    }\n  ]\n];\nconst Moon = createLucideIcon(\"moon\", __iconNode);\n\nexport { __iconNode, Moon as default };\n//# sourceMappingURL=moon.js.map\n","/**\n * @license lucide-react v0.562.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"circle\", { cx: \"12\", cy: \"12\", r: \"4\", key: \"4exip2\" }],\n  [\"path\", { d: \"M12 2v2\", key: \"tus03m\" }],\n  [\"path\", { d: \"M12 20v2\", key: \"1lh1kg\" }],\n  [\"path\", { d: \"m4.93 4.93 1.41 1.41\", key: \"149t6j\" }],\n  [\"path\", { d: \"m17.66 17.66 1.41 1.41\", key: \"ptbguv\" }],\n  [\"path\", { d: \"M2 12h2\", key: \"1t8f8n\" }],\n  [\"path\", { d: \"M20 12h2\", key: \"1q8mjw\" }],\n  [\"path\", { d: \"m6.34 17.66-1.41 1.41\", key: \"1m8zz5\" }],\n  [\"path\", { d: \"m19.07 4.93-1.41 1.41\", key: \"1shlcs\" }]\n];\nconst Sun = createLucideIcon(\"sun\", __iconNode);\n\nexport { __iconNode, Sun as default };\n//# sourceMappingURL=sun.js.map\n","import { Moon, Sun } from 'lucide-react';\nimport type React from 'react';\nimport { useLayoutEffect, useState } from 'react';\nimport { Button } from '../Button/Button';\n\nexport interface ThemeToggleProps {\n  /**\n   * Custom className for the toggle button\n   */\n  className?: string;\n\n  /**\n   * Size of the toggle button\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const ThemeToggle: React.FC<ThemeToggleProps> = ({ className, size = 'md' }) => {\n  const [isDarkMode, setIsDarkMode] = useState(false);\n\n  useLayoutEffect(() => {\n    // Check for saved theme preference or system preference\n    const savedTheme = localStorage.getItem('theme');\n    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n    const shouldUseDark = savedTheme === 'dark' || (!savedTheme && systemPrefersDark);\n\n    setIsDarkMode(shouldUseDark);\n    document.documentElement.classList.toggle('dark', shouldUseDark);\n  }, []);\n\n  const toggleTheme = () => {\n    const newDarkMode = !isDarkMode;\n    setIsDarkMode(newDarkMode);\n\n    // Update DOM and localStorage\n    document.documentElement.classList.toggle('dark', newDarkMode);\n    localStorage.setItem('theme', newDarkMode ? 'dark' : 'light');\n  };\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size={size === 'md' ? 'default' : size}\n      onClick={toggleTheme}\n      className={`text-foreground ${className}`}\n      aria-label={`Switch to ${isDarkMode ? 'light' : 'dark'} theme`}\n    >\n      <Sun\n        className={`h-4 w-4 transition-all ${isDarkMode ? 'scale-0 -rotate-90' : 'scale-100 rotate-0'}`}\n        aria-hidden\n      />\n      <Moon\n        className={`absolute h-4 w-4 transition-all ${isDarkMode ? 'scale-100 rotate-0' : 'scale-0 rotate-90'}`}\n        aria-hidden\n      />\n    </Button>\n  );\n};\n"],"names":["__iconNode"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"ThemeToggle.js","sources":["../node_modules/.pnpm/lucide-react@0.562.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/moon.js","../node_modules/.pnpm/lucide-react@0.562.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/sun.js","../lib/components/ThemeToggle/ThemeToggle.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.562.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\n    \"path\",\n    {\n      d: \"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\",\n      key: \"kfwtm\"\n    }\n  ]\n];\nconst Moon = createLucideIcon(\"moon\", __iconNode);\n\nexport { __iconNode, Moon as default };\n//# sourceMappingURL=moon.js.map\n","/**\n * @license lucide-react v0.562.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"circle\", { cx: \"12\", cy: \"12\", r: \"4\", key: \"4exip2\" }],\n  [\"path\", { d: \"M12 2v2\", key: \"tus03m\" }],\n  [\"path\", { d: \"M12 20v2\", key: \"1lh1kg\" }],\n  [\"path\", { d: \"m4.93 4.93 1.41 1.41\", key: \"149t6j\" }],\n  [\"path\", { d: \"m17.66 17.66 1.41 1.41\", key: \"ptbguv\" }],\n  [\"path\", { d: \"M2 12h2\", key: \"1t8f8n\" }],\n  [\"path\", { d: \"M20 12h2\", key: \"1q8mjw\" }],\n  [\"path\", { d: \"m6.34 17.66-1.41 1.41\", key: \"1m8zz5\" }],\n  [\"path\", { d: \"m19.07 4.93-1.41 1.41\", key: \"1shlcs\" }]\n];\nconst Sun = createLucideIcon(\"sun\", __iconNode);\n\nexport { __iconNode, Sun as default };\n//# sourceMappingURL=sun.js.map\n","import { Moon, Sun } from 'lucide-react';\nimport type React from 'react';\nimport { useTheme } from '../../hooks/useTheme';\nimport { Button } from '../Button/Button';\n\nexport interface ThemeToggleProps {\n  /**\n   * Custom className for the toggle button\n   */\n  className?: string;\n\n  /**\n   * Size of the toggle button\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * ThemeToggle component for switching between light and dark themes.\n *\n * Uses the useTheme hook internally for theme state management.\n *\n * @example\n * ```tsx\n * <ThemeToggle />\n * <ThemeToggle size=\"lg\" className=\"custom-class\" />\n * ```\n */\nexport const ThemeToggle: React.FC<ThemeToggleProps> = ({ className, size = 'md' }) => {\n  const { theme, toggleTheme } = useTheme();\n  const isDarkMode = theme === 'dark';\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size={size === 'md' ? 'default' : size}\n      onClick={toggleTheme}\n      className={`text-foreground ${className}`}\n      aria-label={`Switch to ${isDarkMode ? 'light' : 'dark'} theme`}\n    >\n      <Sun\n        className={`h-4 w-4 transition-all ${isDarkMode ? 'scale-0 -rotate-90' : 'scale-100 rotate-0'}`}\n        aria-hidden\n      />\n      <Moon\n        className={`absolute h-4 w-4 transition-all ${isDarkMode ? 'scale-100 rotate-0' : 'scale-0 rotate-90'}`}\n        aria-hidden\n      />\n    </Button>\n  );\n};\n\nThemeToggle.displayName = 'ThemeToggle';\n"],"names":["__iconNode"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;;;AAIA,MAAMA,YAAU,GAAG;AACnB,EAAE;AACF,IAAI,MAAM;AACV,IAAI;AACJ,MAAM,CAAC,EAAE,gHAAgH;AACzH,MAAM,GAAG,EAAE;AACX;AACA;AACA,CAAC;AACD,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,EAAEA,YAAU,CAAC;;AClBjD;AACA;AACA;AACA;AACA;AACA;;;AAIA,MAAM,UAAU,GAAG;AACnB,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AAC3D,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AAC3C,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AAC5C,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,sBAAsB,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AACxD,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,wBAAwB,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AAC1D,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AAC3C,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AAC5C,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,uBAAuB,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AACzD,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,uBAAuB,EAAE,GAAG,EAAE,QAAQ,EAAE;AACxD,CAAC;AACD,MAAM,GAAG,GAAG,gBAAgB,CAAC,KAAK,EAAE,UAAU,CAAC;;ACQxC,MAAM,cAA0C,CAAC,EAAE,SAAA,EAAW,IAAA,GAAO,MAAK,KAAM;AACrF,EAAA,MAAM,EAAE,KAAA,EAAO,WAAA,EAAY,GAAI,QAAA,EAAS;AACxC,EAAA,MAAM,aAAa,KAAA,KAAU,MAAA;AAE7B,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,OAAA;AAAA,MACR,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,OAAA,EAAS,WAAA;AAAA,MACT,SAAA,EAAW,mBAAmB,SAAS,CAAA,CAAA;AAAA,MACvC,YAAA,EAAY,CAAA,UAAA,EAAa,UAAA,GAAa,OAAA,GAAU,MAAM,CAAA,MAAA,CAAA;AAAA,MAEtD,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,CAAA,uBAAA,EAA0B,UAAA,GAAa,oBAAA,GAAuB,oBAAoB,CAAA,CAAA;AAAA,YAC7F,aAAA,EAAW;AAAA;AAAA,SACb;AAAA,wBACA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,CAAA,gCAAA,EAAmC,UAAA,GAAa,oBAAA,GAAuB,mBAAmB,CAAA,CAAA;AAAA,YACrG,aAAA,EAAW;AAAA;AAAA;AACb;AAAA;AAAA,GACF;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;","x_google_ignoreList":[0,1]}

package/dist/Toggle.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { u as useControllableState, P as Primitive, c as composeEventHandlers } from './index12.js';
+import { c as cva } from './index8.js';
+import { c as cn } from './utils.js';
+
+var NAME = "Toggle";
+var Toggle$2 = React.forwardRef((props, forwardedRef) => {
+  const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props;
+  const [pressed, setPressed] = useControllableState({
+    prop: pressedProp,
+    onChange: onPressedChange,
+    defaultProp: defaultPressed ?? false,
+    caller: NAME
+  });
+  return /* @__PURE__ */ jsx(
+    Primitive.button,
+    {
+      type: "button",
+      "aria-pressed": pressed,
+      "data-state": pressed ? "on" : "off",
+      "data-disabled": props.disabled ? "" : void 0,
+      ...buttonProps,
+      ref: forwardedRef,
+      onClick: composeEventHandlers(props.onClick, () => {
+        if (!props.disabled) {
+          setPressed(!pressed);
+        }
+      })
+    }
+  );
+});
+Toggle$2.displayName = NAME;
+var Root = Toggle$2;
+
+const toggleVariants$1 = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle$1({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Root, { "data-slot": "toggle", className: cn(toggleVariants$1({ variant, size, className })), ...props });
+}
+
+const Toggle = Toggle$1;
+const toggleVariants = toggleVariants$1;
+
+export { Toggle as T, toggleVariants as t };
+//# sourceMappingURL=Toggle.js.map

package/dist/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../node_modules/.pnpm/@radix-ui+react-toggle@1.1.10_@types+react-dom@19.2.3_@types+react@19.2.9__@types+react_5be2ba4619ea932b5b17927c79378d5f/node_modules/@radix-ui/react-toggle/dist/index.mjs","../shadcn/shadcnToggle/Toggle.tsx","../lib/components/Toggle/Toggle.tsx"],"sourcesContent":["\"use client\";\n\n// src/toggle.tsx\nimport * as React from \"react\";\nimport { composeEventHandlers } from \"@radix-ui/primitive\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { Primitive } from \"@radix-ui/react-primitive\";\nimport { jsx } from \"react/jsx-runtime\";\nvar NAME = \"Toggle\";\nvar Toggle = React.forwardRef((props, forwardedRef) => {\n  const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props;\n  const [pressed, setPressed] = useControllableState({\n    prop: pressedProp,\n    onChange: onPressedChange,\n    defaultProp: defaultPressed ?? false,\n    caller: NAME\n  });\n  return /* @__PURE__ */ jsx(\n    Primitive.button,\n    {\n      type: \"button\",\n      \"aria-pressed\": pressed,\n      \"data-state\": pressed ? \"on\" : \"off\",\n      \"data-disabled\": props.disabled ? \"\" : void 0,\n      ...buttonProps,\n      ref: forwardedRef,\n      onClick: composeEventHandlers(props.onClick, () => {\n        if (!props.disabled) {\n          setPressed(!pressed);\n        }\n      })\n    }\n  );\n});\nToggle.displayName = NAME;\nvar Root = Toggle;\nexport {\n  Root,\n  Toggle\n};\n//# sourceMappingURL=index.mjs.map\n","'use client';\n\nimport * as TogglePrimitive from '@radix-ui/react-toggle';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nimport { cn } from '../utils';\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root data-slot=\"toggle\" className={cn(toggleVariants({ variant, size, className }))} {...props} />\n  );\n}\n\nexport { Toggle, toggleVariants };\n","import { Toggle as ShadcnToggle, toggleVariants as shadcnToggleVariants } from '../../../shadcn/shadcnToggle';\n\n/**\n * Toggle component - a two-state button for UI state changes (like toolbar buttons).\n *\n * **IMPORTANT: Toggle is NOT designed for form submission.**\n * - Toggle uses `pressed`/`onPressedChange` semantics (UI state, not form data)\n * - It doesn't provide `name`/`value` props required for form fields\n * - **For form-based on/off fields, use the `Switch` component instead**\n *\n * **Use Toggle for:**\n * - Toolbar buttons (bold, italic, underline in text editors)\n * - UI state toggles (show/hide panels, enable/disable features)\n * - Button-like interactions that don't need form submission\n *\n * **Use Switch for:**\n * - Form fields with on/off states\n * - Settings that need to be submitted with form data\n * - Fields that require validation and error display\n *\n * @example\n * ```tsx\n * // Toolbar button (Toggle) - CORRECT usage\n * <Toggle aria-label=\"Toggle italic\" onPressedChange={setItalic}>\n *   <Italic className=\"h-4 w-4\" />\n * </Toggle>\n *\n * // Form field (Switch) - CORRECT usage\n * <Form form={form} onSubmit={handleSubmit}>\n *   <Switch name=\"notifications\" label=\"Enable notifications\" />\n * </Form>\n *\n * // ❌ INCORRECT - Don't use Toggle in forms\n * <Form form={form} onSubmit={handleSubmit}>\n *   <Toggle>Notifications</Toggle> // Won't work - use Switch instead\n * </Form>\n * ```\n */\nexport const Toggle = ShadcnToggle;\n\n/**\n * Toggle variants for custom styling.\n * Can be used with `cn()` to create custom toggle styles.\n */\nexport const toggleVariants = shadcnToggleVariants;\n"],"names":["Toggle","toggleVariants","TogglePrimitive.Root","ShadcnToggle","shadcnToggleVariants"],"mappings":";;;;;;AAQA,IAAI,IAAI,GAAG,QAAQ;AACnB,IAAIA,QAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK;AACvD,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK;AACzF,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC;AACrD,IAAI,IAAI,EAAE,WAAW;AACrB,IAAI,QAAQ,EAAE,eAAe;AAC7B,IAAI,WAAW,EAAE,cAAc,IAAI,KAAK;AACxC,IAAI,MAAM,EAAE;AACZ,GAAG,CAAC;AACJ,EAAE,uBAAuB,GAAG;AAC5B,IAAI,SAAS,CAAC,MAAM;AACpB,IAAI;AACJ,MAAM,IAAI,EAAE,QAAQ;AACpB,MAAM,cAAc,EAAE,OAAO;AAC7B,MAAM,YAAY,EAAE,OAAO,GAAG,IAAI,GAAG,KAAK;AAC1C,MAAM,eAAe,EAAE,KAAK,CAAC,QAAQ,GAAG,EAAE,GAAG,MAAM;AACnD,MAAM,GAAG,WAAW;AACpB,MAAM,GAAG,EAAE,YAAY;AACvB,MAAM,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM;AACzD,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AAC7B,UAAU,UAAU,CAAC,CAAC,OAAO,CAAC;AAC9B,QAAQ;AACR,MAAM,CAAC;AACP;AACA,GAAG;AACH,CAAC,CAAC;AACFA,QAAM,CAAC,WAAW,GAAG,IAAI;AACzB,IAAI,IAAI,GAAGA,QAAM;;AC3BjB,MAAMC,gBAAA,GAAiB,GAAA;AAAA,EACrB,+iBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,gBAAA;AAAA,QACT,OAAA,EAAS;AAAA,OACX;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,kBAAA;AAAA,QACT,EAAA,EAAI,oBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAEA,SAASD,QAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4F;AAC1F,EAAA,2BACGE,IAAgB,EAAhB,EAAqB,WAAA,EAAU,UAAS,SAAA,EAAW,EAAA,CAAGD,gBAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAErH;;ACAO,MAAM,MAAA,GAASE;AAMf,MAAM,cAAA,GAAiBC;;;;","x_google_ignoreList":[0]}

package/dist/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs as g };
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_commonjsHelpers.js.map

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

package/dist/assets/quantum-ui.css

@@ -161,6 +161,8 @@
   --warning-foreground: oklch(0.2302 0.0547 256.1829);
   --success: oklch(0.65 0.15 145);
   --success-foreground: oklch(1 0 0);
+  --info: oklch(0.65 0.15 200);
+  --info-foreground: oklch(1 0 0);
   --border: oklch(0.9467 0.0207 248.0465);
   --input: oklch(0.9467 0.0207 248.0465);
   --ring: oklch(0.5789 0.1833 256.2496);
@@ -190,20 +192,20 @@
   --shadow-2xs: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.04);
   --shadow-xs: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.04);
   --shadow-sm:
-    0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08), 0rem 1px 2px -0.75px
-    hsl(214.0909 68.7500% 12.5490% / 0.08);
+    0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08),
+    0rem 1px 2px -0.75px hsl(214.0909 68.7500% 12.5490% / 0.08);
   --shadow:
-    0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08), 0rem 1px 2px -0.75px
-    hsl(214.0909 68.7500% 12.5490% / 0.08);
+    0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08),
+    0rem 1px 2px -0.75px hsl(214.0909 68.7500% 12.5490% / 0.08);
   --shadow-md:
-    0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08), 0rem 2px 4px -0.75px
-    hsl(214.0909 68.7500% 12.5490% / 0.08);
+    0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08),
+    0rem 2px 4px -0.75px hsl(214.0909 68.7500% 12.5490% / 0.08);
   --shadow-lg:
-    0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08), 0rem 4px 6px -0.75px
-    hsl(214.0909 68.7500% 12.5490% / 0.08);
+    0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08),
+    0rem 4px 6px -0.75px hsl(214.0909 68.7500% 12.5490% / 0.08);
   --shadow-xl:
-    0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08), 0rem 8px 10px -0.75px
-    hsl(214.0909 68.7500% 12.5490% / 0.08);
+    0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08),
+    0rem 8px 10px -0.75px hsl(214.0909 68.7500% 12.5490% / 0.08);
   --shadow-2xl: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.2);
   --tracking-normal: 0.01em;
   --spacing: 0.25rem;
@@ -229,6 +231,8 @@
   --warning-foreground: oklch(0.1591 0 0);
   --success: oklch(0.7 0.16 150);
   --success-foreground: oklch(0.1591 0 0);
+  --info: oklch(0.72 0.15 200);
+  --info-foreground: oklch(0.1591 0 0);
   --border: oklch(0.2931 0 0);
   --input: oklch(0.2931 0 0);
   --ring: oklch(0.5789 0.1833 256.2496);
@@ -285,6 +289,8 @@
   --color-warning-foreground: var(--warning-foreground);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -350,3 +356,46 @@ body {
     width: 100%;
   }
 }
+/* Sonner Toast Styling */
+[data-sonner-toaster] [data-sonner-toast] {
+  background-color: var(--card);
+  color: var(--card-foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+[data-sonner-toaster] [data-sonner-toast] [data-description] {
+  color: var(--muted-foreground);
+}
+[data-sonner-toaster] [data-sonner-toast][data-type="success"] {
+  border-left: 4px solid var(--success);
+}
+[data-sonner-toaster] [data-sonner-toast][data-type="error"] {
+  border-left: 4px solid var(--destructive);
+}
+[data-sonner-toaster] [data-sonner-toast][data-type="warning"] {
+  border-left: 4px solid var(--warning);
+}
+[data-sonner-toaster] [data-sonner-toast][data-type="info"] {
+  border-left: 4px solid var(--info);
+}
+[data-sonner-toaster] [data-sonner-toast][data-type="loading"] {
+  border-left: 4px solid var(--primary);
+}
+/* Override browser autofill styles */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+textarea:-webkit-autofill:active,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus,
+select:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px var(--input) inset !important;
+  -webkit-text-fill-color: var(--foreground) !important;
+  caret-color: var(--foreground) !important;
+  transition: background-color 5000s ease-in-out 0s;
+}

package/dist/axios.js

@@ -1,3 +1,5 @@
+import { g as generateToastId, t as toast } from './toast.js';
+
 const defaultConfig = {
   csrf: {
     endpoint: "/csrf/token",
@@ -4151,16 +4153,72 @@ axios.interceptors.request.use(async (config) => {
     if (!csrf) csrf = await fetchCsrfToken();
     if (csrf) config.headers[quantumConfig.csrf.headerName] = csrf;
   }
+  const loadingMessage = config.loadingMessage;
+  if (loadingMessage) {
+    const toastId = generateToastId();
+    config._toastId = toastId;
+    toast.loading(loadingMessage, { id: toastId });
+  }
   return config;
 });
 axios.interceptors.response.use(
-  (response) => response,
+  (response) => {
+    const config = response.config;
+    const method = config.method?.toUpperCase();
+    const isMutation = ["POST", "PUT", "PATCH", "DELETE"].includes(method || "");
+    const toastId = config._toastId;
+    if (toastId) {
+      const message = config.successMessage || response.data?.message;
+      if (message) {
+        toast.success(message, { id: toastId });
+      } else {
+        toast.success("Done", { id: toastId, duration: 1e3 });
+      }
+    } else {
+      const showSuccess = config.showSuccessToast ?? isMutation;
+      if (showSuccess) {
+        const message = config.successMessage || response.data?.message;
+        if (message) {
+          toast.success(message);
+        }
+      }
+    }
+    return response;
+  },
   (error) => {
-    const isPublicRequest = error.config?.public === true;
-    if (error.response?.status === 401 && !isPublicRequest) {
+    const config = error.config;
+    const showError = config?.showErrorToast ?? true;
+    const status = error.response?.status;
+    const errorData = error.response?.data;
+    const isPublicRequest = config?.public === true;
+    const toastId = config?._toastId;
+    if (status === 401 && !isPublicRequest) {
+      if (toastId) {
+        toast.error("Session expired", { id: toastId });
+      }
       clearToken();
       cancelTokenRefresh();
       redirectToLogin();
+      return Promise.reject(error);
+    }
+    if (showError && status && status >= 500) {
+      const errorMessage = errorData?.message || errorData?.detail || "Something went wrong. Please try again.";
+      if (toastId) {
+        toast.error("Server Error", { id: toastId, description: errorMessage });
+      } else {
+        toast.error("Server Error", { description: errorMessage });
+      }
+    }
+    if (showError && !error.response) {
+      if (toastId) {
+        toast.error("Network Error", { id: toastId, description: "Please check your internet connection." });
+      } else {
+        toast.error("Network Error", { description: "Please check your internet connection." });
+      }
+    }
+    if (toastId && status && status >= 400 && status < 500 && status !== 401) {
+      const errorMessage = errorData?.message || errorData?.detail || "Request failed";
+      toast.error(errorMessage, { id: toastId });
     }
     return Promise.reject(error);
   }