@fangxinyan/lumina 0.6.2 → 0.6.4

package/dist/Icon.cjs

@@ -1,190 +1,198 @@
 'use strict';
 
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
+var chunk6LARTGLP_cjs = require('./chunk-6LARTGLP.cjs');
 
 
 
 Object.defineProperty(exports, "AimOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.AimOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.AimOutlined; }
 });
 Object.defineProperty(exports, "AppstoreOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.AppstoreOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.AppstoreOutlined; }
 });
 Object.defineProperty(exports, "BarChartOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.BarChartOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.BarChartOutlined; }
 });
 Object.defineProperty(exports, "BlockOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.BlockOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.BlockOutlined; }
 });
 Object.defineProperty(exports, "BorderOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.BorderOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.BorderOutlined; }
 });
 Object.defineProperty(exports, "CameraOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.CameraOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.CameraOutlined; }
 });
 Object.defineProperty(exports, "CaretDownOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.CaretDownOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.CaretDownOutlined; }
 });
 Object.defineProperty(exports, "CaretUpOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.CaretUpOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.CaretUpOutlined; }
 });
 Object.defineProperty(exports, "CheckCircleFilled", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.CheckCircleFilled; }
+  get: function () { return chunk6LARTGLP_cjs.CheckCircleFilled; }
 });
 Object.defineProperty(exports, "CheckCircleOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.CheckCircleOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.CheckCircleOutlined; }
 });
 Object.defineProperty(exports, "CheckOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.CheckOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.CheckOutlined; }
 });
 Object.defineProperty(exports, "ClockCircleFilled", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.ClockCircleFilled; }
+  get: function () { return chunk6LARTGLP_cjs.ClockCircleFilled; }
 });
 Object.defineProperty(exports, "CloseCircleOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.CloseCircleOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.CloseCircleOutlined; }
 });
 Object.defineProperty(exports, "CloseOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.CloseOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.CloseOutlined; }
 });
 Object.defineProperty(exports, "CopyOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.CopyOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.CopyOutlined; }
 });
 Object.defineProperty(exports, "DashboardOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.DashboardOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.DashboardOutlined; }
 });
 Object.defineProperty(exports, "DeleteOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.DeleteOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.DeleteOutlined; }
 });
 Object.defineProperty(exports, "DownOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.DownOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.DownOutlined; }
 });
 Object.defineProperty(exports, "EnvironmentOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.EnvironmentOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.EnvironmentOutlined; }
 });
 Object.defineProperty(exports, "ExclamationCircleOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.ExclamationCircleOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.ExclamationCircleOutlined; }
 });
 Object.defineProperty(exports, "FolderOpenOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.FolderOpenOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.FolderOpenOutlined; }
 });
 Object.defineProperty(exports, "ICON_NAMES", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.ICON_NAMES; }
+  get: function () { return chunk6LARTGLP_cjs.ICON_NAMES; }
 });
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.Icon; }
+  get: function () { return chunk6LARTGLP_cjs.Icon; }
 });
 Object.defineProperty(exports, "LeftOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.LeftOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.LeftOutlined; }
 });
 Object.defineProperty(exports, "LoadingOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.LoadingOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.LoadingOutlined; }
 });
 Object.defineProperty(exports, "MinusCircleOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.MinusCircleOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.MinusCircleOutlined; }
 });
 Object.defineProperty(exports, "MinusOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.MinusOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.MinusOutlined; }
 });
 Object.defineProperty(exports, "NAMED_ICON_MAP", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.NAMED_ICON_MAP; }
+  get: function () { return chunk6LARTGLP_cjs.NAMED_ICON_MAP; }
 });
 Object.defineProperty(exports, "PictureOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.PictureOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.PictureOutlined; }
 });
 Object.defineProperty(exports, "PlusOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.PlusOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.PlusOutlined; }
 });
 Object.defineProperty(exports, "QqOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.QqOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.QqOutlined; }
 });
 Object.defineProperty(exports, "ReloadOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.ReloadOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.ReloadOutlined; }
 });
 Object.defineProperty(exports, "RightOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.RightOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.RightOutlined; }
 });
 Object.defineProperty(exports, "RobotOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.RobotOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.RobotOutlined; }
 });
 Object.defineProperty(exports, "SearchOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.SearchOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.SearchOutlined; }
 });
 Object.defineProperty(exports, "SettingOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.SettingOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.SettingOutlined; }
 });
 Object.defineProperty(exports, "StarFilled", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.StarFilled; }
