@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-redesign-mockups/insights-sales-drill.js

@@ -0,0 +1,286 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowLeft,
+  CheckCircle2,
+  ChevronRight,
+  Download,
+  MoreHorizontal,
+  Receipt,
+  TrendingUp
+} from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import { Caption, StatusBar, TabBar } from "./pill-presets-tailwind-utilit";
+import { SettingsRow } from "./wizard-payments";
+import {
+  BarChart,
+  BreakdownRow,
+  HubHeader,
+  PeriodChips
+} from "./drill-chrome-sub-app-header-";
+function InsightsSalesDrill() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsx(
+      HubHeader,
+      {
+        title: "Sales",
+        trailing: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "More",
+            className: "flex h-9 w-9 items-center justify-center",
+            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4 text-[#C9D0DD]" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-28", children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(PeriodChips, { active: "7d" }) }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[#94A0B5]", children: "Total revenue" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-[30px] font-bold leading-tight text-white", children: "\u20A6487,200" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "mt-1 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(BarChart, {}) }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "By channel" }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-3", children: [
+          /* @__PURE__ */ jsx(BreakdownRow, { label: "Online store", value: "\u20A6350,800", pct: 72 }),
+          /* @__PURE__ */ jsx(BreakdownRow, { label: "In-store POS", value: "\u20A687,700", pct: 18 }),
+          /* @__PURE__ */ jsx(BreakdownRow, { label: "Social links", value: "\u20A648,700", pct: 10 })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Top products" }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-3", children: [
+          /* @__PURE__ */ jsx(BreakdownRow, { label: "Jollof bowl", value: "\u20A6142K", pct: 45 }),
+          /* @__PURE__ */ jsx(BreakdownRow, { label: "Suya platter", value: "\u20A698K", pct: 32 }),
+          /* @__PURE__ */ jsx(BreakdownRow, { label: "Pepper soup", value: "\u20A664K", pct: 20 }),
+          /* @__PURE__ */ jsx(BreakdownRow, { label: "Chapman", value: "\u20A628K", pct: 9 })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-x-3 bottom-3 z-30 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 w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold",
+            style: { background: tokens.accent, color: tokens.accentFg },
+            children: [
+              /* @__PURE__ */ jsx(Download, { className: "size-4" }),
+              "Export CSV"
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function MoneyHub() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsx(HubHeader, { title: "Money" }),
+    /* @__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: "rgba(74,222,128,0.28)",
+            background: "rgba(74,222,128,0.08)"
+          },
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-3xs font-medium", style: { color: tokens.good }, children: "Next payout" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-[28px] font-bold leading-tight text-white", children: "\u20A647,200" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[#C9D0DD]", children: "Friday, Apr 28 \xB7 GTB ending 6789" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "mt-4 flex h-11 w-full items-center justify-center gap-2 rounded-2xl text-sm font-semibold",
+                style: {
+                  background: "rgba(74,222,128,0.14)",
+                  color: tokens.good,
+                  border: `1px solid rgba(74,222,128,0.32)`
+                },
+                children: "Track payout"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2", children: [
+        /* @__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: "Available" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-base font-bold text-white", children: "\u20A612,400" })
+            ]
+          }
+        ),
+        /* @__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: "Fees this month" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-base font-bold text-white", children: "\u20A68,920" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Recent payouts" }),
+        /* @__PURE__ */ jsx(
+          PayoutRow,
+          {
+            amount: "\u20A647,200",
+            date: "Apr 19",
+            status: "Paid",
+            tone: "good",
+            meta: "GTB \xB7 12 orders"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PayoutRow,
+          {
+            amount: "\u20A638,400",
+            date: "Apr 12",
+            status: "Paid",
+            tone: "good",
+            meta: "GTB \xB7 9 orders"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PayoutRow,
+          {
+            amount: "\u20A652,100",
+            date: "Apr 5",
+            status: "Paid",
+            tone: "good",
+            meta: "GTB \xB7 14 orders"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PayoutRow,
+          {
+            amount: "\u20A629,800",
+            date: "Mar 29",
+            status: "Paid",
+            tone: "good",
+            meta: "GTB \xB7 7 orders"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-5 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Money tools" }),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Receipt,
+            label: "Taxes & policies",
+            hint: "Set up",
+            tone: "warn"
+          }
+        ),
+        /* @__PURE__ */ jsx(SettingsRow, { icon: Download, label: "Statements & exports" }),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: CheckCircle2,
+            label: "Reconciliation",
+            hint: "All matched",
+            tone: "good"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: ArrowLeft,
+            label: "Refunds & disputes",
+            hint: "2 open",
+            tone: "warn"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TabBar, { active: "store" })
+  ] });
+}
+function PayoutRow({
+  amount,
+  date,
+  status,
+  tone,
+  meta
+}) {
+  const color = tone === "good" ? tokens.good : tokens.warn;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex w-full items-center justify-between rounded-2xl border p-3.5 text-left",
+      style: {
+        borderColor: tokens.border,
+        background: tokens.card,
+        minHeight: "64px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-md font-semibold text-white", children: amount }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-2xs text-[#94A0B5]", children: [
+            date,
+            " \xB7 ",
+            meta
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "rounded-full border px-2 py-1 text-3xs font-medium",
+              style: {
+                borderColor: `${color}50`,
+                background: `${color}1A`,
+                color
+              },
+              children: status
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-[#6E7791]" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  InsightsSalesDrill,
+  MoneyHub,
+  PayoutRow
+};
+//# sourceMappingURL=insights-sales-drill.js.map

package/dist/mobile/mobile-redesign-mockups/insights-sales-drill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/insights-sales-drill.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ArrowLeft,\n  CheckCircle2,\n  ChevronRight,\n  Download,\n  MoreHorizontal,\n  Receipt,\n  TrendingUp,\n} from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\nimport { Caption, StatusBar, TabBar } from './pill-presets-tailwind-utilit';\nimport { SettingsRow } from './wizard-payments';\nimport {\n  BarChart,\n  BreakdownRow,\n  HubHeader,\n  PeriodChips,\n} from './drill-chrome-sub-app-header-';\n\n/**\n * Insights — Sales drill\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\n// ─────────────────────────────────────────────────────────────\n// Insights — Sales drill\n// ─────────────────────────────────────────────────────────────\nexport function InsightsSalesDrill() {\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <HubHeader\n        title=\"Sales\"\n        trailing={\n          <button\n            type=\"button\"\n            aria-label=\"More\"\n            className=\"flex h-9 w-9 items-center justify-center\"\n          >\n            <MoreHorizontal className=\"size-4 text-[#C9D0DD]\" />\n          </button>\n        }\n      />\n      <div className=\"flex-1 overflow-y-auto px-4 pb-28\">\n        <div className=\"mt-3\">\n          <PeriodChips active=\"7d\" />\n        </div>\n\n        <section className=\"mt-4\">\n          <p className=\"text-2xs font-medium text-[#94A0B5]\">Total revenue</p>\n          <p className=\"mt-1 text-[30px] font-bold leading-tight text-white\">\n            ₦487,200\n          </p>\n          <div\n            className=\"mt-1 flex items-center gap-1.5 text-xs font-medium\"\n            style={{ color: tokens.good }}\n          >\n            <TrendingUp className=\"size-4\" />\n            +12.4% vs prev 7d\n          </div>\n        </section>\n\n        <div className=\"mt-4\">\n          <BarChart />\n        </div>\n\n        <section className=\"mt-6\">\n          <Caption>By channel</Caption>\n          <div className=\"mt-3 space-y-3\">\n            <BreakdownRow label=\"Online store\" value=\"₦350,800\" pct={72} />\n            <BreakdownRow label=\"In-store POS\" value=\"₦87,700\" pct={18} />\n            <BreakdownRow label=\"Social links\" value=\"₦48,700\" pct={10} />\n          </div>\n        </section>\n\n        <section className=\"mt-6\">\n          <Caption>Top products</Caption>\n          <div className=\"mt-3 space-y-3\">\n            <BreakdownRow label=\"Jollof bowl\" value=\"₦142K\" pct={45} />\n            <BreakdownRow label=\"Suya platter\" value=\"₦98K\" pct={32} />\n            <BreakdownRow label=\"Pepper soup\" value=\"₦64K\" pct={20} />\n            <BreakdownRow label=\"Chapman\" value=\"₦28K\" pct={9} />\n          </div>\n        </section>\n      </div>\n      <div\n        className=\"absolute inset-x-3 bottom-3 z-30 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 w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold\"\n          style={{ background: tokens.accent, color: tokens.accentFg }}\n        >\n          <Download className=\"size-4\" />\n          Export CSV\n        </button>\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Money hub\n// ─────────────────────────────────────────────────────────────\nexport function MoneyHub() {\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <HubHeader title=\"Money\" />\n      <div className=\"flex-1 overflow-y-auto px-4 pb-24\">\n        <section\n          className=\"mt-3 rounded-3xl border p-5\"\n          style={{\n            borderColor: 'rgba(74,222,128,0.28)',\n            background: 'rgba(74,222,128,0.08)',\n          }}\n        >\n          <p className=\"text-3xs font-medium\" style={{ color: tokens.good }}>\n            Next payout\n          </p>\n          <p className=\"mt-1 text-[28px] font-bold leading-tight text-white\">\n            ₦47,200\n          </p>\n          <p className=\"mt-1 text-xs text-[#C9D0DD]\">\n            Friday, Apr 28 · GTB ending 6789\n          </p>\n          <button\n            type=\"button\"\n            className=\"mt-4 flex h-11 w-full items-center justify-center gap-2 rounded-2xl text-sm font-semibold\"\n            style={{\n              background: 'rgba(74,222,128,0.14)',\n              color: tokens.good,\n              border: `1px solid rgba(74,222,128,0.32)`,\n            }}\n          >\n            Track payout\n          </button>\n        </section>\n\n        <div className=\"mt-3 grid grid-cols-2 gap-2\">\n          <div\n            className=\"rounded-2xl border p-3.5\"\n            style={{ borderColor: tokens.border, background: tokens.card }}\n          >\n            <p className=\"text-2xs text-[#94A0B5]\">Available</p>\n            <p className=\"mt-1 text-base font-bold text-white\">₦12,400</p>\n          </div>\n          <div\n            className=\"rounded-2xl border p-3.5\"\n            style={{ borderColor: tokens.border, background: tokens.card }}\n          >\n            <p className=\"text-2xs text-[#94A0B5]\">Fees this month</p>\n            <p className=\"mt-1 text-base font-bold text-white\">₦8,920</p>\n          </div>\n        </div>\n\n        <section className=\"mt-6 space-y-2\">\n          <Caption>Recent payouts</Caption>\n          <PayoutRow\n            amount=\"₦47,200\"\n            date=\"Apr 19\"\n            status=\"Paid\"\n            tone=\"good\"\n            meta=\"GTB · 12 orders\"\n          />\n          <PayoutRow\n            amount=\"₦38,400\"\n            date=\"Apr 12\"\n            status=\"Paid\"\n            tone=\"good\"\n            meta=\"GTB · 9 orders\"\n          />\n          <PayoutRow\n            amount=\"₦52,100\"\n            date=\"Apr 5\"\n            status=\"Paid\"\n            tone=\"good\"\n            meta=\"GTB · 14 orders\"\n          />\n          <PayoutRow\n            amount=\"₦29,800\"\n            date=\"Mar 29\"\n            status=\"Paid\"\n            tone=\"good\"\n            meta=\"GTB · 7 orders\"\n          />\n        </section>\n\n        <section className=\"mt-5 space-y-2\">\n          <Caption>Money tools</Caption>\n          <SettingsRow\n            icon={Receipt}\n            label=\"Taxes & policies\"\n            hint=\"Set up\"\n            tone=\"warn\"\n          />\n          <SettingsRow icon={Download} label=\"Statements & exports\" />\n          <SettingsRow\n            icon={CheckCircle2}\n            label=\"Reconciliation\"\n            hint=\"All matched\"\n            tone=\"good\"\n          />\n          <SettingsRow\n            icon={ArrowLeft}\n            label=\"Refunds & disputes\"\n            hint=\"2 open\"\n            tone=\"warn\"\n          />\n        </section>\n      </div>\n      <TabBar active=\"store\" />\n    </div>\n  );\n}\n\nexport function PayoutRow({\n  amount,\n  date,\n  status,\n  tone,\n  meta,\n}: {\n  amount: string;\n  date: string;\n  status: string;\n  tone: 'good' | 'warn';\n  meta: string;\n}) {\n  const color = tone === 'good' ? tokens.good : tokens.warn;\n  return (\n    <button\n      type=\"button\"\n      className=\"flex w-full items-center justify-between rounded-2xl border p-3.5 text-left\"\n      style={{\n        borderColor: tokens.border,\n        background: tokens.card,\n        minHeight: '64px',\n      }}\n    >\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"text-md font-semibold text-white\">{amount}</p>\n        <p className=\"mt-0.5 text-2xs text-[#94A0B5]\">\n          {date} · {meta}\n        </p>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <span\n          className=\"rounded-full border px-2 py-1 text-3xs font-medium\"\n          style={{\n            borderColor: `${color}50`,\n            background: `${color}1A`,\n            color,\n          }}\n        >\n          {status}\n        </span>\n        <ChevronRight className=\"size-4 text-[#6E7791]\" />\n      </div>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-redesign-mockups/loyalty-earn-rule-editor.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Loyalty — Earn rule editor
+ *
+ * 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 LoyaltyEarnRuleEditor(): import("react").JSX.Element;
+export declare function LoyaltyRedeemSheet(): import("react").JSX.Element;

package/dist/mobile/mobile-redesign-mockups/loyalty-earn-rule-editor.js

@@ -0,0 +1,339 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Calendar,
+  Check,
+  Gift,
+  ShoppingBag,
+  Star,
+  Users,
+  X
+} from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import { Caption } from "./pill-presets-tailwind-utilit";
+import {
+  ChipRow,
+  SheetHeader,
+  SheetOverlay,
+  ToggleRow
+} from "./recover-sheets-shared-chrome";
+import { LoyaltyMemberDetail } from "./loyalty-member-detail";
+function LoyaltyEarnRuleEditor() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "sticky top-0 z-10 flex h-[88px] items-end px-4 pb-2 pt-2",
+        style: {
+          background: tokens.surface,
+          borderBottom: `1px solid ${tokens.border}`
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex h-12 w-full items-center justify-between", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-10 items-center gap-1 px-1 text-sm font-medium",
+              style: { color: tokens.textSecondary },
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "size-4" }),
+                "Cancel"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-md font-semibold text-white", children: "New earn rule" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-sm font-semibold",
+              style: { color: tokens.accent },
+              children: "Save"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-32 pt-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold leading-tight tracking-tight text-white", children: "When does a member earn?" }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "mt-2 text-xs leading-relaxed",
+          style: { color: tokens.textSecondary },
+          children: "Pick a trigger, then how points are calculated. You can cap and schedule it."
+        }
+      ),
+      /* @__PURE__ */ jsx(Caption, { children: /* @__PURE__ */ jsx("span", { className: "mt-5 inline-block", children: "Trigger" }) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: [
+        {
+          icon: ShoppingBag,
+          label: "Order placed",
+          sub: "Member completes an order",
+          active: true
+        },
+        {
+          icon: Star,
+          label: "Review submitted",
+          sub: "After purchase, leaves a 4\u2605+ review"
+        },
+        {
+          icon: Calendar,
+          label: "Birthday",
+          sub: "On member\u2019s birthday"
+        },
+        {
+          icon: Users,
+          label: "Referral converts",
+          sub: "Referred friend places first order"
+        }
+      ].map((t) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "flex w-full items-center gap-3 rounded-2xl border p-3.5 text-left",
+          style: {
+            borderColor: t.active ? tokens.accent : tokens.border,
+            background: t.active ? "rgba(17,109,255,0.08)" : tokens.card
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
+                style: {
+                  background: t.active ? "rgba(17,109,255,0.18)" : tokens.elevated
+                },
+                children: /* @__PURE__ */ jsx(
+                  t.icon,
+                  {
+                    className: "h-4 w-4",
+                    style: {
+                      color: t.active ? tokens.accent : tokens.textSecondary
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-white", children: t.label }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "mt-0.5 truncate text-2xs",
+                  style: { color: tokens.textTertiary },
+                  children: t.sub
+                }
+              )
+            ] }),
+            t.active && /* @__PURE__ */ jsx(Check, { className: "size-4", style: { color: tokens.accent } })
+          ]
+        },
+        t.label
+      )) }),
+      /* @__PURE__ */ jsx(Caption, { children: /* @__PURE__ */ jsx("span", { className: "mt-5 inline-block", children: "Calculation" }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "mt-2 rounded-2xl border p-4",
+          style: { borderColor: tokens.border, background: tokens.card },
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-2xs", style: { color: tokens.textTertiary }, children: "Award" }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex h-12 w-20 items-center justify-center rounded-xl border text-base font-bold tabular-nums text-white",
+                  style: {
+                    borderColor: tokens.border,
+                    background: tokens.elevated
+                  },
+                  children: "1"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: tokens.textSecondary }, children: "point per" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex h-12 flex-1 items-center justify-center rounded-xl border text-base font-bold tabular-nums text-white",
+                  style: {
+                    borderColor: tokens.border,
+                    background: tokens.elevated
+                  },
+                  children: "\u20A6100"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-3 text-2xs", style: { color: tokens.textTertiary }, children: "Example: a \u20A612,800 order earns 128 points" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Caption, { children: /* @__PURE__ */ jsx("span", { className: "mt-5 inline-block", children: "Multiplier" }) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(ChipRow, { options: ["1x", "2x", "3x", "5x"], active: "1x" }) }),
+      /* @__PURE__ */ jsx(Caption, { children: /* @__PURE__ */ jsx("span", { className: "mt-5 inline-block", children: "Schedule" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+        /* @__PURE__ */ jsx(ToggleRow, { label: "Always on", hint: "Active any time of week" }),
+        /* @__PURE__ */ jsx(
+          ToggleRow,
+          {
+            label: "Cap monthly earn",
+            hint: "Max 1,000 points per member / month",
+            active: false
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-x-0 bottom-0 z-20 flex h-[80px] items-center px-4 pb-4 pt-2",
+        style: {
+          background: `${tokens.surface}f2`,
+          borderTop: `1px solid ${tokens.border}`
+        },
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex h-12 w-full items-center justify-center gap-1.5 rounded-2xl text-sm font-semibold",
+            style: { background: tokens.accent, color: tokens.accentFg },
+            children: [
+              "Save rule",
+              /* @__PURE__ */ jsx(Check, { className: "size-4" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function LoyaltyRedeemSheet() {
+  return /* @__PURE__ */ jsxs(SheetOverlay, { background: /* @__PURE__ */ jsx(LoyaltyMemberDetail, {}), children: [
+    /* @__PURE__ */ jsx(
+      SheetHeader,
+      {
+        title: "Approve redemption",
+        subtitle: "Tunde Adekunle \xB7 Gold \xB7 2,140 pts available"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "mt-4 rounded-2xl border p-4",
+        style: {
+          borderColor: "rgba(244,183,64,0.32)",
+          background: "rgba(244,183,64,0.06)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex h-12 w-12 items-center justify-center rounded-2xl",
+                style: { background: "rgba(244,183,64,0.18)" },
+                children: /* @__PURE__ */ jsx(Gift, { className: "size-5", style: { color: tokens.warn } })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-lg font-semibold text-white", children: "Free dessert" }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "mt-0.5 text-2xs",
+                  style: { color: tokens.textSecondary },
+                  children: "Costs 500 points \xB7 single use"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "mt-3 rounded-xl border p-3",
+              style: {
+                borderColor: tokens.borderStrong,
+                background: tokens.elevated
+              },
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "text-3xs", style: { color: tokens.textTertiary }, children: "Reward code" }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-title font-bold tracking-[0.2em] tabular-nums text-white", children: "FRDESS-9X4K" })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "px-1 text-3xs font-medium",
+          style: { color: tokens.textTertiary },
+          children: "Balance after"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "mt-2 rounded-2xl border p-4",
+          style: { borderColor: tokens.border, background: tokens.elevated },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-2xs", style: { color: tokens.textTertiary }, children: "2,140 \u2212 500" }),
+              /* @__PURE__ */ jsx("p", { className: "text-title font-bold text-white", children: "1,640 pts" })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-3xs", style: { color: tokens.textTertiary }, children: "Still Gold tier" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+      /* @__PURE__ */ jsx(ToggleRow, { label: "Send code by SMS" }),
+      /* @__PURE__ */ jsx(
+        ToggleRow,
+        {
+          label: "Apply to current order",
+          hint: "Order #4127 \xB7 \u20A612,800",
+          active: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "sticky bottom-0 -mx-4 mt-4 grid grid-cols-2 gap-2 px-4 pb-2 pt-3",
+        style: {
+          background: `linear-gradient(to top, ${tokens.card} 70%, transparent)`
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center rounded-2xl border text-sm font-medium text-white",
+              style: { borderColor: tokens.border, background: tokens.elevated },
+              children: "Decline"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center gap-2 rounded-2xl text-sm font-semibold",
+              style: { background: tokens.warn, color: "#1A1308" },
+              children: [
+                /* @__PURE__ */ jsx(Check, { className: "size-4" }),
+                "Approve \xB7 500 pts"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  LoyaltyEarnRuleEditor,
+  LoyaltyRedeemSheet
+};
+//# sourceMappingURL=loyalty-earn-rule-editor.js.map