@timmbr/icons 1.0.0-beta

package/README.md

@@ -0,0 +1,32 @@
+# @timmbr/icons
+
+Icon abstraction system wrapping `lucide-react` icons and custom SVG icons under a unified, performant API for the Timmbr Design System.
+
+## Installation
+
+```bash
+pnpm add @timmbr/icons --filter @timmbr/ui
+```
+
+## Features
+
+- **Standardized API**: Every icon supports `size`, `customSize`, `className`, and SVG attributes.
+- **Lucide Integration**: Seamlessly wrap any icon from `lucide-react`.
+- **Custom SVGs**: First-class support for custom branded SVGs (`LogoIcon`, `SpinnerIcon`, etc.).
+
+## Usage
+
+```tsx
+import { Icon, ChevronDown, LogoIcon, SpinnerIcon } from '@timmbr/icons';
+
+// Using a Lucide Icon
+export function Example() {
+  return (
+    <div className="flex items-center gap-4">
+      <Icon icon={ChevronDown} size={20} className="text-brand-500" />
+      <Icon icon={LogoIcon} size={32} />
+      <Icon icon={SpinnerIcon} size={24} />
+    </div>
+  );
+}
+```

package/dist/Icon.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { IconProps } from './Icon.types';
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+//# 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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,IAAI,iFAYhB,CAAC"}

package/dist/Icon.types.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { LucideProps } from 'lucide-react';
+export interface IconProps extends Omit<LucideProps, 'ref'> {
+    icon: React.ElementType;
+    customSize?: boolean;
+}
+//# sourceMappingURL=Icon.types.d.ts.map

package/dist/Icon.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.types.d.ts","sourceRoot":"","sources":["../src/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC;IACzD,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/custom/LogoIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const LogoIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+//# sourceMappingURL=LogoIcon.d.ts.map

package/dist/custom/LogoIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoIcon.d.ts","sourceRoot":"","sources":["../../src/custom/LogoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAgB5D,CAAC"}

package/dist/custom/SpinnerIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface SpinnerIconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number | string;
+}
+export declare const SpinnerIcon: React.FC<SpinnerIconProps>;
+//# sourceMappingURL=SpinnerIcon.d.ts.map

package/dist/custom/SpinnerIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerIcon.d.ts","sourceRoot":"","sources":["../../src/custom/SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IACrE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsClD,CAAC"}

package/dist/custom/index.d.ts

@@ -0,0 +1,3 @@
+export * from './LogoIcon';
+export * from './SpinnerIcon';
+//# sourceMappingURL=index.d.ts.map

package/dist/custom/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/custom/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Icon';
+export * from './Icon.types';
+export * from './custom';
+export { ChevronDown, ChevronUp, ChevronRight, ChevronLeft, Check, CheckCircle, X, AlertCircle, AlertTriangle, Info, Loader2, Sparkles, ArrowRight, ArrowLeft, Download, Heart, Search, Bell, Share2, Eye, EyeOff, TrendingUp, TrendingDown, MoreHorizontal, MoreVertical, } from 'lucide-react';
+//# 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,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAGzB,OAAO,EACL,WAAW,EACX,SAAS,EACT,YAAY,EACZ,WAAW,EACX,KAAK,EACL,WAAW,EACX,CAAC,EACD,WAAW,EACX,aAAa,EACb,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,SAAS,EACT,QAAQ,EACR,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,EACH,MAAM,EACN,UAAU,EACV,YAAY,EACZ,cAAc,EACd,YAAY,GACb,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,113 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as l } from "@timmbr/utils";
+import { AlertCircle as v, AlertTriangle as C, ArrowLeft as x, ArrowRight as u, Bell as y, Check as L, CheckCircle as I, ChevronDown as H, ChevronLeft as M, ChevronRight as A, ChevronUp as N, Download as W, Eye as D, EyeOff as R, Heart as S, Info as j, Loader2 as B, MoreHorizontal as T, MoreVertical as E, Search as O, Share2 as U, Sparkles as V, TrendingDown as X, TrendingUp as b, X as q } from "lucide-react";
+const h = s.forwardRef(
+  ({ icon: r, className: t, size: e = 24, customSize: n = !1, ...i }, a) => /* @__PURE__ */ o(
+    r,
+    {
+      ref: a,
+      width: n ? void 0 : e,
+      height: n ? void 0 : e,
+      className: l("shrink-0 text-current transition-transform", t),
+      ...i
+    }
+  )
+);
+h.displayName = "Icon";
+const d = (r) => /* @__PURE__ */ c(
+  "svg",
+  {
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...r,
+    children: [
+      /* @__PURE__ */ o("rect", { width: "32", height: "32", rx: "8", fill: "currentColor", fillOpacity: "0.1" }),
+      /* @__PURE__ */ o(
+        "path",
+        {
+          d: "M8 10H24M16 10V24M11 24H21",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+d.displayName = "LogoIcon";
+const p = ({
+  size: r,
+  width: t,
+  height: e,
+  className: n,
+  ...i
+}) => /* @__PURE__ */ c(
+  "svg",
+  {
+    width: t ?? r ?? 24,
+    height: e ?? r ?? 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: l("animate-spin", n),
+    ...i,
+    children: [
+      /* @__PURE__ */ o(
+        "circle",
+        {
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeDasharray: "31.415, 31.415",
+          strokeLinecap: "round",
+          opacity: "0.25"
+        }
+      ),
+      /* @__PURE__ */ o(
+        "path",
+        {
+          d: "M12 2A10 10 0 0 1 22 12",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+);
+p.displayName = "SpinnerIcon";
+export {
+  v as AlertCircle,
+  C as AlertTriangle,
+  x as ArrowLeft,
+  u as ArrowRight,
+  y as Bell,
+  L as Check,
+  I as CheckCircle,
+  H as ChevronDown,
+  M as ChevronLeft,
+  A as ChevronRight,
+  N as ChevronUp,
+  W as Download,
+  D as Eye,
+  R as EyeOff,
+  S as Heart,
+  h as Icon,
+  j as Info,
+  B as Loader2,
+  d as LogoIcon,
+  T as MoreHorizontal,
+  E as MoreVertical,
+  O as Search,
+  U as Share2,
+  V as Sparkles,
+  p as SpinnerIcon,
+  X as TrendingDown,
+  b as TrendingUp,
+  q as X
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@timmbr/icons",
+  "version": "1.0.0-beta",
+  "description": "Unified icon system wrapping Lucide and custom SVGs for Timmbr Design System",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lucide-react": "^1.16.0",
+    "@timmbr/utils": "1.0.0-beta"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.2.0",
+    "@timmbr/tsconfig": "1.0.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "clean": "rimraf dist"
+  }
+}