@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-theme-provider.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo
+} from "react";
+import {
+  ACTIVE_DARK,
+  ACTIVE_LIGHT,
+  mobileThemes
+} from "@withpotter/components/styles/mobile/theme";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useTheme } from "@withpotter/lib/theme-context";
+const MobileThemeContext = createContext(
+  void 0
+);
+function relativeLuminance(channel) {
+  const normalized = channel / 255;
+  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+function contrastRatio(hex, foreground) {
+  const background = [
+    Number.parseInt(hex.slice(1, 3), 16),
+    Number.parseInt(hex.slice(3, 5), 16),
+    Number.parseInt(hex.slice(5, 7), 16)
+  ];
+  const backgroundLuminance = 0.2126 * relativeLuminance(background[0]) + 0.7152 * relativeLuminance(background[1]) + 0.0722 * relativeLuminance(background[2]);
+  const foregroundLuminance = 0.2126 * relativeLuminance(foreground[0]) + 0.7152 * relativeLuminance(foreground[1]) + 0.0722 * relativeLuminance(foreground[2]);
+  const lighter = Math.max(backgroundLuminance, foregroundLuminance);
+  const darker = Math.min(backgroundLuminance, foregroundLuminance);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function foregroundFor(hex) {
+  const darkContrast = contrastRatio(hex, [17, 17, 17]);
+  const lightContrast = contrastRatio(hex, [255, 255, 255]);
+  return darkContrast >= lightContrast ? "var(--mb-app-ground-text-light)" : "var(--mb-app-ground-text-dark)";
+}
+function MobileThemeProvider({ children }) {
+  const { tenant } = useAuth();
+  const { theme: mode, resolvedTheme: resolvedMode } = useTheme();
+  const themeName = resolvedMode === "dark" ? ACTIVE_DARK : ACTIVE_LIGHT;
+  const theme = mobileThemes[themeName];
+  const shellColor = typeof tenant?.settings?.mobileShellColor === "string" && /^#[0-9A-Fa-f]{6}$/.test(tenant.settings.mobileShellColor) ? tenant.settings.mobileShellColor : void 0;
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    const prevHtml = document.documentElement.style.backgroundColor;
+    const prevBody = document.body.style.backgroundColor;
+    const prevColorScheme = document.documentElement.style.colorScheme;
+    const prevAppGround = root.style.getPropertyValue("--mb-app-ground");
+    const prevAppGroundText = root.style.getPropertyValue(
+      "--mb-app-ground-text"
+    );
+    if (shellColor) {
+      root.style.setProperty("--mb-app-ground", shellColor);
+      root.style.setProperty("--mb-app-ground-text", foregroundFor(shellColor));
+    } else {
+      root.style.removeProperty("--mb-app-ground");
+      root.style.removeProperty("--mb-app-ground-text");
+    }
+    const resolvedAppGround = getComputedStyle(document.documentElement).getPropertyValue("--mb-app-ground").trim() || theme.canvas;
+    document.documentElement.style.backgroundColor = resolvedAppGround;
+    document.body.style.backgroundColor = resolvedAppGround;
+    document.documentElement.style.colorScheme = resolvedMode;
+    let meta = document.querySelector(
+      'meta[name="theme-color"]'
+    );
+    const prevThemeColor = meta?.getAttribute("content") ?? null;
+    if (!meta) {
+      meta = document.createElement("meta");
+      meta.name = "theme-color";
+      document.head.appendChild(meta);
+    }
+    meta.setAttribute("content", resolvedAppGround);
+    return () => {
+      if (prevAppGround) {
+        root.style.setProperty("--mb-app-ground", prevAppGround);
+      } else {
+        root.style.removeProperty("--mb-app-ground");
+      }
+      if (prevAppGroundText) {
+        root.style.setProperty("--mb-app-ground-text", prevAppGroundText);
+      } else {
+        root.style.removeProperty("--mb-app-ground-text");
+      }
+      document.documentElement.style.backgroundColor = prevHtml;
+      document.body.style.backgroundColor = prevBody;
+      document.documentElement.style.colorScheme = prevColorScheme;
+      if (meta && prevThemeColor !== null) {
+        meta.setAttribute("content", prevThemeColor);
+      }
+    };
+  }, [theme.canvas, resolvedMode, shellColor]);
+  const value = useMemo(
+    () => ({
+      mode,
+      resolvedMode,
+      themeName,
+      theme
+    }),
+    [mode, resolvedMode, themeName, theme]
+  );
+  return /* @__PURE__ */ jsx(MobileThemeContext.Provider, { value, children });
+}
+function useMobileTheme() {
+  const context = useContext(MobileThemeContext);
+  if (!context) {
+    return {
+      mode: "dark",
+      resolvedMode: "dark",
+      themeName: ACTIVE_LIGHT,
+      theme: mobileThemes[ACTIVE_LIGHT]
+    };
+  }
+  return context;
+}
+export {
+  MobileThemeProvider,
+  useMobileTheme
+};
+//# sourceMappingURL=mobile-theme-provider.js.map

