{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "billing-interval-toggle",
  "type": "registry:component",
  "title": "Billing interval toggle",
  "description": "Segmented control for switching between billing intervals. Renders labels automatically from interval keys (month -> Monthly, year -> Annually). Designed for pricing pages and plan selectors.",
  "dependencies": [],
  "registryDependencies": ["@paddle/paddle-helpers", "tabs"],
  "files": [
    {
      "path": "registry/new-york/blocks/billing-interval-toggle/components/billing-interval-toggle.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/new-york/ui/tabs\"\nimport { cn } from \"@/lib/utils\"\nimport { formatIntervalLabel } from \"@/registry/new-york/blocks/paddle-helpers/lib/paddle-format\"\n\nexport type BillingIntervalToggleProps = {\n  intervals: string[]\n  value: string\n  onValueChange: (value: string) => void\n  className?: string\n}\n\nexport function BillingIntervalToggle({\n  intervals,\n  value,\n  onValueChange,\n  className,\n}: BillingIntervalToggleProps) {\n  return (\n    <Tabs value={value} onValueChange={onValueChange} className={cn(\"w-full\", className)}>\n      <TabsList className=\"mx-auto flex w-fit\">\n        {intervals.map((interval) => (\n          <TabsTrigger key={interval} value={interval}>\n            {formatIntervalLabel(interval)}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n    </Tabs>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": ["pricing"]
}