@raxrai/stylelab-ui 0.1.0 → 0.3.0

package/README.md

@@ -1,51 +1,39 @@
 # StyleLab UI
 
-A themeable, accessible React UI library with **8 themes**: Minimal, Night, Glass, Neubrutal, Clay, Cyberpunk, Retro, and Motion. Built with Tailwind CSS v4, CVA, and Lucide icons. NPM-ready with CJS/ESM build and zero heavy dependencies (peer: React).
+A themeable, accessible React UI library with **8 themes**: Minimal, Night, Glass, Neubrutal, Clay, Cyberpunk, Retro, and Motion. Built with Tailwind CSS v4, CVA, and Lucide icons. Zero extra dependencies at install time — only **React** and **React DOM** as peers; everything else is bundled.
 
-## Run locally
+**Live site (demo, gallery, docs):** [https://stylelab.rajarai.com](https://stylelab.rajarai.com)
 
-```bash
-npm install
-npm run dev
-```
+---
 
-Open [http://localhost:3000/gallery](http://localhost:3000/gallery) to see all components and the sticky theme switcher.
+## Installation
 
-## Build library for distribution
+**Next.js or any existing React app** (you already have React):
 
 ```bash
-npm run build:lib
+npm install @raxrai/stylelab-ui
 ```
 
-Output: `dist/` (CJS, ESM, and `.d.ts`). The package is already configured for npm (`main`, `module`, `types`, `exports`, `files`). To publish, see **[docs/PUBLISHING-TO-NPM.md](docs/PUBLISHING-TO-NPM.md)** for detailed steps.
-
----
-
-## Documentation
-
-- **[docs/COMPONENTS.md](docs/COMPONENTS.md)** — Full component API: every prop, type, hook, and global (themes, `getThemeClass`, `cn`, etc.).
-- **[docs/PUBLISHING-TO-NPM.md](docs/PUBLISHING-TO-NPM.md)** — How to publish this package to npm (maintainers).
-
----
-
-## Installation
+**New project without React** (e.g. empty folder):
 
 ```bash
 npm install @raxrai/stylelab-ui react react-dom
 ```
 
-Peer dependencies: `react` and `react-dom` (>=18). Other runtime deps (e.g. `class-variance-authority`, `clsx`, `tailwind-merge`, `lucide-react`, `framer-motion`) are bundled, so no extra install is required.
+The package lists **react** and **react-dom** as peer dependencies (>=18). Next.js and Create React App already include them, so you don’t install them again. Other runtime deps (cva, clsx, tailwind-merge, lucide-react, framer-motion) are bundled, so no extra install is required.
 
-### Tailwind + styles
+### 1. Tailwind + styles
 
-Your app must use **Tailwind CSS v4**. Import StyleLab design tokens in your global CSS after Tailwind:
+Your app must use **Tailwind CSS v4**. Import StyleLab design tokens in your global CSS **after** Tailwind:
 
 ```css
 @import "tailwindcss";
 @import "@raxrai/stylelab-ui/styles";
 ```
 
-### ThemeProvider
+### 2. ThemeProvider
+
+Wrap your app so components receive the active theme:
 
 ```tsx
 import { ThemeProvider } from "@raxrai/stylelab-ui";
@@ -61,7 +49,7 @@ export default function RootLayout({ children }) {
 }
 ```
 
-### Use components
+### 3. Use components
 
 ```tsx
 import { Button, Card, useTheme } from "@raxrai/stylelab-ui";
@@ -79,17 +67,20 @@ export function MyPage() {
 
 **Themes:** `minimal` | `night` | `glass` | `neubrutal` | `clay` | `cyberpunk` | `retro` | `motion`
 
-### Exports
+---
+
+## What’s in the package
 
 **Components:** Accordion, Alert, Avatar, AvatarGroup, Badge, BentoGrid, Breadcrumbs, Button, Calendar, Card, CommandPalette, DashboardShell, DataTable, DocumentAccordion, Dropdown, Flashcard, GraphicCard, Input, Modal, Navbar, PricingCard, ProgressBar, SectionHeader, Sidebar, Skeleton, Slider, StatsCard, Tabs, Terminal, Timeline, Toast, Toggle, Tooltip.
 
 **Global:** ThemeProvider, useTheme, getThemeClass, THEMES, StyleLabTheme, cn, getNextListIndex, useFocusTrap, useClickOutside, useKeyboardNavigation.
 
-Full API (props, types, usage): see [docs/COMPONENTS.md](docs/COMPONENTS.md).
+- **See all components and try themes:** [stylelab.rajarai.com](https://stylelab.rajarai.com)
+- **Full API (props, types, hooks):** [docs/COMPONENTS.md](docs/COMPONENTS.md) in this repo.
 
 ---
 
-## Component Prop API (overview)
+## Component API (overview)
 
 ### Button
 
@@ -196,8 +187,8 @@ Implements focus trap and scroll lock when open.
 
 | Prop           | Type                    | Default | Description              |
 |----------------|-------------------------|---------|--------------------------|
-| `trigger`       | `ReactNode`             | —       | Button / element to open |
-| `items`        | `{ value, label, disabled? }[]` | — | Options               |
+| `trigger`     | `ReactNode`             | —       | Button / element to open |
+| `items`       | `{ value, label, disabled? }[]` | — | Options               |
 | `value` / `defaultValue` | `string`        | —       | Controlled / initial     |
 | `onValueChange`| `(value: string) => void` | —     | Selection callback       |
 
@@ -211,10 +202,32 @@ Keyboard: Enter/Space to open, Arrows to move, Enter to select, Escape to close.
 import { cn, useFocusTrap, useClickOutside, useKeyboardNavigation, getNextListIndex } from "@raxrai/stylelab-ui";
 ```
 
-- **cn(...)** – `clsx` + `tailwind-merge` for class names.
+- **cn(...)** – clsx + tailwind-merge for class names.
 - **useFocusTrap(active, options?)** – Traps focus in a container ref (e.g. Modal).
 - **useClickOutside(ref(s), handler, options?)** – Fires when click is outside ref(s).
 - **useKeyboardNavigation({ onEscape, onArrowLeft, onArrowRight, ... })** – Document-level key handlers.
 - **getNextListIndex(current, direction, length)** – Index for arrow-key list/tab navigation.
 
 ---
+
+## Changelog
+
+### [0.2.0]
+
+- **Navbar** — Optional responsive API: pass `logo`, `items` (`{ href, label }[]`), and `right` (e.g. theme switcher). On small screens nav links become a hamburger menu that opens as an overlay (no layout shift), with the theme’s navbar background; glass and clay use an opaque panel so content doesn’t show through. Desktop shows full nav row. Menu closes on link click or outside click. You can still pass `children` for a custom layout. Exported types: `NavbarItem`, `NavbarProps`.
+- **ThemeProvider** — Restores theme from `localStorage` on mount; `setTheme` persists the new theme. Optional `storageKey` prop (default `"stylelab-theme"`).
+- **Dropdown** — Popover is portaled to `document.body` and positioned with open-up/down logic. Optional `trigger` and `placeholder` (default trigger shows selected/placeholder label). `classNames` for trigger, popover, and item. Theme-aware hover/focus styles. Exported types: `DropdownItem`, `DropdownProps`, `DropdownClassNames`.
+- **Card** — `classNames` for root, header, body, footer. Cyberpunk no longer uses the clip-path “glitch cut” (avoids weird look on different backgrounds); neon border and glow remain. Exported types: `CardProps`, `CardClassNames`.
+- **Badge** — `bgOverride` and `textOverride` (e.g. hex) when you need specific colors.
+- **ProgressBar** — `trackColor` and `activeColor` overrides (e.g. hex).
+- **DashboardShell** — Header, nav links, and mobile panel use theme-based styling (no `dark:`; works with StyleLab themes).
+- **GraphicCard** — In night and cyberpunk themes, content text inherits the card’s text color so children with hardcoded dark text still display correctly.
+- **Docs** — Installation: Next.js/existing React apps install the package only; add `react`/`react-dom` only for new projects without React.
+- **Types** — `StyleLabTheme`, `ComponentName`, `ThemeRecommendation` from `lib/types`; component prop types `NavbarItem`, `NavbarProps`, `CardProps`, `CardClassNames`, `DropdownItem`, `DropdownProps`, `DropdownClassNames` re-exported from the package.
+
+---
+
+## Links
+
+- **Live demo & docs:** [https://stylelab.rajarai.com](https://stylelab.rajarai.com)
+- **Full component API (this repo):** [docs/COMPONENTS.md](docs/COMPONENTS.md)