@withpotter/components 0.13.0-next.101

package/dist/behaviors/booking-location-field.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { MapPin, Phone, Link2, Video, PencilLine } from "lucide-react";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { calendarSyncApi } from "@withpotter/lib/api";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  OptionButton,
+  Input,
+  Textarea
+} from "@withpotter/ui-kit";
+import {
+  AddressSuggestions,
+  useAddressSuggestions
+} from "./address-suggestions";
+import { bookingLocationLabel } from "@withpotter/lib/booking-location-label";
+const HIDE_CONNECTORS = process.env.NEXT_PUBLIC_BOX_HIDE_CONNECTORS === "true";
+const ALL_KINDS = [
+  {
+    kind: "google-meet",
+    icon: Video,
+    title: "Google Meet",
+    hint: "A room is created for each booking"
+  },
+  {
+    kind: "link",
+    icon: Link2,
+    title: "Video call link",
+    hint: "You provide the link"
+  },
+  { kind: "in-person", icon: MapPin, title: "In person", hint: "An address" },
+  { kind: "phone", icon: Phone, title: "Phone call", hint: "You call them" },
+  {
+    kind: "custom",
+    icon: PencilLine,
+    title: "Custom",
+    hint: "Your own instructions"
+  }
+];
+const KINDS = HIDE_CONNECTORS ? ALL_KINDS.filter((spec) => spec.kind !== "google-meet") : ALL_KINDS;
+const VALUE_FIELD = {
+  link: {
+    label: "Meeting link",
+    placeholder: "https://\u2026",
+    type: "url"
+  },
+  "in-person": {
+    label: "Address",
+    placeholder: "12 Adeola Odeku, Victoria Island, Lagos"
+  },
+  phone: {
+    label: "Number to call",
+    placeholder: "+234 801 234 5678",
+    type: "tel"
+  }
+};
+function BookingLocationField({
+  value,
+  onChange
+}) {
+  const indicatorId = useId();
+  const [editingKind, setEditingKind] = useState(
+    null
+  );
+  const chosen = value?.kind;
+  const [picked, setPicked] = useState("");
+  const typed = value?.value ?? "";
+  const suggestions = useAddressSuggestions(
+    typed,
+    editingKind === "in-person" && typed !== picked
+  );
+  const { data: connections } = useApiQuery(
+    ["calendar-connections"],
+    (slug) => calendarSyncApi.listConnections(slug),
+    { enabled: chosen === "google-meet" }
+  );
+  const hasCalendar = (connections?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h3", { className: "mb-3 text-base font-semibold text-[var(--text-primary)]", children: "Where does it happen?" }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3", children: KINDS.map(({ kind, icon: Icon, title, hint }) => /* @__PURE__ */ jsx(
+      OptionButton,
+      {
+        shape: "card",
+        indicatorId,
+        selected: chosen === kind,
+        className: chosen === kind ? void 0 : "bg-[var(--bg-base)]",
+        onClick: () => {
+          if (chosen === kind) {
+            setEditingKind(kind);
+            return;
+          }
+          onChange({ ...value, kind });
+          setEditingKind(kind);
+        },
+        children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start gap-1 text-left", children: [
+          /* @__PURE__ */ jsx(Icon, { className: "size-4 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: title }),
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-2 break-words text-xs text-[var(--text-muted)]", children: chosen === kind ? bookingLocationLabel(value) ?? hint : hint })
+        ] })
+      },
+      kind
+    )) }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: editingKind !== null,
+        onOpenChange: (open) => !open && setEditingKind(null),
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: KINDS.find((item) => item.kind === editingKind)?.title ?? "Booking location" }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: "Add the details customers need for this booking." })
+          ] }),
+          editingKind === "google-meet" && /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: "/connectors/calendar-header.png",
+              alt: "Google Calendar meeting with a Google Meet link",
+              width: 800,
+              height: 450,
+              className: "h-32 w-full rounded-lg object-cover object-center"
+            }
+          ),
+          editingKind && VALUE_FIELD[editingKind] && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-[var(--text-secondary)]", children: VALUE_FIELD[editingKind]?.label }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: VALUE_FIELD[editingKind]?.type,
+                value: value?.value ?? "",
+                onChange: (e) => onChange({
+                  ...value,
+                  kind: editingKind,
+                  value: e.target.value
+                }),
+                placeholder: VALUE_FIELD[editingKind]?.placeholder
+              }
+            ),
+            editingKind === "in-person" && /* @__PURE__ */ jsx(
+              AddressSuggestions,
+              {
+                suggestions: typed === picked ? [] : suggestions,
+                onPick: (address) => {
+                  setPicked(address);
+                  onChange({ ...value, kind: "in-person", value: address });
+                }
+              }
+            )
+          ] }),
+          editingKind && editingKind !== "google-meet" && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-[var(--text-secondary)]", children: editingKind === "custom" ? "Instructions" : "Anything else to know" }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                rows: 3,
+                value: value?.instructions ?? "",
+                onChange: (e) => onChange({
+                  ...value,
+                  kind: editingKind,
+                  instructions: e.target.value
+                }),
+                placeholder: editingKind === "custom" ? "Tell the customer how to reach you" : "Buzzer, parking, which door"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(DialogFooter, { children: editingKind === "google-meet" && !hasCalendar ? /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/dashboard/settings/calendar-sync", children: "Connect Google Calendar" }) }) : /* @__PURE__ */ jsx(Button, { onClick: () => setEditingKind(null), children: "Done" }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  BookingLocationField
+};
+//# sourceMappingURL=booking-location-field.js.map

package/dist/behaviors/booking-location-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/behaviors/booking-location-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\nimport Link from 'next/link';\nimport Image from 'next/image';\nimport { MapPin, Phone, Link2, Video, PencilLine } from 'lucide-react';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { calendarSyncApi, type CalendarConnectionItem } from '@withpotter/lib/api';\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  OptionButton,\n  Input,\n  Textarea,\n} from '@withpotter/ui-kit';\nimport type { BookingLocation, BookingLocationKind } from '@withpotter/lib/product-types';\nimport {\n  AddressSuggestions,\n  useAddressSuggestions,\n} from './address-suggestions';\nimport { bookingLocationLabel } from '@withpotter/lib/booking-location-label';\n\n/**\n * Where a booking happens — the question a service could not answer.\n *\n * A merchant could set how long a consultation runs, who gives it, what it\n * costs and how far ahead it can be booked, and then had nowhere to say\n * whether the customer should join a call, walk through a door or wait for the\n * phone to ring. The confirmation went out with a time and no place.\n *\n * The five kinds are the five real answers, and they are choice CARDS rather\n * than a Select: this is committed to by saving the service, the options are\n * not a narrowing of anything, and the branch a merchant picks changes what\n * they are asked next — a Select hides that behind a closed control.\n *\n * The Google branch is the one that can be true here and false in the world:\n * Box mints the room through the connected calendar, so with no calendar\n * connected this choice silently produces nothing. It says so, next to the\n * choice, at the moment the choice is made — not in a settings screen four\n * levels away that nobody visits until a customer complains.\n */\n\ninterface KindSpec {\n  kind: BookingLocationKind;\n  icon: typeof MapPin;\n  title: string;\n  /** What choosing it means, in the merchant's terms. */\n  hint: string;\n}\n\n/** A box with connectors switched off has no Google Calendar to make Meet rooms from. */\nconst HIDE_CONNECTORS = process.env.NEXT_PUBLIC_BOX_HIDE_CONNECTORS === 'true';\n\nconst ALL_KINDS: readonly KindSpec[] = [\n  {\n    kind: 'google-meet',\n    icon: Video,\n    title: 'Google Meet',\n    hint: 'A room is created for each booking',\n  },\n  {\n    kind: 'link',\n    icon: Link2,\n    title: 'Video call link',\n    hint: 'You provide the link',\n  },\n  { kind: 'in-person', icon: MapPin, title: 'In person', hint: 'An address' },\n  { kind: 'phone', icon: Phone, title: 'Phone call', hint: 'You call them' },\n  {\n    kind: 'custom',\n    icon: PencilLine,\n    title: 'Custom',\n    hint: 'Your own instructions',\n  },\n] as const;\n\nconst KINDS: readonly KindSpec[] = HIDE_CONNECTORS\n  ? ALL_KINDS.filter((spec) => spec.kind !== 'google-meet')\n  : ALL_KINDS;\n\n/** The field the chosen kind needs, or none. */\nconst VALUE_FIELD: Partial<\n  Record<\n    BookingLocationKind,\n    { label: string; placeholder: string; type?: string }\n  >\n> = {\n  link: {\n    label: 'Meeting link',\n    placeholder: 'https://…',\n    type: 'url',\n  },\n  'in-person': {\n    label: 'Address',\n    placeholder: '12 Adeola Odeku, Victoria Island, Lagos',\n  },\n  phone: {\n    label: 'Number to call',\n    placeholder: '+234 801 234 5678',\n    type: 'tel',\n  },\n};\n\nexport function BookingLocationField({\n  value,\n  onChange,\n}: {\n  value?: BookingLocation;\n  onChange: (next: BookingLocation | undefined) => void;\n}) {\n  const indicatorId = useId();\n  const [editingKind, setEditingKind] = useState<BookingLocationKind | null>(\n    null,\n  );\n  const chosen = value?.kind;\n  /* A picked suggestion is the end of the search, not the start of another. */\n  const [picked, setPicked] = useState('');\n  const typed = value?.value ?? '';\n  const suggestions = useAddressSuggestions(\n    typed,\n    editingKind === 'in-person' && typed !== picked,\n  );\n\n  /**\n   * Only asked once a merchant has chosen Meet. Before that the answer\n   * changes nothing on screen, and every service editor would open by asking\n   * the API a question about calendars it does not need.\n   */\n  const { data: connections } = useApiQuery<CalendarConnectionItem[]>(\n    ['calendar-connections'],\n    (slug) => calendarSyncApi.listConnections(slug),\n    { enabled: chosen === 'google-meet' },\n  );\n  const hasCalendar = (connections?.length ?? 0) > 0;\n\n  return (\n    <div>\n      <h3 className=\"mb-3 text-base font-semibold text-[var(--text-primary)]\">\n        Where does it happen?\n      </h3>\n\n      <div className=\"grid grid-cols-2 gap-2 sm:grid-cols-3\">\n        {KINDS.map(({ kind, icon: Icon, title, hint }) => (\n          <OptionButton\n            key={kind}\n            shape=\"card\"\n            indicatorId={indicatorId}\n            selected={chosen === kind}\n            className={chosen === kind ? undefined : 'bg-[var(--bg-base)]'}\n            onClick={() => {\n              if (chosen === kind) {\n                setEditingKind(kind);\n                return;\n              }\n              onChange({ ...value, kind });\n              setEditingKind(kind);\n            }}\n          >\n            <span className=\"flex flex-col items-start gap-1 text-left\">\n              <Icon className=\"size-4 text-[var(--text-muted)]\" />\n              <span className=\"font-medium\">{title}</span>\n              <span className=\"line-clamp-2 break-words text-xs text-[var(--text-muted)]\">\n                {chosen === kind ? (bookingLocationLabel(value) ?? hint) : hint}\n              </span>\n            </span>\n          </OptionButton>\n        ))}\n      </div>\n\n      <Dialog\n        open={editingKind !== null}\n        onOpenChange={(open) => !open && setEditingKind(null)}\n      >\n        <DialogContent className=\"max-w-md\">\n          <DialogHeader>\n            <DialogTitle>\n              {KINDS.find((item) => item.kind === editingKind)?.title ??\n                'Booking location'}\n            </DialogTitle>\n            <DialogDescription>\n              Add the details customers need for this booking.\n            </DialogDescription>\n          </DialogHeader>\n\n          {editingKind === 'google-meet' && (\n            <Image\n              src=\"/connectors/calendar-header.png\"\n              alt=\"Google Calendar meeting with a Google Meet link\"\n              width={800}\n              height={450}\n              className=\"h-32 w-full rounded-lg object-cover object-center\"\n            />\n          )}\n\n          {editingKind && VALUE_FIELD[editingKind] && (\n            <div>\n              <label className=\"mb-1 block text-sm font-medium text-[var(--text-secondary)]\">\n                {VALUE_FIELD[editingKind]?.label}\n              </label>\n              <Input\n                type={VALUE_FIELD[editingKind]?.type}\n                value={value?.value ?? ''}\n                onChange={(e) =>\n                  onChange({\n                    ...value,\n                    kind: editingKind,\n                    value: e.target.value,\n                  })\n                }\n                placeholder={VALUE_FIELD[editingKind]?.placeholder}\n              />\n              {editingKind === 'in-person' && (\n                <AddressSuggestions\n                  suggestions={typed === picked ? [] : suggestions}\n                  onPick={(address) => {\n                    setPicked(address);\n                    onChange({ ...value, kind: 'in-person', value: address });\n                  }}\n                />\n              )}\n            </div>\n          )}\n\n          {editingKind && editingKind !== 'google-meet' && (\n            <div>\n              <label className=\"mb-1 block text-sm font-medium text-[var(--text-secondary)]\">\n                {editingKind === 'custom'\n                  ? 'Instructions'\n                  : 'Anything else to know'}\n              </label>\n              <Textarea\n                rows={3}\n                value={value?.instructions ?? ''}\n                onChange={(e) =>\n                  onChange({\n                    ...value,\n                    kind: editingKind,\n                    instructions: e.target.value,\n                  })\n                }\n                placeholder={\n                  editingKind === 'custom'\n                    ? 'Tell the customer how to reach you'\n                    : 'Buzzer, parking, which door'\n                }\n              />\n            </div>\n          )}\n\n          <DialogFooter>\n            {editingKind === 'google-meet' && !hasCalendar ? (\n              <Button asChild>\n                <Link href=\"/dashboard/settings/calendar-sync\">\n                  Connect Google Calendar\n                </Link>\n              </Button>\n            ) : (\n              <Button onClick={() => setEditingKind(null)}>Done</Button>\n            )}\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/behaviors/booking-mode-selector.d.ts

@@ -0,0 +1,5 @@
+import type { BookingMode } from '@withpotter/hooks/use-booking-context';
+export declare function BookingModeSelector({ value, onChange, }: {
+    value: BookingMode;
+    onChange: (mode: BookingMode) => void;
+}): import("react").JSX.Element;

package/dist/behaviors/booking-mode-selector.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarRange, Clock, Users } from "lucide-react";
+const BOOKING_MODES = [
+  {
+    id: "duration",
+    title: "Duration-based",
+    description: "Fixed time slots for appointments and services",
+    icon: Clock,
+    color: "#2648ef"
+  },
+  {
+    id: "date-range",
+    title: "Date range",
+    description: "Check-in / check-out for stays and rentals",
+    icon: CalendarRange,
+    color: "#10b981"
+  },
+  {
+    id: "group",
+    title: "Group / class",
+    description: "Capacity-based sessions and classes",
+    icon: Users,
+    color: "#f59e0b"
+  }
+];
+function BookingModeSelector({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "mb-1 grid grid-cols-1 gap-3 sm:grid-cols-3", children: BOOKING_MODES.map((mode) => {
+    const selected = value === mode.id;
+    const Icon = mode.icon;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(mode.id),
+        className: `group relative cursor-pointer rounded-[1px] border-2 p-4 text-left transition ${selected ? "border-brand-500 bg-brand-500/5" : "border-[var(--border-default)] bg-[var(--bg-base)] hover:border-[var(--border-strong)]"}`,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[1px]",
+              style: { backgroundColor: `${mode.color}15` },
+              children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5", style: { color: mode.color } })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: mode.title }),
+            /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--text-tertiary)]", children: mode.description })
+          ] })
+        ] })
+      },
+      mode.id
+    );
+  }) });
+}
+export {
+  BookingModeSelector
+};
+//# sourceMappingURL=booking-mode-selector.js.map

