@sableui/react 0.0.0-stage → 0.1.1

package/dist/chunk-JI7WJP2L.js

@@ -0,0 +1,286 @@
+// src/themes/_contract.ts
+var SEMANTIC_TOKENS = [
+  // Surfaces & text
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "muted",
+  "muted-foreground",
+  "border",
+  // A visually-stronger structural divider — grid lines, table rules, section
+  // separators — distinct from `border`, which is tuned for subtle chrome
+  // (badge/input outlines). Same neutral ramp as `border`, pulled from a
+  // higher-contrast step. See DESIGN.md / CONTRIBUTING.md → "Theme contract".
+  "border-strong",
+  "input",
+  "ring",
+  // Actions
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  // Success — the positive-state counterpart to destructive (mirrors it 1:1).
+  // Backed by caribbean-green; a SEPARATE token from the `tone-standard`
+  // post-type so success-as-state can be retuned without moving the post tone.
+  "success",
+  "success-foreground",
+  // Tones (semantic — carry meaning, not decoration)
+  "tone-standard",
+  "tone-collectible",
+  "tone-edition",
+  "tone-info",
+  "tone-warning",
+  "highlight",
+  // Tone ink — the legible text/icon color ON a tone fill. Theme-adaptive:
+  // because a tone fill flips lightness with the mode (dark 600/700 in light
+  // mode, lighter dark-tuned values in dark mode), its ink must flip too. These
+  // let a component write `text-tone-edition-foreground` — an intent token with
+  // no palette name and no `dark:` variant — instead of naming palette steps.
+  "tone-standard-foreground",
+  "tone-collectible-foreground",
+  "tone-edition-foreground",
+  "tone-info-foreground",
+  "tone-warning-foreground",
+  "highlight-foreground",
+  // Overlay — a fixed, theme-independent dark surface for things that sit OVER
+  // content rather than on a theme surface: modal/sheet scrims, media letterbox,
+  // pills on imagery. `overlay-foreground` is its always-legible light ink.
+  // Replaces ad-hoc `bg-black/50` + `text-white`.
+  "overlay",
+  "overlay-foreground",
+  // Sidebar set
+  "sidebar",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring"
+];
+var MOTION_TOKENS = [
+  "motion-scale",
+  // Duration ladder (75/150/200/300/500) + semantic enter/exit
+  "motion-duration-instant",
+  "motion-duration-fast",
+  "motion-duration-base",
+  "motion-duration-slow",
+  "motion-duration-slower",
+  "motion-duration-enter",
+  "motion-duration-exit",
+  // Easings — standard/decelerate/emphasized are overshoot-free; spring/bounce
+  // add a tasteful single overshoot (enter only).
+  "motion-ease-standard",
+  "motion-ease-decelerate",
+  "motion-ease-emphasized",
+  "motion-ease-spring",
+  "motion-ease-bounce",
+  "motion-ease-linear"
+];
+var RADIUS_TOKENS = [
+  "theme-radius-none",
+  "theme-radius-xs",
+  "theme-radius-sm",
+  "theme-radius-md",
+  "theme-radius-lg",
+  "theme-radius-xl",
+  "theme-radius-full"
+];
+var TYPE_SCALE_TOKENS = [
+  // Display — the optional 4xl size hook lives in TYPE_REFINEMENT_TOKENS.
+  "type-display-4xl-weight",
+  "type-display-4xl-leading",
+  "type-display-4xl-tracking",
+  "type-display-3xl-size",
+  "type-display-3xl-weight",
+  "type-display-3xl-leading",
+  "type-display-3xl-tracking",
+  "type-display-2xl-size",
+  "type-display-2xl-weight",
+  "type-display-2xl-leading",
+  "type-display-2xl-tracking",
+  "type-display-xl-size",
+  "type-display-xl-weight",
+  "type-display-xl-leading",
+  "type-display-xl-tracking",
+  "type-display-lg-size",
+  "type-display-lg-weight",
+  "type-display-lg-leading",
+  "type-display-lg-tracking",
+  // Heading — one shared weight; size/leading/tracking per tier.
+  "type-heading-weight",
+  "type-heading-1-size",
+  "type-heading-1-leading",
+  "type-heading-1-tracking",
+  "type-heading-2-size",
+  "type-heading-2-leading",
+  "type-heading-2-tracking",
+  "type-heading-3-size",
+  "type-heading-3-leading",
+  "type-heading-3-tracking",
+  "type-heading-4-size",
+  "type-heading-4-leading",
+  "type-heading-4-tracking",
+  // Title — shared weight/leading; tracking per tier (lg uses the base tracking).
+  "type-title-weight",
+  "type-title-leading",
+  "type-title-tracking",
+  "type-title-sm-tracking"
+];
+var TYPE_REFINEMENT_TOKENS = [
+  "type-display-4xl-size",
+  "type-title-lg-size",
+  "type-title-sm-size",
+  "type-body-lg-size",
+  "type-body-lg-weight",
+  "type-body-lg-leading",
+  "type-body-lg-tracking",
+  "type-body-md-size",
+  "type-body-md-weight",
+  "type-body-md-leading",
+  "type-body-md-tracking",
+  "type-body-sm-size",
+  "type-body-sm-weight",
+  "type-body-sm-leading",
+  "type-body-sm-tracking",
+  "type-body-xs-size",
+  "type-body-xs-weight",
+  "type-body-xs-leading",
+  "type-body-xs-tracking",
+  "type-label-lg-size",
+  "type-label-lg-weight",
+  "type-label-lg-leading",
+  "type-label-lg-tracking",
+  "type-label-md-size",
+  "type-label-md-weight",
+  "type-label-md-leading",
+  "type-label-md-tracking",
+  "type-label-sm-size",
+  "type-label-sm-weight",
+  "type-label-sm-leading",
+  "type-label-sm-tracking",
+  "type-label-xs-size",
+  "type-label-xs-weight",
+  "type-label-xs-leading",
+  "type-label-xs-tracking",
+  "type-label-xs-transform",
+  "type-caption-size",
+  "type-caption-weight",
+  "type-caption-leading",
+  "type-caption-tracking",
+  "type-mono-xl-size",
+  "type-mono-xl-weight",
+  "type-mono-xl-leading",
+  "type-mono-xl-tracking",
+  "type-mono-lg-size",
+  "type-mono-lg-weight",
+  "type-mono-lg-leading",
+  "type-mono-lg-tracking",
+  "type-mono-md-size",
+  "type-mono-md-weight",
+  "type-mono-md-leading",
+  "type-mono-md-tracking",
+  "type-mono-caption-size",
+  "type-mono-caption-weight",
+  "type-mono-caption-leading",
+  "type-mono-caption-tracking",
+  "type-mono-sm-size",
+  "type-mono-sm-weight",
+  "type-mono-sm-leading",
+  "type-mono-sm-tracking"
+];
+var TYPE_OVERLINE_TOKENS = [
+  "type-overline-size",
+  "type-overline-weight",
+  "type-overline-leading",
+  "type-overline-tracking",
+  "type-overline-transform"
+];
+var DENSITY_TOKENS = [
+  "control-xs",
+  "control-sm",
+  "control-md",
+  "control-cta",
+  "control-lg",
+  /** Width of a numeric property field — a property grid is built from these. */
+  "field-numeric-width",
+  /** Docked panel chrome. */
+  "panel-width",
+  "panel-width-min",
+  "panel-width-max",
+  "chrome-bar-height",
+  "status-bar-height",
+  /**
+   * Button shape. A DENSITY token because the workspace register flattens it —
+   * neither Figma nor Paper has a pill in its chrome — and therefore something
+   * every density scope must be able to restore.
+   *
+   * It lived outside this list while compact overrode it, which is precisely why
+   * the "declares every density token in both densities" test passed against a
+   * real asymmetry: a comfortable subtree nested in a compact one recovered the
+   * whole control ladder and kept flat buttons forever. The contract had a hole
+   * exactly where the bug was.
+   */
+  "button-radius",
+  /**
+   * The spacing that travels WITH control height. Compact used to shrink the
+   * ladder and leave every gap and row inset at its comfortable 8px, so a
+   * 32px button kept a 40px button's icon gap and a dense menu kept a roomy
+   * menu's padding. Comfortable values equal what the components hardcoded,
+   * so the default register renders unchanged.
+   */
+  "control-gap",
+  "item-px",
+  "item-gap",
+  /**
+   * Tree geometry — a layer/object list is the other shape (with the property
+   * grid) that every tool has, and its left edges are the thing that most
+   * visibly goes wrong. Three tokens, one invariant:
+   *
+   *   --tree-indent MUST equal --tree-column.
+   *
+   * A row is [rail][column: disclosure][column: type][name …][actions]. If the
+   * indent step is smaller than the column, a child's content lands LEFT of
+   * where its parent's content starts and the nesting reads INVERTED — the
+   * defect this promotion exists to make unrepeatable. Enforced in themes.test.
+   */
+  "tree-rail",
+  "tree-column",
+  "tree-indent"
+];
+var LAYERING_TOKENS = [
+  "z-sticky",
+  "z-nav",
+  "z-overlay",
+  "z-toast",
+  "z-skip-link"
+];
+var WORKSPACE_SURFACE_TOKENS = [
+  "canvas",
+  "canvas-foreground",
+  "panel",
+  "panel-foreground",
+  "panel-raised",
+  "hairline",
+  "hairline-strong"
+];
+var DERIVED_EDGE_TOKENS = ["border-floating"];
+var TYPE_UI_TOKENS = [
+  "type-ui-md-size",
+  "type-ui-md-weight",
+  "type-ui-sm-size",
+  "type-ui-sm-weight",
+  "type-ui-leading",
+  "type-ui-section-weight",
+  "type-ui-micro-size",
+  "type-ui-micro-weight"
+];
+
+export { DENSITY_TOKENS, DERIVED_EDGE_TOKENS, LAYERING_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, SEMANTIC_TOKENS, TYPE_OVERLINE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_SCALE_TOKENS, TYPE_UI_TOKENS, WORKSPACE_SURFACE_TOKENS };

