@fangxinyan/lumina 0.6.2 → 0.6.3

package/dist/{chunk-CUXV6QNN.cjs → chunk-P6EZG2R7.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkOYMJVU66_cjs = require('./chunk-OYMJVU66.cjs');
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
+var chunkX5GCOMC3_cjs = require('./chunk-X5GCOMC3.cjs');
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Pagination-YIRYJUXP.css');
@@ -98,7 +98,7 @@ var Pagination = React__namespace.forwardRef(({
           className: `pg ${cur === 1 ? "disabled" : ""}`,
           onClick: () => cur > 1 && go(cur - 1),
           "aria-label": "Previous",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "chevLeft", size: 12 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "chevLeft", size: 12 })
         }
       ),
       range().map(
@@ -120,11 +120,11 @@ var Pagination = React__namespace.forwardRef(({
           className: `pg ${cur === pages ? "disabled" : ""}`,
           onClick: () => cur < pages && go(cur + 1),
           "aria-label": "Next",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "chevRight", size: 12 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "chevRight", size: 12 })
         }
       ),
       showSizeChanger && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pg-size-changer", children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkOYMJVU66_cjs.Select,
+        chunkX5GCOMC3_cjs.Select,
         {
           value: pageSize,
           size: "sm",

package/dist/{chunk-SKMP2A5O.cjs → chunk-P6P4DGLF.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
-var chunk6LZ54NPO_cjs = require('./chunk-6LZ54NPO.cjs');
+var chunkHKF2V5MM_cjs = require('./chunk-HKF2V5MM.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./AutoComplete-P5KZMZO5.css');
@@ -168,7 +168,7 @@ var AutoComplete = React__namespace.forwardRef(
     ) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: triggerRef, className: `autocomplete ${className}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk6LZ54NPO_cjs.Input,
+        chunkHKF2V5MM_cjs.Input,
         {
           ref,
           ...rest,

package/dist/{chunk-TEG7NJHS.cjs → chunk-PULGVK2I.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk6LZ54NPO_cjs = require('./chunk-6LZ54NPO.cjs');
+var chunkHKF2V5MM_cjs = require('./chunk-HKF2V5MM.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./CommandPalette-T45DBMPY.css');
@@ -149,7 +149,7 @@ var CommandPalette = React__namespace.forwardRef(({
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cmdp-search", children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunk6LZ54NPO_cjs.Input,
+            chunkHKF2V5MM_cjs.Input,
             {
               ref: inputRef,
               size: "lg",

package/dist/{chunk-TZJH5HBT.cjs → chunk-QP3VCSRY.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk6LZ54NPO_cjs = require('./chunk-6LZ54NPO.cjs');
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
+var chunkHKF2V5MM_cjs = require('./chunk-HKF2V5MM.cjs');
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./InputNumber-VXQIWLQC.css');
@@ -117,7 +117,7 @@ var InputNumber = React__namespace.forwardRef(
           disabled: upDisabled,
           onMouseDown: (e) => e.preventDefault(),
           onClick: () => increment(step),
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "chevUp", size: 10, stroke: 2.5 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "chevUp", size: 10, stroke: 2.5 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -129,7 +129,7 @@ var InputNumber = React__namespace.forwardRef(
           disabled: downDisabled,
           onMouseDown: (e) => e.preventDefault(),
           onClick: () => increment(-step),
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "chevDown", size: 10, stroke: 2.5 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "chevDown", size: 10, stroke: 2.5 })
         }
       )
     ] }) : null;
@@ -138,7 +138,7 @@ var InputNumber = React__namespace.forwardRef(
       stepperSuffix
     ] }) : stepperSuffix ?? suffix;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6LZ54NPO_cjs.Input,
+      chunkHKF2V5MM_cjs.Input,
       {
         ref,
         id,

package/dist/{chunk-MQV2XN4B.cjs → chunk-R2TEDH2F.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('./Typography-NKPWTJCV.css');
@@ -74,8 +74,8 @@ var CopyAction = ({ config, fallbackText }) => {
     timerRef.current = window.setTimeout(() => setCopied(false), 2400);
   };
   const [defIcon, doneIcon] = config.icon ?? [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "copy", size: 12 }, "def"),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "check", size: 12 }, "done")
+    /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "copy", size: 12 }, "def"),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "check", size: 12 }, "done")
   ];
   const tipText = config.tooltips === false ? void 0 : Array.isArray(config.tooltips) ? copied ? config.tooltips[1] : config.tooltips[0] : copied ? "\u5DF2\u590D\u5236" : "\u590D\u5236";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -213,7 +213,7 @@ function useTypographyBody(props) {
           }
         },
         className: "typo-action typo-edit",
-        children: editConf.icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "edit", size: 12 })
+        children: editConf.icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "edit", size: 12 })
       }
     );
   }
@@ -473,7 +473,7 @@ var Link = React__namespace.forwardRef(
         ...anchorRest,
         children: [
           body.inner,
-          external && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-link-ext", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: externalIcon, size: 12 }) }),
+          external && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-link-ext", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: externalIcon, size: 12 }) }),
           body.expandNode,
           body.copyNode,
           body.editIconNode

package/dist/{chunk-JD7A6VM3.js → chunk-SQGPSMSK.js}

@@ -1,7 +1,7 @@
-import { Icon } from './chunk-OF3SGLZY.js';
+import { renderIconSlot } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
-import './Button-SDQD25AG.css';
+import './Button-4Z3Q6KII.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -42,12 +42,12 @@ var Button = React.forwardRef(
         className: cls,
         disabled: disabled || loading,
         title: tip,
-        "aria-label": ariaLabel ?? (onlyIcon ? tip ?? icon : void 0),
+        "aria-label": ariaLabel ?? (onlyIcon ? tip ?? (typeof icon === "string" ? icon : void 0) : void 0),
         ...rest,
         children: [
-          loading ? /* @__PURE__ */ jsx("span", { className: "spinner", "aria-hidden": true }) : icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: 15 }) : null,
+          loading ? /* @__PURE__ */ jsx("span", { className: "spinner", "aria-hidden": true }) : renderIconSlot(icon, { size: 15, className: "btn-icon-slot" }),
           content,
-          trailingIcon && /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: 15 })
+          renderIconSlot(trailingIcon, { size: 15, className: "btn-icon-slot" })
         ]
       }
     );

package/dist/{chunk-GNEZQMKH.js → chunk-TGL5BGMR.js}

@@ -1,9 +1,9 @@
 import { useFloating } from './chunk-DUFRASGO.js';
-import { Input } from './chunk-XTIN5545.js';
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Input } from './chunk-UKS23N3L.js';
+import { Icon, renderIconSlot } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
-import './Cascader-C2DFSMKJ.css';
+import './Cascader-3BLLA7EN.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -200,7 +200,7 @@ var Cascader = React.forwardRef(({
               disabled: o.disabled,
               onClick: () => pick(depth, o.value, hasChildren),
               children: [
-                o.icon && /* @__PURE__ */ jsx(Icon, { name: o.icon, size: 13 }),
+                renderIconSlot(o.icon, { size: 13, className: "cascader-icon" }),
                 /* @__PURE__ */ jsx("span", { children: o.label }),
                 hasChildren && /* @__PURE__ */ jsx("span", { className: "chev", children: /* @__PURE__ */ jsx(Icon, { name: "chevRight", size: 12 }) })
               ]

package/dist/{chunk-5WAXZJG5.cjs → chunk-TP567B3L.cjs}

@@ -1,9 +1,9 @@
 '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('./Button-SDQD25AG.css');
+require('./Button-4Z3Q6KII.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -64,12 +64,12 @@ var Button = React__namespace.forwardRef(
         className: cls,
         disabled: disabled || loading,
         title: tip,
-        "aria-label": ariaLabel ?? (onlyIcon ? tip ?? icon : void 0),
+        "aria-label": ariaLabel ?? (onlyIcon ? tip ?? (typeof icon === "string" ? icon : void 0) : void 0),
         ...rest,
         children: [
-          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner", "aria-hidden": true }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: icon, size: 15 }) : null,
+          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner", "aria-hidden": true }) : chunkV272XR3F_cjs.renderIconSlot(icon, { size: 15, className: "btn-icon-slot" }),
           content,
-          trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: trailingIcon, size: 15 })
+          chunkV272XR3F_cjs.renderIconSlot(trailingIcon, { size: 15, className: "btn-icon-slot" })
         ]
       }
     );

package/dist/{chunk-XTIN5545.js → chunk-UKS23N3L.js}

@@ -1,8 +1,8 @@
-import { Textarea } from './chunk-WGZ2KJTZ.js';
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Textarea } from './chunk-HLFH5HWR.js';
+import { Icon, isIconName, renderIconSlot } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
-import './Input-3G4ONWNU.css';
+import './Input-HUBJ55OH.css';
 import * as React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -51,6 +51,32 @@ var InputBase = React.forwardRef(
       e.stopPropagation();
       if (!disabled) handler(e);
     } : void 0;
+    const renderAffixIcon = (icon, side, handler) => {
+      if (icon == null || icon === false) return null;
+      const className2 = `${side}${handler ? " interactive" : ""}`;
+      if (isIconName(icon)) {
+        return /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: icon,
+            size: 14,
+            className: className2,
+            onClick: handleIconClick(handler)
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: className2,
+          onClick: handler ? (e) => {
+            e.stopPropagation();
+            if (!disabled) handler(e);
+          } : void 0,
+          children: renderIconSlot(icon)
+        }
+      );
+    };
     const handleChange = (e) => {
       if (!isControlled) setInner(e.target.value);
       onChange?.(e);
@@ -72,15 +98,7 @@ var InputBase = React.forwardRef(
     const showClear = !!allowClear && !!currentValue && !disabled;
     const count = currentValue ? currentValue.length : 0;
     const inputElement = /* @__PURE__ */ jsxs("div", { className: wrapCls, children: [
-      leadingIcon && /* @__PURE__ */ jsx(
-        Icon,
-        {
-          name: leadingIcon,
-          size: 14,
-          className: `lead${onLeadingIconClick ? " interactive" : ""}`,
-          onClick: handleIconClick(onLeadingIconClick)
-        }
-      ),
+      renderAffixIcon(leadingIcon, "lead", onLeadingIconClick),
       prefix && /* @__PURE__ */ jsx("span", { className: "input-affix prefix", children: prefix }),
       /* @__PURE__ */ jsx(
         "input",
@@ -109,15 +127,7 @@ var InputBase = React.forwardRef(
           children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 })
         }
       ),
-      trailingIcon && /* @__PURE__ */ jsx(
-        Icon,
-        {
-          name: trailingIcon,
-          size: 14,
-          className: `trail${onTrailingIconClick ? " interactive" : ""}`,
-          onClick: handleIconClick(onTrailingIconClick)
-        }
-      )
+      renderAffixIcon(trailingIcon, "trail", onTrailingIconClick)
     ] });
     if (!showCount) return inputElement;
     return /* @__PURE__ */ jsxs("div", { className: "input-shell", children: [

package/dist/{chunk-TJII7BQ2.cjs → chunk-V272XR3F.cjs}

@@ -277,6 +277,14 @@ var Icon = React__namespace.forwardRef(
   )
 );
 Icon.displayName = "Icon";
+var isIconName = (value) => typeof value === "string" && Object.prototype.hasOwnProperty.call(paths, value);
+var renderIconSlot = (icon, { size = 14, className } = {}) => {
+  if (icon == null || icon === false) return null;
+  if (isIconName(icon)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size, className });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: icon });
+};
 var ICON_NAMES = Object.keys(paths);
 var NAMED_ICON_MAP = {
   AimOutlined: "aim",
@@ -449,4 +457,6 @@ exports.ThunderboltOutlined = ThunderboltOutlined;
 exports.TranslationOutlined = TranslationOutlined;
 exports.UnorderedListOutlined = UnorderedListOutlined;
 exports.UserOutlined = UserOutlined;
+exports.isIconName = isIconName;
+exports.renderIconSlot = renderIconSlot;
 exports.resolveIconName = resolveIconName;

package/dist/chunk-VFFIE2VO.cjs

@@ -0,0 +1,271 @@
+'use strict';
+
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
+require('./tokens-BIIUTPKN.css');
+require('./shared-NJHRNLRH.css');
+require('./Image-MRYQCRQ5.css');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+
+var Image = React__namespace.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__namespace.useState(false);
+  const [err, setErr] = React__namespace.useState(false);
+  const [open, setOpen] = React__namespace.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__namespace.useEffect(() => {
+    setLoaded(false);
+    setErr(false);
+    setOpen(false);
+  }, [src]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "n-image-frame", style: { width: "100%", height: resolvedHeight }, children: [
+          !err && src && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `n-image-placeholder ${loaded && !err ? "loaded" : ""}`, children: placeholder ?? /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "image", size: 28 }) }),
+          canPreview && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "image-hint", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "eye", size: 14 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u70B9\u51FB\u67E5\u770B" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "image-actions", onClick: (e) => e.stopPropagation(), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ia-btn",
+                  onClick: () => setOpen(true),
+                  "aria-label": "\u9884\u89C8",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "eye", size: 13 })
+                }
+              ),
+              src && /* @__PURE__ */ jsxRuntime.jsx("a", { className: "ia-btn", href: src, download: true, "aria-label": "\u4E0B\u8F7D", children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "download", size: 13 }) })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    open && typeof document !== "undefined" && ReactDOM__default.default.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "image-preview-overlay", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, onClick: (e) => e.stopPropagation() }) }),
+      document.body
+    )
+  ] });
+});
+Image.displayName = "Image";
+var ImageGrid = React__namespace.forwardRef(({
+  images,
+  columns,
+  itemHeight = 130,
+  minItemWidth = 160,
+  gap = 14,
+  imageProps,
+  className = "",
+  style,
+  ...rest
+}, ref) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "n-sprite-image-frame", style: { height: resolvedHeight }, children: /* @__PURE__ */ jsxRuntime.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__namespace.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: `n-layered-image ${variant} ${visualFrame ? "framed" : "unframed"} ${className}`,
+      style: { width, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "n-layered-image-layer",
+          style: {
+            zIndex,
+            ...insetStyle(inset)
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              ...layerRest,
+              src: layerSrc,
+              alt: layerAlt,
+              className: layerClassName,
+              style: {
+                objectFit: fit,
+                ...layerStyle
+              }
+            }
+          )
+        },
+        `${layerSrc}-${index}`
+      )) })
+    }
+  );
+});
+LayeredImage.displayName = "LayeredImage";
+
+exports.Image = Image;
+exports.ImageGrid = ImageGrid;
+exports.LayeredImage = LayeredImage;
+exports.SpriteImage = SpriteImage;