package/dist/behaviors/booking-mode-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/behaviors/booking-mode-selector.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarRange, Clock, Users } from 'lucide-react';\nimport type { BookingMode } from '@withpotter/hooks/use-booking-context';\n\nconst BOOKING_MODES = [\n  {\n    id: 'duration' as const,\n    title: 'Duration-based',\n    description: 'Fixed time slots for appointments and services',\n    icon: Clock,\n    color: '#2648ef',\n  },\n  {\n    id: 'date-range' as const,\n    title: 'Date range',\n    description: 'Check-in / check-out for stays and rentals',\n    icon: CalendarRange,\n    color: '#10b981',\n  },\n  {\n    id: 'group' as const,\n    title: 'Group / class',\n    description: 'Capacity-based sessions and classes',\n    icon: Users,\n    color: '#f59e0b',\n  },\n] as const;\n\nexport function BookingModeSelector({\n  value,\n  onChange,\n}: {\n  value: BookingMode;\n  onChange: (mode: BookingMode) => void;\n}) {\n  return (\n    <div className=\"mb-1 grid grid-cols-1 gap-3 sm:grid-cols-3\">\n      {BOOKING_MODES.map((mode) => {\n        const selected = value === mode.id;\n        const Icon = mode.icon;\n        return (\n          <button\n            key={mode.id}\n            type=\"button\"\n            onClick={() => onChange(mode.id)}\n            className={`group relative cursor-pointer rounded-[1px] border-2 p-4 text-left transition ${\n              selected\n                ? 'border-brand-500 bg-brand-500/5'\n                : 'border-[var(--border-default)] bg-[var(--bg-base)] hover:border-[var(--border-strong)]'\n            }`}\n          >\n            <div className=\"flex items-start gap-3\">\n              <div\n                className=\"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[1px]\"\n                style={{ backgroundColor: `${mode.color}15` }}\n              >\n                <Icon className=\"h-5 w-5\" style={{ color: mode.color }} />\n              </div>\n              <div className=\"min-w-0\">\n                <div className=\"text-sm font-semibold text-[var(--text-primary)]\">\n                  {mode.title}\n                </div>\n                <div className=\"mt-0.5 text-xs text-[var(--text-tertiary)]\">\n                  {mode.description}\n                </div>\n              </div>\n            </div>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAyDgB,cAEF,YAFE;AAvDhB,SAAS,eAAe,OAAO,aAAa;AAG5C,MAAM,gBAAgB;AAAA,EACpB;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AACF,GAGG;AACD,SACE,oBAAC,SAAI,WAAU,8CACZ,wBAAc,IAAI,CAAC,SAAS;AAC3B,UAAM,WAAW,UAAU,KAAK;AAChC,UAAM,OAAO,KAAK;AAClB,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,KAAK,EAAE;AAAA,QAC/B,WAAW,iFACT,WACI,oCACA,wFACN;AAAA,QAEA,+BAAC,SAAI,WAAU,0BACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,iBAAiB,GAAG,KAAK,KAAK,KAAK;AAAA,cAE5C,8BAAC,QAAK,WAAU,WAAU,OAAO,EAAE,OAAO,KAAK,MAAM,GAAG;AAAA;AAAA,UAC1D;AAAA,UACA,qBAAC,SAAI,WAAU,WACb;AAAA,gCAAC,SAAI,WAAU,oDACZ,eAAK,OACR;AAAA,YACA,oBAAC,SAAI,WAAU,8CACZ,eAAK,aACR;AAAA,aACF;AAAA,WACF;AAAA;AAAA,MAxBK,KAAK;AAAA,IAyBZ;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/behaviors/downloadable-config-panel.d.ts

@@ -0,0 +1,9 @@
+import type { DownloadableConfig } from '@withpotter/lib/product-types';
+import type { BehaviorLabelOverrides } from './behavior-config-section';
+interface DownloadableConfigPanelProps {
+    config: DownloadableConfig;
+    onChange: (config: DownloadableConfig) => void;
+    labelOverrides?: BehaviorLabelOverrides['downloadable'];
+}
+export declare function DownloadableConfigPanel({ config, onChange, labelOverrides, }: DownloadableConfigPanelProps): import("react").JSX.Element;
+export {};

package/dist/behaviors/downloadable-config-panel.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@withpotter/ui-kit";
+const LABEL_CLS = "block text-sm font-medium text-[var(--text-secondary)] mb-1";
+const HELP_CLS = "mt-1 text-xs text-[var(--text-muted)]";
+function DownloadableConfigPanel({
+  config,
+  onChange,
+  labelOverrides
+}) {
+  const fl = (name, def) => labelOverrides?.fields?.[name] || def;
+  const update = (partial) => onChange({ ...config, ...partial });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("fileUrl", "File URL") }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "url",
+          value: config.fileUrl || "",
+          onChange: (e) => update({ fileUrl: e.target.value || void 0 }),
+          placeholder: "https://example.com/file.pdf"
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: HELP_CLS, children: "Direct link to the downloadable file. Leave empty to upload later." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("fileSize", "File size (MB)") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            min: 0,
+            step: 0.1,
+            value: config.fileSize ?? "",
+            onChange: (e) => update({
+              fileSize: e.target.value ? parseFloat(e.target.value) : void 0
+            }),
+            placeholder: "0"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("maxDownloads", "Max downloads per customer") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            min: 0,
+            value: config.maxDownloads ?? "",
+            onChange: (e) => update({
+              maxDownloads: e.target.value ? parseInt(e.target.value) : void 0
+            }),
+            placeholder: "Unlimited"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: HELP_CLS, children: "Leave empty for unlimited." })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DownloadableConfigPanel
+};
+//# sourceMappingURL=downloadable-config-panel.js.map

