huspy-icons 0.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 Huspy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,232 @@
+# huspy-icons
+
+A cross-platform icon package generated from raw SVGs. Ships separate builds for **web (React / Next.js)** and **native (Expo / React Native)** with a consistent API and first-class tree-shaking.
+
+---
+
+## ✨ Features
+
+* **Single source of truth**: raw SVGs → codegen → typed components
+* **Two targets**: `huspy-icons/react` (web) and `huspy-icons/native` (expo)
+* **Tree-shakable** per-icon files for optimal bundle size
+* **Theming ready**: `color="currentColor"` by default; size tokens
+* **A11y** for web (`title`, `aria-hidden`) and native (`accessibilityLabel`)
+* **Scales** to hundreds of icons with auto-generated exports and types
+
+---
+
+## 📦 Install
+
+> Publish this package to your registry (npm/GitHub Packages) and install in each app.
+
+**Next.js (web):**
+
+```bash
+npm install huspy-icons
+```
+
+**Expo (native):**
+
+```bash
+npx expo install react-native-svg
+npm install huspy-icons
+```
+
+> `react` build has no extra peer deps. `native` build peers `react-native-svg`.
+
+---
+
+## 🚀 Quick Start
+
+**Web (React / Next.js)**
+
+```tsx
+import { ArrowLeft } from 'huspy-icons/react';
+
+export default function Example() {
+  return (
+    <div style={{ color: '#111' }}>
+      <ArrowLeft size="md" />
+    </div>
+  );
+}
+```
+
+**Expo (React Native)**
+
+```tsx
+import { ArrowLeft } from 'huspy-icons/native';
+
+export default function Example() {
+  return <ArrowLeft size={20} color="#111" accessibilityLabel="Back" />;
+}
+```
+
+---
+
+## 🗂️ Repo Structure (package)
+
+```
+packages/huspy-icons/
+  icons-src/          # raw .svg files (single source of truth)
+  src/
+    react/            # generated TSX for web
+    native/           # generated TSX for expo
+    shared/           # helper types/utilities (createIcon, resolveSize)
+  scripts/            # codegen utilities (svgr, registry, typedefs)
+  svgo.config.js
+  package.json
+  tsconfig.json
+```
+
+---
+
+## ⚙️ Scripts
+
+```json
+{
+  "scripts": {
+    "svgo": "svgo -f icons-src -o icons-src --config=svgo.config.js",
+    "gen:react": "svgr icons-src -d src/react --ext tsx --typescript --icon",
+    "gen:native": "svgr --native icons-src -d src/native --ext tsx --typescript --icon",
+    "gen": "npm run svgo && npm run gen:react && npm run gen:native",
+    "build": "tsup src/**/index.ts --format esm,cjs --dts --out-dir dist --clean",
+    "prepare": "npm run gen && npm run build"
+  }
+}
+```
+
+* **`svgo`**: normalize SVGs (remove width/height, hardcoded colors).
+* **`gen:*`**: generate typed components for each target using SVGR.
+* **`build`**: bundle per-target outputs with types.
+
+---
+
+## 🔁 Usage Patterns
+
+### Named components (preferred)
+
+```tsx
+import { ArrowLeft, ArrowUpRight } from 'huspy-icons/react';
+<ArrowLeft size="lg" />
+<ArrowUpRight size={20} color="#6b7280" />
+```
+
+* Best **tree-shaking**, great DX, no runtime lookup.
+
+---
+
+## 🎨 Props & Theming
+
+All icons share a consistent API:
+
+* `size`: `number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (defaults to `lg` ≈ 20)
+* `color`: any CSS color (web) or string color (native), defaults to `currentColor`
+* Web a11y: `title?`, `aria-hidden?` (decorative by default)
+* Native a11y: `accessibilityLabel?`
+
+> Because paths default to `currentColor`, icons inherit text color out of the box. Style a parent `color` (web) or pass `color` directly.
+
+---
+
+## ↔️ RTL & Logical Directions
+
+Icons are designed with logical naming. For RTL support:
+
+```tsx
+// web
+<div dir="rtl">
+  <ArrowLeft />
+</div>
+
+// native
+<View style={{ transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }] }}>
+  <ArrowLeft />
+</View>
+```
+
+You can also add a `rtlFlip` prop or generate RTL variants if your design system requires them.
+
+---
+
+## 🧩 Adding Icons
+
+1. Drop raw SVGs into `icons-src/` (use 24×24 viewBox if possible).
+
+2. Run codegen:
+
+```bash
+npm run gen
+```
+
+3. Commit, version, and publish:
+
+```bash
+npm version minor
+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
+
+### Next.js
+
+* If using the **prebuilt** components (recommended), you **don't** need SVGR in the app.
+* Ensure the package exports are ESM/CJS as shipped by `tsup`. If you see "Cannot use import statement outside a module", align your Next.js transpilation or stick to ESM imports.
+
+### Expo
+
+* Ensure `react-native-svg` is installed via `npx expo install react-native-svg`.
+* If tree-shaking seems off in web builds via Expo Router, prefer the `react` entry for web.
+
+---
+
+## 📦 Exports
+
+```json
+{
+  "exports": {
+    "./react": "./dist/react/index.js",
+    "./native": "./dist/native/index.js"
+  }
+}
+```
+
+* Web: `import { ArrowLeft, ArrowUpRight } from 'huspy-icons/react'`
+* Native: `import { ArrowLeft, ArrowUpRight } from 'huspy-icons/native'`
+
+---
+
+## 🔒 Versioning
+
+* **Patch**: path tweaks, metadata fixes
+* **Minor**: new icons, non-breaking props
+* **Major**: removals/renames, breaking prop changes
+
+Use Changesets or Conventional Commits to automate changelog and release tags.
+
+---
+
+## 📄 License
+
+MIT © Huspy
+
+---
+
+## 💡 Notes
+
+* Keep `icons-src/` clean and consistent (same stroke width family, grid).
+* Default to outlines; if you ship `filled` variants, namespace as `HomeIcon` / `HomeFilledIcon` or `HomeIcon` with a `variant="filled"` prop (generated).
+* Consider publishing a Storybook or gallery page in your web app to preview all icons.
+

