twico-ui 1.1.0 → 1.2.0

package/README.md

@@ -164,10 +164,22 @@ const brand = indigo[500]; // "#6366f1"
 
 Each hue is an object keyed by shade — a full `50`–`950` ramp (`50, 100, 200, … 900, 950`). These are static values — unlike the `--color-*` aliases, they do not flip in dark mode.
 
+### Icons
+
+Components take icons as React nodes (`leftIcon`, `icon`, …) — bring any icon set, or inline SVG. For convenience, **`twico-ui/icons`** re-exports the full [Lucide](https://lucide.dev) set (the icon language Twico UI is designed around):
+
+```jsx
+import { Home, Search } from "twico-ui/icons";
+
+<Button leftIcon={<Home size={16} />}>Home</Button>
+```
+
+This subpath needs the **optional peer** `lucide-react` (`npm install lucide-react`) and is tree-shakeable; the core `twico-ui` package stays zero-dependency.
+
 ## Components
 
 **Buttons & actions:** Button, IconButton
-**Layout:** Box, Stack, Grid, Container
+**Layout:** AppShell, Box, Stack, Grid, Container, Divider
 **Typography:** Heading, Text, Code
 **Inputs:** Input, Textarea, Currency, CurrencyField, Select, MultiSelect, Combobox, Checkbox, Radio, Switch, Slider, Rating, FileUpload, DatePicker, DateRangePicker, ColorPicker
 **Data display:** Card, Avatar, AvatarMenu, Badge, Tag, Stat, List, Timeline, Chart, Table, Pagination, Datatable, Kanban

package/dist/icons.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var lucideReact = require('lucide-react');
+
+
+
+Object.keys(lucideReact).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return lucideReact[k]; }
+	});
+});
+//# sourceMappingURL=icons.cjs.map
+//# sourceMappingURL=icons.cjs.map

package/dist/icons.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"icons.cjs","sourcesContent":[]}

package/dist/icons.d.cts

@@ -0,0 +1 @@
+export * from 'lucide-react';

package/dist/icons.d.ts

@@ -0,0 +1 @@
+export * from 'lucide-react';

package/dist/icons.mjs

@@ -0,0 +1,3 @@
+export * from 'lucide-react';
+//# sourceMappingURL=icons.mjs.map
+//# sourceMappingURL=icons.mjs.map

package/dist/icons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"icons.mjs","sourcesContent":[]}

package/llms.txt

@@ -161,11 +161,19 @@ function Page() {
 
 ## Icons
 
-The library **ships no icon set** — pass your own icons as React nodes (inline SVG recommended) to
-props such as `leftIcon`, `rightIcon`, `icon`, `header`. Icons inherit `currentColor` and the
-control's size:
+Components take icons as **React nodes** via props like `leftIcon`, `rightIcon`, `icon`, `header` —
+bring any icon (inline SVG, or any icon library). Icons inherit `currentColor` and the control's size.
+
+For convenience, **`twico-ui/icons` re-exports the full [Lucide](https://lucide.dev) icon set** (the
+visual language Twico UI is built on). It needs the **optional peer** `lucide-react`
+(`npm install lucide-react`) and is tree-shakeable — the core `twico-ui` package itself stays
+zero-dependency. The icons are plain SVG components (no hooks), so they work in Server Components too.
 
 ```jsx
+import { Home, Search } from "twico-ui/icons"; // needs the optional `lucide-react` peer
+<Button leftIcon={<Home size={16} />}>Home</Button>
+
+// …or pass your own inline SVG (no peer needed):
 <Button leftIcon={<svg width="16" height="16" viewBox="0 0 24 24" /* … */ />}>Add item</Button>
 ```
 
@@ -2450,5 +2458,5 @@ export function useId(prefix?: string): string;
 
 ---
 
-_Generated by `scripts/gen-llms.mjs` from twico-ui v1.1.0. Do not edit by hand — run `npm run gen:llms`. Source of truth: the component `.d.ts` files and `hooks/index.d.ts`._
+_Generated by `scripts/gen-llms.mjs` from twico-ui v1.2.0. Do not edit by hand — run `npm run gen:llms`. Source of truth: the component `.d.ts` files and `hooks/index.d.ts`._
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twico-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Twico UI — a free, modern, themeable React + Tailwind-friendly component library. 61 components with dark mode, motion, and accessibility built in.",
   "license": "MIT",
   "author": "Twico UI",
@@ -53,6 +53,16 @@
         "default": "./dist/colors.cjs"
       }
     },
+    "./icons": {
+      "import": {
+        "types": "./dist/icons.d.ts",
+        "default": "./dist/icons.mjs"
+      },
+      "require": {
+        "types": "./dist/icons.d.cts",
+        "default": "./dist/icons.cjs"
+      }
+    },
     "./styles.css": "./styles/twico-ui.css",
     "./package.json": "./package.json"
   },
@@ -80,7 +90,13 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "lucide-react": ">=0.300.0"
+  },
+  "peerDependenciesMeta": {
+    "lucide-react": {
+      "optional": true
+    }
   },
   "overrides": {
     "esbuild": "^0.28.1"
@@ -96,6 +112,7 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
+    "lucide-react": "^1.21.0",
     "semantic-release": "^25.0.5",
     "size-limit": "^12.1.0",
     "tsup": "^8.3.5",