@7onic-ui/react 0.3.2 → 0.3.3

package/README.md

@@ -259,7 +259,7 @@ 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.3.2
+- [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.3.3
 - [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
@@ -288,5 +288,5 @@ MIT
 <p align="center">
   <strong>One JSON, every format — from Figma to production.</strong><br>
   Independently built.<br>
-  <sub>Last updated: 2026-04-23 (v0.3.2)</sub>
+  <sub>Last updated: 2026-04-24 (v0.3.3)</sub>
 </p>

package/llms.txt

@@ -53,8 +53,6 @@ npm install @7onic-ui/react @7onic-ui/tokens lucide-react
 @import "@7onic-ui/tokens/tailwind/v4-theme.css";
 ```
 
-> **Vite + Tailwind v4**: `npx 7onic init` auto-injects `@import "tailwindcss"` if not present, and automatically configures the `@/` path alias (patches `tsconfig.app.json` + `vite.config.ts`, installs `@types/node`). `npx 7onic add` auto-injects `@source "./components/ui"` (or relative path) so Tailwind scans your component files. No manual setup needed.
-
 **Existing project with Tailwind v3** (detect from tailwind.config.js):
 ```css
 /* globals.css */
@@ -77,16 +75,37 @@ module.exports = {
 }
 ```
 
-**2-3. Apply user's answers:**
+**2-3. Vite users only — clean up `src/index.css`:**
+
+Vite's default template generates CSS that overrides 7onic token styles. Two paths:
+
+- **CLI path (`npx 7onic init`) — recommended**: auto-handles all cleanup below, plus injects `@import "tailwindcss"` (v4), configures `@/` path alias (patches `tsconfig.app.json` + `vite.config.ts`, installs `@types/node`), and `npx 7onic add` auto-injects `@source "./components/ui"`. Prompts user, creates `.bak` backup.
+- **npm-only path (manual)**: delete the following blocks from `src/index.css`:
+  - `:root { font-family: system-ui, ... }` block
+  - `body { display: flex; place-items: center; ... }` block
+  - `button { background-color: #1a1a1a; ... }` block and all other element-level rules (`a { color: #646cff }`, etc.)
+  - `@media (prefers-color-scheme: light) { ... }` block
+
+  After deletion, `src/index.css` should contain only the token imports added in step 2-2. For v4 also add `@import "tailwindcss"` at the top, and configure `@/` alias manually.
+
+**2-4. 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`
+- Custom font → load font:
+  - **Next.js**: use `next/font/google`
+  - **Vite / Remix**: use Fontsource (`npm install @fontsource/inter`, then `import '@fontsource/inter/400.css'` in `src/main.tsx`) or Google Fonts CDN
+  - Then set `--font-family-sans` in CSS
 - Locale includes Japanese → load Noto Sans JP font
+  - Fontsource: `npm install @fontsource/noto-sans-jp` → import in `src/main.tsx` (Vite) or `app/layout.tsx` (Next.js)
+  - CDN: Google Fonts link tag in `index.html`
 - Locale includes Korean → load Noto Sans KR font
+  - Fontsource: `npm install @fontsource/noto-sans-kr` → import in `src/main.tsx` (Vite) or `app/layout.tsx` (Next.js)
+  - CDN: Google Fonts link tag in `index.html`
 
-**2-4. Verify setup is complete before writing any UI code:**
+**2-5. 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
+- [ ] globals.css / src/index.css has ALL required imports in correct order
+- [ ] (Vite only) Vite template CSS blocks deleted from src/index.css
 - [ ] Dark mode toggle (if selected)
 - [ ] Font loaded (if custom)
 - [ ] CJK fonts loaded (if applicable)
@@ -1883,6 +1902,8 @@ But if YOUR code uses React hooks (`useState`, `useEffect`) or event handlers (`
 
 ## Quick Reference Table
 
+> 40 entries below. 4 chart types (bar-chart, line-chart, area-chart, pie-chart) share one source — all listed as "Chart" here. Field is a form utility sub-component with no dedicated page. Total: 42 component pages on the docs site.
+
 | Component | Type | Variants | Sizes | Colors | Key Feature |
 |---|---|---|---|---|---|
 | Button | Standalone | solid/outline/ghost/link | xs/sm/md/default/lg | default/primary/secondary/destructive | loading, icons, press effect |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7onic-ui/react",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "private": false,
   "sideEffects": [
     "*.css"