@fangxinyan/lumina 0.6.2 → 0.6.3

package/dist/{chunk-RF2EY5JS.cjs → chunk-6ZXQJRAT.cjs}

@@ -49,24 +49,95 @@ var FONT_STACKS = {
 };
 var DEFAULT_CONFIG = {
   mode: "light",
+  colorScheme: "light",
   accent: "sky",
   density: "comfortable",
   intensity: 5,
   radius: 20,
   font: "sf",
-  tokens: {}
+  tokens: {},
+  themes: {}
 };
 var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+function isThemeBaseMode(mode) {
+  return mode === "light" || mode === "dark";
+}
+function isBuiltInThemeMode(mode) {
+  return mode === "light" || mode === "dark" || mode === "system";
+}
+function getThemePreset(themes, mode) {
+  if (!mode || isBuiltInThemeMode(mode)) return void 0;
+  return themes?.[mode];
+}
+function applyThemePreset(config, mode) {
+  const preset = getThemePreset(config.themes, mode);
+  if (!preset) {
+    return {
+      ...config,
+      mode,
+      colorScheme: isThemeBaseMode(mode) ? mode : config.colorScheme
+    };
+  }
+  return {
+    ...config,
+    mode,
+    colorScheme: preset.base ?? config.colorScheme ?? DEFAULT_CONFIG.colorScheme,
+    accent: preset.accent ?? config.accent,
+    density: preset.density ?? config.density,
+    intensity: preset.intensity ?? config.intensity,
+    radius: preset.radius ?? config.radius,
+    font: preset.font ?? config.font,
+    tokens: preset.tokens ? { ...preset.tokens } : config.tokens
+  };
+}
+function resolveThemeConfig(config) {
+  const mode = config.mode ?? DEFAULT_CONFIG.mode;
+  const themes = config.themes ?? DEFAULT_CONFIG.themes;
+  const preset = getThemePreset(themes, mode);
+  const presetConfig = preset ? {
+    ...preset.base ? { colorScheme: preset.base } : null,
+    ...preset.accent ? { accent: preset.accent } : null,
+    ...preset.density ? { density: preset.density } : null,
+    ...preset.intensity != null ? { intensity: preset.intensity } : null,
+    ...preset.radius != null ? { radius: preset.radius } : null,
+    ...preset.font ? { font: preset.font } : null
+  } : {};
+  const merged = {
+    ...DEFAULT_CONFIG,
+    ...presetConfig,
+    ...config,
+    mode,
+    themes,
+    tokens: {
+      ...preset?.tokens ?? {},
+      ...config.tokens ?? {}
+    }
+  };
+  return {
+    ...merged,
+    colorScheme: merged.colorScheme ?? preset?.base ?? DEFAULT_CONFIG.colorScheme,
+    accent: merged.accent ?? preset?.accent ?? DEFAULT_CONFIG.accent,
+    density: merged.density ?? preset?.density ?? DEFAULT_CONFIG.density,
+    intensity: merged.intensity ?? preset?.intensity ?? DEFAULT_CONFIG.intensity,
+    radius: merged.radius ?? preset?.radius ?? DEFAULT_CONFIG.radius,
+    font: merged.font ?? preset?.font ?? DEFAULT_CONFIG.font
+  };
+}
 function resolveThemeMode(mode) {
   if (mode !== "system") return mode;
   if (!isBrowser) return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function normalizeAccentInput(input, resolvedMode) {
+function resolveThemeColorScheme(mode, themes, fallback) {
+  if (mode === "system") return fallback ?? resolveThemeMode(mode);
+  if (isThemeBaseMode(mode)) return mode;
+  return getThemePreset(themes, mode)?.base ?? fallback ?? DEFAULT_CONFIG.colorScheme;
+}
+function normalizeAccentInput(input, colorScheme) {
   if (typeof input === "string" && input in ACCENT_PRESETS) {
     const key = input;
     const base = ACCENT_PRESETS[key];
-    if (resolvedMode === "dark") {
+    if (colorScheme === "dark") {
       return { key, palette: { ...base, ...ACCENT_PRESETS_DARK[key] } };
     }
     return { key, palette: base };
@@ -74,18 +145,20 @@ function normalizeAccentInput(input, resolvedMode) {
   const raw = typeof input === "string" ? { accent: input } : input;
   const { accent } = raw;
   const ink = raw.ink ?? `color-mix(in oklch, ${accent} 65%, black)`;
-  const soft = raw.soft ?? (resolvedMode === "dark" ? `color-mix(in oklch, ${accent} 30%, black)` : `color-mix(in oklch, ${accent} 15%, white)`);
-  const glow = raw.glow ?? (resolvedMode === "dark" ? `color-mix(in oklch, ${accent} 18%, transparent)` : `color-mix(in oklch, ${accent} 35%, transparent)`);
+  const soft = raw.soft ?? (colorScheme === "dark" ? `color-mix(in oklch, ${accent} 30%, black)` : `color-mix(in oklch, ${accent} 15%, white)`);
+  const glow = raw.glow ?? (colorScheme === "dark" ? `color-mix(in oklch, ${accent} 18%, transparent)` : `color-mix(in oklch, ${accent} 35%, transparent)`);
   return { key: "custom", palette: { accent, ink, soft, glow } };
 }
 function toVar(key) {
   return key.startsWith("--") ? key : `--${key}`;
 }
 function applyTheme(target, config) {
-  const cfg = { ...DEFAULT_CONFIG, ...config };
-  const resolvedMode = resolveThemeMode(cfg.mode);
-  const { key, palette } = normalizeAccentInput(cfg.accent, resolvedMode);
-  target.dataset.theme = resolvedMode;
+  const cfg = resolveThemeConfig(config);
+  resolveThemeMode(cfg.mode);
+  const colorScheme = resolveThemeColorScheme(cfg.mode, cfg.themes, cfg.colorScheme);
+  const { key, palette } = normalizeAccentInput(cfg.accent, colorScheme);
+  target.dataset.theme = colorScheme;
+  target.dataset.themeMode = cfg.mode;
   target.dataset.density = cfg.density;
   if (key === "custom") {
     delete target.dataset.accent;
@@ -146,7 +219,8 @@ function loadPersisted(key) {
 function persist(key, cfg) {
   if (!key || !isBrowser) return;
   try {
-    localStorage.setItem(key, JSON.stringify(cfg));
+    const { themes: _themes, ...persisted } = cfg;
+    localStorage.setItem(key, JSON.stringify(persisted));
   } catch {
   }
 }
@@ -164,41 +238,69 @@ var ThemeProvider = (props) => {
   const initialConfig = React__namespace.useMemo(() => {
     const fromProps = {
       mode: configProps.mode ?? DEFAULT_CONFIG.mode,
+      colorScheme: configProps.colorScheme,
       accent: configProps.accent ?? DEFAULT_CONFIG.accent,
       density: configProps.density ?? DEFAULT_CONFIG.density,
       intensity: configProps.intensity ?? DEFAULT_CONFIG.intensity,
       radius: configProps.radius ?? DEFAULT_CONFIG.radius,
       font: configProps.font ?? DEFAULT_CONFIG.font,
-      tokens: configProps.tokens ?? {}
+      tokens: configProps.tokens ?? {},
+      themes: configProps.themes ?? DEFAULT_CONFIG.themes
     };
     const persisted = loadPersisted(storageKey);
-    return persisted ? { ...fromProps, ...persisted } : fromProps;
+    const seeded = applyThemePreset(fromProps, fromProps.mode ?? DEFAULT_CONFIG.mode);
+    const withExplicitProps = {
+      ...seeded,
+      ...configProps.colorScheme ? { colorScheme: configProps.colorScheme } : null,
+      ...configProps.accent ? { accent: configProps.accent } : null,
+      ...configProps.density ? { density: configProps.density } : null,
+      ...configProps.intensity != null ? { intensity: configProps.intensity } : null,
+      ...configProps.radius != null ? { radius: configProps.radius } : null,
+      ...configProps.font ? { font: configProps.font } : null,
+      ...configProps.tokens ? { tokens: configProps.tokens } : null
+    };
+    if (!persisted) return withExplicitProps;
+    const persistedMode = persisted.mode ?? withExplicitProps.mode ?? DEFAULT_CONFIG.mode;
+    return {
+      ...applyThemePreset({ ...withExplicitProps, mode: persistedMode }, persistedMode),
+      ...persisted
+    };
   }, []);
   const [config, setConfig] = React__namespace.useState(initialConfig);
   React__namespace.useEffect(() => {
     setConfig((c) => {
+      const base = {
+        ...c,
+        themes: configProps.themes ?? c.themes
+      };
+      const mode = configProps.mode ?? c.mode ?? DEFAULT_CONFIG.mode;
+      const nextFromMode = configProps.mode ? applyThemePreset(base, mode) : base;
       const next = {
-        mode: configProps.mode ?? c.mode,
-        accent: configProps.accent ?? c.accent,
-        density: configProps.density ?? c.density,
-        intensity: configProps.intensity ?? c.intensity,
-        radius: configProps.radius ?? c.radius,
-        font: configProps.font ?? c.font,
-        tokens: configProps.tokens ?? c.tokens
+        ...nextFromMode,
+        mode,
+        colorScheme: configProps.colorScheme ?? nextFromMode.colorScheme,
+        accent: configProps.accent ?? nextFromMode.accent,
+        density: configProps.density ?? nextFromMode.density,
+        intensity: configProps.intensity ?? nextFromMode.intensity,
+        radius: configProps.radius ?? nextFromMode.radius,
+        font: configProps.font ?? nextFromMode.font,
+        tokens: configProps.tokens ?? nextFromMode.tokens
       };
-      if (next.mode === c.mode && next.accent === c.accent && next.density === c.density && next.intensity === c.intensity && next.radius === c.radius && next.font === c.font && next.tokens === c.tokens) {
+      if (next.mode === c.mode && next.colorScheme === c.colorScheme && next.accent === c.accent && next.density === c.density && next.intensity === c.intensity && next.radius === c.radius && next.font === c.font && next.tokens === c.tokens && next.themes === c.themes) {
         return c;
       }
       return next;
     });
   }, [
     configProps.mode,
+    configProps.colorScheme,
     configProps.accent,
     configProps.density,
     configProps.intensity,
     configProps.radius,
     configProps.font,
-    configProps.tokens
+    configProps.tokens,
+    configProps.themes
   ]);
   const [systemDark, setSystemDark] = React__namespace.useState(
     () => isBrowser && window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -210,32 +312,47 @@ var ThemeProvider = (props) => {
     mql.addEventListener?.("change", handler);
     return () => mql.removeEventListener?.("change", handler);
   }, []);
-  const resolvedMode = config.mode === "system" ? systemDark ? "dark" : "light" : config.mode;
+  const effectiveConfig = React__namespace.useMemo(() => resolveThemeConfig(config), [config]);
+  const activeTheme = React__namespace.useMemo(
+    () => getThemePreset(effectiveConfig.themes, effectiveConfig.mode) ?? null,
+    [effectiveConfig.mode, effectiveConfig.themes]
+  );
+  const colorScheme = effectiveConfig.mode === "system" ? systemDark ? "dark" : "light" : isThemeBaseMode(effectiveConfig.mode) ? effectiveConfig.mode : effectiveConfig.colorScheme ?? activeTheme?.base ?? DEFAULT_CONFIG.colorScheme;
+  const resolvedMode = effectiveConfig.mode === "system" ? colorScheme : effectiveConfig.mode;
   const { key: accentKey, palette: accentPalette } = React__namespace.useMemo(
-    () => normalizeAccentInput(config.accent, resolvedMode),
-    [config.accent, resolvedMode]
+    () => normalizeAccentInput(effectiveConfig.accent, colorScheme),
+    [effectiveConfig.accent, colorScheme]
   );
   const scopeRef = React__namespace.useRef(null);
+  const appliedTokenKeysRef = React__namespace.useRef(/* @__PURE__ */ new Set());
   React__namespace.useEffect(() => {
     if (!isBrowser) return;
     const el = target === "root" ? document.documentElement : scopeRef.current;
     if (!el) return;
-    applyTheme(el, { ...config, mode: resolvedMode });
+    const nextTokenKeys = new Set(Object.keys(effectiveConfig.tokens));
+    for (const key of appliedTokenKeysRef.current) {
+      if (!nextTokenKeys.has(key)) el.style.removeProperty(toVar(key));
+    }
+    applyTheme(el, { ...effectiveConfig, colorScheme });
+    appliedTokenKeysRef.current = nextTokenKeys;
     persist(storageKey, config);
-  }, [config, resolvedMode, target, storageKey]);
+  }, [config, effectiveConfig, colorScheme, target, storageKey]);
   const value = React__namespace.useMemo(() => {
     const patch = (p) => setConfig((c) => ({ ...c, ...p }));
     return {
-      mode: config.mode,
+      mode: effectiveConfig.mode,
       resolvedMode,
+      colorScheme,
       accent: accentKey,
       accentPalette,
-      density: config.density,
-      intensity: config.intensity,
-      radius: config.radius,
-      font: config.font,
-      tokens: config.tokens ?? {},
-      setMode: (m) => patch({ mode: m }),
+      density: effectiveConfig.density,
+      intensity: effectiveConfig.intensity,
+      radius: effectiveConfig.radius,
+      font: effectiveConfig.font,
+      tokens: effectiveConfig.tokens,
+      themes: effectiveConfig.themes,
+      activeTheme,
+      setMode: (m) => setConfig((c) => applyThemePreset(c, m)),
       toggleMode: () => setConfig((c) => ({
         ...c,
         mode: c.mode === "dark" ? "light" : "dark"
@@ -246,10 +363,11 @@ var ThemeProvider = (props) => {
       setRadius: (n) => patch({ radius: n }),
       setFont: (f) => patch({ font: f }),
       setTokens: (t) => patch({ tokens: t }),
+      setThemes: (t) => patch({ themes: t }),
       update: patch,
       reset: () => setConfig(initialConfig)
     };
-  }, [config, resolvedMode, accentKey, accentPalette, initialConfig]);
+  }, [effectiveConfig, resolvedMode, colorScheme, accentKey, accentPalette, activeTheme, initialConfig]);
   const onChangeRef = React__namespace.useRef(onChange);
   onChangeRef.current = onChange;
   React__namespace.useEffect(() => {
@@ -276,6 +394,7 @@ exports.FONT_STACKS = FONT_STACKS;
 exports.ThemeProvider = ThemeProvider;
 exports.applyTheme = applyTheme;
 exports.normalizeAccentInput = normalizeAccentInput;
+exports.resolveThemeColorScheme = resolveThemeColorScheme;
 exports.resolveThemeMode = resolveThemeMode;
 exports.useTheme = useTheme;
 exports.useThemeOptional = useThemeOptional;

package/dist/{chunk-4WTU5P3O.cjs → chunk-7AG524YZ.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Calendar-LHZELUDL.css');
@@ -66,7 +66,7 @@ var Calendar = React__namespace.forwardRef(({
           className: "btn icon sm ghost",
           onClick: () => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1)),
           "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "chevLeft", size: 14 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "chevLeft", size: 14 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "calendar-title", children: [
@@ -82,7 +82,7 @@ var Calendar = React__namespace.forwardRef(({
           className: "btn icon sm ghost",
           onClick: () => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1)),
           "aria-label": "Next month",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "chevRight", size: 14 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "chevRight", size: 14 })
         }
       )
     ] }),

package/dist/{chunk-CEJ7VBR6.js → chunk-7IYKKLV3.js}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-JD7A6VM3.js';
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Button } from './chunk-SQGPSMSK.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Modal-2QNDW4SO.css';

package/dist/{chunk-FJNWUELL.js → chunk-AAGF7K3L.js}

@@ -1,5 +1,5 @@
 import { useFloating } from './chunk-DUFRASGO.js';
-import { Input } from './chunk-XTIN5545.js';
+import { Input } from './chunk-UKS23N3L.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './AutoComplete-P5KZMZO5.css';

package/dist/{chunk-AWXCSX6J.js → chunk-BPOOVO5T.js}

@@ -1,7 +1,7 @@
-import { Pagination } from './chunk-7NGMQIST.js';
-import { Checkbox } from './chunk-EQEJTN3V.js';
+import { Pagination } from './chunk-CETNCRZ4.js';
+import { Checkbox } from './chunk-GIZU3H6H.js';
 import { useFloating } from './chunk-DUFRASGO.js';
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Table-ATJJQLKU.css';

package/dist/{chunk-EJBHR2P5.js → chunk-BVQ77VRY.js}

@@ -1,5 +1,5 @@
-import { Input } from './chunk-XTIN5545.js';
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Input } from './chunk-UKS23N3L.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './InputNumber-VXQIWLQC.css';

package/dist/{chunk-7NGMQIST.js → chunk-CETNCRZ4.js}

@@ -1,5 +1,5 @@
-import { Select } from './chunk-WKKSAGYH.js';
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Select } from './chunk-FBYUZOZP.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Pagination-YIRYJUXP.css';

package/dist/{chunk-K2KYM7LW.cjs → chunk-DG5VQ6BO.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3AS5B7MQ_cjs = require('./chunk-3AS5B7MQ.cjs');
+var chunkXSN4TLN5_cjs = require('./chunk-XSN4TLN5.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./TablePro-3XVHYLSL.css');
@@ -20,7 +20,7 @@ function TablePro({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-toolbar-main", children: toolbar }),
       actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-toolbar-actions", children: actions })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunk3AS5B7MQ_cjs.Table, { ...tableProps, className: "joined" }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkXSN4TLN5_cjs.Table, { ...tableProps, className: "joined" }),
     footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-footer", children: footer })
   ] });
 }

package/dist/chunk-DWAN57G4.js

@@ -0,0 +1,243 @@
+import { Icon } from './chunk-47VG2P34.js';
+import './tokens-BIIUTPKN.css';
+import './shared-NJHRNLRH.css';
+import './Image-MRYQCRQ5.css';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var Image = React.forwardRef(({
+  src,
+  alt,
+  width = 200,
+  height,
+  variant = "framed",
+  frame,
+  padding,
+  objectFit,
+  objectPosition,
+  preview,
+  hover = true,
+  placeholder,
+  imgProps,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const [loaded, setLoaded] = React.useState(false);
+  const [err, setErr] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const visualFrame = frame ?? variant === "framed";
+  const resolvedHeight = height ?? (variant === "icon" ? width : 140);
+  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
+  const resolvedObjectFit = objectFit ?? (variant === "icon" ? "contain" : "cover");
+  const canPreview = (preview ?? variant === "framed") && loaded && !err;
+  const {
+    className: imgClassName = "",
+    style: imgStyle,
+    onLoad,
+    onError,
+    ...imageRest
+  } = imgProps ?? {};
+  React.useEffect(() => {
+    setLoaded(false);
+    setErr(false);
+    setOpen(false);
+  }, [src]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `n-image ${variant} ${visualFrame ? "framed" : "unframed"} ${hover ? "hover" : ""} ${canPreview ? "clickable" : ""} ${className}`,
+        style: { width, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
+        onClick: () => canPreview && setOpen(true),
+        ...rest,
+        children: /* @__PURE__ */ jsxs("div", { className: "n-image-frame", style: { width: "100%", height: resolvedHeight }, children: [
+          !err && src && /* @__PURE__ */ jsx(
+            "img",
+            {
+              ...imageRest,
+              src,
+              alt,
+              className: imgClassName,
+              style: { objectFit: resolvedObjectFit, objectPosition, ...imgStyle },
+              onLoad: (event) => {
+                setLoaded(true);
+                onLoad?.(event);
+              },
+              onError: (event) => {
+                setErr(true);
+                onError?.(event);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: `n-image-placeholder ${loaded && !err ? "loaded" : ""}`, children: placeholder ?? /* @__PURE__ */ jsx(Icon, { name: "image", size: 28 }) }),
+          canPreview && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "image-hint", children: [
+              /* @__PURE__ */ jsx(Icon, { name: "eye", size: 14 }),
+              /* @__PURE__ */ jsx("span", { children: "\u70B9\u51FB\u67E5\u770B" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "image-actions", onClick: (e) => e.stopPropagation(), children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ia-btn",
+                  onClick: () => setOpen(true),
+                  "aria-label": "\u9884\u89C8",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "eye", size: 13 })
+                }
+              ),
+              src && /* @__PURE__ */ jsx("a", { className: "ia-btn", href: src, download: true, "aria-label": "\u4E0B\u8F7D", children: /* @__PURE__ */ jsx(Icon, { name: "download", size: 13 }) })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    open && typeof document !== "undefined" && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx("div", { className: "image-preview-overlay", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx("img", { src, alt, onClick: (e) => e.stopPropagation() }) }),
+      document.body
+    )
+  ] });
+});
+Image.displayName = "Image";
+var ImageGrid = React.forwardRef(({
+  images,
+  columns,
+  itemHeight = 130,
+  minItemWidth = 160,
+  gap = 14,
+  imageProps,
+  className = "",
+  style,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className,
+    style: {
+      display: "grid",
+      gap,
+      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : `repeat(auto-fill, minmax(${typeof minItemWidth === "number" ? `${minItemWidth}px` : minItemWidth}, 1fr))`,
+      ...style
+    },
+    ...rest,
+    children: images.map((img, i) => /* @__PURE__ */ jsx(
+      Image,
+      {
+        ...imageProps,
+        ...img,
+        src: img.src,
+        alt: img.alt,
+        width: img.width ?? "100%",
+        height: img.height ?? itemHeight
+      },
+      i
+    ))
+  }
+));
+ImageGrid.displayName = "ImageGrid";
+var SpriteImage = React.forwardRef(({
+  src,
+  sprite,
+  alt,
+  width,
+  height,
+  scale = 1,
+  backgroundSize,
+  variant = "icon",
+  frame,
+  padding,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const visualFrame = frame ?? variant === "framed";
+  const resolvedWidth = width ?? sprite.width * scale;
+  const resolvedHeight = height ?? sprite.height * scale;
+  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `n-sprite-image ${variant} ${visualFrame ? "framed" : "unframed"} ${className}`,
+      role: alt ? "img" : void 0,
+      "aria-label": alt || void 0,
+      "aria-hidden": alt === "" ? true : void 0,
+      style: { width: resolvedWidth, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: "n-sprite-image-frame", style: { height: resolvedHeight }, children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "n-sprite-image-sprite",
+          style: {
+            width: sprite.width,
+            height: sprite.height,
+            backgroundImage: `url(${JSON.stringify(src)})`,
+            backgroundPosition: `${-sprite.x}px ${-sprite.y}px`,
+            backgroundSize,
+            transform: scale !== 1 ? `scale(${scale})` : void 0
+          }
+        }
+      ) })
+    }
+  );
+});
+SpriteImage.displayName = "SpriteImage";
+var insetStyle = (inset) => {
+  if (inset == null) return { inset: 0 };
+  if (typeof inset === "number" || typeof inset === "string") return { inset };
+  return inset;
+};
+var LayeredImage = React.forwardRef(({
+  layers,
+  width = 64,
+  height = 64,
+  variant = "icon",
+  frame,
+  padding,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const visualFrame = frame ?? variant === "framed";
+  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `n-layered-image ${variant} ${visualFrame ? "framed" : "unframed"} ${className}`,
+      style: { width, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: "n-layered-image-frame", style: { height }, children: layers.map(({ src: layerSrc, alt: layerAlt = "", fit = "contain", inset, zIndex, className: layerClassName = "", style: layerStyle, ...layerRest }, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "n-layered-image-layer",
+          style: {
+            zIndex,
+            ...insetStyle(inset)
+          },
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              ...layerRest,
+              src: layerSrc,
+              alt: layerAlt,
+              className: layerClassName,
+              style: {
+                objectFit: fit,
+                ...layerStyle
+              }
+            }
+          )
+        },
+        `${layerSrc}-${index}`
+      )) })
+    }
+  );
+});
+LayeredImage.displayName = "LayeredImage";
+
+export { Image, ImageGrid, LayeredImage, SpriteImage };

package/dist/{chunk-CXWEOAVU.js → chunk-ET6DYQVZ.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Typography-NKPWTJCV.css';