@7onic-ui/react 0.3.2 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/llms.txt +27 -6
- package/package.json +1 -1
package/llms.txt
CHANGED
|
@@ -53,8 +53,6 @@ npm install @7onic-ui/react @7onic-ui/tokens lucide-react
|
|
|
53
53
|
@import "@7onic-ui/tokens/tailwind/v4-theme.css";
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
-
> **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.
|
|
57
|
-
|
|
58
56
|
**Existing project with Tailwind v3** (detect from tailwind.config.js):
|
|
59
57
|
```css
|
|
60
58
|
/* globals.css */
|
|
@@ -77,16 +75,37 @@ module.exports = {
|
|
|
77
75
|
}
|
|
78
76
|
```
|
|
79
77
|
|
|
80
|
-
**2-3.
|
|
78
|
+
**2-3. Vite users only — clean up `src/index.css`:**
|
|
79
|
+
|
|
80
|
+
Vite's default template generates CSS that overrides 7onic token styles. Two paths:
|
|
81
|
+
|
|
82
|
+
- **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.
|
|
83
|
+
- **npm-only path (manual)**: delete the following blocks from `src/index.css`:
|
|
84
|
+
- `:root { font-family: system-ui, ... }` block
|
|
85
|
+
- `body { display: flex; place-items: center; ... }` block
|
|
86
|
+
- `button { background-color: #1a1a1a; ... }` block and all other element-level rules (`a { color: #646cff }`, etc.)
|
|
87
|
+
- `@media (prefers-color-scheme: light) { ... }` block
|
|
88
|
+
|
|
89
|
+
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.
|
|
90
|
+
|
|
91
|
+
**2-4. Apply user's answers:**
|
|
81
92
|
|
|
82
93
|
- Dark mode = yes → implement dark mode toggle (see below)
|
|
83
|
-
- Custom font → load font
|
|
94
|
+
- Custom font → load font:
|
|
95
|
+
- **Next.js**: use `next/font/google`
|
|
96
|
+
- **Vite / Remix**: use Fontsource (`npm install @fontsource/inter`, then `import '@fontsource/inter/400.css'` in `src/main.tsx`) or Google Fonts CDN
|
|
97
|
+
- Then set `--font-family-sans` in CSS
|
|
84
98
|
- Locale includes Japanese → load Noto Sans JP font
|
|
99
|
+
- Fontsource: `npm install @fontsource/noto-sans-jp` → import in `src/main.tsx` (Vite) or `app/layout.tsx` (Next.js)
|
|
100
|
+
- CDN: Google Fonts link tag in `index.html`
|
|
85
101
|
- Locale includes Korean → load Noto Sans KR font
|
|
102
|
+
- Fontsource: `npm install @fontsource/noto-sans-kr` → import in `src/main.tsx` (Vite) or `app/layout.tsx` (Next.js)
|
|
103
|
+
- CDN: Google Fonts link tag in `index.html`
|
|
86
104
|
|
|
87
|
-
**2-
|
|
105
|
+
**2-5. Verify setup is complete before writing any UI code:**
|
|
88
106
|
- [ ] Packages installed (@7onic-ui/react, @7onic-ui/tokens, lucide-react)
|
|
89
|
-
- [ ] globals.css has ALL required imports in correct order
|
|
107
|
+
- [ ] globals.css / src/index.css has ALL required imports in correct order
|
|
108
|
+
- [ ] (Vite only) Vite template CSS blocks deleted from src/index.css
|
|
90
109
|
- [ ] Dark mode toggle (if selected)
|
|
91
110
|
- [ ] Font loaded (if custom)
|
|
92
111
|
- [ ] CJK fonts loaded (if applicable)
|
|
@@ -1883,6 +1902,8 @@ But if YOUR code uses React hooks (`useState`, `useEffect`) or event handlers (`
|
|
|
1883
1902
|
|
|
1884
1903
|
## Quick Reference Table
|
|
1885
1904
|
|
|
1905
|
+
> 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.
|
|
1906
|
+
|
|
1886
1907
|
| Component | Type | Variants | Sizes | Colors | Key Feature |
|
|
1887
1908
|
|---|---|---|---|---|---|
|
|
1888
1909
|
| Button | Standalone | solid/outline/ghost/link | xs/sm/md/default/lg | default/primary/secondary/destructive | loading, icons, press effect |
|