@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-redesign-mockups/products-list-detail.js

@@ -0,0 +1,254 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, Package, Plus, Search } from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import {
+  StatusBar,
+  TabBar,
+  hideScrollbar
+} from "./pill-presets-tailwind-utilit";
+import { HubHeader } from "./drill-chrome-sub-app-header-";
+import { Chip } from "./events-detail-attendees-chec";
+function ProductsList() {
+  const groups = [
+    {
+      letter: "A",
+      rows: [
+        {
+          name: "Afrobeats Vol. 3 \u2014 Sound Pack",
+          price: "$3.00",
+          stock: 999,
+          variants: 1,
+          img: "#A78BFA",
+          status: "active"
+        },
+        {
+          name: "Asun Pepper Soup",
+          price: "\u20A64,500",
+          stock: 12,
+          variants: 0,
+          img: "#F87171",
+          status: "active"
+        }
+      ]
+    },
+    {
+      letter: "J",
+      rows: [
+        {
+          name: "Jollof Rice Platter",
+          price: "\u20A68,500",
+          stock: 0,
+          variants: 3,
+          img: "#F4B740",
+          status: "oos"
+        }
+      ]
+    },
+    {
+      letter: "L",
+      rows: [
+        {
+          name: "Lagos Light \xB7 Lightroom Preset Pack",
+          price: "$4.00",
+          stock: 999,
+          variants: 1,
+          img: "#60A5FA",
+          status: "active"
+        },
+        {
+          name: "Lekki Brunch Set",
+          price: "\u20A612,000",
+          stock: 24,
+          variants: 2,
+          img: "#34D399",
+          status: "active"
+        }
+      ]
+    },
+    {
+      letter: "O",
+      rows: [
+        {
+          name: "Operator OS \xB7 Notion Template",
+          price: "$4.00",
+          stock: 999,
+          variants: 1,
+          img: "#A78BFA",
+          status: "draft"
+        }
+      ]
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsx(
+      HubHeader,
+      {
+        title: "Products",
+        trailing: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Add product",
+            className: "flex h-9 w-9 items-center justify-center rounded-full",
+            style: { background: tokens.accent },
+            children: /* @__PURE__ */ jsx(Plus, { className: "size-4", style: { color: tokens.accentFg } })
+          }
+        )
+      }
+    ),
+    /* @__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 products" })
+          ]
+        }
+      ) }),
+      /* @__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: 42 }),
+            /* @__PURE__ */ jsx(Chip, { label: "Active", count: 36 }),
+            /* @__PURE__ */ jsx(Chip, { label: "Drafts", count: 4 }),
+            /* @__PURE__ */ jsx(Chip, { label: "Out of stock", count: 2 }),
+            /* @__PURE__ */ jsx(Chip, { label: "Physical", count: 28 }),
+            /* @__PURE__ */ jsx(Chip, { label: "Digital", count: 14 })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "mx-4 mt-3 grid grid-cols-3 gap-2", children: [
+        /* @__PURE__ */ jsx(ProductStat, { label: "Active", value: "36" }),
+        /* @__PURE__ */ jsx(ProductStat, { label: "Low stock", value: "3", tone: "warn" }),
+        /* @__PURE__ */ jsx(ProductStat, { label: "Out of stock", value: "2", tone: "bad" })
+      ] }),
+      /* @__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(ProductListRow, { ...r }, r.name)) })
+      ] }, g.letter)) })
+    ] }),
+    /* @__PURE__ */ jsx(TabBar, { active: "catalog" })
+  ] });
+}
+function ProductStat({
+  label,
+  value,
+  tone
+}) {
+  const color = tone === "bad" ? tokens.bad : tone === "warn" ? tokens.warn : tokens.text;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-2xl border p-3",
+      style: { borderColor: tokens.border, background: tokens.card },
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-3xs font-semibold",
+            style: { color: tokens.textTertiary },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-title font-bold tabular-nums", style: { color }, children: value })
+      ]
+    }
+  );
+}
+function ProductListRow({
+  name,
+  price,
+  stock,
+  variants,
+  img,
+  status
+}) {
+  const stockLabel = status === "oos" ? "Out of stock" : stock >= 999 ? "Unlimited \xB7 digital" : stock < 5 ? `Low \xB7 ${stock} left` : `${stock} in stock`;
+  const stockColor = status === "oos" ? tokens.bad : stock < 5 && stock < 999 ? tokens.warn : tokens.textTertiary;
+  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: 64
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl",
+            style: { background: img },
+            children: /* @__PURE__ */ jsx(Package, { className: "size-5 text-white" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-white", children: name }),
+            status === "draft" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "shrink-0 rounded-full px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wider",
+                style: { background: tokens.elevated, color: tokens.warn },
+                children: "Draft"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "mt-0.5 flex items-center gap-2 text-2xs",
+              style: { color: tokens.textTertiary },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "tabular-nums", style: { color: tokens.text }, children: price }),
+                variants && variants > 1 ? /* @__PURE__ */ jsxs("span", { children: [
+                  "\xB7 ",
+                  variants,
+                  " variants"
+                ] }) : null,
+                /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+                /* @__PURE__ */ jsx("span", { style: { color: stockColor }, children: stockLabel })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-[#6E7791]" })
+      ]
+    }
+  );
+}
+export {
+  ProductListRow,
+  ProductStat,
+  ProductsList
+};
+//# sourceMappingURL=products-list-detail.js.map