package/dist/mobile/mobile-theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/mobile-theme-provider.tsx"],"sourcesContent":["'use client';\n\n/**\n * MobileThemeProvider — unified with the desktop `ThemeProvider`.\n *\n * Historically the dashboard had two parallel theme systems (desktop tokens\n * via `<html>.dark` and mobile `--mb-*` tokens via inline CSS variables on a\n * wrapper div). That caused portaled modals/dialogs using desktop tokens to\n * render light over dark mobile screens because the desktop preference was\n * stored separately and the mobile wrapper's inline overrides did not reach\n * portaled subtrees.\n *\n * This provider delegates to the desktop `useTheme()` and exposes the same\n * `MobileTheme` JS object that screens/icons consume programmatically. The\n * CSS-variable side of the mobile system is provided globally in `globals.css`\n * where `--mb-*` tokens alias the equivalent desktop tokens under both\n * `:root` and `.dark`. A single Light/Dark/System preference now drives\n * everything — no portal escape, no preference fork.\n */\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  type ReactNode,\n} from 'react';\nimport {\n  ACTIVE_DARK,\n  ACTIVE_LIGHT,\n  mobileThemes,\n  type MobileTheme,\n  type MobileThemeName,\n} from '@withpotter/components/styles/mobile/theme';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useTheme } from '@withpotter/lib/theme-context';\n\ntype MobileThemeMode = 'light' | 'dark' | 'system';\ntype ResolvedMobileThemeMode = 'light' | 'dark';\n\ninterface MobileThemeContextValue {\n  mode: MobileThemeMode;\n  resolvedMode: ResolvedMobileThemeMode;\n  themeName: MobileThemeName;\n  theme: MobileTheme;\n}\n\nconst MobileThemeContext = createContext<MobileThemeContextValue | undefined>(\n  undefined,\n);\n\nfunction relativeLuminance(channel: number) {\n  const normalized = channel / 255;\n  return normalized <= 0.03928\n    ? normalized / 12.92\n    : ((normalized + 0.055) / 1.055) ** 2.4;\n}\n\nfunction contrastRatio(hex: string, foreground: [number, number, number]) {\n  const background = [\n    Number.parseInt(hex.slice(1, 3), 16),\n    Number.parseInt(hex.slice(3, 5), 16),\n    Number.parseInt(hex.slice(5, 7), 16),\n  ];\n  const backgroundLuminance =\n    0.2126 * relativeLuminance(background[0]) +\n    0.7152 * relativeLuminance(background[1]) +\n    0.0722 * relativeLuminance(background[2]);\n  const foregroundLuminance =\n    0.2126 * relativeLuminance(foreground[0]) +\n    0.7152 * relativeLuminance(foreground[1]) +\n    0.0722 * relativeLuminance(foreground[2]);\n  const lighter = Math.max(backgroundLuminance, foregroundLuminance);\n  const darker = Math.min(backgroundLuminance, foregroundLuminance);\n  return (lighter + 0.05) / (darker + 0.05);\n}\n\nfunction foregroundFor(hex: string) {\n  const darkContrast = contrastRatio(hex, [17, 17, 17]);\n  const lightContrast = contrastRatio(hex, [255, 255, 255]);\n  return darkContrast >= lightContrast\n    ? 'var(--mb-app-ground-text-light)'\n    : 'var(--mb-app-ground-text-dark)';\n}\n\nexport function MobileThemeProvider({ children }: { children: ReactNode }) {\n  const { tenant } = useAuth();\n  const { theme: mode, resolvedTheme: resolvedMode } = useTheme();\n  const themeName: MobileThemeName =\n    resolvedMode === 'dark' ? ACTIVE_DARK : ACTIVE_LIGHT;\n  const theme = mobileThemes[themeName];\n  const shellColor =\n    typeof tenant?.settings?.mobileShellColor === 'string' &&\n    /^#[0-9A-Fa-f]{6}$/.test(tenant.settings.mobileShellColor)\n      ? tenant.settings.mobileShellColor\n      : undefined;\n\n  // Sync the mobile app shell colour to <html>/<body> so the page background matches the\n  // mobile palette (no black/white flashes during iOS overscroll) and update\n  // <meta name=\"theme-color\"> so iOS Safari's URL/status bar tints to match.\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n    const root = document.documentElement;\n    const prevHtml = document.documentElement.style.backgroundColor;\n    const prevBody = document.body.style.backgroundColor;\n    const prevColorScheme = document.documentElement.style.colorScheme;\n    const prevAppGround = root.style.getPropertyValue('--mb-app-ground');\n    const prevAppGroundText = root.style.getPropertyValue(\n      '--mb-app-ground-text',\n    );\n\n    if (shellColor) {\n      root.style.setProperty('--mb-app-ground', shellColor);\n      root.style.setProperty('--mb-app-ground-text', foregroundFor(shellColor));\n    } else {\n      root.style.removeProperty('--mb-app-ground');\n      root.style.removeProperty('--mb-app-ground-text');\n    }\n\n    const resolvedAppGround =\n      getComputedStyle(document.documentElement)\n        .getPropertyValue('--mb-app-ground')\n        .trim() || theme.canvas;\n\n    document.documentElement.style.backgroundColor = resolvedAppGround;\n    document.body.style.backgroundColor = resolvedAppGround;\n    document.documentElement.style.colorScheme = resolvedMode;\n\n    let meta = document.querySelector<HTMLMetaElement>(\n      'meta[name=\"theme-color\"]',\n    );\n    const prevThemeColor = meta?.getAttribute('content') ?? null;\n    if (!meta) {\n      meta = document.createElement('meta');\n      meta.name = 'theme-color';\n      document.head.appendChild(meta);\n    }\n    meta.setAttribute('content', resolvedAppGround);\n\n    return () => {\n      if (prevAppGround) {\n        root.style.setProperty('--mb-app-ground', prevAppGround);\n      } else {\n        root.style.removeProperty('--mb-app-ground');\n      }\n      if (prevAppGroundText) {\n        root.style.setProperty('--mb-app-ground-text', prevAppGroundText);\n      } else {\n        root.style.removeProperty('--mb-app-ground-text');\n      }\n      document.documentElement.style.backgroundColor = prevHtml;\n      document.body.style.backgroundColor = prevBody;\n      document.documentElement.style.colorScheme = prevColorScheme;\n      if (meta && prevThemeColor !== null) {\n        meta.setAttribute('content', prevThemeColor);\n      }\n    };\n  }, [theme.canvas, resolvedMode, shellColor]);\n\n  const value = useMemo<MobileThemeContextValue>(\n    () => ({\n      mode,\n      resolvedMode,\n      themeName,\n      theme,\n    }),\n    [mode, resolvedMode, themeName, theme],\n  );\n\n  return (\n    <MobileThemeContext.Provider value={value}>\n      {children}\n    </MobileThemeContext.Provider>\n  );\n}\n\nexport function useMobileTheme() {\n  const context = useContext(MobileThemeContext);\n  if (!context) {\n    // Safe fallback for components rendered outside MobileThemeProvider (e.g.\n    // desktop routes that include mobile primitives with open={false}).\n    return {\n      mode: 'dark' as MobileThemeMode,\n      resolvedMode: 'dark' as ResolvedMobileThemeMode,\n      themeName: ACTIVE_LIGHT as MobileThemeName,\n      theme: mobileThemes[ACTIVE_LIGHT],\n    };\n  }\n  return context;\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/nav-group.d.ts

@@ -0,0 +1,23 @@
+import type { LucideIcon } from 'lucide-react';
+/**
+ * The shape both nav lists share. Deliberately structural rather than one of
+ * the two named types: the settings hub renders `SettingsItem` from the
+ * sidebar config and the Business hub renders `NavigationItem`, and neither
+ * should have to grow a field for the other's sake. `id` is optional because
+ * `SettingsItem` has none — the href is the identity.
+ */
+export type NavItemLike = {
+    id?: string;
+    name: string;
+    href: string;
+    icon: LucideIcon;
+};
+export declare function NavGroup({ label, items, onNavigate, }: {
+    label: string;
+    items: NavItemLike[];
+    onNavigate?: () => void;
+}): import("react").JSX.Element | null;
+export declare function NavRow({ item, onNavigate, }: {
+    item: NavItemLike;
+    onNavigate?: () => void;
+}): import("react").JSX.Element;

package/dist/mobile/nav-group.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+function NavGroup({
+  label,
+  items,
+  onNavigate
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    label && /* @__PURE__ */ jsx("p", { className: "px-1 pb-2 text-3xs font-medium text-[var(--text-muted)]", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden divide-y divide-[var(--border-subtle)]", children: items.map((item) => /* @__PURE__ */ jsx(NavRow, { item, onNavigate }, item.href)) })
+  ] });
+}
+function NavRow({
+  item,
+  onNavigate
+}) {
+  const Icon = item.icon;
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: item.href,
+      onClick: onNavigate,
+      className: "flex items-center justify-between px-1 py-3 min-h-[44px] bg-[var(--bg-base)] hover:bg-[var(--interactive-hover)] active:bg-[var(--interactive-active)] transition-colors",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Icon, { className: "size-4 text-[var(--text-secondary)]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-lg font-medium text-[var(--text-secondary)]", children: item.name })
+        ] }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-[var(--text-muted)]" })
+      ]
+    }
+  );
+}
+export {
+  NavGroup,
+  NavRow
+};
+//# sourceMappingURL=nav-group.js.map

