@tomny-dev/uzi 0.1.4 → 0.1.6

package/README.md

@@ -11,36 +11,93 @@ pnpm add @tomny-dev/uzi
 ## Usage
 
 ```tsx
-import { Button, Card, Modal, useToast } from "@tomny-dev/uzi";
+import { Button, Card, Modal, ThemeProvider, useToast } from "@tomny-dev/uzi";
 ```
 
-## Components
+If you want the packaged component styles, import the exported stylesheet once in your app:
 
-| Component    | Description                              |
-|--------------|------------------------------------------|
-| `Button`     | Primary, secondary, outline, ghost variants |
-| `Card`       | Surface container with tone/padding control |
-| `Pill`       | Inline badge/tag                         |
-| `Modal`      | Accessible overlay dialog                |
-| `Dropdown`   | Select-style dropdown                    |
-| `AppShell`   | Responsive layout with collapsible sidebar |
-| `SidebarNav` | Sidebar navigation list                  |
-| `ToastProvider` / `useToast` | Toast notification system |
+```css
+@import "@tomny-dev/uzi/styles.css";
+```
 
-## Development
+## Themes
 
-```bash
-pnpm install
-pnpm dev    # watch mode
-pnpm build  # production build
-pnpm lint   # type check
-```
+`uzi` ships with built-in light/dark tokens and a small accent palette layer.
 
-## Claude Code
+```tsx
+"use client";
+
+import { Button, ThemeProvider, useTheme } from "@tomny-dev/uzi";
+
+function ThemeToggle() {
+  const { resolvedTheme, toggleTheme, accent, setAccent } = useTheme();
 
-A `CLAUDE.md` is included with architecture notes, component conventions, and publishing details. If you're using Claude Code in a consumer repo, you can reference it in your own `CLAUDE.md`:
+  return (
+    <div>
+      <Button onClick={toggleTheme}>
+        {resolvedTheme === "dark" ? "Switch to light" : "Switch to dark"}
+      </Button>
+      <Button variant="outline" onClick={() => setAccent(accent === "violet" ? "blue" : "violet")}>
+        Toggle accent
+      </Button>
+    </div>
+  );
+}
 
-```md
-## UI Components
-See node_modules/@tomny-dev/uzi/CLAUDE.md for component API and usage notes.
+export function App() {
+  return (
+    <ThemeProvider defaultTheme="system" defaultAccent="blue">
+      <ThemeToggle />
+    </ThemeProvider>
+  );
+}
 ```
+
+Supported themes:
+
+- `light`
+- `dark`
+- `system`
+
+Supported accent palettes:
+
+- `blue`
+- `cyan`
+- `violet`
+- `emerald`
+- `amber`
+- `rose`
+
+## Components
+
+| Component | Description |
+|---|---|
+| `Avatar` | Profile image with fallback states |
+| `Button` | Primary, secondary, outline, ghost variants |
+| `Card` | Surface container with tone/padding control |
+| `Checkbox` | Checkbox form primitive |
+| `Input` | Text input primitive |
+| `Label` | Form label primitive |
+| `Pill` | Inline badge/tag |
+| `Modal` | Accessible overlay dialog |
+| `Dropdown` | Select-style dropdown |
+| `DropdownMenu` | Radix-based action menu primitives |
+| `AppShell` | Responsive layout with collapsible sidebar |
+| `SidebarNav` | Sidebar navigation list |
+| `TopBar` | Composable header shell for brand, nav triggers, and actions |
+| `ThemeToggleButton` | Reusable light/dark toggle wired to `ThemeProvider` |
+| `ThemeProvider` / `useTheme` | Light/dark + accent palette theming |
+| `ToastProvider` / `useToast` | Toast notification system |
+
+`TopBar` supports:
+
+- `brandingLocation="left" | "center"`
+- `isSticky={true | false}`
+- `showThemeToggle`
+- `themeToggleProps`
+
+## Notes
+
+- No Tailwind — components use CSS modules internally
+- `"use client"` is handled by the bundle — no need to wrap imports
+- `react` and `react-dom` are peer dependencies, provided by your app