+  get: function () { return chunk6LARTGLP_cjs.StarFilled; }
 });
 Object.defineProperty(exports, "StarOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.StarOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.StarOutlined; }
 });
 Object.defineProperty(exports, "SwapOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.SwapOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.SwapOutlined; }
 });
 Object.defineProperty(exports, "SwapRightOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.SwapRightOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.SwapRightOutlined; }
 });
 Object.defineProperty(exports, "SyncOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.SyncOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.SyncOutlined; }
 });
 Object.defineProperty(exports, "ThunderboltOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.ThunderboltOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.ThunderboltOutlined; }
 });
 Object.defineProperty(exports, "TranslationOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.TranslationOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.TranslationOutlined; }
 });
 Object.defineProperty(exports, "UnorderedListOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.UnorderedListOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.UnorderedListOutlined; }
 });
 Object.defineProperty(exports, "UserOutlined", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.UserOutlined; }
+  get: function () { return chunk6LARTGLP_cjs.UserOutlined; }
+});
+Object.defineProperty(exports, "isIconName", {
+  enumerable: true,
+  get: function () { return chunk6LARTGLP_cjs.isIconName; }
+});
+Object.defineProperty(exports, "renderIconSlot", {
+  enumerable: true,
+  get: function () { return chunk6LARTGLP_cjs.renderIconSlot; }
 });
 Object.defineProperty(exports, "resolveIconName", {
   enumerable: true,
-  get: function () { return chunkTJII7BQ2_cjs.resolveIconName; }
+  get: function () { return chunk6LARTGLP_cjs.resolveIconName; }
 });

package/dist/Icon.d.cts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
 /**
@@ -9,6 +10,7 @@ interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "stroke"> {
     size?: number | string;
     stroke?: number;
 }
+type IconSlot = IconName | React.ReactNode;
 /**
  * `Icon` — stroked line icon set, sized in pixels, inherits `currentColor`.
  *
@@ -16,6 +18,12 @@ interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "stroke"> {
  * <Icon name="plus" size={18} />
  */
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+declare const isIconName: (value: IconSlot) => value is IconName;
+interface RenderIconSlotOptions {
+    size?: number | string;
+    className?: string;
+}
+declare const renderIconSlot: (icon: IconSlot, { size, className }?: RenderIconSlotOptions) => react_jsx_runtime.JSX.Element | null;
 declare const ICON_NAMES: IconName[];
 declare const NAMED_ICON_MAP: {
     readonly AimOutlined: "aim";
@@ -111,4 +119,4 @@ declare const TranslationOutlined: React.ForwardRefExoticComponent<NamedIconProp
 declare const UnorderedListOutlined: React.ForwardRefExoticComponent<NamedIconProps & React.RefAttributes<HTMLSpanElement>>;
 declare const UserOutlined: React.ForwardRefExoticComponent<NamedIconProps & React.RefAttributes<HTMLSpanElement>>;
 
-export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, type IconName, type IconProps, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, type NamedIconComponentName, type NamedIconProps, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, resolveIconName };
+export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, type IconName, type IconProps, type IconSlot, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, type NamedIconComponentName, type NamedIconProps, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, type RenderIconSlotOptions, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName };

package/dist/Icon.d.ts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
 /**
@@ -9,6 +10,7 @@ interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "stroke"> {
     size?: number | string;
     stroke?: number;
 }
+type IconSlot = IconName | React.ReactNode;
 /**
  * `Icon` — stroked line icon set, sized in pixels, inherits `currentColor`.
  *
@@ -16,6 +18,12 @@ interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "stroke"> {
  * <Icon name="plus" size={18} />
  */
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+declare const isIconName: (value: IconSlot) => value is IconName;
+interface RenderIconSlotOptions {
+    size?: number | string;
+    className?: string;
+}
+declare const renderIconSlot: (icon: IconSlot, { size, className }?: RenderIconSlotOptions) => react_jsx_runtime.JSX.Element | null;
 declare const ICON_NAMES: IconName[];
 declare const NAMED_ICON_MAP: {
     readonly AimOutlined: "aim";
@@ -111,4 +119,4 @@ declare const TranslationOutlined: React.ForwardRefExoticComponent<NamedIconProp
 declare const UnorderedListOutlined: React.ForwardRefExoticComponent<NamedIconProps & React.RefAttributes<HTMLSpanElement>>;
 declare const UserOutlined: React.ForwardRefExoticComponent<NamedIconProps & React.RefAttributes<HTMLSpanElement>>;
 
-export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, type IconName, type IconProps, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, type NamedIconComponentName, type NamedIconProps, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, resolveIconName };
+export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, type IconName, type IconProps, type IconSlot, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, type NamedIconComponentName, type NamedIconProps, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, type RenderIconSlotOptions, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName };

