{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "widget-4",
  "dependencies": [
    "lucide-react",
    "recharts"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/widget-4.tsx",
      "content": "import * as React from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from \"recharts\";\n\nexport interface RevenueSource {\n  id: string;\n  label: string;\n  value: string;\n  numericValue: number;\n  colorClass: string;\n  fill?: string;\n  opacity?: number;\n}\n\nexport interface RevenueWidgetProps {\n  title?: string;\n  data?: RevenueSource[];\n}\n\nconst defaultData: RevenueSource[] = [\n  {\n    id: \"subscriptions\",\n    label: \"Subscriptions\",\n    value: \"12,450\",\n    numericValue: 12450,\n    colorClass: \"text-primary\",\n    fill: \"var(--primary)\",\n    opacity: 1,\n  },\n  {\n    id: \"one-time\",\n    label: \"One-time Sales\",\n    value: \"8,320\",\n    numericValue: 8320,\n    colorClass: \"text-primary/70\",\n    fill: \"var(--primary)\",\n    opacity: 0.7,\n  },\n  {\n    id: \"services\",\n    label: \"Services\",\n    value: \"4,110\",\n    numericValue: 4110,\n    colorClass: \"text-primary/40\",\n    fill: \"var(--primary)\",\n    opacity: 0.4,\n  },\n];\n\nexport function RevenueWidget({\n  title = \"Revenue Sources\",\n  data = defaultData,\n}: RevenueWidgetProps) {\n  const chartData = React.useMemo(() => {\n    const defaultFills = [\n      \"var(--primary)\",\n      \"var(--primary)\",\n      \"var(--primary)\",\n      \"var(--primary)\",\n    ];\n    const defaultOpacities = [1, 0.7, 0.4, 0.2];\n    return data.map((item, index) => ({\n      ...item,\n      fill: item.fill || defaultFills[index % defaultFills.length],\n      opacity:\n        item.opacity ?? defaultOpacities[index % defaultOpacities.length],\n    }));\n  }, [data]);\n\n  return (\n    <div className=\"bg-muted w-full max-w-sm rounded-[30px] p-2\">\n      <Card className=\"text-card-foreground w-full rounded-3xl px-2 shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04)] ring-0\">\n        <CardContent className=\"flex flex-col gap-2\">\n          <div className=\"\">\n            <h3 className=\"text-foreground text-center text-lg font-semibold sm:text-start\">\n              {title}\n            </h3>\n          </div>\n\n          <div className=\"flex flex-col items-center gap-4 sm:flex-row\">\n            <div className=\"relative h-28 w-28 flex-shrink-0 sm:h-32 sm:w-32\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <PieChart>\n                  <Pie\n                    data={chartData}\n                    cx=\"50%\"\n                    cy=\"50%\"\n                    innerRadius=\"70%\"\n                    outerRadius=\"100%\"\n                    paddingAngle={5}\n                    dataKey=\"numericValue\"\n                    stroke=\"none\"\n                    cornerRadius={4}\n                  >\n                    {chartData.map((entry, index) => (\n                      <Cell\n                        key={`cell-${entry.id || index}`}\n                        fill={entry.fill}\n                        fillOpacity={entry.opacity}\n                        className=\"cursor-pointer transition-all duration-300 outline-none hover:opacity-80\"\n                      />\n                    ))}\n                  </Pie>\n                  <Tooltip\n                    cursor={false}\n                    content={({ active, payload }) => {\n                      if (active && payload && payload.length) {\n                        return (\n                          <div className=\"border-border/50 bg-background/20 flex flex-col gap-1 rounded-lg border p-2 shadow-sm backdrop-blur-xl\">\n                            <span className=\"text-muted-foreground text-[0.70rem] font-semibold\">\n                              {payload[0].payload.label}\n                            </span>\n                            <span className=\"text-foreground text-sm font-medium\">\n                              {payload[0].payload.value}\n                            </span>\n                          </div>\n                        );\n                      }\n                      return null;\n                    }}\n                  />\n                </PieChart>\n              </ResponsiveContainer>\n            </div>\n\n            <div className=\"flex w-full flex-col gap-1\">\n              {chartData.map((item) => (\n                <div\n                  key={item.id}\n                  className=\"flex w-full cursor-default items-center justify-between gap-2\"\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div\n                      className={`size-3`}\n                      style={{ backgroundColor: item.fill }}\n                    />\n                    <span className=\"text-muted-foreground group-hover/item:text-foreground text-sm font-medium transition-colors duration-300\">\n                      {item.label}\n                    </span>\n                  </div>\n                  <span className=\"text-foreground text-md font-semibold tabular-nums\">\n                    {item.value}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/widget-4.tsx"
    }
  ],
  "type": "registry:ui"
}