npm - koori-ui - Versions diffs - 1.0.5 → 1.0.6 - Mend

koori-ui 1.0.5 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -3,7 +3,7 @@
 </p>
 <p align="center">
-  Soft glass UI components built on <a href="https://www.radix-ui.com">Radix UI</a> for React&nbsp;19
+  Comprehensive glassmorphism component library built on <a href="https://www.radix-ui.com">Radix UI</a> for React&nbsp;19
 </p>
 <p align="center">
@@ -16,228 +16,243 @@
 ## Features
-- 🪟 **Glassmorphism design system** — translucent surfaces, blur, and layered depth
-- ♿ **Accessible** — built on Radix UI primitives
-- 🌲 **Tree-shakeable** — only import what you use
-- ⚡ **React 19 ready** — RSC-safe, concurrent rendering compatible
-- 🎨 **Themeable** — override CSS custom properties to match your brand
-- 📦 **Tiny footprint** — ESM + CJS, ~7 KB gzipped
+- 🪟 **27+ components** — General, Layout, Form, Navigation, Data Display, Feedback
+- ♿ **Accessible** — built on Radix UI primitives with keyboard nav and ARIA
+- 🌗 **Dark / Light / System** — `KooriProvider` with localStorage persistence and no FOUC
+- 🎨 **4 color presets** — Slate, Zinc, Neutral, Violet via `data-theme`
+- 🤖 **MCP server** — search component docs from Claude Code
+- ⚡ **React 19 ready** — RSC-safe (`"use client"` banner auto-injected)
+- 📦 **Dual ESM + CJS** — tree-shakeable, TypeScript declarations included
 ---
-## Installation
+## Quick Start
 ```bash
-npm install koori-ui
+npx create-koori-app my-app
+cd my-app && npm run dev
 ```
-> **Peer dependencies:** `react >= 19` and `react-dom >= 19`
+Or install manually:
+```bash
+npm install koori-ui
+```
 ---
-## Quick Start
+## Setup
-Import the styles **once** in your app's entry point:
+### 1. Import styles
 ```tsx
+// app/layout.tsx (or your entry point)
 import "koori-ui/styles.css";
 ```
-Then use the components:
+### 2. Wrap with KooriProvider
+`KooriProvider` handles dark/light mode, color scheme, localStorage persistence, and prevents flash-of-unstyled-content.
 ```tsx
-import { GlassPanel, GlassButton, GlassInput } from "koori-ui";
+import { KooriProvider } from "koori-ui";
-export default function App() {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div style={{ background: "#0B0F19", minHeight: "100vh", padding: 40 }}>
-      <GlassPanel className="max-w-md mx-auto space-y-4">
-        <h1 className="text-xl font-bold text-white">Welcome</h1>
-        <GlassInput placeholder="Enter your email" />
-        <GlassButton variant="primary">Get Started</GlassButton>
-      </GlassPanel>
-    </div>
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <KooriProvider defaultTheme="dark">
+          {children}
+        </KooriProvider>
+      </body>
+    </html>
   );
 }
 ```
----
-## Components
-### GlassPanel
-A container wrapper with glassmorphism styling.
+### 3. Use the theme hook
 ```tsx
-<GlassPanel variant="elevated">
-  {/* content */}
-</GlassPanel>
-```
+"use client";
+import { useKooriTheme, GlassButton } from "koori-ui";
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"default" \| "subtle" \| "elevated"` | `"default"` | Glass intensity |
-| `className` | `string` | — | Additional classes |
----
-### GlassCard
-A card with optional `Header`, `Body`, and `Footer` sub-components.
-```tsx
-import {
-  GlassCard,
-  GlassCardHeader,
-  GlassCardBody,
-  GlassCardFooter,
-} from "koori-ui";
-<GlassCard>
-  <GlassCardHeader>Title</GlassCardHeader>
-  <GlassCardBody>Content goes here.</GlassCardBody>
-  <GlassCardFooter>
-    <GlassButton>Action</GlassButton>
-  </GlassCardFooter>
-</GlassCard>
+export function ThemeToggle() {
+  const { theme, setTheme } = useKooriTheme();
+  return (
+    <GlassButton onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
+      Toggle Theme
+    </GlassButton>
+  );
+}
 ```
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"default" \| "subtle" \| "elevated"` | `"default"` | Glass intensity |
+| `KooriProvider` prop | Type | Default | Description |
+|---|---|---|---|
+| `defaultTheme` | `"light" \| "dark" \| "system"` | `"system"` | Initial theme |
+| `defaultColorScheme` | `"default" \| "slate" \| "zinc" \| "neutral" \| "violet"` | `"default"` | Initial color preset |
 ---
