@turtleclub/ui 0.7.0-beta.32 → 0.7.0-beta.34

package/components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/styles/globals.css",
-    "baseColor": "gray",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}

package/src/components/charts/QUICK_REFERENCE.md

@@ -1,323 +0,0 @@
-# Chart Components - Quick Reference
-
-## Import
-
-```tsx
-import {
-  BarChart,
-  AreaChart,
-  PieChart,
-  RadialBarChart,
-  RadarChart,
-  type ChartConfig,
-} from "@turtleclub/ui";
-```
-
-## Bar Chart
-
-```tsx
-<BarChart
-  data={data} // Array of objects
-  config={config} // ChartConfig object
-  categoryKey="month" // X-axis key
-  dataKeys={["sales"]} // Data series keys
-  layout="horizontal" // "horizontal" | "vertical"
-  showGrid={true} // Show grid lines
-  showLegend={false} // Show legend
-  stacked={false} // Stack bars
-/>
-```
-
-## Area Chart
-
-```tsx
-<AreaChart
-  data={data}
-  config={config}
-  categoryKey="month"
-  dataKeys={["revenue"]}
-  curveType="monotone" // "linear" | "monotone" | "step" | etc.
-  fillOpacity={0.2} // 0-1
-  strokeWidth={2} // Line width
-  showDots={false} // Show data points
-  stacked={false}
-/>
-```
-
-## Pie Chart
-
-```tsx
-<PieChart
-  data={data}
-  config={config}
-  nameKey="category" // Segment name key
-  dataKey="value" // Value key
-  innerRadius={0} // 0 = pie, >0 = donut
-  outerRadius={80} // Radius percentage
-  paddingAngle={0} // Gap between segments
-  showLabels={false}
-  labelFormatter={(val) => `${val}%`}
-/>
-```
-
-## Radial Bar Chart
-
-```tsx
-<RadialBarChart
-  data={data}
-  config={config}
-  nameKey="metric"
-  dataKey="value"
-  innerRadius={30}
-  outerRadius={100}
-  startAngle={90}
-  endAngle={-270}
-  showLabels={false}
-  cornerRadius={10}
-/>
-```
-
-## Radar Chart
-
-```tsx
-<RadarChart
-  data={data}
-  config={config}
-  categoryKey="skill"
-  dataKeys={["current", "target"]}
-  fillOpacity={0.6}
-  strokeWidth={2}
-  showDots={true}
-/>
-```
-
-## ChartConfig Pattern
-
-```tsx
-const config = {
-  // Data series
-  sales: {
-    label: "Sales",
-    color: "var(--chart-1)",
-  },
-  revenue: {
-    label: "Revenue",
-    color: "var(--chart-2)",
-  },
-  // Categories (optional)
-  jan: {
-    label: "January",
-  },
-} satisfies ChartConfig;
-```
-
-## Theme Colors
-
-Use these in your config:
-
-- `var(--chart-1)` - Primary
-- `var(--chart-2)` - Secondary
-- `var(--chart-3)` - Tertiary
-- `var(--chart-4)` - Quaternary
-- `var(--chart-5)` - Quinary
-
-## Data Format
-
-```tsx
-// Bar/Area/Radar
-const data = [
-  { month: "Jan", sales: 100, revenue: 200 },
-  { month: "Feb", sales: 150, revenue: 250 },
-];
-
-// Pie/RadialBar
-const data = [
-  { category: "A", value: 30 },
-  { category: "B", value: 45 },
-];
-```
-
-## Common Props (All Charts)
-
-| Prop          | Type            | Default          |
-| ------------- | --------------- | ---------------- |
-| `data`        | `Array<object>` | Required         |
-| `config`      | `ChartConfig`   | Required         |
-| `showLegend`  | `boolean`       | `false`          |
-| `showTooltip` | `boolean`       | `true`           |
-| `className`   | `string`        | `undefined`      |
-| `aspectRatio` | `string`        | `"aspect-video"` |
-
-## With Card Wrapper
-
-```tsx
-<Card>
-  <CardHeader>
-    <CardTitle>Sales Chart</CardTitle>
-    <CardDescription>Monthly data</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <BarChart {...props} />
-  </CardContent>
-</Card>
-```
-
-## Multi-Series Example
-
-```tsx
-const data = [
-  { month: "Jan", desktop: 100, mobile: 50 },
-  { month: "Feb", desktop: 150, mobile: 75 },
-];
-
-const config = {
-  desktop: { label: "Desktop", color: "var(--chart-1)" },
-  mobile: { label: "Mobile", color: "var(--chart-2)" },
-} satisfies ChartConfig;
-
-<BarChart
-  data={data}
-  config={config}
-  categoryKey="month"
-  dataKeys={["desktop", "mobile"]}
-  showLegend={true}
-/>;
-```
-
-## Stacked Chart Example
-
-```tsx
-<AreaChart
-  data={data}
-  config={config}
-  categoryKey="month"
-  dataKeys={["revenue", "expenses"]}
-  stacked={true}
-  showLegend={true}
-/>
-```
-
-## Donut Chart Example
-
-```tsx
-<PieChart
-  data={data}
-  config={config}
-  nameKey="category"
-  dataKey="value"
-  innerRadius={60} // Creates donut hole
-  showLegend={true}
-/>
-```
-
-## Recharts Native Features
-
-### Conditional Bar Coloring
-
-```tsx
-<BarChart
-  data={data}
-  config={config}
-  categoryKey="month"
-  dataKeys={["sales"]}
-  getBarColor={(entry, index, dataKey) => {
-    return entry.sales > 200 ? "hsl(var(--destructive))" : undefined;
-  }}
-/>
-```
-
-### Gradient Fill
-
-```tsx
-<BarChart
-  data={data}
-  config={config}
-  categoryKey="month"
-  dataKeys={["sales"]}
-  gradient={true} // Uses native Recharts linearGradient
-/>
-```
-
-### Active Dots on Hover
-
-```tsx
-<AreaChart
-  data={data}
-  config={config}
-  categoryKey="month"
-  dataKeys={["revenue"]}
-  showDots={true}
-  activeDot={{ r: 6, strokeWidth: 2 }} // Native Recharts activeDot
-/>
-```
-
-### Radial Grid Lines
-
-```tsx
-<PieChart
-  data={data}
-  config={config}
-  nameKey="category"
-  dataKey="value"
-  showRadialGrid={true}
-  radialGridLines={12} // Uses native PolarGrid component
-/>
-```
-
-## Tips
-
-✅ Always use `satisfies ChartConfig` on config objects
-✅ Match `dataKeys` to actual keys in your data
-✅ Use theme colors for consistency
-✅ Enable legend for multi-series charts
-✅ Wrap in Card components for better presentation
-✅ Leverage native Recharts features (Cell, gradients, activeDot, etc.)
-
-❌ Don't hardcode colors - use theme variables
-❌ Don't forget to configure all data keys in config
-❌ Don't use too many series (max 5 recommended)
-
-## Full Example
-
-```tsx
-import { BarChart, Card, CardContent, CardHeader, CardTitle } from "@turtleclub/ui";
-import type { ChartConfig } from "@turtleclub/ui";
-
-const data = [
-  { month: "Jan", sales: 186 },
-  { month: "Feb", sales: 305 },
-  { month: "Mar", sales: 237 },
-];
-
-const config = {
-  sales: {
-    label: "Sales",
-    color: "var(--chart-1)",
-  },
-} satisfies ChartConfig;
-
-export function SalesChart() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Monthly Sales</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <BarChart
-          data={data}
-          config={config}
-          categoryKey="month"
-          dataKeys={["sales"]}
-          showGrid={true}
-        />
-      </CardContent>
-    </Card>
-  );
-}
-```
-
-## See Also
-
-- Full documentation: `README.md`
-- Live examples: `/components/charts` in showcase app
-- Implementation details: `IMPLEMENTATION_SUMMARY.md`