{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-toggle",
  "type": "registry:ui",
  "title": "Pricing toggle",
  "description": "A Monthly and Yearly billing period switch built on a segmented control, with a Save 20% with yearly note underneath. Pairs with pricing tables and plan cards.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/segmented-control.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/pricing-toggle.tsx",
      "type": "registry:ui",
      "target": "components/ui/pricing-toggle.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { SegmentedControl } from \"@/components/ui/segmented-control\"\n\nfunction PricingToggle({\n  value = \"monthly\",\n  onChange,\n  className,\n}: {\n  value?: \"monthly\" | \"yearly\"\n  onChange?: (v: \"monthly\" | \"yearly\") => void\n  className?: string\n}) {\n  return (\n    <div data-slot=\"pricing-toggle\" className={cn(\"inline-flex flex-col items-center gap-2\", className)}>\n      <SegmentedControl\n        value={value}\n        onChange={(v) => onChange?.(v as \"monthly\" | \"yearly\")}\n        options={[\n          { value: \"monthly\", label: \"Monthly\" },\n          { value: \"yearly\", label: \"Yearly\" },\n        ]}\n      />\n      <p className=\"text-xs text-fg-muted\">Save 20% with yearly</p>\n    </div>\n  )\n}\nexport { PricingToggle }\n"
    }
  ]
}