@7onic-ui/react 0.1.0 → 0.2.0

package/README.md

@@ -1,73 +1,63 @@
-# [7onic Design System](https://7onic.design)
+<h1 align="center"><a href="https://7onic.design">7onic Design System</a></h1>
 
-> **🚀 First npm release coming April 2026**
+<p align="center">
+  <strong>Just take a look. Don't say I didn't warn you.</strong>
+</p>
 
-One JSON, every format. AI-optimized design system with Figma-synced token pipeline — accessible React components on Radix UI, and the ecosystem's only Tailwind v3+v4 dual support.
+<p align="center">
+  <a href="https://www.npmjs.com/package/@7onic-ui/react"><img src="https://img.shields.io/npm/v/@7onic-ui/react?color=37D8E6&label=react" alt="npm react" /></a>
+  <a href="https://www.npmjs.com/package/@7onic-ui/tokens"><img src="https://img.shields.io/npm/v/@7onic-ui/tokens?color=37D8E6&label=tokens" alt="npm tokens" /></a>
+  <a href="https://github.com/itonys/7onic/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT License" /></a>
+  <a href="https://7onic.design"><img src="https://img.shields.io/badge/docs-7onic.design-black" alt="Documentation" /></a>
+</p>
 
----
+<p align="center">
+  Open-source React design system where design and code never drift.<br>
+  Single source of truth from Figma tokens, designer-verified components on Radix UI.
+</p>
 
-## Features
+---
 
-- **Figma-Synced Token Pipeline** — Single source of truth. One JSON powers CSS, Tailwind, JS, and TypeScript
-- **Only Tailwind v3+v4 Dual Support** — The ecosystem's only design system supporting both versions
-- **AI-Optimized Components** — Structured for AI coding tools (Claude, Copilot) with predictable patterns
-- **Namespace + Named Exports** — Both `<Card.Header>` and `<CardHeader>` work. Use whichever you prefer
-- **100% TypeScript** — Full type safety with IntelliSense support
-- **Dark Mode Built-in** — Light/dark themes with system preference detection
-- **Radix UI Primitives** — Accessible, keyboard-navigable components out of the box
-- **Charts Included** — Bar, Line, Area, Pie, MetricCard with design token integration
-- **Tokens-only Distribution** — Use CSS variables without Tailwind or React
-- **Zero Runtime CSS** — No CSS-in-JS runtime overhead. Pure Tailwind classes
-- **Multilingual** — English, Japanese, Korean with automatic locale detection
+## Why 7onic?
+
+| | What | Why it matters |
+|:---:|---|---|
+| **🎯** | **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`. |
+| **🔀** | **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. |
+| **🔓** | **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. |
+| **🔥** | **Relentlessly updated** | Actively maintained with continuous research, refinement, and new features. Not abandoned — ever. |
 
 ---
 
-## Quick Start
-
-### Components + Tokens
+## Get Started
 
 ```bash
 npm install @7onic-ui/react @7onic-ui/tokens
 ```
 
-```tsx
-// Standalone components
-import { Button } from '@7onic-ui/react'
-
-<Button>Get Started</Button>
-<Button variant="solid" color="primary">Primary</Button>
-
-// Compound components — namespace (recommended)
-import { Card } from '@7onic-ui/react'
-
-<Card>
-  <Card.Header>
-    <Card.Title>Settings</Card.Title>
-  </Card.Header>
-  <Card.Content>...</Card.Content>
-</Card>
-
-// Compound components — named exports (also supported)
-import { Card, CardHeader, CardTitle, CardContent } from '@7onic-ui/react'
-```
-
-#### Tailwind v4
+<details>
+<summary><strong>Tailwind v4</strong></summary>
 
 ```css
 @import "tailwindcss";
-
 @import '@7onic-ui/tokens/tailwind/v4.css';
-
 @source "../node_modules/@7onic-ui/react/dist";
 ```
+</details>
 
-#### Tailwind v3
+<details>
+<summary><strong>Tailwind v3</strong></summary>
 
 ```css
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 @import '@7onic-ui/tokens/css/all.css';
 ```
 
@@ -75,52 +65,13 @@ import { Card, CardHeader, CardTitle, CardContent } from '@7onic-ui/react'
 // tailwind.config.js
 module.exports = {
   presets: [require('@7onic-ui/tokens/tailwind/v3-preset')],
-  content: [
-    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
-  ],
+  content: ['./node_modules/@7onic-ui/react/dist/**/*.{js,mjs}'],
 }
 ```
+</details>
 
