{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theater-ticket-baseui",
  "type": "registry:component",
  "title": "Theater Ticket",
  "description": "Cinematic theater ticket with rip effect and barcode (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/theater-ticket-baseui.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { Calendar, Clock, MapPin, Star, Ticket } from \"lucide-react\";\n\nexport function TheaterTicketBaseui() {\n  return (\n    <div className=\"flex min-h-[400px] w-full items-center justify-center p-8\">\n      <motion.div\n        initial={{ opacity: 0, y: 20 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.6, ease: \"easeOut\" }}\n        whileHover={{ scale: 1.02 }}\n        className=\"group relative flex w-full max-w-2xl flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl md:flex-row\"\n        role=\"article\"\n        aria-label=\"Theater Ticket for The Phantom of the Opera\"\n      >\n        {/* Main Ticket Section */}\n        <div className=\"relative flex-1 overflow-hidden p-6 md:p-8\">\n          {/* Gradient Background */}\n          <div className=\"absolute inset-0 z-0 bg-gradient-to-br from-primary/10 to-card\" />\n\n          {/* Background Texture */}\n          <div className=\"absolute inset-0 z-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-10 mix-blend-overlay\" />\n\n          <div className=\"relative z-10 flex h-full flex-col justify-between space-y-6\">\n            <div className=\"flex items-start justify-between\">\n              <span className=\"inline-flex items-center rounded-full border border-primary/50 bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary\">\n                <Star className=\"mr-1 h-3 w-3 fill-current\" /> PREMIERE\n              </span>\n              <Ticket className=\"h-6 w-6 text-muted-foreground\" />\n            </div>\n\n            <div className=\"space-y-2\">\n              <motion.h2\n                className=\"font-serif text-3xl font-bold tracking-wide text-card-foreground md:text-4xl\"\n                initial={{ opacity: 0, x: -20 }}\n                animate={{ opacity: 1, x: 0 }}\n                transition={{ delay: 0.2 }}\n              >\n                THE PHANTOM\n                <br />\n                <span className=\"text-primary\">OF THE OPERA</span>\n              </motion.h2>\n              <p className=\"text-sm uppercase tracking-widest text-muted-foreground\">\n                Royal Albert Hall\n              </p>\n            </div>\n\n            <div className=\"grid grid-cols-3 gap-4 border-t border-border pt-4\">\n              <div>\n                <p className=\"mb-1 text-xs uppercase text-muted-foreground\">\n                  Date\n                </p>\n                <p className=\"flex items-center font-medium text-card-foreground\">\n                  <Calendar className=\"mr-2 h-3 w-3 text-primary\" />\n                  Dec 12\n                </p>\n              </div>\n              <div>\n                <p className=\"mb-1 text-xs uppercase text-muted-foreground\">\n                  Time\n                </p>\n                <p className=\"flex items-center font-medium text-card-foreground\">\n                  <Clock className=\"mr-2 h-3 w-3 text-primary\" />\n                  19:30\n                </p>\n              </div>\n              <div>\n                <p className=\"mb-1 text-xs uppercase text-muted-foreground\">\n                  Seat\n                </p>\n                <p className=\"flex items-center font-medium text-card-foreground\">\n                  <MapPin className=\"mr-2 h-3 w-3 text-primary\" />\n                  A-24\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Rip Line (Desktop) */}\n        <div className=\"relative hidden w-8 flex-col items-center justify-center bg-card md:flex\">\n          <div className=\"absolute -top-3 z-20 h-6 w-6 rounded-full border-b border-border bg-background\" />\n          <div className=\"mx-auto h-full border-l-2 border-dashed border-border\" />\n          <div className=\"absolute -bottom-3 z-20 h-6 w-6 rounded-full border-t border-border bg-background\" />\n        </div>\n\n        {/* Rip Line (Mobile) */}\n        <div className=\"relative flex h-8 w-full items-center justify-center bg-card md:hidden\">\n          <div className=\"absolute -left-3 z-20 h-6 w-6 rounded-full border-r border-border bg-background\" />\n          <div className=\"my-auto w-full border-t-2 border-dashed border-border\" />\n          <div className=\"absolute -right-3 z-20 h-6 w-6 rounded-full border-l border-border bg-background\" />\n        </div>\n\n        {/* Ticket Stub */}\n        <motion.div\n          className=\"relative flex w-full flex-col items-center justify-center border-l border-t border-border bg-muted/50 p-6 md:w-32 md:border-l md:border-t-0\"\n          whileHover={{ x: 5 }}\n          transition={{ type: \"spring\", stiffness: 300 }}\n        >\n          {/* Barcode Lines */}\n          <div\n            className=\"flex h-12 w-full justify-center space-x-1 opacity-70 md:h-24 md:flex-col md:space-x-0 md:space-y-1\"\n            role=\"img\"\n            aria-label=\"Barcode\"\n          >\n            {[...Array(12)].map((_, i) => (\n              <div\n                key={i}\n                className={`bg-foreground ${Math.random() > 0.5 ? \"h-full w-1 md:h-1 md:w-full\" : \"h-full w-2 md:h-2 md:w-full\"}`}\n              />\n            ))}\n          </div>\n          <div className=\"mt-4 text-center\">\n            <p className=\"origin-center whitespace-nowrap text-xs text-muted-foreground md:mt-8 md:rotate-90\">\n              ADMIT ONE\n            </p>\n          </div>\n        </motion.div>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/theater-ticket-baseui.tsx"
    }
  ]
}