@refraction-ui/react 0.3.9 → 0.4.0

package/dist/styles.css

@@ -0,0 +1,296 @@
+/*
+ * @refraction-ui/react — default theme stylesheet
+ *
+ * Refraction UI components are headless: they read CSS custom properties
+ * for color, typography, layout, and motion. This stylesheet defines a
+ * complete, working set of defaults so consumers can render components
+ * out of the box without authoring tokens themselves.
+ *
+ * Usage:
+ *
+ *   import '@refraction-ui/react/styles.css'
+ *
+ * The stylesheet is opt-in. Consumers who already define their own tokens
+ * (or who use `@refraction-ui/tailwind-config`'s preset) should NOT import
+ * this file — every component will continue to work with consumer-defined
+ * tokens.
+ *
+ * Override a single token by re-declaring it after the import, for example:
+ *
+ *   :root {
+ *     --primary: 280 70% 50%;
+ *     --radius: 0.5rem;
+ *   }
+ *
+ * Dark mode follows the `react-theme` ThemeProvider convention: the dark
+ * palette activates when `.dark` is on the html/root element (the default
+ * `attribute: 'class'` mode), or when `[data-theme="dark"]` is set (the
+ * alternative `attribute: 'data-theme'` mode). Both selectors are wired
+ * up below so either ThemeProvider configuration "just works".
+ *
+ * The default palette is the canonical "Refraction" theme defined in
+ * @refraction-ui/tailwind-config/src/themes/glassa.ts (Linear + Vercel-
+ * inspired calm violet on a near-white surface, subtle 6% borders, 0.375rem
+ * radius, system/Inter font stack).
+ */
+
+:root {
+  /* ─────────────────────────────────────────────────────────────────────
+     Color tokens (HSL triplets — components wrap them as hsl(var(--token)))
+     ───────────────────────────────────────────────────────────────────── */
+  --background: 0 0% 99%;
+  --foreground: 240 10% 10%;
+  --card: 0 0% 99%;
+  --card-foreground: 240 10% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 10%;
+
+  --primary: 250 50% 50%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 5% 96%;
+  --secondary-foreground: 240 4% 44%;
+  --accent: 250 30% 95%;
+  --accent-foreground: 250 50% 40%;
+
+  --muted: 240 5% 96%;
+  --muted-foreground: 240 4% 44%;
+
+  --destructive: 0 84% 50%;
+  --destructive-foreground: 0 0% 100%;
+  --success: 142 71% 35%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 240 10% 10%;
+
+  --border: 240 6% 92%;
+  --input: 240 6% 92%;
+  --ring: 250 50% 50%;
+
+  /* Charts (colorblind-safe spread) */
+  --chart-1: 250 50% 50%;
+  --chart-2: 173 80% 36%;
+  --chart-3: 38 92% 50%;
+  --chart-4: 330 65% 50%;
+  --chart-5: 201 96% 42%;
+
+  /* Sidebar */
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 10% 10%;
+  --sidebar-primary: 250 50% 50%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 250 30% 95%;
+  --sidebar-accent-foreground: 250 50% 40%;
+  --sidebar-border: 240 6% 92%;
+  --sidebar-ring: 250 50% 50%;
+
+  /* ─────────────────────────────────────────────────────────────────────
+     Shape language
+     ───────────────────────────────────────────────────────────────────── */
+  --radius: 0.375rem;
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+
+  --avatar-radius: 9999px;
+  --badge-radius: 9999px;
+  --button-radius: 0.375rem;
+  --input-radius: 0.375rem;
+  --card-radius: 0.5rem;
+  --tooltip-radius: 0.375rem;
+
+  /* ─────────────────────────────────────────────────────────────────────
+     Typography
+     ───────────────────────────────────────────────────────────────────── */
+  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-serif: ui-serif, Georgia, 'Times New Roman', serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --letter-spacing-tighter: -0.04em;
+  --letter-spacing-tight: -0.02em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.02em;
+  --letter-spacing-wider: 0.05em;
+
+  --line-height-tight: 1.3;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.7;
+
+  --heading-weight: 600;
+  --heading-letter-spacing: -0.02em;
+  --heading-line-height: 1.2;
+
+  /* ─────────────────────────────────────────────────────────────────────
+     Shadows / elevation
+     ───────────────────────────────────────────────────────────────────── */
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.03);
+  --shadow-lg: 0 6px 10px -2px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03);
+  --shadow-xl: 0 12px 20px -4px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.03);
+
+  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+  --dropdown-shadow: 0 6px 10px -2px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03);
+  --dialog-shadow: 0 12px 20px -4px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.03);
+  --button-shadow: none;
+
+  /* ─────────────────────────────────────────────────────────────────────
+     Glass / overlay
+     ───────────────────────────────────────────────────────────────────── */
+  --overlay-opacity: 0.5;
+  --backdrop-blur: 8px;
+  --glass-bg: rgba(252, 252, 253, 0.8);
+  --glass-border: rgba(255, 255, 255, 0.15);
+
+  /* ─────────────────────────────────────────────────────────────────────
+     Spacing & density
+     ───────────────────────────────────────────────────────────────────── */
+  --spacing-scale: 1;
+  --container-max-width: 1280px;
+  --container-padding: 2rem;
+  --card-padding: 1.5rem;
+  --input-height: 2.5rem;
+  --button-height: 2.25rem;
+  --section-gap: 4rem;
+
+  /* ─────────────────────────────────────────────────────────────────────
+     Layout / app-shell
+     ───────────────────────────────────────────────────────────────────── */
+  --page-max-width: 1280px;
+  --page-nav-height: 3.5rem;
+  --shell-header-height: 3.5rem;
+  --shell-sidebar-width: 16rem;
+  --shell-sidebar-full-width: 16rem;
+
+  /* ─────────────────────────────────────────────────────────────────────
+     Borders & dividers
+     ───────────────────────────────────────────────────────────────────── */
+  --border-width: 1px;
+  --border-style: solid;
+  --divider-style: solid;
+  --divider-opacity: 0.15;
+
+  /* ─────────────────────────────────────────────────────────────────────
+     Component behavior tokens
+     ───────────────────────────────────────────────────────────────────── */
+  --input-style: bordered;
+  --input-border-on-focus: 0;
+  --placeholder-opacity: 0.5;
+
+  --button-style: filled;
+  --button-weight: 500;
+  --hover-effect: darken;
+  --active-effect: scale-down;
+  --disabled-opacity: 0.5;
+
+  --link-style: color-only;
+  --link-weight: inherit;
+
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-ring-style: ring;
+
+  --icon-style: outlined;
+  --icon-stroke-width: 1.5;
+  --icon-size: 1.25rem;
+
+  --scrollbar-style: thin;
+  --scrollbar-track: transparent;
+  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
+
+  --tooltip-style: dark;
+  --table-style: clean;
+  --table-header-weight: 600;
+  --spinner-style: circle;
+
+  /* ─────────────────────────────────────────────────────────────────────
+     Selection
+     ───────────────────────────────────────────────────────────────────── */
+  --selection-background: 250 50% 50%;
+  --selection-foreground: 0 0% 100%;
+
+  /* ─────────────────────────────────────────────────────────────────────
+     Motion
+     ───────────────────────────────────────────────────────────────────── */
+  --transition-duration: 150ms;
+  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --animation-speed: fast;
+  --hover-transition: 150ms ease;
+  --enter-transition: 200ms ease-out;
+  --exit-transition: 150ms ease-in;
+}
+
+/*
+ * Dark mode — activated by `.dark` class (default ThemeProvider mode)
+ * or by `[data-theme="dark"]` (attribute mode). Matches the convention
+ * implemented in @refraction-ui/theme/src/dom-adapters.ts.
+ */
+.dark,
+[data-theme='dark'] {
+  --background: 240 10% 4%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 8%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 8%;
+  --popover-foreground: 0 0% 98%;
+
+  --primary: 250 50% 65%;
+  --primary-foreground: 240 10% 4%;
+  --secondary: 240 5% 16%;
+  --secondary-foreground: 240 5% 65%;
+  --accent: 250 30% 20%;
+  --accent-foreground: 250 60% 80%;
+
+  --muted: 240 5% 16%;
+  --muted-foreground: 240 5% 65%;
+
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 0 0% 98%;
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 98%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 240 10% 4%;
+
+  --border: 240 5% 16%;
+  --input: 240 5% 16%;
+  --ring: 250 50% 65%;
+
+  --chart-1: 250 50% 65%;
+  --chart-2: 173 70% 50%;
+  --chart-3: 38 92% 60%;
+  --chart-4: 330 60% 65%;
+  --chart-5: 201 90% 55%;
+
+  --sidebar-background: 240 10% 4%;
+  --sidebar-foreground: 0 0% 98%;
+  --sidebar-primary: 250 50% 65%;
+  --sidebar-primary-foreground: 240 10% 4%;
+  --sidebar-accent: 250 30% 20%;
+  --sidebar-accent-foreground: 250 60% 80%;
+  --sidebar-border: 240 5% 16%;
+  --sidebar-ring: 250 50% 65%;
+
+  /* Glass / scrollbar tweaks for dark surface */
+  --glass-bg: rgba(20, 20, 24, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.06);
+  --scrollbar-thumb: rgba(255, 255, 255, 0.18);
+}