-#### Body Style
-
-```html
-<body class="bg-background text-foreground">
-```
-
-<br>
-
-### Tokens Only
-
-```bash
-npm install @7onic-ui/tokens
-```
-
-#### Tailwind v4
-
-```css
-@import "tailwindcss";
-
-@import '@7onic-ui/tokens/tailwind/v4.css';
-```
-
-#### Tailwind v3
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@import '@7onic-ui/tokens/css/all.css';
-```
-
-```js
-// tailwind.config.js
-module.exports = {
-  presets: [require('@7onic-ui/tokens/tailwind/v3-preset')],
-}
-```
-
-#### CSS Only
+<details>
+<summary><strong>CSS only (no Tailwind, no React)</strong></summary>
 
 ```css
 @import '@7onic-ui/tokens/css/all.css';
@@ -131,66 +82,29 @@ module.exports = {
   border-radius: var(--radius-md);
 }
 ```
+</details>
 
-#### JavaScript / TypeScript
+Apply base theme colors to `<body>` — enables dark mode and consistent backgrounds:
 
-```ts
-import { colors, spacing, typography } from '@7onic-ui/tokens'
+```html
+<body class="bg-background text-foreground">
 ```
 
----
-
-## Package Structure
+Use components:
 
-### `@7onic-ui/react` — Component Library
+```tsx
+import { Button, Card } from '@7onic-ui/react'
 
-| File | Format | Description |
-|------|--------|-------------|
-| `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 |
+<Button variant="solid" color="primary">Get Started</Button>
 
-```ts
-import { Button, Card, Modal } from '@7onic-ui/react'
+<Card>
+  <Card.Header>
+    <Card.Title>Settings</Card.Title>
+  </Card.Header>
+  <Card.Content>...</Card.Content>
+</Card>
 ```
 
-### `@7onic-ui/tokens` — Design Tokens
-
-**CSS Variables** — Use with any framework or vanilla CSS
-
-| File | Description |
-|------|-------------|
-| `css/all.css` | All-in-one bundle (variables + light + dark) ⭐ |
-| `css/variables.css` | Primitive tokens only |
-| `css/themes/light.css` | Light theme semantics |
-| `css/themes/dark.css` | Dark theme semantics |
-
-**Tailwind Presets** — Drop-in presets for v3 and v4
-
-| File | Description |
-|------|-------------|
-| `tailwind/v4.css` | All-in-one Tailwind v4 (theme + variables) ⭐ |
-| `tailwind/v3-preset.js` | Tailwind v3 preset for `tailwind.config.js` |
-| `tailwind/v4-theme.css` | Tailwind v4 `@theme` definitions |
-
-**JavaScript / TypeScript / JSON**
-
-| File | Description |
-|------|-------------|
-| `js/index.js` | CJS export |
-| `js/index.mjs` | ESM export |
-| `types/index.d.ts` | TypeScript definitions |
-| `json/tokens.json` | Flat JSON for custom tooling |
-
-**CLI**
-
-| File | Description |
-|------|-------------|
-| `cli/sync.js` | `npx sync-tokens` — regenerate all files from source |
-| `figma-tokens.json` | **SSOT** — the only file you edit |
-
-> All 9 distribution files + 2 convenience bundles are auto-generated from `figma-tokens.json` via `npx sync-tokens`.
-
 ---
 
 ## Components
@@ -199,37 +113,31 @@ import { Button, Card, Modal } from '@7onic-ui/react'
 |----------|-----------|:-----:|
 | **Forms** | Button, IconButton, ButtonGroup, Input, Textarea, Select, Dropdown, Checkbox, Radio, Switch, Toggle, ToggleGroup, Segmented, Slider | 14 |
 | **Data Display** | Avatar, Badge, Card, Table | 4 |
-| **Chart** | BarChart, LineChart, AreaChart, PieChart, MetricCard | 5 |
+| **Charts** | BarChart, LineChart, AreaChart, PieChart, MetricCard | 5 |
 | **Layout** | Tabs, Accordion, Divider | 3 |
 | **Overlay** | Modal, Drawer, Tooltip, Popover | 4 |
 | **Feedback** | Alert, Toast, Progress, Spinner, Skeleton | 5 |
 | **Navigation** | Breadcrumb, NavigationMenu, Pagination | 3 |
 
-**38 components** ready. All follow these patterns:
-
-- CVA (class-variance-authority) for variant management
-- Controlled & uncontrolled modes
-- `forwardRef` for ref forwarding
-- `'use client'` directive
-- Namespace compound export (`Card.Header`) + backward-compatible named exports (`CardHeader`)
+**38 components** — all with CVA variants, controlled + uncontrolled modes, `forwardRef`, namespace exports (`Card.Header`) + named exports (`CardHeader`).
 
 ---
 