-### GlassButton
-A button with hover glow and variants.
-```tsx
-<GlassButton variant="primary" size="lg">Submit</GlassButton>
-```
+## Components
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"default" \| "primary"` | `"default"` | Visual style |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size preset |
+### General
+| Component | Description |
+|---|---|
+| `GlassButton` | Button with `variant` (default/primary) and `size` (sm/md/lg) |
+| `GlassBadge` | Pill badge — variants: default, primary, success, warning, danger |
+| `GlassH1` `GlassH2` `GlassH3` `GlassH4` | Heading elements |
+| `GlassText` | Paragraph — `size` (sm/md/lg), `muted` prop |
+| `GlassCode` | Inline code snippet with glass background |
+| `GlassLink` | Anchor with primary color and hover underline |
+| `GlassBlockquote` | Blockquote with primary left border |
+### Layout
+| Component | Description |
+|---|---|
+| `GlassPanel` | Foundational container — variants: default, subtle, elevated |
+| `GlassCard` + `GlassCardHeader` / `GlassCardBody` / `GlassCardFooter` | Structured card |
+| `GlassSeparator` | Horizontal or vertical divider (`orientation` prop) |
+### Form
+| Component | Description |
+|---|---|
+| `GlassInput` | Text input, all native types supported |
+| `GlassTextarea` | Multi-line input (`rows` prop) |
+| `GlassCheckbox` | Accessible checkbox with optional `label` |
+| `GlassSwitch` | Toggle switch with optional `label` |
+| `GlassRadioGroup` + `GlassRadioItem` | Radio group powered by Radix UI |
+| `GlassSelect` + sub-components | Dropdown select powered by Radix UI |
+| `GlassSlider` | Range slider powered by Radix UI |
+### Navigation
+| Component | Description |
+|---|---|
+| `GlassTabs` + `GlassTabsList` / `GlassTabsTrigger` / `GlassTabsContent` | Tabbed interface |
+| `GlassBreadcrumb` + `GlassBreadcrumbItem` / `GlassBreadcrumbSeparator` | Navigation breadcrumb |
+| `GlassDropdownMenu` + sub-components | Context menu powered by Radix UI |
+### Data Display
+| Component | Description |
+|---|---|
+| `GlassAvatar` + `GlassAvatarImage` / `GlassAvatarFallback` | Avatar with image fallback |
+| `GlassTable` + `GlassThead` / `GlassTbody` / `GlassTr` / `GlassTh` / `GlassTd` | Data table |
+| `GlassStatCard` | KPI card with `value`, `label`, `trend`, `icon` props |
+| `GlassAreaChart` / `GlassBarChart` | Recharts wrappers with glass tooltips |
+### Feedback
+| Component | Description |
+|---|---|
+| `GlassAlert` | Alert with variants: info, success, warning, error |
+| `GlassDialog` + sub-components | Modal dialog powered by Radix UI |
+| `GlassPopover` + sub-components | Floating panel powered by Radix UI |
+| `GlassTooltip` + sub-components | Tooltip powered by Radix UI |
+| `GlassToast` + `GlassToaster` | Toast notifications powered by Radix UI |
+| `GlassProgress` | Progress bar — variants: default, success, warning, error |
+| `GlassSkeleton` | Animated loading placeholder |
 ---
-### GlassInput
-A styled text input with subtle focus ring.
-```tsx
-<GlassInput placeholder="Search..." type="email" />
-```
-Supports all native `<input>` props. Works controlled and uncontrolled.
----
+## Theming
-### GlassDialog
+### Color presets
-An accessible modal dialog powered by Radix UI.
+Apply a preset via `KooriProvider` or directly on `<html>`:
 ```tsx
-import {
-  GlassDialog,
-  GlassDialogTrigger,
-  GlassDialogContent,
-  GlassDialogTitle,
-  GlassDialogDescription,
-  GlassDialogClose,
-} from "koori-ui";
-<GlassDialog>
-  <GlassDialogTrigger asChild>
-    <GlassButton>Open</GlassButton>
-  </GlassDialogTrigger>
-  <GlassDialogContent>
-    <GlassDialogTitle>Confirm</GlassDialogTitle>
-    <GlassDialogDescription>Are you sure?</GlassDialogDescription>
-    <GlassDialogClose asChild>
-      <GlassButton>Close</GlassButton>
-    </GlassDialogClose>
-  </GlassDialogContent>
-</GlassDialog>
+<KooriProvider defaultColorScheme="violet">...</KooriProvider>
+// or
+<html data-theme="slate">
 ```
----
+Available presets: `slate`, `zinc`, `neutral`, `violet`
-### GlassChart (Recharts Component)
+### CSS custom properties
-Premium, automatically responsive glassmorphism wrappers for Recharts.
+Override any token to match your brand:
-```tsx
-import { GlassAreaChart, GlassBarChart } from "koori-ui";
-const chartData = [
-  { name: "Jan", revenue: 4000, users: 2400 },
-  { name: "Feb", revenue: 3000, users: 1398 },
-];
-<GlassAreaChart
-  data={chartData}
-  index="name"
-  categories={[{ key: "revenue", color: "var(--koori-primary)", name: "Revenue" }]}
-/>
+```css
+:root {
+  --koori-primary: #8b5cf6;
+  --koori-accent: #a78bfa;
+}
 ```
