{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-146",
  "type": "registry:component",
  "registryDependencies": [
    "https://coss.com/origin/r/checkbox.json",
    "https://coss.com/origin/r/label.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-146.tsx",
      "content": "import { useId } from \"react\";\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n      <Checkbox\n        aria-describedby={`${id}-description`}\n        className=\"order-1 after:absolute after:inset-0\"\n        id={id}\n      />\n      <div className=\"flex grow items-center gap-3\">\n        <svg\n          aria-hidden=\"true\"\n          className=\"shrink-0\"\n          height={32}\n          width={32}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle cx=\"16\" cy=\"16\" fill=\"#121212\" r=\"16\" />\n          <g clipPath=\"url(#sb-a)\">\n            <path\n              d=\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\"\n              fill=\"url(#sb-b)\"\n            />\n            <path\n              d=\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\"\n              fill=\"url(#sb-c)\"\n              fillOpacity=\".2\"\n            />\n            <path\n              d=\"M14.375 6.367c.506-.638 1.532-.289 1.544.525l.078 11.903H8.094c-1.45 0-2.258-1.674-1.357-2.81l7.638-9.618Z\"\n              fill=\"#3ECF8E\"\n            />\n          </g>\n          <defs>\n            <linearGradient\n              gradientUnits=\"userSpaceOnUse\"\n              id=\"sb-b\"\n              x1=\"15.907\"\n              x2=\"23.02\"\n              y1=\"15.73\"\n              y2=\"18.713\"\n            >\n              <stop stopColor=\"#249361\" />\n              <stop offset=\"1\" stopColor=\"#3ECF8E\" />\n            </linearGradient>\n            <linearGradient\n              gradientUnits=\"userSpaceOnUse\"\n              id=\"sb-c\"\n              x1=\"12.753\"\n              x2=\"15.997\"\n              y1=\"11.412\"\n              y2=\"17.519\"\n            >\n              <stop />\n              <stop offset=\"1\" stopOpacity=\"0\" />\n            </linearGradient>\n            <clipPath id=\"sb-a\">\n              <path d=\"M6.354 6h19.292v20H6.354z\" fill=\"#fff\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <div className=\"grid gap-2\">\n          <Label htmlFor={id}>\n            Label{\" \"}\n            <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n              (Sublabel)\n            </span>\n          </Label>\n          <p className=\"text-muted-foreground text-xs\" id={`${id}-description`}>\n            A short description goes here.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "checkbox",
      "label",
      "card",
      "radix"
    ]
  }
}