package/dist/mobile/mobile-redesign-mockups/products-list-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/products-list-detail.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight, Package, Plus, Search } from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\nimport {\n  StatusBar,\n  TabBar,\n  hideScrollbar,\n} from './pill-presets-tailwind-utilit';\nimport { HubHeader } from './drill-chrome-sub-app-header-';\nimport { Chip } from './events-detail-attendees-chec';\n\n/**\n * Products — list & detail\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// Products — list & detail\n// ─────────────────────────────────────────────────────────────\nexport function ProductsList() {\n  const groups: {\n    letter: string;\n    rows: {\n      name: string;\n      price: string;\n      stock: number;\n      variants?: number;\n      img: string;\n      status?: 'draft' | 'active' | 'oos';\n    }[];\n  }[] = [\n    {\n      letter: 'A',\n      rows: [\n        {\n          name: 'Afrobeats Vol. 3 — Sound Pack',\n          price: '$3.00',\n          stock: 999,\n          variants: 1,\n          img: '#A78BFA',\n          status: 'active',\n        },\n        {\n          name: 'Asun Pepper Soup',\n          price: '₦4,500',\n          stock: 12,\n          variants: 0,\n          img: '#F87171',\n          status: 'active',\n        },\n      ],\n    },\n    {\n      letter: 'J',\n      rows: [\n        {\n          name: 'Jollof Rice Platter',\n          price: '₦8,500',\n          stock: 0,\n          variants: 3,\n          img: '#F4B740',\n          status: 'oos',\n        },\n      ],\n    },\n    {\n      letter: 'L',\n      rows: [\n        {\n          name: 'Lagos Light · Lightroom Preset Pack',\n          price: '$4.00',\n          stock: 999,\n          variants: 1,\n          img: '#60A5FA',\n          status: 'active',\n        },\n        {\n          name: 'Lekki Brunch Set',\n          price: '₦12,000',\n          stock: 24,\n          variants: 2,\n          img: '#34D399',\n          status: 'active',\n        },\n      ],\n    },\n    {\n      letter: 'O',\n      rows: [\n        {\n          name: 'Operator OS · Notion Template',\n          price: '$4.00',\n          stock: 999,\n          variants: 1,\n          img: '#A78BFA',\n          status: 'draft',\n        },\n      ],\n    },\n  ];\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <HubHeader\n        title=\"Products\"\n        trailing={\n          <button\n            type=\"button\"\n            aria-label=\"Add product\"\n            className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n            style={{ background: tokens.accent }}\n          >\n            <Plus className=\"size-4\" style={{ color: tokens.accentFg }} />\n          </button>\n        }\n      />\n      <div className=\"flex-1 overflow-y-auto pb-24\">\n        {/* Search */}\n        <div className=\"px-4 pt-2\">\n          <div\n            className=\"flex items-center gap-2 rounded-2xl border px-3\"\n            style={{\n              borderColor: tokens.border,\n              background: tokens.card,\n              height: 44,\n            }}\n          >\n            <Search className=\"size-4\"\n              style={{ color: tokens.textTertiary }}\n            />\n            <span className=\"text-sm\" style={{ color: tokens.textTertiary }}>\n              Search products\n            </span>\n          </div>\n        </div>\n\n        <div\n          className={`mt-3 flex gap-2 overflow-x-auto px-4 pb-1 ${hideScrollbar}`}\n        >\n          <Chip label=\"All\" active count={42} />\n          <Chip label=\"Active\" count={36} />\n          <Chip label=\"Drafts\" count={4} />\n          <Chip label=\"Out of stock\" count={2} />\n          <Chip label=\"Physical\" count={28} />\n          <Chip label=\"Digital\" count={14} />\n        </div>\n\n        {/* Stock summary */}\n        <div className=\"mx-4 mt-3 grid grid-cols-3 gap-2\">\n          <ProductStat label=\"Active\" value=\"36\" />\n          <ProductStat label=\"Low stock\" value=\"3\" tone=\"warn\" />\n          <ProductStat label=\"Out of stock\" value=\"2\" tone=\"bad\" />\n        </div>\n\n        {/* List */}\n        <div className=\"mt-3\">\n          {groups.map((g) => (\n            <div key={g.letter}>\n              <div\n                className=\"px-4 py-1 text-3xs font-semibold\"\n                style={{\n                  color: tokens.textTertiary,\n                  background: tokens.surface,\n                }}\n              >\n                {g.letter}\n              </div>\n              <div className=\"space-y-1 px-4\">\n                {g.rows.map((r) => (\n                  <ProductListRow key={r.name} {...r} />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n      <TabBar active=\"catalog\" />\n    </div>\n  );\n}\n\nexport function ProductStat({\n  label,\n  value,\n  tone,\n}: {\n  label: string;\n  value: string;\n  tone?: 'warn' | 'bad';\n}) {\n  const color =\n    tone === 'bad' ? tokens.bad : tone === 'warn' ? tokens.warn : tokens.text;\n  return (\n    <div\n      className=\"rounded-2xl border p-3\"\n      style={{ borderColor: tokens.border, background: tokens.card }}\n    >\n      <p\n        className=\"text-3xs font-semibold\"\n        style={{ color: tokens.textTertiary }}\n      >\n        {label}\n      </p>\n      <p className=\"mt-1 text-title font-bold tabular-nums\" style={{ color }}>\n        {value}\n      </p>\n    </div>\n  );\n}\n\nexport function ProductListRow({\n  name,\n  price,\n  stock,\n  variants,\n  img,\n  status,\n}: {\n  name: string;\n  price: string;\n  stock: number;\n  variants?: number;\n  img: string;\n  status?: 'draft' | 'active' | 'oos';\n}) {\n  const stockLabel =\n    status === 'oos'\n      ? 'Out of stock'\n      : stock >= 999\n        ? 'Unlimited · digital'\n        : stock < 5\n          ? `Low · ${stock} left`\n          : `${stock} in stock`;\n  const stockColor =\n    status === 'oos'\n      ? tokens.bad\n      : stock < 5 && stock < 999\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 text-left\"\n      style={{\n        borderColor: tokens.border,\n        background: tokens.card,\n        minHeight: 64,\n      }}\n    >\n      <div\n        className=\"flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl\"\n        style={{ background: img }}\n      >\n        <Package className=\"size-5 text-white\" />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"truncate text-sm font-semibold text-white\">{name}</p>\n          {status === 'draft' && (\n            <span\n              className=\"shrink-0 rounded-full px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wider\"\n              style={{ background: tokens.elevated, color: tokens.warn }}\n            >\n              Draft\n            </span>\n          )}\n        </div>\n        <div\n          className=\"mt-0.5 flex items-center gap-2 text-2xs\"\n          style={{ color: tokens.textTertiary }}\n        >\n          <span className=\"tabular-nums\" style={{ color: tokens.text }}>\n            {price}\n          </span>\n          {variants && variants > 1 ? <span>· {variants} variants</span> : null}\n          <span>·</span>\n          <span style={{ color: stockColor }}>{stockLabel}</span>\n        </div>\n      </div>\n      <ChevronRight className=\"size-4 shrink-0 text-[#6E7791]\" />\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-redesign-mockups/recover-sheets-shared-chrome.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Recover sheets — shared chrome
+ *
+ * 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 SheetOverlay({ background, children, }: {
+    background: React.ReactNode;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function ImpactRow({ icon: Icon, text, tone, }: {
+    icon: React.ComponentType<{
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    text: string;
+    tone?: 'neutral' | 'bad';
+}): import("react").JSX.Element;
+export declare function SheetHeader({ title, subtitle, }: {
+    title: string;
+    subtitle?: string;
+}): import("react").JSX.Element;
+export declare function ChipRow({ options, active, }: {
+    options: string[];
+    active: string;
+}): import("react").JSX.Element;
+export declare function ToggleRow({ label, hint, active, }: {
+    label: string;
+    hint?: string;
+    active?: boolean;
+}): import("react").JSX.Element;
+export declare function RecoverRefundOrder(): import("react").JSX.Element;

package/dist/mobile/mobile-redesign-mockups/recover-sheets-shared-chrome.js

@@ -0,0 +1,264 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RotateCcw } from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import { Button } from "@withpotter/ui-kit/button";
+import { DetailOrder } from "./detail-order";
+function SheetOverlay({
+  background,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { background: tokens.surface }, children: background }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/55" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute inset-x-0 bottom-0 z-40 max-h-[88%] overflow-y-auto rounded-t-[28px] border-t px-4 pb-4 pt-3",
+        style: { borderColor: tokens.borderStrong, background: tokens.card },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "mx-auto mb-3 h-1 w-10 rounded-full",
+              style: { background: tokens.borderStrong }
+            }
+          ),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function ImpactRow({
+  icon: Icon,
+  text,
+  tone = "neutral"
+}) {
+  const color = tone === "bad" ? tokens.bad : tokens.textSecondary;
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5", children: [
+    /* @__PURE__ */ jsx(Icon, { className: "mt-0.5 h-4 w-4 shrink-0", style: { color } }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "text-xs leading-snug",
+        style: { color: tokens.textSecondary },
+        children: text
+      }
+    )
+  ] });
+}
+function SheetHeader({
+  title,
+  subtitle
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "px-1", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-base font-semibold leading-tight text-white", children: title }),
+    subtitle && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mt-1 text-xs leading-relaxed",
+        style: { color: tokens.textSecondary },
+        children: subtitle
+      }
+    )
+  ] });
+}
+function ChipRow({
+  options,
+  active
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: options.map((o) => {
+    const isActive = o === active;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        className: "text-2xs",
+        style: {
+          borderColor: isActive ? tokens.accent : tokens.border,
+          background: isActive ? "rgba(17,109,255,0.14)" : tokens.elevated,
+          color: isActive ? tokens.accent : tokens.textSecondary
+        },
+        children: o
+      },
+      o
+    );
+  }) });
+}
+function ToggleRow({
+  label,
+  hint,
+  active = true
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center justify-between rounded-2xl border p-3.5",
+      style: { borderColor: tokens.border, background: tokens.elevated },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pr-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-white", children: label }),
+          hint && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-2xs", style: { color: tokens.textTertiary }, children: hint })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-6 w-10 items-center rounded-full p-0.5",
+            style: {
+              background: active ? tokens.accent : tokens.borderStrong,
+              justifyContent: active ? "flex-end" : "flex-start"
+            },
+            children: /* @__PURE__ */ jsx("span", { className: "h-5 w-5 rounded-full bg-white" })
+          }
+        )
+      ]
+    }
+  );
+}
+function RecoverRefundOrder() {
+  return /* @__PURE__ */ jsxs(SheetOverlay, { background: /* @__PURE__ */ jsx(DetailOrder, {}), children: [
+    /* @__PURE__ */ jsx(
+      SheetHeader,
+      {
+        title: "Refund order #4127",
+        subtitle: "\u20A612,800 paid \xB7 GTBank \xB7 22 min ago"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "mt-4 rounded-2xl border p-4",
+        style: { borderColor: tokens.border, background: tokens.elevated },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-2xs", style: { color: tokens.textTertiary }, children: "Refund amount" }),
+            /* @__PURE__ */ jsx("span", { className: "text-3xs", style: { color: tokens.textTertiary }, children: "Max \u20A612,800" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-3xl font-bold leading-tight text-white", children: "\u20A612,800" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "mt-3 h-1.5 w-full overflow-hidden rounded-full",
+              style: { background: tokens.surface },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-full w-full rounded-full",
+                  style: { background: tokens.accent }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded-xl border py-2 text-2xs font-medium text-white",
+                style: { borderColor: tokens.border, background: tokens.card },
+                children: "Full refund"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded-xl border py-2 text-2xs font-medium",
+                style: {
+                  borderColor: tokens.border,
+                  background: tokens.card,
+                  color: tokens.textSecondary
+                },
+                children: "Partial"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "px-1 text-3xs font-medium",
+          style: { color: tokens.textTertiary },
+          children: "Reason"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+        ChipRow,
+        {
+          options: [
+            "Customer request",
+            "Out of stock",
+            "Damaged",
+            "Wrong item",
+            "Duplicate",
+            "Other"
+          ],
+          active: "Customer request"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        ToggleRow,
+        {
+          label: "Refund to original method",
+          hint: "GTBank ending 6789"
+        }
+      ),
+      /* @__PURE__ */ jsx(ToggleRow, { label: "Notify customer by email" }),
+      /* @__PURE__ */ jsx(
+        ToggleRow,
+        {
+          label: "Restock items",
+          hint: "Returns 2 items to inventory",
+          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: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center gap-2 rounded-2xl text-sm font-semibold text-white",
+              style: { background: tokens.bad },
+              children: [
+                /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" }),
+                "Refund \u20A612,800"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ChipRow,
+  ImpactRow,
+  RecoverRefundOrder,
+  SheetHeader,
+  SheetOverlay,
+  ToggleRow
+};
+//# sourceMappingURL=recover-sheets-shared-chrome.js.map

package/dist/mobile/mobile-redesign-mockups/recover-sheets-shared-chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/recover-sheets-shared-chrome.tsx"],"sourcesContent":["'use client';\n\nimport { RotateCcw } from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { DetailOrder } from './detail-order';\n\n/**\n * Recover sheets — shared chrome\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// Recover sheets — shared chrome\n// ─────────────────────────────────────────────────────────────\nexport function SheetOverlay({\n  background,\n  children,\n}: {\n  background: React.ReactNode;\n  children: React.ReactNode;\n}) {\n  return (\n    <div className=\"relative h-full\">\n      <div className=\"absolute inset-0\" style={{ background: tokens.surface }}>\n        {background}\n      </div>\n      <div className=\"absolute inset-0 bg-black/55\" />\n      <div\n        className=\"absolute inset-x-0 bottom-0 z-40 max-h-[88%] overflow-y-auto rounded-t-[28px] border-t px-4 pb-4 pt-3\"\n        style={{ borderColor: tokens.borderStrong, background: tokens.card }}\n      >\n        <div\n          className=\"mx-auto mb-3 h-1 w-10 rounded-full\"\n          style={{ background: tokens.borderStrong }}\n        />\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport function ImpactRow({\n  icon: Icon,\n  text,\n  tone = 'neutral',\n}: {\n  icon: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  text: string;\n  tone?: 'neutral' | 'bad';\n}) {\n  const color = tone === 'bad' ? tokens.bad : tokens.textSecondary;\n  return (\n    <li className=\"flex items-start gap-2.5\">\n      <Icon className=\"mt-0.5 h-4 w-4 shrink-0\" style={{ color }} />\n      <span\n        className=\"text-xs leading-snug\"\n        style={{ color: tokens.textSecondary }}\n      >\n        {text}\n      </span>\n    </li>\n  );\n}\n\nexport function SheetHeader({\n  title,\n  subtitle,\n}: {\n  title: string;\n  subtitle?: string;\n}) {\n  return (\n    <div className=\"px-1\">\n      <p className=\"text-base font-semibold leading-tight text-white\">\n        {title}\n      </p>\n      {subtitle && (\n        <p\n          className=\"mt-1 text-xs leading-relaxed\"\n          style={{ color: tokens.textSecondary }}\n        >\n          {subtitle}\n        </p>\n      )}\n    </div>\n  );\n}\n\nexport function ChipRow({\n  options,\n  active,\n}: {\n  options: string[];\n  active: string;\n}) {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      {options.map((o) => {\n        const isActive = o === active;\n        return (\n          <Button\n            variant=\"secondary\"\n            className=\"text-2xs\"\n            key={o}\n            style={{\n              borderColor: isActive ? tokens.accent : tokens.border,\n              background: isActive ? 'rgba(17,109,255,0.14)' : tokens.elevated,\n              color: isActive ? tokens.accent : tokens.textSecondary,\n            }}\n          >\n            {o}\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function ToggleRow({\n  label,\n  hint,\n  active = true,\n}: {\n  label: string;\n  hint?: string;\n  active?: boolean;\n}) {\n  return (\n    <div\n      className=\"flex items-center justify-between rounded-2xl border p-3.5\"\n      style={{ borderColor: tokens.border, background: tokens.elevated }}\n    >\n      <div className=\"min-w-0 flex-1 pr-3\">\n        <p className=\"text-sm font-medium text-white\">{label}</p>\n        {hint && (\n          <p className=\"mt-0.5 text-2xs\" style={{ color: tokens.textTertiary }}>\n            {hint}\n          </p>\n        )}\n      </div>\n      <div\n        className=\"flex h-6 w-10 items-center rounded-full p-0.5\"\n        style={{\n          background: active ? tokens.accent : tokens.borderStrong,\n          justifyContent: active ? 'flex-end' : 'flex-start',\n        }}\n      >\n        <span className=\"h-5 w-5 rounded-full bg-white\" />\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Refund order sheet\n// ─────────────────────────────────────────────────────────────\nexport function RecoverRefundOrder() {\n  return (\n    <SheetOverlay background={<DetailOrder />}>\n      <SheetHeader\n        title=\"Refund order #4127\"\n        subtitle=\"₦12,800 paid · GTBank · 22 min ago\"\n      />\n\n      <div\n        className=\"mt-4 rounded-2xl border p-4\"\n        style={{ borderColor: tokens.border, background: tokens.elevated }}\n      >\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-2xs\" style={{ color: tokens.textTertiary }}>\n            Refund amount\n          </p>\n          <span className=\"text-3xs\" style={{ color: tokens.textTertiary }}>\n            Max ₦12,800\n          </span>\n        </div>\n        <p className=\"mt-2 text-3xl font-bold leading-tight text-white\">\n          ₦12,800\n        </p>\n        <div\n          className=\"mt-3 h-1.5 w-full overflow-hidden rounded-full\"\n          style={{ background: tokens.surface }}\n        >\n          <div\n            className=\"h-full w-full rounded-full\"\n            style={{ background: tokens.accent }}\n          />\n        </div>\n        <div className=\"mt-3 grid grid-cols-2 gap-2\">\n          <button\n            type=\"button\"\n            className=\"rounded-xl border py-2 text-2xs font-medium text-white\"\n            style={{ borderColor: tokens.border, background: tokens.card }}\n          >\n            Full refund\n          </button>\n          <button\n            type=\"button\"\n            className=\"rounded-xl border py-2 text-2xs font-medium\"\n            style={{\n              borderColor: tokens.border,\n              background: tokens.card,\n              color: tokens.textSecondary,\n            }}\n          >\n            Partial\n          </button>\n        </div>\n      </div>\n\n      <div className=\"mt-4\">\n        <p\n          className=\"px-1 text-3xs font-medium\"\n          style={{ color: tokens.textTertiary }}\n        >\n          Reason\n        </p>\n        <div className=\"mt-2\">\n          <ChipRow\n            options={[\n              'Customer request',\n              'Out of stock',\n              'Damaged',\n              'Wrong item',\n              'Duplicate',\n              'Other',\n            ]}\n            active=\"Customer request\"\n          />\n        </div>\n      </div>\n\n      <div className=\"mt-4 space-y-2\">\n        <ToggleRow\n          label=\"Refund to original method\"\n          hint=\"GTBank ending 6789\"\n        />\n        <ToggleRow label=\"Notify customer by email\" />\n        <ToggleRow\n          label=\"Restock items\"\n          hint=\"Returns 2 items to inventory\"\n          active={false}\n        />\n      </div>\n\n      <div\n        className=\"sticky bottom-0 -mx-4 mt-4 grid grid-cols-2 gap-2 px-4 pb-2 pt-3\"\n        style={{\n          background: `linear-gradient(to top, ${tokens.card} 70%, transparent)`,\n        }}\n      >\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center rounded-2xl border text-sm font-medium text-white\"\n          style={{ borderColor: tokens.border, background: tokens.elevated }}\n        >\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center gap-2 rounded-2xl text-sm font-semibold text-white\"\n          style={{ background: tokens.bad }}\n        >\n          <RotateCcw className=\"size-4\" />\n          Refund ₦12,800\n        </button>\n      </div>\n    </SheetOverlay>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-redesign-mockups/staff-member-profile.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Staff member profile
+ *
+ * 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 StaffProfile(): import("react").JSX.Element;