package/dist/Icon.js

@@ -1 +1 @@
-export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, resolveIconName } from './chunk-OF3SGLZY.js';
+export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName } from './chunk-YT5NLCRC.js';

package/dist/{Image-4MN34O6P.css → Image-SGSRTHQX.css}

@@ -5,17 +5,39 @@
   border-radius: var(--r-md);
   background: var(--bg);
   padding: 6px;
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   overflow: hidden;
   line-height: 0;
 }
+.n-image.raw {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.n-image.icon {
+  border-radius: var(--r-sm);
+}
+.n-image.unframed {
+  background: transparent;
+  box-shadow: none;
+}
 .n-image-frame {
   position: relative;
   overflow: hidden;
   border-radius: calc(var(--r-md) - 4px);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   background: var(--bg-sunken);
 }
+.n-image.raw .n-image-frame {
+  border-radius: 0;
+}
+.n-image.icon .n-image-frame {
+  border-radius: var(--r-sm);
+}
+.n-image.unframed .n-image-frame {
+  background: transparent;
+  box-shadow: none;
+}
 .n-image img {
   display: block;
   width: 100%;
@@ -102,5 +124,61 @@
   max-width: 80vw;
   max-height: 80vh;
   border-radius: var(--r-lg);
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
+}
+
+/* ============ SpriteImage / LayeredImage ============ */
+.n-sprite-image,
+.n-layered-image {
+  display: inline-block;
+  position: relative;
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  padding: 6px;
+  box-shadow: var(--neu-shadow-control);
+  overflow: hidden;
+  line-height: 0;
+}
+.n-sprite-image.raw,
+.n-layered-image.raw {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image.unframed,
+.n-layered-image.unframed {
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image-frame,
+.n-layered-image-frame {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--r-sm);
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-shadow-inset);
+}
+.n-sprite-image.raw .n-sprite-image-frame,
+.n-layered-image.raw .n-layered-image-frame {
+  border-radius: 0;
+}
+.n-sprite-image.unframed .n-sprite-image-frame,
+.n-layered-image.unframed .n-layered-image-frame {
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image-sprite {
+  display: block;
+  background-repeat: no-repeat;
+  transform-origin: top left;
+}
+.n-layered-image-layer {
+  position: absolute;
+  display: block;
+}
+.n-layered-image img {
+  display: block;
+  width: 100%;
+  height: 100%;
 }

package/dist/Image.cjs

@@ -1,15 +1,23 @@
 'use strict';
 
-var chunkB2KEZQ6S_cjs = require('./chunk-B2KEZQ6S.cjs');
-require('./chunk-TJII7BQ2.cjs');
+var chunkDYHNOYRC_cjs = require('./chunk-DYHNOYRC.cjs');
+require('./chunk-6LARTGLP.cjs');
 
 
 
 Object.defineProperty(exports, "Image", {
   enumerable: true,
-  get: function () { return chunkB2KEZQ6S_cjs.Image; }
+  get: function () { return chunkDYHNOYRC_cjs.Image; }
 });
 Object.defineProperty(exports, "ImageGrid", {
   enumerable: true,
-  get: function () { return chunkB2KEZQ6S_cjs.ImageGrid; }
+  get: function () { return chunkDYHNOYRC_cjs.ImageGrid; }
+});
+Object.defineProperty(exports, "LayeredImage", {
+  enumerable: true,
+  get: function () { return chunkDYHNOYRC_cjs.LayeredImage; }
+});
+Object.defineProperty(exports, "SpriteImage", {
+  enumerable: true,
+  get: function () { return chunkDYHNOYRC_cjs.SpriteImage; }
 });

package/dist/Image.d.cts

@@ -1,30 +1,103 @@
 import * as React from 'react';
 
+type ImageVariant = "framed" | "raw" | "icon";
 interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
     src?: string;
     alt?: string;
     width?: number | string;
     height?: number | string;
+    /** Visual treatment. `framed` keeps the neumorphic shell; `raw`/`icon` remove padding by default. */
+    variant?: ImageVariant;
+    /** Whether to render the inner neumorphic frame. Defaults to true only for `framed`. */
+    frame?: boolean;
+    /** Outer padding. Defaults to 6px for framed images and 0 for raw/icon images. */
+    padding?: number | string;
+    /** CSS object-fit applied to the underlying img. */
+    objectFit?: React.CSSProperties["objectFit"];
+    /** CSS object-position applied to the underlying img. */
+    objectPosition?: React.CSSProperties["objectPosition"];
     /** Allow click-to-zoom preview overlay. */
     preview?: boolean;
     /** Hover scale-up. */
     hover?: boolean;
     /** Custom placeholder while loading or on error. */
     placeholder?: React.ReactNode;
+    /** Extra props forwarded to the underlying img. */
+    imgProps?: Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "width" | "height">;
     className?: string;
 }
-/** `Image` — neumorphic framed image with optional preview overlay. */
+/**
+ * `Image` — image surface with framed, raw and icon-oriented variants.
+ *
+ * @example
+ * <Image src={url} width={240} height={160} />
+ * <Image variant="icon" src={iconUrl} width={48} height={48} preview={false} />
+ */
 declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>;
+interface ImageGridItem extends Omit<ImageProps, "children"> {
+    src: string;
+    alt?: string;
+}
 interface ImageGridProps extends React.HTMLAttributes<HTMLDivElement> {
-    images: {
-        src: string;
-        alt?: string;
-    }[];
+    images: ImageGridItem[];
     columns?: number;
     itemHeight?: number;
+    minItemWidth?: number | string;
+    gap?: number | string;
+    imageProps?: Omit<ImageProps, "src" | "alt" | "width" | "height">;
     className?: string;
 }
 /** `ImageGrid` — auto-fit grid of `Image` items. */
 declare const ImageGrid: React.ForwardRefExoticComponent<ImageGridProps & React.RefAttributes<HTMLDivElement>>;
+interface SpriteRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface SpriteImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    src: string;
+    sprite: SpriteRect;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    scale?: number;
+    backgroundSize?: string;
+    variant?: ImageVariant;
+    frame?: boolean;
+    padding?: number | string;
+    className?: string;
+}
+/**
+ * `SpriteImage` — crops one rectangle from a sprite sheet.
+ *
+ * @example
+ * <SpriteImage src={sheetUrl} sprite={{ x: 64, y: 32, width: 32, height: 32 }} />
+ */
+declare const SpriteImage: React.ForwardRefExoticComponent<SpriteImageProps & React.RefAttributes<HTMLDivElement>>;
+type LayeredImageInset = number | string | Partial<Record<"top" | "right" | "bottom" | "left", number | string>>;
+interface LayeredImageLayer extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "width" | "height"> {
+    src: string;
+    alt?: string;
+    fit?: React.CSSProperties["objectFit"];
+    inset?: LayeredImageInset;
+    zIndex?: number;
+}
+interface LayeredImageProps extends React.HTMLAttributes<HTMLDivElement> {
+    layers: LayeredImageLayer[];
+    width?: number | string;
+    height?: number | string;
+    variant?: ImageVariant;
+    frame?: boolean;
+    padding?: number | string;
+    className?: string;
+}
+/**
+ * `LayeredImage` — stacks several images in the same box, useful for avatar + frame assets.
+ *
+ * @example
+ * <LayeredImage layers={[{ src: headUrl }, { src: frameUrl }]} width={48} height={48} />
+ */
+declare const LayeredImage: React.ForwardRefExoticComponent<LayeredImageProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Image, ImageGrid, type ImageGridProps, type ImageProps };
+export { Image, ImageGrid, type ImageGridItem, type ImageGridProps, type ImageProps, type ImageVariant, LayeredImage, type LayeredImageInset, type LayeredImageLayer, type LayeredImageProps, SpriteImage, type SpriteImageProps, type SpriteRect };

