{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-3",
  "type": "registry:block",
  "title": "Pricing 3",
  "description": "Pricing table with card-based design, configurable popular tier, and dynamic pricing periods",
  "dependencies": [
    "react",
    "next",
    "payload",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "@uifoundry/header-field",
    "@uifoundry/subheader-field",
    "@uifoundry/description-field",
    "@uifoundry/block-constants"
  ],
  "files": [
    {
      "path": "registry/payload/blocks/pricing/pricing-3/index.tsx",
      "content": "/**\n * Pricing 3 Component\n *\n * Source: https://tailark.com/preview/dusk/pricing/three\n * License: Free Tier\n * Adapted from: Tailark\n *\n * Modifications:\n * - Integrated with PayloadCMS block system\n * - Replaced hardcoded content with dynamic props\n */\n\n\nimport { Check } from \"lucide-react\";\nimport Link from \"next/link\";\n\nimport type { Pricing_3_Block } from \"~/payload-types\";\n\nimport { cn } from \"@/registry/default/utils\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/registry/ui/card\";\n\nexport * from \"./config\";\n\nexport default function Pricing3(props: NonNullable<Pricing_3_Block>) {\n\tconst popularIndex = props?.config?.popularIndex ?? -1;\n\tconst popularLabel = props?.config?.popularLabel ?? \"Popular\";\n\n\treturn (\n\t\t<section className=\"py-16 md:py-32\">\n\t\t\t<div className=\"mx-auto max-w-7xl px-6\">\n\t\t\t\t{/* Header Section */}\n\t\t\t\t<div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n\t\t\t\t\t{props?.header && (\n\t\t\t\t\t\t<h2 className=\"text-4xl font-semibold lg:text-5xl\">\n\t\t\t\t\t\t\t{props.header}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t)}\n\t\t\t\t\t{props?.subheader && (\n\t\t\t\t\t\t<p className=\"text-muted-foreground text-lg\">\n\t\t\t\t\t\t\t{props.subheader}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Pricing Cards Grid */}\n\t\t\t\t<div className=\"mt-12 grid gap-6 md:mt-16 md:grid-cols-3\">\n\t\t\t\t\t{(props?.tiers ?? []).map((tier, index) => {\n\t\t\t\t\t\tconst isPopular = popularIndex === index;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<PricingCard\n\t\t\t\t\t\t\t\tkey={`pricing-3-tier-${index}`}\n\t\t\t\t\t\t\t\ttier={tier}\n\t\t\t\t\t\t\t\tisPopular={isPopular}\n\t\t\t\t\t\t\t\tpopularLabel={popularLabel}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\ninterface PricingCardProps {\n\ttier: NonNullable<Pricing_3_Block[\"tiers\"]>[number];\n\tisPopular: boolean;\n\tpopularLabel: string;\n}\n\nfunction PricingCard({ tier, isPopular, popularLabel }: PricingCardProps) {\n\tif (!tier) return null;\n\n\tconst periodLabel =\n\t\ttier.period === \"month\" ? \"/mo\" : tier.period === \"year\" ? \"/yr\" : \"\";\n\n\treturn (\n\t\t<Card className=\"relative flex flex-col\">\n\t\t\t{/* Popular Badge */}\n\t\t\t{isPopular && (\n\t\t\t\t<span className=\"absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full bg-linear-to-br/increasing from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950 ring-1 ring-white/20 ring-offset-1 ring-offset-gray-950/5 ring-inset\">\n\t\t\t\t\t{popularLabel}\n\t\t\t\t</span>\n\t\t\t)}\n\n\t\t\t<CardHeader>\n\t\t\t\t{/* Plan Name */}\n\t\t\t\t<CardTitle className=\"text-lg font-medium\">{tier.name}</CardTitle>\n\n\t\t\t\t{/* Price */}\n\t\t\t\t<div className=\"my-3 flex items-baseline gap-1\">\n\t\t\t\t\t<span className=\"text-4xl font-semibold\">${tier.price}</span>\n\t\t\t\t\t<span className=\"text-muted-foreground text-sm\">{periodLabel}</span>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Per Editor Label */}\n\t\t\t\t{tier.perEditor && (\n\t\t\t\t\t<p className=\"text-muted-foreground text-xs\">Per editor</p>\n\t\t\t\t)}\n\n\t\t\t\t{/* Description */}\n\t\t\t\t{tier.description && (\n\t\t\t\t\t<CardDescription className=\"mt-2 text-sm\">\n\t\t\t\t\t\t{tier.description}\n\t\t\t\t\t</CardDescription>\n\t\t\t\t)}\n\n\t\t\t\t{/* CTA Button */}\n\t\t\t\t<Button\n\t\t\t\t\tasChild\n\t\t\t\t\tclassName=\"mt-4 w-full\"\n\t\t\t\t\tvariant={isPopular ? \"default\" : \"outline\"}\n\t\t\t\t>\n\t\t\t\t\t<Link href={tier.ctaHref || \"#\"}>\n\t\t\t\t\t\t{tier.ctaLabel || \"Get Started\"}\n\t\t\t\t\t</Link>\n\t\t\t\t</Button>\n\t\t\t</CardHeader>\n\n\t\t\t<CardContent className=\"flex-1 space-y-4\">\n\t\t\t\t{/* Divider */}\n\t\t\t\t<hr className=\"border-dashed\" />\n\n\t\t\t\t{/* Features List */}\n\t\t\t\t<ul className=\"space-y-3 text-sm\">\n\t\t\t\t\t{(tier.features ?? []).map((feature, featureIndex) => (\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tkey={`pricing-3-tier-${tier.name}-feature-${featureIndex}`}\n\t\t\t\t\t\t\tclassName=\"flex items-start gap-2\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Check className=\"size-4 shrink-0 text-green-600 dark:text-green-400\" />\n\t\t\t\t\t\t\t<span>{feature.text}</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n",
      "type": "registry:component",
      "target": "src/payload/blocks/Pricing/Pricing_3/index.tsx"
    },
    {
      "path": "registry/payload/blocks/pricing/pricing-3/config.ts",
      "content": "import type { Block } from \"payload\";\n\nimport {\n\tBLOCK_GROUP_PRICING,\n\tBLOCK_SLUG_PRICING_3,\n} from \"@/registry/default/lib/constants/blocks\";\nimport descriptionField from \"@/registry/default/lib/fields/description/config\";\nimport headerField from \"@/registry/default/lib/fields/header/config\";\nimport subHeaderField from \"@/registry/default/lib/fields/subheader/config\";\n\nexport const Pricing_3_Block: Block = {\n\tslug: BLOCK_SLUG_PRICING_3,\n\tadmin: {\n\t\tgroup: BLOCK_GROUP_PRICING,\n\t},\n\tfields: [\n\t\theaderField({\n\t\t\tdefaultValue: \"Pricing that Scales with You\",\n\t\t\trequired: false,\n\t\t}),\n\t\tsubHeaderField({\n\t\t\tdefaultValue: \"Choose the plan that best fits your needs\",\n\t\t\trequired: false,\n\t\t}),\n\t\t{\n\t\t\tname: \"config\",\n\t\t\ttype: \"group\",\n\t\t\tfields: [\n\t\t\t\t{\n\t\t\t\t\tname: \"popularIndex\",\n\t\t\t\t\ttype: \"number\",\n\t\t\t\t\tadmin: {\n\t\t\t\t\t\tdescription: \"Which tier should show the 'Popular' badge? (0 = first, 1 = second, 2 = third, -1 = none)\",\n\t\t\t\t\t},\n\t\t\t\t\tdefaultValue: 1,\n\t\t\t\t\tlabel: \"Popular Plan Index (0-based)\",\n\t\t\t\t\trequired: false,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"popularLabel\",\n\t\t\t\t\ttype: \"text\",\n\t\t\t\t\tdefaultValue: \"Popular\",\n\t\t\t\t\tlabel: \"Popular Plan Badge Label\",\n\t\t\t\t\trequired: true,\n\t\t\t\t},\n\t\t\t],\n\t\t\tlabel: \"Config\",\n\t\t},\n\t\t{\n\t\t\tname: \"tiers\",\n\t\t\ttype: \"array\",\n\t\t\tdefaultValue: [\n\t\t\t\t{\n\t\t\t\t\tname: \"Starter\",\n\t\t\t\t\tctaHref: \"/signup\",\n\t\t\t\t\tctaLabel: \"Get Started\",\n\t\t\t\t\tdescription: \"Perfect for small teams getting started\",\n\t\t\t\t\tfeatures: [\n\t\t\t\t\t\t{ text: \"Up to 5 editors\" },\n\t\t\t\t\t\t{ text: \"10GB storage\" },\n\t\t\t\t\t\t{ text: \"Basic analytics\" },\n\t\t\t\t\t\t{ text: \"Email support\" },\n\t\t\t\t\t\t{ text: \"Core features\" },\n\t\t\t\t\t],\n\t\t\t\t\tperEditor: true,\n\t\t\t\t\tperiod: \"month\",\n\t\t\t\t\tprice: 29,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Professional\",\n\t\t\t\t\tctaHref: \"/signup\",\n\t\t\t\t\tctaLabel: \"Get Started\",\n\t\t\t\t\tdescription: \"For growing teams with advanced needs\",\n\t\t\t\t\tfeatures: [\n\t\t\t\t\t\t{ text: \"Up to 20 editors\" },\n\t\t\t\t\t\t{ text: \"100GB storage\" },\n\t\t\t\t\t\t{ text: \"Advanced analytics\" },\n\t\t\t\t\t\t{ text: \"Priority support\" },\n\t\t\t\t\t\t{ text: \"All features included\" },\n\t\t\t\t\t\t{ text: \"Custom integrations\" },\n\t\t\t\t\t],\n\t\t\t\t\tperEditor: true,\n\t\t\t\t\tperiod: \"month\",\n\t\t\t\t\tprice: 79,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Enterprise\",\n\t\t\t\t\tctaHref: \"/contact\",\n\t\t\t\t\tctaLabel: \"Contact Sales\",\n\t\t\t\t\tdescription: \"For large organizations with custom requirements\",\n\t\t\t\t\tfeatures: [\n\t\t\t\t\t\t{ text: \"Unlimited editors\" },\n\t\t\t\t\t\t{ text: \"Unlimited storage\" },\n\t\t\t\t\t\t{ text: \"Custom analytics\" },\n\t\t\t\t\t\t{ text: \"24/7 dedicated support\" },\n\t\t\t\t\t\t{ text: \"All features included\" },\n\t\t\t\t\t\t{ text: \"Custom integrations\" },\n\t\t\t\t\t\t{ text: \"SLA guarantee\" },\n\t\t\t\t\t\t{ text: \"Dedicated account manager\" },\n\t\t\t\t\t],\n\t\t\t\t\tperEditor: false,\n\t\t\t\t\tperiod: \"month\",\n\t\t\t\t\tprice: 199,\n\t\t\t\t},\n\t\t\t],\n\t\t\tfields: [\n\t\t\t\t{\n\t\t\t\t\tname: \"name\",\n\t\t\t\t\ttype: \"text\",\n\t\t\t\t\tlabel: \"Plan Name\",\n\t\t\t\t\trequired: true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"price\",\n\t\t\t\t\ttype: \"number\",\n\t\t\t\t\tlabel: \"Price\",\n\t\t\t\t\trequired: true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"period\",\n\t\t\t\t\ttype: \"select\",\n\t\t\t\t\tdefaultValue: \"month\",\n\t\t\t\t\tlabel: \"Billing Period\",\n\t\t\t\t\toptions: [\n\t\t\t\t\t\t{ label: \"Per Month\", value: \"month\" },\n\t\t\t\t\t\t{ label: \"Per Year\", value: \"year\" },\n\t\t\t\t\t\t{ label: \"One-time\", value: \"once\" },\n\t\t\t\t\t],\n\t\t\t\t\trequired: true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"perEditor\",\n\t\t\t\t\ttype: \"checkbox\",\n\t\t\t\t\tdefaultValue: true,\n\t\t\t\t\tlabel: \"Show 'Per Editor' Label\",\n\t\t\t\t\trequired: false,\n\t\t\t\t},\n\t\t\t\tdescriptionField({\n\t\t\t\t\trequired: false,\n\t\t\t\t}),\n\t\t\t\t{\n\t\t\t\t\tname: \"ctaLabel\",\n\t\t\t\t\ttype: \"text\",\n\t\t\t\t\tdefaultValue: \"Get Started\",\n\t\t\t\t\tlabel: \"Button Label\",\n\t\t\t\t\trequired: true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"ctaHref\",\n\t\t\t\t\ttype: \"text\",\n\t\t\t\t\tdefaultValue: \"\",\n\t\t\t\t\tlabel: \"Button Link\",\n\t\t\t\t\trequired: false,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"features\",\n\t\t\t\t\ttype: \"array\",\n\t\t\t\t\tfields: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: \"text\",\n\t\t\t\t\t\t\ttype: \"text\",\n\t\t\t\t\t\t\trequired: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\tlabel: \"Features List\",\n\t\t\t\t\tmaxRows: 10,\n\t\t\t\t\tminRows: 1,\n\t\t\t\t},\n\t\t\t],\n\t\t\tlabel: {\n\t\t\t\tplural: \"Pricing Tiers\",\n\t\t\t\tsingular: \"Pricing Tier\",\n\t\t\t},\n\t\t\tmaxRows: 4,\n\t\t\tminRows: 0,\n\t\t},\n\t],\n\tinterfaceName: \"Pricing_3_Block\",\n\tlabels: {\n\t\tplural: \"Pricing 3's\",\n\t\tsingular: \"Pricing 3\",\n\t},\n};\n",
      "type": "registry:component",
      "target": "src/payload/blocks/Pricing/Pricing_3/config.ts"
    }
  ]
}