@7onic-ui/react 0.2.7 → 0.2.9

package/llms.txt

@@ -388,14 +388,15 @@ For detailed token reference, see: https://7onic.design/llms.txt
 import { Button, Card, Input, Toast } from '@7onic-ui/react'
 ```
 
-## Namespace Pattern (Compound Components)
+## Compound Component Import Patterns
 
-21 compound components use namespace imports. Access sub-components via dot notation:
+24 compound components support **two equivalent import patterns** — choose based on your rendering context:
+
+### Pattern A: Namespace (dot notation) — Client Components
 
 ```tsx
 import { Card } from '@7onic-ui/react'
 
-// ✅ Namespace usage (preferred)
 <Card>
   <Card.Header>
     <Card.Title>Title</Card.Title>
@@ -404,15 +405,61 @@ import { Card } from '@7onic-ui/react'
   <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)
+
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@7onic-ui/react'
+
+<Card>
+  <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'
+### ⚠️ 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`).
+
+```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)
 
 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.
+
 ### Standalone Components (16)
 
 Badge, Button, ButtonGroup, Checkbox, Divider, IconButton, Input, Progress, Skeleton, Slider, Spinner, Switch, Textarea, Toast, Toggle, TypingIndicator
@@ -500,7 +547,7 @@ import { Button, ButtonGroup } from '@7onic-ui/react'
 | radius | Button radius values | — | Applied to all children |
 | fontWeight | `'normal' \| 'semibold'` | — | Applied to all children |
 | orientation | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction |
-| attached | `boolean` | `false` | Overlapping borders |
+| attached | `boolean` | `true` | Overlapping borders |
 | disabled | `boolean` | `false` | Disable all children |
 
 Provides context — child Buttons inherit variant/size/radius automatically.
@@ -547,6 +594,7 @@ import { Textarea } from '@7onic-ui/react'
 | resize | `'none' \| 'vertical' \| 'horizontal' \| 'both'` | `'vertical'` | Resize handle |
 | error | `boolean` | `false` | Error state |
 | focusRing | `boolean` | `false` | Explicit focus ring |
+| rows | `number` | `4` | Initial row count |
 
 ---
 
@@ -602,7 +650,7 @@ import { DropdownMenu } from '@7onic-ui/react'
 
 | Prop (Content) | Type | Default | Description |
 |---|---|---|---|
-| radius | `'md' \| 'lg' \| 'xl'` | `'lg'` | Border radius |
+| radius | `'md' \| 'lg' \| 'xl'` | `'md'` | Border radius |
 | size | `'sm' \| 'md' \| 'lg'` | `'md'` | Item density |
 | flush | `boolean` | `false` | Full-width items (no padding) |
 | sideOffset | `number` | `4` | Gap from trigger |
@@ -781,7 +829,7 @@ import { Slider } from '@7onic-ui/react'
 |---|---|---|---|
 | size | `'sm' \| 'default' \| 'lg'` | `'default'` | Track/thumb size |
 | color | `'default' \| 'primary'` | `'default'` | Active track color |
-| showTooltip | `'auto' \| 'always' \| 'never'` | `'auto'` | Tooltip display |
+| showTooltip | `'auto' \| 'always' \| 'never'` | `'never'` | Tooltip display |
 | formatLabel | `(value: number) => string` | — | Tooltip value formatter |
 | startContent | `ReactNode` | — | Left content (label/icon) |
 | endContent | `ReactNode` | — | Right content (label/icon) |
@@ -853,7 +901,7 @@ import { Avatar } from '@7onic-ui/react'
 | Prop (Fallback) | Type | Default | Description |
 |---|---|---|---|
 | name | `string` | — | Auto-generates initials |
-| colorized | `boolean` | `false` | Deterministic color from name hash |
+| colorized | `string` | — | Pass a name/key string to enable deterministic colored fallback |
 | colorVariant | `'vivid' \| 'soft'` | `'vivid'` | Color intensity |
 
 | Prop (Group) | Type | Default | Description |
@@ -964,6 +1012,10 @@ import { Table } from '@7onic-ui/react'
 | interactive | `boolean` | `false` | Hover highlight |
 | selected | `boolean` | `false` | Selected state |
 
+| Prop (Cell) | Type | Default | Description |
+|---|---|---|---|
+| align | `'left' \| 'center' \| 'right'` | `'left'` | Text alignment |
+
 **Sub-components:** Table.Header, Table.Body, Table.Footer, Table.Row, Table.Head, Table.Cell, Table.Caption
 
 ---
@@ -991,7 +1043,7 @@ import { Tabs } from '@7onic-ui/react'
 | size | `'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | Tab size |
 | fitted | `boolean` | `false` | Full width tabs |
 | color | `'default' \| 'primary'` | `'default'` | Active tab color |
