@7onic-ui/react 0.2.0 → 0.2.2

package/README.md

@@ -24,7 +24,7 @@
 |:---:|---|---|
 | **🎯** | **Zero design-code drift** | Design and code from a single vision. No handoff, no drift — every component is pixel-verified against Figma. |
 | **📦** | **One JSON, every format** | `figma-tokens.json` auto-generates CSS, Tailwind v3, Tailwind v4, JS/TS, and JSON — all in sync. |
-| **🧩** | **shadcn freedom + MUI convenience** | Built-in `loading`, `leftIcon`, `pressEffect`, `Field` — no DIY. Override anything with `className`. |
+| **🧩** | **shadcn freedom + MUI convenience** | Built-in `toast.promise()`, `pressEffect`, namespace patterns — no DIY. `npx 7onic add` or `npm install` — same components, your workflow. |
 | **🔀** | **Only Tailwind v3+v4 dual support** | The ecosystem's only design system supporting both Tailwind versions. Same tokens, same DX. |
 | **🎮** | **Built-in playground** | Interactive props editor + live code generation in docs. No Storybook setup needed. |
 | **🌗** | **Dark mode, zero config** | Light/dark themes built into tokens. System preference detection out of the box. |
@@ -38,7 +38,12 @@
 ## Get Started
 
 ```bash
+# npm package
 npm install @7onic-ui/react @7onic-ui/tokens
+
+# or CLI (local copy)
+npx 7onic init
+npx 7onic add button card input
 ```
 
 <details>
@@ -94,6 +99,7 @@ Use components:
 
 ```tsx
 import { Button, Card } from '@7onic-ui/react'
+import { Chart, type ChartConfig } from '@7onic-ui/react/chart'  // charts: separate entry
 
 <Button variant="solid" color="primary">Get Started</Button>
 
@@ -175,6 +181,9 @@ Breaking changes are auto-detected with diff visualization. Backward-compatible
 | `dist/index.js` | CJS | CommonJS for Node.js / require() |
 | `dist/index.mjs` | ESM | ES Modules for bundlers / import |
 | `dist/index.d.ts` | Types | TypeScript definitions |
+| `dist/chart.js` | CJS | Chart components (separate entry — `@7onic-ui/react/chart`) |
+| `dist/chart.mjs` | ESM | Chart components ESM |
+| `dist/chart.d.ts` | Types | Chart TypeScript definitions |
 | `llms.txt` | Text | AI integration rules (llms.txt standard) |
 
 ### `@7onic-ui/tokens`
@@ -194,6 +203,14 @@ Breaking changes are auto-detected with diff visualization. Backward-compatible
 | `json/tokens.json` | Flat JSON for custom tooling |
 | `cli/sync.js` | `npx sync-tokens` CLI |
 | `figma-tokens.json` | SSOT — the only file you edit |
+| `llms.txt` | AI integration rules for tokens |
+
+### `7onic` (CLI)
+
+| File | Description |
+|------|-------------|
+| `dist/index.js` | Self-contained CLI bundle |
+| `llms.txt` | AI integration — CLI command reference |
 
 </details>
 
@@ -239,10 +256,10 @@ Works with Claude Code, Cursor, GitHub Copilot, ChatGPT, and any AI tool that re
 - [x] Automated doc verification (8 checks, AST-powered, blocks publish on error)
 - [x] Automated component verification (7 checks — hardcoded colors, tokens, dark mode, dead code)
 - [x] Multilingual documentation — English, Japanese, Korean (powered by next-intl)
-- [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.1.0
+- [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.2.0
 - [x] AI integration — `llms.txt` standard, setup guides for Claude Code / Cursor / Copilot / ChatGPT
 - [ ] Theme Customizer (live color preview)
-- [ ] `npx 7onic add` CLI (shadcn-style)
+- [x] `npx 7onic add` CLI (shadcn-style) — source copy with dependency resolution
 - [ ] Figma UI Kit
 - [ ] Dashboard / landing templates
 
@@ -257,5 +274,5 @@ MIT
 <p align="center">
   <strong>One JSON, every format — from Figma to production.</strong><br>
   Independently built.<br>
-  <sub>Last updated: 2026-04-08</sub>
+  <sub>Last updated: 2026-04-09</sub>
 </p>

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;