@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-redesign-mockups/catalog-single-intent.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Catalog — single intent
+ *
+ * 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 CatalogSingleIntent(): import("react").JSX.Element;
+export declare function SecondaryAction({ icon: Icon, label, }: {
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    label: string;
+}): import("react").JSX.Element;
+export declare function DraftCard({ title, hint }: {
+    title: string;
+    hint: string;
+}): import("react").JSX.Element;
+export declare function ProductRow({ title, meta, status, tone, }: {
+    title: string;
+    meta: string;
+    status: string;
+    tone: string;
+}): import("react").JSX.Element;
+export declare function UtilityTile({ label }: {
+    label: string;
+}): import("react").JSX.Element;
+export declare function CatalogMultiIntent(): import("react").JSX.Element;

package/dist/mobile/mobile-redesign-mockups/catalog-single-intent.js

@@ -0,0 +1,321 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Calendar,
+  Camera,
+  Plus,
+  Ticket,
+  UtensilsCrossed,
+  Wand2
+} from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import {
+  Caption,
+  StatusBar,
+  TabBar,
+  pill
+} from "./pill-presets-tailwind-utilit";
+function CatalogSingleIntent() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-32", children: [
+      /* @__PURE__ */ jsxs("header", { className: "pt-2", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold leading-[1.1] tracking-tight text-white", children: "Catalog" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[#94A0B5]", children: "38 products \xB7 4 drafts" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-5 space-y-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex h-[52px] w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold",
+            style: { background: tokens.accent, color: tokens.accentFg },
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-5", strokeWidth: 2.4 }),
+              "New product"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsx(SecondaryAction, { icon: Camera, label: "Scan & add" }),
+          /* @__PURE__ */ jsx(SecondaryAction, { icon: Wand2, label: "Use template" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Caption, { children: "Resume drafts" }),
+          /* @__PURE__ */ jsx("span", { className: "text-3xs text-[#94A0B5]", children: "4" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 -mx-4 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden px-4", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(
+            DraftCard,
+            {
+              title: "Lagos Suya Plate",
+              hint: "Step 2 of 4 \xB7 12m ago"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DraftCard,
+            {
+              title: "Weekend Brunch Set",
+              hint: "Step 3 of 4 \xB7 1h ago"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DraftCard,
+            {
+              title: "Live DJ Friday",
+              hint: "Step 1 of 4 \xB7 yesterday"
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Caption, { children: "Published" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-2xs font-medium text-[#9DC9FF]",
+              children: "View all"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
+          /* @__PURE__ */ jsx(
+            ProductRow,
+            {
+              title: "Jollof Rice Plate",
+              meta: "\u20A63,200 \xB7 24 in stock",
+              status: "Live",
+              tone: pill.live
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ProductRow,
+            {
+              title: "Suya Skewers",
+              meta: "\u20A61,800 \xB7 12 in stock",
+              status: "Live",
+              tone: pill.live
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ProductRow,
+            {
+              title: "Pepper Soup",
+              meta: "\u20A62,500 \xB7 4 in stock",
+              status: "Low stock",
+              tone: pill.needsReview
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ProductRow,
+            {
+              title: "Sunday Brunch Bundle",
+              meta: "Scheduled \xB7 Sun 10am",
+              status: "Scheduled",
+              tone: pill.scheduled
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-7", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Catalog tools" }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-3 gap-2", children: [
+          /* @__PURE__ */ jsx(UtilityTile, { label: "Collections" }),
+          /* @__PURE__ */ jsx(UtilityTile, { label: "Discounts" }),
+          /* @__PURE__ */ jsx(UtilityTile, { label: "Blog" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TabBar, { active: "catalog" })
+  ] });
+}
+function SecondaryAction({
+  icon: Icon,
+  label
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex h-11 items-center justify-center gap-2 rounded-xl border text-xs font-medium text-[#C9D0DD]",
+      style: { borderColor: tokens.border, background: tokens.card },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+        label
+      ]
+    }
+  );
+}
+function DraftCard({ title, hint }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex w-[200px] shrink-0 flex-col gap-2 rounded-2xl border p-3 text-left",
+      style: { borderColor: tokens.border, background: tokens.card },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "aspect-[4/3] w-full rounded-xl",
+            style: { background: tokens.elevated }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-white", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-3xs text-[#94A0B5]", children: hint })
+        ] })
+      ]
+    }
+  );
+}
+function ProductRow({
+  title,
+  meta,
+  status,
+  tone
+}) {
+  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: "68px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-12 w-12 shrink-0 rounded-xl",
+            style: { background: tokens.elevated }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-white", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-2xs text-[#94A0B5]", children: meta })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `shrink-0 rounded-full border px-2 py-1 text-3xs font-medium ${tone}`,
+            children: status
+          }
+        )
+      ]
+    }
+  );
+}
+function UtilityTile({ label }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "flex h-[60px] flex-col items-center justify-center rounded-xl border text-2xs font-medium text-[#C9D0DD]",
+      style: { borderColor: tokens.border, background: tokens.card },
+      children: label
+    }
+  );
+}
+function CatalogMultiIntent() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-32", children: [
+      /* @__PURE__ */ jsx("header", { className: "pt-2", children: /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold leading-[1.1] tracking-tight text-white", children: "Catalog" }) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 -mx-4 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden px-4", children: /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
+        { label: "Menu", icon: UtensilsCrossed, active: true },
+        { label: "Events", icon: Ticket, active: false },
+        { label: "Bookings", icon: Calendar, active: false }
+      ].map((i) => {
+        const Icon = i.icon;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex h-10 shrink-0 items-center gap-2 rounded-full border px-3.5 text-xs font-semibold",
+            style: {
+              borderColor: i.active ? `${tokens.accent}66` : tokens.border,
+              background: i.active ? `${tokens.accent}1a` : tokens.card,
+              color: i.active ? "#9DC9FF" : tokens.textSecondary
+            },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+              i.label
+            ]
+          },
+          i.label
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-4 text-xs text-[#94A0B5]", children: "28 menu items \xB7 2 drafts" }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "mt-3 flex h-[52px] w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold",
+          style: { background: tokens.accent, color: tokens.accentFg },
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "size-5", strokeWidth: 2.4 }),
+            "New menu item"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Today's specials" }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
+          /* @__PURE__ */ jsx(
+            ProductRow,
+            {
+              title: "Jollof Rice Plate",
+              meta: "\u20A63,200 \xB7 24 in stock",
+              status: "Live",
+              tone: pill.live
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ProductRow,
+            {
+              title: "Suya Skewers",
+              meta: "\u20A61,800 \xB7 12 in stock",
+              status: "Live",
+              tone: pill.live
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ProductRow,
+            {
+              title: "Pepper Soup",
+              meta: "\u20A62,500 \xB7 4 in stock",
+              status: "Low stock",
+              tone: pill.needsReview
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Categories" }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsx(UtilityTile, { label: "Mains \xB7 12" }),
+          /* @__PURE__ */ jsx(UtilityTile, { label: "Drinks \xB7 8" }),
+          /* @__PURE__ */ jsx(UtilityTile, { label: "Sides \xB7 5" }),
+          /* @__PURE__ */ jsx(UtilityTile, { label: "Specials \xB7 3" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TabBar, { active: "catalog" })
+  ] });
+}
+export {
+  CatalogMultiIntent,
+  CatalogSingleIntent,
+  DraftCard,
+  ProductRow,
+  SecondaryAction,
+  UtilityTile
+};
+//# sourceMappingURL=catalog-single-intent.js.map

package/dist/mobile/mobile-redesign-mockups/catalog-single-intent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/catalog-single-intent.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Calendar,\n  Camera,\n  Plus,\n  Ticket,\n  UtensilsCrossed,\n  Wand2,\n} from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\nimport {\n  Caption,\n  StatusBar,\n  TabBar,\n  pill,\n} from './pill-presets-tailwind-utilit';\n\n/**\n * Catalog — single intent\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// Catalog — single intent\n// ─────────────────────────────────────────────────────────────\nexport function CatalogSingleIntent() {\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <div className=\"flex-1 overflow-y-auto px-4 pb-32\">\n        <header className=\"pt-2\">\n          <h1 className=\"text-3xl font-bold leading-[1.1] tracking-tight text-white\">\n            Catalog\n          </h1>\n          <p className=\"mt-1 text-xs text-[#94A0B5]\">38 products · 4 drafts</p>\n        </header>\n\n        <div className=\"mt-5 space-y-2\">\n          <button\n            type=\"button\"\n            className=\"flex h-[52px] w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold\"\n            style={{ background: tokens.accent, color: tokens.accentFg }}\n          >\n            <Plus className=\"size-5\" strokeWidth={2.4} />\n            New product\n          </button>\n          <div className=\"grid grid-cols-2 gap-2\">\n            <SecondaryAction icon={Camera} label=\"Scan & add\" />\n            <SecondaryAction icon={Wand2} label=\"Use template\" />\n          </div>\n        </div>\n\n        <section className=\"mt-6\">\n          <div className=\"flex items-center justify-between\">\n            <Caption>Resume drafts</Caption>\n            <span className=\"text-3xs text-[#94A0B5]\">4</span>\n          </div>\n          <div className=\"mt-3 -mx-4 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden px-4\">\n            <div className=\"flex gap-3\">\n              <DraftCard\n                title=\"Lagos Suya Plate\"\n                hint=\"Step 2 of 4 · 12m ago\"\n              />\n              <DraftCard\n                title=\"Weekend Brunch Set\"\n                hint=\"Step 3 of 4 · 1h ago\"\n              />\n              <DraftCard\n                title=\"Live DJ Friday\"\n                hint=\"Step 1 of 4 · yesterday\"\n              />\n            </div>\n          </div>\n        </section>\n\n        <section className=\"mt-6\">\n          <div className=\"flex items-center justify-between\">\n            <Caption>Published</Caption>\n            <button\n              type=\"button\"\n              className=\"text-2xs font-medium text-[#9DC9FF]\"\n            >\n              View all\n            </button>\n          </div>\n          <div className=\"mt-3 space-y-2\">\n            <ProductRow\n              title=\"Jollof Rice Plate\"\n              meta=\"₦3,200 · 24 in stock\"\n              status=\"Live\"\n              tone={pill.live}\n            />\n            <ProductRow\n              title=\"Suya Skewers\"\n              meta=\"₦1,800 · 12 in stock\"\n              status=\"Live\"\n              tone={pill.live}\n            />\n            <ProductRow\n              title=\"Pepper Soup\"\n              meta=\"₦2,500 · 4 in stock\"\n              status=\"Low stock\"\n              tone={pill.needsReview}\n            />\n            <ProductRow\n              title=\"Sunday Brunch Bundle\"\n              meta=\"Scheduled · Sun 10am\"\n              status=\"Scheduled\"\n              tone={pill.scheduled}\n            />\n          </div>\n        </section>\n\n        <section className=\"mt-7\">\n          <Caption>Catalog tools</Caption>\n          <div className=\"mt-2 grid grid-cols-3 gap-2\">\n            <UtilityTile label=\"Collections\" />\n            <UtilityTile label=\"Discounts\" />\n            <UtilityTile label=\"Blog\" />\n          </div>\n        </section>\n      </div>\n      <TabBar active=\"catalog\" />\n    </div>\n  );\n}\n\nexport function SecondaryAction({\n  icon: Icon,\n  label,\n}: {\n  icon: React.ComponentType<{ className?: string }>;\n  label: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className=\"flex h-11 items-center justify-center gap-2 rounded-xl border text-xs font-medium text-[#C9D0DD]\"\n      style={{ borderColor: tokens.border, background: tokens.card }}\n    >\n      <Icon className=\"h-4 w-4\" />\n      {label}\n    </button>\n  );\n}\n\nexport function DraftCard({ title, hint }: { title: string; hint: string }) {\n  return (\n    <button\n      type=\"button\"\n      className=\"flex w-[200px] shrink-0 flex-col gap-2 rounded-2xl border p-3 text-left\"\n      style={{ borderColor: tokens.border, background: tokens.card }}\n    >\n      <div\n        className=\"aspect-[4/3] w-full rounded-xl\"\n        style={{ background: tokens.elevated }}\n      />\n      <div>\n        <p className=\"truncate text-xs font-medium text-white\">{title}</p>\n        <p className=\"mt-0.5 truncate text-3xs text-[#94A0B5]\">{hint}</p>\n      </div>\n    </button>\n  );\n}\n\nexport function ProductRow({\n  title,\n  meta,\n  status,\n  tone,\n}: {\n  title: string;\n  meta: string;\n  status: string;\n  tone: string;\n}) {\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: '68px',\n      }}\n    >\n      <div\n        className=\"h-12 w-12 shrink-0 rounded-xl\"\n        style={{ background: tokens.elevated }}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"truncate text-sm font-medium text-white\">{title}</p>\n        <p className=\"mt-0.5 truncate text-2xs text-[#94A0B5]\">{meta}</p>\n      </div>\n      <span\n        className={`shrink-0 rounded-full border px-2 py-1 text-3xs font-medium ${tone}`}\n      >\n        {status}\n      </span>\n    </button>\n  );\n}\n\nexport function UtilityTile({ label }: { label: string }) {\n  return (\n    <button\n      type=\"button\"\n      className=\"flex h-[60px] flex-col items-center justify-center rounded-xl border text-2xs font-medium text-[#C9D0DD]\"\n      style={{ borderColor: tokens.border, background: tokens.card }}\n    >\n      {label}\n    </button>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Catalog — multi intent\n// ─────────────────────────────────────────────────────────────\nexport function CatalogMultiIntent() {\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <div className=\"flex-1 overflow-y-auto px-4 pb-32\">\n        <header className=\"pt-2\">\n          <h1 className=\"text-3xl font-bold leading-[1.1] tracking-tight text-white\">\n            Catalog\n          </h1>\n        </header>\n\n        <div className=\"mt-3 -mx-4 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden px-4\">\n          <div className=\"flex gap-2\">\n            {[\n              { label: 'Menu', icon: UtensilsCrossed, active: true },\n              { label: 'Events', icon: Ticket, active: false },\n              { label: 'Bookings', icon: Calendar, active: false },\n            ].map((i) => {\n              const Icon = i.icon;\n              return (\n                <button\n                  type=\"button\"\n                  key={i.label}\n                  className=\"flex h-10 shrink-0 items-center gap-2 rounded-full border px-3.5 text-xs font-semibold\"\n                  style={{\n                    borderColor: i.active\n                      ? `${tokens.accent}66`\n                      : tokens.border,\n                    background: i.active ? `${tokens.accent}1a` : tokens.card,\n                    color: i.active ? '#9DC9FF' : tokens.textSecondary,\n                  }}\n                >\n                  <Icon className=\"h-4 w-4\" />\n                  {i.label}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n\n        <p className=\"mt-4 text-xs text-[#94A0B5]\">28 menu items · 2 drafts</p>\n\n        <button\n          type=\"button\"\n          className=\"mt-3 flex h-[52px] w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold\"\n          style={{ background: tokens.accent, color: tokens.accentFg }}\n        >\n          <Plus className=\"size-5\" strokeWidth={2.4} />\n          New menu item\n        </button>\n\n        <section className=\"mt-6\">\n          <Caption>Today&apos;s specials</Caption>\n          <div className=\"mt-3 space-y-2\">\n            <ProductRow\n              title=\"Jollof Rice Plate\"\n              meta=\"₦3,200 · 24 in stock\"\n              status=\"Live\"\n              tone={pill.live}\n            />\n            <ProductRow\n              title=\"Suya Skewers\"\n              meta=\"₦1,800 · 12 in stock\"\n              status=\"Live\"\n              tone={pill.live}\n            />\n            <ProductRow\n              title=\"Pepper Soup\"\n              meta=\"₦2,500 · 4 in stock\"\n              status=\"Low stock\"\n              tone={pill.needsReview}\n            />\n          </div>\n        </section>\n\n        <section className=\"mt-6\">\n          <Caption>Categories</Caption>\n          <div className=\"mt-2 grid grid-cols-2 gap-2\">\n            <UtilityTile label=\"Mains · 12\" />\n            <UtilityTile label=\"Drinks · 8\" />\n            <UtilityTile label=\"Sides · 5\" />\n            <UtilityTile label=\"Specials · 3\" />\n          </div>\n        </section>\n      </div>\n      <TabBar active=\"catalog\" />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-redesign-mockups/compose-sheet-universal-acti.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Compose sheet (universal action sheet over a dimmed Today)
+ *
+ * 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 ComposeSheetOverlay(): import("react").JSX.Element;
+export declare function ComposeRow({ icon: Icon, label, hint, accent, }: {
+    icon: React.ComponentType<{
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    label: string;
+    hint: string;
+    accent?: boolean;
+}): import("react").JSX.Element;
+export declare function LightStatusBar(): import("react").JSX.Element;
+export declare function LightTabBar({ active, }: {
+    active: 'today' | 'manage' | 'catalog' | 'store';
+}): import("react").JSX.Element;

package/dist/mobile/mobile-redesign-mockups/compose-sheet-universal-acti.js

@@ -0,0 +1,273 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Calendar,
+  ChevronRight,
+  FileText,
+  HelpCircle,
+  Home,
+  List,
+  MessageSquare,
+  Newspaper,
+  Package,
+  Plus,
+  Send,
+  Settings as SettingsIcon,
+  ShoppingBag,
+  Tag,
+  Ticket
+} from "lucide-react";
+import { tokens, lightTokens } from "../mobile-redesign-theme";
+import { TodaySingleIntent } from "./today-single-intent";
+function ComposeSheetOverlay() {
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { background: tokens.surface }, children: /* @__PURE__ */ jsx(TodaySingleIntent, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/55" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute inset-x-0 bottom-0 z-40 rounded-t-[28px] border-t px-4 pb-6 pt-3",
+        style: { borderColor: tokens.borderStrong, background: tokens.card },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "mx-auto mb-4 h-1 w-10 rounded-full",
+              style: { background: tokens.borderStrong }
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "px-1 text-3xs font-medium text-[#94A0B5]", children: "Create" }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-1", children: [
+            /* @__PURE__ */ jsx(
+              ComposeRow,
+              {
+                icon: Package,
+                label: "New product",
+                hint: "Add to catalog"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ComposeRow,
+              {
+                icon: ShoppingBag,
+                label: "New order",
+                hint: "Manual order entry"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ComposeRow,
+              {
+                icon: Calendar,
+                label: "New booking",
+                hint: "Schedule a service"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ComposeRow,
+              {
+                icon: Ticket,
+                label: "New event",
+                hint: "Tickets, capacity, RSVP"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ComposeRow,
+              {
+                icon: Tag,
+                label: "New discount",
+                hint: "Code or automatic"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ComposeRow,
+              {
+                icon: FileText,
+                label: "New page",
+                hint: "Storefront content"
+              }
+            ),
+            /* @__PURE__ */ jsx(ComposeRow, { icon: Newspaper, label: "New post", hint: "Blog or update" }),
+            /* @__PURE__ */ jsx(
+              ComposeRow,
+              {
+                icon: Send,
+                label: "Broadcast message",
+                hint: "Email \xB7 SMS \xB7 WhatsApp"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "my-3 h-px", style: { background: tokens.border } }),
+          /* @__PURE__ */ jsx("p", { className: "px-1 text-3xs font-medium text-[#94A0B5]", children: "Talk to us" }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-1", children: [
+            /* @__PURE__ */ jsx(
+              ComposeRow,
+              {
+                icon: MessageSquare,
+                label: "Send feedback",
+                hint: "Tell us what's working",
+                accent: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ComposeRow,
+              {
+                icon: HelpCircle,
+                label: "Help & docs",
+                hint: "Guides, FAQs, contact"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "mt-4 h-12 w-full rounded-2xl text-md font-medium text-white",
+              style: {
+                background: tokens.elevated,
+                border: `1px solid ${tokens.border}`
+              },
+              children: "Cancel"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute right-3 z-50",
+        style: { bottom: "calc(100% - 100% + 16px)", display: "none" }
+      }
+    )
+  ] });
+}
+function ComposeRow({
+  icon: Icon,
+  label,
+  hint,
+  accent
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-left",
+      style: { minHeight: "60px" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
+            style: {
+              background: accent ? "rgba(17,109,255,0.12)" : tokens.elevated,
+              border: `1px solid ${accent ? "rgba(17,109,255,0.28)" : tokens.border}`
+            },
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                className: "h-[18px] w-[18px]",
+                style: { color: accent ? tokens.accent : "#C9D0DD" }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-md font-medium text-white", children: label }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-2xs text-[#94A0B5]", children: hint })
+        ] }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-[#6E7791]" })
+      ]
+    }
+  );
+}
+function LightStatusBar() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative z-20 flex h-11 shrink-0 items-center justify-between px-6 pt-2 text-2xs font-semibold",
+      style: { color: lightTokens.text },
+      children: [
+        /* @__PURE__ */ jsx("span", { children: "9:41" }),
+        /* @__PURE__ */ jsx("span", { className: "opacity-0", children: "\u2022" }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-3xs tracking-wider", children: [
+          /* @__PURE__ */ jsx("span", { children: "5G" }),
+          /* @__PURE__ */ jsx("span", { children: "\u2022\u2022\u2022" }),
+          /* @__PURE__ */ jsx("span", { children: "100" })
+        ] })
+      ]
+    }
+  );
+}
+function LightTabBar({
+  active
+}) {
+  const tabs = [
+    { id: "today", label: "Today", icon: Home },
+    { id: "manage", label: "Manage", icon: List },
+    { id: "catalog", label: "Catalog", icon: Package },
+    { id: "store", label: "Store", icon: SettingsIcon }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-x-3 bottom-3 z-30 flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        className: "pointer-events-auto flex h-[54px] flex-1 items-stretch rounded-[26px] border px-1",
+        style: {
+          background: "rgba(255,255,255,0.92)",
+          borderColor: lightTokens.border,
+          backdropFilter: "blur(20px) saturate(160%)"
+        },
+        children: tabs.map((t) => {
+          const Icon = t.icon;
+          const isActive = active === t.id;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex flex-1 flex-col items-center justify-center gap-[3px]",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    className: "h-[20px] w-[20px]",
+                    style: {
+                      color: isActive ? lightTokens.accent : lightTokens.textTertiary
+                    },
+                    strokeWidth: isActive ? 2.2 : 1.6
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-3xs font-medium leading-none",
+                    style: {
+                      color: isActive ? lightTokens.accent : lightTokens.textTertiary
+                    },
+                    children: t.label
+                  }
+                )
+              ]
+            },
+            t.id
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Compose",
+        className: "pointer-events-auto flex h-[54px] w-[54px] items-center justify-center rounded-full",
+        style: { background: lightTokens.accent, color: lightTokens.accentFg },
+        children: /* @__PURE__ */ jsx(Plus, { className: "size-5", strokeWidth: 2.4 })
+      }
+    )
+  ] });
+}
+export {
+  ComposeRow,
+  ComposeSheetOverlay,
+  LightStatusBar,
+  LightTabBar
+};
+//# sourceMappingURL=compose-sheet-universal-acti.js.map