{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-16",
  "title": "Payment card switch",
  "description": "A switch card for a saved card, led by its brand mark.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/label.json",
    "https://ui.ndekocode.dev/r/switch.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/switch/switch-16.tsx",
      "content": "import { useId } from 'react';\n\nimport { Label } from '@/registry/ndeko/ui/label';\nimport { Switch } from '@/registry/ndeko/ui/switch';\n\nconst CHOICE_CARD = [\n  'relative flex w-full items-start gap-2 rounded-xl bg-card p-4 shadow-[0_1px_2px_rgb(0_0_0/0.04)] hairline-ring ring-border transition-[box-shadow] duration-150',\n  'has-data-checked:shadow-[0_1px_2px_rgb(0_0_0/0.04),0_6px_16px_-8px_color-mix(in_oklab,var(--primary)_35%,transparent)] has-data-checked:ring-primary/45',\n].join(' ');\n\nfunction MastercardMark() {\n  return (\n    <span\n      aria-hidden='true'\n      className='keycap-3d text-foreground inline-flex h-6 w-8 shrink-0 items-center justify-center rounded-sm'\n    >\n      <svg width={20} height={12.5} viewBox='0 0 24 15' fill='currentColor'>\n        <circle cx='7.5' cy='7.5' r='7.5' fillOpacity={0.85} />\n        <circle cx='16.5' cy='7.5' r='7.5' fillOpacity={0.45} />\n      </svg>\n    </span>\n  );\n}\n\nexport default function Switch16() {\n  const id = useId();\n  const descriptionId = `${id}-description`;\n\n  return (\n    <div className={CHOICE_CARD}>\n      <Switch\n        id={id}\n        aria-describedby={descriptionId}\n        className='order-1 after:absolute after:inset-0'\n      />\n      <div className='flex grow items-start gap-3'>\n        <MastercardMark />\n        <div className='grid grow gap-1.5'>\n          <Label htmlFor={id}>\n            Mastercard ending in 8821{' '}\n            <span className='text-muted-foreground text-xs leading-[inherit] font-normal'>\n              (Expires 09/28)\n            </span>\n          </Label>\n          <p id={descriptionId} className='text-muted-foreground text-xs'>\n            Charge this card when the plan renews.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "switch"
  ],
  "type": "registry:component"
}