@vipengele/react-icons 0.0.0 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pedro Gomes
+
+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

@@ -1,6 +1,29 @@
 # @vipengele/react-icons
 
-`0.0.0` is a placeholder. It carries no code, and exists only so that a trusted publisher can
-be enrolled on this name — npm can enrol one only on a name the registry already holds.
+A curated, tree-shakable re-export of `lucide-react` icons, plus the `Icon` wrapper that sizes
+them from `--vpg-icon-*` custom properties.
 
-Install a real release instead: <https://github.com/vipengele/react>
+```tsx
+import { Icon, ChevronDown } from "@vipengele/react-icons";
+
+<Icon icon={ChevronDown} />;
+```
+
+## Tree-shaking
+
+Icons are individually named exports — never a namespace barrel — so a consumer importing one
+glyph pulls in only that glyph, not the rest of the curated set or the full `lucide-react`
+package. Pass the icon component itself to `Icon`, not a name: a name-to-component lookup would
+have to reference the whole curated set, which defeats tree-shaking.
+
+## Sizing
+
+`Icon` without a `size`/`strokeWidth` prop renders at `var(--vpg-icon-size-md)` /
+`var(--vpg-icon-stroke-md)`, with a fallback value baked into this package's own stylesheet
+for standalone use before `@vipengele/react-tokens` defines those custom properties. An explicit `size`
+or `strokeWidth` prop is forwarded straight to the glyph instead, which sets it as an SVG
+attribute — CSS custom properties can't set SVG size/stroke-width attributes directly.
+
+## Peer dependencies
+
+React 19 and React DOM 19 — `Icon` is a React component.

package/dist/Icon.d.ts

@@ -0,0 +1,18 @@
+import type { IconComponent } from "./types.js";
+export interface IconProps {
+    /** The glyph to render. Consumers pass the component itself — `<Icon icon={ChevronDown} />` —
+     * never a name, so a bundler only ever sees the icons actually referenced. */
+    icon: IconComponent;
+    size?: number | string;
+    strokeWidth?: number;
+    className?: string;
+}
+/**
+ * Renders a curated icon at a consistent default size/stroke, driven by
+ * `--vpg-icon-size-md`/`--vpg-icon-stroke-md`. An explicit `size` or `strokeWidth` prop
+ * is forwarded straight to the glyph, which sets it as an SVG attribute lucide's own way — the
+ * matching default class is withheld in that case, since a CSS rule (even from a class) beats
+ * an SVG presentation attribute on specificity and would otherwise silently win over the prop.
+ */
+export declare function Icon({ icon: Glyph, size, strokeWidth, className }: IconProps): import("react").JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,SAAS;IACxB;kFAC8E;IAC9E,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,SAAS,+BAuB5E"}

