@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-header-context.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+interface DetailHeaderConfig {
+    title: string;
+    onBack?: () => void;
+    action?: {
+        label: string;
+        icon?: LucideIcon;
+        iconOnly?: boolean;
+        compact?: boolean;
+        onClick: () => void;
+    };
+    actions?: ReactNode;
+}
+export interface ScreenHeaderAction {
+    label: string;
+    icon?: LucideIcon;
+    iconOnly?: boolean;
+    compact?: boolean;
+    onClick: () => void;
+}
+export interface ScreenHeaderAction {
+    label: string;
+    icon?: LucideIcon;
+    onClick: () => void;
+}
+interface ScreenHeaderConfig {
+    title?: string;
+    subtitle?: string;
+    action?: ScreenHeaderAction;
+    /**
+     * Icon-only actions that sit on the title's own row.
+     *
+     * Separate from `action`, which is a labelled control: these are the one or
+     * two things you do to the whole screen — view the site, share it — and on a
+     * phone they are glyphs beside the title rather than words competing with
+     * it. Two is the cap the row can hold beside a title without the title
+     * having to shrink.
+     */
+    actions?: ScreenHeaderAction[];
+}
+interface MobileHeaderContextValue {
+    detailConfig: DetailHeaderConfig | null;
+    setDetailHeader: (config: DetailHeaderConfig) => void;
+    clearDetailHeader: () => void;
+    screenConfig: ScreenHeaderConfig | null;
+    setScreenHeader: (config: ScreenHeaderConfig) => void;
+    clearScreenHeader: () => void;
+}
+export declare function MobileHeaderProvider({ children, }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function useMobileHeaderContext(): MobileHeaderContextValue;
+export {};

package/dist/mobile/mobile-header-context.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from "react";
+const MobileHeaderContext = createContext({
+  detailConfig: null,
+  setDetailHeader: () => {
+  },
+  clearDetailHeader: () => {
+  },
+  screenConfig: null,
+  setScreenHeader: () => {
+  },
+  clearScreenHeader: () => {
+  }
+});
+function MobileHeaderProvider({
+  children
+}) {
+  const [detailConfig, setDetailConfig] = useState(
+    null
+  );
+  const [screenConfig, setScreenConfig] = useState(
+    null
+  );
+  const setDetailHeader = useCallback((config) => {
+    setDetailConfig(config);
+  }, []);
+  const clearDetailHeader = useCallback(() => {
+    setDetailConfig(null);
+  }, []);
+  const setScreenHeader = useCallback((config) => {
+    setScreenConfig(config);
+  }, []);
+  const clearScreenHeader = useCallback(() => {
+    setScreenConfig(null);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    MobileHeaderContext.Provider,
+    {
+      value: {
+        detailConfig,
+        setDetailHeader,
+        clearDetailHeader,
+        screenConfig,
+        setScreenHeader,
+        clearScreenHeader
+      },
+      children
+    }
+  );
+}
+function useMobileHeaderContext() {
+  return useContext(MobileHeaderContext);
+}
+export {
+  MobileHeaderProvider,
+  useMobileHeaderContext
+};
+//# sourceMappingURL=mobile-header-context.js.map

package/dist/mobile/mobile-header-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/mobile-header-context.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useState, useCallback } from 'react';\nimport type { ReactNode } from 'react';\nimport type { LucideIcon } from 'lucide-react';\n\ninterface DetailHeaderConfig {\n  title: string;\n  onBack?: () => void;\n  action?: {\n    label: string;\n    icon?: LucideIcon;\n    iconOnly?: boolean;\n    compact?: boolean;\n    onClick: () => void;\n  };\n  actions?: ReactNode;\n}\n\nexport interface ScreenHeaderAction {\n  label: string;\n  icon?: LucideIcon;\n  iconOnly?: boolean;\n  compact?: boolean;\n  onClick: () => void;\n}\n\nexport interface ScreenHeaderAction {\n  label: string;\n  icon?: LucideIcon;\n  onClick: () => void;\n}\n\ninterface ScreenHeaderConfig {\n  title?: string;\n  subtitle?: string;\n  action?: ScreenHeaderAction;\n  /**\n   * Icon-only actions that sit on the title's own row.\n   *\n   * Separate from `action`, which is a labelled control: these are the one or\n   * two things you do to the whole screen — view the site, share it — and on a\n   * phone they are glyphs beside the title rather than words competing with\n   * it. Two is the cap the row can hold beside a title without the title\n   * having to shrink.\n   */\n  actions?: ScreenHeaderAction[];\n}\n\ninterface MobileHeaderContextValue {\n  detailConfig: DetailHeaderConfig | null;\n  setDetailHeader: (config: DetailHeaderConfig) => void;\n  clearDetailHeader: () => void;\n  screenConfig: ScreenHeaderConfig | null;\n  setScreenHeader: (config: ScreenHeaderConfig) => void;\n  clearScreenHeader: () => void;\n}\n\nconst MobileHeaderContext = createContext<MobileHeaderContextValue>({\n  detailConfig: null,\n  setDetailHeader: () => {},\n  clearDetailHeader: () => {},\n  screenConfig: null,\n  setScreenHeader: () => {},\n  clearScreenHeader: () => {},\n});\n\nexport function MobileHeaderProvider({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  const [detailConfig, setDetailConfig] = useState<DetailHeaderConfig | null>(\n    null,\n  );\n  const [screenConfig, setScreenConfig] = useState<ScreenHeaderConfig | null>(\n    null,\n  );\n\n  const setDetailHeader = useCallback((config: DetailHeaderConfig) => {\n    setDetailConfig(config);\n  }, []);\n\n  const clearDetailHeader = useCallback(() => {\n    setDetailConfig(null);\n  }, []);\n\n  const setScreenHeader = useCallback((config: ScreenHeaderConfig) => {\n    setScreenConfig(config);\n  }, []);\n\n  const clearScreenHeader = useCallback(() => {\n    setScreenConfig(null);\n  }, []);\n\n  return (\n    <MobileHeaderContext.Provider\n      value={{\n        detailConfig,\n        setDetailHeader,\n        clearDetailHeader,\n        screenConfig,\n        setScreenHeader,\n        clearScreenHeader,\n      }}\n    >\n      {children}\n    </MobileHeaderContext.Provider>\n  );\n}\n\nexport function useMobileHeaderContext() {\n  return useContext(MobileHeaderContext);\n}\n"],"mappings":";AAgGI;AA9FJ,SAAS,eAAe,YAAY,UAAU,mBAAmB;AAwDjE,MAAM,sBAAsB,cAAwC;AAAA,EAClE,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,mBAAmB,MAAM;AAAA,EAAC;AAC5B,CAAC;AAEM,SAAS,qBAAqB;AAAA,EACnC;AACF,GAEG;AACD,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC;AAAA,EACF;AACA,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC;AAAA,EACF;AAEA,QAAM,kBAAkB,YAAY,CAAC,WAA+B;AAClE,oBAAgB,MAAM;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB,YAAY,MAAM;AAC1C,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,CAAC,WAA+B;AAClE,oBAAgB,MAAM;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB,YAAY,MAAM;AAC1C,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,yBAAyB;AACvC,SAAO,WAAW,mBAAmB;AACvC;","names":[]}

package/dist/mobile/mobile-header.d.ts

@@ -0,0 +1,14 @@
+import type { LucideIcon } from 'lucide-react';
+interface MobileHeaderProps {
+    title?: string;
+    showBack?: boolean;
+    onBack?: () => void;
+    action?: {
+        label: string;
+        icon?: LucideIcon;
+        onClick: () => void;
+    };
+    onSearchPress?: () => void;
+}
+export declare function MobileHeader({ title, showBack, onBack, action, onSearchPress, }: MobileHeaderProps): import("react").JSX.Element;
+export {};

package/dist/mobile/mobile-header.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, Search, Home, Globe } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { Avatar } from "@withpotter/ui-kit";
+import { useMobileHeaderContext } from "./mobile-header-context";
+import { Button } from "@withpotter/ui-kit/button";
+function MobileHeader({
+  title,
+  showBack = false,
+  onBack,
+  action,
+  onSearchPress
+}) {
+  const { tenant, user } = useAuth();
+  const router = useRouter();
+  const { detailConfig } = useMobileHeaderContext();
+  const isDetailMode = showBack || !!detailConfig;
+  const resolvedTitle = title || detailConfig?.title;
+  const resolvedOnBack = onBack || detailConfig?.onBack;
+  const resolvedAction = action || detailConfig?.action;
+  const handleBack = () => {
+    if (resolvedOnBack) resolvedOnBack();
+    else router.back();
+  };
+  if (isDetailMode) {
+    return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-30 h-14 bg-[var(--bg-base)] border-b border-[var(--border-default)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between h-full px-3", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "-ml-2",
+          onClick: handleBack,
+          "aria-label": "Go back",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--text-primary)] truncate mx-4", children: resolvedTitle }),
+      resolvedAction ? /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          className: "text-brand-500",
+          onClick: resolvedAction.onClick,
+          children: [
+            resolvedAction.icon && (() => {
+              const Icon = resolvedAction.icon;
+              return /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 inline mr-1" });
+            })(),
+            resolvedAction.label
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "w-10" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-30 h-14 bg-[var(--bg-base)] border-b border-[var(--border-default)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between h-full px-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-[var(--text-primary)] truncate", children: tenant?.businessName || "Box" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: () => router.push("/dashboard"),
+          "aria-label": "Home",
+          children: /* @__PURE__ */ jsx(Home, { className: "size-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: () => router.push("/dashboard/store"),
+          "aria-label": "Business front",
+          children: /* @__PURE__ */ jsx(Globe, { className: "size-5" })
+        }
+      ),
+      onSearchPress && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: onSearchPress,
+          "aria-label": "Search",
+          children: /* @__PURE__ */ jsx(Search, { className: "size-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Avatar, { name: user?.name || "", src: user?.avatarUrl, size: "sm" })
+    ] })
+  ] }) });
+}
+export {
+  MobileHeader
+};
+//# sourceMappingURL=mobile-header.js.map

