huspy-icons 0.0.1 → 0.1.1

package/README.md

@@ -168,15 +168,6 @@ npm publish --access public
 
 > Filenames become component names: `arrow-left.svg` → `ArrowLeft.tsx`.
 
----
-
-## 🧪 Testing
-
-* Snapshot a subset of icons to detect accidental path changes.
-* `tsd` tests for prop typing.
-* Lint rule to ensure all icons export from the barrel.
-
----
 
 ## 🧰 Troubleshooting
 

package/dist/native/index.d.ts

@@ -38,4 +38,26 @@ declare const SvgArrowUpRight: ({ size, ...props }: NativeIconProps) => React.JS
 
 declare const SvgIconSlot: ({ size, ...props }: NativeIconProps) => React.JSX.Element;
 
-export { SvgArrowLeft as ArrowLeft, SvgArrowUpRight as ArrowUpRight, ICON_SIZES, type IconSize, type IconSizeToken, SvgIconSlot as IconSlot, type NativeIconProps, resolveSize };
+/**
+ * Icon imports - using dynamic imports for tree-shaking
+ * Auto-generated - do not edit manually
+ */
+/**
+ * Available icon names
+ */
+type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';
+/**
+ * Props for the unified Icon component (React Native)
+ */
+interface IconProps extends Omit<NativeIconProps, 'size'> {
+    name: IconName;
+    size?: NativeIconProps['size'];
+    color?: string;
+}
+/**
+ * Unified Icon component that renders icons by name (React Native)
+ * Uses dynamic imports for tree-shaking support
+ */
+declare const Icon: ({ name, size, color, ...props }: IconProps) => React.JSX.Element | null;
+
+export { SvgArrowLeft as ArrowLeft, SvgArrowUpRight as ArrowUpRight, ICON_SIZES, Icon, type IconName, type IconProps, type IconSize, type IconSizeToken, SvgIconSlot as IconSlot, type NativeIconProps, resolveSize };

package/dist/native/index.js

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,103 +30,188 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/shared/types.ts
+function resolveSize(size = "lg") {
+  if (typeof size === "number") {
+    return size;
+  }
+  return ICON_SIZES[size] ?? ICON_SIZES.lg;
+}
+var ICON_SIZES;
+var init_types = __esm({
+  "src/shared/types.ts"() {
+    "use strict";
+    ICON_SIZES = {
+      xs: 8,
+      sm: 12,
+      md: 16,
+      lg: 20,
+      xl: 24
+    };
+  }
+});
+
+// src/native/ArrowLeft.tsx
+var ArrowLeft_exports = {};
+__export(ArrowLeft_exports, {
+  default: () => ArrowLeft_default
+});
+var React, import_react_native_svg, SvgArrowLeft, ArrowLeft_default;
+var init_ArrowLeft = __esm({
+  "src/native/ArrowLeft.tsx"() {
+    "use strict";
+    React = __toESM(require("react"));
+    import_react_native_svg = __toESM(require("react-native-svg"));
+    init_types();
+    SvgArrowLeft = ({ size = 16, ...props }) => {
+      const sizeValue = resolveSize(size);
+      return /* @__PURE__ */ React.createElement(import_react_native_svg.default, { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React.createElement(
+        import_react_native_svg.Path,
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z",
+          fill: "currentColor"
+        }
+      ), /* @__PURE__ */ React.createElement(
+        import_react_native_svg.Path,
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z",
+          fill: "currentColor"
+        }
+      ));
+    };
+    ArrowLeft_default = SvgArrowLeft;
+  }
+});
+
+// src/native/ArrowUpRight.tsx
+var ArrowUpRight_exports = {};
+__export(ArrowUpRight_exports, {
+  default: () => ArrowUpRight_default
+});
+var React2, import_react_native_svg2, SvgArrowUpRight, ArrowUpRight_default;
+var init_ArrowUpRight = __esm({
+  "src/native/ArrowUpRight.tsx"() {
+    "use strict";
+    React2 = __toESM(require("react"));
+    import_react_native_svg2 = __toESM(require("react-native-svg"));
+    init_types();
+    SvgArrowUpRight = ({ size = 16, ...props }) => {
+      const sizeValue = resolveSize(size);
+      return /* @__PURE__ */ React2.createElement(import_react_native_svg2.default, { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React2.createElement(
+        import_react_native_svg2.Path,
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z",
+          fill: "currentColor"
+        }
+      ), /* @__PURE__ */ React2.createElement(
+        import_react_native_svg2.Path,
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z",
+          fill: "currentColor"
+        }
+      ));
+    };
+    ArrowUpRight_default = SvgArrowUpRight;
+  }
+});
+
+// src/native/IconSlot.tsx
+var IconSlot_exports = {};
+__export(IconSlot_exports, {
+  default: () => IconSlot_default
+});
+var React3, import_react_native_svg3, SvgIconSlot, IconSlot_default;
+var init_IconSlot = __esm({
+  "src/native/IconSlot.tsx"() {
+    "use strict";
+    React3 = __toESM(require("react"));
+    import_react_native_svg3 = __toESM(require("react-native-svg"));
+    init_types();
+    SvgIconSlot = ({ size = 16, ...props }) => {
+      const sizeValue = resolveSize(size);
+      return /* @__PURE__ */ React3.createElement(import_react_native_svg3.default, { width: sizeValue, height: sizeValue, viewBox: "0 0 15 15", fill: "none", ...props }, /* @__PURE__ */ React3.createElement(
+        import_react_native_svg3.Path,
+        {
+          d: "M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z",
+          fill: "currentColor"
+        }
+      ));
+    };
+    IconSlot_default = SvgIconSlot;
+  }
+});
+
 // src/native/index.ts
 var native_exports = {};
 __export(native_exports, {
   ArrowLeft: () => ArrowLeft_default,
   ArrowUpRight: () => ArrowUpRight_default,
   ICON_SIZES: () => ICON_SIZES,
+  Icon: () => Icon_default,
   IconSlot: () => IconSlot_default,
   resolveSize: () => resolveSize
 });
 module.exports = __toCommonJS(native_exports);
+init_ArrowLeft();
+init_ArrowUpRight();
+init_IconSlot();
 
