7onicDESIGN SYSTEM
19 Releases·Semantic Versioning

Changelog

Every update to @7onic-ui/react and @7onic-ui/tokens, documented.

v0.3.62026-04-29
@7onic-ui/react3 changes
Changed3
  • `llms.txt` — lucide-react clarification — Added explicit note that lucide-react is NOT a @7onic-ui/react dependency. 7onic components use inline SVG internally. Users who want lucide icons in their own app code must install separately: npm install lucide-react. Prevents confusion when following Icon Import Pattern examples in LLM-assisted workflows.
  • Installation guide page — Vite boilerplate cleanup section — Updated install documentation to clarify that npx 7onic init on a Vite project automatically removes the npm create vite default CSS boilerplate (src/index.css + src/App.css), with .bak backups preserved. Removed outdated assumption that postcss.config uses .cjs extension (official Vite scaffolding uses .js).
  • CLI `init` documentation — steps simplified (11 → 6) — The init flow documentation now presents 6 user-facing steps instead of 11 internal steps: (1) auto-detect framework/TypeScript/Tailwind, (2) Vite @/ alias setup, (3) base deps install, (4) token CSS import, (5) boilerplate cleanup with .bak backup, (6) cn() utility + 7onic.json generation. Identical CLI behavior, clearer user-facing presentation.
@7onic-ui/tokens0 changes
v0.3.52026-04-28
@7onic-ui/tokens2 changes
Fixed2
  • Body Baseline `color` — Figma direct reference (SSOT) — html body { color } previously resolved through the --foreground Next.js compat alias (v0.3.4 workaround). Now references var(--color-text) directly, the Figma-defined token in themes/light.css (gray-900) and themes/dark.css (gray-100). Behavioral result identical (both produce the same color), but Figma SSOT is honored without alias indirection. Why this matters: variables.css is distributed standalone (Tailwind v3 users, no-Tailwind users) where --color-foreground (Tailwind v4 alias) is not defined; using --color-text guarantees the variable is defined in every supported import combination because themes/light.css + themes/dark.css always ship with variables.css.
  • `scripts/sync-tokens.ts` generator regression (v0.3.3 carry-over) — The internal generator was still emitting color: var(--color-foreground) (the original v0.3.3 bug). Output file variables.css had been manually patched in v0.3.4 to var(--foreground), but the generator was never synced. Re-running npm run sync-tokens would have silently regenerated variables.css with the v0.3.3 IACVT bug (light-mode invisible text under OS dark mode). Generator now emits var(--color-text), matching the output file. Verification: npm run sync-tokens after the fix reports 1 updated, 12 unchanged on first run, then 0 updated, 13 unchanged on subsequent runs (idempotent).