package/dist/behaviors/downloadable-config-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/behaviors/downloadable-config-panel.tsx"],"sourcesContent":["'use client';\n\nimport type { DownloadableConfig } from '@withpotter/lib/product-types';\nimport type { BehaviorLabelOverrides } from './behavior-config-section';\nimport { Input } from '@withpotter/ui-kit';\n\nconst LABEL_CLS = 'block text-sm font-medium text-[var(--text-secondary)] mb-1';\nconst HELP_CLS = 'mt-1 text-xs text-[var(--text-muted)]';\n\ninterface DownloadableConfigPanelProps {\n  config: DownloadableConfig;\n  onChange: (config: DownloadableConfig) => void;\n  labelOverrides?: BehaviorLabelOverrides['downloadable'];\n}\n\nexport function DownloadableConfigPanel({\n  config,\n  onChange,\n  labelOverrides,\n}: DownloadableConfigPanelProps) {\n  const fl = (name: string, def: string) =>\n    labelOverrides?.fields?.[name] || def;\n\n  const update = (partial: Partial<DownloadableConfig>) =>\n    onChange({ ...config, ...partial });\n\n  return (\n    <div className=\"space-y-4\">\n      <div>\n        <label className={LABEL_CLS}>{fl('fileUrl', 'File URL')}</label>\n        <Input\n          type=\"url\"\n          value={config.fileUrl || ''}\n          onChange={(e) => update({ fileUrl: e.target.value || undefined })}\n          placeholder=\"https://example.com/file.pdf\"\n        />\n        <p className={HELP_CLS}>\n          Direct link to the downloadable file. Leave empty to upload later.\n        </p>\n      </div>\n\n      <div className=\"grid grid-cols-2 gap-4\">\n        <div>\n          <label className={LABEL_CLS}>\n            {fl('fileSize', 'File size (MB)')}\n          </label>\n          <Input\n            type=\"number\"\n            min={0}\n            step={0.1}\n            value={config.fileSize ?? ''}\n            onChange={(e) =>\n              update({\n                fileSize: e.target.value\n                  ? parseFloat(e.target.value)\n                  : undefined,\n              })\n            }\n            placeholder=\"0\"\n          />\n        </div>\n        <div>\n          <label className={LABEL_CLS}>\n            {fl('maxDownloads', 'Max downloads per customer')}\n          </label>\n          <Input\n            type=\"number\"\n            min={0}\n            value={config.maxDownloads ?? ''}\n            onChange={(e) =>\n              update({\n                maxDownloads: e.target.value\n                  ? parseInt(e.target.value)\n                  : undefined,\n              })\n            }\n            placeholder=\"Unlimited\"\n          />\n          <p className={HELP_CLS}>Leave empty for unlimited.</p>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA4BM,SACE,KADF;AAxBN,SAAS,aAAa;AAEtB,MAAM,YAAY;AAClB,MAAM,WAAW;AAQV,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,KAAK,CAAC,MAAc,QACxB,gBAAgB,SAAS,IAAI,KAAK;AAEpC,QAAM,SAAS,CAAC,YACd,SAAS,EAAE,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpC,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SACC;AAAA,0BAAC,WAAM,WAAW,WAAY,aAAG,WAAW,UAAU,GAAE;AAAA,MACxD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,OAAO,WAAW;AAAA,UACzB,UAAU,CAAC,MAAM,OAAO,EAAE,SAAS,EAAE,OAAO,SAAS,OAAU,CAAC;AAAA,UAChE,aAAY;AAAA;AAAA,MACd;AAAA,MACA,oBAAC,OAAE,WAAW,UAAU,gFAExB;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,0BACb;AAAA,2BAAC,SACC;AAAA,4BAAC,WAAM,WAAW,WACf,aAAG,YAAY,gBAAgB,GAClC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,YACN,OAAO,OAAO,YAAY;AAAA,YAC1B,UAAU,CAAC,MACT,OAAO;AAAA,cACL,UAAU,EAAE,OAAO,QACf,WAAW,EAAE,OAAO,KAAK,IACzB;AAAA,YACN,CAAC;AAAA,YAEH,aAAY;AAAA;AAAA,QACd;AAAA,SACF;AAAA,MACA,qBAAC,SACC;AAAA,4BAAC,WAAM,WAAW,WACf,aAAG,gBAAgB,4BAA4B,GAClD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,KAAK;AAAA,YACL,OAAO,OAAO,gBAAgB;AAAA,YAC9B,UAAU,CAAC,MACT,OAAO;AAAA,cACL,cAAc,EAAE,OAAO,QACnB,SAAS,EAAE,OAAO,KAAK,IACvB;AAAA,YACN,CAAC;AAAA,YAEH,aAAY;AAAA;AAAA,QACd;AAAA,QACA,oBAAC,OAAE,WAAW,UAAU,wCAA0B;AAAA,SACpD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/behaviors/eligible-resources-picker.d.ts

@@ -0,0 +1,13 @@
+interface EligibleResourcesPickerProps {
+    categoryId: string;
+    selectedIds: string[] | null | undefined;
+    onChange: (resourceIds: string[] | null) => void;
+    label?: string;
+    helpText?: string;
+    emptyText?: string;
+    allowAllSelection?: boolean;
+    showCapacity?: boolean;
+    layout?: 'list' | 'grid';
+}
+export declare function EligibleResourcesPicker({ categoryId, selectedIds, onChange, label, helpText, emptyText, allowAllSelection, showCapacity, layout, }: EligibleResourcesPickerProps): import("react").JSX.Element;
+export {};

package/dist/behaviors/eligible-resources-picker.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { resourcesApi } from "@withpotter/lib/api";
+import { Avatar } from "@withpotter/ui-kit/avatar";
+function EligibleResourcesPicker({
+  categoryId,
+  selectedIds,
+  onChange,
+  label = "Available resources",
+  helpText = "Select what can be used for this service. Leave all selected to allow any available option.",
+  emptyText = "No active resources exist in this category yet.",
+  allowAllSelection = true,
+  showCapacity = true,
+  layout = "list"
+}) {
+  const { data, isLoading } = useApiQuery(
+    ["bookable-category-resources", categoryId],
+    (slug) => resourcesApi.listFull(slug, { categoryId })
+  );
+  const resources = (data?.data ?? []).filter(
+    (resource) => resource.status === "active"
+  );
+  const selected = new Set(
+    selectedIds ?? resources.map((resource) => resource.id)
+  );
+  const toggle = (resourceId) => {
+    const next = new Set(selected);
+    if (next.has(resourceId)) next.delete(resourceId);
+    else next.add(resourceId);
+    const allSelected = resources.every((resource) => next.has(resource.id));
+    onChange(allowAllSelection && allSelected ? null : Array.from(next));
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    label && /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-[var(--text-secondary)]", children: label }),
+    helpText && /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-[var(--text-muted)]", children: helpText }),
+    isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-2 text-xs text-[var(--text-tertiary)]", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-[13px] animate-spin" }),
+      "Loading resources\u2026"
+    ] }) : resources.length === 0 ? /* @__PURE__ */ jsx("p", { className: "border-l-2 border-[var(--warning)] px-3 py-2 text-xs text-[var(--warning)]", children: emptyText }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: layout === "grid" ? "grid gap-2 sm:grid-cols-2" : "divide-y divide-[var(--border-subtle)] border-y border-[var(--border-subtle)]",
+        children: resources.map((resource) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: `flex cursor-pointer items-center justify-between gap-3 ${layout === "grid" ? "rounded-lg border border-[var(--border-subtle)] px-3 py-3" : "py-3"}`,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    name: resource.name,
+                    src: resource.imageUrl,
+                    size: "sm"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium text-[var(--text-primary)]", children: resource.name }),
+                  showCapacity ? /* @__PURE__ */ jsxs("span", { className: "block text-xs text-[var(--text-tertiary)]", children: [
+                    "Capacity ",
+                    resource.maxBookingsPerSlot ?? 1
+                  ] }) : /* @__PURE__ */ jsx("span", { className: "block text-xs text-[var(--text-tertiary)]", children: typeof resource.metadata?.role === "string" ? resource.metadata.role : resource.skills[0] || "Member" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selected.has(resource.id),
+                  onChange: () => toggle(resource.id),
+                  className: "h-4 w-4 border-[var(--border-default)] text-brand-500 focus:ring-brand-500"
+                }
+              )
+            ]
+          },
+          resource.id
+        ))
+      }
+    )
+  ] });
+}
+export {
+  EligibleResourcesPicker
+};
+//# sourceMappingURL=eligible-resources-picker.js.map

