{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "boarding-pass",
  "type": "registry:ui",
  "title": "Boarding Pass",
  "description": "A boarding pass for trips, itineraries and invitations.",
  "files": [
    {
      "path": "ui/boarding-pass.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\ntype Place = { code: string; city: string };\n\nexport interface BoardingPassProps extends React.HTMLAttributes<HTMLDivElement> {\n  from: Place;\n  to: Place;\n  passenger: string;\n  airline?: string;\n  flight?: string;\n  date?: string;\n  boarding?: string;\n  gate?: string;\n  seat?: string;\n  group?: string;\n  accent?: string;\n}\n\nconst NOISE =\n  \"url(\\\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\\\")\";\n\nconst R = 12;\nconst notches = (x: string) =>\n  `radial-gradient(circle at ${x} 0, #0000 ${R}px, #000 ${R + 0.5}px) top / 100% 51% no-repeat, radial-gradient(circle at ${x} 100%, #0000 ${R}px, #000 ${R + 0.5}px) bottom / 100% 51% no-repeat`;\n\nfunction Barcode({ value, height }: { value: string; height: number }) {\n  let h = 2166136261;\n  let x = 0;\n  const rects: React.ReactNode[] = [];\n  for (let i = 0; i < value.length * 4 + 20; i++) {\n    h ^= value.charCodeAt(i % value.length) + i;\n    h = Math.imul(h, 16777619) >>> 0;\n    const w = (h % 3) + 1;\n    if (i % 2 === 0) rects.push(<rect key={i} x={x} y={0} width={w} height={height} />);\n    x += w;\n  }\n  return (\n    <svg viewBox={`0 0 ${x} ${height}`} preserveAspectRatio=\"none\" width=\"100%\" height={height} fill=\"currentColor\" aria-hidden>\n      {rects}\n    </svg>\n  );\n}\n\nconst mono = { fontFamily: \"var(--font-type, ui-monospace, monospace)\" };\n\nfunction Field({ label, value, big }: { label: string; value?: string; big?: boolean }) {\n  if (!value) return null;\n  return (\n    <div className=\"min-w-0\">\n      <div className=\"text-[9px] uppercase tracking-[0.22em] opacity-55\" style={mono}>\n        {label}\n      </div>\n      <div className={`truncate font-semibold ${big ? \"text-[20px]\" : \"text-[14px]\"}`}>{value}</div>\n    </div>\n  );\n}\n\nexport function BoardingPass({\n  from,\n  to,\n  passenger,\n  airline = \"EPHEMERA AIR\",\n  flight = \"EP 204\",\n  date = \"12 OCT\",\n  boarding = \"09:40\",\n  gate = \"B12\",\n  seat = \"14A\",\n  group = \"2\",\n  accent = \"#1f3b57\",\n  className = \"\",\n  style,\n  ...props\n}: BoardingPassProps) {\n  const surface: React.CSSProperties = { background: `${NOISE}, #fbfaf6`, color: \"#1d2329\" };\n\n  return (\n    <div\n      className={`flex w-full max-w-[600px] ${className}`}\n      style={{ filter: \"drop-shadow(0 8px 14px rgb(0 0 0 / .15)) drop-shadow(0 1px 1px rgb(0 0 0 / .12))\", ...style }}\n      {...props}\n    >\n      <div\n        className=\"min-w-0 flex-1 overflow-hidden rounded-l-[12px]\"\n        style={{ ...surface, mask: notches(\"100%\"), WebkitMask: notches(\"100%\") }}\n      >\n        <div className=\"flex items-center justify-between px-5 py-2.5 text-white\" style={{ background: accent }}>\n          <span className=\"text-[12px] font-bold tracking-[0.25em]\" style={mono}>\n            {airline}\n          </span>\n          <span className=\"text-[10px] tracking-[0.3em] opacity-80\" style={mono}>\n            BOARDING PASS\n          </span>\n        </div>\n        <div className=\"px-5 pb-5 pt-4\">\n          <div className=\"flex items-end justify-between gap-3\">\n            <div className=\"min-w-0\">\n              <div className=\"text-[44px] font-bold leading-none tracking-tight\" style={{ fontFamily: \"var(--font-display, Georgia, serif)\" }}>\n                {from.code}\n              </div>\n              <div className=\"mt-1 truncate text-[11px] uppercase tracking-[0.15em] opacity-60\" style={mono}>\n                {from.city}\n              </div>\n            </div>\n            <div className=\"mb-5 flex flex-1 items-center gap-1.5 opacity-70\" style={{ color: accent }}>\n              <div className=\"h-px flex-1 border-t border-dashed border-current\" />\n              <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n                <path d=\"M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z\" transform=\"rotate(90 12 12)\" />\n              </svg>\n              <div className=\"h-px flex-1 border-t border-dashed border-current\" />\n            </div>\n            <div className=\"min-w-0 text-right\">\n              <div className=\"text-[44px] font-bold leading-none tracking-tight\" style={{ fontFamily: \"var(--font-display, Georgia, serif)\" }}>\n                {to.code}\n              </div>\n              <div className=\"mt-1 truncate text-[11px] uppercase tracking-[0.15em] opacity-60\" style={mono}>\n                {to.city}\n              </div>\n            </div>\n          </div>\n          <div className=\"mt-5 grid grid-cols-3 gap-x-4 gap-y-3 sm:grid-cols-4\">\n            <div className=\"col-span-2\">\n              <Field label=\"Passenger\" value={passenger.toUpperCase()} />\n            </div>\n            <Field label=\"Flight\" value={flight} />\n            <Field label=\"Date\" value={date} />\n            <Field label=\"Boarding\" value={boarding} big />\n            <Field label=\"Gate\" value={gate} big />\n            <Field label=\"Seat\" value={seat} big />\n            <Field label=\"Group\" value={group} big />\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"relative flex w-[30%] min-w-[120px] shrink-0 flex-col overflow-hidden rounded-r-[12px]\"\n        style={{ ...surface, mask: notches(\"0\"), WebkitMask: notches(\"0\") }}\n      >\n        <div\n          className=\"absolute inset-y-3 left-0 w-[2px]\"\n          style={{ background: `radial-gradient(circle, ${accent}66 1px, transparent 1.5px) 0 0 / 2px 7px repeat-y` }}\n        />\n        <div className=\"py-2.5 text-center text-[10px] font-bold tracking-[0.25em] text-white\" style={{ ...mono, background: accent }}>\n          {flight}\n        </div>\n        <div className=\"flex flex-1 flex-col justify-between gap-3 px-4 pb-4 pt-3\">\n          <div className=\"text-[18px] font-bold tracking-tight\" style={{ fontFamily: \"var(--font-display, Georgia, serif)\" }}>\n            {from.code} → {to.code}\n          </div>\n          <div className=\"grid grid-cols-2 gap-2\">\n            <Field label=\"Seat\" value={seat} />\n            <Field label=\"Gate\" value={gate} />\n          </div>\n          <div>\n            <Barcode value={`${passenger}${flight}${seat}`} height={36} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "extras"
  ]
}