package/dist/theme.cjs

@@ -0,0 +1,323 @@
+'use strict';
+
+var React2 = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+// ../react-theme/dist/index.js
+
+// ../theme/dist/index.js
+function resolveTheme(mode, systemPrefersDark) {
+  if (mode === "system") {
+    return systemPrefersDark ? "dark" : "light";
+  }
+  return mode;
+}
+function createTheme(config = {}, storage, mediaQuery) {
+  const {
+    defaultMode = "system",
+    storageKey = "rfr-theme"
+  } = config;
+  const listeners = /* @__PURE__ */ new Set();
+  let cleanupMediaQuery = null;
+  const persisted = storage?.get(storageKey);
+  let mode = persisted && ["light", "dark", "system"].includes(persisted) ? persisted : defaultMode;
+  let systemPrefersDark = mediaQuery?.matches("(prefers-color-scheme: dark)") ?? false;
+  let state = {
+    mode,
+    resolved: resolveTheme(mode, systemPrefersDark)
+  };
+  function notify() {
+    for (const fn of listeners) {
+      fn(state);
+    }
+  }
+  function updateState(newMode) {
+    mode = newMode;
+    state = { mode, resolved: resolveTheme(mode, systemPrefersDark) };
+    storage?.set(storageKey, mode);
+    notify();
+  }
+  if (mediaQuery) {
+    cleanupMediaQuery = mediaQuery.subscribe(
+      "(prefers-color-scheme: dark)",
+      (matches) => {
+        systemPrefersDark = matches;
+        if (mode === "system") {
+          state = { mode, resolved: resolveTheme(mode, systemPrefersDark) };
+          notify();
+        }
+      }
+    );
+  }
+  return {
+    getState() {
+      return state;
+    },
+    setMode(newMode) {
+      if (newMode !== mode) {
+        updateState(newMode);
+      }
+    },
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    },
+    destroy() {
+      listeners.clear();
+      cleanupMediaQuery?.();
+    }
+  };
+}
+function getThemeScript(storageKey = "rfr-theme", attribute = "class") {
+  return `(function(){try{var m=localStorage.getItem('${storageKey}');var s=window.matchMedia('(prefers-color-scheme:dark)').matches;var t=m==='dark'||(m!=='light'&&s)?'dark':'light';var d=document.documentElement;${attribute === "class" ? "d.classList.remove('light','dark');d.classList.add(t);" : `d.setAttribute('${attribute}',t);`}d.style.colorScheme=t;}catch(e){}})()`;
+}
+function createLocalStorageAdapter() {
+  return {
+    get(key) {
+      try {
+        return localStorage.getItem(key);
+      } catch {
+        return null;
+      }
+    },
+    set(key, value) {
+      try {
+        localStorage.setItem(key, value);
+      } catch {
+      }
+    }
+  };
+}
+function createMediaQueryAdapter() {
+  return {
+    matches(query) {
+      if (typeof window === "undefined") return false;
+      return window.matchMedia(query).matches;
+    },
+    subscribe(query, callback) {
+      if (typeof window === "undefined") return () => {
+      };
+      const mql = window.matchMedia(query);
+      const handler = (e) => callback(e.matches);
+      mql.addEventListener("change", handler);
+      return () => mql.removeEventListener("change", handler);
+    }
+  };
+}
+function applyThemeToDOM(resolved, attribute = "class") {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (attribute === "class") {
+    root.classList.remove("light", "dark");
+    root.classList.add(resolved);
+  } else {
+    root.setAttribute(attribute, resolved);
+  }
+  root.style.colorScheme = resolved;
+}
+
+// ../react-theme/dist/index.js
+var ThemeContext = React2__namespace.createContext(null);
+function ThemeProvider({
+  children,
+  defaultMode = "system",
+  storageKey = "rfr-theme",
+  attribute = "class"
+}) {
+  const themeRef = React2__namespace.useRef(null);
+  if (!themeRef.current) {
+    const isBrowser = typeof window !== "undefined";
+    themeRef.current = createTheme(
+      { defaultMode, storageKey},
+      isBrowser ? createLocalStorageAdapter() : void 0,
+      isBrowser ? createMediaQueryAdapter() : void 0
+    );
+  }
+  const [state, setState] = React2__namespace.useState(() => themeRef.current.getState());
+  React2__namespace.useEffect(() => {
+    const theme = themeRef.current;
+    applyThemeToDOM(theme.getState().resolved, attribute);
+    const unsub = theme.subscribe((newState) => {
+      setState(newState);
+      applyThemeToDOM(newState.resolved, attribute);
+    });
+    return () => {
+      unsub();
+      theme.destroy();
+    };
+  }, [attribute]);
+  const contextValue = React2__namespace.useMemo(
+    () => ({
+      mode: state.mode,
+      resolved: state.resolved,
+      setMode: (mode) => themeRef.current?.setMode(mode)
+    }),
+    [state.mode, state.resolved]
+  );
+  return React2__namespace.createElement(ThemeContext.Provider, { value: contextValue }, children);
+}
+function useTheme() {
+  const context = React2__namespace.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a <ThemeProvider>");
+  }
+  return context;
+}
+var modes = [
+  { value: "light", label: "Light", icon: "sun" },
+  { value: "dark", label: "Dark", icon: "moon" },
+  { value: "system", label: "System", icon: "monitor" }
+];
+var icons = {
+  sun: React2__namespace.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    React2__namespace.createElement("circle", { cx: 12, cy: 12, r: 5 }),
+    React2__namespace.createElement("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
+  ),
+  moon: React2__namespace.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    React2__namespace.createElement("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+  ),
+  monitor: React2__namespace.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    React2__namespace.createElement("rect", { x: 2, y: 3, width: 20, height: 14, rx: 2, ry: 2 }),
+    React2__namespace.createElement("line", { x1: 8, y1: 21, x2: 16, y2: 21 }),
+    React2__namespace.createElement("line", { x1: 12, y1: 17, x2: 12, y2: 21 })
+  )
+};
+function ThemeToggle({ className, variant = "segmented" }) {
+  const { mode, setMode } = useTheme();
+  if (variant === "segmented") {
+    return React2__namespace.createElement(
+      "div",
+      {
+        className: `inline-flex items-center gap-1 rounded-lg border p-1 ${className ?? ""}`,
+        role: "radiogroup",
+        "aria-label": "Theme"
+      },
+      modes.map(
+        ({ value, label, icon }) => React2__namespace.createElement("button", {
+          key: value,
+          type: "button",
+          role: "radio",
+          "aria-checked": mode === value,
+          "aria-label": label,
+          className: `inline-flex items-center justify-center rounded-md p-1.5 text-sm transition-colors ${mode === value ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-muted"}`,
+          onClick: () => setMode(value)
+        }, icons[icon])
+      )
+    );
+  }
+  const [open, setOpen] = React2__namespace.useState(false);
+  const ref = React2__namespace.useRef(null);
+  React2__namespace.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const currentIcon = modes.find((m) => m.value === mode)?.icon ?? "monitor";
+  return React2__namespace.createElement(
+    "div",
+    { ref, className: `relative ${className ?? ""}` },
+    React2__namespace.createElement("button", {
+      type: "button",
+      "aria-label": "Toggle theme",
+      "aria-expanded": open,
+      className: "inline-flex items-center justify-center rounded-md p-2 text-sm transition-colors hover:bg-muted",
+      onClick: () => setOpen(!open)
+    }, icons[currentIcon]),
+    open && React2__namespace.createElement(
+      "div",
+      {
+        className: "absolute right-0 top-full mt-1 z-50 min-w-[8rem] rounded-md border bg-popover p-1 shadow-md",
+        role: "menu"
+      },
+      modes.map(
+        ({ value, label, icon }) => React2__namespace.createElement("button", {
+          key: value,
+          type: "button",
+          role: "menuitem",
+          className: `flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent ${mode === value ? "bg-accent" : ""}`,
+          onClick: () => {
+            setMode(value);
+            setOpen(false);
+          }
+        }, icons[icon], label)
+      )
+    )
+  );
+}
+function ThemeScript({
+  storageKey = "rfr-theme",
+  attribute = "class"
+}) {
+  return React2__namespace.createElement("script", {
+    dangerouslySetInnerHTML: {
+      __html: getThemeScript(storageKey, attribute)
+    }
+  });
+}
+
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeScript = ThemeScript;
+exports.ThemeToggle = ThemeToggle;
+exports.useTheme = useTheme;
+//# sourceMappingURL=theme.cjs.map
+//# sourceMappingURL=theme.cjs.map