-// src/native/ArrowLeft.tsx
-var React = __toESM(require("react"));
-var import_react_native_svg = __toESM(require("react-native-svg"));
-
-// src/shared/types.ts
-var ICON_SIZES = {
-  xs: 8,
-  sm: 12,
-  md: 16,
-  lg: 20,
-  xl: 24
-};
-function resolveSize(size = "lg") {
-  if (typeof size === "number") {
-    return size;
+// src/native/Icon.tsx
+var React4 = __toESM(require("react"));
+function loadIcon(name) {
+  switch (name) {
+    case "arrow-left":
+      return Promise.resolve().then(() => (init_ArrowLeft(), ArrowLeft_exports)).then((m) => m.default);
+    case "arrow-up-right":
+      return Promise.resolve().then(() => (init_ArrowUpRight(), ArrowUpRight_exports)).then((m) => m.default);
+    case "icon-slot":
+      return Promise.resolve().then(() => (init_IconSlot(), IconSlot_exports)).then((m) => m.default);
+    default:
+      return Promise.reject(new Error(`Icon "${name}" not found`));
   }
-  return ICON_SIZES[size] ?? ICON_SIZES.lg;
 }
-
-// src/native/ArrowLeft.tsx
-var SvgArrowLeft = ({ size = 16, ...props }) => {
-  const sizeValue = resolveSize(size);
-  return /* @__PURE__ */ React.createElement(import_react_native_svg.default, { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React.createElement(
-    import_react_native_svg.Path,
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z",
-      fill: "currentColor"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    import_react_native_svg.Path,
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z",
-      fill: "currentColor"
-    }
-  ));
-};
-var ArrowLeft_default = SvgArrowLeft;
-
-// src/native/ArrowUpRight.tsx
-var React2 = __toESM(require("react"));
-var import_react_native_svg2 = __toESM(require("react-native-svg"));
-var SvgArrowUpRight = ({ size = 16, ...props }) => {
-  const sizeValue = resolveSize(size);
-  return /* @__PURE__ */ React2.createElement(import_react_native_svg2.default, { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React2.createElement(
-    import_react_native_svg2.Path,
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z",
-      fill: "currentColor"
-    }
-  ), /* @__PURE__ */ React2.createElement(
-    import_react_native_svg2.Path,
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z",
-      fill: "currentColor"
-    }
-  ));
+var Icon = ({ name, size = 16, color, ...props }) => {
+  const [IconComponent, setIconComponent] = React4.useState(null);
+  const [loading, setLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  React4.useEffect(() => {
+    setLoading(true);
+    setError(null);
+    loadIcon(name).then((Component) => {
+      setIconComponent(() => Component);
+      setLoading(false);
+    }).catch((err) => {
+      console.warn(err.message);
+      setError(err.message);
+      setLoading(false);
+    });
+  }, [name]);
+  if (loading) {
+    return null;
+  }
+  if (error || !IconComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement(IconComponent, { size, color, ...props });
 };
-var ArrowUpRight_default = SvgArrowUpRight;
+var Icon_default = Icon;
 
-// src/native/IconSlot.tsx
-var React3 = __toESM(require("react"));
-var import_react_native_svg3 = __toESM(require("react-native-svg"));
-var SvgIconSlot = ({ size = 16, ...props }) => {
-  const sizeValue = resolveSize(size);
-  return /* @__PURE__ */ React3.createElement(import_react_native_svg3.default, { width: sizeValue, height: sizeValue, viewBox: "0 0 15 15", fill: "none", ...props }, /* @__PURE__ */ React3.createElement(
-    import_react_native_svg3.Path,
-    {
-      d: "M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z",
-      fill: "currentColor"
-    }
-  ));
-};
-var IconSlot_default = SvgIconSlot;
+// src/native/index.ts
+init_types();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowLeft,
   ArrowUpRight,
   ICON_SIZES,
+  Icon,
   IconSlot,
   resolveSize
 });

package/dist/native/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/native/index.ts","../../src/native/ArrowLeft.tsx","../../src/shared/types.ts","../../src/native/ArrowUpRight.tsx","../../src/native/IconSlot.tsx"],"sourcesContent":["// Auto-generated exports\nexport { default as ArrowLeft } from './ArrowLeft';\nexport { default as ArrowUpRight } from './ArrowUpRight';\nexport { default as IconSlot } from './IconSlot';\n\n// Export types\nexport type {\n  IconSize,\n  IconSizeToken,\n  NativeIconProps,\n} from '../shared/types';\n\nexport { ICON_SIZES, resolveSize } from '../shared/types';\n","import * as React from 'react';\nimport Svg, { Path } from 'react-native-svg';\nimport type { NativeIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowLeft = ({ size = 16, ...props }: NativeIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <Svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z\"\n      fill=\"currentColor\"\n    />\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z\"\n      fill=\"currentColor\"\n    />\n  </Svg>\n  );\n};\n\nexport default SvgArrowLeft;\n","export type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Icon size presets\n */\nexport const ICON_SIZES = {\n  xs: 8,\n  sm: 12,\n  md: 16,\n  lg: 20,\n  xl: 24,\n} as const;\n\n/**\n * Icon size token type\n */\nexport type IconSizeToken = keyof typeof ICON_SIZES;\n\n/**\n * Props for React (web) icons\n */\nexport interface ReactIconProps extends React.SVGProps<SVGSVGElement> {\n  size?: IconSize;\n}\n\n/**\n * Props for React Native icons\n */\nexport interface NativeIconProps {\n  size?: IconSize;\n  width?: number;\n  height?: number;\n  color?: string;\n  style?: any;\n}\n\n/**\n * Resolves an icon size to a numeric value\n * @param size - Size value or token\n * @returns Numeric size in pixels\n */\nexport function resolveSize(size: IconSize = 'lg'): number {\n  if (typeof size === 'number') {\n    return size;\n  }\n  \n  return ICON_SIZES[size] ?? ICON_SIZES.lg;\n}\n","import * as React from 'react';\nimport Svg, { Path } from 'react-native-svg';\nimport type { NativeIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowUpRight = ({ size = 16, ...props }: NativeIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <Svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z\"\n      fill=\"currentColor\"\n    />\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z\"\n      fill=\"currentColor\"\n    />\n  </Svg>\n  );\n};\n\nexport default SvgArrowUpRight;\n","import * as React from 'react';\nimport Svg, { Path } from 'react-native-svg';\nimport type { NativeIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgIconSlot = ({ size = 16, ...props }: NativeIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <Svg width={sizeValue} height={sizeValue} viewBox=\"0 0 15 15\" fill=\"none\" {...props}>\n    <Path\n      d=\"M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z\"\n      fill=\"currentColor\"\n    />\n  </Svg>\n  );\n};\n\nexport default SvgIconSlot;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAA0B;;;ACInB,IAAM,aAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA8BO,SAAS,YAAY,OAAiB,MAAc;AACzD,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,EACT;AAEA,SAAO,WAAW,IAAI,KAAK,WAAW;AACxC;;;AD1CA,IAAM,eAAe,CAAC,EAAE,OAAO,IAAI,GAAG,MAAM,MAAuB;AACjE,QAAM,YAAY,YAAY,IAAI;AAElC,SACE,oCAAC,wBAAAA,SAAA,EAAI,OAAO,WAAW,QAAQ,WAAW,SAAQ,aAAY,MAAK,QAAQ,GAAG,SAC9E;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,CACF;AAEF;AAEA,IAAO,oBAAQ;;;AE1Bf,IAAAC,SAAuB;AACvB,IAAAC,2BAA0B;AAI1B,IAAM,kBAAkB,CAAC,EAAE,OAAO,IAAI,GAAG,MAAM,MAAuB;AACpE,QAAM,YAAY,YAAY,IAAI;AAElC,SACE,qCAAC,yBAAAC,SAAA,EAAI,OAAO,WAAW,QAAQ,WAAW,SAAQ,aAAY,MAAK,QAAQ,GAAG,SAC9E;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,CACF;AAEF;AAEA,IAAO,uBAAQ;;;AC1Bf,IAAAC,SAAuB;AACvB,IAAAC,2BAA0B;AAI1B,IAAM,cAAc,CAAC,EAAE,OAAO,IAAI,GAAG,MAAM,MAAuB;AAChE,QAAM,YAAY,YAAY,IAAI;AAElC,SACE,qCAAC,yBAAAC,SAAA,EAAI,OAAO,WAAW,QAAQ,WAAW,SAAQ,aAAY,MAAK,QAAQ,GAAG,SAC9E;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,CACF;AAEF;AAEA,IAAO,mBAAQ;","names":["Svg","React","import_react_native_svg","Svg","React","import_react_native_svg","Svg"]}
+{"version":3,"sources":["../../src/shared/types.ts","../../src/native/ArrowLeft.tsx","../../src/native/ArrowUpRight.tsx","../../src/native/IconSlot.tsx","../../src/native/index.ts","../../src/native/Icon.tsx"],"sourcesContent":["export type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Icon size presets\n */\nexport const ICON_SIZES = {\n  xs: 8,\n  sm: 12,\n  md: 16,\n  lg: 20,\n  xl: 24,\n} as const;\n\n/**\n * Icon size token type\n */\nexport type IconSizeToken = keyof typeof ICON_SIZES;\n\n/**\n * Props for React (web) icons\n */\nexport interface ReactIconProps extends React.SVGProps<SVGSVGElement> {\n  size?: IconSize;\n}\n\n/**\n * Props for React Native icons\n */\nexport interface NativeIconProps {\n  size?: IconSize;\n  width?: number;\n  height?: number;\n  color?: string;\n  style?: any;\n}\n\n/**\n * Resolves an icon size to a numeric value\n * @param size - Size value or token\n * @returns Numeric size in pixels\n */\nexport function resolveSize(size: IconSize = 'lg'): number {\n  if (typeof size === 'number') {\n    return size;\n  }\n  \n  return ICON_SIZES[size] ?? ICON_SIZES.lg;\n}\n","import * as React from 'react';\nimport Svg, { Path } from 'react-native-svg';\nimport type { NativeIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowLeft = ({ size = 16, ...props }: NativeIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <Svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z\"\n      fill=\"currentColor\"\n    />\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z\"\n      fill=\"currentColor\"\n    />\n  </Svg>\n  );\n};\n\nexport default SvgArrowLeft;\n","import * as React from 'react';\nimport Svg, { Path } from 'react-native-svg';\nimport type { NativeIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowUpRight = ({ size = 16, ...props }: NativeIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <Svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z\"\n      fill=\"currentColor\"\n    />\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z\"\n      fill=\"currentColor\"\n    />\n  </Svg>\n  );\n};\n\nexport default SvgArrowUpRight;\n","import * as React from 'react';\nimport Svg, { Path } from 'react-native-svg';\nimport type { NativeIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgIconSlot = ({ size = 16, ...props }: NativeIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <Svg width={sizeValue} height={sizeValue} viewBox=\"0 0 15 15\" fill=\"none\" {...props}>\n    <Path\n      d=\"M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z\"\n      fill=\"currentColor\"\n    />\n  </Svg>\n  );\n};\n\nexport default SvgIconSlot;\n","// Auto-generated exports\nexport { default as ArrowLeft } from './ArrowLeft';\nexport { default as ArrowUpRight } from './ArrowUpRight';\nexport { default as IconSlot } from './IconSlot';\n\n// Unified Icon component\nexport { default as Icon } from './Icon';\nexport type { IconName, IconProps } from './Icon';\n\n// Export types\nexport type {\n  IconSize,\n  IconSizeToken,\n  NativeIconProps,\n} from '../shared/types';\n\nexport { ICON_SIZES, resolveSize } from '../shared/types';\n","import * as React from 'react';\nimport type { NativeIconProps } from '../shared/types';\n\n/**\n * Icon imports - using dynamic imports for tree-shaking\n * Auto-generated - do not edit manually\n */\n// Icon: arrow-left\n// Icon: arrow-up-right\n// Icon: icon-slot\n\n/**\n * Available icon names\n */\nexport type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';\n\n/**\n * Props for the unified Icon component (React Native)\n */\nexport interface IconProps extends Omit<NativeIconProps, 'size'> {\n  name: IconName;\n  size?: NativeIconProps['size'];\n  color?: string;\n}\n\n/**\n * Loads an icon component dynamically\n * This pattern allows bundlers to tree-shake unused icons\n * Note: React Native bundlers may handle this differently\n */\nfunction loadIcon(name: IconName): Promise<React.ComponentType<any>> {\n  switch (name) {\n    case 'arrow-left':\n      return import('./ArrowLeft').then(m => m.default);\n    case 'arrow-up-right':\n      return import('./ArrowUpRight').then(m => m.default);\n    case 'icon-slot':\n      return import('./IconSlot').then(m => m.default);\n    default:\n      return Promise.reject(new Error(`Icon \"${name}\" not found`));\n  }\n}\n\n/**\n * Unified Icon component that renders icons by name (React Native)\n * Uses dynamic imports for tree-shaking support\n */\nconst Icon = ({ name, size = 16, color, ...props }: IconProps) => {\n  const [IconComponent, setIconComponent] = React.useState<React.ComponentType<any> | null>(null);\n  const [loading, setLoading] = React.useState(true);\n  const [error, setError] = React.useState<string | null>(null);\n\n  React.useEffect(() => {\n    setLoading(true);\n    setError(null);\n    \n    loadIcon(name)\n      .then((Component) => {\n        setIconComponent(() => Component);\n        setLoading(false);\n      })\n      .catch((err) => {\n        console.warn(err.message);\n        setError(err.message);\n        setLoading(false);\n      });\n  }, [name]);\n\n  if (loading) {\n    return null;\n  }\n\n  if (error || !IconComponent) {\n    return null;\n  }\n\n  return <IconComponent size={size} color={color} {...props} />;\n};\n\nexport default Icon;"],"mappings":"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","names":["Svg","React","import_react_native_svg","Svg","React","import_react_native_svg","Svg","React"]}

package/dist/react/index.d.mts

@@ -34,4 +34,26 @@ declare const SvgArrowUpRight: ({ size, ...props }: ReactIconProps) => React$1.J
 
 declare const SvgIconSlot: ({ size, ...props }: ReactIconProps) => React$1.JSX.Element;
 
-export { SvgArrowLeft as ArrowLeft, SvgArrowUpRight as ArrowUpRight, ICON_SIZES, type IconSize, type IconSizeToken, SvgIconSlot as IconSlot, type ReactIconProps, resolveSize };
+/**
+ * Icon imports - using dynamic imports for tree-shaking
+ * Auto-generated - do not edit manually
+ */
+/**
+ * Available icon names
+ */
+type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';
+/**
+ * Props for the unified Icon component
+ */
+interface IconProps extends Omit<ReactIconProps, 'size'> {
+    name: IconName;
+    size?: ReactIconProps['size'];
+    color?: string;
+}
+/**
+ * Unified Icon component that renders icons by name
+ * Uses dynamic imports for tree-shaking support
+ */
+declare const Icon: ({ name, size, color, ...props }: IconProps) => React$1.JSX.Element | null;
+
+export { SvgArrowLeft as ArrowLeft, SvgArrowUpRight as ArrowUpRight, ICON_SIZES, Icon, type IconName, type IconProps, type IconSize, type IconSizeToken, SvgIconSlot as IconSlot, type ReactIconProps, resolveSize };

package/dist/react/index.d.ts

@@ -34,4 +34,26 @@ declare const SvgArrowUpRight: ({ size, ...props }: ReactIconProps) => React$1.J
 
 declare const SvgIconSlot: ({ size, ...props }: ReactIconProps) => React$1.JSX.Element;
 
-export { SvgArrowLeft as ArrowLeft, SvgArrowUpRight as ArrowUpRight, ICON_SIZES, type IconSize, type IconSizeToken, SvgIconSlot as IconSlot, type ReactIconProps, resolveSize };
+/**
+ * Icon imports - using dynamic imports for tree-shaking
+ * Auto-generated - do not edit manually
+ */
+/**
+ * Available icon names
+ */
+type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';
+/**
+ * Props for the unified Icon component
+ */
+interface IconProps extends Omit<ReactIconProps, 'size'> {
+    name: IconName;
+    size?: ReactIconProps['size'];
+    color?: string;
+}
+/**
+ * Unified Icon component that renders icons by name
+ * Uses dynamic imports for tree-shaking support
+ */
+declare const Icon: ({ name, size, color, ...props }: IconProps) => React$1.JSX.Element | null;
+
+export { SvgArrowLeft as ArrowLeft, SvgArrowUpRight as ArrowUpRight, ICON_SIZES, Icon, type IconName, type IconProps, type IconSize, type IconSizeToken, SvgIconSlot as IconSlot, type ReactIconProps, resolveSize };

package/dist/react/index.js

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,93 +30,178 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/shared/types.ts
+function resolveSize(size = "lg") {
+  if (typeof size === "number") {
+    return size;
+  }
+  return ICON_SIZES[size] ?? ICON_SIZES.lg;
+}
+var ICON_SIZES;
+var init_types = __esm({
+  "src/shared/types.ts"() {
+    "use strict";
+    ICON_SIZES = {
+      xs: 8,
+      sm: 12,
+      md: 16,
+      lg: 20,
+      xl: 24
+    };
+  }
+});
+
+// src/react/ArrowLeft.tsx
+var ArrowLeft_exports = {};
+__export(ArrowLeft_exports, {
+  default: () => ArrowLeft_default
+});
+var React, SvgArrowLeft, ArrowLeft_default;
+var init_ArrowLeft = __esm({
+  "src/react/ArrowLeft.tsx"() {
+    "use strict";
+    React = __toESM(require("react"));
+    init_types();
+    SvgArrowLeft = ({ size = 16, ...props }) => {
+      const sizeValue = resolveSize(size);
+      return /* @__PURE__ */ React.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z",
+          fill: "currentColor"
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z",
+          fill: "currentColor"
+        }
+      ));
+    };
+    ArrowLeft_default = SvgArrowLeft;
+  }
+});
+
+// src/react/ArrowUpRight.tsx
+var ArrowUpRight_exports = {};
+__export(ArrowUpRight_exports, {
+  default: () => ArrowUpRight_default
+});
+var React2, SvgArrowUpRight, ArrowUpRight_default;
+var init_ArrowUpRight = __esm({
+  "src/react/ArrowUpRight.tsx"() {
+    "use strict";
+    React2 = __toESM(require("react"));
+    init_types();
+    SvgArrowUpRight = ({ size = 16, ...props }) => {
+      const sizeValue = resolveSize(size);
+      return /* @__PURE__ */ React2.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React2.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z",
+          fill: "currentColor"
+        }
+      ), /* @__PURE__ */ React2.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z",
+          fill: "currentColor"
+        }
+      ));
+    };
+    ArrowUpRight_default = SvgArrowUpRight;
+  }
+});
+
+// src/react/IconSlot.tsx
+var IconSlot_exports = {};
+__export(IconSlot_exports, {
+  default: () => IconSlot_default
+});
+var React3, SvgIconSlot, IconSlot_default;
+var init_IconSlot = __esm({
+  "src/react/IconSlot.tsx"() {
+    "use strict";
+    React3 = __toESM(require("react"));
+    init_types();
+    SvgIconSlot = ({ size = 16, ...props }) => {
+      const sizeValue = resolveSize(size);
+      return /* @__PURE__ */ React3.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 15 15", fill: "none", ...props }, /* @__PURE__ */ React3.createElement(
+        "path",
+        {
+          d: "M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z",
+          fill: "currentColor"
+        }
+      ));
+    };
+    IconSlot_default = SvgIconSlot;
+  }
+});
+
 // src/react/index.ts
 var react_exports = {};
 __export(react_exports, {
   ArrowLeft: () => ArrowLeft_default,
   ArrowUpRight: () => ArrowUpRight_default,
   ICON_SIZES: () => ICON_SIZES,
+  Icon: () => Icon_default,
   IconSlot: () => IconSlot_default,
   resolveSize: () => resolveSize
 });
 module.exports = __toCommonJS(react_exports);
