{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ticket-sheet",
  "title": "Ticket sheet",
  "description": "A sheet of perforated tickets, one per option. Picking one tears it off. A radio group underneath.",
  "dependencies": [
    "@base-ui/react",
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/ticket-sheet.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup } from \"@base-ui/react/radio-group\"\nimport { cn } from \"cn\"\n\ntype TicketSheetProps = RadioGroup.Props<string>\n\n/** A sheet of perforated tickets, one per option. Picking one tears it off. */\nfunction TicketSheet({ className, ...props }: TicketSheetProps) {\n  return (\n    <RadioGroup\n      data-slot=\"ticket-sheet\"\n      className={cn(\"bevel-paper grid grid-cols-2 gap-1 rounded-(--bevel-radius-xs) p-3\", className)}\n      {...props}\n    />\n  )\n}\n\ntype TicketProps = RadioPrimitive.Root.Props<string> & {\n  tone?: \"vermilion\" | \"ultramarine\" | \"emerald\" | \"ochre\"\n}\n\nfunction Ticket({ className, tone = \"vermilion\", children, ...props }: TicketProps) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"ticket\"\n      data-tone={tone}\n      className={cn(\n        \"ticket-perforated group/ticket relative block cursor-pointer bg-(--bevel-paper) outline-none select-none\",\n        \"transition-[translate,rotate,filter] duration-(--bevel-duration-move) ease-(--bevel-ease-spring) motion-reduce:transition-none\",\n        \"data-checked:-translate-y-(--ticket-tear-lift) data-checked:rotate-(--ticket-tear-tilt) data-checked:drop-shadow-(--bevel-depth-cast-sm)\",\n        \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ticket-tone)\",\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"ticket-face\"\n        className=\"relative flex h-full flex-col items-start gap-1 bg-(--ticket-tone) p-3 text-(--ticket-foreground) shadow-(--bevel-depth-flush) outline outline-1 -outline-offset-4 outline-current/40\"\n      >\n        {children}\n      </span>\n    </RadioPrimitive.Root>\n  )\n}\n\nfunction TicketValue({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"ticket-value\"\n      className={cn(\"text-(length:--bevel-amount-minor) leading-none font-black tabular-nums\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TicketLabel({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"ticket-label\"\n      className={cn(\n        \"text-(length:--bevel-fine) font-bold tracking-(--bevel-tracking-print) uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Small print: a fee or what the option includes. */\nfunction TicketNote({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"ticket-note\"\n      className={cn(\"mt-auto text-(length:--bevel-fine)\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { TicketSheet, Ticket, TicketValue, TicketLabel, TicketNote }\nexport type { TicketSheetProps, TicketProps }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--ticket-hole": "0.25rem",
      "--ticket-tear-tilt": "-2deg",
      "--ticket-tear-lift": "0.375rem",
      "--ticket-vermilion": "oklch(0.5 0.17 32)",
      "--ticket-ultramarine": "oklch(0.45 0.15 265)",
      "--ticket-emerald": "oklch(0.44 0.1 160)",
      "--ticket-ochre": "oklch(0.78 0.13 80)",
      "--ticket-light-foreground": "oklch(0.98 0.01 90)",
      "--ticket-dark-foreground": "oklch(0.24 0.04 60)"
    },
    "[data-slot=\"ticket\"]": {
      "--ticket-tone": "var(--ticket-vermilion)",
      "--ticket-foreground": "var(--ticket-light-foreground)"
    },
    "[data-slot=\"ticket\"][data-tone=\"ultramarine\"]": {
      "--ticket-tone": "var(--ticket-ultramarine)"
    },
    "[data-slot=\"ticket\"][data-tone=\"emerald\"]": {
      "--ticket-tone": "var(--ticket-emerald)"
    },
    "[data-slot=\"ticket\"][data-tone=\"ochre\"]": {
      "--ticket-tone": "var(--ticket-ochre)",
      "--ticket-foreground": "var(--ticket-dark-foreground)"
    },
    "@utility ticket-perforated": {
      "padding": "calc(var(--ticket-hole) * 2)",
      "mask-image": "radial-gradient(circle, transparent var(--ticket-hole), black calc(var(--ticket-hole) + 0.5px)), linear-gradient(black, black)",
      "mask-size": "calc(var(--ticket-hole) * 3) calc(var(--ticket-hole) * 3), 100% 100%",
      "mask-position": "calc(var(--ticket-hole) * -1.5) calc(var(--ticket-hole) * -1.5), center",
      "mask-repeat": "round, no-repeat",
      "mask-clip": "border-box, content-box",
      "mask-origin": "border-box, content-box"
    }
  },
  "categories": [
    "money"
  ],
  "type": "registry:ui"
}