-## Design Tokens
+## Design Tokens — 14 Categories
 
 | Token | Values | Description |
 |-------|--------|-------------|
 | **Colors** | Semantic system | Brand, status, text, background, border |
 | **Typography** | 11 sizes (11–72px) | CJK-optimized: `md`(14px) for UI, `base`(16px) for body |
 | **Spacing** | 18 values (0–96px) | 2px steps (0–12px), 4px steps (12px+) |
-| **Radius** | 9 values (0–9999px) | `none` through `full` |
+| **Radius** | 9 values | `none` through `full` |
 | **Shadows** | 6 primitives | `xs` through `xl` + `primary-glow` |
-| **Duration** | 8 values (0–1000ms) | `instant` through `spin` |
-| **Easing** | 5 functions | `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out` |
+| **Duration** | 8 values | `instant` through `spin` |
+| **Easing** | 5 functions | `linear` through `ease-in-out` |
 | **Z-Index** | 13 layers | `0` through `toast`(3000) |
 | **Icon Sizes** | 6 sizes (12–32px) | `2xs` through `xl` |
-| **Opacity** | 21 values (0–1) | 5% increments |
-| **Animation** | 54 named (1:1) | Component enter/exit, spin, skeleton, progress |
+| **Opacity** | 21 values | 5% increments |
+| **Animation** | 54 keyframes | Component enter/exit, spin, skeleton, progress |
 | **Breakpoints** | 5 widths | `sm`(640) through `2xl`(1536) |
 | **Border Width** | 5 values | `0`, `1`, `2`, `4`, `8` |
 | **Scale** | 4 values | `50`, `75`, `95`, `pressed`(0.98) |
@@ -239,38 +147,83 @@ import { Button, Card, Modal } from '@7onic-ui/react'
 ## Token Pipeline
 
 ```
-figma-tokens.json                    ← SSOT (only file you edit)
+figma-tokens.json                    ← SSOT (the only file you edit)
     │
     │  npx sync-tokens
     │
     ├── css/variables.css            ← CSS variables (all primitives)
     ├── css/themes/light.css         ← Light theme semantics
     ├── css/themes/dark.css          ← Dark theme semantics
-    ├── css/all.css                  ← Bundle (variables + light + dark)
+    ├── css/all.css                  ← All-in-one bundle
     ├── tailwind/v3-preset.js        ← Tailwind v3 preset
     ├── tailwind/v4-theme.css        ← Tailwind v4 theme
-    ├── tailwind/v4.css              ← Bundle (theme + variables)
+    ├── tailwind/v4.css              ← Tailwind v4 bundle
     ├── js/index.js + .mjs           ← JavaScript / ESM
     ├── types/index.d.ts             ← TypeScript definitions
     └── json/tokens.json             ← Flat JSON
 ```
 