+init_ArrowLeft();
+init_ArrowUpRight();
+init_IconSlot();
 
-// src/react/ArrowLeft.tsx
-var React = __toESM(require("react"));
-
-// src/shared/types.ts
-var ICON_SIZES = {
-  xs: 8,
-  sm: 12,
-  md: 16,
-  lg: 20,
-  xl: 24
-};
-function resolveSize(size = "lg") {
-  if (typeof size === "number") {
-    return size;
+// src/react/Icon.tsx
+var React4 = __toESM(require("react"));
+function loadIcon(name) {
+  switch (name) {
+    case "arrow-left":
+      return Promise.resolve().then(() => (init_ArrowLeft(), ArrowLeft_exports)).then((m) => m.default);
+    case "arrow-up-right":
+      return Promise.resolve().then(() => (init_ArrowUpRight(), ArrowUpRight_exports)).then((m) => m.default);
+    case "icon-slot":
+      return Promise.resolve().then(() => (init_IconSlot(), IconSlot_exports)).then((m) => m.default);
+    default:
+      return Promise.reject(new Error(`Icon "${name}" not found`));
   }
-  return ICON_SIZES[size] ?? ICON_SIZES.lg;
 }
-
-// src/react/ArrowLeft.tsx
-var SvgArrowLeft = ({ size = 16, ...props }) => {
-  const sizeValue = resolveSize(size);
-  return /* @__PURE__ */ React.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z",
-      fill: "currentColor"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z",
-      fill: "currentColor"
-    }
-  ));
-};
-var ArrowLeft_default = SvgArrowLeft;
-
-// src/react/ArrowUpRight.tsx
-var React2 = __toESM(require("react"));
-var SvgArrowUpRight = ({ size = 16, ...props }) => {
-  const sizeValue = resolveSize(size);
-  return /* @__PURE__ */ React2.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React2.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z",
-      fill: "currentColor"
-    }
-  ), /* @__PURE__ */ React2.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z",
-      fill: "currentColor"
-    }
-  ));
+var Icon = ({ name, size = 16, color, ...props }) => {
+  const [IconComponent, setIconComponent] = React4.useState(null);
+  const [loading, setLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  React4.useEffect(() => {
+    setLoading(true);
+    setError(null);
+    loadIcon(name).then((Component) => {
+      setIconComponent(() => Component);
+      setLoading(false);
+    }).catch((err) => {
+      console.warn(err.message);
+      setError(err.message);
+      setLoading(false);
+    });
+  }, [name]);
+  if (loading) {
+    return null;
+  }
+  if (error || !IconComponent) {
+    return null;
+  }
+  const style = color ? { ...props.style, color } : props.style;
+  return /* @__PURE__ */ React4.createElement(IconComponent, { size, ...props, style });
 };
-var ArrowUpRight_default = SvgArrowUpRight;
+var Icon_default = Icon;
 
-// src/react/IconSlot.tsx
-var React3 = __toESM(require("react"));
-var SvgIconSlot = ({ size = 16, ...props }) => {
-  const sizeValue = resolveSize(size);
-  return /* @__PURE__ */ React3.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 15 15", fill: "none", ...props }, /* @__PURE__ */ React3.createElement(
-    "path",
-    {
-      d: "M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z",
-      fill: "currentColor"
-    }
-  ));
-};
-var IconSlot_default = SvgIconSlot;
+// src/react/index.ts
+init_types();
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/index.ts","../../src/react/ArrowLeft.tsx","../../src/shared/types.ts","../../src/react/ArrowUpRight.tsx","../../src/react/IconSlot.tsx"],"sourcesContent":["// Auto-generated exports\nexport { default as ArrowLeft } from './ArrowLeft';\nexport { default as ArrowUpRight } from './ArrowUpRight';\nexport { default as IconSlot } from './IconSlot';\n\n// Export types\nexport type {\n  IconSize,\n  IconSizeToken,\n  ReactIconProps,\n} from '../shared/types';\n\nexport { ICON_SIZES, resolveSize } from '../shared/types';\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowLeft = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgArrowLeft;\n","export type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Icon size presets\n */\nexport const ICON_SIZES = {\n  xs: 8,\n  sm: 12,\n  md: 16,\n  lg: 20,\n  xl: 24,\n} as const;\n\n/**\n * Icon size token type\n */\nexport type IconSizeToken = keyof typeof ICON_SIZES;\n\n/**\n * Props for React (web) icons\n */\nexport interface ReactIconProps extends React.SVGProps<SVGSVGElement> {\n  size?: IconSize;\n}\n\n/**\n * Props for React Native icons\n */\nexport interface NativeIconProps {\n  size?: IconSize;\n  width?: number;\n  height?: number;\n  color?: string;\n  style?: any;\n}\n\n/**\n * Resolves an icon size to a numeric value\n * @param size - Size value or token\n * @returns Numeric size in pixels\n */\nexport function resolveSize(size: IconSize = 'lg'): number {\n  if (typeof size === 'number') {\n    return size;\n  }\n  \n  return ICON_SIZES[size] ?? ICON_SIZES.lg;\n}\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowUpRight = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgArrowUpRight;\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgIconSlot = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 15 15\" fill=\"none\" {...props}>\n    <path\n      d=\"M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgIconSlot;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACKhB,IAAM,aAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA8BO,SAAS,YAAY,OAAiB,MAAc;AACzD,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,EACT;AAEA,SAAO,WAAW,IAAI,KAAK,WAAW;AACxC;;;AD3CA,IAAM,eAAe,CAAC,EAAE,OAAO,IAAI,GAAG,MAAM,MAAsB;AAChE,QAAM,YAAY,YAAY,IAAI;AAElC,SACE,oCAAC,SAAI,OAAO,WAAW,QAAQ,WAAW,SAAQ,aAAY,MAAK,QAAQ,GAAG,SAC9E;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,CACF;AAEF;AAEA,IAAO,oBAAQ;;;AEzBf,IAAAA,SAAuB;AAIvB,IAAM,kBAAkB,CAAC,EAAE,OAAO,IAAI,GAAG,MAAM,MAAsB;AACnE,QAAM,YAAY,YAAY,IAAI;AAElC,SACE,qCAAC,SAAI,OAAO,WAAW,QAAQ,WAAW,SAAQ,aAAY,MAAK,QAAQ,GAAG,SAC9E;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,CACF;AAEF;AAEA,IAAO,uBAAQ;;;ACzBf,IAAAC,SAAuB;AAIvB,IAAM,cAAc,CAAC,EAAE,OAAO,IAAI,GAAG,MAAM,MAAsB;AAC/D,QAAM,YAAY,YAAY,IAAI;AAElC,SACE,qCAAC,SAAI,OAAO,WAAW,QAAQ,WAAW,SAAQ,aAAY,MAAK,QAAQ,GAAG,SAC9E;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,CACF;AAEF;AAEA,IAAO,mBAAQ;","names":["React","React"]}
+{"version":3,"sources":["../../src/shared/types.ts","../../src/react/ArrowLeft.tsx","../../src/react/ArrowUpRight.tsx","../../src/react/IconSlot.tsx","../../src/react/index.ts","../../src/react/Icon.tsx"],"sourcesContent":["export type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Icon size presets\n */\nexport const ICON_SIZES = {\n  xs: 8,\n  sm: 12,\n  md: 16,\n  lg: 20,\n  xl: 24,\n} as const;\n\n/**\n * Icon size token type\n */\nexport type IconSizeToken = keyof typeof ICON_SIZES;\n\n/**\n * Props for React (web) icons\n */\nexport interface ReactIconProps extends React.SVGProps<SVGSVGElement> {\n  size?: IconSize;\n}\n\n/**\n * Props for React Native icons\n */\nexport interface NativeIconProps {\n  size?: IconSize;\n  width?: number;\n  height?: number;\n  color?: string;\n  style?: any;\n}\n\n/**\n * Resolves an icon size to a numeric value\n * @param size - Size value or token\n * @returns Numeric size in pixels\n */\nexport function resolveSize(size: IconSize = 'lg'): number {\n  if (typeof size === 'number') {\n    return size;\n  }\n  \n  return ICON_SIZES[size] ?? ICON_SIZES.lg;\n}\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowLeft = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgArrowLeft;\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowUpRight = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgArrowUpRight;\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgIconSlot = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 15 15\" fill=\"none\" {...props}>\n    <path\n      d=\"M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgIconSlot;\n","// Auto-generated exports\nexport { default as ArrowLeft } from './ArrowLeft';\nexport { default as ArrowUpRight } from './ArrowUpRight';\nexport { default as IconSlot } from './IconSlot';\n\n// Unified Icon component\nexport { default as Icon } from './Icon';\nexport type { IconName, IconProps } from './Icon';\n\n  // Export types\nexport type {\n  IconSize,\n  IconSizeToken,\n  ReactIconProps,\n} from '../shared/types';\n\nexport { ICON_SIZES, resolveSize } from '../shared/types';\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\n\n/**\n * Icon imports - using dynamic imports for tree-shaking\n * Auto-generated - do not edit manually\n */\n// Icon: arrow-left\n// Icon: arrow-up-right\n// Icon: icon-slot\n\n/**\n * Available icon names\n */\nexport type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';\n\n/**\n * Props for the unified Icon component\n */\nexport interface IconProps extends Omit<ReactIconProps, 'size'> {\n  name: IconName;\n  size?: ReactIconProps['size'];\n  color?: string;\n}\n\n/**\n * Loads an icon component dynamically\n * This pattern allows bundlers to tree-shake unused icons\n * \n * Icons use default exports (export default SvgIconName),\n * so we access .default from the dynamic import result\n */\nfunction loadIcon(name: IconName): Promise<React.ComponentType<any>> {\n  switch (name) {\n    case 'arrow-left':\n      return import('./ArrowLeft').then(m => m.default);\n    case 'arrow-up-right':\n      return import('./ArrowUpRight').then(m => m.default);\n    case 'icon-slot':\n      return import('./IconSlot').then(m => m.default);\n    default:\n      return Promise.reject(new Error(`Icon \"${name}\" not found`));\n  }\n}\n\n/**\n * Unified Icon component that renders icons by name\n * Uses dynamic imports for tree-shaking support\n */\nconst Icon = ({ name, size = 16, color, ...props }: IconProps) => {\n  const [IconComponent, setIconComponent] = React.useState<React.ComponentType<any> | null>(null);\n  const [loading, setLoading] = React.useState(true);\n  const [error, setError] = React.useState<string | null>(null);\n\n  React.useEffect(() => {\n    setLoading(true);\n    setError(null);\n    \n    loadIcon(name)\n      .then((Component) => {\n        setIconComponent(() => Component);\n        setLoading(false);\n      })\n      .catch((err) => {\n        console.warn(err.message);\n        setError(err.message);\n        setLoading(false);\n      });\n  }, [name]);\n\n  if (loading) {\n    return null; // Consider showing a placeholder\n  }\n\n  if (error || !IconComponent) {\n    return null;\n  }\n\n  // Apply color via style prop if provided (SVGs use fill=\"currentColor\")\n  const style = color \n    ? { ...props.style, color } \n    : props.style;\n\n  return <IconComponent size={size} {...props} style={style} />;\n};\n\nexport default Icon;"],"mappings":"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","names":["React","React","React"]}

