twico-ui 1.0.2 → 1.2.0

package/llms.txt

@@ -1,6 +1,6 @@
 # Twico UI — LLM usage guide (llms.txt)
 
-Twico UI is a free, MIT-licensed **React component library**: 61 components and 23 standalone
+Twico UI is a free, MIT-licensed **React component library**: 62 components and 23 standalone
 hooks (plus the `useToast` hook), with dark mode, motion, accessibility, RTL, a density scale, and
 design tokens. **Zero runtime dependencies** (peer: `react`/`react-dom` >= 18).
 
@@ -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>
 ```
 
@@ -194,7 +202,7 @@ in the examples.
 
 ---
 
-## Component reference (61 components)
+## Component reference (62 components)
 
 ### Buttons & actions
 
@@ -266,6 +274,40 @@ const TrashIcon = () => (<svg width="18" height="18" viewBox="0 0 24 24" fill="n
 
 ### Layout
 
+#### AppShell
+
+Full-height application shell: a fixed sidebar beside a scrollable content area with an optional fixed topbar. The content fills the remaining width and scrolls independently, so the sidebar and header stay put.
+
+`import { AppShell } from "twico-ui"`
+
+Props:
+- `sidebar` — `React.ReactNode` — The sidebar element (e.g. a Sidebar), rendered full-height on the inline-start side of the shell.
+- `header` — `React.ReactNode` — Topbar content in a fixed header above the content; a flex row with space-between, so pass a left and a right group.
+- `children` — `React.ReactNode` — Main content; fills the remaining space and scrolls independently of the fixed sidebar and header.
+- `height` — `string | number` · default `"100dvh"` — Overall shell height; pass a fixed value to embed the shell inside a smaller region (e.g. a demo).
+- `padded` — `boolean` · default `true` — Pads the scrollable content region with the standard page padding; set false for edge-to-edge content.
+
+```jsx
+import { AppShell, Sidebar, Button } from "twico-ui";
+
+<AppShell
+  sidebar={
+    <Sidebar
+      brand={<b>Acme</b>}
+      items={[{ label: "Home", active: true }, { label: "Settings" }]}
+    />
+  }
+  header={
+    <>
+      <b>Dashboard</b>
+      <Button size="sm">New</Button>
+    </>
+  }
+>
+  <h1>Welcome back</h1>
+</AppShell>
+```
+
 #### Box
 
 Generic, token-styled box — the building block for non-flex layout (padding, margin, background, border, radius, shadow) without writing CSS.
@@ -2416,5 +2458,5 @@ export function useId(prefix?: string): string;
 
 ---
 
-_Generated by `scripts/gen-llms.mjs` from twico-ui v1.0.2. 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.0.2",
+  "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",