@irisui/ui 0.0.0-stage → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,182 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DEFAULT_MODE: () => DEFAULT_MODE,
+  DEFAULT_PALETTE: () => DEFAULT_PALETTE,
+  DEFAULT_STORAGE_KEY: () => DEFAULT_STORAGE_KEY,
+  MODES: () => MODES,
+  PALETTES: () => PALETTES,
+  ThemeProvider: () => ThemeProvider,
+  ThemeScript: () => ThemeScript,
+  getThemeScript: () => getThemeScript,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/theme/theme-provider.tsx
+var import_react = require("react");
+
+// src/theme/constants.ts
+var PALETTES = ["nacre", "aurore", "couchant", "glacier"];
+var MODES = ["light", "dark", "system"];
+var DEFAULT_PALETTE = "nacre";
+var DEFAULT_MODE = "system";
+var DEFAULT_STORAGE_KEY = "@irisui/theme";
+var isPalette = (value) => PALETTES.includes(value);
+var isMode = (value) => MODES.includes(value);
+
+// src/theme/theme-script.ts
+function getThemeScript({
+  storageKey = DEFAULT_STORAGE_KEY,
+  defaultPalette = DEFAULT_PALETTE,
+  defaultMode = DEFAULT_MODE
+} = {}) {
+  const args = [storageKey, PALETTES, MODES, defaultPalette, defaultMode].map((arg) => JSON.stringify(arg)).join(",");
+  return `(function(k,P,M,dp,dm){var d=document.documentElement,s={};try{s=JSON.parse(localStorage.getItem(k)||"{}")||{}}catch(e){}d.setAttribute("data-palette",P.indexOf(s.palette)>-1?s.palette:dp);d.setAttribute("data-mode",M.indexOf(s.mode)>-1?s.mode:dm)})(${args})`;
+}
+
+// src/theme/theme-provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react.useEffect : import_react.useLayoutEffect;
+var ThemeContext = (0, import_react.createContext)(null);
+function readStorage(key) {
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(key) ?? "{}");
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function writeStorage(key, value) {
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+function subscribeColorScheme(onChange) {
+  const media = window.matchMedia(DARK_QUERY);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+function useSystemMode() {
+  return (0, import_react.useSyncExternalStore)(
+    subscribeColorScheme,
+    () => window.matchMedia(DARK_QUERY).matches ? "dark" : "light",
+    () => "light"
+  );
+}
+function ThemeProvider({
+  children,
+  palette: paletteProp,
+  defaultPalette = DEFAULT_PALETTE,
+  onPaletteChange,
+  mode: modeProp,
+  defaultMode = DEFAULT_MODE,
+  onModeChange,
+  storageKey = DEFAULT_STORAGE_KEY
+}) {
+  const [paletteState, setPaletteState] = (0, import_react.useState)(defaultPalette);
+  const [modeState, setModeState] = (0, import_react.useState)(defaultMode);
+  const [restored, setRestored] = (0, import_react.useState)(false);
+  const palette = paletteProp ?? paletteState;
+  const mode = modeProp ?? modeState;
+  const systemMode = useSystemMode();
+  const resolvedMode = mode === "system" ? systemMode : mode;
+  useIsomorphicLayoutEffect(() => {
+    if (storageKey !== null) {
+      const stored = readStorage(storageKey);
+      if (isPalette(stored.palette)) setPaletteState(stored.palette);
+      if (isMode(stored.mode)) setModeState(stored.mode);
+    }
+    setRestored(true);
+  }, [storageKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (!restored) return;
+    const root = document.documentElement;
+    root.setAttribute("data-palette", palette);
+    root.setAttribute("data-mode", mode);
+  }, [restored, palette, mode]);
+  (0, import_react.useEffect)(() => {
+    if (storageKey === null) return;
+    const onStorage = (event) => {
+      if (event.key !== storageKey) return;
+      const stored = readStorage(storageKey);
+      if (isPalette(stored.palette)) setPaletteState(stored.palette);
+      if (isMode(stored.mode)) setModeState(stored.mode);
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [storageKey]);
+  const setPalette = (0, import_react.useCallback)(
+    (next) => {
+      if (paletteProp === void 0) setPaletteState(next);
+      if (storageKey !== null) writeStorage(storageKey, { palette: next, mode });
+      onPaletteChange?.(next);
+    },
+    [paletteProp, storageKey, mode, onPaletteChange]
+  );
+  const setMode = (0, import_react.useCallback)(
+    (next) => {
+      if (modeProp === void 0) setModeState(next);
+      if (storageKey !== null) writeStorage(storageKey, { palette, mode: next });
+      onModeChange?.(next);
+    },
+    [modeProp, storageKey, palette, onModeChange]
+  );
+  const value = (0, import_react.useMemo)(
+    () => ({ palette, mode, resolvedMode, setPalette, setMode }),
+    [palette, mode, resolvedMode, setPalette, setMode]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = (0, import_react.useContext)(ThemeContext);
+  if (context === null) {
+    throw new Error("useTheme must be used within a <ThemeProvider>.");
+  }
+  return context;
+}
+function ThemeScript({ nonce, ...options }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "script",
+    {
+      nonce,
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: { __html: getThemeScript(options) }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_MODE,
+  DEFAULT_PALETTE,
+  DEFAULT_STORAGE_KEY,
+  MODES,
+  PALETTES,
+  ThemeProvider,
+  ThemeScript,
+  getThemeScript,
+  useTheme
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/theme/theme-provider.tsx","../src/theme/constants.ts","../src/theme/theme-script.ts"],"sourcesContent":["export * from \"./theme\";\r\n","import {\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useLayoutEffect,\r\n  useMemo,\r\n  useState,\r\n  useSyncExternalStore,\r\n  type ReactNode,\r\n} from \"react\";\r\nimport {\r\n  DEFAULT_MODE,\r\n  DEFAULT_PALETTE,\r\n  DEFAULT_STORAGE_KEY,\r\n  isMode,\r\n  isPalette,\r\n  type Mode,\r\n  type Palette,\r\n  type ResolvedMode,\r\n} from \"./constants\";\r\nimport { getThemeScript, type ThemeScriptOptions } from \"./theme-script\";\r\n\r\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\r\n\r\nexport interface ThemeContextValue {\r\n  palette: Palette;\r\n  /** Mode as chosen: `light`, `dark` or `system`. */\r\n  mode: Mode;\r\n  /** Mode actually displayed, `system` resolved through `prefers-color-scheme`. */\r\n  resolvedMode: ResolvedMode;\r\n  setPalette: (palette: Palette) => void;\r\n  setMode: (mode: Mode) => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\r\n\r\nexport interface ThemeProviderProps {\r\n  children?: ReactNode;\r\n  /** Controlled palette. */\r\n  palette?: Palette;\r\n  /** Initial palette when uncontrolled and nothing is stored. */\r\n  defaultPalette?: Palette;\r\n  onPaletteChange?: (palette: Palette) => void;\r\n  /** Controlled mode. */\r\n  mode?: Mode;\r\n  /** Initial mode when uncontrolled and nothing is stored. */\r\n  defaultMode?: Mode;\r\n  onModeChange?: (mode: Mode) => void;\r\n  /** localStorage key used to remember the user's choice. `null` disables persistence. */\r\n  storageKey?: string | null;\r\n}\r\n\r\ninterface StoredTheme {\r\n  palette?: unknown;\r\n  mode?: unknown;\r\n}\r\n\r\nfunction readStorage(key: string): StoredTheme {\r\n  try {\r\n    const parsed: unknown = JSON.parse(window.localStorage.getItem(key) ?? \"{}\");\r\n    return parsed && typeof parsed === \"object\" ? (parsed as StoredTheme) : {};\r\n  } catch {\r\n    return {};\r\n  }\r\n}\r\n\r\nfunction writeStorage(key: string, value: { palette: Palette; mode: Mode }): void {\r\n  try {\r\n    window.localStorage.setItem(key, JSON.stringify(value));\r\n  } catch {\r\n    // Storage unavailable (private mode, quota): the choice is simply not remembered.\r\n  }\r\n}\r\n\r\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\r\n\r\nfunction subscribeColorScheme(onChange: () => void): () => void {\r\n  const media = window.matchMedia(DARK_QUERY);\r\n  media.addEventListener(\"change\", onChange);\r\n  return () => media.removeEventListener(\"change\", onChange);\r\n}\r\n\r\nfunction useSystemMode(): ResolvedMode {\r\n  return useSyncExternalStore(\r\n    subscribeColorScheme,\r\n    () => (window.matchMedia(DARK_QUERY).matches ? \"dark\" : \"light\"),\r\n    () => \"light\",\r\n  );\r\n}\r\n\r\n/**\r\n * Optional. Sets `data-palette` and `data-mode` on `<html>` and remembers the\r\n * user's choice. Without it, the HTML attributes alone are enough: the\r\n * `system` mode is handled in CSS by the tokens.\r\n */\r\nexport function ThemeProvider({\r\n  children,\r\n  palette: paletteProp,\r\n  defaultPalette = DEFAULT_PALETTE,\r\n  onPaletteChange,\r\n  mode: modeProp,\r\n  defaultMode = DEFAULT_MODE,\r\n  onModeChange,\r\n  storageKey = DEFAULT_STORAGE_KEY,\r\n}: ThemeProviderProps) {\r\n  const [paletteState, setPaletteState] = useState<Palette>(defaultPalette);\r\n  const [modeState, setModeState] = useState<Mode>(defaultMode);\r\n  // Stored values are read after mount so that server and client render the same tree.\r\n  const [restored, setRestored] = useState(false);\r\n\r\n  const palette = paletteProp ?? paletteState;\r\n  const mode = modeProp ?? modeState;\r\n  const systemMode = useSystemMode();\r\n  const resolvedMode: ResolvedMode = mode === \"system\" ? systemMode : mode;\r\n\r\n  useIsomorphicLayoutEffect(() => {\r\n    if (storageKey !== null) {\r\n      const stored = readStorage(storageKey);\r\n      if (isPalette(stored.palette)) setPaletteState(stored.palette);\r\n      if (isMode(stored.mode)) setModeState(stored.mode);\r\n    }\r\n    setRestored(true);\r\n  }, [storageKey]);\r\n\r\n  useIsomorphicLayoutEffect(() => {\r\n    if (!restored) return;\r\n    const root = document.documentElement;\r\n    root.setAttribute(\"data-palette\", palette);\r\n    root.setAttribute(\"data-mode\", mode);\r\n  }, [restored, palette, mode]);\r\n\r\n  // Keep several tabs in sync.\r\n  useEffect(() => {\r\n    if (storageKey === null) return;\r\n    const onStorage = (event: StorageEvent) => {\r\n      if (event.key !== storageKey) return;\r\n      const stored = readStorage(storageKey);\r\n      if (isPalette(stored.palette)) setPaletteState(stored.palette);\r\n      if (isMode(stored.mode)) setModeState(stored.mode);\r\n    };\r\n    window.addEventListener(\"storage\", onStorage);\r\n    return () => window.removeEventListener(\"storage\", onStorage);\r\n  }, [storageKey]);\r\n\r\n  const setPalette = useCallback(\r\n    (next: Palette) => {\r\n      if (paletteProp === undefined) setPaletteState(next);\r\n      if (storageKey !== null) writeStorage(storageKey, { palette: next, mode });\r\n      onPaletteChange?.(next);\r\n    },\r\n    [paletteProp, storageKey, mode, onPaletteChange],\r\n  );\r\n\r\n  const setMode = useCallback(\r\n    (next: Mode) => {\r\n      if (modeProp === undefined) setModeState(next);\r\n      if (storageKey !== null) writeStorage(storageKey, { palette, mode: next });\r\n      onModeChange?.(next);\r\n    },\r\n    [modeProp, storageKey, palette, onModeChange],\r\n  );\r\n\r\n  const value = useMemo<ThemeContextValue>(\r\n    () => ({ palette, mode, resolvedMode, setPalette, setMode }),\r\n    [palette, mode, resolvedMode, setPalette, setMode],\r\n  );\r\n\r\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\r\n}\r\n\r\n/** Reads and changes the current theme. Must be used inside `ThemeProvider`. */\r\nexport function useTheme(): ThemeContextValue {\r\n  const context = useContext(ThemeContext);\r\n  if (context === null) {\r\n    throw new Error(\"useTheme must be used within a <ThemeProvider>.\");\r\n  }\r\n  return context;\r\n}\r\n\r\nexport interface ThemeScriptProps extends ThemeScriptOptions {\r\n  nonce?: string;\r\n}\r\n\r\n/** Renders the anti-flash script; place it in `<head>`. */\r\nexport function ThemeScript({ nonce, ...options }: ThemeScriptProps) {\r\n  return (\r\n    <script\r\n      nonce={nonce}\r\n      suppressHydrationWarning\r\n      dangerouslySetInnerHTML={{ __html: getThemeScript(options) }}\r\n    />\r\n  );\r\n}\r\n","export const PALETTES = [\"nacre\", \"aurore\", \"couchant\", \"glacier\"] as const;\r\nexport const MODES = [\"light\", \"dark\", \"system\"] as const;\r\n\r\nexport type Palette = (typeof PALETTES)[number];\r\nexport type Mode = (typeof MODES)[number];\r\nexport type ResolvedMode = Exclude<Mode, \"system\">;\r\n\r\nexport const DEFAULT_PALETTE: Palette = \"nacre\";\r\nexport const DEFAULT_MODE: Mode = \"system\";\r\nexport const DEFAULT_STORAGE_KEY = \"@irisui/theme\";\r\n\r\nexport const isPalette = (value: unknown): value is Palette =>\r\n  (PALETTES as readonly unknown[]).includes(value);\r\nexport const isMode = (value: unknown): value is Mode =>\r\n  (MODES as readonly unknown[]).includes(value);\r\n","import {\r\n  DEFAULT_MODE,\r\n  DEFAULT_PALETTE,\r\n  DEFAULT_STORAGE_KEY,\r\n  MODES,\r\n  PALETTES,\r\n  type Mode,\r\n  type Palette,\r\n} from \"./constants\";\r\n\r\nexport interface ThemeScriptOptions {\r\n  storageKey?: string;\r\n  defaultPalette?: Palette;\r\n  defaultMode?: Mode;\r\n}\r\n\r\n/**\r\n * Returns an inline script that applies the stored palette and mode to\r\n * `<html>` before the first paint, to avoid a flash of the default theme.\r\n * Optional: without it the theme still works from the HTML attributes alone.\r\n */\r\nexport function getThemeScript({\r\n  storageKey = DEFAULT_STORAGE_KEY,\r\n  defaultPalette = DEFAULT_PALETTE,\r\n  defaultMode = DEFAULT_MODE,\r\n}: ThemeScriptOptions = {}): string {\r\n  const args = [storageKey, PALETTES, MODES, defaultPalette, defaultMode]\r\n    .map((arg) => JSON.stringify(arg))\r\n    .join(\",\");\r\n  return `(function(k,P,M,dp,dm){var d=document.documentElement,s={};try{s=JSON.parse(localStorage.getItem(k)||\"{}\")||{}}catch(e){}d.setAttribute(\"data-palette\",P.indexOf(s.palette)>-1?s.palette:dp);d.setAttribute(\"data-mode\",M.indexOf(s.mode)>-1?s.mode:dm)})(${args})`;\r\n}\r\n\r\nexport {\r\n  DEFAULT_MODE,\r\n  DEFAULT_PALETTE,\r\n  DEFAULT_STORAGE_KEY,\r\n  MODES,\r\n  PALETTES,\r\n  type Mode,\r\n  type Palette,\r\n  type ResolvedMode,\r\n} from \"./constants\";\r\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare const PALETTES: readonly ["nacre", "aurore", "couchant", "glacier"];
+declare const MODES: readonly ["light", "dark", "system"];
+type Palette = (typeof PALETTES)[number];
+type Mode = (typeof MODES)[number];
+type ResolvedMode = Exclude<Mode, "system">;
+declare const DEFAULT_PALETTE: Palette;
+declare const DEFAULT_MODE: Mode;
+declare const DEFAULT_STORAGE_KEY = "@irisui/theme";
+
+interface ThemeScriptOptions {
+    storageKey?: string;
+    defaultPalette?: Palette;
+    defaultMode?: Mode;
+}
+/**
+ * Returns an inline script that applies the stored palette and mode to
+ * `<html>` before the first paint, to avoid a flash of the default theme.
+ * Optional: without it the theme still works from the HTML attributes alone.
+ */
+declare function getThemeScript({ storageKey, defaultPalette, defaultMode, }?: ThemeScriptOptions): string;
+
+interface ThemeContextValue {
+    palette: Palette;
+    /** Mode as chosen: `light`, `dark` or `system`. */
+    mode: Mode;
+    /** Mode actually displayed, `system` resolved through `prefers-color-scheme`. */
+    resolvedMode: ResolvedMode;
+    setPalette: (palette: Palette) => void;
+    setMode: (mode: Mode) => void;
+}
+interface ThemeProviderProps {
+    children?: ReactNode;
+    /** Controlled palette. */
+    palette?: Palette;
+    /** Initial palette when uncontrolled and nothing is stored. */
+    defaultPalette?: Palette;
+    onPaletteChange?: (palette: Palette) => void;
+    /** Controlled mode. */
+    mode?: Mode;
+    /** Initial mode when uncontrolled and nothing is stored. */
+    defaultMode?: Mode;
+    onModeChange?: (mode: Mode) => void;
+    /** localStorage key used to remember the user's choice. `null` disables persistence. */
+    storageKey?: string | null;
+}
+/**
+ * Optional. Sets `data-palette` and `data-mode` on `<html>` and remembers the
+ * user's choice. Without it, the HTML attributes alone are enough: the
+ * `system` mode is handled in CSS by the tokens.
+ */
+declare function ThemeProvider({ children, palette: paletteProp, defaultPalette, onPaletteChange, mode: modeProp, defaultMode, onModeChange, storageKey, }: ThemeProviderProps): react.JSX.Element;
+/** Reads and changes the current theme. Must be used inside `ThemeProvider`. */
+declare function useTheme(): ThemeContextValue;
+interface ThemeScriptProps extends ThemeScriptOptions {
+    nonce?: string;
+}
+/** Renders the anti-flash script; place it in `<head>`. */
+declare function ThemeScript({ nonce, ...options }: ThemeScriptProps): react.JSX.Element;
+
+export { DEFAULT_MODE, DEFAULT_PALETTE, DEFAULT_STORAGE_KEY, MODES, type Mode, PALETTES, type Palette, type ResolvedMode, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptOptions, type ThemeScriptProps, getThemeScript, useTheme };

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare const PALETTES: readonly ["nacre", "aurore", "couchant", "glacier"];
+declare const MODES: readonly ["light", "dark", "system"];
+type Palette = (typeof PALETTES)[number];
+type Mode = (typeof MODES)[number];
+type ResolvedMode = Exclude<Mode, "system">;
+declare const DEFAULT_PALETTE: Palette;
+declare const DEFAULT_MODE: Mode;
+declare const DEFAULT_STORAGE_KEY = "@irisui/theme";
+
+interface ThemeScriptOptions {
+    storageKey?: string;
+    defaultPalette?: Palette;
+    defaultMode?: Mode;
+}
+/**
+ * Returns an inline script that applies the stored palette and mode to
+ * `<html>` before the first paint, to avoid a flash of the default theme.
+ * Optional: without it the theme still works from the HTML attributes alone.
+ */
+declare function getThemeScript({ storageKey, defaultPalette, defaultMode, }?: ThemeScriptOptions): string;
+
+interface ThemeContextValue {
+    palette: Palette;
+    /** Mode as chosen: `light`, `dark` or `system`. */
+    mode: Mode;
+    /** Mode actually displayed, `system` resolved through `prefers-color-scheme`. */
+    resolvedMode: ResolvedMode;
+    setPalette: (palette: Palette) => void;
+    setMode: (mode: Mode) => void;
+}
+interface ThemeProviderProps {
+    children?: ReactNode;
+    /** Controlled palette. */
+    palette?: Palette;
+    /** Initial palette when uncontrolled and nothing is stored. */
+    defaultPalette?: Palette;
+    onPaletteChange?: (palette: Palette) => void;
+    /** Controlled mode. */
+    mode?: Mode;
+    /** Initial mode when uncontrolled and nothing is stored. */
+    defaultMode?: Mode;
+    onModeChange?: (mode: Mode) => void;
+    /** localStorage key used to remember the user's choice. `null` disables persistence. */
+    storageKey?: string | null;
+}
+/**
+ * Optional. Sets `data-palette` and `data-mode` on `<html>` and remembers the
+ * user's choice. Without it, the HTML attributes alone are enough: the
+ * `system` mode is handled in CSS by the tokens.
+ */
+declare function ThemeProvider({ children, palette: paletteProp, defaultPalette, onPaletteChange, mode: modeProp, defaultMode, onModeChange, storageKey, }: ThemeProviderProps): react.JSX.Element;
+/** Reads and changes the current theme. Must be used inside `ThemeProvider`. */
+declare function useTheme(): ThemeContextValue;
+interface ThemeScriptProps extends ThemeScriptOptions {
+    nonce?: string;
+}
+/** Renders the anti-flash script; place it in `<head>`. */
+declare function ThemeScript({ nonce, ...options }: ThemeScriptProps): react.JSX.Element;
+
+export { DEFAULT_MODE, DEFAULT_PALETTE, DEFAULT_STORAGE_KEY, MODES, type Mode, PALETTES, type Palette, type ResolvedMode, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptOptions, type ThemeScriptProps, getThemeScript, useTheme };

package/dist/index.js

@@ -0,0 +1,157 @@
+"use client";
+
+// src/theme/theme-provider.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore
+} from "react";
+
+// src/theme/constants.ts
+var PALETTES = ["nacre", "aurore", "couchant", "glacier"];
+var MODES = ["light", "dark", "system"];
+var DEFAULT_PALETTE = "nacre";
+var DEFAULT_MODE = "system";
+var DEFAULT_STORAGE_KEY = "@irisui/theme";
+var isPalette = (value) => PALETTES.includes(value);
+var isMode = (value) => MODES.includes(value);
+
+// src/theme/theme-script.ts
+function getThemeScript({
+  storageKey = DEFAULT_STORAGE_KEY,
+  defaultPalette = DEFAULT_PALETTE,
+  defaultMode = DEFAULT_MODE
+} = {}) {
+  const args = [storageKey, PALETTES, MODES, defaultPalette, defaultMode].map((arg) => JSON.stringify(arg)).join(",");
+  return `(function(k,P,M,dp,dm){var d=document.documentElement,s={};try{s=JSON.parse(localStorage.getItem(k)||"{}")||{}}catch(e){}d.setAttribute("data-palette",P.indexOf(s.palette)>-1?s.palette:dp);d.setAttribute("data-mode",M.indexOf(s.mode)>-1?s.mode:dm)})(${args})`;
+}
+
+// src/theme/theme-provider.tsx
+import { jsx } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+var ThemeContext = createContext(null);
+function readStorage(key) {
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(key) ?? "{}");
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function writeStorage(key, value) {
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+function subscribeColorScheme(onChange) {
+  const media = window.matchMedia(DARK_QUERY);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+function useSystemMode() {
+  return useSyncExternalStore(
+    subscribeColorScheme,
+    () => window.matchMedia(DARK_QUERY).matches ? "dark" : "light",
+    () => "light"
+  );
+}
+function ThemeProvider({
+  children,
+  palette: paletteProp,
+  defaultPalette = DEFAULT_PALETTE,
+  onPaletteChange,
+  mode: modeProp,
+  defaultMode = DEFAULT_MODE,
+  onModeChange,
+  storageKey = DEFAULT_STORAGE_KEY
+}) {
+  const [paletteState, setPaletteState] = useState(defaultPalette);
+  const [modeState, setModeState] = useState(defaultMode);
+  const [restored, setRestored] = useState(false);
+  const palette = paletteProp ?? paletteState;
+  const mode = modeProp ?? modeState;
+  const systemMode = useSystemMode();
+  const resolvedMode = mode === "system" ? systemMode : mode;
+  useIsomorphicLayoutEffect(() => {
+    if (storageKey !== null) {
+      const stored = readStorage(storageKey);
+      if (isPalette(stored.palette)) setPaletteState(stored.palette);
+      if (isMode(stored.mode)) setModeState(stored.mode);
+    }
+    setRestored(true);
+  }, [storageKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (!restored) return;
+    const root = document.documentElement;
+    root.setAttribute("data-palette", palette);
+    root.setAttribute("data-mode", mode);
+  }, [restored, palette, mode]);
+  useEffect(() => {
+    if (storageKey === null) return;
+    const onStorage = (event) => {
+      if (event.key !== storageKey) return;
+      const stored = readStorage(storageKey);
+      if (isPalette(stored.palette)) setPaletteState(stored.palette);
+      if (isMode(stored.mode)) setModeState(stored.mode);
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [storageKey]);
+  const setPalette = useCallback(
+    (next) => {
+      if (paletteProp === void 0) setPaletteState(next);
+      if (storageKey !== null) writeStorage(storageKey, { palette: next, mode });
+      onPaletteChange?.(next);
+    },
+    [paletteProp, storageKey, mode, onPaletteChange]
+  );
+  const setMode = useCallback(
+    (next) => {
+      if (modeProp === void 0) setModeState(next);
+      if (storageKey !== null) writeStorage(storageKey, { palette, mode: next });
+      onModeChange?.(next);
+    },
+    [modeProp, storageKey, palette, onModeChange]
+  );
+  const value = useMemo(
+    () => ({ palette, mode, resolvedMode, setPalette, setMode }),
+    [palette, mode, resolvedMode, setPalette, setMode]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === null) {
+    throw new Error("useTheme must be used within a <ThemeProvider>.");
+  }
+  return context;
+}
+function ThemeScript({ nonce, ...options }) {
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      nonce,
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: { __html: getThemeScript(options) }
+    }
+  );
+}
+export {
+  DEFAULT_MODE,
+  DEFAULT_PALETTE,
+  DEFAULT_STORAGE_KEY,
+  MODES,
+  PALETTES,
+  ThemeProvider,
+  ThemeScript,
+  getThemeScript,
+  useTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/theme-provider.tsx","../src/theme/constants.ts","../src/theme/theme-script.ts"],"sourcesContent":["import {\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useLayoutEffect,\r\n  useMemo,\r\n  useState,\r\n  useSyncExternalStore,\r\n  type ReactNode,\r\n} from \"react\";\r\nimport {\r\n  DEFAULT_MODE,\r\n  DEFAULT_PALETTE,\r\n  DEFAULT_STORAGE_KEY,\r\n  isMode,\r\n  isPalette,\r\n  type Mode,\r\n  type Palette,\r\n  type ResolvedMode,\r\n} from \"./constants\";\r\nimport { getThemeScript, type ThemeScriptOptions } from \"./theme-script\";\r\n\r\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\r\n\r\nexport interface ThemeContextValue {\r\n  palette: Palette;\r\n  /** Mode as chosen: `light`, `dark` or `system`. */\r\n  mode: Mode;\r\n  /** Mode actually displayed, `system` resolved through `prefers-color-scheme`. */\r\n  resolvedMode: ResolvedMode;\r\n  setPalette: (palette: Palette) => void;\r\n  setMode: (mode: Mode) => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\r\n\r\nexport interface ThemeProviderProps {\r\n  children?: ReactNode;\r\n  /** Controlled palette. */\r\n  palette?: Palette;\r\n  /** Initial palette when uncontrolled and nothing is stored. */\r\n  defaultPalette?: Palette;\r\n  onPaletteChange?: (palette: Palette) => void;\r\n  /** Controlled mode. */\r\n  mode?: Mode;\r\n  /** Initial mode when uncontrolled and nothing is stored. */\r\n  defaultMode?: Mode;\r\n  onModeChange?: (mode: Mode) => void;\r\n  /** localStorage key used to remember the user's choice. `null` disables persistence. */\r\n  storageKey?: string | null;\r\n}\r\n\r\ninterface StoredTheme {\r\n  palette?: unknown;\r\n  mode?: unknown;\r\n}\r\n\r\nfunction readStorage(key: string): StoredTheme {\r\n  try {\r\n    const parsed: unknown = JSON.parse(window.localStorage.getItem(key) ?? \"{}\");\r\n    return parsed && typeof parsed === \"object\" ? (parsed as StoredTheme) : {};\r\n  } catch {\r\n    return {};\r\n  }\r\n}\r\n\r\nfunction writeStorage(key: string, value: { palette: Palette; mode: Mode }): void {\r\n  try {\r\n    window.localStorage.setItem(key, JSON.stringify(value));\r\n  } catch {\r\n    // Storage unavailable (private mode, quota): the choice is simply not remembered.\r\n  }\r\n}\r\n\r\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\r\n\r\nfunction subscribeColorScheme(onChange: () => void): () => void {\r\n  const media = window.matchMedia(DARK_QUERY);\r\n  media.addEventListener(\"change\", onChange);\r\n  return () => media.removeEventListener(\"change\", onChange);\r\n}\r\n\r\nfunction useSystemMode(): ResolvedMode {\r\n  return useSyncExternalStore(\r\n    subscribeColorScheme,\r\n    () => (window.matchMedia(DARK_QUERY).matches ? \"dark\" : \"light\"),\r\n    () => \"light\",\r\n  );\r\n}\r\n\r\n/**\r\n * Optional. Sets `data-palette` and `data-mode` on `<html>` and remembers the\r\n * user's choice. Without it, the HTML attributes alone are enough: the\r\n * `system` mode is handled in CSS by the tokens.\r\n */\r\nexport function ThemeProvider({\r\n  children,\r\n  palette: paletteProp,\r\n  defaultPalette = DEFAULT_PALETTE,\r\n  onPaletteChange,\r\n  mode: modeProp,\r\n  defaultMode = DEFAULT_MODE,\r\n  onModeChange,\r\n  storageKey = DEFAULT_STORAGE_KEY,\r\n}: ThemeProviderProps) {\r\n  const [paletteState, setPaletteState] = useState<Palette>(defaultPalette);\r\n  const [modeState, setModeState] = useState<Mode>(defaultMode);\r\n  // Stored values are read after mount so that server and client render the same tree.\r\n  const [restored, setRestored] = useState(false);\r\n\r\n  const palette = paletteProp ?? paletteState;\r\n  const mode = modeProp ?? modeState;\r\n  const systemMode = useSystemMode();\r\n  const resolvedMode: ResolvedMode = mode === \"system\" ? systemMode : mode;\r\n\r\n  useIsomorphicLayoutEffect(() => {\r\n    if (storageKey !== null) {\r\n      const stored = readStorage(storageKey);\r\n      if (isPalette(stored.palette)) setPaletteState(stored.palette);\r\n      if (isMode(stored.mode)) setModeState(stored.mode);\r\n    }\r\n    setRestored(true);\r\n  }, [storageKey]);\r\n\r\n  useIsomorphicLayoutEffect(() => {\r\n    if (!restored) return;\r\n    const root = document.documentElement;\r\n    root.setAttribute(\"data-palette\", palette);\r\n    root.setAttribute(\"data-mode\", mode);\r\n  }, [restored, palette, mode]);\r\n\r\n  // Keep several tabs in sync.\r\n  useEffect(() => {\r\n    if (storageKey === null) return;\r\n    const onStorage = (event: StorageEvent) => {\r\n      if (event.key !== storageKey) return;\r\n      const stored = readStorage(storageKey);\r\n      if (isPalette(stored.palette)) setPaletteState(stored.palette);\r\n      if (isMode(stored.mode)) setModeState(stored.mode);\r\n    };\r\n    window.addEventListener(\"storage\", onStorage);\r\n    return () => window.removeEventListener(\"storage\", onStorage);\r\n  }, [storageKey]);\r\n\r\n  const setPalette = useCallback(\r\n    (next: Palette) => {\r\n      if (paletteProp === undefined) setPaletteState(next);\r\n      if (storageKey !== null) writeStorage(storageKey, { palette: next, mode });\r\n      onPaletteChange?.(next);\r\n    },\r\n    [paletteProp, storageKey, mode, onPaletteChange],\r\n  );\r\n\r\n  const setMode = useCallback(\r\n    (next: Mode) => {\r\n      if (modeProp === undefined) setModeState(next);\r\n      if (storageKey !== null) writeStorage(storageKey, { palette, mode: next });\r\n      onModeChange?.(next);\r\n    },\r\n    [modeProp, storageKey, palette, onModeChange],\r\n  );\r\n\r\n  const value = useMemo<ThemeContextValue>(\r\n    () => ({ palette, mode, resolvedMode, setPalette, setMode }),\r\n    [palette, mode, resolvedMode, setPalette, setMode],\r\n  );\r\n\r\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\r\n}\r\n\r\n/** Reads and changes the current theme. Must be used inside `ThemeProvider`. */\r\nexport function useTheme(): ThemeContextValue {\r\n  const context = useContext(ThemeContext);\r\n  if (context === null) {\r\n    throw new Error(\"useTheme must be used within a <ThemeProvider>.\");\r\n  }\r\n  return context;\r\n}\r\n\r\nexport interface ThemeScriptProps extends ThemeScriptOptions {\r\n  nonce?: string;\r\n}\r\n\r\n/** Renders the anti-flash script; place it in `<head>`. */\r\nexport function ThemeScript({ nonce, ...options }: ThemeScriptProps) {\r\n  return (\r\n    <script\r\n      nonce={nonce}\r\n      suppressHydrationWarning\r\n      dangerouslySetInnerHTML={{ __html: getThemeScript(options) }}\r\n    />\r\n  );\r\n}\r\n","export const PALETTES = [\"nacre\", \"aurore\", \"couchant\", \"glacier\"] as const;\r\nexport const MODES = [\"light\", \"dark\", \"system\"] as const;\r\n\r\nexport type Palette = (typeof PALETTES)[number];\r\nexport type Mode = (typeof MODES)[number];\r\nexport type ResolvedMode = Exclude<Mode, \"system\">;\r\n\r\nexport const DEFAULT_PALETTE: Palette = \"nacre\";\r\nexport const DEFAULT_MODE: Mode = \"system\";\r\nexport const DEFAULT_STORAGE_KEY = \"@irisui/theme\";\r\n\r\nexport const isPalette = (value: unknown): value is Palette =>\r\n  (PALETTES as readonly unknown[]).includes(value);\r\nexport const isMode = (value: unknown): value is Mode =>\r\n  (MODES as readonly unknown[]).includes(value);\r\n","import {\r\n  DEFAULT_MODE,\r\n  DEFAULT_PALETTE,\r\n  DEFAULT_STORAGE_KEY,\r\n  MODES,\r\n  PALETTES,\r\n  type Mode,\r\n  type Palette,\r\n} from \"./constants\";\r\n\r\nexport interface ThemeScriptOptions {\r\n  storageKey?: string;\r\n  defaultPalette?: Palette;\r\n  defaultMode?: Mode;\r\n}\r\n\r\n/**\r\n * Returns an inline script that applies the stored palette and mode to\r\n * `<html>` before the first paint, to avoid a flash of the default theme.\r\n * Optional: without it the theme still works from the HTML attributes alone.\r\n */\r\nexport function getThemeScript({\r\n  storageKey = DEFAULT_STORAGE_KEY,\r\n  defaultPalette = DEFAULT_PALETTE,\r\n  defaultMode = DEFAULT_MODE,\r\n}: ThemeScriptOptions = {}): string {\r\n  const args = [storageKey, PALETTES, MODES, defaultPalette, defaultMode]\r\n    .map((arg) => JSON.stringify(arg))\r\n    .join(\",\");\r\n  return `(function(k,P,M,dp,dm){var d=document.documentElement,s={};try{s=JSON.parse(localStorage.getItem(k)||\"{}\")||{}}catch(e){}d.setAttribute(\"data-palette\",P.indexOf(s.palette)>-1?s.palette:dp);d.setAttribute(\"data-mode\",M.indexOf(s.mode)>-1?s.mode:dm)})(${args})`;\r\n}\r\n\r\nexport {\r\n  DEFAULT_MODE,\r\n  DEFAULT_PALETTE,\r\n  DEFAULT_STORAGE_KEY,\r\n  MODES,\r\n  PALETTES,\r\n  type Mode,\r\n  type Palette,\r\n  type ResolvedMode,\r\n} from \"./constants\";\r\n"],"mappings":"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","names":[]}

package/dist/theme-script.cjs

@@ -0,0 +1,57 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/theme/theme-script.ts
+var theme_script_exports = {};
+__export(theme_script_exports, {
+  DEFAULT_MODE: () => DEFAULT_MODE,
+  DEFAULT_PALETTE: () => DEFAULT_PALETTE,
+  DEFAULT_STORAGE_KEY: () => DEFAULT_STORAGE_KEY,
+  MODES: () => MODES,
+  PALETTES: () => PALETTES,
+  getThemeScript: () => getThemeScript
+});
+module.exports = __toCommonJS(theme_script_exports);
+
+// src/theme/constants.ts
+var PALETTES = ["nacre", "aurore", "couchant", "glacier"];
+var MODES = ["light", "dark", "system"];
+var DEFAULT_PALETTE = "nacre";
+var DEFAULT_MODE = "system";
+var DEFAULT_STORAGE_KEY = "@irisui/theme";
+
+// src/theme/theme-script.ts
+function getThemeScript({
+  storageKey = DEFAULT_STORAGE_KEY,
+  defaultPalette = DEFAULT_PALETTE,
+  defaultMode = DEFAULT_MODE
+} = {}) {
+  const args = [storageKey, PALETTES, MODES, defaultPalette, defaultMode].map((arg) => JSON.stringify(arg)).join(",");
+  return `(function(k,P,M,dp,dm){var d=document.documentElement,s={};try{s=JSON.parse(localStorage.getItem(k)||"{}")||{}}catch(e){}d.setAttribute("data-palette",P.indexOf(s.palette)>-1?s.palette:dp);d.setAttribute("data-mode",M.indexOf(s.mode)>-1?s.mode:dm)})(${args})`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_MODE,
+  DEFAULT_PALETTE,
+  DEFAULT_STORAGE_KEY,
+  MODES,
+  PALETTES,
+  getThemeScript
+});
+//# sourceMappingURL=theme-script.cjs.map

package/dist/theme-script.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/theme-script.ts","../src/theme/constants.ts"],"sourcesContent":["import {\r\n  DEFAULT_MODE,\r\n  DEFAULT_PALETTE,\r\n  DEFAULT_STORAGE_KEY,\r\n  MODES,\r\n  PALETTES,\r\n  type Mode,\r\n  type Palette,\r\n} from \"./constants\";\r\n\r\nexport interface ThemeScriptOptions {\r\n  storageKey?: string;\r\n  defaultPalette?: Palette;\r\n  defaultMode?: Mode;\r\n}\r\n\r\n/**\r\n * Returns an inline script that applies the stored palette and mode to\r\n * `<html>` before the first paint, to avoid a flash of the default theme.\r\n * Optional: without it the theme still works from the HTML attributes alone.\r\n */\r\nexport function getThemeScript({\r\n  storageKey = DEFAULT_STORAGE_KEY,\r\n  defaultPalette = DEFAULT_PALETTE,\r\n  defaultMode = DEFAULT_MODE,\r\n}: ThemeScriptOptions = {}): string {\r\n  const args = [storageKey, PALETTES, MODES, defaultPalette, defaultMode]\r\n    .map((arg) => JSON.stringify(arg))\r\n    .join(\",\");\r\n  return `(function(k,P,M,dp,dm){var d=document.documentElement,s={};try{s=JSON.parse(localStorage.getItem(k)||\"{}\")||{}}catch(e){}d.setAttribute(\"data-palette\",P.indexOf(s.palette)>-1?s.palette:dp);d.setAttribute(\"data-mode\",M.indexOf(s.mode)>-1?s.mode:dm)})(${args})`;\r\n}\r\n\r\nexport {\r\n  DEFAULT_MODE,\r\n  DEFAULT_PALETTE,\r\n  DEFAULT_STORAGE_KEY,\r\n  MODES,\r\n  PALETTES,\r\n  type Mode,\r\n  type Palette,\r\n  type ResolvedMode,\r\n} from \"./constants\";\r\n","export const PALETTES = [\"nacre\", \"aurore\", \"couchant\", \"glacier\"] as const;\r\nexport const MODES = [\"light\", \"dark\", \"system\"] as const;\r\n\r\nexport type Palette = (typeof PALETTES)[number];\r\nexport type Mode = (typeof MODES)[number];\r\nexport type ResolvedMode = Exclude<Mode, \"system\">;\r\n\r\nexport const DEFAULT_PALETTE: Palette = \"nacre\";\r\nexport const DEFAULT_MODE: Mode = \"system\";\r\nexport const DEFAULT_STORAGE_KEY = \"@irisui/theme\";\r\n\r\nexport const isPalette = (value: unknown): value is Palette =>\r\n  (PALETTES as readonly unknown[]).includes(value);\r\nexport const isMode = (value: unknown): value is Mode =>\r\n  (MODES as readonly unknown[]).includes(value);\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,WAAW,CAAC,SAAS,UAAU,YAAY,SAAS;AAC1D,IAAM,QAAQ,CAAC,SAAS,QAAQ,QAAQ;AAMxC,IAAM,kBAA2B;AACjC,IAAM,eAAqB;AAC3B,IAAM,sBAAsB;;;ADY5B,SAAS,eAAe;AAAA,EAC7B,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,cAAc;AAChB,IAAwB,CAAC,GAAW;AAClC,QAAM,OAAO,CAAC,YAAY,UAAU,OAAO,gBAAgB,WAAW,EACnE,IAAI,CAAC,QAAQ,KAAK,UAAU,GAAG,CAAC,EAChC,KAAK,GAAG;AACX,SAAO,6PAA6P,IAAI;AAC1Q;","names":[]}

package/dist/theme-script.d.cts

@@ -0,0 +1,22 @@
+declare const PALETTES: readonly ["nacre", "aurore", "couchant", "glacier"];
+declare const MODES: readonly ["light", "dark", "system"];
+type Palette = (typeof PALETTES)[number];
+type Mode = (typeof MODES)[number];
+type ResolvedMode = Exclude<Mode, "system">;
+declare const DEFAULT_PALETTE: Palette;
+declare const DEFAULT_MODE: Mode;
+declare const DEFAULT_STORAGE_KEY = "@irisui/theme";
+
+interface ThemeScriptOptions {
+    storageKey?: string;
+    defaultPalette?: Palette;
+    defaultMode?: Mode;
+}
+/**
+ * Returns an inline script that applies the stored palette and mode to
+ * `<html>` before the first paint, to avoid a flash of the default theme.
+ * Optional: without it the theme still works from the HTML attributes alone.
+ */
+declare function getThemeScript({ storageKey, defaultPalette, defaultMode, }?: ThemeScriptOptions): string;
+
+export { DEFAULT_MODE, DEFAULT_PALETTE, DEFAULT_STORAGE_KEY, MODES, type Mode, PALETTES, type Palette, type ResolvedMode, type ThemeScriptOptions, getThemeScript };

package/dist/theme-script.d.ts

@@ -0,0 +1,22 @@
+declare const PALETTES: readonly ["nacre", "aurore", "couchant", "glacier"];
+declare const MODES: readonly ["light", "dark", "system"];
+type Palette = (typeof PALETTES)[number];
+type Mode = (typeof MODES)[number];
+type ResolvedMode = Exclude<Mode, "system">;
+declare const DEFAULT_PALETTE: Palette;
+declare const DEFAULT_MODE: Mode;
+declare const DEFAULT_STORAGE_KEY = "@irisui/theme";
+
+interface ThemeScriptOptions {
+    storageKey?: string;
+    defaultPalette?: Palette;
+    defaultMode?: Mode;
+}
+/**
+ * Returns an inline script that applies the stored palette and mode to
+ * `<html>` before the first paint, to avoid a flash of the default theme.
+ * Optional: without it the theme still works from the HTML attributes alone.
+ */
+declare function getThemeScript({ storageKey, defaultPalette, defaultMode, }?: ThemeScriptOptions): string;
+
+export { DEFAULT_MODE, DEFAULT_PALETTE, DEFAULT_STORAGE_KEY, MODES, type Mode, PALETTES, type Palette, type ResolvedMode, type ThemeScriptOptions, getThemeScript };

package/dist/theme-script.js

@@ -0,0 +1,25 @@
+// src/theme/constants.ts
+var PALETTES = ["nacre", "aurore", "couchant", "glacier"];
+var MODES = ["light", "dark", "system"];
+var DEFAULT_PALETTE = "nacre";
+var DEFAULT_MODE = "system";
+var DEFAULT_STORAGE_KEY = "@irisui/theme";
+
+// src/theme/theme-script.ts
+function getThemeScript({
+  storageKey = DEFAULT_STORAGE_KEY,
+  defaultPalette = DEFAULT_PALETTE,
+  defaultMode = DEFAULT_MODE
+} = {}) {
+  const args = [storageKey, PALETTES, MODES, defaultPalette, defaultMode].map((arg) => JSON.stringify(arg)).join(",");
+  return `(function(k,P,M,dp,dm){var d=document.documentElement,s={};try{s=JSON.parse(localStorage.getItem(k)||"{}")||{}}catch(e){}d.setAttribute("data-palette",P.indexOf(s.palette)>-1?s.palette:dp);d.setAttribute("data-mode",M.indexOf(s.mode)>-1?s.mode:dm)})(${args})`;
+}
+export {
+  DEFAULT_MODE,
+  DEFAULT_PALETTE,
+  DEFAULT_STORAGE_KEY,
+  MODES,
+  PALETTES,
+  getThemeScript
+};
+//# sourceMappingURL=theme-script.js.map

package/dist/theme-script.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/constants.ts","../src/theme/theme-script.ts"],"sourcesContent":["export const PALETTES = [\"nacre\", \"aurore\", \"couchant\", \"glacier\"] as const;\r\nexport const MODES = [\"light\", \"dark\", \"system\"] as const;\r\n\r\nexport type Palette = (typeof PALETTES)[number];\r\nexport type Mode = (typeof MODES)[number];\r\nexport type ResolvedMode = Exclude<Mode, \"system\">;\r\n\r\nexport const DEFAULT_PALETTE: Palette = \"nacre\";\r\nexport const DEFAULT_MODE: Mode = \"system\";\r\nexport const DEFAULT_STORAGE_KEY = \"@irisui/theme\";\r\n\r\nexport const isPalette = (value: unknown): value is Palette =>\r\n  (PALETTES as readonly unknown[]).includes(value);\r\nexport const isMode = (value: unknown): value is Mode =>\r\n  (MODES as readonly unknown[]).includes(value);\r\n","import {\r\n  DEFAULT_MODE,\r\n  DEFAULT_PALETTE,\r\n  DEFAULT_STORAGE_KEY,\r\n  MODES,\r\n  PALETTES,\r\n  type Mode,\r\n  type Palette,\r\n} from \"./constants\";\r\n\r\nexport interface ThemeScriptOptions {\r\n  storageKey?: string;\r\n  defaultPalette?: Palette;\r\n  defaultMode?: Mode;\r\n}\r\n\r\n/**\r\n * Returns an inline script that applies the stored palette and mode to\r\n * `<html>` before the first paint, to avoid a flash of the default theme.\r\n * Optional: without it the theme still works from the HTML attributes alone.\r\n */\r\nexport function getThemeScript({\r\n  storageKey = DEFAULT_STORAGE_KEY,\r\n  defaultPalette = DEFAULT_PALETTE,\r\n  defaultMode = DEFAULT_MODE,\r\n}: ThemeScriptOptions = {}): string {\r\n  const args = [storageKey, PALETTES, MODES, defaultPalette, defaultMode]\r\n    .map((arg) => JSON.stringify(arg))\r\n    .join(\",\");\r\n  return `(function(k,P,M,dp,dm){var d=document.documentElement,s={};try{s=JSON.parse(localStorage.getItem(k)||\"{}\")||{}}catch(e){}d.setAttribute(\"data-palette\",P.indexOf(s.palette)>-1?s.palette:dp);d.setAttribute(\"data-mode\",M.indexOf(s.mode)>-1?s.mode:dm)})(${args})`;\r\n}\r\n\r\nexport {\r\n  DEFAULT_MODE,\r\n  DEFAULT_PALETTE,\r\n  DEFAULT_STORAGE_KEY,\r\n  MODES,\r\n  PALETTES,\r\n  type Mode,\r\n  type Palette,\r\n  type ResolvedMode,\r\n} from \"./constants\";\r\n"],"mappings":";AAAO,IAAM,WAAW,CAAC,SAAS,UAAU,YAAY,SAAS;AAC1D,IAAM,QAAQ,CAAC,SAAS,QAAQ,QAAQ;AAMxC,IAAM,kBAA2B;AACjC,IAAM,eAAqB;AAC3B,IAAM,sBAAsB;;;ACY5B,SAAS,eAAe;AAAA,EAC7B,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,cAAc;AAChB,IAAwB,CAAC,GAAW;AAClC,QAAM,OAAO,CAAC,YAAY,UAAU,OAAO,gBAAgB,WAAW,EACnE,IAAI,CAAC,QAAQ,KAAK,UAAU,GAAG,CAAC,EAChC,KAAK,GAAG;AACX,SAAO,6PAA6P,IAAI;AAC1Q;","names":[]}

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "@irisui/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Accessible React components in the Verre irisé style.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./theme-script": {
+      "import": {
+        "types": "./dist/theme-script.d.ts",
+        "default": "./dist/theme-script.js"
+      },
+      "require": {
+        "types": "./dist/theme-script.d.cts",
+        "default": "./dist/theme-script.cjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@irisui/utils": "0.1.0",
+    "@irisui/tokens": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/theteqlab/iris-ui.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/theteqlab/iris-ui#readme",
+  "bugs": {
+    "url": "https://github.com/theteqlab/iris-ui/issues"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc -p tsconfig.json"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.