{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "change-plan",
  "type": "registry:ui",
  "title": "Change Plan Dialog",
  "description": "A responsive plan selection dialog with radio group options - drawer on mobile, modal on desktop.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "label",
    "radio-group",
    "https://revola.sameerjs.com/r/revola.json"
  ],
  "files": [
    {
      "path": "registry/revola/examples/origin-ui/forms/user-profile/change-plan.tsx",
      "content": "import { useId } from \"react\";\n\nimport { CheckIcon, RefreshCcwIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\nimport {\n  ResponsiveDialog,\n  ResponsiveDialogClose,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogTrigger,\n} from \"@/components/ui/revola\";\n\nexport default function ChangePlanDialog() {\n  const id = useId();\n  return (\n    <ResponsiveDialog>\n      <ResponsiveDialogTrigger asChild>\n        <Button variant=\"outline\" className=\"h-12 rounded-full px-6 capitalize\">\n          Change plan\n        </Button>\n      </ResponsiveDialogTrigger>\n      <ResponsiveDialogContent className=\"overflow-hidden sm:max-w-[400px]\">\n        <div className=\"space-y-4 overflow-y-auto p-6 max-sm:pt-4\">\n          <div className=\"mb-2 flex flex-col gap-2\">\n            <div className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\" aria-hidden=\"true\">\n              <RefreshCcwIcon className=\"opacity-80\" size={16} />\n            </div>\n            <ResponsiveDialogHeader className=\"text-left\">\n              <ResponsiveDialogTitle>Change your plan</ResponsiveDialogTitle>\n              <ResponsiveDialogDescription>Pick one of the following plans.</ResponsiveDialogDescription>\n            </ResponsiveDialogHeader>\n          </div>\n          <form className=\"space-y-5\">\n            <RadioGroup className=\"gap-2\" defaultValue=\"2\">\n              {/* Radio card #1 */}\n              <div className=\"shadow-xs relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 outline-none has-[[data-state=checked]]:border-primary/50 has-[[data-state=checked]]:bg-accent\">\n                <RadioGroupItem\n                  value=\"1\"\n                  id={`${id}-1`}\n                  aria-describedby={`${id}-1-description`}\n                  className=\"order-1 after:absolute after:inset-0\"\n                />\n                <div className=\"grid grow gap-1\">\n                  <Label htmlFor={`${id}-1`}>Essential</Label>\n                  <p id={`${id}-1-description`} className=\"text-xs text-muted-foreground\">\n                    $4 per member/month\n                  </p>\n                </div>\n              </div>\n              {/* Radio card #2 */}\n              <div className=\"shadow-xs relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 outline-none has-[[data-state=checked]]:border-primary/50 has-[[data-state=checked]]:bg-accent\">\n                <RadioGroupItem\n                  value=\"2\"\n                  id={`${id}-2`}\n                  aria-describedby={`${id}-2-description`}\n                  className=\"order-1 after:absolute after:inset-0\"\n                />\n                <div className=\"grid grow gap-1\">\n                  <Label htmlFor={`${id}-2`}>Standard</Label>\n                  <p id={`${id}-2-description`} className=\"text-xs text-muted-foreground\">\n                    $19 per member/month\n                  </p>\n                </div>\n              </div>\n              {/* Radio card #3 */}\n              <div className=\"shadow-xs relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 outline-none has-[[data-state=checked]]:border-primary/50 has-[[data-state=checked]]:bg-accent\">\n                <RadioGroupItem\n                  value=\"3\"\n                  id={`${id}-3`}\n                  aria-describedby={`${id}-3-description`}\n                  className=\"order-1 after:absolute after:inset-0\"\n                />\n                <div className=\"grid grow gap-1\">\n                  <Label htmlFor={`${id}-3`}>Enterprise</Label>\n                  <p id={`${id}-3-description`} className=\"text-xs text-muted-foreground\">\n                    $32 per member/month\n                  </p>\n                </div>\n              </div>\n            </RadioGroup>\n            <div className=\"space-y-3\">\n              <p>\n                <strong className=\"text-sm font-medium\">Features include:</strong>\n              </p>\n              <ul className=\"space-y-2 text-sm text-muted-foreground\">\n                <li className=\"flex gap-2\">\n                  <CheckIcon size={16} className=\"mt-0.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  Create unlimited projects.\n                </li>\n                <li className=\"flex gap-2\">\n                  <CheckIcon size={16} className=\"mt-0.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  Remove watermarks.\n                </li>\n                <li className=\"flex gap-2\">\n                  <CheckIcon size={16} className=\"mt-0.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  Add unlimited users and free viewers.\n                </li>\n                <li className=\"flex gap-2\">\n                  <CheckIcon size={16} className=\"mt-0.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  Upload unlimited files.\n                </li>\n                <li className=\"flex gap-2\">\n                  <CheckIcon size={16} className=\"mt-0.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  7-day money back guarantee.\n                </li>\n                <li className=\"flex gap-2\">\n                  <CheckIcon size={16} className=\"mt-0.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  Advanced permissions.\n                </li>\n              </ul>\n            </div>\n            <div className=\"grid gap-2\">\n              <Button type=\"button\" className=\"w-full\">\n                Change plan\n              </Button>\n              <ResponsiveDialogClose asChild>\n                <Button type=\"button\" variant=\"ghost\" className=\"w-full\">\n                  Cancel\n                </Button>\n              </ResponsiveDialogClose>\n            </div>\n          </form>\n        </div>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}