package/dist/mobile/nav-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/nav-group.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { ChevronRight } from 'lucide-react';\nimport type { LucideIcon } from 'lucide-react';\n/**\n * The shape both nav lists share. Deliberately structural rather than one of\n * the two named types: the settings hub renders `SettingsItem` from the\n * sidebar config and the Business hub renders `NavigationItem`, and neither\n * should have to grow a field for the other's sake. `id` is optional because\n * `SettingsItem` has none — the href is the identity.\n */\nexport type NavItemLike = {\n  id?: string;\n  name: string;\n  href: string;\n  icon: LucideIcon;\n};\n\nexport function NavGroup({\n  label,\n  items,\n  onNavigate,\n}: {\n  label: string;\n  items: NavItemLike[];\n  onNavigate?: () => void;\n}) {\n  if (items.length === 0) return null;\n  return (\n    <div>\n      {label && (\n        <p className=\"px-1 pb-2 text-3xs font-medium text-[var(--text-muted)]\">\n          {label}\n        </p>\n      )}\n      <div className=\"bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden divide-y divide-[var(--border-subtle)]\">\n        {items.map((item) => (\n          <NavRow key={item.href} item={item} onNavigate={onNavigate} />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport function NavRow({\n  item,\n  onNavigate,\n}: {\n  item: NavItemLike;\n  onNavigate?: () => void;\n}) {\n  const Icon = item.icon;\n  return (\n    <Link\n      href={item.href}\n      onClick={onNavigate}\n      className=\"flex items-center justify-between px-1 py-3 min-h-[44px] bg-[var(--bg-base)] hover:bg-[var(--interactive-hover)] active:bg-[var(--interactive-active)] transition-colors\"\n    >\n      <div className=\"flex items-center gap-2\">\n        <Icon className=\"size-4 text-[var(--text-secondary)]\" />\n        <span className=\"text-lg font-medium text-[var(--text-secondary)]\">\n          {item.name}\n        </span>\n      </div>\n      <ChevronRight className=\"size-4 text-[var(--text-muted)]\" />\n    </Link>\n  );\n}\n"],"mappings":";AA8BI,SAEI,KAFJ;AA5BJ,OAAO,UAAU;AACjB,SAAS,oBAAoB;AAgBtB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,qBAAC,SACE;AAAA,aACC,oBAAC,OAAE,WAAU,2DACV,iBACH;AAAA,IAEF,oBAAC,SAAI,WAAU,+FACZ,gBAAM,IAAI,CAAC,SACV,oBAAC,UAAuB,MAAY,cAAvB,KAAK,IAA0C,CAC7D,GACH;AAAA,KACF;AAEJ;AAEO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AACF,GAGG;AACD,QAAM,OAAO,KAAK;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX,SAAS;AAAA,MACT,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,QAAK,WAAU,uCAAsC;AAAA,UACtD,oBAAC,UAAK,WAAU,oDACb,eAAK,MACR;AAAA,WACF;AAAA,QACA,oBAAC,gBAAa,WAAU,mCAAkC;AAAA;AAAA;AAAA,EAC5D;AAEJ;","names":[]}

package/dist/mobile/primitives/bottom-sheet.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Mobile primitive — BottomSheet
+ *
+ * A modal bottom sheet that anchors above the shared mobile safe-area
+ * (`var(--mb-safe-bottom)`), so it always sits above the BottomTabBar
+ * and the device's home indicator / browser URL bar.
+ *
+ * Portals to document.body to avoid transformed ancestors breaking
+ * `position: fixed`.
+ *
+ * Use this for any modal-like surface that anchors to the bottom of the
+ * viewport on mobile. Pair the offset with `MOBILE_BOTTOM_OFFSET` /
+ * `MOBILE_BOTTOM_OFFSET_CLASS` for FABs, CTAs, etc.
+ */
+import React from 'react';
+interface BottomSheetProps {
+    open: boolean;
+    onClose: () => void;
+    /** Optional aria-labelledby target id. */
+    ariaLabelledBy?: string;
+    /** Accessible name for sheets that do not render a visible title. */
+    ariaLabel?: string;
+    children: React.ReactNode;
+    /** Sheet panel className override. */
+    className?: string;
+    /**
+     * If true the sheet is anchored above the BottomTabBar (default).
+     * Set to false for full-screen sheets or sheets that explicitly
+     * cover the tab bar (rare).
+     */
+    respectTabBar?: boolean;
+}
+export declare function BottomSheet({ open, onClose, ariaLabelledBy, ariaLabel, children, className, respectTabBar, }: BottomSheetProps): React.ReactPortal | null;
+export {};

package/dist/mobile/primitives/bottom-sheet.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { durations, eases, springs } from "@withpotter/lib/motion";
+import { useMobileTheme } from "@withpotter/components/mobile/mobile-theme-provider";
+import { useModalBehaviour } from "@withpotter/hooks/use-modal-behaviour";
+const subscribeToMount = () => () => {
+};
+const clientMounted = () => true;
+const serverMounted = () => false;
+function BottomSheet({
+  open,
+  onClose,
+  ariaLabelledBy,
+  ariaLabel,
+  children,
+  className,
+  respectTabBar = true
+}) {
+  const mounted = React.useSyncExternalStore(
+    subscribeToMount,
+    clientMounted,
+    serverMounted
+  );
+  const reduce = useReducedMotion();
+  const { resolvedMode } = useMobileTheme();
+  const panelRef = useModalBehaviour(open, onClose);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+  if (!mounted) return null;
+  const node = (
+    /* IT USED TO APPEAR. No motion at all: `open` flipped and a full-height
+           panel was simply there, then simply gone — the harshest cut in the
+           product, on the surface a phone uses for everything. A sheet is the one
+           thing in this app a thumb can almost grab, which is what springs are for
+           (see lib/motion.ts): it rises from the edge it is anchored to and settles,
+           and it leaves the same way rather than being deleted.
+    
+           The scrim fades on a curve, because it does not move. */
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: durations.fast, ease: eases.out },
+        className: "fixed inset-0 z-[var(--z-modal)] flex items-end justify-center",
+        style: {
+          // No cssVarsFromTheme spread here. --mb-* are defined on :root in
+          // globals.css as aliases of the desktop tokens, and this element
+          // portals to <body>, so it already inherits them. Re-injecting the
+          // JS object pinned the hex from styles/mobile/theme.ts over those
+          // aliases — which is how mobile stopped following the dashboard's
+          // palette on exactly the surfaces that float above everything.
+          background: "var(--mb-scrim)",
+          backdropFilter: "blur(6px)",
+          WebkitBackdropFilter: "blur(6px)",
+          colorScheme: resolvedMode
+        },
+        onClick: onClose,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            ref: panelRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": ariaLabelledBy,
+            "aria-label": ariaLabel,
+            tabIndex: -1,
+            initial: reduce ? { opacity: 0 } : { y: "100%" },
+            animate: reduce ? { opacity: 1 } : { y: 0 },
+            exit: reduce ? { opacity: 0 } : { y: "100%" },
+            transition: reduce ? { duration: durations.fast, ease: eases.out } : springs.gentle,
+            className: `pointer-events-auto w-full max-w-md rounded-t-3xl border px-5 pt-3 ${className ?? ""}`,
+            style: {
+              // Inherit the page canvas so the sheet reads as the page rolling
+              // up — child cards (which use `--mb-card`) then maintain the same
+              // elevation contrast they have on the page.
+              background: "var(--mb-canvas)",
+              borderColor: "var(--mb-border)",
+              color: "var(--mb-text)",
+              // The sheet always extends to the viewport bottom so it covers any
+              // sticky/fixed CTA bars on the underlying page. The safe-area /
+              // tab-bar inset is absorbed as padding inside the sheet instead of
+              // a margin underneath it.
+              marginBottom: 0,
+              paddingBottom: respectTabBar ? "calc(var(--mb-safe-bottom) + 16px)" : "calc(env(safe-area-inset-bottom, 0px) + 16px)",
+              maxHeight: "calc(100dvh - 24px)",
+              overflowY: "auto"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "mx-auto mb-3 h-1 w-10 rounded-full",
+                  style: { background: "var(--mb-border)" },
+                  "aria-hidden": true
+                }
+              ),
+              children
+            ]
+          }
+        )
+      }
+    ) })
+  );
+  return createPortal(node, document.body);
+}
+export {
+  BottomSheet
+};
+//# sourceMappingURL=bottom-sheet.js.map