package/dist/react/index.mjs

@@ -1,85 +1,182 @@
-// src/react/ArrowLeft.tsx
-import * as React from "react";
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 
 // src/shared/types.ts
-var ICON_SIZES = {
-  xs: 8,
-  sm: 12,
-  md: 16,
-  lg: 20,
-  xl: 24
-};
 function resolveSize(size = "lg") {
   if (typeof size === "number") {
     return size;
   }
   return ICON_SIZES[size] ?? ICON_SIZES.lg;
 }
+var ICON_SIZES;
+var init_types = __esm({
+  "src/shared/types.ts"() {
+    "use strict";
+    ICON_SIZES = {
+      xs: 8,
+      sm: 12,
+      md: 16,
+      lg: 20,
+      xl: 24
+    };
+  }
+});
 
 // src/react/ArrowLeft.tsx
-var SvgArrowLeft = ({ size = 16, ...props }) => {
-  const sizeValue = resolveSize(size);
-  return /* @__PURE__ */ React.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z",
-      fill: "currentColor"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z",
-      fill: "currentColor"
-    }
-  ));
-};
-var ArrowLeft_default = SvgArrowLeft;
+var ArrowLeft_exports = {};
+__export(ArrowLeft_exports, {
+  default: () => ArrowLeft_default
+});
+import * as React from "react";
+var SvgArrowLeft, ArrowLeft_default;
+var init_ArrowLeft = __esm({
+  "src/react/ArrowLeft.tsx"() {
+    "use strict";
+    init_types();
+    SvgArrowLeft = ({ size = 16, ...props }) => {
+      const sizeValue = resolveSize(size);
+      return /* @__PURE__ */ React.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z",
+          fill: "currentColor"
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z",
+          fill: "currentColor"
+        }
+      ));
+    };
+    ArrowLeft_default = SvgArrowLeft;
+  }
+});
 
 // src/react/ArrowUpRight.tsx