package/dist/mobile/mobile-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/mobile-header.tsx"],"sourcesContent":["'use client';\n\nimport type { LucideIcon } from 'lucide-react';\nimport { ChevronLeft, Search, Home, Globe } from 'lucide-react';\nimport { useRouter } from 'next/navigation';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { Avatar } from '@withpotter/ui-kit';\nimport { useMobileHeaderContext } from './mobile-header-context';\nimport { Button } from '@withpotter/ui-kit/button';\n\ninterface MobileHeaderProps {\n  title?: string;\n  showBack?: boolean;\n  onBack?: () => void;\n  action?: { label: string; icon?: LucideIcon; onClick: () => void };\n  onSearchPress?: () => void;\n}\n\nexport function MobileHeader({\n  title,\n  showBack = false,\n  onBack,\n  action,\n  onSearchPress,\n}: MobileHeaderProps) {\n  const { tenant, user } = useAuth();\n  const router = useRouter();\n  const { detailConfig } = useMobileHeaderContext();\n\n  // If a detail page has set a header override via useDetailHeader(), use it\n  const isDetailMode = showBack || !!detailConfig;\n  const resolvedTitle = title || detailConfig?.title;\n  const resolvedOnBack = onBack || detailConfig?.onBack;\n  const resolvedAction = action || detailConfig?.action;\n\n  const handleBack = () => {\n    if (resolvedOnBack) resolvedOnBack();\n    else router.back();\n  };\n\n  if (isDetailMode) {\n    return (\n      <header className=\"sticky top-0 z-30 h-14 bg-[var(--bg-base)] border-b border-[var(--border-default)]\">\n        <div className=\"flex items-center justify-between h-full px-3\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"-ml-2\"\n            onClick={handleBack}\n            aria-label=\"Go back\"\n          >\n            <ChevronLeft className=\"size-5\" />\n          </Button>\n          <span className=\"text-sm font-semibold text-[var(--text-primary)] truncate mx-4\">\n            {resolvedTitle}\n          </span>\n          {resolvedAction ? (\n            <Button\n              variant=\"ghost\"\n              className=\"text-brand-500\"\n              onClick={resolvedAction.onClick}\n            >\n              {resolvedAction.icon &&\n                (() => {\n                  const Icon = resolvedAction.icon!;\n                  return <Icon className=\"w-4 h-4 inline mr-1\" />;\n                })()}\n              {resolvedAction.label}\n            </Button>\n          ) : (\n            <div className=\"w-10\" />\n          )}\n        </div>\n      </header>\n    );\n  }\n\n  return (\n    <header className=\"sticky top-0 z-30 h-14 bg-[var(--bg-base)] border-b border-[var(--border-default)]\">\n      <div className=\"flex items-center justify-between h-full px-3\">\n        <span className=\"text-base font-semibold text-[var(--text-primary)] truncate\">\n          {tenant?.businessName || 'Box'}\n        </span>\n        <div className=\"flex items-center\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => router.push('/dashboard')}\n            aria-label=\"Home\"\n          >\n            <Home className=\"size-5\" />\n          </Button>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => router.push('/dashboard/store')}\n            aria-label=\"Business front\"\n          >\n            <Globe className=\"size-5\" />\n          </Button>\n          {onSearchPress && (\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={onSearchPress}\n              aria-label=\"Search\"\n            >\n              <Search className=\"size-5\" />\n            </Button>\n          )}\n          <Avatar name={user?.name || ''} src={user?.avatarUrl} size=\"sm\" />\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":";AAmDY,cAMA,YANA;AAhDZ,SAAS,aAAa,QAAQ,MAAM,aAAa;AACjD,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,8BAA8B;AACvC,SAAS,cAAc;AAUhB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,EAAE,QAAQ,KAAK,IAAI,QAAQ;AACjC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,aAAa,IAAI,uBAAuB;AAGhD,QAAM,eAAe,YAAY,CAAC,CAAC;AACnC,QAAM,gBAAgB,SAAS,cAAc;AAC7C,QAAM,iBAAiB,UAAU,cAAc;AAC/C,QAAM,iBAAiB,UAAU,cAAc;AAE/C,QAAM,aAAa,MAAM;AACvB,QAAI,eAAgB,gBAAe;AAAA,QAC9B,QAAO,KAAK;AAAA,EACnB;AAEA,MAAI,cAAc;AAChB,WACE,oBAAC,YAAO,WAAU,sFAChB,+BAAC,SAAI,WAAU,iDACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS;AAAA,UACT,cAAW;AAAA,UAEX,8BAAC,eAAY,WAAU,UAAS;AAAA;AAAA,MAClC;AAAA,MACA,oBAAC,UAAK,WAAU,kEACb,yBACH;AAAA,MACC,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,eAAe;AAAA,UAEvB;AAAA,2BAAe,SACb,MAAM;AACL,oBAAM,OAAO,eAAe;AAC5B,qBAAO,oBAAC,QAAK,WAAU,uBAAsB;AAAA,YAC/C,GAAG;AAAA,YACJ,eAAe;AAAA;AAAA;AAAA,MAClB,IAEA,oBAAC,SAAI,WAAU,QAAO;AAAA,OAE1B,GACF;AAAA,EAEJ;AAEA,SACE,oBAAC,YAAO,WAAU,sFAChB,+BAAC,SAAI,WAAU,iDACb;AAAA,wBAAC,UAAK,WAAU,+DACb,kBAAQ,gBAAgB,OAC3B;AAAA,IACA,qBAAC,SAAI,WAAU,qBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,OAAO,KAAK,YAAY;AAAA,UACvC,cAAW;AAAA,UAEX,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,MAC3B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,OAAO,KAAK,kBAAkB;AAAA,UAC7C,cAAW;AAAA,UAEX,8BAAC,SAAM,WAAU,UAAS;AAAA;AAAA,MAC5B;AAAA,MACC,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS;AAAA,UACT,cAAW;AAAA,UAEX,8BAAC,UAAO,WAAU,UAAS;AAAA;AAAA,MAC7B;AAAA,MAEF,oBAAC,UAAO,MAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,WAAW,MAAK,MAAK;AAAA,OAClE;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/mobile/mobile-media-picker-sheet.d.ts

@@ -0,0 +1,13 @@
+import { type UploadResult } from '@withpotter/lib/media-service';
+export interface MobileMediaPickerSheetProps {
+    open: boolean;
+    onClose: () => void;
+    onSuccess: (result: UploadResult & {
+        alt?: string;
+    }) => void;
+    title?: string;
+    initialUrl?: string;
+    initialAlt?: string;
+    accept?: string;
+}
+export declare function MobileMediaPickerSheet({ open, onClose, onSuccess, title, initialUrl, initialAlt, accept, }: MobileMediaPickerSheetProps): import("react").JSX.Element;