-CLI supports `--dry-run`, `--force`, `--input`, `--output` flags. Breaking changes are auto-detected with diff visualization and backward-compatible aliases.
+Breaking changes are auto-detected with diff visualization. Backward-compatible aliases generated automatically.
+
+<details>
+<summary><strong>Package structure</strong></summary>
+
+### `@7onic-ui/react`
+
+| File | Format | Description |
+|------|--------|-------------|
+| `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 |
+| `llms.txt` | Text | AI integration rules (llms.txt standard) |
+
+### `@7onic-ui/tokens`
+
+| File | Description |
+|------|-------------|
+| `css/all.css` | All-in-one bundle (variables + light + dark) |
+| `css/variables.css` | Primitive tokens only |
+| `css/themes/light.css` | Light theme semantics |
+| `css/themes/dark.css` | Dark theme semantics |
+| `tailwind/v4.css` | All-in-one Tailwind v4 |
+| `tailwind/v3-preset.js` | Tailwind v3 preset |
+| `tailwind/v4-theme.css` | Tailwind v4 theme definitions |
+| `js/index.js` | CJS export |
+| `js/index.mjs` | ESM export |
+| `types/index.d.ts` | TypeScript definitions |
+| `json/tokens.json` | Flat JSON for custom tooling |
+| `cli/sync.js` | `npx sync-tokens` CLI |
+| `figma-tokens.json` | SSOT — the only file you edit |
+
+</details>
+
+---
+
+## AI Integration
+
+7onic ships with `llms.txt` — an open standard that lets AI tools build with design tokens instead of hardcoded values.
+
+```
+# In CLAUDE.md, .cursor/rules, or copilot-instructions.md
+Rules: node_modules/@7onic-ui/react/llms.txt
+```
+
+Once loaded, AI automatically uses `bg-primary` instead of `bg-blue-500`, spacing tokens instead of arbitrary pixels, and skips unnecessary `dark:` prefixes.
+
+Works with Claude Code, Cursor, GitHub Copilot, ChatGPT, and any AI tool that reads text files.
+
+**Setup guides**: [Tokens](https://7onic.design/design-tokens/ai) · [Components](https://7onic.design/components/ai)
 
 ---
 
 ## Tech Stack
 
-| | |
+| Category | Technology |
 |---|---|
-| **Framework** | Next.js 14 + React 18 |
-| **Language** | TypeScript 5 |
 | **Styling** | Tailwind CSS v3 / v4 + CSS Variables |
 | **Primitives** | Radix UI |
 | **Charts** | Recharts |
-| **Tokens** | Figma Token Studio → `sync-tokens` |
 | **Variants** | class-variance-authority (CVA) |
-| **Build** | tsup (library), Next.js (docs) |
 
 ---
 
@@ -286,13 +239,12 @@ CLI supports `--dry-run`, `--force`, `--input`, `--output` flags. Breaking chang
 - [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)
-- [ ] npm package distribution (April 2026)
+- [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.1.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)
 - [ ] Figma UI Kit
 - [ ] Dashboard / landing templates
-- [ ] AI integration guide — `llms.txt` hosting + tool-specific rule files (Claude / Cursor / Copilot)
-- [ ] `/7onic-demo` Claude Code skill — build a full service with zero hardcoding, guided setup
 
 ---
 
@@ -303,5 +255,7 @@ MIT
 ---
 
 <p align="center">
-  <strong>One JSON, every format — from Figma to production.</strong>
+  <strong>One JSON, every format — from Figma to production.</strong><br>
+  Independently built.<br>
+  <sub>Last updated: 2026-04-08</sub>
 </p>

package/dist/chart.d.mts

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+type ChartContextProps = {
+    config: ChartConfig;
+    hoverFade: boolean;
+    activeIndex: number | null;
+    setActiveIndex: (index: number | null) => void;
+    activeDataKey: string | null;
+    setActiveDataKey: (key: string | null) => void;
+};
+declare function useChart(): ChartContextProps;
+declare function ChartContainer({ id, className, children, config, hoverFade, ...props }: React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    /** Enable hover-to-highlight: hovered bar group stays full opacity, others fade. */
+    hoverFade?: boolean;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element;
+type ChartBarRadius = 'none' | 'sm' | 'base' | 'md' | 'lg';
+type ChartBarVariant = 'solid' | 'outline';
+type ChartBarProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Bar>, 'radius'> & {
+    /** Named radius token. Auto-adapts corners based on layout and stack position. */
+    radius?: ChartBarRadius;
+    /** 'horizontal' rounds the right side (away from Y-axis). Default: 'vertical' */
+    layout?: 'vertical' | 'horizontal';
+    /** 'bottom' rounds the bottom corners (base of a stack). Default: 'top' */
+    stackPosition?: 'top' | 'bottom';
+    /** 'outline' renders a thick border with a semi-transparent fill. Default: 'solid' */
+    variant?: ChartBarVariant;
+};
+declare function ChartBar({ radius, layout, stackPosition, variant, fill, stackId, ...props }: ChartBarProps): React.JSX.Element;
+declare function ChartTooltip(props: React.ComponentProps<typeof RechartsPrimitive.Tooltip>): React.JSX.Element;
+type TooltipPayloadItem = {
+    dataKey?: string | number;
+    name?: string;
+    value?: number | string;
+    type?: string;
+    color?: string;
+    payload?: Record<string, unknown>;
+    fill?: string;
+};
+type ChartTooltipContentProps = React.ComponentProps<'div'> & {
+    active?: boolean;
+    payload?: TooltipPayloadItem[];
+    label?: string;
+    labelFormatter?: (value: unknown, payload: TooltipPayloadItem[]) => React.ReactNode;
+    labelClassName?: string;
+    formatter?: (value: unknown, name: string, item: TooltipPayloadItem, index: number, payload: Record<string, unknown>) => React.ReactNode;
+    color?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    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>;
+type LegendPayloadItem = {
+    value?: string;
+    type?: string;
+    color?: string;
+    dataKey?: string;
+};
+type ChartLegendContentProps = React.ComponentProps<'div'> & {
+    payload?: LegendPayloadItem[];
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    align?: 'left' | 'center' | 'right';
+    /** Recharts passes layout when Legend uses layout prop */
+    layout?: 'horizontal' | 'vertical';
+    hideIcon?: boolean;
+    nameKey?: string;
+};
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, align, layout, nameKey, }: ChartLegendContentProps): React.JSX.Element | null;
+type ChartXAxisProps = React.ComponentProps<typeof RechartsPrimitive.XAxis>;
+type ChartYAxisProps = React.ComponentProps<typeof RechartsPrimitive.YAxis>;
+declare function ChartXAxis({ tick, padding, ...props }: ChartXAxisProps): React.JSX.Element;
+declare function ChartYAxis({ tick, width, ...props }: ChartYAxisProps): React.JSX.Element;
+type ChartLineType = 'linear' | 'monotone' | 'step' | 'natural';
+type ChartLineVariant = 'solid' | 'dashed';
+type ChartLineProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Line>, 'type' | 'dot' | 'activeDot'> & {
+    /** Curve interpolation type. Default: 'monotone' */
+    type?: ChartLineType;
+    /** Line style. 'dashed' applies stroke-dasharray. Default: 'solid' */
+    variant?: ChartLineVariant;
+    /** Show data point dots. Default: true */
+    dot?: boolean;
+    /** Show highlighted dot on hover. Default: true */
+    activeDot?: boolean;
+};
+declare function ChartLine({ type, variant, dot: showDot, activeDot: showActiveDot, stroke, dataKey, ...props }: ChartLineProps): React.JSX.Element;
+type ChartAreaType = 'linear' | 'monotone' | 'step' | 'natural';
+type ChartAreaVariant = 'solid' | 'gradient';
+type ChartAreaProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Area>, 'type' | 'dot' | 'activeDot'> & {
+    /** Curve interpolation type. Default: 'monotone' */
+    type?: ChartAreaType;
+    /** Fill style. 'gradient' auto-generates an SVG linearGradient. Default: 'solid' */
+    variant?: ChartAreaVariant;
+    /** Show data point dots. Default: true */
+    dot?: boolean;
+    /** Show highlighted dot on hover. Default: true */
+    activeDot?: boolean;
+    /** Fill opacity for this area (0–1). Default: 0.4 */
+    fillOpacity?: number;
+};
+declare function ChartArea({ type, variant, dot: showDot, activeDot: showActiveDot, fillOpacity, stroke, fill, dataKey, ...props }: ChartAreaProps): React.JSX.Element;
+type ChartPieVariant = 'pie' | 'donut';
+type ChartPieLabel = 'none' | 'outside' | 'inside';
+type ChartPieLabelContent = 'value' | 'percent';
+type ChartPieProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Pie>, 'label' | 'labelLine' | 'activeShape'> & {
+    /** 'donut' applies innerRadius automatically. Default: 'pie' */
+    variant?: ChartPieVariant;
+    /** Label position. Default: 'none' */
+    label?: ChartPieLabel;
+    /** Label display content. Default: 'value' */
+    labelContent?: ChartPieLabelContent;
+    /** Hover expand effect. Default: true */
+    activeShape?: boolean;
+    /** Override inner radius (default: 0 for pie, 60 for donut) */
+    innerRadius?: number;
+    /** Padding angle between slices (degrees). Default: 0 */
+    paddingAngle?: number;
+    /** Corner radius for slices. Default: 0 */
+    cornerRadius?: number;
+};
+declare function ChartPie({ variant, label: labelMode, labelContent, activeShape: showActiveShape, innerRadius, paddingAngle, cornerRadius, startAngle, endAngle, ...props }: ChartPieProps): React.JSX.Element;
+declare const Chart: typeof ChartContainer & {
+    Bar: typeof ChartBar;
+    Line: typeof ChartLine;
+    Area: typeof ChartArea;
+    Pie: typeof ChartPie;
+    Tooltip: typeof ChartTooltip;
+    TooltipContent: typeof ChartTooltipContent;
+    Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+    LegendContent: typeof ChartLegendContent;
+    XAxis: typeof ChartXAxis;
+    YAxis: typeof ChartYAxis;
+    Style: ({ id, config }: {
+        id: string;
+        config: ChartConfig;
+    }) => React.JSX.Element;
+};
+
+export { Chart, ChartArea, type ChartAreaType, type ChartAreaVariant, ChartBar, type ChartBarRadius, type ChartBarVariant, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartLine, type ChartLineType, type ChartLineVariant, ChartPie, type ChartPieLabel, type ChartPieLabelContent, type ChartPieVariant, ChartStyle, ChartTooltip, ChartTooltipContent, ChartXAxis, ChartYAxis, useChart };