+var ArrowUpRight_exports = {};
+__export(ArrowUpRight_exports, {
+  default: () => ArrowUpRight_default
+});
 import * as React2 from "react";
-var SvgArrowUpRight = ({ size = 16, ...props }) => {
-  const sizeValue = resolveSize(size);
-  return /* @__PURE__ */ React2.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React2.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z",
-      fill: "currentColor"
-    }
-  ), /* @__PURE__ */ React2.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z",
-      fill: "currentColor"
-    }
-  ));
-};
-var ArrowUpRight_default = SvgArrowUpRight;
+var SvgArrowUpRight, ArrowUpRight_default;
+var init_ArrowUpRight = __esm({
+  "src/react/ArrowUpRight.tsx"() {
+    "use strict";
+    init_types();
+    SvgArrowUpRight = ({ size = 16, ...props }) => {
+      const sizeValue = resolveSize(size);
+      return /* @__PURE__ */ React2.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React2.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z",
+          fill: "currentColor"
+        }
+      ), /* @__PURE__ */ React2.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z",
+          fill: "currentColor"
+        }
+      ));
+    };
+    ArrowUpRight_default = SvgArrowUpRight;
+  }
+});
 
 // src/react/IconSlot.tsx
+var IconSlot_exports = {};
+__export(IconSlot_exports, {
+  default: () => IconSlot_default
+});
 import * as React3 from "react";
