@7onic-ui/react 0.2.7 → 0.2.8

package/README.md

@@ -33,6 +33,7 @@
 | **🔓** | **Framework-agnostic tokens** | Tokens ship as pure CSS variables. Use with Vue, Angular, Svelte, or vanilla CSS — no React required. |
 | **🤖** | **AI-ready** | Ships with `llms.txt` — AI builds with design tokens, not hardcoded values. Zero config for Claude, Cursor, Copilot. |
 | **🌏** | **CJK-first typography** | Type scale tuned for Japanese kanji, Korean hangul, and Latin — not an afterthought. |
+| **🔐** | **Supply chain verified** | Cryptographically signed releases (npm provenance), automated vulnerability scanning in CI, reproducible builds. You can verify every package came from this exact GitHub commit — not a hijacked account. |
 | **🔥** | **Relentlessly updated** | Actively maintained with continuous research, refinement, and new features. Not abandoned — ever. |
 
 ---
@@ -267,6 +268,8 @@ Works with Claude Code, Cursor, GitHub Copilot, ChatGPT, and any AI tool that re
 - [x] AI integration — `llms.txt` standard, setup guides for Claude Code / Cursor / Copilot / ChatGPT
 - [x] `npx 7onic add` CLI (shadcn-style) — source copy with dependency resolution
 - [x] `npx 7onic init` Vite support — `tsconfig.app.json` detection, `@import "tailwindcss"` + `@source` auto-inject, `@/` path alias auto-configure
+- [x] Technical blog — [blog.7onic.design](https://blog.7onic.design) ("Design to Code" series)
+- [x] Enterprise-grade supply chain security — cryptographically signed releases (npm provenance), automated vulnerability scanning on every build, reproducible installs. Protection against npm package hijacking attacks (like the 2026 axios incident)
 - [ ] Theme Customizer — live palette preview + CSS variable export
 - [ ] Figma UI Kit
 - [ ] Dashboard / landing templates

package/dist/chart.d.mts

@@ -74,7 +74,7 @@ type ChartTooltipContentProps = React.ComponentProps<'div'> & {
     labelKey?: string;
 };
 declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
-declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
 type LegendPayloadItem = {
     value?: string;
     type?: string;
@@ -150,7 +150,7 @@ declare const Chart: typeof ChartContainer & {
     Pie: typeof ChartPie;
     Tooltip: typeof ChartTooltip;
     TooltipContent: typeof ChartTooltipContent;
-    Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+    Legend: typeof RechartsPrimitive.Legend;
     LegendContent: typeof ChartLegendContent;
     XAxis: typeof ChartXAxis;
     YAxis: typeof ChartYAxis;

package/dist/chart.d.ts

@@ -74,7 +74,7 @@ type ChartTooltipContentProps = React.ComponentProps<'div'> & {
     labelKey?: string;
 };
 declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
-declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
 type LegendPayloadItem = {
     value?: string;
     type?: string;
@@ -150,7 +150,7 @@ declare const Chart: typeof ChartContainer & {
     Pie: typeof ChartPie;
     Tooltip: typeof ChartTooltip;
     TooltipContent: typeof ChartTooltipContent;
-    Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+    Legend: typeof RechartsPrimitive.Legend;
     LegendContent: typeof ChartLegendContent;
     XAxis: typeof ChartXAxis;
     YAxis: typeof ChartYAxis;

package/llms.txt

@@ -500,7 +500,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 +547,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 +603,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 +782,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 +854,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 +965,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 +996,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 +1021,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 +1083,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 +1093,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 +1192,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 +1223,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 +1304,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 +1412,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 +1444,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 +1502,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 +1513,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 +1607,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 +1652,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.8",
   "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",