@efiche/design 0.2.12 → 0.2.14

package/README.md

@@ -8,11 +8,6 @@ A pre-styled, accessible React component library. Components carry their own sty
 npm install @efiche/design
 ```
 
-> Add `recharts` too if you plan to use the chart components:
-> ```bash
-> npm install recharts
-> ```
-
 ---
 
 ## Setup
@@ -117,112 +112,6 @@ Override any `--ds-*` variable on `:root` (or `.ds-theme-dark` for dark mode) in
 
 ---
 
-## Charts
-
-Charts are built on top of [Recharts](https://recharts.org). Make sure it is installed:
-
-```bash
-npm install recharts
-```
-
-```tsx
-import { LineChart, BarChart, AreaChart, PieChart } from '@efiche/design'
-import { useTheme } from '@efiche/design'
-
-const { theme } = useTheme() // pass to charts for dark mode awareness
-```
-
-### LineChart
-
-```tsx
-// Single line
-<LineChart data={data} xKey="month" lines={[{ dataKey: 'value' }]} />
-
-// Multi-line with legend
-<LineChart
-  data={data}
-  xKey="month"
-  lines={[
-    { dataKey: 'revenue',  color: '#22c55e', label: 'Revenue' },
-    { dataKey: 'expenses', color: '#ef4444', label: 'Expenses' },
-  ]}
-  legend
-  theme={theme}
-/>
-```
-
-### BarChart
-
-```tsx
-// Single bar
-<BarChart data={data} xKey="month" bars={[{ dataKey: 'sales' }]} />
-
-// Stacked bars
-<BarChart
-  data={data}
-  xKey="month"
-  bars={[
-    { dataKey: 'online',  color: '#3b82f6', stackId: 'a', label: 'Online' },
-    { dataKey: 'offline', color: '#94a3b8', stackId: 'a', label: 'Offline' },
-  ]}
-  legend
-  theme={theme}
-/>
-```
-
-### AreaChart
-
-```tsx
-// Single area
-<AreaChart data={data} xKey="month" areas={[{ dataKey: 'visitors' }]} />
-
-// Stacked areas
-<AreaChart
-  data={data}
-  xKey="month"
-  areas={[
-    { dataKey: 'mobile',  color: '#3b82f6', stackId: '1', label: 'Mobile' },
-    { dataKey: 'desktop', color: '#22c55e', stackId: '1', label: 'Desktop' },
-  ]}
-  legend
-  theme={theme}
-/>
-```
-
-### PieChart
-
-```tsx
-// Pie
-<PieChart
-  data={[
-    { name: 'Direct', value: 400, fill: '#3b82f6' },
-    { name: 'Social', value: 300, fill: '#22c55e' },
-    { name: 'Email',  value: 200, fill: '#f59e0b' },
-  ]}
-  label
-/>
-
-// Donut with legend
-<PieChart data={pieData} donut legend theme={theme} />
-```
-
-### Chart props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `data` | `object[]` | required | Array of data objects |
-| `xKey` | `string` | required | Key used for the X axis *(LineChart, BarChart, AreaChart)* |
-| `lines` / `bars` / `areas` | `config[]` | required | Series definitions — see per-component docs above |
-| `data` | `{ name, value, fill? }[]` | required | Slice definitions *(PieChart)* |
-| `height` | `number` | `250` | Chart height in px |
-| `legend` | `boolean` | `false` | Show the legend |
-| `grid` | `boolean` | `true` | Show the background grid *(LineChart, BarChart, AreaChart)* |
-| `label` | `boolean` | `false` | Show percentage labels on slices *(PieChart)* |
-| `donut` | `boolean` | `false` | Hollow centre *(PieChart)* |
-| `theme` | `"light" \| "dark"` | `"light"` | Controls axis, grid, and tooltip colours |
-
----
-
 ## Components
 
 | Component | Import |
@@ -252,10 +141,6 @@ const { theme } = useTheme() // pass to charts for dark mode awareness
 | `Textarea` | `import { Textarea } from '@efiche/design'` |
 | `Tooltip` | `import { Tooltip } from '@efiche/design'` |
 | `ThemeProvider` | `import { ThemeProvider, useTheme } from '@efiche/design'` |
-| `LineChart` | `import { LineChart } from '@efiche/design'` |
-| `BarChart` | `import { BarChart } from '@efiche/design'` |
-| `AreaChart` | `import { AreaChart } from '@efiche/design'` |
-| `PieChart` | `import { PieChart } from '@efiche/design'` |
 
 ---