@irisui/ui 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 theteqlab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,85 @@
-# Temporary Holding Version
+# @irisui/ui
 
-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.
+Accessible React components in the _Verre irisé_ style, from
+[iris-ui](https://github.com/theteqlab/iris-ui).
+
+## Install
+
+```sh
+npm install @irisui/ui @irisui/tokens
+```
+
+`react` and `react-dom` (18 or 19) are peer dependencies.
+
+Import the tokens once in your global CSS (see
+[`@irisui/tokens`](https://www.npmjs.com/package/@irisui/tokens)):
+
+```css
+@import "tailwindcss";
+@import "@irisui/tokens/tailwind.css";
+```
+
+## Theme
+
+The theme is driven by two attributes on `<html>`: `data-palette` (`nacre`,
+`aurore`, `couchant`, `glacier`) and `data-mode` (`light`, `dark`, `system`).
+Setting them by hand is enough; the helpers below are optional.
+
+### `ThemeProvider` and `useTheme`
+
+`ThemeProvider` sets the attributes on `<html>` and remembers the user's choice
+in `localStorage` (synced across tabs).
+
+```tsx
+import { ThemeProvider, useTheme, PALETTES, type Palette } from "@irisui/ui";
+
+function PaletteSwitcher() {
+  const { palette, setPalette } = useTheme();
+  return (
+    <select value={palette} onChange={(e) => setPalette(e.target.value as Palette)}>
+      {PALETTES.map((p) => (
+        <option key={p}>{p}</option>
+      ))}
+    </select>
+  );
+}
+
+<ThemeProvider defaultPalette="nacre" defaultMode="system">
+  <App />
+</ThemeProvider>;
+```
+
+Props: `palette` / `mode` (controlled), `defaultPalette` / `defaultMode`,
+`onPaletteChange` / `onModeChange`, and `storageKey` (default
+`"@irisui/theme"`, `null` disables persistence).
+
+`useTheme()` returns `{ palette, mode, resolvedMode, setPalette, setMode }`;
+`resolvedMode` is `light` or `dark`, with `system` resolved.
+
+### Avoiding a flash of the default theme
+
+Render `ThemeScript` in `<head>` so the stored theme is applied before the
+first paint:
+
+```tsx
+import { ThemeScript } from "@irisui/ui";
+
+<head>
+  <ThemeScript />
+</head>;
+```
+
+Outside React (a Vite plugin, a server template, a Server Component), use
+`getThemeScript()` from the server-safe entry point; it returns the script as a
+string:
+
+```ts
+import { getThemeScript } from "@irisui/ui/theme-script";
+```
+
+Pass the same `storageKey`, `defaultPalette` and `defaultMode` as to
+`ThemeProvider`.
+
+## License
+
+[MIT](./LICENSE)

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