package/dist/Image.d.ts

@@ -1,30 +1,103 @@
 import * as React from 'react';
 
+type ImageVariant = "framed" | "raw" | "icon";
 interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
     src?: string;
     alt?: string;
     width?: number | string;
     height?: number | string;
+    /** Visual treatment. `framed` keeps the neumorphic shell; `raw`/`icon` remove padding by default. */
+    variant?: ImageVariant;
+    /** Whether to render the inner neumorphic frame. Defaults to true only for `framed`. */
+    frame?: boolean;
+    /** Outer padding. Defaults to 6px for framed images and 0 for raw/icon images. */
+    padding?: number | string;
+    /** CSS object-fit applied to the underlying img. */
+    objectFit?: React.CSSProperties["objectFit"];
+    /** CSS object-position applied to the underlying img. */
+    objectPosition?: React.CSSProperties["objectPosition"];
     /** Allow click-to-zoom preview overlay. */
     preview?: boolean;
     /** Hover scale-up. */
     hover?: boolean;
     /** Custom placeholder while loading or on error. */
     placeholder?: React.ReactNode;
+    /** Extra props forwarded to the underlying img. */
+    imgProps?: Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "width" | "height">;
     className?: string;
 }
-/** `Image` — neumorphic framed image with optional preview overlay. */
+/**
+ * `Image` — image surface with framed, raw and icon-oriented variants.
+ *
+ * @example
+ * <Image src={url} width={240} height={160} />
+ * <Image variant="icon" src={iconUrl} width={48} height={48} preview={false} />
+ */
 declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>;
