@withpotter/components 0.13.0-next.101

package/dist/mobile/primitives/domain.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Mobile Primitives — Domain helpers
+ *
+ * Thin wrappers around ListRow / inline patterns for specific record types.
+ * OrderRow, BookingRow, CustomerRow, ProductListRow, PromoCodeRow,
+ * BlogPostRow, FolderChip
+ *
+ * Naming note:
+ *  - OrderRow  = canonical name  (RecordRow is re-exported as alias for gallery back-compat)
+ *  - DiscountRow is TAKEN in the mockup file for a different component in MarketingHub.
+ *    Use PromoCodeRow for the /m/manage/discounts list.
+ */
+import React from 'react';
+export declare function OrderRow({ title, meta, statusLabel, statusTone, swipeAction, onSwipe, onPress, }: {
+    title: string;
+    meta: string;
+    statusLabel: string;
+    /** Tailwind utility string for the pill, e.g. pill preset classes. */
+    statusTone: string;
+    /**
+     * Label for the swipe action. Was decorative — a static hint and a fixed
+     * offset that never moved — and now needs `onSwipe` to do anything.
+     */
+    swipeAction?: string;
+    /** Fired when the row is pulled past the threshold and released. */
+    onSwipe?: () => void;
+    /** Opens the record. */
+    onPress?: () => void;
+}): React.JSX.Element;
+/**
+ * @deprecated Use OrderRow. RecordRow is a re-export alias kept for
+ * back-compat with the mockup gallery.
+ */
+export declare const RecordRow: typeof OrderRow;
+export declare function BookingRow({ time, name, meta, status, tone, swipe, }: {
+    /** Time string, e.g. "9:00 AM" — split on space to get time + period. */
+    time: string;
+    name: string;
+    meta: string;
+    status: string;
+    /** Tailwind utility string for the status pill. */
+    tone: string;
+    swipe?: string;
+}): React.JSX.Element;
+export declare function CustomerRow({ initials, name, meta, type, typeColor, }: {
+    initials: string;
+    name: string;
+    meta: string;
+    type: string;
+    /** Accent colour for the type badge (hex / CSS var). */
+    typeColor?: string;
+}): React.JSX.Element;
+export declare function ProductListRow({ name, price, stock, variants, img, status, }: {
+    name: string;
+    price: string;
+    stock: number;
+    variants?: number;
+    /** Tailwind background utility or CSS var for the thumbnail placeholder. */
+    img: string;
+    status?: 'draft' | 'active' | 'oos';
+}): React.JSX.Element;
+export declare function PromoCodeRow({ code, value, scope, redemptions, cap, status, }: {
+    code: string;
+    value: string;
+    scope: string;
+    redemptions: number;
+    cap?: number;
+    status: 'live' | 'scheduled' | 'expired';
+}): React.JSX.Element;
+export declare function BlogPostRow({ title, meta, status, cover, featured, }: {
+    title: string;
+    meta: string;
+    status: 'draft' | 'scheduled' | 'published';
+    /** Tailwind background utility or CSS var for the cover placeholder. */
+    cover: string;
+    featured?: boolean;
+}): React.JSX.Element;
+export declare function FolderChip({ label, count, active, onClick, }: {
+    label: string;
+    count: number;
+    active?: boolean;
+    onClick?: () => void;
+}): React.JSX.Element;

package/dist/mobile/primitives/domain.js