package/dist/behaviors/eligible-resources-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/behaviors/eligible-resources-picker.tsx"],"sourcesContent":["'use client';\n\nimport { Loader2 } from 'lucide-react';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { resourcesApi } from '@withpotter/lib/api';\nimport type { Resource } from '@withpotter/lib/resource-types';\nimport { Avatar } from '@withpotter/ui-kit/avatar';\n\ninterface EligibleResourcesPickerProps {\n  categoryId: string;\n  selectedIds: string[] | null | undefined;\n  onChange: (resourceIds: string[] | null) => void;\n  label?: string;\n  helpText?: string;\n  emptyText?: string;\n  allowAllSelection?: boolean;\n  showCapacity?: boolean;\n  layout?: 'list' | 'grid';\n}\n\nexport function EligibleResourcesPicker({\n  categoryId,\n  selectedIds,\n  onChange,\n  label = 'Available resources',\n  helpText = 'Select what can be used for this service. Leave all selected to allow any available option.',\n  emptyText = 'No active resources exist in this category yet.',\n  allowAllSelection = true,\n  showCapacity = true,\n  layout = 'list',\n}: EligibleResourcesPickerProps) {\n  const { data, isLoading } = useApiQuery<{ data: Resource[]; total: number }>(\n    ['bookable-category-resources', categoryId],\n    (slug) => resourcesApi.listFull(slug, { categoryId }),\n  );\n  const resources = (data?.data ?? []).filter(\n    (resource) => resource.status === 'active',\n  );\n  const selected = new Set(\n    selectedIds ?? resources.map((resource) => resource.id),\n  );\n\n  const toggle = (resourceId: string) => {\n    const next = new Set(selected);\n    if (next.has(resourceId)) next.delete(resourceId);\n    else next.add(resourceId);\n    const allSelected = resources.every((resource) => next.has(resource.id));\n    onChange(allowAllSelection && allSelected ? null : Array.from(next));\n  };\n\n  return (\n    <div>\n      {label && (\n        <label className=\"mb-1 block text-sm font-medium text-[var(--text-secondary)]\">\n          {label}\n        </label>\n      )}\n      {helpText && (\n        <p className=\"mb-2 text-xs text-[var(--text-muted)]\">{helpText}</p>\n      )}\n      {isLoading ? (\n        <div className=\"flex items-center gap-2 py-2 text-xs text-[var(--text-tertiary)]\">\n          <Loader2 className=\"size-[13px] animate-spin\" />\n          Loading resources…\n        </div>\n      ) : resources.length === 0 ? (\n        <p className=\"border-l-2 border-[var(--warning)] px-3 py-2 text-xs text-[var(--warning)]\">\n          {emptyText}\n        </p>\n      ) : (\n        <div\n          className={\n            layout === 'grid'\n              ? 'grid gap-2 sm:grid-cols-2'\n              : 'divide-y divide-[var(--border-subtle)] border-y border-[var(--border-subtle)]'\n          }\n        >\n          {resources.map((resource) => (\n            <label\n              key={resource.id}\n              className={`flex cursor-pointer items-center justify-between gap-3 ${\n                layout === 'grid'\n                  ? 'rounded-lg border border-[var(--border-subtle)] px-3 py-3'\n                  : 'py-3'\n              }`}\n            >\n              <span className=\"flex min-w-0 items-center gap-3\">\n                <Avatar\n                  name={resource.name}\n                  src={resource.imageUrl}\n                  size=\"sm\"\n                />\n                <span>\n                  <span className=\"block text-sm font-medium text-[var(--text-primary)]\">\n                    {resource.name}\n                  </span>\n                  {showCapacity ? (\n                    <span className=\"block text-xs text-[var(--text-tertiary)]\">\n                      Capacity {resource.maxBookingsPerSlot ?? 1}\n                    </span>\n                  ) : (\n                    <span className=\"block text-xs text-[var(--text-tertiary)]\">\n                      {typeof resource.metadata?.role === 'string'\n                        ? resource.metadata.role\n                        : resource.skills[0] || 'Member'}\n                    </span>\n                  )}\n                </span>\n              </span>\n              <input\n                type=\"checkbox\"\n                checked={selected.has(resource.id)}\n                onChange={() => toggle(resource.id)}\n                className=\"h-4 w-4 border-[var(--border-default)] text-brand-500 focus:ring-brand-500\"\n              />\n            </label>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAqDQ,cAQA,YARA;AAnDR,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAE7B,SAAS,cAAc;AAchB,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,SAAS;AACX,GAAiC;AAC/B,QAAM,EAAE,MAAM,UAAU,IAAI;AAAA,IAC1B,CAAC,+BAA+B,UAAU;AAAA,IAC1C,CAAC,SAAS,aAAa,SAAS,MAAM,EAAE,WAAW,CAAC;AAAA,EACtD;AACA,QAAM,aAAa,MAAM,QAAQ,CAAC,GAAG;AAAA,IACnC,CAAC,aAAa,SAAS,WAAW;AAAA,EACpC;AACA,QAAM,WAAW,IAAI;AAAA,IACnB,eAAe,UAAU,IAAI,CAAC,aAAa,SAAS,EAAE;AAAA,EACxD;AAEA,QAAM,SAAS,CAAC,eAAuB;AACrC,UAAM,OAAO,IAAI,IAAI,QAAQ;AAC7B,QAAI,KAAK,IAAI,UAAU,EAAG,MAAK,OAAO,UAAU;AAAA,QAC3C,MAAK,IAAI,UAAU;AACxB,UAAM,cAAc,UAAU,MAAM,CAAC,aAAa,KAAK,IAAI,SAAS,EAAE,CAAC;AACvE,aAAS,qBAAqB,cAAc,OAAO,MAAM,KAAK,IAAI,CAAC;AAAA,EACrE;AAEA,SACE,qBAAC,SACE;AAAA,aACC,oBAAC,WAAM,WAAU,+DACd,iBACH;AAAA,IAED,YACC,oBAAC,OAAE,WAAU,yCAAyC,oBAAS;AAAA,IAEhE,YACC,qBAAC,SAAI,WAAU,oEACb;AAAA,0BAAC,WAAQ,WAAU,4BAA2B;AAAA,MAAE;AAAA,OAElD,IACE,UAAU,WAAW,IACvB,oBAAC,OAAE,WAAU,8EACV,qBACH,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WACE,WAAW,SACP,8BACA;AAAA,QAGL,oBAAU,IAAI,CAAC,aACd;AAAA,UAAC;AAAA;AAAA,YAEC,WAAW,0DACT,WAAW,SACP,8DACA,MACN;AAAA,YAEA;AAAA,mCAAC,UAAK,WAAU,mCACd;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAM,SAAS;AAAA,oBACf,KAAK,SAAS;AAAA,oBACd,MAAK;AAAA;AAAA,gBACP;AAAA,gBACA,qBAAC,UACC;AAAA,sCAAC,UAAK,WAAU,wDACb,mBAAS,MACZ;AAAA,kBACC,eACC,qBAAC,UAAK,WAAU,6CAA4C;AAAA;AAAA,oBAChD,SAAS,sBAAsB;AAAA,qBAC3C,IAEA,oBAAC,UAAK,WAAU,6CACb,iBAAO,SAAS,UAAU,SAAS,WAChC,SAAS,SAAS,OAClB,SAAS,OAAO,CAAC,KAAK,UAC5B;AAAA,mBAEJ;AAAA,iBACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,SAAS,IAAI,SAAS,EAAE;AAAA,kBACjC,UAAU,MAAM,OAAO,SAAS,EAAE;AAAA,kBAClC,WAAU;AAAA;AAAA,cACZ;AAAA;AAAA;AAAA,UAnCK,SAAS;AAAA,QAoChB,CACD;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/behaviors/gating-config-section.d.ts

@@ -0,0 +1,24 @@
+import type { MerchantPlan } from '@withpotter/lib/api/types';
+interface GatingConfigSectionProps {
+    /** Plan IDs that grant access. Customer needs an active subscription to ANY one of them. */
+    gatedByPlanIds: string[];
+    onPlanIdsChange: (ids: string[]) => void;
+    /** Available active plans the merchant has created. */
+    availablePlans: MerchantPlan[];
+    /** Legacy tag-based gate. OR'd with plan-id gate at evaluation time. */
+    gatedBy: string[];
+    onChange: (tags: string[]) => void;
+    subscribablePlanName?: string;
+    /** Optional dashboard route to the plan-create flow, shown when no plans exist. */
+    createPlanHref?: string;
+}
+/**
+ * GatingConfigSection
+ *
+ * Lets merchants choose which subscription plans grant access to this content.
+ * Primary UI is a multi-select of the merchant's active plans. Legacy tag gating
+ * is preserved under an "Advanced" disclosure and OR'd with the plan-id gate
+ * server-side. Empty = public.
+ */
+export declare function GatingConfigSection({ gatedByPlanIds, onPlanIdsChange, availablePlans, gatedBy, onChange, subscribablePlanName, createPlanHref, }: GatingConfigSectionProps): import("react").JSX.Element;
+export {};