@hanzo/ui 8.0.7 → 8.0.11

package/dist/chunk-YBXVUV7P.cjs

@@ -0,0 +1,103 @@
+'use client';
+'use strict';
+
+var nextTheme = require('@hanzogui/next-theme');
+var react = require('react');
+var gui = require('@hanzo/gui');
+var lucideIcons2 = require('@hanzogui/lucide-icons-2');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/product/ThemeToggleNext.tsx
+var STORAGE_KEY = "theme";
+function readDomTheme() {
+  if (typeof document === "undefined") return void 0;
+  const el = document.documentElement;
+  if (el.classList.contains("dark")) return "dark";
+  if (el.classList.contains("light")) return "light";
+  try {
+    const ls = window.localStorage.getItem(STORAGE_KEY);
+    if (ls === "light" || ls === "dark") return ls;
+  } catch {
+  }
+  return void 0;
+}
+function applyDomTheme(next) {
+  if (typeof document === "undefined") return;
+  const el = document.documentElement;
+  el.classList.toggle("dark", next === "dark");
+  el.classList.toggle("light", next === "light");
+  el.style.colorScheme = next;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, next);
+  } catch {
+  }
+}
+function AgnosticThemeToggle({
+  theme,
+  defaultTheme,
+  onToggle,
+  onThemeChange,
+  size = "$2",
+  label
+}) {
+  const controlled = theme !== void 0;
+  const [internal, setInternal] = react.useState(() => theme ?? defaultTheme ?? readDomTheme() ?? "dark");
+  const current = controlled ? theme : internal;
+  const isDark = current === "dark";
+  const toggle = () => {
+    const next = isDark ? "light" : "dark";
+    if (!controlled) {
+      setInternal(next);
+      applyDomTheme(next);
+    }
+    onToggle?.(next);
+    onThemeChange?.(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Button,
+    {
+      size,
+      chromeless: true,
+      icon: isDark ? /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.Sun, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.Moon, { size: 16 }),
+      onPress: toggle,
+      "aria-label": label ?? (isDark ? "Switch to light theme" : "Switch to dark theme")
+    }
+  );
+}
+var NextThemeToggle = react.lazy(() => import('./ThemeToggleNext-ICB5KL5J.cjs'));
+var NextThemeBoundary = class extends react.Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+};
+function ThemeToggle(props) {
+  const injected = props.theme !== void 0 || props.onToggle !== void 0 || props.onThemeChange !== void 0;
+  if (injected) return /* @__PURE__ */ jsxRuntime.jsx(AgnosticThemeToggle, { ...props });
+  const fallback = /* @__PURE__ */ jsxRuntime.jsx(AgnosticThemeToggle, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(NextThemeBoundary, { fallback, children: /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback, children: /* @__PURE__ */ jsxRuntime.jsx(NextThemeToggle, { size: props.size, label: props.label }) }) });
+}
+function ThemeToggleNext({ size, label }) {
+  const { current, resolvedTheme, set } = nextTheme.useThemeSetting();
+  const isDark = (resolvedTheme ?? current ?? "dark") !== "light";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AgnosticThemeToggle,
+    {
+      theme: isDark ? "dark" : "light",
+      onToggle: (next) => set(next),
+      size,
+      label
+    }
+  );
+}
+var ThemeToggleNext_default = ThemeToggleNext;
+
+exports.AgnosticThemeToggle = AgnosticThemeToggle;
+exports.ThemeToggle = ThemeToggle;
+exports.ThemeToggleNext = ThemeToggleNext;
+exports.ThemeToggleNext_default = ThemeToggleNext_default;
+//# sourceMappingURL=chunk-YBXVUV7P.cjs.map
+//# sourceMappingURL=chunk-YBXVUV7P.cjs.map

