@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-redesign-mockups/discounts-list.js

@@ -0,0 +1,316 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Check,
+  Clock,
+  MessageCircle,
+  Phone,
+  Repeat,
+  Tag,
+  X
+} from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import { Caption, StatusBar } from "./pill-presets-tailwind-utilit";
+import { HubHeader } from "./drill-chrome-sub-app-header-";
+import { RowDivider, SummaryRow } from "./money-payout-detail";
+function PromoCodeRow({
+  code,
+  value,
+  scope,
+  redemptions,
+  cap,
+  status
+}) {
+  const statusCfg = {
+    live: { fg: tokens.good, bg: `${tokens.good}1A`, label: "Live" },
+    scheduled: { fg: tokens.warn, bg: `${tokens.warn}1A`, label: "Scheduled" },
+    expired: { fg: tokens.textTertiary, bg: tokens.elevated, label: "Expired" }
+  }[status];
+  const pct = cap ? Math.round(redemptions / cap * 100) : null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "w-full rounded-2xl border p-3.5 text-left",
+      style: { borderColor: tokens.border, background: tokens.card },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
+              style: { background: tokens.elevated },
+              children: /* @__PURE__ */ jsx(Tag, { className: "size-4", style: { color: tokens.accent } })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "font-mono text-sm font-bold tracking-wider text-white", children: code }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "rounded-full px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wider",
+                  style: { background: statusCfg.bg, color: statusCfg.fg },
+                  children: statusCfg.label
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "mt-0.5 text-xs font-semibold",
+                style: { color: tokens.text },
+                children: value
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "mt-0.5 truncate text-2xs",
+                style: { color: tokens.textTertiary },
+                children: scope
+              }
+            )
+          ] })
+        ] }),
+        (cap || redemptions > 0) && /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-1 flex-1 overflow-hidden rounded-full",
+              style: { background: tokens.elevated },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-full rounded-full",
+                  style: {
+                    width: `${pct ?? Math.min(redemptions, 100)}%`,
+                    background: statusCfg.fg
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "text-3xs tabular-nums",
+              style: { color: tokens.textTertiary },
+              children: [
+                redemptions,
+                cap ? ` / ${cap}` : "",
+                " used",
+                pct !== null ? ` \xB7 ${pct}%` : ""
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function BookingRequestDetail() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsx(HubHeader, { title: "Booking request" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-28", children: [
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-3 rounded-3xl border p-5",
+          style: {
+            borderColor: "rgba(244,183,64,0.3)",
+            background: "rgba(244,183,64,0.08)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "rounded-full px-2 py-0.5 text-3xs font-semibold uppercase tracking-wider",
+                  style: { background: `${tokens.warn}1A`, color: tokens.warn },
+                  children: "Awaiting your reply"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-2xs", style: { color: tokens.textTertiary }, children: "Requested 14m ago" })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-2xl font-bold leading-tight tracking-tight text-white", children: "Sat, Apr 26 \xB7 7:30 PM" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", style: { color: tokens.textSecondary }, children: "VIP table \xB7 party of 4 \xB7 2 hours \xB7 1st-time guest" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "mt-5 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Guest" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-3 rounded-2xl border p-3.5",
+            style: { borderColor: tokens.border, background: tokens.card },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-bold",
+                  style: {
+                    background: tokens.elevated,
+                    color: tokens.textSecondary
+                  },
+                  children: "TA"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-md font-semibold text-white", children: "Tunde Adekunle" }),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "mt-0.5 truncate text-2xs",
+                    style: { color: tokens.textTertiary },
+                    children: "tunde@gmail.com \xB7 +234 802 \xB7\xB7\xB7 \xB7 1st-time guest"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Message",
+                  className: "flex h-9 w-9 items-center justify-center rounded-full",
+                  style: { background: tokens.elevated },
+                  children: /* @__PURE__ */ jsx(MessageCircle, { className: "size-4 text-[#C9D0DD]" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Call",
+                  className: "flex h-9 w-9 items-center justify-center rounded-full",
+                  style: { background: tokens.elevated },
+                  children: /* @__PURE__ */ jsx(Phone, { className: "size-4 text-[#C9D0DD]" })
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-5", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Note from guest" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mt-2 rounded-2xl border p-3.5",
+            style: { borderColor: tokens.border, background: tokens.card },
+            children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-snug", style: { color: tokens.text }, children: "\u201CCelebrating my partner\u2019s birthday \u2014 possible to do a small cake reveal? Allergic to peanuts.\u201D" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-5 rounded-2xl border",
+          style: { borderColor: tokens.border, background: tokens.card },
+          children: [
+            /* @__PURE__ */ jsx(SummaryRow, { label: "Time slot", value: "Sat 7:30 \u2013 9:30 PM" }),
+            /* @__PURE__ */ jsx(RowDivider, {}),
+            /* @__PURE__ */ jsx(SummaryRow, { label: "Capacity that night", value: "78% \xB7 4 tables free" }),
+            /* @__PURE__ */ jsx(RowDivider, {}),
+            /* @__PURE__ */ jsx(SummaryRow, { label: "Deposit requested", value: "\u20A615,000 (refundable)" }),
+            /* @__PURE__ */ jsx(RowDivider, {}),
+            /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: "Cancellation policy",
+                value: "Free up to 4 hr before"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-5 flex items-start gap-3 rounded-2xl border p-3.5",
+          style: {
+            borderColor: "rgba(248,113,113,0.32)",
+            background: "rgba(248,113,113,0.08)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Clock,
+              {
+                className: "mt-0.5 size-4 shrink-0",
+                style: { color: tokens.bad }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "min-w-0 flex-1 text-xs",
+                style: { color: tokens.textSecondary },
+                children: "Open Mic Night starts 9 PM same day \u2014 VIP table runs into the show. Confirm this is okay with the guest."
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute inset-x-3 bottom-3 z-30 grid grid-cols-3 gap-2 rounded-[26px] border p-2",
+        style: {
+          borderColor: tokens.border,
+          background: `${tokens.card}F2`,
+          backdropFilter: "blur(12px)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center gap-1 rounded-2xl text-xs font-semibold",
+              style: {
+                background: `${tokens.bad}1A`,
+                color: tokens.bad,
+                border: `1px solid ${tokens.bad}40`
+              },
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "size-[13px]" }),
+                "Decline"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center gap-1 rounded-2xl border text-xs font-medium text-white",
+              style: { borderColor: tokens.border, background: tokens.elevated },
+              children: [
+                /* @__PURE__ */ jsx(Repeat, { className: "size-[13px]" }),
+                "Propose"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center gap-1 rounded-2xl text-xs font-semibold",
+              style: { background: tokens.accent, color: tokens.accentFg },
+              children: [
+                /* @__PURE__ */ jsx(Check, { className: "size-[13px]" }),
+                "Accept"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  BookingRequestDetail,
+  PromoCodeRow
+};
+//# sourceMappingURL=discounts-list.js.map

package/dist/mobile/mobile-redesign-mockups/discounts-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/discounts-list.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Check,\n  Clock,\n  MessageCircle,\n  Mic,\n  Phone,\n  Repeat,\n  Tag,\n  X,\n} from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\nimport { Caption, StatusBar } from './pill-presets-tailwind-utilit';\nimport { HubHeader } from './drill-chrome-sub-app-header-';\nimport { RowDivider, SummaryRow } from './money-payout-detail';\n\n/**\n * Discounts list\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 PromoCodeRow({\n  code,\n  value,\n  scope,\n  redemptions,\n  cap,\n  status,\n}: {\n  code: string;\n  value: string;\n  scope: string;\n  redemptions: number;\n  cap?: number;\n  status: 'live' | 'scheduled' | 'expired';\n}) {\n  const statusCfg = {\n    live: { fg: tokens.good, bg: `${tokens.good}1A`, label: 'Live' },\n    scheduled: { fg: tokens.warn, bg: `${tokens.warn}1A`, label: 'Scheduled' },\n    expired: { fg: tokens.textTertiary, bg: tokens.elevated, label: 'Expired' },\n  }[status];\n  const pct = cap ? Math.round((redemptions / cap) * 100) : null;\n  return (\n    <button\n      type=\"button\"\n      className=\"w-full rounded-2xl border p-3.5 text-left\"\n      style={{ borderColor: tokens.border, background: tokens.card }}\n    >\n      <div className=\"flex items-start gap-3\">\n        <div\n          className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl\"\n          style={{ background: tokens.elevated }}\n        >\n          <Tag className=\"size-4\" style={{ color: tokens.accent }} />\n        </div>\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-2\">\n            <p className=\"font-mono text-sm font-bold tracking-wider text-white\">\n              {code}\n            </p>\n            <span\n              className=\"rounded-full px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wider\"\n              style={{ background: statusCfg.bg, color: statusCfg.fg }}\n            >\n              {statusCfg.label}\n            </span>\n          </div>\n          <p\n            className=\"mt-0.5 text-xs font-semibold\"\n            style={{ color: tokens.text }}\n          >\n            {value}\n          </p>\n          <p\n            className=\"mt-0.5 truncate text-2xs\"\n            style={{ color: tokens.textTertiary }}\n          >\n            {scope}\n          </p>\n        </div>\n      </div>\n      {(cap || redemptions > 0) && (\n        <div className=\"mt-2.5 flex items-center gap-2\">\n          <div\n            className=\"h-1 flex-1 overflow-hidden rounded-full\"\n            style={{ background: tokens.elevated }}\n          >\n            <div\n              className=\"h-full rounded-full\"\n              style={{\n                width: `${pct ?? Math.min(redemptions, 100)}%`,\n                background: statusCfg.fg,\n              }}\n            />\n          </div>\n          <span\n            className=\"text-3xs tabular-nums\"\n            style={{ color: tokens.textTertiary }}\n          >\n            {redemptions}\n            {cap ? ` / ${cap}` : ''} used{pct !== null ? ` · ${pct}%` : ''}\n          </span>\n        </div>\n      )}\n    </button>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Booking request detail\n// ─────────────────────────────────────────────────────────────\nexport function BookingRequestDetail() {\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <HubHeader title=\"Booking request\" />\n      <div className=\"flex-1 overflow-y-auto px-4 pb-28\">\n        {/* Hero status */}\n        <section\n          className=\"mt-3 rounded-3xl border p-5\"\n          style={{\n            borderColor: 'rgba(244,183,64,0.3)',\n            background: 'rgba(244,183,64,0.08)',\n          }}\n        >\n          <div className=\"flex items-center gap-2\">\n            <span\n              className=\"rounded-full px-2 py-0.5 text-3xs font-semibold uppercase tracking-wider\"\n              style={{ background: `${tokens.warn}1A`, color: tokens.warn }}\n            >\n              Awaiting your reply\n            </span>\n            <span className=\"text-2xs\" style={{ color: tokens.textTertiary }}>\n              Requested 14m ago\n            </span>\n          </div>\n          <p className=\"mt-2 text-2xl font-bold leading-tight tracking-tight text-white\">\n            Sat, Apr 26 · 7:30 PM\n          </p>\n          <p className=\"mt-1 text-xs\" style={{ color: tokens.textSecondary }}>\n            VIP table · party of 4 · 2 hours · 1st-time guest\n          </p>\n        </section>\n\n        {/* Guest card */}\n        <section className=\"mt-5 space-y-2\">\n          <Caption>Guest</Caption>\n          <div\n            className=\"flex items-center gap-3 rounded-2xl border p-3.5\"\n            style={{ borderColor: tokens.border, background: tokens.card }}\n          >\n            <div\n              className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-bold\"\n              style={{\n                background: tokens.elevated,\n                color: tokens.textSecondary,\n              }}\n            >\n              TA\n            </div>\n            <div className=\"min-w-0 flex-1\">\n              <p className=\"truncate text-md font-semibold text-white\">\n                Tunde Adekunle\n              </p>\n              <p\n                className=\"mt-0.5 truncate text-2xs\"\n                style={{ color: tokens.textTertiary }}\n              >\n                tunde@gmail.com · +234 802 ··· · 1st-time guest\n              </p>\n            </div>\n            <button\n              type=\"button\"\n              aria-label=\"Message\"\n              className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n              style={{ background: tokens.elevated }}\n            >\n              <MessageCircle className=\"size-4 text-[#C9D0DD]\" />\n            </button>\n            <button\n              type=\"button\"\n              aria-label=\"Call\"\n              className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n              style={{ background: tokens.elevated }}\n            >\n              <Phone className=\"size-4 text-[#C9D0DD]\" />\n            </button>\n          </div>\n        </section>\n\n        {/* Notes */}\n        <section className=\"mt-5\">\n          <Caption>Note from guest</Caption>\n          <div\n            className=\"mt-2 rounded-2xl border p-3.5\"\n            style={{ borderColor: tokens.border, background: tokens.card }}\n          >\n            <p className=\"text-sm leading-snug\" style={{ color: tokens.text }}>\n              “Celebrating my partner’s birthday — possible to do a small cake\n              reveal? Allergic to peanuts.”\n            </p>\n          </div>\n        </section>\n\n        {/* Slot facts */}\n        <section\n          className=\"mt-5 rounded-2xl border\"\n          style={{ borderColor: tokens.border, background: tokens.card }}\n        >\n          <SummaryRow label=\"Time slot\" value=\"Sat 7:30 – 9:30 PM\" />\n          <RowDivider />\n          <SummaryRow label=\"Capacity that night\" value=\"78% · 4 tables free\" />\n          <RowDivider />\n          <SummaryRow label=\"Deposit requested\" value=\"₦15,000 (refundable)\" />\n          <RowDivider />\n          <SummaryRow\n            label=\"Cancellation policy\"\n            value=\"Free up to 4 hr before\"\n          />\n        </section>\n\n        {/* Conflicts */}\n        <section\n          className=\"mt-5 flex items-start gap-3 rounded-2xl border p-3.5\"\n          style={{\n            borderColor: 'rgba(248,113,113,0.32)',\n            background: 'rgba(248,113,113,0.08)',\n          }}\n        >\n          <Clock className=\"mt-0.5 size-4 shrink-0\"\n            style={{ color: tokens.bad }}\n          />\n          <p\n            className=\"min-w-0 flex-1 text-xs\"\n            style={{ color: tokens.textSecondary }}\n          >\n            Open Mic Night starts 9 PM same day — VIP table runs into the show.\n            Confirm this is okay with the guest.\n          </p>\n        </section>\n      </div>\n      <div\n        className=\"absolute inset-x-3 bottom-3 z-30 grid grid-cols-3 gap-2 rounded-[26px] border p-2\"\n        style={{\n          borderColor: tokens.border,\n          background: `${tokens.card}F2`,\n          backdropFilter: 'blur(12px)',\n        }}\n      >\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center gap-1 rounded-2xl text-xs font-semibold\"\n          style={{\n            background: `${tokens.bad}1A`,\n            color: tokens.bad,\n            border: `1px solid ${tokens.bad}40`,\n          }}\n        >\n          <X className=\"size-[13px]\" />\n          Decline\n        </button>\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center gap-1 rounded-2xl border text-xs font-medium text-white\"\n          style={{ borderColor: tokens.border, background: tokens.elevated }}\n        >\n          <Repeat className=\"size-[13px]\" />\n          Propose\n        </button>\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center gap-1 rounded-2xl text-xs font-semibold\"\n          style={{ background: tokens.accent, color: tokens.accentFg }}\n        >\n          <Check className=\"size-[13px]\" />\n          Accept\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-redesign-mockups/drill-chrome-sub-app-header-.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Drill chrome: sub-app header used by Insights / Money / Marketing
+ *
+ * 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 HubHeader({ title, trailing, }: {
+    title: string;
+    trailing?: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function PeriodChips({ active }: {
+    active: string;
+}): import("react").JSX.Element;
+export declare function KpiTile({ label, value, delta, tone, }: {
+    label: string;
+    value: string;
+    delta: string;
+    tone: 'good' | 'warn' | 'bad';
+}): import("react").JSX.Element;
+export declare function Sparkline({ tone }: {
+    tone?: 'good' | 'bad';
+}): import("react").JSX.Element;
+export declare function BarChart(): import("react").JSX.Element;
+export declare function BreakdownRow({ label, value, pct, }: {
+    label: string;
+    value: string;
+    pct: number;
+}): import("react").JSX.Element;
+export declare function InsightsHub(): import("react").JSX.Element;

package/dist/mobile/mobile-redesign-mockups/drill-chrome-sub-app-header-.js

@@ -0,0 +1,273 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowLeft,
+  ArrowRight,
+  ArrowUpRight,
+  BarChart3,
+  ChevronDown,
+  CircleDollarSign,
+  Layers,
+  Package,
+  TrendingUp,
+  Users
+} from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import { Button } from "@withpotter/ui-kit/button";
+import { Caption, StatusBar, TabBar } from "./pill-presets-tailwind-utilit";
+import { SettingsRow } from "./wizard-payments";
+function HubHeader({
+  title,
+  trailing
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: "sticky top-0 z-20 flex h-12 items-center justify-between px-2",
+      style: {
+        background: `${tokens.surface}F2`,
+        backdropFilter: "blur(12px)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "flex h-9 w-9 items-center justify-center rounded-full",
+            style: { background: tokens.elevated },
+            "aria-label": "Back",
+            children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4 text-white" })
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-md font-semibold text-white", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 items-center justify-center", children: trailing })
+      ]
+    }
+  );
+}
+function PeriodChips({ active }) {
+  const periods = ["7d", "30d", "90d", "YTD", "Custom"];
+  return /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden pb-1", children: periods.map((p) => {
+    const isActive = p === active;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        className: "shrink-0 text-2xs",
+        style: {
+          borderColor: isActive ? tokens.accent : tokens.border,
+          background: isActive ? "rgba(17,109,255,0.14)" : tokens.card,
+          color: isActive ? tokens.accent : "#C9D0DD"
+        },
+        children: p
+      },
+      p
+    );
+  }) });
+}
+function KpiTile({
+  label,
+  value,
+  delta,
+  tone
+}) {
+  const color = tone === "good" ? tokens.good : tone === "warn" ? tokens.warn : tokens.bad;
+  const Arrow = tone === "bad" ? ArrowRight : ArrowUpRight;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-2xl border p-3.5",
+      style: { borderColor: tokens.border, background: tokens.card },
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-2xs text-[#94A0B5]", children: label }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-title font-bold leading-tight text-white", children: value }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "mt-1.5 flex items-center gap-1 text-3xs font-medium",
+            style: { color },
+            children: [
+              /* @__PURE__ */ jsx(Arrow, { className: "h-3 w-3" }),
+              delta
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Sparkline({ tone = "good" }) {
+  const color = tone === "good" ? tokens.good : tokens.bad;
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 120 32", className: "h-8 w-full", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx(
+    "polyline",
+    {
+      points: "0,24 12,20 24,22 36,16 48,18 60,12 72,14 84,8 96,10 108,4 120,6",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function BarChart() {
+  const bars = [42, 58, 38, 72, 64, 88, 76];
+  const days = ["M", "T", "W", "T", "F", "S", "S"];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rounded-2xl border p-4",
+      style: { borderColor: tokens.border, background: tokens.card },
+      children: /* @__PURE__ */ jsx("div", { className: "flex h-32 items-end gap-2", children: bars.map((h, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-full rounded-t-md",
+            style: {
+              height: `${h}%`,
+              background: i === 5 ? tokens.accent : "rgba(17,109,255,0.32)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-3xs text-[#94A0B5]", children: days[i] })
+      ] }, i)) })
+    }
+  );
+}
+function BreakdownRow({
+  label,
+  value,
+  pct
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-white", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "text-[#94A0B5]", children: [
+        value,
+        " \xB7 ",
+        /* @__PURE__ */ jsxs("span", { className: "text-white", children: [
+          pct,
+          "%"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-1.5 w-full overflow-hidden rounded-full",
+        style: { background: tokens.elevated },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full",
+            style: { width: `${pct}%`, background: tokens.accent }
+          }
+        )
+      }
+    )
+  ] });
+}
+function InsightsHub() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsx(
+      HubHeader,
+      {
+        title: "Insights",
+        trailing: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex items-center gap-1 text-2xs font-medium text-[#C9D0DD]",
+            children: [
+              "7d ",
+              /* @__PURE__ */ jsx(ChevronDown, { className: "size-[13px]" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-24", children: [
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-3 rounded-3xl border p-5",
+          style: { borderColor: tokens.border, background: tokens.card },
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[#94A0B5]", children: "Revenue \xB7 last 7 days" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-[28px] font-bold leading-tight text-white", children: "\u20A6487,200" }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "mt-1.5 flex items-center gap-1.5 text-xs font-medium",
+                style: { color: tokens.good },
+                children: [
+                  /* @__PURE__ */ jsx(TrendingUp, { className: "size-4" }),
+                  "+12.4% vs prev 7d"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Sparkline, { tone: "good" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsx(KpiTile, { label: "Orders", value: "124", delta: "+8%", tone: "good" }),
+        /* @__PURE__ */ jsx(KpiTile, { label: "AOV", value: "\u20A63,930", delta: "+4%", tone: "good" }),
+        /* @__PURE__ */ jsx(KpiTile, { label: "Conversion", value: "2.4%", delta: "-0.3%", tone: "bad" }),
+        /* @__PURE__ */ jsx(KpiTile, { label: "Visitors", value: "2,140", delta: "+18%", tone: "good" })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Reports" }),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: CircleDollarSign,
+            label: "Sales",
+            hint: "\u20A6487K \xB7 7 days"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: TrendingUp,
+            label: "Traffic",
+            hint: "2,140 visitors \xB7 3 channels"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Users,
+            label: "Customers",
+            hint: "84 new \xB7 12 returning"
+          }
+        ),
+        /* @__PURE__ */ jsx(SettingsRow, { icon: Package, label: "Products", hint: "5 best sellers" }),
+        /* @__PURE__ */ jsx(SettingsRow, { icon: Layers, label: "Cohorts", hint: "Retention by week" })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-5 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Saved views" }),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: BarChart3,
+            label: "Friday drop performance",
+            hint: "Last run \xB7 3 days ago"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TabBar, { active: "store" })
+  ] });
+}
+export {
+  BarChart,
+  BreakdownRow,
+  HubHeader,
+  InsightsHub,
+  KpiTile,
+  PeriodChips,
+  Sparkline
+};
+//# sourceMappingURL=drill-chrome-sub-app-header-.js.map