-| radius | `'none' \| 'sm' \| 'md' \| 'default' \| 'lg' \| 'full'` | `'default'` | Border radius (enclosed/pill) |
+| radius | `'none' \| 'sm' \| 'base' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'md'` | Border radius (enclosed/pill) |
 
 **Sub-components:** Tabs.List, Tabs.Trigger, Tabs.Content
 
@@ -1016,11 +1068,11 @@ import { Accordion } from '@7onic-ui/react'
 
 | Prop (Root) | Type | Default | Description |
 |---|---|---|---|
-| type | `'single' \| 'multiple'` | required | Expansion mode |
+| type | `'single' \| 'multiple'` | `'single'` | Expansion mode |
 | variant | `'default' \| 'bordered' \| 'splitted'` | `'default'` | Visual style |
 | size | `'sm' \| 'default' \| 'lg'` | `'default'` | Padding scale |
 | iconPosition | `'left' \| 'right'` | `'right'` | Chevron placement |
-| collapsible | `boolean` | `false` | Allow all closed (single only) |
+| collapsible | `boolean` | `true` | Allow all closed (single only) |
 
 **Sub-components:** Accordion.Item, Accordion.Trigger (with `icon` prop), Accordion.Content
 
@@ -1078,8 +1130,8 @@ import { Modal, Button } from '@7onic-ui/react'
 
 | Prop (Content) | Type | Default | Description |
 |---|---|---|---|
-| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | Modal width |
-| scrollBehavior | `'inside' \| 'outside'` | `'inside'` | Scroll target |
+| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'sm'` | Modal width |
+| scrollBehavior | `'inside' \| 'outside'` | `'outside'` | Scroll target |
 | showCloseButton | `boolean` | `true` | Show X button |
 
 **Sub-components:** Modal.Trigger, Modal.Portal, Modal.Overlay, Modal.Content, Modal.Header, Modal.Title, Modal.Description, Modal.Body, Modal.Footer, Modal.Close
@@ -1088,6 +1140,42 @@ import { Modal, Button } from '@7onic-ui/react'
 
 ---
 
+### AlertModal
+
+```tsx
+import { AlertModal, Button } from '@7onic-ui/react'
+
+<AlertModal>
+  <AlertModal.Trigger asChild>
+    <Button color="destructive">Delete</Button>
+  </AlertModal.Trigger>
+  <AlertModal.Portal>
+    <AlertModal.Overlay />
+    <AlertModal.Content size="sm">
+      <AlertModal.Header>
+        <AlertModal.Title>Delete item?</AlertModal.Title>
+        <AlertModal.Description>This action cannot be undone.</AlertModal.Description>
+      </AlertModal.Header>
+      <AlertModal.Body>Further confirmation details</AlertModal.Body>
+      <AlertModal.Footer>
+        <AlertModal.Cancel asChild><Button variant="outline">Cancel</Button></AlertModal.Cancel>
+        <AlertModal.Action asChild><Button color="destructive">Delete</Button></AlertModal.Action>
+      </AlertModal.Footer>
+    </AlertModal.Content>
+  </AlertModal.Portal>
+</AlertModal>
+```
+
+| Prop (Content) | Type | Default | Description |
+|---|---|---|---|
+| size | `'xs' \| 'sm'` | `'sm'` | AlertModal width (smaller than Modal by design) |
+
+**Sub-components:** AlertModal.Trigger, AlertModal.Portal, AlertModal.Overlay, AlertModal.Content, AlertModal.Header, AlertModal.Title, AlertModal.Description, AlertModal.Body, AlertModal.Footer, AlertModal.Action, AlertModal.Cancel
+
+**Required structure:** Portal → Overlay + Content (same as Modal). Use for destructive confirmations — renders as `role="alertdialog"` via Radix AlertDialog primitive. No close button by default (force user to Action or Cancel).
+
+---
+
 ### Drawer
 
 ```tsx
