{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "widget-2",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/widget-2.tsx",
      "content": "\"use client\";\nimport { Card } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { FaCloud } from \"react-icons/fa\";\n\nexport interface StorageWidgetProps {\n  title?: string;\n  subtitle?: string;\n  usedAmount?: string;\n  totalAmount?: string;\n  segments?: number;\n  actionLabel?: string;\n  onActionClick?: () => void;\n  className?: string;\n}\n\nfunction getNumericValue(value: string) {\n  return Number.parseFloat(value.replace(/,/g, \"\"));\n}\n\nexport function StorageWidget({\n  title = \"Cloud Storage\",\n  subtitle = \"Billing cycle: May 1 - May 31\",\n  usedAmount = \"45 GB\",\n  totalAmount = \"100 GB\",\n  segments = 5,\n  actionLabel = \"Upgrade\",\n  onActionClick,\n  className = \"\",\n}: StorageWidgetProps) {\n  const segmentCount = Math.max(1, Math.floor(segments));\n  const usedValue = getNumericValue(usedAmount);\n  const totalValue = getNumericValue(totalAmount);\n  const progress =\n    Number.isFinite(usedValue) && Number.isFinite(totalValue) && totalValue > 0\n      ? Math.min(Math.max(usedValue / totalValue, 0), 1)\n      : 0;\n\n  return (\n    <Card\n      className={`w-full max-w-sm gap-4 px-4 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 ${className}`}\n    >\n      <div className=\"flex items-start justify-between\">\n        <div className=\"space-y-1\">\n          <div className=\"text-primary flex items-center gap-2\">\n            <FaCloud className=\"h-4 w-4\" />\n            <h3 className=\"text-foreground text-base font-semibold tracking-tight\">\n              {title}\n            </h3>\n          </div>\n          <p className=\"text-muted-foreground text-sm\">{subtitle}</p>\n        </div>\n        <Button\n          variant=\"default\"\n          size=\"sm\"\n          onClick={onActionClick}\n          className=\"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      <div className=\"flex flex-col gap-0.5\">\n        <div className=\"flex items-baseline gap-1.5\">\n          <span className=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">\n            {usedAmount}\n          </span>\n          <span className=\"text-muted-foreground text-sm font-medium tabular-nums\">\n            of {totalAmount}\n          </span>\n        </div>\n\n        <div className=\"flex h-2 w-full gap-1.5\">\n          {Array.from({ length: segmentCount }).map((_, index) => {\n            const segmentProgress = Math.min(\n              Math.max(progress * segmentCount - index, 0),\n              1,\n            );\n            const isFull = segmentProgress === 1;\n            const isEmpty = segmentProgress === 0;\n\n            return (\n              <div\n                key={index}\n                className=\"bg-primary/10 relative flex-1 overflow-hidden rounded-full\"\n              >\n                <div\n                  className={`bg-primary absolute inset-y-0 left-0 rounded-full shadow-[0_0_8px_rgba(0,0,0,0.16)] ${\n                    isFull ? \"w-full\" : isEmpty ? \"w-0\" : \"\"\n                  }`}\n                  style={\n                    !isFull && !isEmpty\n                      ? { width: `${segmentProgress * 100}%` }\n                      : undefined\n                  }\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </Card>\n  );\n}\n\nexport default StorageWidget;\n",
      "type": "registry:ui",
      "target": "components/ui/widget-2.tsx"
    }
  ],
  "type": "registry:ui"
}