package/dist/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../theme/src/theme-machine.ts","../../theme/src/theme-script.ts","../../theme/src/dom-adapters.ts","../../react-theme/src/theme-provider.tsx","../../react-theme/src/theme-toggle.tsx","../../react-theme/src/theme-script-component.tsx"],"names":["React","React2","React3"],"mappings":"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","file":"theme.cjs","sourcesContent":["/**\n * Headless theme state machine — pure TypeScript, zero DOM dependencies.\n * Manages light/dark/system mode with system preference tracking.\n */\n\nexport type ThemeMode = 'light' | 'dark' | 'system'\nexport type ResolvedTheme = 'light' | 'dark'\n\nexport interface ThemeState {\n  /** User's chosen mode */\n  mode: ThemeMode\n  /** Resolved theme after system preference detection */\n  resolved: ResolvedTheme\n}\n\nexport interface ThemeConfig {\n  /** Initial mode. Default: 'system' */\n  defaultMode?: ThemeMode\n  /** localStorage key. Default: 'rfr-theme' */\n  storageKey?: string\n  /** HTML attribute to set. Default: 'class' */\n  attribute?: 'class' | 'data-theme'\n}\n\nexport interface StorageAdapter {\n  get(key: string): string | null\n  set(key: string, value: string): void\n}\n\nexport interface MediaQueryAdapter {\n  matches(query: string): boolean\n  subscribe(query: string, callback: (matches: boolean) => void): () => void\n}\n\nexport interface ThemeAPI {\n  /** Get current state */\n  getState(): ThemeState\n  /** Set mode (light/dark/system) */\n  setMode(mode: ThemeMode): void\n  /** Subscribe to state changes */\n  subscribe(fn: (state: ThemeState) => void): () => void\n  /** Clean up subscriptions */\n  destroy(): void\n}\n\nfunction resolveTheme(mode: ThemeMode, systemPrefersDark: boolean): ResolvedTheme {\n  if (mode === 'system') {\n    return systemPrefersDark ? 'dark' : 'light'\n  }\n  return mode\n}\n\nexport function createTheme(\n  config: ThemeConfig = {},\n  storage?: StorageAdapter,\n  mediaQuery?: MediaQueryAdapter,\n): ThemeAPI {\n  const {\n    defaultMode = 'system',\n    storageKey = 'rfr-theme',\n  } = config\n\n  const listeners = new Set<(state: ThemeState) => void>()\n  let cleanupMediaQuery: (() => void) | null = null\n\n  // Read persisted mode or use default\n  const persisted = storage?.get(storageKey) as ThemeMode | null\n  let mode: ThemeMode = persisted && ['light', 'dark', 'system'].includes(persisted)\n    ? persisted\n    : defaultMode\n\n  // Detect system preference\n  let systemPrefersDark = mediaQuery?.matches('(prefers-color-scheme: dark)') ?? false\n\n  let state: ThemeState = {\n    mode,\n    resolved: resolveTheme(mode, systemPrefersDark),\n  }\n\n  function notify() {\n    for (const fn of listeners) {\n      fn(state)\n    }\n  }\n\n  function updateState(newMode: ThemeMode) {\n    mode = newMode\n    state = { mode, resolved: resolveTheme(mode, systemPrefersDark) }\n    storage?.set(storageKey, mode)\n    notify()\n  }\n\n  // Listen for system preference changes\n  if (mediaQuery) {\n    cleanupMediaQuery = mediaQuery.subscribe(\n      '(prefers-color-scheme: dark)',\n      (matches) => {\n        systemPrefersDark = matches\n        if (mode === 'system') {\n          state = { mode, resolved: resolveTheme(mode, systemPrefersDark) }\n          notify()\n        }\n      },\n    )\n  }\n\n  return {\n    getState() {\n      return state\n    },\n\n    setMode(newMode: ThemeMode) {\n      if (newMode !== mode) {\n        updateState(newMode)\n      }\n    },\n\n    subscribe(fn: (state: ThemeState) => void) {\n      listeners.add(fn)\n      return () => {\n        listeners.delete(fn)\n      }\n    },\n\n    destroy() {\n      listeners.clear()\n      cleanupMediaQuery?.()\n    },\n  }\n}\n","/**\n * Inline script for preventing theme flash on page load.\n * Inject this as a <script> tag in the <head> before any CSS.\n * Works with any framework (React, Angular, Astro, plain HTML).\n */\n\nexport function getThemeScript(\n  storageKey = 'rfr-theme',\n  attribute: 'class' | 'data-theme' = 'class',\n): string {\n  // This string is injected as innerHTML of a <script> tag.\n  // It runs before any CSS/JS loads, preventing flash of wrong theme.\n  return `(function(){try{var m=localStorage.getItem('${storageKey}');var s=window.matchMedia('(prefers-color-scheme:dark)').matches;var t=m==='dark'||(m!=='light'&&s)?'dark':'light';var d=document.documentElement;${\n    attribute === 'class'\n      ? \"d.classList.remove('light','dark');d.classList.add(t);\"\n      : `d.setAttribute('${attribute}',t);`\n  }d.style.colorScheme=t;}catch(e){}})()`\n}\n","/**\n * Browser DOM adapters for the theme machine.\n * These bridge the headless core to browser APIs.\n */\n\nimport type { StorageAdapter, MediaQueryAdapter, ResolvedTheme } from './theme-machine.js'\n\n/** localStorage adapter */\nexport function createLocalStorageAdapter(): StorageAdapter {\n  return {\n    get(key) {\n      try {\n        return localStorage.getItem(key)\n      } catch {\n        return null\n      }\n    },\n    set(key, value) {\n      try {\n        localStorage.setItem(key, value)\n      } catch {\n        // localStorage unavailable (SSR, incognito quota exceeded, etc.)\n      }\n    },\n  }\n}\n\n/** matchMedia adapter */\nexport function createMediaQueryAdapter(): MediaQueryAdapter {\n  return {\n    matches(query) {\n      if (typeof window === 'undefined') return false\n      return window.matchMedia(query).matches\n    },\n    subscribe(query, callback) {\n      if (typeof window === 'undefined') return () => {}\n      const mql = window.matchMedia(query)\n      const handler = (e: MediaQueryListEvent) => callback(e.matches)\n      mql.addEventListener('change', handler)\n      return () => mql.removeEventListener('change', handler)\n    },\n  }\n}\n\n/** Apply resolved theme to the document */\nexport function applyThemeToDOM(\n  resolved: ResolvedTheme,\n  attribute: 'class' | 'data-theme' = 'class',\n): void {\n  if (typeof document === 'undefined') return\n\n  const root = document.documentElement\n  if (attribute === 'class') {\n    root.classList.remove('light', 'dark')\n    root.classList.add(resolved)\n  } else {\n    root.setAttribute(attribute, resolved)\n  }\n  root.style.colorScheme = resolved\n}\n","import * as React from 'react'\nimport {\n  createTheme,\n  createLocalStorageAdapter,\n  createMediaQueryAdapter,\n  applyThemeToDOM,\n  type ThemeMode,\n  type ResolvedTheme,\n  type ThemeConfig,\n  type ThemeAPI,\n} from '@refraction-ui/theme'\n\nexport interface ThemeContextValue {\n  mode: ThemeMode\n  resolved: ResolvedTheme\n  setMode: (mode: ThemeMode) => void\n}\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null)\n\nexport interface ThemeProviderProps extends ThemeConfig {\n  children: React.ReactNode\n}\n\nexport function ThemeProvider({\n  children,\n  defaultMode = 'system',\n  storageKey = 'rfr-theme',\n  attribute = 'class',\n}: ThemeProviderProps) {\n  const themeRef = React.useRef<ThemeAPI | null>(null)\n\n  // Initialize theme machine once (client-side only for adapters)\n  if (!themeRef.current) {\n    const isBrowser = typeof window !== 'undefined'\n    themeRef.current = createTheme(\n      { defaultMode, storageKey, attribute },\n      isBrowser ? createLocalStorageAdapter() : undefined,\n      isBrowser ? createMediaQueryAdapter() : undefined,\n    )\n  }\n\n  const [state, setState] = React.useState(() => themeRef.current!.getState())\n\n  React.useEffect(() => {\n    const theme = themeRef.current!\n    // Apply initial theme to DOM\n    applyThemeToDOM(theme.getState().resolved, attribute)\n\n    // Subscribe to changes\n    const unsub = theme.subscribe((newState) => {\n      setState(newState)\n      applyThemeToDOM(newState.resolved, attribute)\n    })\n\n    return () => {\n      unsub()\n      theme.destroy()\n    }\n  }, [attribute])\n\n  const contextValue = React.useMemo<ThemeContextValue>(\n    () => ({\n      mode: state.mode,\n      resolved: state.resolved,\n      setMode: (mode: ThemeMode) => themeRef.current?.setMode(mode),\n    }),\n    [state.mode, state.resolved],\n  )\n\n  return React.createElement(ThemeContext.Provider, { value: contextValue }, children)\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = React.useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useTheme must be used within a <ThemeProvider>')\n  }\n  return context\n}\n","import * as React from 'react'\nimport { useTheme } from './theme-provider.js'\nimport type { ThemeMode } from '@refraction-ui/theme'\n\nconst modes: { value: ThemeMode; label: string; icon: string }[] = [\n  { value: 'light', label: 'Light', icon: 'sun' },\n  { value: 'dark', label: 'Dark', icon: 'moon' },\n  { value: 'system', label: 'System', icon: 'monitor' },\n]\n\n// Inline SVG icons — no external icon library dependency\nconst icons: Record<string, React.ReactNode> = {\n  sun: React.createElement('svg', {\n    xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16, viewBox: '0 0 24 24',\n    fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round',\n  },\n    React.createElement('circle', { cx: 12, cy: 12, r: 5 }),\n    React.createElement('path', { d: 'M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42' }),\n  ),\n  moon: React.createElement('svg', {\n    xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16, viewBox: '0 0 24 24',\n    fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round',\n  },\n    React.createElement('path', { d: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' }),\n  ),\n  monitor: React.createElement('svg', {\n    xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16, viewBox: '0 0 24 24',\n    fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round',\n  },\n    React.createElement('rect', { x: 2, y: 3, width: 20, height: 14, rx: 2, ry: 2 }),\n    React.createElement('line', { x1: 8, y1: 21, x2: 16, y2: 21 }),\n    React.createElement('line', { x1: 12, y1: 17, x2: 12, y2: 21 }),\n  ),\n}\n\nexport interface ThemeToggleProps {\n  className?: string\n  /** 'dropdown' shows a menu, 'segmented' shows inline buttons */\n  variant?: 'dropdown' | 'segmented'\n}\n\nexport function ThemeToggle({ className, variant = 'segmented' }: ThemeToggleProps) {\n  const { mode, setMode } = useTheme()\n\n  if (variant === 'segmented') {\n    return React.createElement('div', {\n      className: `inline-flex items-center gap-1 rounded-lg border p-1 ${className ?? ''}`,\n      role: 'radiogroup',\n      'aria-label': 'Theme',\n    },\n      modes.map(({ value, label, icon }) =>\n        React.createElement('button', {\n          key: value,\n          type: 'button',\n          role: 'radio',\n          'aria-checked': mode === value,\n          'aria-label': label,\n          className: `inline-flex items-center justify-center rounded-md p-1.5 text-sm transition-colors ${\n            mode === value\n              ? 'bg-accent text-accent-foreground'\n              : 'text-muted-foreground hover:bg-muted'\n          }`,\n          onClick: () => setMode(value),\n        }, icons[icon]),\n      ),\n    )\n  }\n\n  // Dropdown variant — simplified, no external dropdown dependency\n  const [open, setOpen] = React.useState(false)\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  React.useEffect(() => {\n    if (!open) return\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)\n    }\n    document.addEventListener('mousedown', handler)\n    return () => document.removeEventListener('mousedown', handler)\n  }, [open])\n\n  const currentIcon = modes.find((m) => m.value === mode)?.icon ?? 'monitor'\n\n  return React.createElement('div', { ref, className: `relative ${className ?? ''}` },\n    React.createElement('button', {\n      type: 'button',\n      'aria-label': 'Toggle theme',\n      'aria-expanded': open,\n      className: 'inline-flex items-center justify-center rounded-md p-2 text-sm transition-colors hover:bg-muted',\n      onClick: () => setOpen(!open),\n    }, icons[currentIcon]),\n    open && React.createElement('div', {\n      className: 'absolute right-0 top-full mt-1 z-50 min-w-[8rem] rounded-md border bg-popover p-1 shadow-md',\n      role: 'menu',\n    },\n      modes.map(({ value, label, icon }) =>\n        React.createElement('button', {\n          key: value,\n          type: 'button',\n          role: 'menuitem',\n          className: `flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent ${\n            mode === value ? 'bg-accent' : ''\n          }`,\n          onClick: () => { setMode(value); setOpen(false) },\n        }, icons[icon], label),\n      ),\n    ),\n  )\n}\n","import * as React from 'react'\nimport { getThemeScript } from '@refraction-ui/theme'\n\nexport interface ThemeScriptProps {\n  storageKey?: string\n  attribute?: 'class' | 'data-theme'\n}\n\n/**\n * Renders an inline <script> that prevents theme flash on SSR pages.\n * Place this in the <head> of your document (in Next.js layout.tsx, Remix root, etc.)\n */\nexport function ThemeScript({\n  storageKey = 'rfr-theme',\n  attribute = 'class',\n}: ThemeScriptProps) {\n  return React.createElement('script', {\n    dangerouslySetInnerHTML: {\n      __html: getThemeScript(storageKey, attribute),\n    },\n  })\n}\n"]}

package/dist/theme.d.cts

@@ -0,0 +1 @@
+export * from '@refraction-ui/react-theme';

package/dist/theme.d.ts

@@ -0,0 +1 @@
+export * from '@refraction-ui/react-theme';