package/dist/chunk-YBXVUV7P.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/product/ThemeToggle.tsx","../src/product/ThemeToggleNext.tsx"],"names":["useState","jsx","Button","Sun","Moon","lazy","Component","Suspense","useThemeSetting"],"mappings":"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","file":"chunk-YBXVUV7P.cjs","sourcesContent":["'use client'\n\n/**\n * ThemeToggle — flips between dark and light. Framework-agnostic by default so\n * Vite / Tauri / Express hosts can use it with NO Next dependency:\n *\n *   • Controlled:  <ThemeToggle theme={theme} onToggle={setTheme} />   (host owns theme)\n *   • Uncontrolled (agnostic): <ThemeToggle onThemeChange={fn} />       (toggles the DOM\n *                              `.dark` class + persists to localStorage)\n *   • Uncontrolled (no props): <ThemeToggle />                          (console/Next —\n *                              falls back to the OPTIONAL @hanzogui/next-theme path;\n *                              if it cannot load, degrades to the agnostic DOM toggle)\n *\n * Shows the action's target icon (a sun in dark mode, a moon in light mode).\n */\nimport type { ReactNode } from 'react'\nimport { Component, Suspense, lazy, useState } from 'react'\nimport { Button } from '@hanzo/gui'\nimport { Moon, Sun } from '@hanzogui/lucide-icons-2'\n\nexport type ThemeMode = 'light' | 'dark'\n\nexport type ThemeToggleProps = {\n  /** Controlled theme. Pair with `onToggle`/`onThemeChange` to fully control it. */\n  theme?: ThemeMode\n  /** Seed for uncontrolled mode (default: read from the DOM `.dark` class, else 'dark'). */\n  defaultTheme?: ThemeMode\n  /** Called with the next theme on toggle (alias of `onThemeChange`). */\n  onToggle?: (next: ThemeMode) => void\n  /** Called with the next theme on toggle. */\n  onThemeChange?: (next: ThemeMode) => void\n  /** @hanzo/gui Button size token (default \"$2\"). */\n  size?: string\n  /** aria-label override. */\n  label?: string\n}\n\nconst STORAGE_KEY = 'theme'\n\nfunction readDomTheme(): ThemeMode | undefined {\n  if (typeof document === 'undefined') return undefined\n  const el = document.documentElement\n  if (el.classList.contains('dark')) return 'dark'\n  if (el.classList.contains('light')) return 'light'\n  try {\n    const ls = window.localStorage.getItem(STORAGE_KEY)\n    if (ls === 'light' || ls === 'dark') return ls\n  } catch {\n    /* localStorage may be unavailable */\n  }\n  return undefined\n}\n\nfunction applyDomTheme(next: ThemeMode): void {\n  if (typeof document === 'undefined') return\n  const el = document.documentElement\n  el.classList.toggle('dark', next === 'dark')\n  el.classList.toggle('light', next === 'light')\n  el.style.colorScheme = next\n  try {\n    window.localStorage.setItem(STORAGE_KEY, next)\n  } catch {\n    /* ignore */\n  }\n}\n\n/**\n * The framework-agnostic toggle button. Controlled when `theme` is provided; otherwise\n * self-managed via the DOM `.dark` class. No framework dependency — safe on any host.\n */\nexport function AgnosticThemeToggle({\n  theme,\n  defaultTheme,\n  onToggle,\n  onThemeChange,\n  size = '$2',\n  label,\n}: ThemeToggleProps) {\n  const controlled = theme !== undefined\n  const [internal, setInternal] = useState<ThemeMode>(() => theme ?? defaultTheme ?? readDomTheme() ?? 'dark')\n  const current: ThemeMode = controlled ? (theme as ThemeMode) : internal\n  const isDark = current === 'dark'\n\n  const toggle = () => {\n    const next: ThemeMode = isDark ? 'light' : 'dark'\n    if (!controlled) {\n      setInternal(next)\n      applyDomTheme(next)\n    }\n    onToggle?.(next)\n    onThemeChange?.(next)\n  }\n\n  return (\n    <Button\n      size={size as never}\n      chromeless\n      icon={isDark ? <Sun size={16} /> : <Moon size={16} />}\n      onPress={toggle}\n      aria-label={label ?? (isDark ? 'Switch to light theme' : 'Switch to dark theme')}\n    />\n  )\n}\n\n// @hanzogui/next-theme is an OPTIONAL dependency — loaded only on the uncontrolled,\n// no-props path (console/Next). Lazily code-split so non-Next hosts never need it at\n// runtime; if it fails to load, the boundary below degrades to the agnostic toggle.\nconst NextThemeToggle = lazy(() => import('./ThemeToggleNext'))\n\nclass NextThemeBoundary extends Component<{ fallback: ReactNode; children: ReactNode }, { failed: boolean }> {\n  state = { failed: false }\n  static getDerivedStateFromError() {\n    return { failed: true }\n  }\n  render() {\n    return this.state.failed ? this.props.fallback : this.props.children\n  }\n}\n\nexport function ThemeToggle(props: ThemeToggleProps) {\n  const injected =\n    props.theme !== undefined || props.onToggle !== undefined || props.onThemeChange !== undefined\n  if (injected) return <AgnosticThemeToggle {...props} />\n\n  // No props → keep the existing console/Next behaviour via the optional next-theme\n  // path, degrading to the agnostic DOM toggle if it is not installed.\n  const fallback = <AgnosticThemeToggle {...props} />\n  return (\n    <NextThemeBoundary fallback={fallback}>\n      <Suspense fallback={fallback}>\n        <NextThemeToggle size={props.size} label={props.label} />\n      </Suspense>\n    </NextThemeBoundary>\n  )\n}\n","'use client'\n\n/**\n * ThemeToggleNext — the @hanzogui/next-theme binding (console / Next). This is the ONLY\n * module that imports @hanzogui/next-theme, so it stays an OPTIONAL dependency: the base\n * ThemeToggle lazy-loads it (default export) and non-Next hosts never pull it in unless\n * they import this component directly. UI is delegated to the framework-agnostic button\n * in controlled mode, so every toggle looks identical.\n */\nimport { useThemeSetting } from '@hanzogui/next-theme'\nimport { AgnosticThemeToggle, type ThemeToggleProps } from './ThemeToggle'\n\nfunction ThemeToggleNext({ size, label }: Pick<ThemeToggleProps, 'size' | 'label'>) {\n  const { current, resolvedTheme, set } = useThemeSetting()\n  const isDark = (resolvedTheme ?? current ?? 'dark') !== 'light'\n  return (\n    <AgnosticThemeToggle\n      theme={isDark ? 'dark' : 'light'}\n      onToggle={(next) => set(next)}\n      size={size}\n      label={label}\n    />\n  )\n}\n\nexport default ThemeToggleNext\nexport { ThemeToggleNext }\n"]}