{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "widget-1",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "card",
    "dropdown-menu",
    "progress"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/widget-1.tsx",
      "content": "import * as React from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Progress } from \"@/components/ui/progress\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { FaChevronDown } from \"react-icons/fa6\";\n\nexport interface ApiUsageWidgetProps {\n  title?: string;\n  limitValue?: string;\n  progressLabel?: string;\n  progressValue?: number;\n  usedLabel?: string;\n  usedValue?: string;\n  remainingLabel?: string;\n  remainingValue?: string;\n  buttonText?: string;\n  onAction?: () => void;\n  planOptions?: string[];\n  defaultPlan?: string;\n}\n\nexport function ApiUsageWidget({\n  title = \"Api Requests Quota\",\n  limitValue = \"100,000\",\n  progressLabel = \"Monthly Request Limit\",\n  progressValue = 45.23,\n  usedLabel = \"Used\",\n  usedValue = \"45,231\",\n  remainingLabel = \"Remaining\",\n  remainingValue = \"54,769\",\n  buttonText = \"Upgrade Plan\",\n  onAction,\n  planOptions = [\"Pro\", \"Enterprise\", \"Basic\"],\n  defaultPlan = \"Pro\",\n}: ApiUsageWidgetProps) {\n  const [selectedPlan, setSelectedPlan] = React.useState(defaultPlan);\n\n  return (\n    <div className=\"bg-muted flex w-full max-w-sm rounded-[40px] p-2\">\n      <Card className=\"bg-card/80 w-full rounded-[32px] ring-0\">\n        <CardContent className=\"px-4\">\n          <div className=\"flex items-center justify-between\">\n            <h3 className=\"text-muted-foreground text-sm font-normal\">\n              {title}\n            </h3>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  className=\"bg-primary text-primary-foreground hover:bg-primary/90 gap-1.5 rounded-md border-none px-3 py-2 text-xs font-medium tracking-wide 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)] focus-visible:ring-0 focus-visible:ring-offset-0\"\n                >\n                  {selectedPlan}{\" \"}\n                  <FaChevronDown className=\"h-3 w-3 opacity-70\" />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"bg-background/20 rounded-xl border shadow-sm ring-0 backdrop-blur-2xl\"\n              >\n                {planOptions.map((plan) => (\n                  <DropdownMenuItem\n                    key={plan}\n                    onClick={() => setSelectedPlan(plan)}\n                    className=\"cursor-pointer rounded-md bg-transparent text-xs font-medium\"\n                  >\n                    {plan}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n\n          <div>\n            <div className=\"text-foreground text-3xl font-semibold tracking-tight tabular-nums\">\n              {limitValue}\n            </div>\n          </div>\n          <div className=\"mt-2 space-y-1\">\n            <p className=\"text-muted-foreground text-sm font-normal\">\n              {progressLabel}\n            </p>\n            <Progress\n              value={progressValue}\n              className=\"bg-muted h-2 w-full **:data-[slot=progress-indicator]:shadow-[inset_0_2px_4px_0_rgba(255,255,255,0.7),inset_0_-2px_4px_0_rgba(0,0,0,0.2),0px_4px_24px_0px_rgba(0,0,0,0.1),0px_2px_12px_0px_rgba(0,0,0,0.1)]\"\n            />\n          </div>\n\n          <div className=\"mt-3 flex items-center justify-between text-xs\">\n            <div className=\"flex flex-col leading-tight\">\n              <span className=\"text-muted-foreground\">{usedLabel}</span>\n              <span className=\"text-foreground text-base font-semibold\">\n                {usedValue}\n              </span>\n            </div>\n            <div className=\"flex flex-col items-end leading-tight\">\n              <span className=\"text-muted-foreground\">{remainingLabel}</span>\n              <span className=\"text-foreground text-base font-semibold\">\n                {remainingValue}\n              </span>\n            </div>\n          </div>\n          <div className=\"pt-2\">\n            <Button\n              onClick={onAction}\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 h-12 w-full rounded-full text-base font-semibold shadow-[inset_0_2px_4px_0_rgba(255,255,255,0.7),inset_0_-2px_4px_0_rgba(0,0,0,0.2),0px_4px_24px_0px_rgba(0,0,0,0.1),0px_2px_12px_0px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_-2px_4px_0_rgba(0,0,0,0.2),inset_0_2px_4px_0_rgba(255,255,255,0.5)]\"\n              size=\"lg\"\n            >\n              {buttonText}\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/widget-1.tsx"
    }
  ],
  "type": "registry:ui"
}