package/dist/mobile/primitives/bottom-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/primitives/bottom-sheet.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile primitive — BottomSheet\n *\n * A modal bottom sheet that anchors above the shared mobile safe-area\n * (`var(--mb-safe-bottom)`), so it always sits above the BottomTabBar\n * and the device's home indicator / browser URL bar.\n *\n * Portals to document.body to avoid transformed ancestors breaking\n * `position: fixed`.\n *\n * Use this for any modal-like surface that anchors to the bottom of the\n * viewport on mobile. Pair the offset with `MOBILE_BOTTOM_OFFSET` /\n * `MOBILE_BOTTOM_OFFSET_CLASS` for FABs, CTAs, etc.\n */\n\nimport React, { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { durations, eases, springs } from '@withpotter/lib/motion';\nimport { useMobileTheme } from '@withpotter/components/mobile/mobile-theme-provider';\nimport { useModalBehaviour } from '@withpotter/hooks/use-modal-behaviour';\n\nconst subscribeToMount = () => () => {};\nconst clientMounted = () => true;\nconst serverMounted = () => false;\n\ninterface BottomSheetProps {\n  open: boolean;\n  onClose: () => void;\n  /** Optional aria-labelledby target id. */\n  ariaLabelledBy?: string;\n  /** Accessible name for sheets that do not render a visible title. */\n  ariaLabel?: string;\n  children: React.ReactNode;\n  /** Sheet panel className override. */\n  className?: string;\n  /**\n   * If true the sheet is anchored above the BottomTabBar (default).\n   * Set to false for full-screen sheets or sheets that explicitly\n   * cover the tab bar (rare).\n   */\n  respectTabBar?: boolean;\n}\n\nexport function BottomSheet({\n  open,\n  onClose,\n  ariaLabelledBy,\n  ariaLabel,\n  children,\n  className,\n  respectTabBar = true,\n}: BottomSheetProps) {\n  const mounted = React.useSyncExternalStore(\n    subscribeToMount,\n    clientMounted,\n    serverMounted,\n  );\n  const reduce = useReducedMotion();\n  const { resolvedMode } = useMobileTheme();\n  const panelRef = useModalBehaviour(open, onClose);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    };\n    window.addEventListener('keydown', onKey);\n    // Lock body scroll while the sheet is open.\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      window.removeEventListener('keydown', onKey);\n      document.body.style.overflow = prev;\n    };\n  }, [open, onClose]);\n\n  if (!mounted) return null;\n\n  const node = (\n    /* IT USED TO APPEAR. No motion at all: `open` flipped and a full-height\n       panel was simply there, then simply gone — the harshest cut in the\n       product, on the surface a phone uses for everything. A sheet is the one\n       thing in this app a thumb can almost grab, which is what springs are for\n       (see lib/motion.ts): it rises from the edge it is anchored to and settles,\n       and it leaves the same way rather than being deleted.\n\n       The scrim fades on a curve, because it does not move. */\n    <AnimatePresence>\n      {open && (\n        <motion.div\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: durations.fast, ease: eases.out }}\n          className=\"fixed inset-0 z-[var(--z-modal)] flex items-end justify-center\"\n          style={{\n            // No cssVarsFromTheme spread here. --mb-* are defined on :root in\n            // globals.css as aliases of the desktop tokens, and this element\n            // portals to <body>, so it already inherits them. Re-injecting the\n            // JS object pinned the hex from styles/mobile/theme.ts over those\n            // aliases — which is how mobile stopped following the dashboard's\n            // palette on exactly the surfaces that float above everything.\n            background: 'var(--mb-scrim)',\n            backdropFilter: 'blur(6px)',\n            WebkitBackdropFilter: 'blur(6px)',\n            colorScheme: resolvedMode,\n          }}\n          onClick={onClose}\n        >\n          <motion.div\n            ref={panelRef}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={ariaLabelledBy}\n            aria-label={ariaLabel}\n            tabIndex={-1}\n            initial={reduce ? { opacity: 0 } : { y: '100%' }}\n            animate={reduce ? { opacity: 1 } : { y: 0 }}\n            exit={reduce ? { opacity: 0 } : { y: '100%' }}\n            transition={\n              reduce\n                ? { duration: durations.fast, ease: eases.out }\n                : springs.gentle\n            }\n            className={`pointer-events-auto w-full max-w-md rounded-t-3xl border px-5 pt-3 ${className ?? ''}`}\n            style={{\n              // Inherit the page canvas so the sheet reads as the page rolling\n              // up — child cards (which use `--mb-card`) then maintain the same\n              // elevation contrast they have on the page.\n              background: 'var(--mb-canvas)',\n              borderColor: 'var(--mb-border)',\n              color: 'var(--mb-text)',\n              // The sheet always extends to the viewport bottom so it covers any\n              // sticky/fixed CTA bars on the underlying page. The safe-area /\n              // tab-bar inset is absorbed as padding inside the sheet instead of\n              // a margin underneath it.\n              marginBottom: 0,\n              paddingBottom: respectTabBar\n                ? 'calc(var(--mb-safe-bottom) + 16px)'\n                : 'calc(env(safe-area-inset-bottom, 0px) + 16px)',\n              maxHeight: 'calc(100dvh - 24px)',\n              overflowY: 'auto',\n            }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div\n              className=\"mx-auto mb-3 h-1 w-10 rounded-full\"\n              style={{ background: 'var(--mb-border)' }}\n              aria-hidden\n            />\n            {children}\n          </motion.div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n\n  return createPortal(node, document.body);\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/primitives/bottom-tab-bar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type TabId = 'today' | 'manage' | 'catalog' | 'store';
+/** Kept for callers that still use the legacy route map. */
+export declare const TAB_ROUTES: Record<TabId, string>;
+export declare function BottomTabBar({ addAction }: {
+    addAction?: () => void;
+}): React.ReactPortal | null;
+/** @deprecated Kept for mockup gallery compatibility. */
+export declare const TabBar: typeof BottomTabBar;
+export declare const MOBILE_TAB_BAR_HEIGHT = 50;
+export declare const MOBILE_BOTTOM_GAP = 18;
+export declare const MOBILE_BOTTOM_OFFSET: "var(--mb-safe-bottom)";
+export declare const MOBILE_BOTTOM_OFFSET_CLASS: "mb-safe-bottom";
+export declare const MOBILE_BOTTOM_OFFSET_MIN: "var(--mb-safe-bottom-min)";
+export declare const MOBILE_BOTTOM_OFFSET_MIN_CLASS: "mb-safe-bottom-min";