{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-a-plan-4",
  "title": "Usage Slider",
  "description": "Usage Slider for Select a Plan.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "slider"
  ],
  "files": [
    {
      "path": "registry/intents/billing/select-a-plan/select-a-plan-4.tsx",
      "content": "'use client'\n\nimport { ArrowRightIcon, UsersIcon } from 'lucide-react'\nimport { useState } from 'react'\n\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'\nimport { Slider } from '@/components/ui/slider'\nimport { cn } from '@/lib/utils'\n\ntype Tier = {\n  name: string\n  maxSeats: number\n  perSeat: number\n  note: string\n}\n\nconst tiers: Tier[] = [\n  { name: 'Starter', maxSeats: 3, perSeat: 0, note: 'Free for small teams' },\n  { name: 'Pro', maxSeats: 20, perSeat: 12, note: 'Best value as you grow' },\n  { name: 'Business', maxSeats: 50, perSeat: 10, note: 'Volume rate per seat' },\n  { name: 'Enterprise', maxSeats: 200, perSeat: 8, note: 'Custom contract' },\n]\n\nfunction tierFor(seats: number) {\n  return tiers.find((t) => seats <= t.maxSeats) ?? tiers[tiers.length - 1]\n}\n\nexport function SelectAPlan4() {\n  const [seats, setSeats] = useState(8)\n  const tier = tierFor(seats)\n  const total = tier.perSeat * seats\n\n  return (\n    <Card size=\"sm\">\n      <CardHeader>\n        <div className=\"flex items-center gap-2\">\n          <UsersIcon className=\"text-muted-foreground size-4\" />\n          <span className=\"text-sm font-semibold\">How many seats?</span>\n        </div>\n        <span className=\"text-muted-foreground text-xs\">\n          Drag to size your team and we pick the plan that fits.\n        </span>\n      </CardHeader>\n\n      <CardContent className=\"flex flex-col gap-5\">\n        <div className=\"flex items-baseline justify-between\">\n          <span className=\"text-3xl font-bold tracking-tight\">{seats}</span>\n          <span className=\"text-muted-foreground text-xs\">\n            {seats === 1 ? 'seat' : 'seats'}\n          </span>\n        </div>\n\n        <Slider\n          value={[seats]}\n          min={1}\n          max={120}\n          step={1}\n          onValueChange={(value) => setSeats((value as number[])[0])}\n          aria-label=\"Number of seats\"\n        />\n\n        <div className=\"bg-muted/50 flex items-center justify-between rounded-lg border p-3\">\n          <div className=\"flex flex-col\">\n            <span className=\"text-sm font-semibold\">{tier.name}</span>\n            <span className=\"text-muted-foreground text-[11px]\">\n              {tier.note}\n            </span>\n          </div>\n          <div className=\"flex items-baseline gap-1\">\n            <span className=\"text-lg font-bold tracking-tight\">\n              {tier.perSeat === 0 ? '$0' : `$${total}`}\n            </span>\n            <span className=\"text-muted-foreground text-xs\">/mo</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-1.5\">\n          {tiers.map((t) => (\n            <span\n              key={t.name}\n              className={cn(\n                'h-1 flex-1 rounded-full',\n                t.name === tier.name ? 'bg-primary' : 'bg-muted',\n              )}\n            />\n          ))}\n        </div>\n      </CardContent>\n\n      <CardFooter>\n        <Button size=\"sm\" className=\"w-full\">\n          Choose {tier.name}\n          <ArrowRightIcon className=\"size-3.5\" />\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/intent/select-a-plan/select-a-plan-4.tsx"
    }
  ],
  "type": "registry:block"
}