package/dist/native/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Icon size presets
+ */
+declare const ICON_SIZES: {
+    readonly xs: 8;
+    readonly sm: 12;
+    readonly md: 16;
+    readonly lg: 20;
+    readonly xl: 24;
+};
+/**
+ * Icon size token type
+ */
+type IconSizeToken = keyof typeof ICON_SIZES;
+/**
+ * Props for React Native icons
+ */
+interface NativeIconProps {
+    size?: IconSize;
+    width?: number;
+    height?: number;
+    color?: string;
+    style?: any;
+}
+/**
+ * Resolves an icon size to a numeric value
+ * @param size - Size value or token
+ * @returns Numeric size in pixels
+ */
+declare function resolveSize(size?: IconSize): number;
+
+declare const SvgArrowLeft: ({ size, ...props }: NativeIconProps) => React.JSX.Element;
+
+declare const SvgArrowUpRight: ({ size, ...props }: NativeIconProps) => React.JSX.Element;
+
+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 };

package/dist/native/index.js

@@ -0,0 +1,130 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/native/index.ts
+var native_exports = {};
+__export(native_exports, {
+  ArrowLeft: () => ArrowLeft_default,
+  ArrowUpRight: () => ArrowUpRight_default,
+  ICON_SIZES: () => ICON_SIZES,
+  IconSlot: () => IconSlot_default,
+  resolveSize: () => resolveSize
+});
+module.exports = __toCommonJS(native_exports);
+
+// 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;
+  }
+  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 ArrowUpRight_default = SvgArrowUpRight;
+
+// 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;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ArrowLeft,
+  ArrowUpRight,
+  ICON_SIZES,
+  IconSlot,
+  resolveSize
+});
+//# sourceMappingURL=index.js.map

package/dist/native/index.js.map

@@ -0,0 +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"]}

package/dist/react/index.d.mts

