@7onic-ui/react 0.2.9 → 0.3.1

package/llms.txt

@@ -77,22 +77,16 @@ module.exports = {
 }
 ```
 
-**2-3. Set body classes:**
-```html
-<body class="bg-background text-foreground">
-```
-
-**2-4. Apply user's answers:**
+**2-3. Apply user's answers:**
 
 - Dark mode = yes → implement dark mode toggle (see below)
 - Custom font → load font (next/font for Next.js, CDN for Vite) + set `--font-family-sans`
 - Locale includes Japanese → load Noto Sans JP font
 - Locale includes Korean → load Noto Sans KR font
 
-**2-5. Verify setup is complete before writing any UI code:**
+**2-4. Verify setup is complete before writing any UI code:**
 - [ ] Packages installed (@7onic-ui/react, @7onic-ui/tokens, lucide-react)
 - [ ] globals.css has ALL required imports in correct order
-- [ ] Body has `bg-background text-foreground`
 - [ ] Dark mode toggle (if selected)
 - [ ] Font loaded (if custom)
 - [ ] CJK fonts loaded (if applicable)
@@ -121,7 +115,7 @@ Place `<Toaster />` once in your root layout file. Without this, `toast()` calls
 import { Toaster } from '@7onic-ui/react'
 
 // In your root layout (e.g., app/layout.tsx)
-<body className="bg-background text-foreground">
+<body>
   {children}
   <Toaster position="bottom-right" />
 </body>
@@ -279,7 +273,7 @@ The token system covers all UI needs out of the box. As AI, use existing tokens
 If the user needs custom values beyond existing tokens, they will handle it separately.
 Customization guide: https://7onic.design/components/theming
 
-**Never modify generated token files** — these are auto-generated from figma-tokens.json via sync-tokens. AI must never edit, add to, or delete from: `variables.css`, `light.css`, `dark.css`, `v3-preset.js`, `v4-theme.css`, `index.js`, `index.mjs`, `index.d.ts`, `tokens.json`
+**Never modify generated token files** — these are auto-generated from figma-tokens.json via sync-tokens. AI must never edit, add to, or delete from: `variables.css`, `light.css`, `dark.css`, `reset.css`, `v3-preset.js`, `v4-theme.css`, `index.js`, `index.mjs`, `index.d.ts`, `tokens.json`
 
 ### Self-Check (after writing ANY code)
 
@@ -388,28 +382,9 @@ For detailed token reference, see: https://7onic.design/llms.txt
 import { Button, Card, Input, Toast } from '@7onic-ui/react'
 ```
 
-## Compound Component Import Patterns
-
-24 compound components support **two equivalent import patterns** — choose based on your rendering context:
+## Component Import
 
-### Pattern A: Namespace (dot notation) — Client Components
-
-```tsx
-import { Card } from '@7onic-ui/react'
-
-<Card>
-  <Card.Header>
-    <Card.Title>Title</Card.Title>
-    <Card.Description>Description</Card.Description>
-  </Card.Header>
-  <Card.Content>Content</Card.Content>
-  <Card.Footer>Footer</Card.Footer>
-</Card>
-```
-
-Better name grouping and readability. Works in files with `'use client'` directive.
-
-### Pattern B: Named imports — works everywhere (including Server Components)
+All components use Named imports. Works in every environment (Next.js App Router RSC, Client Components, Pages Router, Vite, CRA, CJS).
 
 ```tsx
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@7onic-ui/react'
@@ -424,41 +399,13 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
 </Card>
 ```
 
-### ⚠️ Next.js Server Components — use Pattern B
-
-**Namespace pattern (`<Card.Header />`) does NOT work inside Server Components** due to a Next.js Client Manifest limitation (sub-component references cannot be tracked through `Object.assign`).
+### Compound Components (24)
 
-```tsx
-// ❌ Server Component (default in App Router) — throws "Unsupported Server Component type: undefined"
-export default function Page() {
-  return (
-    <Card>
-      <Card.Header>...</Card.Header>
-    </Card>
-  )
-}
-
-// ✅ Server Component — use named imports
-import { Card, CardHeader } from '@7onic-ui/react'
-
-export default function Page() {
-  return (
-    <Card>
-      <CardHeader>...</CardHeader>
-    </Card>
-  )
-}
-```
-
-**Rule of thumb:**
-- File has `'use client'` at top → either pattern works, namespace preferred
-- File has no directive (Server Component default in Next.js App Router) → named imports only
-
-### Compound Components List (24)
+Components that provide sub-components. Each sub is a Named export (`CardHeader`, `ModalContent`, `TabsList`, etc.).
 
 Accordion, Alert, Avatar, Breadcrumb, Card, ChatInput, ChatMessage, Chart, Drawer, DropdownMenu, Field, MetricCard, Modal, NavigationMenu, Pagination, Popover, QuickReply, RadioGroup, Segmented, Select, Table, Tabs, ToggleGroup, Tooltip
 
-Each compound component's sub-components can be imported as named exports. Example: `Card.Header` ↔ `CardHeader`, `Modal.Content` ↔ `ModalContent`, `Tabs.List` ↔ `TabsList`, etc. The code examples below use the namespace pattern; convert dots to camelCase for named imports when needed for Server Components.
+Prefer dot-notation (`<Card.Header>`)? See **Compound Recipe** section at end of this document.
 
 ### Standalone Components (16)
 
@@ -2319,6 +2266,35 @@ import { ChatMessage } from '@7onic-ui/react'
 
 ---
 
+## Compound Recipe (opt-in self-wrapper)
+
+v0.3.0+ library exports Named only (`<CardHeader>`). To restore dot-notation (`<Card.Header>`) in your project, add a 5-line wrapper file:
+
+```tsx
+// lib/card.tsx
+'use client'
+import {
+  Card as CardBase,
+  CardHeader, CardTitle, CardDescription,
+  CardContent, CardFooter, CardImage, CardAction,
+} from '@7onic-ui/react'
+
+export const Card = Object.assign(CardBase, {
+  Header: CardHeader, Title: CardTitle,
+  Description: CardDescription, Content: CardContent,
+  Footer: CardFooter, Image: CardImage, Action: CardAction,
+})
+// Then: <Card.Header>, <Card.Title>, etc. — Client Components only.
+```
+
+**Rules**:
+- Wrapper file must start with `'use client'` — Next.js Client Manifest cannot track `Object.assign` properties across RSC boundaries.
+- Recipe works only in Client Components. Server Components must use Named imports (`<CardHeader>`).
+- If you don't need dot-notation, skip this entirely — Named imports (`<CardHeader>`) work everywhere: RSC, Client, Vite, CRA, CJS.
+- Compound namespaces (component families with sub-components): Accordion, Alert, AlertModal, Avatar, Breadcrumb, Card, Chart, ChatInput, ChatMessage, Drawer, DropdownMenu, Field, MetricCard, Modal, NavigationMenu, Pagination, Popover, QuickReply, RadioGroup, Segmented, Select, Table, Tabs, ToggleGroup, Tooltip.
+
+---
+
 ## Links
 
 - Documentation: https://7onic.design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7onic-ui/react",
-  "version": "0.2.9",
+  "version": "0.3.1",
   "private": false,
   "sideEffects": [
     "*.css"
@@ -94,6 +94,7 @@
   "devDependencies": {
     "@7onic-ui/tokens": "file:./tokens",
     "@clack/prompts": "^1.2.0",
+    "@playwright/test": "^1.59.1",
     "@types/node": "^20.14.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",