sander-ui 0.1.0 → 0.1.1

package/README.md

@@ -1,14 +1,40 @@
 # 🧩 sander-ui
 
-A modern React component library built with TypeScript and CSS Modules. Designed for consistency, accessibility, and simplicity.
+A modern React component library built with TypeScript and CSS Modules.
 
-## ✨ Features
+**[📖 Live Storybook Docs](https://n8n-sander-ui.igjw7r.easypanel.host)**
 
-- 🧱 **24 production-ready components** — from buttons and inputs to modals, drawers, and toasts
-- 🔷 **TypeScript first** — fully typed props with JSDoc descriptions
-- 🎨 **CSS Modules** — scoped styles with no runtime overhead
-- ♿ **Accessible** — semantic HTML, ARIA attributes, and keyboard support
-- 📖 **Storybook docs** — interactive documentation with auto-generated prop tables
+## 📦 Installation
+
+```bash
+npm install sander-ui
+```
+
+**Peer dependencies:** React 18 or 19
+
+## 🚀 Usage
+
+Import components and the stylesheet:
+
+```tsx
+import { Button, Input, Modal } from "sander-ui";
+import "sander-ui/styles.css";
+```
+
+Use them in your app:
+
+```tsx
+function App() {
+  return (
+    <div>
+      <Button variant="primary" size="md" onClick={() => alert("Clicked!")}>
+        Click me
+      </Button>
+      <Input label="Email" placeholder="you@example.com" />
+    </div>
+  );
+}
+```
 
 ## 🗂️ Components
 
@@ -27,56 +53,11 @@ A modern React component library built with TypeScript and CSS Modules. Designed
 ### 📐 Layout
 `Card` · `Modal` · `Drawer`
 
-## 🚀 Getting Started
-
-```bash
-npm install
-```
-
-### 🛠️ Development
-
-```bash
-npm run storybook
-```
-
-Opens Storybook at [http://localhost:6006](http://localhost:6006) with live-reloading, interactive examples, and full prop documentation for every component.
-
-### 📦 Build
-
-```bash
-npm run build-storybook
-```
-
-Outputs a static documentation site to `storybook-static/`.
-
-## 🐳 Deployment
-
-A multi-stage `Dockerfile` is included for deploying the Storybook docs site:
-
-```bash
-docker build -t sander-ui .
-docker run -p 80:80 sander-ui
-```
-
-Compatible with EasyPanel, Railway, Fly.io, or any Docker-based hosting.
-
-## 🎛️ Design Tokens
-
-All visual decisions are centralized in CSS custom properties (`src/styles/_tokens.css`):
-
-- **Colors** — primary, semantic (success, error, warning, info), and a full gray scale
-- **Typography** — [Outfit](https://fonts.google.com/specimen/Outfit) font family with consistent size and weight scales
-- **Spacing** — a harmonious spacing scale from `0.125rem` to `3rem`
-- **Radii, shadows, transitions** — shared across all components
+Browse all components with interactive examples and full prop documentation at the **[📖 Storybook](https://n8n-sander-ui.igjw7r.easypanel.host)**.
 
-## ⚙️ Tech Stack
+## 🎨 Design Tokens
 
-- [React](https://react.dev) + [TypeScript](https://www.typescriptlang.org)
-- [Vite](https://vite.dev)
-- [CSS Modules](https://github.com/css-modules/css-modules)
-- [Storybook](https://storybook.js.org)
-- [Lucide](https://lucide.dev) icons
-- [classnames](https://github.com/JedWatson/classnames)
+All visual decisions are centralized in CSS custom properties (`src/styles/_tokens.css`) covering colors, typography ([Outfit](https://fonts.google.com/specimen/Outfit)), spacing, radii, shadows, and transitions.
 
 ## 📄 License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sander-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "A modern React component library built with TypeScript and CSS Modules",
   "main": "./dist/index.js",