@7onic-ui/react 0.2.8 → 0.3.0

package/llms.txt

@@ -388,31 +388,31 @@ For detailed token reference, see: https://7onic.design/llms.txt
 import { Button, Card, Input, Toast } from '@7onic-ui/react'
 ```
 
-## Namespace Pattern (Compound Components)
+## Component Import
 
-21 compound components use namespace imports. Access sub-components via dot notation:
+All components use Named imports. Works in every environment (Next.js App Router RSC, Client Components, Pages Router, Vite, CRA, CJS).
 
 ```tsx
-import { Card } from '@7onic-ui/react'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@7onic-ui/react'
 
-// ✅ Namespace usage (preferred)
 <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>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+  </CardHeader>
+  <CardContent>Content</CardContent>
+  <CardFooter>Footer</CardFooter>
 </Card>
-
-// ✅ Named exports also work (backwards compatible)
-import { Card, CardHeader, CardTitle, CardContent } from '@7onic-ui/react'
 ```
 
-### Compound Components List (24)
+### Compound Components (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
 
+Prefer dot-notation (`<Card.Header>`)? See **Compound Recipe** section at end of this document.
+
 ### Standalone Components (16)
 
 Badge, Button, ButtonGroup, Checkbox, Divider, IconButton, Input, Progress, Skeleton, Slider, Spinner, Switch, Textarea, Toast, Toggle, TypingIndicator
@@ -2272,6 +2272,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.8",
+  "version": "0.3.0",
   "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",