package/dist/chunk-K7RUHUGC.js

@@ -0,0 +1,14 @@
+// src/themes/meridian/index.ts
+var meridianTheme = {
+  id: "meridian",
+  label: "Meridian",
+  modes: ["light", "dark"],
+  defaultMode: "light",
+  fonts: {
+    sans: '"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace'
+  }
+};
+var meridian_default = meridianTheme;
+
+export { meridianTheme, meridian_default };

package/dist/chunk-KO3NAEBF.js

@@ -0,0 +1,15 @@
+// src/themes/verdant/index.ts
+var verdantTheme = {
+  id: "verdant",
+  label: "Verdant",
+  modes: ["light", "dark"],
+  defaultMode: "light",
+  fonts: {
+    sans: '"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: '"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace',
+    display: '"Instrument Serif", Georgia, "Times New Roman", serif'
+  }
+};
+var verdant_default = verdantTheme;
+
+export { verdantTheme, verdant_default };

package/dist/chunk-L4IEIQQA.js

@@ -0,0 +1,14 @@
+// src/themes/ember/index.ts
+var emberTheme = {
+  id: "ember",
+  label: "Ember",
+  modes: ["dark", "light"],
+  defaultMode: "dark",
+  fonts: {
+    sans: '"Work Sans", sans-serif',
+    mono: '"DM Mono", ui-monospace, monospace'
+  }
+};
+var ember_default = emberTheme;
+
+export { emberTheme, ember_default };

