{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "widget-3",
  "dependencies": [
    "lucide-react",
    "recharts"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/widget-3.tsx",
      "content": "\"use client\";\n\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\n\nexport interface SalesDataPoint {\n  day: string;\n  food: number;\n  drink: number;\n  grocery: number;\n  shopping: number;\n}\n\nexport interface SalesChannel {\n  key: keyof Omit<SalesDataPoint, \"day\">;\n  label: string;\n  color: string;\n}\n\nexport interface SalesBreakdownWidgetProps {\n  title?: string;\n  subtitle?: string;\n  actionLabel?: string;\n  data?: SalesDataPoint[];\n  channels?: SalesChannel[];\n  onActionClick?: () => void;\n}\n\nconst defaultData: SalesDataPoint[] = [\n  { day: \"01\", food: 32, drink: 18, grocery: 14, shopping: 22 },\n  { day: \"02\", food: 20, drink: 12, grocery: 10, shopping: 8 },\n  { day: \"03\", food: 54, drink: 24, grocery: 18, shopping: 16 },\n  { day: \"04\", food: 26, drink: 18, grocery: 14, shopping: 12 },\n  { day: \"05\", food: 18, drink: 10, grocery: 8, shopping: 10 },\n  { day: \"06\", food: 32, drink: 16, grocery: 12, shopping: 22 },\n  { day: \"07\", food: 30, drink: 14, grocery: 12, shopping: 16 },\n];\n\nconst defaultChannels: SalesChannel[] = [\n  {\n    key: \"food\",\n    label: \"Food\",\n    color: \"#38bdf8\",\n  },\n  {\n    key: \"drink\",\n    label: \"Drink\",\n    color: \"#a3e635\",\n  },\n  {\n    key: \"grocery\",\n    label: \"Grocery\",\n    color: \"#ef4444\",\n  },\n  {\n    key: \"shopping\",\n    label: \"Shopping\",\n    color: \"#f0529c\",\n  },\n];\n\ninterface CustomTooltipPayload {\n  name: string;\n  value: number;\n  fill: string;\n}\n\nfunction CustomTooltip({\n  active,\n  payload,\n  label,\n}: {\n  // Typed locally: Recharts 3 no longer declares these on TooltipProps.\n  active?: boolean;\n  payload?: CustomTooltipPayload[];\n  label?: string | number;\n}) {\n  if (!active || !payload?.length) return null;\n\n  const total = payload.reduce((sum, item) => sum + (item.value ?? 0), 0);\n\n  return (\n    <div className=\"bg-background/80 text-foreground shadow-border/50 min-w-[130px] rounded-none p-3 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 backdrop-blur-sm dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_1px_2px_-1px_rgba(255,255,255,0.1),0px_2px_4px_0px_rgba(255,255,255,0.08)]\">\n      <p className=\"text-muted-foreground mb-2 text-sm font-medium tracking-widest\">\n        {label}\n      </p>\n      <div className=\"flex flex-col gap-1.5\">\n        {[...payload].reverse().map((entry) => (\n          <div\n            key={entry.name}\n            className=\"flex items-center justify-between gap-4\"\n          >\n            <div className=\"flex items-center gap-1.5\">\n              <span\n                className=\"h-2 w-2 shrink-0 rounded-none\"\n                style={{ background: entry.fill }}\n              />\n              <span className=\"text-muted-foreground text-xs font-medium\">\n                {entry.name}\n              </span>\n            </div>\n            <span className=\"text-foreground text-xs font-medium tabular-nums\">\n              {entry.value}\n            </span>\n          </div>\n        ))}\n      </div>\n      <div className=\"border-border/50 mt-2 flex justify-between border-t pt-2\">\n        <span className=\"text-muted-foreground text-xs font-semibold\">\n          Total\n        </span>\n        <span className=\"text-foreground text-xs font-semibold\">{total}</span>\n      </div>\n    </div>\n  );\n}\n\nexport function SalesBreakdownWidget({\n  title = \"Daily Expense\",\n  subtitle = \"Data from 1-12 Apr, 2024\",\n  actionLabel = \"View Report\",\n  data = defaultData,\n  channels = defaultChannels,\n  onActionClick,\n}: SalesBreakdownWidgetProps) {\n  return (\n    <Card className=\"w-full max-w-sm rounded-none 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 dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_1px_2px_-1px_rgba(255,255,255,0.1),0px_2px_4px_0px_rgba(255,255,255,0.08)]\">\n      <CardHeader className=\"\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex flex-col\">\n            <h3 className=\"text-foreground text-base leading-snug font-medium tracking-tight\">\n              {title}\n            </h3>\n            <p className=\"text-muted-foreground text-xs font-medium\">\n              {subtitle}\n            </p>\n          </div>\n          <Button\n            variant=\"default\"\n            size=\"sm\"\n            onClick={onActionClick}\n            className=\"h-8 shrink-0 rounded-none px-3 text-sm font-medium shadow-[0px_0px_4px_1px_rgba(0,0,0,0.05),inset_0_0px_4px_1px_rgba(255,255,255,0.45),inset_0_1px_0px_0px_rgba(255,255,255,0.35)]\"\n          >\n            {actionLabel}\n          </Button>\n        </div>\n      </CardHeader>\n\n      <CardContent className=\"flex flex-col gap-0\">\n        <div className=\"h-64 w-full\">\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            <BarChart data={data} barSize={24} barCategoryGap=\"0%\">\n              <CartesianGrid\n                vertical={false}\n                stroke=\"var(--border)\"\n                strokeDasharray=\"2 4\"\n              />\n              <XAxis\n                dataKey=\"day\"\n                axisLine={false}\n                tickLine={false}\n                tick={{\n                  fill: \"var(--muted-foreground)\",\n                  fontSize: 12,\n                  fontWeight: 400,\n                }}\n              />\n              <YAxis hide axisLine={false} tickLine={false} />\n              <Tooltip\n                content={<CustomTooltip />}\n                cursor={{\n                  fill: \"var(--accent)\",\n                  opacity: 0,\n                  radius: 8,\n                }}\n              />\n              {channels.map((channel) => (\n                <Bar\n                  key={channel.key}\n                  dataKey={channel.key}\n                  name={channel.label}\n                  stackId=\"expense\"\n                  fill={channel.color}\n                />\n              ))}\n            </BarChart>\n          </ResponsiveContainer>\n        </div>\n\n        <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-2\">\n          {channels.map((channel) => (\n            <div key={channel.key} className=\"flex items-center gap-1.5\">\n              <div\n                className=\"h-2 w-2 rounded-none\"\n                style={{ backgroundColor: channel.color }}\n              />\n              <span className=\"text-muted-foreground text-[11px] font-semibold\">\n                {channel.label}\n              </span>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n\nexport default SalesBreakdownWidget;\n",
      "type": "registry:ui",
      "target": "components/ui/widget-3.tsx"
    }
  ],
  "type": "registry:ui"
}