@7onic-ui/react 0.1.1 → 0.2.1

package/README.md

@@ -94,6 +94,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 +176,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 +198,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>
 
@@ -218,16 +230,12 @@ Works with Claude Code, Cursor, GitHub Copilot, ChatGPT, and any AI tool that re
 
 ## 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) |
 
 ---
 
@@ -243,19 +251,15 @@ 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
 
 ---
 
-## Contact
-
-hello@7onic.io
-
 ## License
 
 MIT
@@ -264,5 +268,6 @@ MIT
 
 <p align="center">
   <strong>One JSON, every format — from Figma to production.</strong><br>
-  Independently built.
+  Independently built.<br>
+  <sub>Last updated: 2026-04-09</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 };

package/dist/chart.d.ts

@@ -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 };