@@ -1151,8 +1239,8 @@ import { Tooltip } from '@7onic-ui/react'
 | variant | `'default' \| 'inverted'` | `'default'` | Dark/light bg |
 | size | `'sm' \| 'default'` | `'default'` | Padding scale |
 | side | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | Placement |
-| showArrow | `boolean` | `false` | Show arrow |
-| sideOffset | `number` | `4` | Gap from trigger |
+| showArrow | `boolean` | `true` | Show arrow |
+| sideOffset | `number` | `6` | Gap from trigger |
 
 **⚠️ Tooltip.Provider is required** — wrap your app or section with it.
 **Sub-components:** Tooltip.Provider, Tooltip.Trigger, Tooltip.Content, Tooltip.Arrow, Tooltip.Portal
@@ -1182,7 +1270,7 @@ import { Popover, Button } from '@7onic-ui/react'
 | variant | `'default' \| 'elevated'` | `'default'` | Shadow style |
 | size | `'sm' \| 'default' \| 'lg'` | `'default'` | Padding scale |
 | side | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` | Placement |
-| showArrow | `boolean` | `false` | Show arrow |
+| showArrow | `boolean` | `true` | Show arrow |
 | showClose | `boolean` | `false` | Show X button |
 
 **Sub-components:** Popover.Trigger, Popover.Content, Popover.Arrow, Popover.Close, Popover.Anchor, Popover.Portal
@@ -1263,9 +1351,9 @@ toast.dismiss()      // Dismiss all
 | size | `'sm' \| 'default' \| 'lg'` | `'default'` | Toast size |
 | duration | `number` | `4000` | Auto-dismiss ms (0 = persistent) |
 | closeButton | `boolean` | `false` | Show close button |
-| richColors | `boolean` | `false` | Filled color backgrounds |
+| richColors | `boolean` | `true` | Filled color backgrounds |
 | expand | `boolean` | `false` | Show all toasts expanded |
-| visibleToasts | `number` | `3` | Max visible at once |
+| visibleToasts | `number` | `5` | Max visible at once |
 
 **⚠️ No Portal needed.** Just place `<Toaster />` in your root layout. Call `toast()` from anywhere.
 
@@ -1371,7 +1459,7 @@ import { Breadcrumb } from '@7onic-ui/react'
 
 | Prop (Root) | Type | Default | Description |
 |---|---|---|---|
-| separator | `ReactNode` | `'/'` | Custom separator |
+| separator | `ReactNode` | `<ChevronRightIcon />` | Custom separator (default: chevron right icon) |
 | size | `'sm' \| 'default' \| 'lg'` | `'default'` | Text size |
 | maxItems | `number` | — | Collapse threshold |
 | itemsBeforeCollapse | `number` | `1` | Items before ellipsis |
@@ -1403,7 +1491,7 @@ import { Pagination } from '@7onic-ui/react'
 
 | Prop (Root) | Type | Default | Description |
 |---|---|---|---|
-| total | `number` | required | Total pages |
+| total | `number` | `1` | Total pages |
 | value | `number` | — | Controlled page |
 | defaultValue | `number` | `1` | Uncontrolled default |
 | onChange | `(page: number) => void` | — | Change handler |
@@ -1461,8 +1549,10 @@ import { NavigationMenu } from '@7onic-ui/react'
 | orientation | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout mode |
 | size | `'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | Item size |
 | collapsed | `boolean` | `false` | Icon-only mode (vertical) |