----
+| Token | Description |
+|---|---|
+| `--koori-bg` | Page background |
+| `--koori-text` | Primary text |
+| `--koori-muted` | Secondary/muted text |
+| `--koori-primary` | Brand primary |
+| `--koori-accent` | Brand accent |
+| `--koori-success` / `--koori-warning` / `--koori-error` / `--koori-info` | Status colors |
+| `--koori-radius-sm/md/lg/xl/full` | Border radius scale |
-## 🤖 Model Context Protocol (MCP) & Copy-Paste Setup [SOON]
+### Glass CSS classes
-We are currently building **native MCP (Model Context Protocol)** support! Soon, you will be able to simply expose Koori UI to any agent and have it automatically scaffold React components for you.
+Use directly when building custom components:
-We will also provide copy-pasteable Markdown recipes for every complex component directly in our documentation so your AI assistants can use them perfectly every time!
+| Class | Description |
+|---|---|
+| `.glass` | Standard frosted glass |
+| `.glass-subtle` | Lighter, more transparent |
+| `.glass-elevated` | Strongest blur and drop shadow |
 ---
-## Theming
+## MCP Server (Claude Code)
-Override CSS custom properties to customize the palette:
+Search Koori UI component docs from within Claude Code:
-```css
-:root {
-  --koori-bg: #0b0f19;
-  --koori-text: #e6eaf2;
-  --koori-muted: #a1a7b3;
-  --koori-primary: #6c8cff;
-}
+```bash
+cd packages/mcp && npm run build
 ```
-For example, switch to a purple accent:
+Add to `.claude/settings.json`:
-```css
-:root {
-  --koori-primary: #a78bfa;
+```json
+{
+  "mcpServers": {
+    "koori-ui": {
+      "command": "node",
+      "args": ["./packages/mcp/dist/index.js"]
+    }
+  }
 }
 ```
+Available tools: `list_components`, `get_component_docs`, `search_components`, `get_component_example`
 ---
-## Glass CSS Classes
+## create-koori-app
-You can also use the raw CSS classes directly:
+Scaffold a new project interactively:
-| Class | Description |
-|-------|-------------|
-| `.glass` | Standard frosted glass |
-| `.glass-subtle` | Lighter, more transparent |
-| `.glass-elevated` | Stronger blur + drop shadow |
+```bash
+npx create-koori-app my-app
+```
+Prompts for project name, default theme, and package manager. Outputs a Next.js app with `KooriProvider` pre-configured.
 ---
 ## Build
 ```bash
-npm run build       # CJS + ESM + DTS → dist/
+npm run build       # CJS + ESM + DTS + CSS → dist/
 npm run typecheck   # tsc --noEmit
 npm run dev         # watch mode
+npm run release:patch  # bump version, build, pack tarball
 ```
+---
 ## License
 MIT

package/dist/index.css CHANGED Viewed

@@ -1074,6 +1074,9 @@
   .italic {
     font-style: italic;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }

package/dist/index.js CHANGED Viewed

@@ -262,11 +262,14 @@ function GlassAreaChart({
   index
 }) {
   const [mounted, setMounted] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => setMounted(true), []);
+  (0, import_react2.useEffect)(() => {
+    const raf = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
   if (!mounted) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("w-full", className), style: { height, minHeight: height } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("w-full", className), style: { height, minHeight: height, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.AreaChart, { data, margin: { top: 10, right: 10, left: 0, bottom: 0 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("w-full", className), style: { height, minHeight: height, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", minWidth: 200, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.AreaChart, { data, margin: { top: 10, right: 10, left: 0, bottom: 0 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: categories.map((cat, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id: `grad-${cat.key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "5%", stopColor: cat.color, stopOpacity: 0.3 }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "95%", stopColor: cat.color, stopOpacity: 0 })
@@ -318,11 +321,14 @@ function GlassBarChart({
   index
 }) {
   const [mounted, setMounted] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => setMounted(true), []);
+  (0, import_react2.useEffect)(() => {
+    const raf = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
   if (!mounted) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("w-full", className), style: { height, minHeight: height } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("w-full", className), style: { height, minHeight: height, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.BarChart, { data, margin: { top: 10, right: 10, left: 0, bottom: 0 }, barSize: 32, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("w-full", className), style: { height, minHeight: height, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", minWidth: 200, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.BarChart, { data, margin: { top: 10, right: 10, left: 0, bottom: 0 }, barSize: 32, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "rgba(255,255,255,0.06)" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_recharts.XAxis,