Note on v0.3.4 wording0
    @7onic-ui/react0 changes
    v0.3.42026-04-27
    @7onic-ui/tokens1 changes
    Fixed1
    • Body Baseline `color` typo — html body { color: var(--color-foreground) } referenced an undefined variable (--color-foreground does not exist; --foreground does). When OS is dark mode and the site forces light mode, the invalid declaration caused color to inherit the browser's system text color (white) from html:root { color-scheme: light dark }, making all text without an explicit color class invisible on light backgrounds. Fixed by correcting to var(--foreground).
    @7onic-ui/react1 changes
    Fixed1
    • `ChatMessage` flat variant — explicit `text-foreground` — getBubbleColors returned no text color class for variant="flat", relying on CSS inheritance. Consistent with the bubble variant (which always sets text-foreground), flat now explicitly sets text-foreground for all colors, making it self-contained regardless of parent context.
    v0.3.32026-04-24
    @7onic-ui/tokens2 changes
    Fixed1
    • Monospace font baseline — html body code, html body pre, html body kbd now explicitly set font-family: var(--font-family-mono). Prevents browser default monospace from overriding the token-defined mono font in documentation and code snippets.
    Improved1
    • `llms.txt` font baseline documentation — Added "Font baseline (automatic)" section explaining that variables.css auto-applies html body font-family-sans and code/pre/kbd font-family-mono. AI should not add manual body { font-family } rules.
    @7onic-ui/react2 changes
    Improved2
    • `llms.txt` font loading instructions — Per-framework detail for custom fonts (Next.js: next/font/google, Vite/Remix: Fontsource or CDN) and CJK font setup (noto-sans-jp/kr).
    • `llms.txt` Quick Reference Table note — Clarifies 40 table entries vs 42 documentation pages (4 chart types share one source; field is a form utility sub-component).
    v0.3.22026-04-23

    > **Critical patch** — Fixes v0.3.1 circular reference regression + Next.js font-family override + Vite CLI auto-cleanup. Users on v0.3.1 must upgrade.

    @7onic-ui/react & @7onic-ui/tokens4 changes
    Fixed2
    • v0.3.1 circular CSS variable reference — variables.css had --foreground: var(--color-foreground) and Next.js @theme inline emitted --color-foreground: var(--foreground), creating an infinite loop that browsers resolve to unset. Fixed by Approach Z: single-direction chain — --foreground now points to --color-text (safe island variable) instead of --color-foreground. No breaking change for users.
    • Next.js 15 + Vite font-family override — Next.js create-next-app template ships with body { font-family: Arial, Helvetica, sans-serif } unlayered. Vite ships with :root { font-family: system-ui, Avenir, ... }. Both override our Inter token. Fixed by adding font-family: var(--font-family-sans) to existing html body baseline block in variables.css (specificity 0,0,2 > body 0,0,1).
    Changed2
    • tokens/css/reset.css — removed as separate file. The html body baseline (background-color, color, font-family, display, margin, etc.) is now embedded directly in variables.css at the end (Body Baseline section). Bundle files (all.css, tailwind/v4.css) no longer import reset.css. Users importing variables.css get the baseline automatically. Distribution file count: 12 → 11.
    • tokens/package.json exports — ./css/reset.css subpath export removed.
    @7onic/cli0 changes
    v0.3.12026-04-23

    > **Critical patch** — Fixes Next.js 15 + Vite framework template compatibility. All three issues were 100% reproducible on v0.3.0. Users on v0.3.0 should upgrade.

    @7onic-ui/react & @7onic-ui/tokens11 changes
    Fixed3
    • Next.js 15 + Tailwind v4 light/dark mode broken — compiled CSS showed .bg-background { background-color: var(--background) } referencing Next.js template variable (OS dark mode forced #0a0a0a) instead of our token. data-theme="light" toggle was silently overridden. Fixed by html:root alias in variables.css — cascade specificity wins regardless of source order.
    • Vite + Tailwind v4/v3 body layout broken — Vite template's body { display: flex; place-items: center; min-width: 320px } force-centered all content. Fixed by html body baseline in new reset.css — overrides with higher specificity.
    • Vite + Tailwind v3 UI not rendering — CLI CSS_V3_IMPORTS was missing @tailwind base/components/utilities directives, so v3 generated zero utility classes. Fixed by adding directives to CLI v3 imports (see 7onic CLI 0.1.10).
    Added4
    • tokens/css/reset.css — new bundled file. Framework template baseline. Applies html body { background-color; color; display:block; place-items:initial; min-width:auto; margin:0 }. Bundled into all.css and tailwind/v4.css — users importing either bundle automatically get the reset. Selector specificity (0,0,2) > body (0,0,1) wins over Vite/Next.js template defaults. Override paths: (1) Tailwind class on <body> — .flex (0,1,0) wins, (2) same-selector CSS after our import — source order wins, (3) skip bundle + import individual files for complete opt-out.
    • tokens/css/variables.css — html:root { --background: var(--color-background); --foreground: var(--color-foreground) } alias block appended at end. Specificity (0,1,1) wins over Next.js default :root { --background: #fff } (0,1,0) without source order dependency. Makes Next.js's @theme inline { --color-background: var(--background) } convention automatically flow through our semantic tokens.
    • tokens/package.json exports — ./css/reset.css subpath export added.
    • Distribution file count: 11 → 12 (reset.css added).
    Changed2
    • npx sync-tokens (and internal npm run sync-tokens) now shows per-file status after generation: (NEW) for files created for the first time, (updated) for files whose content changed, (unchanged) for identical regenerations. Top-line summary also shows counts — ✅ sync-tokens complete: 1 new, 3 updated, 10 unchanged. Makes v0.3.0 → v0.3.1 upgrade transparent (users see reset.css (NEW) + bundle files (updated)) and alerts users who modified generated files directly (against the "Never modify generated files" rule) before their changes get overwritten. Info-level log only — no prompt added (follows npm / cargo / pip convention for additive changes). Breaking Changes (W3 — removed or renamed CSS variables) still prompt y/n as before.
    • @7onic-ui/react — no code changes; version bumped to maintain sync with @7onic-ui/tokens.
    Architecture Decision1
    • New ADR docs/decisions/NEXTJS-FRAMEWORK-COMPAT-STRATEGY.md — documents the problem mechanism (@theme inline override cascade), 6 considered alternatives, chosen solution, 4-scenario CSS cascade proof, and industry comparison (shadcn/HeroUI/Radix/Mantine/Chakra/DaisyUI).
    Why this is uniquely 7onic1
    • Industry first combination of 4 properties simultaneously: zero-config install (import → done), no React Provider wrapper, preserves user's globals.css (no file replacement), and standard Tailwind naming (bg-background, text-foreground). No existing library satisfies all four — shadcn wipes globals.css, HeroUI/Radix require Provider + namespaced vars, Mantine/Chakra use CSS-in-JS.
    v0.3.02026-04-22
    @7onic-ui/react & @7onic-ui/tokens26 changes
    Breaking Changes4
    • Compound JSX removed — use Named imports. <Card.Header /> → <CardHeader />
    • TypeScript namespace types removed — Card.HeaderProps → CardHeaderProps
    • Applies to all 25 compound namespaces (Card, Modal, Drawer, Tabs, Accordion, etc.)
    • Rollback if needed: npm dist-tag add @7onic-ui/react@0.2.9 latest
    Migration3
    • import { Card, CardHeader, CardTitle } from '@7onic-ui/react'
    • <Card><CardHeader><CardTitle>...</CardTitle></CardHeader></Card>
    • Prefer dot-notation? Add a Compound Recipe wrapper in your project ('use client' required). All 25 wrappers documented in the migration ADR
    Why4
    • Same behavior everywhere — Named imports work identically in RSC, Client Components, Pages Router, Vite, CRA, CJS. Compound JSX previously broke inside Next.js App Router Server Components
    • Reliable tree-shaking — Named exports map 1:1 to dead-code elimination; only the sub-components you import ship to the bundle
    • Simpler maintenance — adding a sub-component is now one export, not three synchronized locations
    • AI-ready — AI tools no longer randomly emit compound syntax that crashes in RSC
    Source2
    • 24 compound component files rewritten as shadcn-style Named-export-only. No more Object.assign, namespace X {}, or runtime *Root aliases
    • Radix Dialog accessibility fix: added DialogTitle to 5 Modal sidebar examples that were missing it
    Fixed — Playground code output matches rendered JSX 1:15
    • Playground previously shipped unused imports. Dropdown simple menu imported 14 sub-components while using only 5. Users who copy-pasted got noUnusedLocals warnings
    • Import list now derived from the rendered JSX body at generation time. Generated code contains exactly the identifiers used — no more, no less
    • All 42 Playground pages refactored to this pattern. Over-imports are now structurally impossible
    • Chart pages had a mirror bug in the other direction — hardcoded { Chart } only, but rendered 6–8 sub-components. Imports now auto-grow with the JSX
    • Static example fixes: pagination usePagination hook missing useState; typing-indicator had unused useState; quick-reply icon / FAQ examples missing the 7onic import
    Verified3
    • End-to-end browser audit opens every docs page in Playwright, exercises the Playground tabs (JSX / Full / CLI) and the Code tab, captures every code block, and checks every import line against the surrounding code
    • 60 pages · 351+ import lines checked · 0 unused · 0 under-import
    • Sample outputs compile cleanly with tsc strict + noUnusedLocals
    Docs cleanup3
    • Root llms.txt + public/llms*.txt: replaced the old "Compound Import Patterns" section with a concise "Component Import" + opt-in "Compound Recipe" section. ~47 lines shorter per file
    • Locale JSON files: removed 21 obsolete install keys, rewrote 200 dot-notation strings to Named, plus 24 locale-specific phrase updates
    • Installation docs: collapsed into a single "Import & Usage" card
    Architecture Decision Records2
    • New ADR: Named-Primary Migration — covers the rationale, keep/remove decisions, and all 25 Compound Recipe snippets
    • Previous ADR "Namespace Compound Export" marked Superseded (kept as v0.2.x historical record)
    @7onic/cli2 changes
    Changed2
    • Registry regenerated from the v0.3.0 Named-export source (40 components, 0 namespace blocks, 8 internal deps)
    • Added repository / bugs / homepage fields to cli/package.json for npm provenance
    v0.2.92026-04-22
    @7onic-ui/react1 changes
    Fixed — Next.js App Router RSC compatibility1
    • src/components/ui/index.ts: add top-level 'use client' directive; replace every export * from './X' with explicit export { Named, … } from './X' + export type { … } from './X' for types. Each of the 39 component files already carries 'use client', so per-component behaviour is unchanged — only the barrel was missing the directive.
    Docs0 changes
    @7onic-ui/tokens0 changes
    v0.2.82026-04-21
    @7onic-ui/react23 changes
    Fixed — `llms.txt` Props defaults audit23
    • Accordion: type (required → 'single'), collapsible (false → true)
    • Breadcrumb: separator ('/' → <ChevronRightIcon />)
    • ButtonGroup: attached (false → true)
    • Dropdown.Content: radius ('lg' → 'md')
    • MetricCard: radius ('xl' → 'default') with explicit 9-value options
    • Modal.Content: size ('md' → 'sm'), scrollBehavior ('inside' → 'outside')
    • NavigationMenu: radius ('default' → 'lg')
    • Popover.Content: showArrow (false → true)
    • Slider: showTooltip ('auto' → 'never')
    • Tabs.List: radius default ('default' → 'md'), options expanded 6 → 9 values
    • Toaster: richColors (false → true), visibleToasts (3 → 5)
    • Tooltip.Content: showArrow (false → true), sideOffset (4 → 6)
    • Pagination: total (required → 1)
    • NavigationMenu: delayDuration=200, skipDelayDuration=300
    • NavigationMenu.Item: defaultOpen=false (new sub-table)
    • NavigationMenu.Indicator: color='default' (new sub-table)
    • Pagination: withControls=true, withEdges=false + quick-mode example
    • Textarea: rows=4
    • Chart.Pie: paddingAngle=0, cornerRadius=0, startAngle=90, endAngle=-270, innerRadius
    • Toaster: offset=24, gap=8
    • Modal.Content: closeIcon
    • TableCell: align='left' (new sub-table)
    • Avatar.Fallback: colorized type boolean → string (source: colorized?: string)
    @7onic-ui/tokens0 changes
    v0.2.72026-04-16
    @7onic-ui/react2 changes
    Fixed2
    • input.tsx, textarea.tsx, select.tsx — add outline-transparent to prevent focus outline flash on Tailwind v4 (transition-colors now includes outline-color)
    • dropdown.tsx, select.tsx, modal.tsx, drawer.tsx, popover.tsx — add text-foreground to Portal content containers for correct dark mode text color
    v0.2.62026-04-16
    @7onic-ui/react1 changes
    Fixed1
    • pagination.tsx — withControls / withEdges props now work: when no children provided, auto-renders Previous/Next (withControls) and First/Last (withEdges) buttons. Compound mode (with children) is unchanged.
    v0.2.52026-04-15
    7onic (CLI)1 changes
    Fixed1
    • init — auto-configure @/ path alias for Vite projects: patches tsconfig.app.json (JSONC-safe) and vite.config.ts (adds import path + resolve.alias), installs @types/node as devDep automatically
    v0.2.42026-04-15
    @7onic-ui/react3 changes
    Fixed3
    • card.tsx — removed unused sizePaddingMap (caused noUnusedLocals error in Vite strict tsconfig)
    • pagination.tsx — withControls/withEdges extracted via rest pattern (caused noUnusedLocals error in Vite strict tsconfig)
    • toast.tsx — isPaused changed to [, setIsPaused] destructuring (caused noUnusedLocals error in Vite strict tsconfig)
    7onic (CLI)7 changes
    Fixed5
    • init — detect @/ path alias in tsconfig.app.json (Vite split tsconfig support)
    • init — auto-inject @import "tailwindcss" for Tailwind v4 (skip if already present)
    • init — improved Vite-specific warning message with both tsconfig.app.json and vite.config.ts guidance
    • add — auto-inject @source directive for Tailwind v4 CSS (relative path from CSS entry to components dir)
    • install-deps — add --ignore-engines flag for yarn install compatibility
    Added2
    • tsconfig.strict-check.json — consumer-environment tsc verification (noUnusedLocals: true)
    • smoke-test.sh — release smoke test script; 3 environments (Next.js 15 + TW v4 / Vite + TW v4 / Vite + TW v3), 7 scenarios each (init → add → build); runs via npm run smoke, auto-runs in prepublishOnly
    Documentation6 changes
    Added6
    • CLI page: Next.js / Vite framework selector in 7onic.json config example
    • CLI page: Vite note card under init section (tsconfig.app.json detection + @import "tailwindcss" auto-inject)
    • CLI page: Tailwind v4 + Vite note card under add section (@source auto-inject)
    • CLI page: Added 4 AI components to Available Components list (chat-input, chat-message, quick-reply, typing-indicator)
    • Token Installation Font tab: Japanese and Korean Fontsource filename now shows both Next.js and Vite paths
    • llms.txt: Vite Fontsource font setup pattern + @source auto-inject note
    v0.2.32026-04-11
    @7onic-ui/react6 changes
    Added4
    • TypingIndicator component — animated typing indicator with dots/cursor variants, 3 sizes, label support
    • QuickReply component — quick reply chip list with icon support, 3 sizes, compound pattern (QuickReply + QuickReply.Item)
    • ChatInput component — compound AI chat input with auto-resizing textarea, send/stop toggle, loading state, character count, 2 variants, 3 sizes, 6 radius options (ChatInput + ChatInput.Field + ChatInput.Submit)
    • ChatMessage component — compound AI chat message display with assistant/user roles, bubble/flat variants, typing animation, 4 delivery status options, hover actions, 3 sizes, 4 radius options (ChatMessage + ChatMessage.Avatar + ChatMessage.Content + ChatMessage.Footer)
    Fixed1
    • Documentation CSS examples: @import now correctly precedes @tailwind directives (CSS spec compliance)
    Removed1
    • Unused src/index.ts barrel file (build entry is src/components/ui/index.ts)
    @7onic-ui/tokens1 changes
    Added1
    • spacing-3.5 (14px / --spacing-3-5) — completes the 2px sub-grid for the 0–14px range
    v0.2.22026-04-10
    @7onic-ui/react1 changes
    Fixed1
    • peerDependencies — @7onic-ui/tokens range ^0.1.0 rejected tokens@0.2.x. Fixed to >=0.1.0 <1.0.0
    @7onic-ui/tokens0 changes
    v0.2.12026-04-09
    @7onic-ui/react1 changes
    Fixed1
    • llms.txt was shipping tokens-only guide instead of full component guide
    @7onic-ui/tokens0 changes
    v0.2.02026-04-08
    @7onic-ui/react2 changes
    Changed1
    • [Breaking] Chart components moved to separate entry point @7onic-ui/react/chart
    Added1
    • Pre-publish validation script (verify:publish) — tests actual npm pack + install + import
    @7onic-ui/tokens0 changes
    Migration Guide0 changes
    v0.1.12026-04-07
    @7onic-ui/react1 changes
    Added1
    • AI Integration: llms.txt included in npm package (llms.txt standard)
    @7onic-ui/tokens1 changes
    Added1
    • AI Integration: llms.txt included in npm package (llms.txt standard)
    Documentation4 changes
    Added3
    • AI Integration pages (/design-tokens/ai, /components/ai)
    • Setup guides for Claude Code, Cursor, GitHub Copilot, ChatGPT
    • llms.txt entry in Installation page Package Contents
    Changed1
    • README: added AI Integration section, updated AI-ready feature description
    v0.1.02026-04-04

    Initial release of 7onic Design System.

    @7onic-ui/react12 changes
    Components (38)7
    • Form: Button, IconButton, ButtonGroup, Toggle, ToggleGroup, Segmented, Checkbox, RadioGroup, Switch, Slider, Input, Textarea, Select, Dropdown
    • Data Display: Avatar, Badge, Card, Table
    • Chart: BarChart, LineChart, AreaChart, PieChart, MetricCard
    • Layout: Divider
    • Overlay: Modal, AlertModal, Drawer, Tooltip, Popover
    • Feedback: Alert, Toast, Progress, Spinner, Skeleton
    • Navigation: Breadcrumb, NavigationMenu, Pagination, Tabs, Accordion
    Features5
    • Namespace Export pattern for 22 compound components (Card.Header, Modal.Content, etc.)
    • Backward-compatible named exports maintained
    • Radix UI Primitives + CVA + forwardRef + Controlled/Uncontrolled
    • Default dark color (bg-foreground) across all components
    • 5-step size scale: xs(28) / sm(32) / md(36) / default(40) / lg(48)
    @7onic-ui/tokens11 changes
    Token Categories (18)6
    • Colors (72 primitive + semantic with text/tint)
    • Typography (11 sizes), FontWeight (3), FontFamily (2)
    • Spacing (18), BorderRadius (9), BorderWidth (5)
    • Shadows (6), IconSizes (6), ZIndex (13), Opacity (21)
    • Duration (8), Easing (5), Scale (4), Breakpoints (5)
    • ComponentSize (12), Animation (54), SemanticTypography (20)
    Features5
    • Automated token pipeline: figma-tokens.json → sync-tokens → 9 distribution files
    • Tailwind v3/v4 dual support with full opacity modifier (/50) via RGB channels
    • CSS variables, Tailwind v3 preset, Tailwind v4 theme, JS/ESM/TypeScript/JSON outputs
    • CLI tool: npx sync-tokens (--input / --output / --dry-run / --force)
    • Breaking change detection + deprecated alias generation