@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-redesign-mockups/events-detail-attendees-chec-3.js

@@ -0,0 +1,297 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Mail, Repeat, Users } from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import {
+  Caption,
+  StatusBar,
+  TabBar,
+  hideScrollbar
+} from "./pill-presets-tailwind-utilit";
+import { Metric } from "./today-single-intent";
+import { SettingsRow } from "./wizard-payments";
+function FauxQrCode() {
+  const SIZE = 11;
+  const cells = Array.from(
+    { length: SIZE },
+    () => Array(SIZE).fill(false)
+  );
+  for (let r = 0; r < SIZE; r++) {
+    for (let c = 0; c < SIZE; c++) {
+      cells[r][c] = (r * 7 + c * 13 + r * c) % 3 !== 0;
+    }
+  }
+  const carveFinder = (r, c) => {
+    for (let i = -1; i <= 3; i++)
+      for (let j = -1; j <= 3; j++) {
+        if (r + i >= 0 && r + i < SIZE && c + j >= 0 && c + j < SIZE)
+          cells[r + i][c + j] = false;
+      }
+  };
+  carveFinder(0, 0);
+  carveFinder(0, SIZE - 3);
+  carveFinder(SIZE - 3, 0);
+  const Finder = ({ top, left }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute",
+      style: {
+        top,
+        left,
+        width: "24%",
+        aspectRatio: "1 / 1",
+        background: "#000",
+        padding: "14%",
+        borderRadius: 4
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            width: "100%",
+            height: "100%",
+            padding: "22%",
+            borderRadius: 2
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                background: "#000",
+                width: "100%",
+                height: "100%",
+                borderRadius: 1
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: 168, height: 168 }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "grid",
+        style: {
+          gridTemplateColumns: `repeat(${SIZE}, 1fr)`,
+          gridTemplateRows: `repeat(${SIZE}, 1fr)`,
+          gap: 2,
+          width: "100%",
+          height: "100%",
+          padding: 6,
+          background: "#fff"
+        },
+        children: cells.flat().map((on, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              background: on ? "#0E1117" : "transparent",
+              borderRadius: 1
+            }
+          },
+          i
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(Finder, { top: "0", left: "0" }),
+    /* @__PURE__ */ jsx(Finder, { top: "0", left: "76%" }),
+    /* @__PURE__ */ jsx(Finder, { top: "76%", left: "0" })
+  ] });
+}
+function TodaySubscriptions() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-32", children: [
+      /* @__PURE__ */ jsxs("header", { className: "pt-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-2xs", style: { color: tokens.textTertiary }, children: "Subscriptions \xB7 today" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "mt-1 flex items-center gap-1.5 text-left",
+            children: [
+              /* @__PURE__ */ jsx("h1", { className: "text-[22px] font-bold leading-[1.1] tracking-tight text-white", children: "Lagos Gym Club" }),
+              /* @__PURE__ */ jsx(ChevronDown, { className: "mt-1 size-5 text-[#94A0B5]" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-4 rounded-3xl border p-5",
+          style: {
+            borderColor: "rgba(17,109,255,0.28)",
+            background: "rgba(17,109,255,0.08)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-3xs font-semibold",
+                style: { color: tokens.accent },
+                children: "MRR \xB7 April"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-[28px] font-bold leading-none tabular-nums text-white", children: "\u20A64,820,000" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", style: { color: tokens.textSecondary }, children: "+6.2% MoM \xB7 412 active subscribers \xB7 churn 2.1%" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `mt-4 -mx-4 flex gap-3 overflow-x-auto px-4 ${hideScrollbar}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              Metric,
+              {
+                value: "412",
+                label: "Active subs",
+                trend: "+18 this month",
+                tone: "good"
+              }
+            ),
+            /* @__PURE__ */ jsx(Metric, { value: "9", label: "Churned", trend: "\u22122 vs last", tone: "warn" }),
+            /* @__PURE__ */ jsx(Metric, { value: "14", label: "Renewals due", trend: "this week" }),
+            /* @__PURE__ */ jsx(Metric, { value: "3", label: "Dunning", trend: "needs you", tone: "warn" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Renewals due this week" }),
+        /* @__PURE__ */ jsx(
+          SubRow,
+          {
+            name: "Tunde Adekunle",
+            plan: "Quarterly \xB7 \u20A645,000",
+            date: "Renews Apr 27",
+            tone: "warn"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SubRow,
+          {
+            name: "Aisha Olatunji",
+            plan: "Monthly \xB7 \u20A615,000",
+            date: "Renews Apr 28"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SubRow,
+          {
+            name: "Chidi Eze",
+            plan: "Annual \xB7 \u20A6150,000",
+            date: "Renews May 1"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-5 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Dunning queue" }),
+        /* @__PURE__ */ jsx(
+          SubRow,
+          {
+            name: "Emeka Nwosu",
+            plan: "Monthly \xB7 \u20A615,000",
+            date: "Card declined \xB7 attempt 2 of 4",
+            tone: "bad"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SubRow,
+          {
+            name: "Ezinne Mba",
+            plan: "Monthly \xB7 \u20A615,000",
+            date: "Card declined \xB7 attempt 1 of 4",
+            tone: "bad"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-5 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Tools" }),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Repeat,
+            label: "Plans & pricing",
+            hint: "3 active plans \xB7 2 add-ons"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Users,
+            label: "All subscribers",
+            hint: "412 \xB7 9 paused \xB7 18 cancelled"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Mail,
+            label: "Lifecycle emails",
+            hint: "Welcome \xB7 renewal \xB7 win-back"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TabBar, { active: "today" })
+  ] });
+}
+function SubRow({
+  name,
+  plan,
+  date,
+  tone
+}) {
+  const dateColor = tone === "bad" ? tokens.bad : tone === "warn" ? tokens.warn : tokens.textTertiary;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex w-full items-center gap-3 rounded-2xl border p-3.5 text-left",
+      style: {
+        borderColor: tokens.border,
+        background: tokens.card,
+        minHeight: 64
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-xs font-bold",
+            style: { background: tokens.elevated, color: tokens.textSecondary },
+            children: name.split(" ").map((n) => n[0]).slice(0, 2).join("")
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-white", children: name }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 truncate text-2xs",
+              style: { color: tokens.textTertiary },
+              children: plan
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "shrink-0 text-2xs font-semibold",
+            style: { color: dateColor },
+            children: date
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  FauxQrCode,
+  SubRow,
+  TodaySubscriptions
+};
+//# sourceMappingURL=events-detail-attendees-chec-3.js.map

package/dist/mobile/mobile-redesign-mockups/events-detail-attendees-chec-3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/events-detail-attendees-chec-3.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown, Mail, Repeat, Users } from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\nimport {\n  Caption,\n  StatusBar,\n  TabBar,\n  hideScrollbar,\n} from './pill-presets-tailwind-utilit';\nimport { Metric } from './today-single-intent';\nimport { SettingsRow } from './wizard-payments';\n\n/**\n * Events — detail, attendees, check-in, ticket\n *\n * One chapter of the mobile visual contract. ~40 screens cite this file as\n * the spec they implement, so the markup here is the artifact and is never\n * converted onto primitives — see CLAUDE.md. Splitting it moves nothing:\n * every screen is the same markup, in a file named for what it draws.\n */\n\nexport function FauxQrCode() {\n  // Deterministic 9x9 pseudo-QR — visual, not real. Anchored finder squares + noisy modules.\n  const SIZE = 11;\n  const cells: boolean[][] = Array.from({ length: SIZE }, () =>\n    Array(SIZE).fill(false),\n  );\n  // Fill with deterministic pattern\n  for (let r = 0; r < SIZE; r++) {\n    for (let c = 0; c < SIZE; c++) {\n      cells[r][c] = (r * 7 + c * 13 + r * c) % 3 !== 0;\n    }\n  }\n  // Carve out finder areas\n  const carveFinder = (r: number, c: number) => {\n    for (let i = -1; i <= 3; i++)\n      for (let j = -1; j <= 3; j++) {\n        if (r + i >= 0 && r + i < SIZE && c + j >= 0 && c + j < SIZE)\n          cells[r + i][c + j] = false;\n      }\n  };\n  carveFinder(0, 0);\n  carveFinder(0, SIZE - 3);\n  carveFinder(SIZE - 3, 0);\n\n  const Finder = ({ top, left }: { top: string; left: string }) => (\n    <div\n      className=\"absolute\"\n      style={{\n        top,\n        left,\n        width: '24%',\n        aspectRatio: '1 / 1',\n        background: '#000',\n        padding: '14%',\n        borderRadius: 4,\n      }}\n    >\n      <div\n        style={{\n          background: '#fff',\n          width: '100%',\n          height: '100%',\n          padding: '22%',\n          borderRadius: 2,\n        }}\n      >\n        <div\n          style={{\n            background: '#000',\n            width: '100%',\n            height: '100%',\n            borderRadius: 1,\n          }}\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"relative\" style={{ width: 168, height: 168 }}>\n      <div\n        className=\"grid\"\n        style={{\n          gridTemplateColumns: `repeat(${SIZE}, 1fr)`,\n          gridTemplateRows: `repeat(${SIZE}, 1fr)`,\n          gap: 2,\n          width: '100%',\n          height: '100%',\n          padding: 6,\n          background: '#fff',\n        }}\n      >\n        {cells.flat().map((on, i) => (\n          <span\n            key={i}\n            style={{\n              background: on ? '#0E1117' : 'transparent',\n              borderRadius: 1,\n            }}\n          />\n        ))}\n      </div>\n      <Finder top=\"0\" left=\"0\" />\n      <Finder top=\"0\" left=\"76%\" />\n      <Finder top=\"76%\" left=\"0\" />\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Today — per-intent variants\n// ─────────────────────────────────────────────────────────────\nexport function TodaySubscriptions() {\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <div className=\"flex-1 overflow-y-auto px-4 pb-32\">\n        <header className=\"pt-3\">\n          <p className=\"text-2xs\" style={{ color: tokens.textTertiary }}>\n            Subscriptions · today\n          </p>\n          <button\n            type=\"button\"\n            className=\"mt-1 flex items-center gap-1.5 text-left\"\n          >\n            <h1 className=\"text-[22px] font-bold leading-[1.1] tracking-tight text-white\">\n              Lagos Gym Club\n            </h1>\n            <ChevronDown className=\"mt-1 size-5 text-[#94A0B5]\" />\n          </button>\n        </header>\n\n        {/* MRR hero */}\n        <section\n          className=\"mt-4 rounded-3xl border p-5\"\n          style={{\n            borderColor: 'rgba(17,109,255,0.28)',\n            background: 'rgba(17,109,255,0.08)',\n          }}\n        >\n          <p\n            className=\"text-3xs font-semibold\"\n            style={{ color: tokens.accent }}\n          >\n            MRR · April\n          </p>\n          <p className=\"mt-1 text-[28px] font-bold leading-none tabular-nums text-white\">\n            ₦4,820,000\n          </p>\n          <p className=\"mt-1 text-xs\" style={{ color: tokens.textSecondary }}>\n            +6.2% MoM · 412 active subscribers · churn 2.1%\n          </p>\n        </section>\n\n        <div\n          className={`mt-4 -mx-4 flex gap-3 overflow-x-auto px-4 ${hideScrollbar}`}\n        >\n          <Metric\n            value=\"412\"\n            label=\"Active subs\"\n            trend=\"+18 this month\"\n            tone=\"good\"\n          />\n          <Metric value=\"9\" label=\"Churned\" trend=\"−2 vs last\" tone=\"warn\" />\n          <Metric value=\"14\" label=\"Renewals due\" trend=\"this week\" />\n          <Metric value=\"3\" label=\"Dunning\" trend=\"needs you\" tone=\"warn\" />\n        </div>\n\n        {/* Renewals */}\n        <section className=\"mt-6 space-y-2\">\n          <Caption>Renewals due this week</Caption>\n          <SubRow\n            name=\"Tunde Adekunle\"\n            plan=\"Quarterly · ₦45,000\"\n            date=\"Renews Apr 27\"\n            tone=\"warn\"\n          />\n          <SubRow\n            name=\"Aisha Olatunji\"\n            plan=\"Monthly · ₦15,000\"\n            date=\"Renews Apr 28\"\n          />\n          <SubRow\n            name=\"Chidi Eze\"\n            plan=\"Annual · ₦150,000\"\n            date=\"Renews May 1\"\n          />\n        </section>\n\n        {/* Dunning */}\n        <section className=\"mt-5 space-y-2\">\n          <Caption>Dunning queue</Caption>\n          <SubRow\n            name=\"Emeka Nwosu\"\n            plan=\"Monthly · ₦15,000\"\n            date=\"Card declined · attempt 2 of 4\"\n            tone=\"bad\"\n          />\n          <SubRow\n            name=\"Ezinne Mba\"\n            plan=\"Monthly · ₦15,000\"\n            date=\"Card declined · attempt 1 of 4\"\n            tone=\"bad\"\n          />\n        </section>\n\n        <section className=\"mt-5 space-y-2\">\n          <Caption>Tools</Caption>\n          <SettingsRow\n            icon={Repeat}\n            label=\"Plans &amp; pricing\"\n            hint=\"3 active plans · 2 add-ons\"\n          />\n          <SettingsRow\n            icon={Users}\n            label=\"All subscribers\"\n            hint=\"412 · 9 paused · 18 cancelled\"\n          />\n          <SettingsRow\n            icon={Mail}\n            label=\"Lifecycle emails\"\n            hint=\"Welcome · renewal · win-back\"\n          />\n        </section>\n      </div>\n      <TabBar active=\"today\" />\n    </div>\n  );\n}\n\nexport function SubRow({\n  name,\n  plan,\n  date,\n  tone,\n}: {\n  name: string;\n  plan: string;\n  date: string;\n  tone?: 'warn' | 'bad';\n}) {\n  const dateColor =\n    tone === 'bad'\n      ? tokens.bad\n      : tone === 'warn'\n        ? tokens.warn\n        : tokens.textTertiary;\n  return (\n    <button\n      type=\"button\"\n      className=\"flex w-full items-center gap-3 rounded-2xl border p-3.5 text-left\"\n      style={{\n        borderColor: tokens.border,\n        background: tokens.card,\n        minHeight: 64,\n      }}\n    >\n      <div\n        className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-xs font-bold\"\n        style={{ background: tokens.elevated, color: tokens.textSecondary }}\n      >\n        {name\n          .split(' ')\n          .map((n) => n[0])\n          .slice(0, 2)\n          .join('')}\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"truncate text-sm font-medium text-white\">{name}</p>\n        <p\n          className=\"mt-0.5 truncate text-2xs\"\n          style={{ color: tokens.textTertiary }}\n        >\n          {plan}\n        </p>\n      </div>\n      <span\n        className=\"shrink-0 text-2xs font-semibold\"\n        style={{ color: dateColor }}\n      >\n        {date}\n      </span>\n    </button>\n  );\n}\n"],"mappings":";AAoEQ,cAaJ,YAbI;AAlER,SAAS,aAAa,MAAM,QAAQ,aAAa;AACjD,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAWrB,SAAS,aAAa;AAE3B,QAAM,OAAO;AACb,QAAM,QAAqB,MAAM;AAAA,IAAK,EAAE,QAAQ,KAAK;AAAA,IAAG,MACtD,MAAM,IAAI,EAAE,KAAK,KAAK;AAAA,EACxB;AAEA,WAAS,IAAI,GAAG,IAAI,MAAM,KAAK;AAC7B,aAAS,IAAI,GAAG,IAAI,MAAM,KAAK;AAC7B,YAAM,CAAC,EAAE,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,MAAM;AAAA,IACjD;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,GAAW,MAAc;AAC5C,aAAS,IAAI,IAAI,KAAK,GAAG;AACvB,eAAS,IAAI,IAAI,KAAK,GAAG,KAAK;AAC5B,YAAI,IAAI,KAAK,KAAK,IAAI,IAAI,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI;AACtD,gBAAM,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI;AAAA,MAC1B;AAAA,EACJ;AACA,cAAY,GAAG,CAAC;AAChB,cAAY,GAAG,OAAO,CAAC;AACvB,cAAY,OAAO,GAAG,CAAC;AAEvB,QAAM,SAAS,CAAC,EAAE,KAAK,KAAK,MAC1B;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,cAAc;AAAA,MAChB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,cAAc;AAAA,UAChB;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,cAAc;AAAA,cAChB;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAGF,SACE,qBAAC,SAAI,WAAU,YAAW,OAAO,EAAE,OAAO,KAAK,QAAQ,IAAI,GACzD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,qBAAqB,UAAU,IAAI;AAAA,UACnC,kBAAkB,UAAU,IAAI;AAAA,UAChC,KAAK;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAY;AAAA,QACd;AAAA,QAEC,gBAAM,KAAK,EAAE,IAAI,CAAC,IAAI,MACrB;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO;AAAA,cACL,YAAY,KAAK,YAAY;AAAA,cAC7B,cAAc;AAAA,YAChB;AAAA;AAAA,UAJK;AAAA,QAKP,CACD;AAAA;AAAA,IACH;AAAA,IACA,oBAAC,UAAO,KAAI,KAAI,MAAK,KAAI;AAAA,IACzB,oBAAC,UAAO,KAAI,KAAI,MAAK,OAAM;AAAA,IAC3B,oBAAC,UAAO,KAAI,OAAM,MAAK,KAAI;AAAA,KAC7B;AAEJ;AAKO,SAAS,qBAAqB;AACnC,SACE,qBAAC,SAAI,WAAU,wBACb;AAAA,wBAAC,aAAU;AAAA,IACX,qBAAC,SAAI,WAAU,qCACb;AAAA,2BAAC,YAAO,WAAU,QAChB;AAAA,4BAAC,OAAE,WAAU,YAAW,OAAO,EAAE,OAAO,OAAO,aAAa,GAAG,sCAE/D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YAEV;AAAA,kCAAC,QAAG,WAAU,iEAAgE,4BAE9E;AAAA,cACA,oBAAC,eAAY,WAAU,8BAA6B;AAAA;AAAA;AAAA,QACtD;AAAA,SACF;AAAA,MAGA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,aAAa;AAAA,YACb,YAAY;AAAA,UACd;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,OAAO,OAAO;AAAA,gBAC/B;AAAA;AAAA,YAED;AAAA,YACA,oBAAC,OAAE,WAAU,mEAAkE,6BAE/E;AAAA,YACA,oBAAC,OAAE,WAAU,gBAAe,OAAO,EAAE,OAAO,OAAO,cAAc,GAAG,mEAEpE;AAAA;AAAA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,8CAA8C,aAAa;AAAA,UAEtE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,MAAK;AAAA;AAAA,YACP;AAAA,YACA,oBAAC,UAAO,OAAM,KAAI,OAAM,WAAU,OAAM,mBAAa,MAAK,QAAO;AAAA,YACjE,oBAAC,UAAO,OAAM,MAAK,OAAM,gBAAe,OAAM,aAAY;AAAA,YAC1D,oBAAC,UAAO,OAAM,KAAI,OAAM,WAAU,OAAM,aAAY,MAAK,QAAO;AAAA;AAAA;AAAA,MAClE;AAAA,MAGA,qBAAC,aAAQ,WAAU,kBACjB;AAAA,4BAAC,WAAQ,oCAAsB;AAAA,QAC/B;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,SACF;AAAA,MAGA,qBAAC,aAAQ,WAAU,kBACjB;AAAA,4BAAC,WAAQ,2BAAa;AAAA,QACtB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,SACF;AAAA,MAEA,qBAAC,aAAQ,WAAU,kBACjB;AAAA,4BAAC,WAAQ,mBAAK;AAAA,QACd;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,SACF;AAAA,OACF;AAAA,IACA,oBAAC,UAAO,QAAO,SAAQ;AAAA,KACzB;AAEJ;AAEO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,YACJ,SAAS,QACL,OAAO,MACP,SAAS,SACP,OAAO,OACP,OAAO;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO;AAAA,QACL,aAAa,OAAO;AAAA,QACpB,YAAY,OAAO;AAAA,QACnB,WAAW;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,OAAO,UAAU,OAAO,OAAO,cAAc;AAAA,YAEjE,eACE,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EACf,MAAM,GAAG,CAAC,EACV,KAAK,EAAE;AAAA;AAAA,QACZ;AAAA,QACA,qBAAC,SAAI,WAAU,kBACb;AAAA,8BAAC,OAAE,WAAU,2CAA2C,gBAAK;AAAA,UAC7D;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,OAAO,aAAa;AAAA,cAEnC;AAAA;AAAA,UACH;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,UAAU;AAAA,YAEzB;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/mobile/mobile-redesign-mockups/events-detail-attendees-chec.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Events — detail, attendees, check-in, ticket
+ *
+ * One chapter of the mobile visual contract. ~40 screens cite this file as
+ * the spec they implement, so the markup here is the artifact and is never
+ * converted onto primitives — see CLAUDE.md. Splitting it moves nothing:
+ * every screen is the same markup, in a file named for what it draws.
+ */
+export declare function TicketTier({ name, price, sold, cap, sold_out, }: {
+    name: string;
+    price: string;
+    sold: number;
+    cap: number;
+    sold_out?: boolean;
+}): import("react").JSX.Element;
+export declare function AttendeesList(): import("react").JSX.Element;
+export declare function Chip({ label, active, count, }: {
+    label: string;
+    active?: boolean;
+    count?: number;
+}): import("react").JSX.Element;
+export declare function AttendeeRow({ name, tier, status, meta, }: {
+    name: string;
+    tier: string;
+    status: 'checked' | 'pending' | 'refunded';
+    meta: string;
+}): import("react").JSX.Element;

package/dist/mobile/mobile-redesign-mockups/events-detail-attendees-chec.js

@@ -0,0 +1,313 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Filter, QrCode, Search } from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import { StatusBar, hideScrollbar } from "./pill-presets-tailwind-utilit";
+import { HubHeader } from "./drill-chrome-sub-app-header-";
+function TicketTier({
+  name,
+  price,
+  sold,
+  cap,
+  sold_out
+}) {
+  const pct = Math.round(sold / cap * 100);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-2xl border p-3",
+      style: { borderColor: tokens.border, background: tokens.card },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-md font-semibold text-white", children: name }),
+              sold_out && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "rounded-full px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wider",
+                  style: { background: `${tokens.bad}1A`, color: tokens.bad },
+                  children: "Sold out"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: "mt-0.5 text-2xs tabular-nums",
+                style: { color: tokens.textTertiary },
+                children: [
+                  price,
+                  " \xB7 ",
+                  sold,
+                  " / ",
+                  cap
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "text-xs font-semibold tabular-nums",
+              style: { color: sold_out ? tokens.bad : tokens.textSecondary },
+              children: [
+                pct,
+                "%"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mt-2 h-1 w-full overflow-hidden rounded-full",
+            style: { background: tokens.elevated },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full rounded-full",
+                style: {
+                  width: `${pct}%`,
+                  background: sold_out ? tokens.bad : tokens.accent
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function AttendeesList() {
+  const groups = [
+    {
+      letter: "A",
+      rows: [
+        {
+          name: "Adaeze Okonkwo",
+          tier: "VIP",
+          status: "pending",
+          meta: "+234 803 421 \xB7\xB7\xB7 \xB7 #T-0142"
+        },
+        {
+          name: "Aisha Olatunji",
+          tier: "General",
+          status: "pending",
+          meta: "aisha@gmail.com \xB7 #T-0098"
+        }
+      ]
+    },
+    {
+      letter: "C",
+      rows: [
+        {
+          name: "Chidi Eze",
+          tier: "Early bird",
+          status: "pending",
+          meta: "+234 805 \xB7\xB7\xB7 \xB7 #T-0017"
+        }
+      ]
+    },
+    {
+      letter: "E",
+      rows: [
+        {
+          name: "Emeka Nwosu",
+          tier: "Early bird",
+          status: "pending",
+          meta: "emeka@potter.shop \xB7 #T-0041"
+        },
+        {
+          name: "Ezinne Mba",
+          tier: "General",
+          status: "refunded",
+          meta: "Refunded Apr 22 \xB7 #T-0103"
+        }
+      ]
+    },
+    {
+      letter: "T",
+      rows: [
+        {
+          name: "Tunde Adekunle",
+          tier: "General",
+          status: "pending",
+          meta: "+234 802 \xB7\xB7\xB7 \xB7 #T-0084"
+        }
+      ]
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsx(
+      HubHeader,
+      {
+        title: "Attendees \xB7 187",
+        trailing: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Filter",
+            className: "flex h-9 w-9 items-center justify-center",
+            children: /* @__PURE__ */ jsx(Filter, { className: "size-4 text-[#C9D0DD]" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto pb-24", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-4 pt-2", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-2 rounded-2xl border px-3",
+          style: {
+            borderColor: tokens.border,
+            background: tokens.card,
+            height: 44
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Search,
+              {
+                className: "size-4",
+                style: { color: tokens.textTertiary }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm", style: { color: tokens.textTertiary }, children: "Search by name, email, or ticket #" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `mt-3 flex gap-2 overflow-x-auto px-4 pb-1 ${hideScrollbar}`,
+          children: [
+            /* @__PURE__ */ jsx(Chip, { label: "All", active: true, count: 187 }),
+            /* @__PURE__ */ jsx(Chip, { label: "Pending", count: 185 }),
+            /* @__PURE__ */ jsx(Chip, { label: "Checked in", count: 0 }),
+            /* @__PURE__ */ jsx(Chip, { label: "Refunded", count: 2 }),
+            /* @__PURE__ */ jsx(Chip, { label: "VIP", count: 2 }),
+            /* @__PURE__ */ jsx(Chip, { label: "General", count: 65 })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mx-4 mt-3 flex items-center gap-3 rounded-2xl border p-3.5",
+          style: {
+            borderColor: "rgba(17,109,255,0.28)",
+            background: "rgba(17,109,255,0.08)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(QrCode, { className: "size-4", style: { color: tokens.accent } }),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "min-w-0 flex-1 text-xs",
+                style: { color: tokens.textSecondary },
+                children: "Doors open 8:30 PM. Open the scanner from Event detail or the FAB."
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mt-3", children: groups.map((g) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "px-4 py-1 text-3xs font-semibold",
+            style: {
+              color: tokens.textTertiary,
+              background: `${tokens.surface}`
+            },
+            children: g.letter
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1 px-4", children: g.rows.map((r) => /* @__PURE__ */ jsx(AttendeeRow, { ...r }, r.name)) })
+      ] }, g.letter)) })
+    ] })
+  ] });
+}
+function Chip({
+  label,
+  active,
+  count
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-3 text-xs font-medium",
+      style: {
+        borderColor: active ? tokens.accent : tokens.border,
+        background: active ? `${tokens.accent}1A` : tokens.card,
+        color: active ? tokens.accent : tokens.textSecondary
+      },
+      children: [
+        label,
+        count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-2xs tabular-nums", style: { opacity: 0.75 }, children: count })
+      ]
+    }
+  );
+}
+function AttendeeRow({
+  name,
+  tier,
+  status,
+  meta
+}) {
+  const statusColor = status === "checked" ? tokens.good : status === "refunded" ? tokens.bad : tokens.textTertiary;
+  const statusLabel = status === "checked" ? "Checked in" : status === "refunded" ? "Refunded" : "Pending";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex w-full items-center gap-3 rounded-2xl border p-3 text-left",
+      style: {
+        borderColor: tokens.border,
+        background: tokens.card,
+        minHeight: 60
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold",
+            style: { background: tokens.elevated, color: tokens.textSecondary },
+            children: name.split(" ").map((n) => n[0]).slice(0, 2).join("")
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-white", children: name }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 truncate text-2xs",
+              style: { color: tokens.textTertiary },
+              children: meta
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "rounded-full px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wider",
+              style: { background: tokens.elevated, color: tokens.accent },
+              children: tier
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-3xs font-medium", style: { color: statusColor }, children: statusLabel })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  AttendeeRow,
+  AttendeesList,
+  Chip,
+  TicketTier
+};
+//# sourceMappingURL=events-detail-attendees-chec.js.map