package/dist/chunk-L6Y46C62.js

@@ -0,0 +1,270 @@
+import { verdantTheme } from './chunk-KO3NAEBF.js';
+import { emberTheme } from './chunk-L4IEIQQA.js';
+import { baseTheme } from './chunk-EP55KSYA.js';
+import { poppyTheme } from './chunk-ADLLDWLW.js';
+import { meridianTheme } from './chunk-K7RUHUGC.js';
+import { atelierTheme } from './chunk-YXBOYWBN.js';
+import { prismTheme } from './chunk-7MG4SHYX.js';
+import { createContext, useMemo, useState, useEffect, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/themes/registry.ts
+var SABLE_THEME_ATTRIBUTE = "data-sable-theme";
+var DEFAULT_THEME_ID = baseTheme.id;
+var defaultThemeId = DEFAULT_THEME_ID;
+var themeManifests = [
+  baseTheme,
+  meridianTheme,
+  prismTheme,
+  verdantTheme,
+  emberTheme,
+  poppyTheme,
+  atelierTheme
+];
+var featuredThemeManifests = themeManifests.filter((theme) => !theme.deprecated);
+var themeIds = themeManifests.map((theme) => theme.id);
+var themeManifestById = Object.fromEntries(
+  themeManifests.map((theme) => [theme.id, theme])
+);
+function isThemeId(value) {
+  return Object.hasOwn(themeManifestById, value);
+}
+function getThemeManifest(themeId) {
+  return themeManifestById[themeId];
+}
+function buildThemeManifestById(customThemes = []) {
+  const merged = { ...themeManifestById };
+  for (const theme of customThemes) merged[theme.id] = theme;
+  return merged;
+}
+function isKnownThemeId(value, manifestById) {
+  return Object.hasOwn(manifestById, value);
+}
+var SABLE_COLOR_STORAGE_KEY = "sable-color-preference";
+var SABLE_THEME_STORAGE_KEY = "sable-theme-id";
+var SableThemeContext = createContext(null);
+function coercePreference(value, fallback) {
+  if (value === "light" || value === "dark" || value === "system") return value;
+  return fallback;
+}
+function coerceThemeId(value, fallback, manifestById = {}) {
+  if (!value) return fallback;
+  if (isThemeId(value) || isKnownThemeId(value, manifestById)) {
+    return manifestById[value]?.deprecated?.replacement ?? value;
+  }
+  return fallback;
+}
+function systemColorMode() {
+  if (typeof window === "undefined" || !window.matchMedia) return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function readStorage(key) {
+  if (!key || typeof window === "undefined") return null;
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeStorage(key, value) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function rootElement() {
+  return typeof document === "undefined" ? null : document.documentElement;
+}
+function resolveTarget(target) {
+  if (target === void 0 || target === "root") return rootElement();
+  return target();
+}
+var SABLE_TRANSITION_SUPPRESSOR_ATTRIBUTE = "data-sable-theme-transition";
+var TRANSITION_SUPPRESSOR_CSS = "*,*::before,*::after{transition:none !important}";
+function withSuppressedTransitions(mutate) {
+  if (typeof document === "undefined" || !document.head || !document.body || typeof document.createElement !== "function") {
+    mutate();
+    return;
+  }
+  const style = document.createElement("style");
+  style.setAttribute(SABLE_TRANSITION_SUPPRESSOR_ATTRIBUTE, "");
+  style.appendChild(document.createTextNode(TRANSITION_SUPPRESSOR_CSS));
+  document.head.appendChild(style);
+  const removeStyle = () => style.parentNode?.removeChild(style);
+  try {
+    mutate();
+  } catch (error) {
+    removeStyle();
+    throw error;
+  }
+  void document.body.offsetHeight;
+  const raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame : null;
+  if (!raf) {
+    removeStyle();
+    return;
+  }
+  raf(() => {
+    raf(removeStyle);
+  });
+}
+function applySableColorMode(mode, target = rootElement()) {
+  if (!target) return;
+  withSuppressedTransitions(() => {
+    target.classList.toggle("dark", mode === "dark");
+  });
+}
+function applySableTheme(themeId, target = rootElement()) {
+  if (!target) return;
+  withSuppressedTransitions(() => {
+    if (themeId === defaultThemeId) {
+      target.removeAttribute(SABLE_THEME_ATTRIBUTE);
+      return;
+    }
+    target.setAttribute(SABLE_THEME_ATTRIBUTE, themeId);
+  });
+}
+function SableThemeProvider({
+  children,
+  defaultPreference = "dark",
+  preference: controlledPreference,
+  onPreferenceChange,
+  defaultThemeId: defaultThemeId2 = defaultThemeId,
+  themeId: controlledThemeId,
+  onThemeIdChange,
+  colorStorageKey = SABLE_COLOR_STORAGE_KEY,
+  themeStorageKey = SABLE_THEME_STORAGE_KEY,
+  target = "root",
+  customThemes
+}) {
+  const themeManifestById2 = useMemo(
+    () => buildThemeManifestById(customThemes),
+    [customThemes]
+  );
+  const [uncontrolledPreference, setUncontrolledPreference] = useState(
+    () => coercePreference(readStorage(colorStorageKey), defaultPreference)
+  );
+  const [uncontrolledThemeId, setUncontrolledThemeId] = useState(
+    () => coerceThemeId(readStorage(themeStorageKey), defaultThemeId2, themeManifestById2)
+  );
+  const [resolvedSystem, setResolvedSystem] = useState(systemColorMode);
+  const preference = controlledPreference ?? uncontrolledPreference;
+  const themeId = controlledThemeId ?? uncontrolledThemeId;
+  const mode = preference === "system" ? resolvedSystem : preference;
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => setResolvedSystem(media.matches ? "dark" : "light");
+    media.addEventListener?.("change", onChange);
+    return () => media.removeEventListener?.("change", onChange);
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    function onStorage(event) {
+      if (controlledPreference === void 0) {
+        if (event.key === colorStorageKey) {
+          setUncontrolledPreference(
+            coercePreference(event.newValue, defaultPreference)
+          );
+        }
+        if (event.key === null) {
+          setUncontrolledPreference(
+            coercePreference(readStorage(colorStorageKey), defaultPreference)
+          );
+        }
+      }
+      if (controlledThemeId === void 0) {
+        if (event.key === themeStorageKey) {
+          setUncontrolledThemeId(
+            coerceThemeId(event.newValue, defaultThemeId2, themeManifestById2)
+          );
+        }
+        if (event.key === null) {
+          setUncontrolledThemeId(
+            coerceThemeId(
+              readStorage(themeStorageKey),
+              defaultThemeId2,
+              themeManifestById2
+            )
+          );
+        }
+      }
+    }
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [
+    colorStorageKey,
+    controlledPreference,
+    controlledThemeId,
+    defaultPreference,
+    defaultThemeId2,
+    themeManifestById2,
+    themeStorageKey
+  ]);
+  useEffect(() => {
+    applySableColorMode(mode, resolveTarget(target));
+  }, [mode, target]);
+  useEffect(() => {
+    applySableTheme(themeId, resolveTarget(target));
+  }, [themeId, target]);
+  const setPreference = useCallback(
+    (next) => {
+      if (controlledPreference === void 0) setUncontrolledPreference(next);
+      writeStorage(colorStorageKey, next);
+      onPreferenceChange?.(next);
+    },
+    [controlledPreference, colorStorageKey, onPreferenceChange]
+  );
+  const setThemeId = useCallback(
+    (next) => {
+      if (controlledThemeId === void 0) setUncontrolledThemeId(next);
+      writeStorage(themeStorageKey, next);
+      onThemeIdChange?.(next);
+    },
+    [controlledThemeId, onThemeIdChange, themeStorageKey]
+  );
+  const toggle = useCallback(() => {
+    setPreference(mode === "dark" ? "light" : "dark");
+  }, [mode, setPreference]);
+  const value = useMemo(
+    () => ({
+      mode,
+      colorMode: mode,
+      preference,
+      colorPreference: preference,
+      themeId,
+      themes: featuredThemeManifests,
+      setPreference,
+      setColorPreference: setPreference,
+      setThemeId,
+      toggle,
+      toggleColorMode: toggle
+    }),
+    [mode, preference, themeId, setPreference, setThemeId, toggle]
+  );
+  return /* @__PURE__ */ jsx(SableThemeContext.Provider, { value, children });
+}
+function useSableTheme() {
+  const ctx = useContext(SableThemeContext);
+  if (ctx) return ctx;
+  return {
+    mode: "dark",
+    colorMode: "dark",
+    preference: "dark",
+    colorPreference: "dark",
+    themeId: defaultThemeId,
+    themes: featuredThemeManifests,
+    setPreference: () => {
+    },
+    setColorPreference: () => {
+    },
+    setThemeId: () => {
+    },
+    toggle: () => {
+    },
+    toggleColorMode: () => {
+    }
+  };
+}
+
+export { DEFAULT_THEME_ID, SABLE_COLOR_STORAGE_KEY, SABLE_THEME_ATTRIBUTE, SABLE_THEME_STORAGE_KEY, SableThemeProvider, applySableColorMode, applySableTheme, buildThemeManifestById, defaultThemeId, featuredThemeManifests, getThemeManifest, isKnownThemeId, isThemeId, themeIds, themeManifestById, themeManifests, useSableTheme };

package/dist/chunk-NEQNXI2G.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/phone/status-icons.tsx
+function StatusIcons(props) {
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 17 12", width: "17", height: "12", fill: "currentColor", children: [
+      /* @__PURE__ */ jsx("rect", { x: "0", y: "7.5", width: "3", height: "4.5", rx: "1" }),
+      /* @__PURE__ */ jsx("rect", { x: "4.66", y: "5", width: "3", height: "7", rx: "1" }),
+      /* @__PURE__ */ jsx("rect", { x: "9.33", y: "2.5", width: "3", height: "9.5", rx: "1" }),
+      /* @__PURE__ */ jsx("rect", { x: "14", y: "0", width: "3", height: "12", rx: "1" })
+    ] }),
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 12", width: "16", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "2.1", strokeLinecap: "round", children: [
+      /* @__PURE__ */ jsx("path", { d: "M1.64 4.84 A9 9 0 0 1 14.36 4.84" }),
+      /* @__PURE__ */ jsx("path", { d: "M4.04 7.64 A5.6 5.6 0 0 1 11.96 7.64" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 11.4 L6.25 9.65 A2.5 2.5 0 0 1 9.75 9.65 Z", fill: "currentColor", stroke: "none" })
+    ] }),
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 27 13", width: "27", height: "13", fill: "currentColor", children: [
+      /* @__PURE__ */ jsx("rect", { x: "0.5", y: "0.5", width: "23", height: "12", rx: "3.8", fill: "none", stroke: "currentColor", opacity: "0.35" }),
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "20", height: "9", rx: "2.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M25 4.5 a1.5 1.5 0 0 1 1.5 1.5 v1 a1.5 1.5 0 0 1 -1.5 1.5 z", opacity: "0.4" })
+    ] })
+  ] });
+}
+
+export { StatusIcons };