@@ -0,0 +1,571 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SwipeRow } from "./swipe-row";
+import {
+  ChevronRight,
+  FileText,
+  Folder,
+  MoreVertical,
+  Package,
+  Star,
+  Tag
+} from "lucide-react";
+function OrderRow({
+  title,
+  meta,
+  statusLabel,
+  statusTone,
+  swipeAction,
+  onSwipe,
+  onPress
+}) {
+  const row = /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "relative flex w-full items-center justify-between rounded-2xl border p-3.5 text-left",
+      style: {
+        borderColor: "var(--mb-border)",
+        background: "var(--mb-card)",
+        minHeight: "74px"
+      },
+      onClick: onPress,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pr-3", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "truncate text-md font-medium",
+              style: { color: "var(--mb-text)" },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 truncate text-2xs",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: meta
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `shrink-0 rounded-full border px-2 py-1 text-3xs font-medium ${statusTone}`,
+              children: statusLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: "size-4",
+              style: { color: "var(--mb-text-muted)" }
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+  return swipeAction && onSwipe ? /* @__PURE__ */ jsx(SwipeRow, { label: swipeAction, onAction: onSwipe, children: row }) : row;
+}
+const RecordRow = OrderRow;
+function BookingRow({
+  time,
+  name,
+  meta,
+  status,
+  tone,
+  swipe
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative overflow-hidden rounded-2xl border",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        swipe && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-y-0 right-0 flex w-24 items-center justify-center text-3xs font-semibold",
+            style: {
+              background: "color-mix(in srgb, var(--mb-good) 15%, transparent)",
+              color: "var(--mb-good)"
+            },
+            children: swipe
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative flex items-center gap-3 p-3",
+            style: { background: "var(--mb-card)" },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex w-14 shrink-0 flex-col items-start", children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "text-md font-semibold tabular-nums",
+                    style: { color: "var(--mb-text)" },
+                    children: time.split(" ")[0]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "text-3xs font-medium",
+                    style: { color: "var(--mb-text-tertiary)" },
+                    children: time.split(" ")[1]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "min-w-0 flex-1 border-l pl-3",
+                  style: { borderColor: "var(--mb-border)" },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "truncate text-sm font-medium",
+                        style: { color: "var(--mb-text)" },
+                        children: name
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "mt-0.5 truncate text-2xs",
+                        style: { color: "var(--mb-text-tertiary)" },
+                        children: meta
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `shrink-0 rounded-full border px-2 py-0.5 text-3xs font-semibold ${tone}`,
+                  children: status
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function CustomerRow({
+  initials,
+  name,
+  meta,
+  type,
+  typeColor
+}) {
+  const color = typeColor ?? "var(--mb-accent)";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex w-full items-center gap-3 rounded-2xl border p-3 text-left",
+      style: {
+        borderColor: "var(--mb-border)",
+        background: "var(--mb-card)",
+        minHeight: 72
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-semibold",
+            style: {
+              background: "color-mix(in srgb, var(--mb-accent) 15%, transparent)",
+              color: "var(--mb-accent)"
+            },
+            children: initials
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "truncate text-md font-medium",
+              style: { color: "var(--mb-text)" },
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 truncate text-2xs",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: meta
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "rounded-full border px-2 py-0.5 text-3xs font-semibold",
+            style: {
+              borderColor: typeColor ? `${typeColor}50` : "color-mix(in srgb, var(--mb-accent) 30%, transparent)",
+              background: typeColor ? `${typeColor}1A` : "color-mix(in srgb, var(--mb-accent) 10%, transparent)",
+              color
+            },
+            children: type
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChevronRight,
+          {
+            className: "size-4",
+            style: { color: "var(--mb-text-muted)" }
+          }
+        )
+      ]
+    }
+  );
+}
+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" ? "var(--mb-bad)" : stock < 5 && stock < 999 ? "var(--mb-warn)" : "var(--mb-text-tertiary)";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex w-full items-center gap-3 rounded-2xl border p-3 text-left",
+      style: {
+        borderColor: "var(--mb-border)",
+        background: "var(--mb-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",
+                style: { color: "var(--mb-text)" },
+                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: "var(--mb-elevated)",
+                  color: "var(--mb-warn)"
+                },
+                children: "Draft"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "mt-0.5 flex items-center gap-2 text-2xs",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "tabular-nums", style: { color: "var(--mb-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",
+            style: { color: "var(--mb-text-muted)" }
+          }
+        )
+      ]
+    }
+  );
+}
+function PromoCodeRow({
+  code,
+  value,
+  scope,
+  redemptions,
+  cap,
+  status
+}) {
+  const statusCfg = {
+    live: {
+      fg: "var(--mb-good)",
+      bg: "color-mix(in srgb, var(--mb-good) 10%, transparent)",
+      label: "Live"
+    },
+    scheduled: {
+      fg: "var(--mb-warn)",
+      bg: "color-mix(in srgb, var(--mb-warn) 10%, transparent)",
+      label: "Scheduled"
+    },
+    expired: {
+      fg: "var(--mb-text-tertiary)",
+      bg: "var(--mb-elevated)",
+      label: "Expired"
+    }
+  }[status];
+  const pct = cap ? Math.round(redemptions / cap * 100) : null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "w-full rounded-2xl border p-3.5 text-left",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
+              style: { background: "var(--mb-elevated)" },
+              children: /* @__PURE__ */ jsx(Tag, { className: "size-4", style: { color: "var(--mb-accent)" } })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "font-mono text-sm font-bold tracking-wider",
+                  style: { color: "var(--mb-text)" },
+                  children: code
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "rounded-full px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wider",
+                  style: { background: statusCfg.bg, color: statusCfg.fg },
+                  children: statusCfg.label
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "mt-0.5 text-xs font-semibold",
+                style: { color: "var(--mb-text)" },
+                children: value
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "mt-0.5 truncate text-2xs",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: scope
+              }
+            )
+          ] })
+        ] }),
+        (cap || redemptions > 0) && /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-1 flex-1 overflow-hidden rounded-full",
+              style: { background: "var(--mb-elevated)" },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-full rounded-full",
+                  style: {
+                    width: `${pct ?? Math.min(redemptions, 100)}%`,
+                    background: statusCfg.fg
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "text-3xs tabular-nums",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: [
+                redemptions,
+                cap ? ` / ${cap}` : "",
+                " used",
+                pct !== null ? ` \xB7 ${pct}%` : ""
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function BlogPostRow({
+  title,
+  meta,
+  status,
+  cover,
+  featured
+}) {
+  const statusCfg = {
+    draft: {
+      fg: "var(--mb-warn)",
+      bg: "color-mix(in srgb, var(--mb-warn) 10%, transparent)",
+      label: "Draft"
+    },
+    scheduled: {
+      fg: "var(--mb-accent)",
+      bg: "color-mix(in srgb, var(--mb-accent) 10%, transparent)",
+      label: "Scheduled"
+    },
+    published: {
+      fg: "var(--mb-good)",
+      bg: "color-mix(in srgb, var(--mb-good) 10%, transparent)",
+      label: "Published"
+    }
+  }[status];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex w-full items-center gap-3 rounded-2xl border p-3 text-left",
+      style: {
+        borderColor: "var(--mb-border)",
+        background: "var(--mb-card)",
+        minHeight: 76
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-xl",
+            style: { background: cover },
+            children: /* @__PURE__ */ jsx(FileText, { className: "size-5 text-white" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            featured && /* @__PURE__ */ jsx(Star, { className: "shrink-0", style: { color: "var(--mb-warn)" } }),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "truncate text-sm font-semibold leading-tight",
+                style: { color: "var(--mb-text)" },
+                children: title
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 truncate text-2xs",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: meta
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "mt-1 inline-block rounded-full px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wider",
+              style: { background: statusCfg.bg, color: statusCfg.fg },
+              children: statusCfg.label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          MoreVertical,
+          {
+            className: "size-4 shrink-0",
+            style: { color: "var(--mb-text-muted)" }
+          }
+        )
+      ]
+    }
+  );
+}
+function FolderChip({
+  label,
+  count,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex h-9 shrink-0 items-center gap-1.5 rounded-2xl border px-3",
+      style: {
+        borderColor: active ? "var(--mb-accent)" : "var(--mb-border)",
+        background: active ? "color-mix(in srgb, var(--mb-accent) 10%, transparent)" : "var(--mb-card)"
+      },
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(
+          Folder,
+          {
+            style: {
+              color: active ? "var(--mb-accent)" : "var(--mb-text-secondary)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-xs font-medium",
+            style: {
+              color: active ? "var(--mb-accent)" : "var(--mb-text-secondary)"
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-2xs tabular-nums",
+            style: {
+              color: active ? "var(--mb-accent)" : "var(--mb-text-tertiary)",
+              opacity: 0.85
+            },
+            children: count
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  BlogPostRow,
+  BookingRow,
+  CustomerRow,
+  FolderChip,
+  OrderRow,
+  ProductListRow,
+  PromoCodeRow,
+  RecordRow
+};
+//# sourceMappingURL=domain.js.map