@@ -0,0 +1,37 @@
+import * as React$1 from 'react';
+
+type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Icon size presets
+ */
+declare const ICON_SIZES: {
+    readonly xs: 8;
+    readonly sm: 12;
+    readonly md: 16;
+    readonly lg: 20;
+    readonly xl: 24;
+};
+/**
+ * Icon size token type
+ */
+type IconSizeToken = keyof typeof ICON_SIZES;
+/**
+ * Props for React (web) icons
+ */
+interface ReactIconProps extends React.SVGProps<SVGSVGElement> {
+    size?: IconSize;
+}
+/**
+ * Resolves an icon size to a numeric value
+ * @param size - Size value or token
+ * @returns Numeric size in pixels
+ */
+declare function resolveSize(size?: IconSize): number;
+
+declare const SvgArrowLeft: ({ size, ...props }: ReactIconProps) => React$1.JSX.Element;
+
+declare const SvgArrowUpRight: ({ size, ...props }: ReactIconProps) => React$1.JSX.Element;
+
+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 };

package/dist/react/index.d.ts

@@ -0,0 +1,37 @@
+import * as React$1 from 'react';
+
+type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Icon size presets
+ */
+declare const ICON_SIZES: {
+    readonly xs: 8;
+    readonly sm: 12;
+    readonly md: 16;
+    readonly lg: 20;
+    readonly xl: 24;
+};
+/**
+ * Icon size token type
+ */
+type IconSizeToken = keyof typeof ICON_SIZES;
+/**
+ * Props for React (web) icons
+ */
+interface ReactIconProps extends React.SVGProps<SVGSVGElement> {
+    size?: IconSize;
+}
+/**
+ * Resolves an icon size to a numeric value
+ * @param size - Size value or token
+ * @returns Numeric size in pixels
+ */
+declare function resolveSize(size?: IconSize): number;
+
+declare const SvgArrowLeft: ({ size, ...props }: ReactIconProps) => React$1.JSX.Element;
+
+declare const SvgArrowUpRight: ({ size, ...props }: ReactIconProps) => React$1.JSX.Element;
+
+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 };

package/dist/react/index.js

@@ -0,0 +1,119 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  ArrowLeft: () => ArrowLeft_default,
+  ArrowUpRight: () => ArrowUpRight_default,
+  ICON_SIZES: () => ICON_SIZES,
+  IconSlot: () => IconSlot_default,
+  resolveSize: () => resolveSize
+});
+module.exports = __toCommonJS(react_exports);
+
+// 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;
+  }
+  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 ArrowUpRight_default = SvgArrowUpRight;
+
+// 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;
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +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"]}

package/dist/react/index.mjs

@@ -0,0 +1,86 @@
+// src/react/ArrowLeft.tsx
+import * as React from "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;
+  }
+  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
+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;
+
+// src/react/IconSlot.tsx
+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 IconSlot_default = SvgIconSlot;
+export {
+  ArrowLeft_default as ArrowLeft,
+  ArrowUpRight_default as ArrowUpRight,
+  ICON_SIZES,
+  IconSlot_default as IconSlot,
+  resolveSize
+};
+//# sourceMappingURL=index.mjs.map

package/dist/react/index.mjs.map

@@ -0,0 +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"]}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "huspy-icons",
+  "version": "0.0.1",
+  "description": "Cross-platform icon package for Huspy - React and React Native compatible",
+  "author": "Huspy",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/huspy/huspy-icons.git"
+  },
+  "keywords": [
+    "icons",
+    "react",
+    "react-native",
+    "expo",
+    "svg"
+  ],
+  "main": "./dist/react/index.js",
+  "module": "./dist/react/index.mjs",
+  "types": "./dist/react/index.d.ts",
+  "exports": {
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.mjs",
+      "require": "./dist/react/index.js"
+    },
+    "./native": {
+      "types": "./dist/native/index.d.ts",
+      "require": "./dist/native/index.js",
+      "default": "./dist/native/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "svgo": "svgo -f icons-src -o icons-src --config=svgo.config.js",
+    "gen:react": "svgr icons-src -d src/react --ext tsx --typescript --icon && node scripts/add-size-prop.js --react",
+    "gen:native": "svgr --native icons-src -d src/native --ext tsx --typescript --icon && node scripts/add-size-prop.js --native",
+    "gen:types": "node scripts/generate-types.js",
+    "gen": "npm run svgo && npm run gen:react && npm run gen:native && npm run gen:types",
+    "build": "tsup",
+    "prepare": "npm run svgo && npm run gen:react && npm run gen:native && npm run gen:types && npm run build",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@svgr/cli": "^8.1.0",
+    "@svgr/core": "^8.1.0",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.48",
+    "@types/react-native": "^0.73.0",
+    "esbuild": "^0.19.11",
+    "svgo": "^3.3.2",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.73.0",
+    "react-native-svg": "^15.14.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/native/ArrowLeft.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { NativeIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgArrowLeft = ({ size = 16, ...props }: NativeIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <Svg width={sizeValue} height={sizeValue} viewBox="0 0 24 24" fill="none" {...props}>
+    <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"
+    />
+    <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"
+    />
+  </Svg>
+  );
+};
+
+export default SvgArrowLeft;