package/dist/chunk-PAOZBZME.js

@@ -0,0 +1,40 @@
+import { reiconIconSet } from './chunk-5Z5KLOAU.js';
+import { createContext, useMemo, useContext } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var IconContext = createContext({
+  set: null,
+  defaultVariant: "regular"
+});
+function IconProvider({
+  set,
+  defaultVariant = "regular",
+  children
+}) {
+  const value = useMemo(
+    () => ({ set, defaultVariant }),
+    [set, defaultVariant]
+  );
+  return /* @__PURE__ */ jsx(IconContext.Provider, { value, children });
+}
+function useIconSet() {
+  return useContext(IconContext);
+}
+function Icon({ name, variant, spin, className, title }) {
+  const { set, defaultVariant } = useIconSet();
+  const resolved = set ?? reiconIconSet;
+  return /* @__PURE__ */ jsx(Fragment, { children: resolved({ name, variant: variant ?? defaultVariant, spin, className, title }) });
+}
+
+// src/icon/compose.ts
+function composeIconSets(...sets) {
+  return (props) => {
+    for (const set of sets) {
+      const rendered = set(props);
+      if (rendered !== null && rendered !== void 0) return rendered;
+    }
+    return null;
+  };
+}
+
+export { Icon, IconProvider, composeIconSets, useIconSet };