{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-split",
  "title": "Pricing Split",
  "description": "Two-plan split pricing: a compact entry plan beside an expanded featured plan.",
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "payload-components/source/blocks/shared/pricingFields.ts",
      "content": "import type { Field } from 'payload'\n\nimport { linkGroup } from '@/fields/linkGroup'\n\n/**\n * Shared field core for the Pricing component family.\n *\n * Every pricing variant (pricing-cards, pricing-cards-muted, pricing-cards-cta,\n * pricing-split, pricing-enterprise) spreads `pricingFields` for the section\n * heading and reuses `planFields` for the editable plan array. Editing the\n * shared shape here updates every installed pricing block at once, so the\n * family never drifts field-by-field across a repo.\n *\n * Each plan carries its own price, period, blurb, a `featured` flag (which\n * drives the emerald \"Popular\" highlight), a list of included features, and a\n * single CTA link group — so editors manage the whole pricing table from the\n * admin instead of shipping hardcoded copy.\n *\n * The layout structure is adapted from tailark/blocks (MIT) pricing blocks,\n * retokenized onto this repo's monochrome + emerald design system.\n *\n * Installed once per repo at `src/blocks/shared/pricingFields.ts`; re-running\n * `payload-components add pricing-*` never overwrites a copy you have already edited.\n */\nexport const pricingFields: Field[] = [\n  {\n    name: 'eyebrow',\n    type: 'text',\n  },\n  {\n    name: 'title',\n    type: 'text',\n    required: true,\n  },\n  {\n    name: 'description',\n    type: 'textarea',\n  },\n]\n\n/**\n * Subfields for one plan, reused as the `fields` of every variant's `plans`\n * array. `period` is optional (a one-off enterprise price may omit \"/ mo\"),\n * `featured` marks the highlighted column, and `link` is a single CTA group.\n */\nexport const planFields: Field[] = [\n  {\n    name: 'name',\n    type: 'text',\n    required: true,\n  },\n  {\n    name: 'price',\n    type: 'text',\n    required: true,\n  },\n  {\n    name: 'period',\n    type: 'text',\n  },\n  {\n    name: 'description',\n    type: 'text',\n  },\n  {\n    name: 'featured',\n    type: 'checkbox',\n    defaultValue: false,\n  },\n  {\n    name: 'features',\n    type: 'array',\n    required: true,\n    minRows: 1,\n    maxRows: 12,\n    admin: {\n      initCollapsed: true,\n    },\n    fields: [\n      {\n        name: 'feature',\n        type: 'text',\n        required: true,\n      },\n    ],\n  },\n  linkGroup({\n    overrides: {\n      admin: {\n        initCollapsed: true,\n      },\n      maxRows: 1,\n    },\n  }),\n]\n",
      "type": "registry:file",
      "target": "~/src/blocks/shared/pricingFields.ts"
    },
    {
      "path": "payload-components/source/blocks/PricingSplit/config.ts",
      "content": "import type { Block } from 'payload'\n\nimport { planFields, pricingFields } from '@/blocks/shared/pricingFields'\n\nexport const PricingSplit: Block = {\n  slug: 'pricingSplit',\n  // Existing apps must migrate stored data before adopting this identifier:\n  // https://www.payload-components.xyz/docs/registry#installed-source-and-migrations\n  dbName: 'pc_pri_spl',\n  interfaceName: 'PricingSplitBlock',\n  fields: [\n    // Shared pricing heading (eyebrow, title, description). Variant-specific\n    // fields follow; edit the shared shape in @/blocks/shared/pricingFields.\n    ...pricingFields,\n    {\n      name: 'plans',\n      type: 'array',\n      required: true,\n      // Exactly two plans: the entry plan on the left, the featured plan\n      // (mark one `featured`) expanded across the right panel.\n      minRows: 2,\n      maxRows: 2,\n      admin: {\n        initCollapsed: true,\n      },\n      fields: planFields,\n    },\n  ],\n  labels: {\n    plural: 'Pricing Split Blocks',\n    singular: 'Pricing Split',\n  },\n}\n",
      "type": "registry:file",
      "target": "~/src/blocks/PricingSplit/config.ts"
    },
    {
      "path": "payload-components/source/blocks/PricingSplit/Component.tsx",
      "content": "import { Check } from 'lucide-react'\nimport React from 'react'\n\nimport type { PricingSplitBlock as PricingSplitBlockData } from '@/payload-types'\n\nimport { CMSLink } from '@/components/Link'\nimport { Badge } from '@/components/ui/badge'\nimport { cn } from '@/utilities/ui'\n\n// Layout adapted from tailark/blocks (MIT) — re-implemented as a Payload block.\n\ntype Props = PricingSplitBlockData & {\n  id?: string\n  className?: string\n  disableInnerContainer?: boolean\n}\n\nexport const PricingSplitBlock: React.FC<Props> = ({\n  className,\n  description,\n  disableInnerContainer,\n  eyebrow,\n  id,\n  plans,\n  title,\n}) => {\n  // The featured plan takes the expanded right panel; the other becomes the\n  // entry plan on the left. Falls back to source order when none is marked.\n  const highlight = plans?.find((plan) => plan.featured) ?? plans?.[1]\n  const entry = plans?.find((plan) => plan !== highlight) ?? plans?.[0]\n\n  return (\n    <section className={cn('container', className)} id={id ? `block-${id}` : undefined}>\n      <div className=\"overflow-hidden rounded-frame border border-border/70 bg-card/35 px-6 py-10 sm:px-8 lg:px-12 lg:py-14\">\n        <div\n          className={cn('flex flex-col gap-10', {\n            'mx-auto max-w-5xl': !disableInnerContainer,\n          })}\n        >\n          <div className=\"mx-auto flex max-w-2xl flex-col gap-4 text-center\">\n            {eyebrow ? (\n              <Badge variant=\"outline\" className=\"mx-auto w-fit rounded-full px-3 py-1 uppercase tracking-eyebrow\">\n                {eyebrow}\n              </Badge>\n            ) : null}\n\n            <h2 className=\"text-4xl font-medium tracking-display text-balance sm:text-5xl\">{title}</h2>\n\n            {description ? (\n              <p className=\"text-base leading-7 text-muted-foreground sm:text-lg\">{description}</p>\n            ) : null}\n          </div>\n\n          {entry && highlight ? (\n            <div className=\"grid gap-6 md:grid-cols-5 md:gap-0\">\n              <div className=\"flex flex-col justify-between gap-8 rounded-frame border border-border/70 p-6 md:col-span-2 md:my-2 md:rounded-e-none md:border-e-0 lg:p-10\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-col gap-1\">\n                    <h3 className=\"font-medium tracking-title\">{entry.name}</h3>\n                    <div className=\"my-3 flex items-baseline gap-1\">\n                      <span className=\"text-2xl font-semibold\">{entry.price}</span>\n                      {entry.period ? (\n                        <span className=\"text-sm text-muted-foreground\">{entry.period}</span>\n                      ) : null}\n                    </div>\n                    {entry.description ? (\n                      <p className=\"text-sm text-muted-foreground\">{entry.description}</p>\n                    ) : null}\n                  </div>\n\n                  {entry.links && entry.links.length > 0 ? (\n                    <div className=\"flex flex-col gap-2\">\n                      {entry.links.map(({ link }, linkIndex) => (\n                        <CMSLink key={linkIndex} className=\"w-full\" {...link} appearance=\"outline\" />\n                      ))}\n                    </div>\n                  ) : null}\n\n                  <hr className=\"border-dashed\" />\n\n                  {entry.features && entry.features.length > 0 ? (\n                    <ul className=\"flex flex-col gap-3 text-sm\">\n                      {entry.features.map((item, featureIndex) => (\n                        <li\n                          key={item.id ?? `${item.feature}-${featureIndex}`}\n                          className=\"flex items-center gap-2\"\n                        >\n                          <Check aria-hidden=\"true\" className=\"size-3\" />\n                          {item.feature}\n                        </li>\n                      ))}\n                    </ul>\n                  ) : null}\n                </div>\n              </div>\n\n              <div className=\"rounded-frame border border-border/70 bg-background/60 p-6 shadow-none md:col-span-3 lg:p-10\">\n                <div className=\"grid gap-6 sm:grid-cols-2\">\n                  <div className=\"flex flex-col gap-4\">\n                    <div className=\"flex flex-col gap-1\">\n                      <div className=\"flex items-center gap-2\">\n                        <h3 className=\"font-medium tracking-title\">{highlight.name}</h3>\n                        {highlight.featured ? (\n                          <Badge className=\"rounded-full bg-brand px-3 py-1 text-xs font-medium text-brand-foreground\">\n                            Popular\n                          </Badge>\n                        ) : null}\n                      </div>\n                      <div className=\"my-3 flex items-baseline gap-1\">\n                        <span className=\"text-2xl font-semibold\">{highlight.price}</span>\n                        {highlight.period ? (\n                          <span className=\"text-sm text-muted-foreground\">{highlight.period}</span>\n                        ) : null}\n                      </div>\n                      {highlight.description ? (\n                        <p className=\"text-sm text-muted-foreground\">{highlight.description}</p>\n                      ) : null}\n                    </div>\n\n                    {highlight.links && highlight.links.length > 0 ? (\n                      <div className=\"flex flex-col gap-2\">\n                        {highlight.links.map(({ link }, linkIndex) => (\n                          <CMSLink key={linkIndex} className=\"w-full\" {...link} appearance=\"default\" />\n                        ))}\n                      </div>\n                    ) : null}\n                  </div>\n\n                  <div className=\"flex flex-col gap-4\">\n                    {highlight.features && highlight.features.length > 0 ? (\n                      <ul className=\"flex flex-col gap-3 text-sm\">\n                        {highlight.features.map((item, featureIndex) => (\n                          <li\n                            key={item.id ?? `${item.feature}-${featureIndex}`}\n                            className=\"flex items-center gap-2\"\n                          >\n                            <Check aria-hidden=\"true\" className=\"size-3\" />\n                            {item.feature}\n                          </li>\n                        ))}\n                      </ul>\n                    ) : null}\n                  </div>\n                </div>\n              </div>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:file",
      "target": "~/src/blocks/PricingSplit/Component.tsx"
    }
  ],
  "meta": {
    "payloadComponent": {
      "installCommand": "payload-components add pricing-split",
      "postInstall": [
        "generate:types",
        "generate:importmap"
      ],
      "requiresPayloadComponentWrapper": true,
      "supportedTargets": [
        "payload-website-starter",
        "payload-blocks-app"
      ]
    }
  },
  "docs": "Payload Components installs this as a Payload CMS block for the Payload website starter shape.\n\nRecommended install:\n\n```bash\npnpm payload-components add pricing-split\n```\n\nDirect shadcn install URL:\n\n```bash\npnpm dlx shadcn@latest add https://<your-domain>/r/pricing-split.json\n```\n\nDirect shadcn installs only copy the block source files and shadcn UI dependencies. Use `payload-components add pricing-split` when you also want Payload layout registration, `RenderBlocks` wiring, `generate:types`, and `generate:importmap` handled for you.",
  "type": "registry:block"
}