{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-pricing",
  "title": "Pricing card",
  "description": "Styled card: the Pricing set. 5 decorative card variations (TierCard, FeaturedCard, CompactPricingCard, TogglePricingCard, ListPricingCard) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/card-pricing.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Pricing card family: 5 card templates showing a price and plan layout. The content is ENTIRELY placeholder: generic plan names, sample figures, filler rows like \"Feature one\". These cards are a template, not a real offer. Colour comes ONLY from semantic tokens, transparency through color-mix. size = the padding plus radius scale (the same as card-styled). */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst radii: Record<StyledSize, string> = {\n  sm: \"rounded-lg\",\n  md: \"rounded-xl\",\n  lg: \"rounded-2xl\",\n  xl: \"rounded-2xl\",\n}\n\nconst pads: Record<StyledSize, string> = {\n  sm: \"p-4\",\n  md: \"p-5\",\n  lg: \"p-6\",\n  xl: \"p-8\",\n}\n\nconst priceSizes: Record<StyledSize, string> = {\n  sm: \"text-2xl\",\n  md: \"text-3xl\",\n  lg: \"text-4xl\",\n  xl: \"text-5xl\",\n}\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\nconst shell = \"relative w-64 border border-border bg-card text-card-foreground\"\n\nconst planName = \"text-sm font-semibold text-foreground\"\nconst planNote = \"text-xs leading-relaxed text-muted-foreground\"\n\nconst cta =\n  \"mt-1 inline-flex h-9 w-full select-none items-center justify-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground outline-none transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-[color-mix(in_oklab,var(--color-primary)_88%,var(--color-foreground))] focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none\"\n\nconst ctaMuted =\n  \"mt-1 inline-flex h-9 w-full select-none items-center justify-center rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none\"\n\n/* Placeholder ozellik satirlari. Gercek bir ozellik listesi degildir. */\nconst featureList = [\"Feature one\", \"Feature two\", \"Feature three\"]\n\nfunction Price({ size, amount, unit }: { size: StyledSize; amount: string; unit?: string }) {\n  return (\n    <div className=\"flex items-baseline gap-1\">\n      <span className={cn(\"font-semibold tabular-nums text-foreground\", priceSizes[size])}>\n        {amount}\n      </span>\n      {unit ? <span className=\"text-xs text-muted-foreground\">{unit}</span> : null}\n    </div>\n  )\n}\n\nfunction Features({ items }: { items: string[] }) {\n  return (\n    <ul className=\"flex flex-col gap-2\">\n      {items.map((f) => (\n        <li\n          key={f}\n          className=\"flex items-center gap-2 text-xs text-muted-foreground [&>svg]:size-3.5 [&>svg]:shrink-0 [&>svg]:text-success [&>i]:text-sm [&>i]:leading-none [&>i]:text-success\"\n        >\n          <Check />\n          {f}\n        </li>\n      ))}\n    </ul>\n  )\n}\n\n/* Tier: temel paket karti. Ad + fiyat + kisa not + eylem. */\nexport function TierCard({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(shell, radii[size], pads[size], className)}\n      {...props}\n    >\n      {children ?? (\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"flex flex-col gap-1\">\n            <span className={planName}>Plan name</span>\n            <span className={planNote}>A short line describing the plan.</span>\n          </div>\n          <Price size={size} amount=\"$00\" unit=\"/ month\" />\n          <button type=\"button\" className={ctaMuted}>\n            Choose plan\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\n/* Featured: one cikan paket. Token ring + rozet ile isaretlenir. */\nexport function FeaturedCard({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(\n        shell,\n        \"border-transparent ring-2 ring-primary\",\n        radii[size],\n        pads[size],\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute -top-2.5 right-4 rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-foreground\">\n        Highlight\n      </span>\n      {children ?? (\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"flex flex-col gap-1\">\n            <span className={planName}>Plan name</span>\n            <span className={planNote}>The tier a template would emphasise.</span>\n          </div>\n          <Price size={size} amount=\"$00\" unit=\"/ month\" />\n          <Features items={featureList} />\n          <button type=\"button\" className={cta}>\n            Choose plan\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\n/* Compact: name and price on one line. For dense lists. */\nexport function CompactPricingCard({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(shell, radii[size], pads[size], className)}\n      {...props}\n    >\n      {children ?? (\n        <div className=\"flex items-center justify-between gap-4\">\n          <div className=\"flex flex-col gap-0.5\">\n            <span className={planName}>Plan name</span>\n            <span className={planNote}>Per seat</span>\n          </div>\n          <span className=\"text-lg font-semibold tabular-nums text-foreground\">$00</span>\n        </div>\n      )}\n    </div>\n  )\n}\n\n/* Toggle: a monthly/yearly switcher. The state is held inside the component and\n   both prices are placeholders. */\nexport function TogglePricingCard({ className, size = \"md\", children, ...props }: Props) {\n  const [yearly, setYearly] = React.useState(false)\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(shell, radii[size], pads[size], className)}\n      {...props}\n    >\n      {children ?? (\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"flex flex-col gap-1\">\n            <span className={planName}>Plan name</span>\n            <span className={planNote}>Switch the billing period.</span>\n          </div>\n          <div\n            role=\"group\"\n            aria-label=\"Billing period\"\n            className=\"inline-flex w-fit rounded-lg border border-border bg-surface-2 p-0.5\"\n          >\n            {([\"Monthly\", \"Yearly\"] as const).map((period) => {\n              const active = (period === \"Yearly\") === yearly\n              return (\n                <button\n                  key={period}\n                  type=\"button\"\n                  aria-pressed={active}\n                  onClick={() => setYearly(period === \"Yearly\")}\n                  className={cn(\n                    \"select-none rounded-md px-2.5 py-1 text-xs font-medium outline-none transition-colors duration-(--motion-fast) ease-(--motion-ease) focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none\",\n                    active\n                      ? \"bg-card text-foreground shadow-sm\"\n                      : \"text-muted-foreground hover:text-foreground\"\n                  )}\n                >\n                  {period}\n                </button>\n              )\n            })}\n          </div>\n          <Price size={size} amount=\"$00\" unit={yearly ? \"/ year\" : \"/ month\"} />\n        </div>\n      )}\n    </div>\n  )\n}\n\n/* List: ozellik listesi one cikan paket karti. */\nexport function ListPricingCard({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(shell, radii[size], pads[size], className)}\n      {...props}\n    >\n      {children ?? (\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"flex items-baseline justify-between gap-3\">\n            <span className={planName}>Plan name</span>\n            <Price size=\"sm\" amount=\"$00\" unit=\"/ month\" />\n          </div>\n          <span aria-hidden=\"true\" className=\"h-px w-full bg-border\" />\n          <Features items={[...featureList, \"Feature four\"]} />\n          <button type=\"button\" className={ctaMuted}>\n            Choose plan\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/card-pricing.tsx"
    }
  ],
  "categories": [
    "styled",
    "card"
  ],
  "type": "registry:component"
}