-| radius | Same as Button | `'default'` | Border radius |
+| radius | Same as Button | `'lg'` | Border radius |
 | fontWeight | `'normal' \| 'semibold'` | `'normal'` | Font weight |
+| delayDuration | `number` | `200` | Hover delay before content opens (horizontal only, ms) |
+| skipDelayDuration | `number` | `300` | Reset delay when moving between triggers (horizontal only, ms) |
 
 | Prop (Link) | Type | Default | Description |
 |---|---|---|---|
@@ -1470,6 +1560,15 @@ import { NavigationMenu } from '@7onic-ui/react'
 | icon | `ReactNode` | — | Leading icon |
 | asChild | `boolean` | `false` | Slot pattern |
 
+| Prop (Item) | Type | Default | Description |
+|---|---|---|---|
+| value | `string` | — | Identifier for controlled state (horizontal menus) |
+| defaultOpen | `boolean` | `false` | Initial open state for vertical collapsible item |
+
+| Prop (Indicator) | Type | Default | Description |
+|---|---|---|---|
+| color | `'default' \| 'primary'` | `'default'` | Indicator color (horizontal variant only) |
+
 **Sub-components:** NavigationMenu.List, NavigationMenu.Item, NavigationMenu.Trigger, NavigationMenu.Content, NavigationMenu.Link, NavigationMenu.Group (vertical only, with `label`), NavigationMenu.Indicator (horizontal only), NavigationMenu.Viewport
 
 ---
@@ -1555,6 +1654,11 @@ const chartConfig = {
 | label | `'none' \| 'outside' \| 'inside'` | `'none'` | Label display |
 | labelContent | `'value' \| 'percent'` | `'value'` | Label format |
 | activeShape | `boolean` | `true` | Expand on hover |
+| paddingAngle | `number` | `0` | Gap between slices (degrees) |
+| cornerRadius | `number` | `0` | Slice corner radius (px) |
+| startAngle | `number` | `90` | Start angle (degrees, 12 o'clock = 90) |
+| endAngle | `number` | `-270` | End angle (degrees, full circle = 90→-270) |
+| innerRadius | `number` | — | Override donut inner radius (default auto by variant) |
 
 **Chart Colors (CSS variables):**
 `--color-chart-1` (blue), `--color-chart-2` (pink), `--color-chart-3` (lavender), `--color-chart-4` (sky), `--color-chart-5` (rose)
@@ -1595,7 +1699,7 @@ import { MetricCard } from '@7onic-ui/react'
 |---|---|---|---|
 | variant | `'default' \| 'elevated' \| 'ghost'` | `'default'` | Visual style |
 | size | `'sm' \| 'default' \| 'lg'` | `'default'` | Padding scale |
-| radius | Same as Card + `'none'` | `'xl'` | Border radius |
+| radius | `'none' \| 'sm' \| 'base' \| 'default' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'default'` | Border radius |
 
 | Prop (Value) | Type | Default | Description |
 |---|---|---|---|

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@7onic-ui/react",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "private": false,
   "sideEffects": [
     "*.css"
   ],
-  "description": "React component library with automated design token pipeline — from Figma to code",
+  "description": "React component library where design and code never drift — automated Figma token pipeline",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -77,7 +77,7 @@
     "@radix-ui/react-tooltip": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "next-intl": "^4.9.0",
+    "next-intl": "^4.9.1",
     "tailwind-merge": "^2.3.0"
   },
   "peerDependencies": {
@@ -107,12 +107,13 @@
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lucide-react": "^0.400.0",
-    "next": "^15.0.0",
+    "next": "^15.5.15",
     "picocolors": "^1.1.1",
     "postcss": "^8.4.38",
     "prettier": "^3.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-is": "^18.3.1",
     "recharts": "^3.7.0",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",