@veluai/velu 0.1.13 → 0.1.15

package/runtime/velu-ui/components/ThemeToggle.jsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import { Sun, Moon } from 'lucide-react';
-
-/**
- * ThemeToggle — pill-shaped two-state light/dark switch. The thumb
- * sits at the inline-start in light mode and slides to the inline-end
- * in dark mode. A sun glyph rides the thumb in light, a moon in dark.
- *
- * SSR-safe by design: markup is identical regardless of theme (the
- * server doesn't know it), and the thumb position + which glyph shows
- * are decided purely by CSS via the `[data-theme]` attribute — NOT by
- * React state. So there is no hydration mismatch and no icon flash. JS
- * only handles the click: it flips `data-theme` and persists the
- * explicit choice (which then overrides the OS preference on future
- * visits, per the anti-flash script in the template).
- */
-export default function ThemeToggle({ className = '', ...rest }) {
-  function toggle() {
-    const root = document.documentElement;
-    const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
-    root.dataset.theme = next;
-    try {
-      localStorage.setItem('velu-theme', next);
-    } catch {
-      /* private mode / storage disabled — toggle still works for the session */
-    }
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={toggle}
-      aria-label="Toggle color theme"
-      title="Toggle color theme"
-      className={`velu-theme-toggle ${className}`.trim()}
-      {...rest}
-    >
-      <Sun
-        className="velu-theme-toggle__icon velu-theme-toggle__icon--sun"
-        aria-hidden="true"
-      />
-      <Moon
-        className="velu-theme-toggle__icon velu-theme-toggle__icon--moon"
-        aria-hidden="true"
-      />
-    </button>
-  );
-}
+import React from 'react';
+import { Sun, Moon } from 'lucide-react';
+
+/**
+ * ThemeToggle — pill-shaped two-state light/dark switch. The thumb
+ * sits at the inline-start in light mode and slides to the inline-end
+ * in dark mode. A sun glyph rides the thumb in light, a moon in dark.
+ *
+ * SSR-safe by design: markup is identical regardless of theme (the
+ * server doesn't know it), and the thumb position + which glyph shows
+ * are decided purely by CSS via the `[data-theme]` attribute — NOT by
+ * React state. So there is no hydration mismatch and no icon flash. JS
+ * only handles the click: it flips `data-theme` and persists the
+ * explicit choice (which then overrides the OS preference on future
+ * visits, per the anti-flash script in the template).
+ */
+export default function ThemeToggle({ className = '', ...rest }) {
+  function toggle() {
+    const root = document.documentElement;
+    const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
+    root.dataset.theme = next;
+    try {
+      localStorage.setItem('velu-theme', next);
+    } catch {
+      /* private mode / storage disabled — toggle still works for the session */
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-label="Toggle color theme"
+      title="Toggle color theme"
+      className={`velu-theme-toggle ${className}`.trim()}
+      {...rest}
+    >
+      <Sun
+        className="velu-theme-toggle__icon velu-theme-toggle__icon--sun"
+        aria-hidden="true"
+      />
+      <Moon
+        className="velu-theme-toggle__icon velu-theme-toggle__icon--moon"
+        aria-hidden="true"
+      />
+    </button>
+  );
+}