{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-1",
  "type": "registry:block",
  "description": "Responsive pricing section with frequency toggle, tooltips, and highlightable plans.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "button",
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/blocks/pricing/1/pricing-section.tsx",
      "content": "\"use client\";\nimport { CheckCircleIcon, StarIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { type FREQUENCY, FrequencyToggle } from \"./frequency-toggle\";\n\nexport type Plan = {\n  name: string;\n  info: string;\n  price: {\n    monthly: number;\n    yearly: number;\n  };\n  features: {\n    text: string;\n    tooltip?: string;\n  }[];\n  btn: {\n    text: string;\n    href: string;\n  };\n  highlighted?: boolean;\n};\n\ninterface PricingSectionProps extends React.ComponentProps<\"div\"> {\n  plans: Plan[];\n  heading: string;\n  description?: string;\n}\n\nexport function PricingSection({\n  plans,\n  heading,\n  description,\n  ...props\n}: PricingSectionProps) {\n  const [frequency, setFrequency] = React.useState<\"monthly\" | \"yearly\">(\n    \"monthly\"\n  );\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full flex-col items-center justify-center space-y-7 p-4\",\n        props.className\n      )}\n      {...props}\n    >\n      <div className=\"mx-auto max-w-xl space-y-2\">\n        <h2 className=\"text-center font-bold text-2xl tracking-tight md:text-3xl lg:font-extrabold lg:text-4xl\">\n          {heading}\n        </h2>\n        {description && (\n          <p className=\"text-center text-muted-foreground text-sm md:text-base\">\n            {description}\n          </p>\n        )}\n      </div>\n\n      <FrequencyToggle frequency={frequency} setFrequency={setFrequency} />\n      <div className=\"mx-auto grid w-full max-w-4xl grid-cols-1 gap-6 md:grid-cols-3\">\n        {plans.map((plan) => (\n          <PricingCard frequency={frequency} key={plan.name} plan={plan} />\n        ))}\n      </div>\n    </div>\n  );\n}\n\ntype PricingCardProps = React.ComponentProps<\"div\"> & {\n  plan: Plan;\n  frequency?: FREQUENCY;\n};\n\nexport function PricingCard({\n  plan,\n  className,\n  frequency = \"monthly\",\n  ...props\n}: PricingCardProps) {\n  return (\n    <div\n      className={cn(\n        \"relative flex w-full flex-col rounded-lg border shadow\",\n        plan.highlighted && \"scale-105\",\n        className\n      )}\n      key={plan.name}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"rounded-t-lg border-b p-4\",\n          plan.highlighted && \"bg-card dark:bg-card/80\"\n        )}\n      >\n        <div className=\"absolute top-2 right-2 z-10 flex items-center gap-2\">\n          {plan.highlighted && (\n            <p className=\"flex items-center gap-1 rounded-md border bg-background px-2 py-0.5 text-xs\">\n              <StarIcon className=\"h-3 w-3 fill-current\" />\n              Popular\n            </p>\n          )}\n          {frequency === \"yearly\" && (\n            <p className=\"flex items-center gap-1 rounded-md border bg-primary px-2 py-0.5 text-primary-foreground text-xs\">\n              {Math.round(\n                ((plan.price.monthly * 12 - plan.price.yearly) /\n                  plan.price.monthly /\n                  12) *\n                  100\n              )}\n              % off\n            </p>\n          )}\n        </div>\n\n        <div className=\"font-medium text-lg\">{plan.name}</div>\n        <p className=\"font-normal text-muted-foreground text-sm\">{plan.info}</p>\n        <h3 className=\"mt-6 mb-2 flex items-end gap-1\">\n          <span className=\"font-extrabold text-3xl\">\n            ${plan.price[frequency]}\n          </span>\n          <span className=\"text-muted-foreground\">\n            {plan.name !== \"Free\"\n              ? `/${frequency === \"monthly\" ? \"month\" : \"year\"}`\n              : \"\"}\n          </span>\n        </h3>\n      </div>\n      <div\n        className={cn(\n          \"space-y-4 px-4 pt-6 pb-8 text-muted-foreground text-sm\",\n          plan.highlighted && \"bg-muted/10\"\n        )}\n      >\n        {plan.features.map((feature, index) => (\n          <div className=\"flex items-center gap-2\" key={index}>\n            <CheckCircleIcon className=\"h-4 w-4 text-foreground\" />\n            <TooltipProvider>\n              <Tooltip delayDuration={0}>\n                <TooltipTrigger asChild>\n                  <p\n                    className={cn(feature.tooltip && \"cursor-pointer border-b\")}\n                  >\n                    {feature.text}\n                  </p>\n                </TooltipTrigger>\n                {feature.tooltip && (\n                  <TooltipContent>\n                    <p>{feature.tooltip}</p>\n                  </TooltipContent>\n                )}\n              </Tooltip>\n            </TooltipProvider>\n          </div>\n        ))}\n      </div>\n      <div\n        className={cn(\n          \"mt-auto w-full rounded-b-lg border-t p-3\",\n          plan.highlighted && \"bg-card dark:bg-card/80\"\n        )}\n      >\n        <Button\n          asChild\n          className=\"w-full\"\n          variant={plan.highlighted ? \"default\" : \"outline\"}\n        >\n          <Link href={plan.btn.href}>{plan.btn.text}</Link>\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/pricing/1/frequency-toggle.tsx",
      "content": "\"use client\";\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type FREQUENCY = \"monthly\" | \"yearly\";\n\ntype FrequencyToggleProps = React.ComponentProps<\"div\"> & {\n  frequency: FREQUENCY;\n  setFrequency: React.Dispatch<React.SetStateAction<FREQUENCY>>;\n  frequencies?: FREQUENCY[];\n};\n\nexport function FrequencyToggle({\n  frequency,\n  setFrequency,\n  frequencies = [\"monthly\", \"yearly\"],\n  ...props\n}: FrequencyToggleProps) {\n  return (\n    <div\n      className={cn(\n        \"mx-auto flex w-fit rounded-full border bg-card p-1 shadow\",\n        props.className\n      )}\n      {...props}\n    >\n      {frequencies.map((freq) => (\n        <button\n          className=\"relative px-4 py-1 text-sm capitalize\"\n          key={freq}\n          onClick={() => setFrequency(freq)}\n        >\n          <span className=\"relative z-10\">{freq}</span>\n          {frequency === freq && (\n            <motion.span\n              className=\"absolute inset-0 z-10 rounded-full bg-background mix-blend-difference dark:bg-foreground\"\n              layoutId=\"frequency\"\n              transition={{ type: \"spring\", duration: 0.4 }}\n            />\n          )}\n        </button>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "pricing"
  ]
}