+interface ImageGridItem extends Omit<ImageProps, "children"> {
+    src: string;
+    alt?: string;
+}
 interface ImageGridProps extends React.HTMLAttributes<HTMLDivElement> {
-    images: {
-        src: string;
-        alt?: string;
-    }[];
+    images: ImageGridItem[];
     columns?: number;
     itemHeight?: number;
+    minItemWidth?: number | string;
+    gap?: number | string;
+    imageProps?: Omit<ImageProps, "src" | "alt" | "width" | "height">;
     className?: string;
 }
 /** `ImageGrid` — auto-fit grid of `Image` items. */
 declare const ImageGrid: React.ForwardRefExoticComponent<ImageGridProps & React.RefAttributes<HTMLDivElement>>;
+interface SpriteRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface SpriteImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    src: string;
+    sprite: SpriteRect;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    scale?: number;
+    backgroundSize?: string;
+    variant?: ImageVariant;
+    frame?: boolean;
+    padding?: number | string;
+    className?: string;
+}
+/**
+ * `SpriteImage` — crops one rectangle from a sprite sheet.
+ *
+ * @example
+ * <SpriteImage src={sheetUrl} sprite={{ x: 64, y: 32, width: 32, height: 32 }} />
+ */
+declare const SpriteImage: React.ForwardRefExoticComponent<SpriteImageProps & React.RefAttributes<HTMLDivElement>>;
+type LayeredImageInset = number | string | Partial<Record<"top" | "right" | "bottom" | "left", number | string>>;
+interface LayeredImageLayer extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "width" | "height"> {
+    src: string;
+    alt?: string;
+    fit?: React.CSSProperties["objectFit"];
+    inset?: LayeredImageInset;
+    zIndex?: number;
+}
+interface LayeredImageProps extends React.HTMLAttributes<HTMLDivElement> {
+    layers: LayeredImageLayer[];
+    width?: number | string;
+    height?: number | string;
+    variant?: ImageVariant;
+    frame?: boolean;
+    padding?: number | string;
+    className?: string;
+}
+/**
+ * `LayeredImage` — stacks several images in the same box, useful for avatar + frame assets.
+ *
+ * @example
+ * <LayeredImage layers={[{ src: headUrl }, { src: frameUrl }]} width={48} height={48} />
+ */
+declare const LayeredImage: React.ForwardRefExoticComponent<LayeredImageProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Image, ImageGrid, type ImageGridProps, type ImageProps };
+export { Image, ImageGrid, type ImageGridItem, type ImageGridProps, type ImageProps, type ImageVariant, LayeredImage, type LayeredImageInset, type LayeredImageLayer, type LayeredImageProps, SpriteImage, type SpriteImageProps, type SpriteRect };