-var SvgIconSlot = ({ size = 16, ...props }) => {
-  const sizeValue = resolveSize(size);
-  return /* @__PURE__ */ React3.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 15 15", fill: "none", ...props }, /* @__PURE__ */ React3.createElement(
-    "path",
-    {
-      d: "M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z",
-      fill: "currentColor"
-    }
-  ));
+var SvgIconSlot, IconSlot_default;
+var init_IconSlot = __esm({
+  "src/react/IconSlot.tsx"() {
+    "use strict";
+    init_types();
+    SvgIconSlot = ({ size = 16, ...props }) => {
+      const sizeValue = resolveSize(size);
+      return /* @__PURE__ */ React3.createElement("svg", { width: sizeValue, height: sizeValue, viewBox: "0 0 15 15", fill: "none", ...props }, /* @__PURE__ */ React3.createElement(
+        "path",
+        {
+          d: "M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z",
+          fill: "currentColor"
+        }
+      ));
+    };
+    IconSlot_default = SvgIconSlot;
+  }
+});
+
+// src/react/index.ts
+init_ArrowLeft();
+init_ArrowUpRight();
+init_IconSlot();
+
+// src/react/Icon.tsx
+import * as React4 from "react";
+function loadIcon(name) {
+  switch (name) {
+    case "arrow-left":
+      return Promise.resolve().then(() => (init_ArrowLeft(), ArrowLeft_exports)).then((m) => m.default);
+    case "arrow-up-right":
+      return Promise.resolve().then(() => (init_ArrowUpRight(), ArrowUpRight_exports)).then((m) => m.default);
+    case "icon-slot":
+      return Promise.resolve().then(() => (init_IconSlot(), IconSlot_exports)).then((m) => m.default);
+    default:
+      return Promise.reject(new Error(`Icon "${name}" not found`));
+  }
+}
+var Icon = ({ name, size = 16, color, ...props }) => {
+  const [IconComponent, setIconComponent] = React4.useState(null);
+  const [loading, setLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  React4.useEffect(() => {
+    setLoading(true);
+    setError(null);
+    loadIcon(name).then((Component) => {
+      setIconComponent(() => Component);
+      setLoading(false);
+    }).catch((err) => {
+      console.warn(err.message);
+      setError(err.message);
+      setLoading(false);
+    });
+  }, [name]);
+  if (loading) {
+    return null;
+  }
+  if (error || !IconComponent) {
+    return null;
+  }
+  const style = color ? { ...props.style, color } : props.style;
+  return /* @__PURE__ */ React4.createElement(IconComponent, { size, ...props, style });
 };
-var IconSlot_default = SvgIconSlot;
+var Icon_default = Icon;
+
+// src/react/index.ts
+init_types();
 export {
   ArrowLeft_default as ArrowLeft,
   ArrowUpRight_default as ArrowUpRight,
   ICON_SIZES,
+  Icon_default as Icon,
   IconSlot_default as IconSlot,
   resolveSize
 };

package/dist/react/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/ArrowLeft.tsx","../../src/shared/types.ts","../../src/react/ArrowUpRight.tsx","../../src/react/IconSlot.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowLeft = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgArrowLeft;\n","export type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Icon size presets\n */\nexport const ICON_SIZES = {\n  xs: 8,\n  sm: 12,\n  md: 16,\n  lg: 20,\n  xl: 24,\n} as const;\n\n/**\n * Icon size token type\n */\nexport type IconSizeToken = keyof typeof ICON_SIZES;\n\n/**\n * Props for React (web) icons\n */\nexport interface ReactIconProps extends React.SVGProps<SVGSVGElement> {\n  size?: IconSize;\n}\n\n/**\n * Props for React Native icons\n */\nexport interface NativeIconProps {\n  size?: IconSize;\n  width?: number;\n  height?: number;\n  color?: string;\n  style?: any;\n}\n\n/**\n * Resolves an icon size to a numeric value\n * @param size - Size value or token\n * @returns Numeric size in pixels\n */\nexport function resolveSize(size: IconSize = 'lg'): number {\n  if (typeof size === 'number') {\n    return size;\n  }\n  \n  return ICON_SIZES[size] ?? ICON_SIZES.lg;\n}\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowUpRight = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgArrowUpRight;\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgIconSlot = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 15 15\" fill=\"none\" {...props}>\n    <path\n      d=\"M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgIconSlot;\n"],"mappings":";AAAA,YAAY,WAAW;;;ACKhB,IAAM,aAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA8BO,SAAS,YAAY,OAAiB,MAAc;AACzD,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,EACT;AAEA,SAAO,WAAW,IAAI,KAAK,WAAW;AACxC;;;AD3CA,IAAM,eAAe,CAAC,EAAE,OAAO,IAAI,GAAG,MAAM,MAAsB;AAChE,QAAM,YAAY,YAAY,IAAI;AAElC,SACE,oCAAC,SAAI,OAAO,WAAW,QAAQ,WAAW,SAAQ,aAAY,MAAK,QAAQ,GAAG,SAC9E;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,CACF;AAEF;AAEA,IAAO,oBAAQ;;;AEzBf,YAAYA,YAAW;AAIvB,IAAM,kBAAkB,CAAC,EAAE,OAAO,IAAI,GAAG,MAAM,MAAsB;AACnE,QAAM,YAAY,YAAY,IAAI;AAElC,SACE,qCAAC,SAAI,OAAO,WAAW,QAAQ,WAAW,SAAQ,aAAY,MAAK,QAAQ,GAAG,SAC9E;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,CACF;AAEF;AAEA,IAAO,uBAAQ;;;ACzBf,YAAYC,YAAW;AAIvB,IAAM,cAAc,CAAC,EAAE,OAAO,IAAI,GAAG,MAAM,MAAsB;AAC/D,QAAM,YAAY,YAAY,IAAI;AAElC,SACE,qCAAC,SAAI,OAAO,WAAW,QAAQ,WAAW,SAAQ,aAAY,MAAK,QAAQ,GAAG,SAC9E;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,CACF;AAEF;AAEA,IAAO,mBAAQ;","names":["React","React"]}
+{"version":3,"sources":["../../src/shared/types.ts","../../src/react/ArrowLeft.tsx","../../src/react/ArrowUpRight.tsx","../../src/react/IconSlot.tsx","../../src/react/index.ts","../../src/react/Icon.tsx"],"sourcesContent":["export type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Icon size presets\n */\nexport const ICON_SIZES = {\n  xs: 8,\n  sm: 12,\n  md: 16,\n  lg: 20,\n  xl: 24,\n} as const;\n\n/**\n * Icon size token type\n */\nexport type IconSizeToken = keyof typeof ICON_SIZES;\n\n/**\n * Props for React (web) icons\n */\nexport interface ReactIconProps extends React.SVGProps<SVGSVGElement> {\n  size?: IconSize;\n}\n\n/**\n * Props for React Native icons\n */\nexport interface NativeIconProps {\n  size?: IconSize;\n  width?: number;\n  height?: number;\n  color?: string;\n  style?: any;\n}\n\n/**\n * Resolves an icon size to a numeric value\n * @param size - Size value or token\n * @returns Numeric size in pixels\n */\nexport function resolveSize(size: IconSize = 'lg'): number {\n  if (typeof size === 'number') {\n    return size;\n  }\n  \n  return ICON_SIZES[size] ?? ICON_SIZES.lg;\n}\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowLeft = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgArrowLeft;\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowUpRight = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgArrowUpRight;\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgIconSlot = ({ size = 16, ...props }: ReactIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <svg width={sizeValue} height={sizeValue} viewBox=\"0 0 15 15\" fill=\"none\" {...props}>\n    <path\n      d=\"M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  );\n};\n\nexport default SvgIconSlot;\n","// Auto-generated exports\nexport { default as ArrowLeft } from './ArrowLeft';\nexport { default as ArrowUpRight } from './ArrowUpRight';\nexport { default as IconSlot } from './IconSlot';\n\n// Unified Icon component\nexport { default as Icon } from './Icon';\nexport type { IconName, IconProps } from './Icon';\n\n  // Export types\nexport type {\n  IconSize,\n  IconSizeToken,\n  ReactIconProps,\n} from '../shared/types';\n\nexport { ICON_SIZES, resolveSize } from '../shared/types';\n","import * as React from 'react';\nimport type { ReactIconProps } from '../shared/types';\n\n/**\n * Icon imports - using dynamic imports for tree-shaking\n * Auto-generated - do not edit manually\n */\n// Icon: arrow-left\n// Icon: arrow-up-right\n// Icon: icon-slot\n\n/**\n * Available icon names\n */\nexport type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';\n\n/**\n * Props for the unified Icon component\n */\nexport interface IconProps extends Omit<ReactIconProps, 'size'> {\n  name: IconName;\n  size?: ReactIconProps['size'];\n  color?: string;\n}\n\n/**\n * Loads an icon component dynamically\n * This pattern allows bundlers to tree-shake unused icons\n * \n * Icons use default exports (export default SvgIconName),\n * so we access .default from the dynamic import result\n */\nfunction loadIcon(name: IconName): Promise<React.ComponentType<any>> {\n  switch (name) {\n    case 'arrow-left':\n      return import('./ArrowLeft').then(m => m.default);\n    case 'arrow-up-right':\n      return import('./ArrowUpRight').then(m => m.default);\n    case 'icon-slot':\n      return import('./IconSlot').then(m => m.default);\n    default:\n      return Promise.reject(new Error(`Icon \"${name}\" not found`));\n  }\n}\n\n/**\n * Unified Icon component that renders icons by name\n * Uses dynamic imports for tree-shaking support\n */\nconst Icon = ({ name, size = 16, color, ...props }: IconProps) => {\n  const [IconComponent, setIconComponent] = React.useState<React.ComponentType<any> | null>(null);\n  const [loading, setLoading] = React.useState(true);\n  const [error, setError] = React.useState<string | null>(null);\n\n  React.useEffect(() => {\n    setLoading(true);\n    setError(null);\n    \n    loadIcon(name)\n      .then((Component) => {\n        setIconComponent(() => Component);\n        setLoading(false);\n      })\n      .catch((err) => {\n        console.warn(err.message);\n        setError(err.message);\n        setLoading(false);\n      });\n  }, [name]);\n\n  if (loading) {\n    return null; // Consider showing a placeholder\n  }\n\n  if (error || !IconComponent) {\n    return null;\n  }\n\n  // Apply color via style prop if provided (SVGs use fill=\"currentColor\")\n  const style = color \n    ? { ...props.style, color } \n    : props.style;\n\n  return <IconComponent size={size} {...props} style={style} />;\n};\n\nexport default Icon;"],"mappings":"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","names":["React","React","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huspy-icons",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "Cross-platform icon package for Huspy - React and React Native compatible",
   "author": "Huspy",
   "license": "MIT",

package/src/native/Icon.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import type { NativeIconProps } from '../shared/types';
+
+/**
+ * Icon imports - using dynamic imports for tree-shaking
+ * Auto-generated - do not edit manually
+ */
+// Icon: arrow-left
+// Icon: arrow-up-right
+// Icon: icon-slot
+
+/**
+ * Available icon names
+ */
+export type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';
+
+/**
+ * Props for the unified Icon component (React Native)
+ */
+export interface IconProps extends Omit<NativeIconProps, 'size'> {
+  name: IconName;
+  size?: NativeIconProps['size'];
+  color?: string;
+}
+
+/**
+ * Loads an icon component dynamically
+ * This pattern allows bundlers to tree-shake unused icons
+ * Note: React Native bundlers may handle this differently
+ */
+function loadIcon(name: IconName): Promise<React.ComponentType<any>> {
+  switch (name) {
+    case 'arrow-left':
+      return import('./ArrowLeft').then(m => m.default);
+    case 'arrow-up-right':
+      return import('./ArrowUpRight').then(m => m.default);
+    case 'icon-slot':
+      return import('./IconSlot').then(m => m.default);
+    default:
+      return Promise.reject(new Error(`Icon "${name}" not found`));
+  }
+}
+
+/**
+ * Unified Icon component that renders icons by name (React Native)
+ * Uses dynamic imports for tree-shaking support
+ */
+const Icon = ({ name, size = 16, color, ...props }: IconProps) => {
+  const [IconComponent, setIconComponent] = React.useState<React.ComponentType<any> | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    setLoading(true);
+    setError(null);
+    
+    loadIcon(name)
+      .then((Component) => {
+        setIconComponent(() => Component);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.warn(err.message);
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [name]);
+
+  if (loading) {
+    return null;
+  }
+
+  if (error || !IconComponent) {
+    return null;
+  }
+
+  return <IconComponent size={size} color={color} {...props} />;
+};
+
+export default Icon;

package/src/native/index.ts

@@ -3,6 +3,10 @@ export { default as ArrowLeft } from './ArrowLeft';
 export { default as ArrowUpRight } from './ArrowUpRight';
 export { default as IconSlot } from './IconSlot';
 
+// Unified Icon component
+export { default as Icon } from './Icon';
+export type { IconName, IconProps } from './Icon';
+
 // Export types
 export type {
   IconSize,

package/src/react/Icon.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import type { ReactIconProps } from '../shared/types';
+
+/**
+ * Icon imports - using dynamic imports for tree-shaking
+ * Auto-generated - do not edit manually
+ */
+// Icon: arrow-left
+// Icon: arrow-up-right
+// Icon: icon-slot
+
+/**
+ * Available icon names
+ */
+export type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';
+
+/**
+ * Props for the unified Icon component
+ */
+export interface IconProps extends Omit<ReactIconProps, 'size'> {
+  name: IconName;
+  size?: ReactIconProps['size'];
+  color?: string;
+}
+
+/**
+ * Loads an icon component dynamically
+ * This pattern allows bundlers to tree-shake unused icons
+ * 
+ * Icons use default exports (export default SvgIconName),
+ * so we access .default from the dynamic import result
+ */
+function loadIcon(name: IconName): Promise<React.ComponentType<any>> {
+  switch (name) {
+    case 'arrow-left':
+      return import('./ArrowLeft').then(m => m.default);
+    case 'arrow-up-right':
+      return import('./ArrowUpRight').then(m => m.default);
+    case 'icon-slot':
+      return import('./IconSlot').then(m => m.default);
+    default:
+      return Promise.reject(new Error(`Icon "${name}" not found`));
+  }
+}
+
+/**
+ * Unified Icon component that renders icons by name
+ * Uses dynamic imports for tree-shaking support
+ */
+const Icon = ({ name, size = 16, color, ...props }: IconProps) => {
+  const [IconComponent, setIconComponent] = React.useState<React.ComponentType<any> | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    setLoading(true);
+    setError(null);
+    
+    loadIcon(name)
+      .then((Component) => {
+        setIconComponent(() => Component);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.warn(err.message);
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [name]);
+
+  if (loading) {
+    return null; // Consider showing a placeholder
+  }
+
+  if (error || !IconComponent) {
+    return null;
+  }
+
+  // Apply color via style prop if provided (SVGs use fill="currentColor")
+  const style = color 
+    ? { ...props.style, color } 
+    : props.style;
+
+  return <IconComponent size={size} {...props} style={style} />;
+};
+
+export default Icon;

package/src/react/index.ts

@@ -3,7 +3,11 @@ export { default as ArrowLeft } from './ArrowLeft';
 export { default as ArrowUpRight } from './ArrowUpRight';
 export { default as IconSlot } from './IconSlot';
 
-// Export types
+// Unified Icon component
+export { default as Icon } from './Icon';
+export type { IconName, IconProps } from './Icon';
+
+  // Export types
 export type {
   IconSize,
   IconSizeToken,