package/src/native/ArrowUpRight.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { NativeIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgArrowUpRight = ({ size = 16, ...props }: NativeIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <Svg width={sizeValue} height={sizeValue} viewBox="0 0 24 24" fill="none" {...props}>
+    <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"
+    />
+    <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"
+    />
+  </Svg>
+  );
+};
+
+export default SvgArrowUpRight;

package/src/native/IconSlot.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { NativeIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgIconSlot = ({ size = 16, ...props }: NativeIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <Svg width={sizeValue} height={sizeValue} viewBox="0 0 15 15" fill="none" {...props}>
+    <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"
+    />
+  </Svg>
+  );
+};
+
+export default SvgIconSlot;

package/src/native/index.ts

@@ -0,0 +1,13 @@
+// Auto-generated exports
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowUpRight } from './ArrowUpRight';
+export { default as IconSlot } from './IconSlot';
+
+// Export types
+export type {
+  IconSize,
+  IconSizeToken,
+  NativeIconProps,
+} from '../shared/types';
+
+export { ICON_SIZES, resolveSize } from '../shared/types';

package/src/native/index.tsx

@@ -0,0 +1,3 @@
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowUpRight } from './ArrowUpRight';
+export { default as IconSlot } from './IconSlot';

package/src/react/ArrowLeft.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { ReactIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgArrowLeft = ({ size = 16, ...props }: ReactIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <svg width={sizeValue} height={sizeValue} viewBox="0 0 24 24" fill="none" {...props}>
+    <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"
+    />
+    <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"
+    />
+  </svg>
+  );
+};
+
+export default SvgArrowLeft;

package/src/react/ArrowUpRight.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { ReactIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgArrowUpRight = ({ size = 16, ...props }: ReactIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <svg width={sizeValue} height={sizeValue} viewBox="0 0 24 24" fill="none" {...props}>
+    <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"
+    />
+    <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"
+    />
+  </svg>
+  );
+};
+
+export default SvgArrowUpRight;

package/src/react/IconSlot.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { ReactIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgIconSlot = ({ size = 16, ...props }: ReactIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <svg width={sizeValue} height={sizeValue} viewBox="0 0 15 15" fill="none" {...props}>
+    <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"
+    />
+  </svg>
+  );
+};
+
+export default SvgIconSlot;

package/src/react/index.ts

@@ -0,0 +1,13 @@
+// Auto-generated exports
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowUpRight } from './ArrowUpRight';
+export { default as IconSlot } from './IconSlot';
+
+// Export types
+export type {
+  IconSize,
+  IconSizeToken,
+  ReactIconProps,
+} from '../shared/types';
+
+export { ICON_SIZES, resolveSize } from '../shared/types';

package/src/react/index.tsx

@@ -0,0 +1,3 @@
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowUpRight } from './ArrowUpRight';
+export { default as IconSlot } from './IconSlot';

package/src/shared/types.ts

@@ -0,0 +1,48 @@
+export type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Icon size presets
+ */
+export const ICON_SIZES = {
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 20,
+  xl: 24,
+} as const;
+
+/**
+ * Icon size token type
+ */
+export type IconSizeToken = keyof typeof ICON_SIZES;
+
+/**
+ * Props for React (web) icons
+ */
+export interface ReactIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: IconSize;
+}
+
+/**
+ * Props for React Native icons
+ */
+export interface NativeIconProps {
+  size?: IconSize;
+  width?: number;
+  height?: number;
+  color?: string;
+  style?: any;
+}
+
+/**
+ * Resolves an icon size to a numeric value
+ * @param size - Size value or token
+ * @returns Numeric size in pixels
+ */
+export function resolveSize(size: IconSize = 'lg'): number {
+  if (typeof size === 'number') {
+    return size;
+  }
+  
+  return ICON_SIZES[size] ?? ICON_SIZES.lg;
+}