package/dist/icon-stylesheet.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Default sizing/stroke for `<Icon>` when a caller doesn't pass `size`/`strokeWidth`, injected
+ * as an inline `<style>` rather than a `.css` import so the package can stay
+ * `"sideEffects": false` (same approach as `@vipengele/react-tokens`'s base stylesheet).
+ *
+ * `@vipengele/react-tokens` doesn't yet define `--vpg-icon-size-md`/`--vpg-icon-stroke-md` — the
+ * fallback values below keep this class useful standalone until a later slice adds them.
+ */
+export declare const iconStylesheet = "\n.vpg-icon-size-default {\n  width: var(--vpg-icon-size-md, 1.25rem);\n  height: var(--vpg-icon-size-md, 1.25rem);\n}\n\n.vpg-icon-stroke-default {\n  stroke-width: var(--vpg-icon-stroke-md, 2);\n}\n";
+//# sourceMappingURL=icon-stylesheet.d.ts.map

package/dist/icon-stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-stylesheet.d.ts","sourceRoot":"","sources":["../src/icon-stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,6MAS1B,CAAC"}

package/dist/icons.d.ts

@@ -0,0 +1,17 @@
+import type { IconComponent } from "./types.js";
+export declare const ChevronDown: IconComponent;
+export declare const ChevronUp: IconComponent;
+export declare const ChevronLeft: IconComponent;
+export declare const ChevronRight: IconComponent;
+export declare const Check: IconComponent;
+export declare const X: IconComponent;
+export declare const ArrowRight: IconComponent;
+export declare const ArrowLeft: IconComponent;
+export declare const Search: IconComponent;
+export declare const Plus: IconComponent;
+export declare const Minus: IconComponent;
+export declare const AlertCircle: IconComponent;
+export declare const Info: IconComponent;
+export declare const Loader2: IconComponent;
+export declare const User: IconComponent;
+//# sourceMappingURL=icons.d.ts.map

package/dist/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAKhD,eAAO,MAAM,WAAW,EAAE,aAAiC,CAAC;AAC5D,eAAO,MAAM,SAAS,EAAE,aAA+B,CAAC;AACxD,eAAO,MAAM,WAAW,EAAE,aAAiC,CAAC;AAC5D,eAAO,MAAM,YAAY,EAAE,aAAkC,CAAC;AAC9D,eAAO,MAAM,KAAK,EAAE,aAA2B,CAAC;AAChD,eAAO,MAAM,CAAC,EAAE,aAAuB,CAAC;AACxC,eAAO,MAAM,UAAU,EAAE,aAAgC,CAAC;AAC1D,eAAO,MAAM,SAAS,EAAE,aAA+B,CAAC;AACxD,eAAO,MAAM,MAAM,EAAE,aAA4B,CAAC;AAClD,eAAO,MAAM,IAAI,EAAE,aAA0B,CAAC;AAC9C,eAAO,MAAM,KAAK,EAAE,aAA2B,CAAC;AAChD,eAAO,MAAM,WAAW,EAAE,aAAiC,CAAC;AAC5D,eAAO,MAAM,IAAI,EAAE,aAA0B,CAAC;AAC9C,eAAO,MAAM,OAAO,EAAE,aAA6B,CAAC;AACpD,eAAO,MAAM,IAAI,EAAE,aAA0B,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Icon, type IconProps } from "./Icon.js";
+export { AlertCircle, ArrowLeft, ArrowRight, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Info, Loader2, Minus, Plus, Search, User, X, } from "./icons.js";
+export type { IconComponent, IconComponentProps } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EACL,WAAW,EACX,SAAS,EACT,UAAU,EACV,KAAK,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,CAAC,GACF,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,44 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { AlertCircle as AlertCircle$1, ArrowLeft as ArrowLeft$1, ArrowRight as ArrowRight$1, Check as Check$1, ChevronDown as ChevronDown$1, ChevronLeft as ChevronLeft$1, ChevronRight as ChevronRight$1, ChevronUp as ChevronUp$1, Info as Info$1, Loader2 as Loader2$1, Minus as Minus$1, Plus as Plus$1, Search as Search$1, User as User$1, X as X$1 } from 'lucide-react';
+
+// src/icon-stylesheet.ts
+var iconStylesheet = `
+.vpg-icon-size-default {
+  width: var(--vpg-icon-size-md, 1.25rem);
+  height: var(--vpg-icon-size-md, 1.25rem);
+}
+
+.vpg-icon-stroke-default {
+  stroke-width: var(--vpg-icon-stroke-md, 2);
+}
+`;
+function Icon({ icon: Glyph, size, strokeWidth, className }) {
+  const classes = [
+    size === void 0 ? "vpg-icon-size-default" : void 0,
+    strokeWidth === void 0 ? "vpg-icon-stroke-default" : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-icon-base", precedence: "vpg-icon-base", children: iconStylesheet }),
+    /* @__PURE__ */ jsx(Glyph, { size, strokeWidth, className: classes.length > 0 ? classes : void 0 })
+  ] });
+}
+var ChevronDown = ChevronDown$1;
+var ChevronUp = ChevronUp$1;
+var ChevronLeft = ChevronLeft$1;
+var ChevronRight = ChevronRight$1;
+var Check = Check$1;
+var X = X$1;
+var ArrowRight = ArrowRight$1;
+var ArrowLeft = ArrowLeft$1;
+var Search = Search$1;
+var Plus = Plus$1;
+var Minus = Minus$1;
+var AlertCircle = AlertCircle$1;
+var Info = Info$1;
+var Loader2 = Loader2$1;
+var User = User$1;
+
+export { AlertCircle, ArrowLeft, ArrowRight, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Icon, Info, Loader2, Minus, Plus, Search, User, X };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon-stylesheet.ts","../src/Icon.tsx","../src/icons.ts"],"names":["LucideChevronDown","LucideChevronUp","LucideChevronLeft","LucideChevronRight","LucideCheck","LucideX","LucideArrowRight","LucideArrowLeft","LucideSearch","LucidePlus","LucideMinus","LucideAlertCircle","LucideInfo","LucideLoader2","LucideUser"],"mappings":";;;;AAQO,IAAM,cAAA,GAAiB;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA,CAAA;ACWvB,SAAS,KAAK,EAAE,IAAA,EAAM,OAAO,IAAA,EAAM,WAAA,EAAa,WAAU,EAAc;AAC7E,EAAA,MAAM,OAAA,GAAU;AAAA,IACd,IAAA,KAAS,SAAY,uBAAA,GAA0B,MAAA;AAAA,IAC/C,WAAA,KAAgB,SAAY,yBAAA,GAA4B,MAAA;AAAA,IACxD;AAAA,GACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EAOE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAM,IAAA,EAAK,eAAA,EAAgB,UAAA,EAAW,iBACpC,QAAA,EAAA,cAAA,EACH,CAAA;AAAA,oBACA,GAAA,CAAC,SAAM,IAAA,EAAY,WAAA,EAA0B,WAAW,OAAA,CAAQ,MAAA,GAAS,CAAA,GAAI,OAAA,GAAU,MAAA,EAAW;AAAA,GAAA,EACpG,CAAA;AAEJ;ACpBO,IAAM,WAAA,GAA6BA;AACnC,IAAM,SAAA,GAA2BC;AACjC,IAAM,WAAA,GAA6BC;AACnC,IAAM,YAAA,GAA8BC;AACpC,IAAM,KAAA,GAAuBC;AAC7B,IAAM,CAAA,GAAmBC;AACzB,IAAM,UAAA,GAA4BC;AAClC,IAAM,SAAA,GAA2BC;AACjC,IAAM,MAAA,GAAwBC;AAC9B,IAAM,IAAA,GAAsBC;AAC5B,IAAM,KAAA,GAAuBC;AAC7B,IAAM,WAAA,GAA6BC;AACnC,IAAM,IAAA,GAAsBC;AAC5B,IAAM,OAAA,GAAyBC;AAC/B,IAAM,IAAA,GAAsBC","file":"index.js","sourcesContent":["/**\n * Default sizing/stroke for `<Icon>` when a caller doesn't pass `size`/`strokeWidth`, injected\n * as an inline `<style>` rather than a `.css` import so the package can stay\n * `\"sideEffects\": false` (same approach as `@vipengele/react-tokens`'s base stylesheet).\n *\n * `@vipengele/react-tokens` doesn't yet define `--vpg-icon-size-md`/`--vpg-icon-stroke-md` — the\n * fallback values below keep this class useful standalone until a later slice adds them.\n */\nexport const iconStylesheet = `\n.vpg-icon-size-default {\n  width: var(--vpg-icon-size-md, 1.25rem);\n  height: var(--vpg-icon-size-md, 1.25rem);\n}\n\n.vpg-icon-stroke-default {\n  stroke-width: var(--vpg-icon-stroke-md, 2);\n}\n`;\n","import { iconStylesheet } from \"./icon-stylesheet.js\";\nimport type { IconComponent } from \"./types.js\";\n\nexport interface IconProps {\n  /** The glyph to render. Consumers pass the component itself — `<Icon icon={ChevronDown} />` —\n   * never a name, so a bundler only ever sees the icons actually referenced. */\n  icon: IconComponent;\n  size?: number | string;\n  strokeWidth?: number;\n  className?: string;\n}\n\n/**\n * Renders a curated icon at a consistent default size/stroke, driven by\n * `--vpg-icon-size-md`/`--vpg-icon-stroke-md`. An explicit `size` or `strokeWidth` prop\n * is forwarded straight to the glyph, which sets it as an SVG attribute lucide's own way — the\n * matching default class is withheld in that case, since a CSS rule (even from a class) beats\n * an SVG presentation attribute on specificity and would otherwise silently win over the prop.\n */\nexport function Icon({ icon: Glyph, size, strokeWidth, className }: IconProps) {\n  const classes = [\n    size === undefined ? \"vpg-icon-size-default\" : undefined,\n    strokeWidth === undefined ? \"vpg-icon-stroke-default\" : undefined,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <>\n      {/*\n        React 19 hoists and de-duplicates this by `href`, so N icons on a page inject one\n        stylesheet. Injecting the CSS as a string rather than importing a `.css` file keeps the\n        package free of the import side effect that `\"sideEffects\": false` would otherwise have\n        to carve an exception for.\n      */}\n      <style href=\"vpg-icon-base\" precedence=\"vpg-icon-base\">\n        {iconStylesheet}\n      </style>\n      <Glyph size={size} strokeWidth={strokeWidth} className={classes.length > 0 ? classes : undefined} />\n    </>\n  );\n}\n","import {\n  AlertCircle as LucideAlertCircle,\n  ArrowLeft as LucideArrowLeft,\n  ArrowRight as LucideArrowRight,\n  Check as LucideCheck,\n  ChevronDown as LucideChevronDown,\n  ChevronLeft as LucideChevronLeft,\n  ChevronRight as LucideChevronRight,\n  ChevronUp as LucideChevronUp,\n  Info as LucideInfo,\n  Loader2 as LucideLoader2,\n  Minus as LucideMinus,\n  Plus as LucidePlus,\n  Search as LucideSearch,\n  User as LucideUser,\n  X as LucideX,\n} from \"lucide-react\";\nimport type { IconComponent } from \"./types.js\";\n\n// Each icon is imported and re-exported individually — no `export * from \"lucide-react\"` — so a\n// consumer's bundler only pulls in the glyphs actually referenced, never the full lucide set.\n\nexport const ChevronDown: IconComponent = LucideChevronDown;\nexport const ChevronUp: IconComponent = LucideChevronUp;\nexport const ChevronLeft: IconComponent = LucideChevronLeft;\nexport const ChevronRight: IconComponent = LucideChevronRight;\nexport const Check: IconComponent = LucideCheck;\nexport const X: IconComponent = LucideX;\nexport const ArrowRight: IconComponent = LucideArrowRight;\nexport const ArrowLeft: IconComponent = LucideArrowLeft;\nexport const Search: IconComponent = LucideSearch;\nexport const Plus: IconComponent = LucidePlus;\nexport const Minus: IconComponent = LucideMinus;\nexport const AlertCircle: IconComponent = LucideAlertCircle;\nexport const Info: IconComponent = LucideInfo;\nexport const Loader2: IconComponent = LucideLoader2;\nexport const User: IconComponent = LucideUser;\n"]}

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType } from "react";
+/**
+ * The subset of `lucide-react`'s own icon component props this package commits to. `@vipengele/react-ui`
+ * types its icon-accepting props against this shape rather than lucide's full `LucideProps`, so
+ * swapping the icon source later doesn't ripple into every consumer's prop types.
+ */
+export interface IconComponentProps {
+    size?: number | string;
+    className?: string;
+    strokeWidth?: number;
+}
+/** A component matching {@link IconComponentProps} — what every re-exported icon is typed as. */
+export type IconComponent = ComponentType<IconComponentProps>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iGAAiG;AACjG,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC"}

package/package.json

@@ -1,9 +1,49 @@
 {
   "name": "@vipengele/react-icons",
-  "version": "0.0.0",
-  "description": "Placeholder reserving the @vipengele/react-icons name. Install a released version.",
+  "version": "0.1.0",
+  "description": "vipengele icon set — a curated, tree-shakable re-export of lucide-react icons plus the Icon wrapper that sizes them from --vpg-icon-* custom properties",
   "license": "MIT",
-  "repository": { "type": "git", "url": "git+https://github.com/vipengele/react.git" },
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vipengele/react.git",
+    "directory": "source/react-ui/packages/icons"
+  },
   "homepage": "https://vipengele.github.io/react/react-ui/",
-  "publishConfig": { "access": "public" }
-}
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "lucide-react": "^1.41.0"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^8.2.2"
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig.build.json",
+    "type-check": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --coverage && node bundle-check/run.mjs"
+  }
+}