@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-redesign-mockups/tranche-2-inbox-search-produ-2.js

@@ -0,0 +1,318 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Calendar,
+  CheckCheck,
+  ChevronLeft,
+  ChevronRight,
+  Mic,
+  MoreVertical,
+  Paperclip,
+  Phone,
+  ShoppingBag
+} from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import { Button } from "@withpotter/ui-kit/button";
+import { StatusBar, hideScrollbar } from "./pill-presets-tailwind-utilit";
+import { ChannelBadge } from "./tranche-2-inbox-search-produ";
+function MessageThread() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsxs(
+      "header",
+      {
+        className: "flex items-center gap-2 border-b px-2 py-2",
+        style: { borderColor: tokens.border, background: tokens.surface },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Back",
+              className: "flex h-9 w-9 items-center justify-center",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5 text-[#C9D0DD]" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex flex-1 items-center gap-2 text-left",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex h-9 w-9 items-center justify-center rounded-full text-2xs font-bold",
+                      style: { background: `${tokens.accent}26`, color: tokens.accent },
+                      children: "AO"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ChannelBadge, { channel: "whatsapp" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-md font-semibold text-white", children: "Adaeze Okonkwo" }),
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-3xs", style: { color: tokens.good }, children: "Online \xB7 WhatsApp" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Call",
+              className: "flex h-9 w-9 items-center justify-center",
+              children: /* @__PURE__ */ jsx(Phone, { className: "size-4 text-[#C9D0DD]" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "More",
+              className: "flex h-9 w-9 items-center justify-center",
+              children: /* @__PURE__ */ jsx(MoreVertical, { className: "size-4 text-[#C9D0DD]" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "secondary",
+        className: "border-b text-left",
+        style: { borderColor: tokens.border, background: tokens.elevated },
+        children: [
+          /* @__PURE__ */ jsx(
+            ShoppingBag,
+            {
+              className: "size-[13px] shrink-0",
+              style: { color: tokens.accent }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "min-w-0 flex-1 truncate text-xs",
+              style: { color: tokens.textSecondary },
+              children: "Customer \xB7 4 orders \xB7 \u20A682k LTV \xB7 last order #1042 today"
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-[#6E7791]" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-3 py-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "my-2 flex justify-center", children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "rounded-full px-2.5 py-0.5 text-3xs font-medium",
+          style: { background: tokens.elevated, color: tokens.textTertiary },
+          children: "Today \xB7 2:14 PM"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Bubble,
+        {
+          side: "them",
+          text: "Hi! I\u2019m thinking about coming through Saturday for the open mic. Is the VIP table for 4 still available?",
+          time: "2:14 PM"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bubble,
+        {
+          side: "them",
+          text: "Also \u2014 do you take pre-orders for the small chops platter?",
+          time: "2:14 PM"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bubble,
+        {
+          side: "me",
+          text: "Yes, the VIP 4-top is still open for Saturday 9 PM. I\u2019ll hold it for you.",
+          time: "2:18 PM",
+          status: "read"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bubble,
+        {
+          side: "me",
+          attachment: {
+            kind: "order",
+            title: "Reservation \xB7 VIP 4-top",
+            meta: "Sat Apr 26 \xB7 9 PM \xB7 2 hr \xB7 \u20A615,000 deposit"
+          },
+          time: "2:18 PM",
+          status: "read"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bubble,
+        {
+          side: "them",
+          text: "Amazing \u{1F64F} Just paid the deposit.",
+          time: "2:21 PM"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `mt-2 flex gap-2 overflow-x-auto pb-1 ${hideScrollbar}`,
+          children: [
+            /* @__PURE__ */ jsx(QuickReply, { label: "\u{1F44D} Got it" }),
+            /* @__PURE__ */ jsx(QuickReply, { label: "See you then" }),
+            /* @__PURE__ */ jsx(QuickReply, { label: "Send menu" }),
+            /* @__PURE__ */ jsx(QuickReply, { label: "Ask for ID" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-end gap-2 border-t px-3 py-2.5",
+        style: {
+          borderColor: tokens.border,
+          background: tokens.surface,
+          paddingBottom: "max(env(safe-area-inset-bottom), 10px)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Attach",
+              className: "flex h-9 w-9 shrink-0 items-center justify-center",
+              children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4 text-[#C9D0DD]" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex min-h-9 flex-1 items-center rounded-2xl border px-3 py-1.5",
+              style: { borderColor: tokens.border, background: tokens.elevated },
+              children: /* @__PURE__ */ jsx("span", { className: "text-sm", style: { color: tokens.textTertiary }, children: "WhatsApp message\u2026" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Voice",
+              className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
+              style: { background: tokens.accent },
+              children: /* @__PURE__ */ jsx(Mic, { className: "size-4", style: { color: tokens.accentFg } })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function Bubble({
+  side,
+  text,
+  attachment,
+  time,
+  status
+}) {
+  const me = side === "me";
+  return /* @__PURE__ */ jsx("div", { className: `flex ${me ? "justify-end" : "justify-start"} mb-1.5`, children: /* @__PURE__ */ jsxs("div", { className: "max-w-[78%]", children: [
+    text && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "rounded-2xl px-3 py-2",
+        style: {
+          background: me ? tokens.accent : tokens.elevated,
+          color: me ? tokens.accentFg : tokens.text,
+          borderTopRightRadius: me ? 6 : 16,
+          borderTopLeftRadius: me ? 16 : 6
+        },
+        children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-snug", children: text })
+      }
+    ),
+    attachment && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "mt-1 rounded-2xl border p-3",
+        style: {
+          borderColor: me ? `${tokens.accent}40` : tokens.border,
+          background: tokens.card,
+          minWidth: 220
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                className: "size-[13px]",
+                style: { color: tokens.accent }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-3xs font-semibold",
+                style: { color: tokens.accent },
+                children: attachment.kind === "order" ? "Reservation" : "Order"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-semibold text-white", children: attachment.title }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 text-2xs",
+              style: { color: tokens.textTertiary },
+              children: attachment.meta
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `mt-0.5 flex items-center gap-1 ${me ? "justify-end" : "justify-start"}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-3xs", style: { color: tokens.textTertiary }, children: time }),
+          me && status && /* @__PURE__ */ jsx(
+            CheckCheck,
+            {
+              className: "size-[13px]",
+              style: {
+                color: status === "read" ? tokens.accent : tokens.textTertiary
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+function QuickReply({ label }) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "secondary",
+      className: "shrink-0",
+      style: {
+        borderColor: tokens.border,
+        background: tokens.card,
+        color: tokens.textSecondary
+      },
+      children: label
+    }
+  );
+}
+export {
+  Bubble,
+  MessageThread,
+  QuickReply
+};
+//# sourceMappingURL=tranche-2-inbox-search-produ-2.js.map

package/dist/mobile/mobile-redesign-mockups/tranche-2-inbox-search-produ-2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/tranche-2-inbox-search-produ-2.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Calendar,\n  CheckCheck,\n  ChevronLeft,\n  ChevronRight,\n  Mic,\n  MoreVertical,\n  Paperclip,\n  Phone,\n  ShoppingBag,\n} from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { StatusBar, hideScrollbar } from './pill-presets-tailwind-utilit';\nimport { ChannelBadge } from './tranche-2-inbox-search-produ';\n\n/**\n * Tranche 2 — Inbox, Search, Products, Offers, Bookings, Content\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 MessageThread() {\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      {/* Header */}\n      <header\n        className=\"flex items-center gap-2 border-b px-2 py-2\"\n        style={{ borderColor: tokens.border, background: tokens.surface }}\n      >\n        <button\n          type=\"button\"\n          aria-label=\"Back\"\n          className=\"flex h-9 w-9 items-center justify-center\"\n        >\n          <ChevronLeft className=\"size-5 text-[#C9D0DD]\" />\n        </button>\n        <button\n          type=\"button\"\n          className=\"flex flex-1 items-center gap-2 text-left\"\n        >\n          <div className=\"relative shrink-0\">\n            <div\n              className=\"flex h-9 w-9 items-center justify-center rounded-full text-2xs font-bold\"\n              style={{ background: `${tokens.accent}26`, color: tokens.accent }}\n            >\n              AO\n            </div>\n            <ChannelBadge channel=\"whatsapp\" />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"truncate text-md font-semibold text-white\">\n              Adaeze Okonkwo\n            </p>\n            <p className=\"truncate text-3xs\" style={{ color: tokens.good }}>\n              Online · WhatsApp\n            </p>\n          </div>\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"Call\"\n          className=\"flex h-9 w-9 items-center justify-center\"\n        >\n          <Phone className=\"size-4 text-[#C9D0DD]\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"More\"\n          className=\"flex h-9 w-9 items-center justify-center\"\n        >\n          <MoreVertical className=\"size-4 text-[#C9D0DD]\" />\n        </button>\n      </header>\n\n      {/* Customer context strip */}\n      <Button\n        variant=\"secondary\"\n        className=\"border-b text-left\"\n        style={{ borderColor: tokens.border, background: tokens.elevated }}\n      >\n        <ShoppingBag className=\"size-[13px] shrink-0\"\n          style={{ color: tokens.accent }}\n        />\n        <p\n          className=\"min-w-0 flex-1 truncate text-xs\"\n          style={{ color: tokens.textSecondary }}\n        >\n          Customer · 4 orders · ₦82k LTV · last order #1042 today\n        </p>\n        <ChevronRight className=\"size-4 shrink-0 text-[#6E7791]\" />\n      </Button>\n\n      {/* Messages */}\n      <div className=\"flex-1 overflow-y-auto px-3 py-3\">\n        <div className=\"my-2 flex justify-center\">\n          <span\n            className=\"rounded-full px-2.5 py-0.5 text-3xs font-medium\"\n            style={{ background: tokens.elevated, color: tokens.textTertiary }}\n          >\n            Today · 2:14 PM\n          </span>\n        </div>\n        <Bubble\n          side=\"them\"\n          text=\"Hi! I’m thinking about coming through Saturday for the open mic. Is the VIP table for 4 still available?\"\n          time=\"2:14 PM\"\n        />\n        <Bubble\n          side=\"them\"\n          text=\"Also — do you take pre-orders for the small chops platter?\"\n          time=\"2:14 PM\"\n        />\n        <Bubble\n          side=\"me\"\n          text=\"Yes, the VIP 4-top is still open for Saturday 9 PM. I’ll hold it for you.\"\n          time=\"2:18 PM\"\n          status=\"read\"\n        />\n        <Bubble\n          side=\"me\"\n          attachment={{\n            kind: 'order',\n            title: 'Reservation · VIP 4-top',\n            meta: 'Sat Apr 26 · 9 PM · 2 hr · ₦15,000 deposit',\n          }}\n          time=\"2:18 PM\"\n          status=\"read\"\n        />\n        <Bubble\n          side=\"them\"\n          text=\"Amazing 🙏 Just paid the deposit.\"\n          time=\"2:21 PM\"\n        />\n\n        {/* Quick replies */}\n        <div\n          className={`mt-2 flex gap-2 overflow-x-auto pb-1 ${hideScrollbar}`}\n        >\n          <QuickReply label=\"👍 Got it\" />\n          <QuickReply label=\"See you then\" />\n          <QuickReply label=\"Send menu\" />\n          <QuickReply label=\"Ask for ID\" />\n        </div>\n      </div>\n\n      {/* Composer */}\n      <div\n        className=\"flex items-end gap-2 border-t px-3 py-2.5\"\n        style={{\n          borderColor: tokens.border,\n          background: tokens.surface,\n          paddingBottom: 'max(env(safe-area-inset-bottom), 10px)',\n        }}\n      >\n        <button\n          type=\"button\"\n          aria-label=\"Attach\"\n          className=\"flex h-9 w-9 shrink-0 items-center justify-center\"\n        >\n          <Paperclip className=\"size-4 text-[#C9D0DD]\" />\n        </button>\n        <div\n          className=\"flex min-h-9 flex-1 items-center rounded-2xl border px-3 py-1.5\"\n          style={{ borderColor: tokens.border, background: tokens.elevated }}\n        >\n          <span className=\"text-sm\" style={{ color: tokens.textTertiary }}>\n            WhatsApp message…\n          </span>\n        </div>\n        <button\n          type=\"button\"\n          aria-label=\"Voice\"\n          className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full\"\n          style={{ background: tokens.accent }}\n        >\n          <Mic className=\"size-4\" style={{ color: tokens.accentFg }} />\n        </button>\n      </div>\n    </div>\n  );\n}\n\nexport function Bubble({\n  side,\n  text,\n  attachment,\n  time,\n  status,\n}: {\n  side: 'me' | 'them';\n  text?: string;\n  attachment?: { kind: 'order'; title: string; meta: string };\n  time: string;\n  status?: 'sent' | 'delivered' | 'read';\n}) {\n  const me = side === 'me';\n  return (\n    <div className={`flex ${me ? 'justify-end' : 'justify-start'} mb-1.5`}>\n      <div className=\"max-w-[78%]\">\n        {text && (\n          <div\n            className=\"rounded-2xl px-3 py-2\"\n            style={{\n              background: me ? tokens.accent : tokens.elevated,\n              color: me ? tokens.accentFg : tokens.text,\n              borderTopRightRadius: me ? 6 : 16,\n              borderTopLeftRadius: me ? 16 : 6,\n            }}\n          >\n            <p className=\"text-sm leading-snug\">{text}</p>\n          </div>\n        )}\n        {attachment && (\n          <div\n            className=\"mt-1 rounded-2xl border p-3\"\n            style={{\n              borderColor: me ? `${tokens.accent}40` : tokens.border,\n              background: tokens.card,\n              minWidth: 220,\n            }}\n          >\n            <div className=\"flex items-center gap-2\">\n              <Calendar className=\"size-[13px]\"\n                style={{ color: tokens.accent }}\n              />\n              <p\n                className=\"text-3xs font-semibold\"\n                style={{ color: tokens.accent }}\n              >\n                {attachment.kind === 'order' ? 'Reservation' : 'Order'}\n              </p>\n            </div>\n            <p className=\"mt-1 text-sm font-semibold text-white\">\n              {attachment.title}\n            </p>\n            <p\n              className=\"mt-0.5 text-2xs\"\n              style={{ color: tokens.textTertiary }}\n            >\n              {attachment.meta}\n            </p>\n          </div>\n        )}\n        <div\n          className={`mt-0.5 flex items-center gap-1 ${me ? 'justify-end' : 'justify-start'}`}\n        >\n          <span className=\"text-3xs\" style={{ color: tokens.textTertiary }}>\n            {time}\n          </span>\n          {me && status && (\n            <CheckCheck className=\"size-[13px]\"\n              style={{\n                color: status === 'read' ? tokens.accent : tokens.textTertiary,\n              }}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function QuickReply({ label }: { label: string }) {\n  return (\n    <Button\n      variant=\"secondary\"\n      className=\"shrink-0\"\n      style={{\n        borderColor: tokens.border,\n        background: tokens.card,\n        color: tokens.textSecondary,\n      }}\n    >\n      {label}\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-redesign-mockups/tranche-2-inbox-search-produ.d.ts

@@ -0,0 +1,31 @@
+import { Bell } from 'lucide-react';
+/**
+ * Tranche 2 — Inbox, Search, Products, Offers, Bookings, Content
+ *
+ * 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 NotificationsInbox(): import("react").JSX.Element;
+export declare function NotifCard({ icon: Icon, tone, title, body, time, cta, unread, }: {
+    icon: typeof Bell;
+    tone: 'default' | 'good' | 'warn' | 'bad' | 'accent';
+    title: string;
+    body: string;
+    time: string;
+    cta?: string;
+    unread?: boolean;
+}): import("react").JSX.Element;
+export declare function MessagesInbox(): import("react").JSX.Element;
+export declare function ChannelBadge({ channel, }: {
+    channel: 'sms' | 'whatsapp' | 'email' | 'instagram';
+}): import("react").JSX.Element;
+export declare function ThreadRow({ name, channel, preview, time, unread, pinned, }: {
+    name: string;
+    channel: 'sms' | 'whatsapp' | 'email' | 'instagram';
+    preview: string;
+    time: string;
+    unread?: number;
+    pinned?: boolean;
+}): import("react").JSX.Element;