@withpotter/components 0.13.0-next.101

package/dist/dynamic-form/fields-reference.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/dynamic-form/fields-reference.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport React, { useState, useCallback, useContext } from 'react';\nimport { type ContentFieldConfig } from '@withpotter/lib/template-types';\nimport { ChevronDown } from 'lucide-react';\nimport { TenantContext, type FieldRendererProps } from './shared';\n\n/**\n * Fields that resolve against something the API owns: resources and plans.\n *\n * Both fetch on open rather than on mount — a form with six of these should\n * not fire six requests to render a page the merchant may never scroll to.\n */\n\n// ResourceSelectField fetches resources (therapists, rooms, etc.) from API\nexport function ResourceSelectField({\n  field,\n  value,\n  onChange,\n  error,\n  disabled,\n}: FieldRendererProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [openUpward, setOpenUpward] = useState(false);\n  const [resources, setResources] = useState<\n    Array<{ id: string; name: string }>\n  >([]);\n  const [loading, setLoading] = useState(false);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const tenantSlug = useContext(TenantContext);\n\n  // Get resource type from field config (e.g., 'therapist', 'room')\n  const resourceType = (field as ContentFieldConfig & { resourceType?: string })\n    .resourceType;\n  // Field can store either the ID (valueField: 'id') or name (valueField: 'name')\n  const valueField =\n    (field as ContentFieldConfig & { valueField?: 'id' | 'name' }).valueField ||\n    'name';\n\n  const selectedResource = resources.find((r) =>\n    valueField === 'id' ? r.id === value : r.name === value,\n  );\n\n  // Fetch resources when dropdown opens\n  const handleOpen = async () => {\n    if (disabled) return;\n\n    if (!isOpen && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      const spaceBelow = window.innerHeight - rect.bottom;\n      setOpenUpward(spaceBelow < 250);\n    }\n\n    if (!isOpen && resources.length === 0 && tenantSlug) {\n      setLoading(true);\n      try {\n        // Dynamic import to avoid circular dependency\n        const { resourcesApi } = await import('@withpotter/lib/api');\n        const response = await resourcesApi.list(tenantSlug, resourceType);\n        setResources(response.data || []);\n      } catch (err) {\n        console.error('Failed to fetch resources:', err);\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <div className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleOpen}\n        disabled={disabled}\n        className={`w-full px-3 py-2 rounded-md border text-left flex items-center justify-between ${\n          error\n            ? 'border-[var(--error)]'\n            : isOpen\n              ? 'border-brand-500 ring-2 ring-brand-500'\n              : 'border-[var(--border-default)] hover:border-[var(--border-strong)]'\n        } bg-[var(--bg-base)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed`}\n      >\n        <span\n          className={\n            selectedResource\n              ? 'text-[var(--text-primary)]'\n              : 'text-[var(--text-tertiary)]'\n          }\n        >\n          {selectedResource?.name ||\n            (value as string) ||\n            `Select ${field.label}...`}\n        </span>\n        <ChevronDown\n          className={`w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? 'rotate-180' : ''}`}\n        />\n      </button>\n\n      {isOpen && (\n        <>\n          <div\n            className=\"fixed inset-0 z-[60]\"\n            onClick={() => setIsOpen(false)}\n          />\n          <div\n            className={`absolute z-[70] w-full bg-[var(--bg-base)] border border-[var(--border-subtle)] rounded-md shadow-lg max-h-60 overflow-y-auto ${\n              openUpward ? 'bottom-full mb-1' : 'top-full mt-1'\n            }`}\n          >\n            {loading ? (\n              <div className=\"px-3 py-2 text-sm text-[var(--text-tertiary)]\">\n                Loading...\n              </div>\n            ) : (\n              <>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onChange(undefined);\n                    setIsOpen(false);\n                  }}\n                  className=\"w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] text-[var(--text-tertiary)]\"\n                >\n                  No {field.label}\n                </button>\n                {resources.map((resource) => {\n                  const resourceValue =\n                    valueField === 'id' ? resource.id : resource.name;\n                  return (\n                    <button\n                      key={resource.id}\n                      type=\"button\"\n                      onClick={() => {\n                        onChange(resourceValue);\n                        setIsOpen(false);\n                      }}\n                      className={`w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ${\n                        value === resourceValue\n                          ? 'bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium'\n                          : 'text-[var(--text-primary)]'\n                      }`}\n                    >\n                      {resource.name}\n                    </button>\n                  );\n                })}\n                {resources.length === 0 && !loading && (\n                  <div className=\"px-3 py-2 text-sm text-[var(--text-tertiary)]\">\n                    No resources available\n                  </div>\n                )}\n              </>\n            )}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n// PlanRefField fetches active merchant subscription plans and renders a single-\n// select picker. Used by template/page-editor blocks that bind to a plan\n// (e.g. Uloma RestockBlock). Stores the selected plan's id as the field value.\n//\n// Optional field config:\n//   - includeInactive?: boolean — when true, fetches all plans, not just active.\n//     Falls back to `getActivePlans` otherwise.\nexport function PlanRefField({\n  field,\n  value,\n  onChange,\n  error,\n  disabled,\n}: FieldRendererProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [openUpward, setOpenUpward] = useState(false);\n  const [plans, setPlans] = useState<\n    Array<{\n      id: string;\n      name: string;\n      interval: string;\n      amount: number;\n      currency: string;\n      status: string;\n      groupLabel?: string | null;\n    }>\n  >([]);\n  const [loading, setLoading] = useState(false);\n  const [loadError, setLoadError] = useState<string | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const tenantSlug = useContext(TenantContext);\n\n  const includeInactive = Boolean(\n    (field as ContentFieldConfig & { includeInactive?: boolean })\n      .includeInactive,\n  );\n\n  const selectedPlan = plans.find((p) => p.id === value);\n\n  const fetchPlans = useCallback(async () => {\n    if (!tenantSlug) return;\n    setLoading(true);\n    setLoadError(null);\n    try {\n      // Dynamic import to avoid circular dependency.\n      const { merchantSubscriptionsApi } = await import('@withpotter/lib/api');\n      if (includeInactive) {\n        const res = await merchantSubscriptionsApi.listPlans(tenantSlug, {\n          limit: 200,\n        });\n        setPlans(res?.plans ?? []);\n      } else {\n        const active =\n          await merchantSubscriptionsApi.getActivePlans(tenantSlug);\n        setPlans(active ?? []);\n      }\n    } catch (err) {\n      console.error('Failed to fetch plans:', err);\n      setLoadError('Could not load plans.');\n    } finally {\n      setLoading(false);\n    }\n  }, [tenantSlug, includeInactive]);\n\n  const handleOpen = async () => {\n    if (disabled) return;\n\n    if (!isOpen && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      const spaceBelow = window.innerHeight - rect.bottom;\n      setOpenUpward(spaceBelow < 280);\n    }\n\n    if (!isOpen && plans.length === 0 && !loadError) {\n      await fetchPlans();\n    }\n\n    setIsOpen(!isOpen);\n  };\n\n  const formatPlanLabel = (plan: (typeof plans)[number]) => {\n    const parts: string[] = [plan.name];\n    if (plan.groupLabel && plan.groupLabel !== plan.name) {\n      parts.push(`(${plan.groupLabel})`);\n    }\n    parts.push(`· ${plan.interval}`);\n    return parts.join(' ');\n  };\n\n  return (\n    <div className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleOpen}\n        disabled={disabled}\n        className={`w-full px-3 py-2 rounded-md border text-left flex items-center justify-between ${\n          error\n            ? 'border-[var(--error)]'\n            : isOpen\n              ? 'border-brand-500 ring-2 ring-brand-500'\n              : 'border-[var(--border-default)] hover:border-[var(--border-strong)]'\n        } bg-[var(--bg-base)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed`}\n      >\n        <span\n          className={\n            selectedPlan\n              ? 'text-[var(--text-primary)]'\n              : 'text-[var(--text-tertiary)]'\n          }\n        >\n          {selectedPlan\n            ? formatPlanLabel(selectedPlan)\n            : (value as string) || `Select ${field.label.toLowerCase()}...`}\n        </span>\n        <ChevronDown\n          className={`w-4 h-4 text-[var(--text-muted)] transition-transform ${\n            isOpen ? 'rotate-180' : ''\n          }`}\n        />\n      </button>\n\n      {isOpen && (\n        <>\n          <div\n            className=\"fixed inset-0 z-[60]\"\n            onClick={() => setIsOpen(false)}\n          />\n          <div\n            className={`absolute z-[70] w-full bg-[var(--bg-base)] border border-[var(--border-subtle)] rounded-md shadow-lg max-h-72 overflow-y-auto ${\n              openUpward ? 'bottom-full mb-1' : 'top-full mt-1'\n            }`}\n          >\n            {loading ? (\n              <div className=\"px-3 py-2 text-sm text-[var(--text-tertiary)]\">\n                Loading plans…\n              </div>\n            ) : loadError ? (\n              <div className=\"px-3 py-2 text-sm text-[var(--error)]\">\n                {loadError}\n              </div>\n            ) : (\n              <>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onChange(undefined);\n                    setIsOpen(false);\n                  }}\n                  className=\"w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] text-[var(--text-tertiary)]\"\n                >\n                  No plan\n                </button>\n                {plans.map((plan) => (\n                  <button\n                    key={plan.id}\n                    type=\"button\"\n                    onClick={() => {\n                      onChange(plan.id);\n                      setIsOpen(false);\n                    }}\n                    className={`w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ${\n                      value === plan.id\n                        ? 'bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium'\n                        : 'text-[var(--text-primary)]'\n                    }`}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">{formatPlanLabel(plan)}</span>\n                      {plan.status && plan.status !== 'active' && (\n                        <span className=\"text-3xs uppercase tracking-wide text-[var(--text-tertiary)] shrink-0\">\n                          {plan.status}\n                        </span>\n                      )}\n                    </div>\n                  </button>\n                ))}\n                {plans.length === 0 && !loading && (\n                  <div className=\"px-3 py-3 text-sm text-[var(--text-tertiary)] space-y-2\">\n                    <div>No subscription plans yet.</div>\n                    <Link\n                      href=\"/dashboard/subscriptions/plans/new\"\n                      className=\"inline-block text-brand-500 hover:underline\"\n                    >\n                      Create a plan →\n                    </Link>\n                  </div>\n                )}\n              </>\n            )}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dynamic-form/fields-select.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type FieldRendererProps } from './shared';
+/**
+ * Choosing from a list the form already has.
+ *
+ * Distinct from `fields-reference`, which chooses from a list it has to go
+ * and fetch. The difference is not cosmetic: everything here renders
+ * synchronously from `field.options` or a context, so none of it has a
+ * loading state to get wrong.
+ */
+export declare function SelectField({ field, value, onChange, error, disabled, }: FieldRendererProps): React.JSX.Element;
+export declare function CategorySelectField({ field, value, onChange, error, disabled, }: FieldRendererProps): React.JSX.Element;
+export declare function MultiSelectField({ field, value, onChange, disabled, }: FieldRendererProps): React.JSX.Element;

package/dist/dynamic-form/fields-select.js

@@ -0,0 +1,343 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useContext } from "react";
+import { ChevronDown, Plus, X } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input } from "@withpotter/ui-kit";
+import { OptionButton } from "@withpotter/ui-kit";
+import { CategoriesContext } from "./shared";
+function SelectField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [openUpward, setOpenUpward] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [customOptions, setCustomOptions] = useState([]);
+  const buttonRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const allOptions = [...field.options || [], ...customOptions];
+  const selectedOption = allOptions.find((o) => o.value === value);
+  const filteredOptions = searchQuery ? allOptions.filter(
+    (o) => o.label.toLowerCase().includes(searchQuery.toLowerCase())
+  ) : allOptions;
+  const handleOpen = () => {
+    if (disabled) return;
+    if (!isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      setOpenUpward(spaceBelow < 250);
+    }
+    setIsOpen(!isOpen);
+    setSearchQuery("");
+    setTimeout(() => inputRef.current?.focus(), 50);
+  };
+  const handleCreateOption = () => {
+    const label = searchQuery.trim();
+    if (!label) return;
+    const newValue = label.toLowerCase().replace(/\s+/g, "-");
+    if (allOptions.some((o) => o.value === newValue)) {
+      onChange(newValue);
+    } else {
+      setCustomOptions((prev) => [...prev, { label, value: newValue }]);
+      onChange(newValue);
+    }
+    setSearchQuery("");
+    setIsOpen(false);
+  };
+  const showCreateOption = searchQuery.trim() && !allOptions.some(
+    (o) => o.label.toLowerCase() === searchQuery.trim().toLowerCase()
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        onClick: handleOpen,
+        disabled,
+        className: `w-full px-3 py-2 rounded-md border text-left flex items-center justify-between ${error ? "border-[var(--error)]" : isOpen ? "border-brand-500 ring-2 ring-brand-500" : "border-[var(--border-default)] hover:border-[var(--border-strong)]"} bg-[var(--bg-base)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: selectedOption ? "text-[var(--text-primary)]" : "text-[var(--text-tertiary)]",
+              children: selectedOption?.label || `Select ${field.label}...`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-[60]",
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `absolute z-[70] w-full bg-[var(--bg-base)] border border-[var(--border-subtle)] rounded-md shadow-lg max-h-60 overflow-y-auto ${openUpward ? "bottom-full mb-1" : "top-full mt-1"}`,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "sticky top-0 bg-[var(--bg-base)] border-b border-[var(--border-subtle)] p-2 modal-in", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: inputRef,
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    if (showCreateOption) {
+                      handleCreateOption();
+                    } else if (filteredOptions.length === 1) {
+                      onChange(filteredOptions[0].value);
+                      setIsOpen(false);
+                    }
+                  }
+                },
+                placeholder: `Search or add ${field.label?.toLowerCase() || "option"}...`
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange(void 0);
+                  setIsOpen(false);
+                },
+                className: `w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] text-[var(--text-tertiary)]`,
+                children: [
+                  "Select ",
+                  field.label,
+                  "..."
+                ]
+              }
+            ),
+            filteredOptions.map((option) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange(option.value);
+                  setIsOpen(false);
+                },
+                className: `w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ${value === option.value ? "bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium" : "text-[var(--text-primary)]"}`,
+                children: option.label
+              },
+              option.value
+            )),
+            showCreateOption && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: handleCreateOption,
+                className: "w-full px-3 py-2 text-left text-sm hover:bg-[var(--info-bg)] text-brand-500 font-medium border-t border-[var(--border-subtle)] flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, {}),
+                  " Create \u201C",
+                  searchQuery.trim(),
+                  "\u201D"
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function CategorySelectField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [openUpward, setOpenUpward] = useState(false);
+  const buttonRef = React.useRef(null);
+  const { categories } = useContext(CategoriesContext);
+  const categoryKey = field.categoryKey || "menu";
+  const categoryOptions = categories[categoryKey] || [];
+  const sortedOptions = [...categoryOptions].sort(
+    (a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)
+  );
+  const selectedOption = sortedOptions.find((o) => o.value === value);
+  const handleOpen = () => {
+    if (disabled) return;
+    if (!isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      setOpenUpward(spaceBelow < 250);
+    }
+    setIsOpen(!isOpen);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        onClick: handleOpen,
+        disabled,
+        className: `w-full px-3 py-2 rounded-md border text-left flex items-center justify-between ${error ? "border-[var(--error)]" : isOpen ? "border-brand-500 ring-2 ring-brand-500" : "border-[var(--border-default)] hover:border-[var(--border-strong)]"} bg-[var(--bg-base)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: selectedOption ? "text-[var(--text-primary)]" : "text-[var(--text-tertiary)]",
+              children: selectedOption?.label || `Select ${field.label}...`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-[60]",
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `absolute z-[70] w-full bg-[var(--bg-base)] border border-[var(--border-subtle)] rounded-md shadow-lg max-h-60 overflow-y-auto ${openUpward ? "bottom-full mb-1" : "top-full mt-1"}`,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange(void 0);
+                  setIsOpen(false);
+                },
+                className: `w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] text-[var(--text-tertiary)]`,
+                children: [
+                  "Select ",
+                  field.label,
+                  "..."
+                ]
+              }
+            ),
+            sortedOptions.map((option) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange(option.value);
+                  setIsOpen(false);
+                },
+                className: `w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ${value === option.value ? "bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium" : "text-[var(--text-primary)]"}`,
+                children: option.label
+              },
+              option.value
+            ))
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function MultiSelectField({
+  field,
+  value,
+  onChange,
+  disabled
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const selectedValues = value || [];
+  const toggleOption = (optionValue) => {
+    if (selectedValues.includes(optionValue)) {
+      onChange(selectedValues.filter((v) => v !== optionValue));
+    } else {
+      onChange([...selectedValues, optionValue]);
+    }
+  };
+  const addCustom = () => {
+    const tag = inputValue.trim();
+    if (!tag) return;
+    const tagValue = tag.toLowerCase().replace(/\s+/g, "-");
+    if (!selectedValues.includes(tagValue)) {
+      onChange([...selectedValues, tagValue]);
+    }
+    setInputValue("");
+  };
+  const templateValues = new Set(field.options?.map((o) => o.value) || []);
+  const customValues = selectedValues.filter((v) => !templateValues.has(v));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      field.options?.map((option) => {
+        const isSelected = selectedValues.includes(option.value);
+        return /* @__PURE__ */ jsx(
+          OptionButton,
+          {
+            selected: isSelected,
+            onClick: () => !disabled && toggleOption(option.value),
+            disabled,
+            children: option.label
+          },
+          option.value
+        );
+      }),
+      customValues.map((cv) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: () => !disabled && toggleOption(cv),
+          disabled,
+          children: [
+            cv.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+            /* @__PURE__ */ jsx(X, {})
+          ]
+        },
+        cv
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: inputValue,
+          onChange: (e) => setInputValue(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              addCustom();
+            }
+          },
+          placeholder: `Add custom ${field.label?.toLowerCase() || "option"}...`,
+          disabled,
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { "aria-label": "Add option", onClick: addCustom, disabled: disabled || !inputValue.trim(), children: /* @__PURE__ */ jsx(Plus, { className: "size-4" }) })
+    ] })
+  ] });
+}
+export {
+  CategorySelectField,
+  MultiSelectField,
+  SelectField
+};
+//# sourceMappingURL=fields-select.js.map

package/dist/dynamic-form/fields-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/dynamic-form/fields-select.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useContext } from 'react';\nimport { type ContentFieldConfig } from '@withpotter/lib/template-types';\nimport { ChevronDown, Plus, X } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input } from '@withpotter/ui-kit';\nimport { OptionButton } from '@withpotter/ui-kit';\nimport { CategoriesContext, type FieldRendererProps } from './shared';\n\n/**\n * Choosing from a list the form already has.\n *\n * Distinct from `fields-reference`, which chooses from a list it has to go\n * and fetch. The difference is not cosmetic: everything here renders\n * synchronously from `field.options` or a context, so none of it has a\n * loading state to get wrong.\n */\n\nexport function SelectField({\n  field,\n  value,\n  onChange,\n  error,\n  disabled,\n}: FieldRendererProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [openUpward, setOpenUpward] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [customOptions, setCustomOptions] = useState<\n    { label: string; value: string }[]\n  >([]);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const allOptions = [...(field.options || []), ...customOptions];\n  const selectedOption = allOptions.find((o) => o.value === value);\n\n  const filteredOptions = searchQuery\n    ? allOptions.filter((o) =>\n        o.label.toLowerCase().includes(searchQuery.toLowerCase()),\n      )\n    : allOptions;\n\n  const handleOpen = () => {\n    if (disabled) return;\n    if (!isOpen && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      const spaceBelow = window.innerHeight - rect.bottom;\n      setOpenUpward(spaceBelow < 250);\n    }\n    setIsOpen(!isOpen);\n    setSearchQuery('');\n    // Focus the search input after opening\n    setTimeout(() => inputRef.current?.focus(), 50);\n  };\n\n  const handleCreateOption = () => {\n    const label = searchQuery.trim();\n    if (!label) return;\n    const newValue = label.toLowerCase().replace(/\\s+/g, '-');\n    // Don't create if it already exists\n    if (allOptions.some((o) => o.value === newValue)) {\n      onChange(newValue);\n    } else {\n      setCustomOptions((prev) => [...prev, { label, value: newValue }]);\n      onChange(newValue);\n    }\n    setSearchQuery('');\n    setIsOpen(false);\n  };\n\n  const showCreateOption =\n    searchQuery.trim() &&\n    !allOptions.some(\n      (o) => o.label.toLowerCase() === searchQuery.trim().toLowerCase(),\n    );\n\n  return (\n    <div className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleOpen}\n        disabled={disabled}\n        className={`w-full px-3 py-2 rounded-md border text-left flex items-center justify-between ${\n          error\n            ? 'border-[var(--error)]'\n            : isOpen\n              ? 'border-brand-500 ring-2 ring-brand-500'\n              : 'border-[var(--border-default)] hover:border-[var(--border-strong)]'\n        } bg-[var(--bg-base)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed`}\n      >\n        <span\n          className={\n            selectedOption\n              ? 'text-[var(--text-primary)]'\n              : 'text-[var(--text-tertiary)]'\n          }\n        >\n          {selectedOption?.label || `Select ${field.label}...`}\n        </span>\n        <ChevronDown\n          className={`w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? 'rotate-180' : ''}`}\n        />\n      </button>\n\n      {isOpen && (\n        <>\n          <div\n            className=\"fixed inset-0 z-[60]\"\n            onClick={() => setIsOpen(false)}\n          />\n          <div\n            className={`absolute z-[70] w-full bg-[var(--bg-base)] border border-[var(--border-subtle)] rounded-md shadow-lg max-h-60 overflow-y-auto ${\n              openUpward ? 'bottom-full mb-1' : 'top-full mt-1'\n            }`}\n          >\n            {/* Search input */}\n            <div className=\"sticky top-0 bg-[var(--bg-base)] border-b border-[var(--border-subtle)] p-2 modal-in\">\n              <Input\n                ref={inputRef}\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    e.preventDefault();\n                    if (showCreateOption) {\n                      handleCreateOption();\n                    } else if (filteredOptions.length === 1) {\n                      onChange(filteredOptions[0].value);\n                      setIsOpen(false);\n                    }\n                  }\n                }}\n                placeholder={`Search or add ${field.label?.toLowerCase() || 'option'}...`}\n              />\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => {\n                onChange(undefined);\n                setIsOpen(false);\n              }}\n              className={`w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] text-[var(--text-tertiary)]`}\n            >\n              Select {field.label}...\n            </button>\n            {filteredOptions.map((option) => (\n              <button\n                key={option.value}\n                type=\"button\"\n                onClick={() => {\n                  onChange(option.value);\n                  setIsOpen(false);\n                }}\n                className={`w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ${\n                  value === option.value\n                    ? 'bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium'\n                    : 'text-[var(--text-primary)]'\n                }`}\n              >\n                {option.label}\n              </button>\n            ))}\n            {/* Create new option */}\n            {showCreateOption && (\n              <button\n                type=\"button\"\n                onClick={handleCreateOption}\n                className=\"w-full px-3 py-2 text-left text-sm hover:bg-[var(--info-bg)] text-brand-500 font-medium border-t border-[var(--border-subtle)] flex items-center gap-2\"\n              >\n                <Plus /> Create &ldquo;\n                {searchQuery.trim()}&rdquo;\n              </button>\n            )}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n// CategorySelectField uses tenant-defined categories instead of hardcoded options\nexport function CategorySelectField({\n  field,\n  value,\n  onChange,\n  error,\n  disabled,\n}: FieldRendererProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [openUpward, setOpenUpward] = useState(false);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { categories } = useContext(CategoriesContext);\n  // Get the categoryKey from the field definition (e.g., 'menu', 'packages')\n  const categoryKey =\n    (field as ContentFieldConfig & { categoryKey?: string }).categoryKey ||\n    'menu';\n  const categoryOptions = categories[categoryKey] || [];\n  const sortedOptions = [...categoryOptions].sort(\n    (a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0),\n  );\n  const selectedOption = sortedOptions.find((o) => o.value === value);\n\n  const handleOpen = () => {\n    if (disabled) return;\n    if (!isOpen && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      const spaceBelow = window.innerHeight - rect.bottom;\n      setOpenUpward(spaceBelow < 250);\n    }\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <div className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleOpen}\n        disabled={disabled}\n        className={`w-full px-3 py-2 rounded-md border text-left flex items-center justify-between ${\n          error\n            ? 'border-[var(--error)]'\n            : isOpen\n              ? 'border-brand-500 ring-2 ring-brand-500'\n              : 'border-[var(--border-default)] hover:border-[var(--border-strong)]'\n        } bg-[var(--bg-base)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed`}\n      >\n        <span\n          className={\n            selectedOption\n              ? 'text-[var(--text-primary)]'\n              : 'text-[var(--text-tertiary)]'\n          }\n        >\n          {selectedOption?.label || `Select ${field.label}...`}\n        </span>\n        <ChevronDown\n          className={`w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? 'rotate-180' : ''}`}\n        />\n      </button>\n\n      {isOpen && (\n        <>\n          <div\n            className=\"fixed inset-0 z-[60]\"\n            onClick={() => setIsOpen(false)}\n          />\n          <div\n            className={`absolute z-[70] w-full bg-[var(--bg-base)] border border-[var(--border-subtle)] rounded-md shadow-lg max-h-60 overflow-y-auto ${\n              openUpward ? 'bottom-full mb-1' : 'top-full mt-1'\n            }`}\n          >\n            <button\n              type=\"button\"\n              onClick={() => {\n                onChange(undefined);\n                setIsOpen(false);\n              }}\n              className={`w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] text-[var(--text-tertiary)]`}\n            >\n              Select {field.label}...\n            </button>\n            {sortedOptions.map((option) => (\n              <button\n                key={option.value}\n                type=\"button\"\n                onClick={() => {\n                  onChange(option.value);\n                  setIsOpen(false);\n                }}\n                className={`w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ${\n                  value === option.value\n                    ? 'bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium'\n                    : 'text-[var(--text-primary)]'\n                }`}\n              >\n                {option.label}\n              </button>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport function MultiSelectField({\n  field,\n  value,\n  onChange,\n  disabled,\n}: FieldRendererProps) {\n  const [inputValue, setInputValue] = useState('');\n  const selectedValues = (value as string[]) || [];\n\n  const toggleOption = (optionValue: string) => {\n    if (selectedValues.includes(optionValue)) {\n      onChange(selectedValues.filter((v) => v !== optionValue));\n    } else {\n      onChange([...selectedValues, optionValue]);\n    }\n  };\n\n  const addCustom = () => {\n    const tag = inputValue.trim();\n    if (!tag) return;\n    // Use lowercase slug as value\n    const tagValue = tag.toLowerCase().replace(/\\s+/g, '-');\n    if (!selectedValues.includes(tagValue)) {\n      onChange([...selectedValues, tagValue]);\n    }\n    setInputValue('');\n  };\n\n  // Merge template options + any custom values not in template\n  const templateValues = new Set(field.options?.map((o) => o.value) || []);\n  const customValues = selectedValues.filter((v) => !templateValues.has(v));\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex flex-wrap gap-2\">\n        {field.options?.map((option) => {\n          const isSelected = selectedValues.includes(option.value);\n          return (\n            <OptionButton\n              key={option.value}\n              selected={isSelected}\n              onClick={() => !disabled && toggleOption(option.value)}\n              disabled={disabled}\n            >\n              {option.label}\n            </OptionButton>\n          );\n        })}\n        {customValues.map((cv) => (\n          <Button\n            key={cv}\n            onClick={() => !disabled && toggleOption(cv)}\n            disabled={disabled}\n          >\n            {cv.replace(/-/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase())}\n            <X />\n          </Button>\n        ))}\n      </div>\n      {/* Add custom option */}\n      <div className=\"flex gap-2\">\n        <Input\n          type=\"text\"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              addCustom();\n            }\n          }}\n          placeholder={`Add custom ${field.label?.toLowerCase() || 'option'}...`}\n          disabled={disabled}\n          className=\"flex-1\"\n        />\n        <Button aria-label=\"Add option\" onClick={addCustom} disabled={disabled || !inputValue.trim()}>\n          <Plus className=\"size-4\" />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dynamic-form/index.d.ts

@@ -0,0 +1,27 @@
+import { type ContentFieldConfig, type FieldGroup } from '@withpotter/lib/template-types';
+import { ImageUploadProvider, useImageUpload, getCurrencySymbol, CURRENCY_SYMBOLS, getNestedValue, setNestedValue, type CategoryOption } from './shared';
+/**
+ * The form: a group is a section, a field is a renderer, and which renderer is
+ * one switch in `FieldRenderer`.
+ *
+ * This file was 2,632 lines with twenty-five renderers inlined above the
+ * switch. They are siblings in this folder now and the shell only has to know
+ * their names. Everything importers used — `getCurrencySymbol`,
+ * `useImageUpload`, `ImageUploadProvider`, the nested-path helpers — is
+ * re-exported below, so `@withpotter/components/dynamic-form` still resolves for all
+ * fifteen of them and no call site changed.
+ */
+interface DynamicFormProps {
+    fields: ContentFieldConfig[];
+    fieldGroups?: FieldGroup[];
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    errors?: Record<string, string>;
+    disabled?: boolean;
+    currencyCode?: string;
+    tenantCategories?: Record<string, CategoryOption[]>;
+    tenantSlug?: string;
+    contentTypeSchemas?: Record<string, ContentFieldConfig[]>;
+}
+export declare function DynamicForm({ fields, fieldGroups, values, onChange, errors, disabled, currencyCode, tenantCategories, tenantSlug, contentTypeSchemas, }: DynamicFormProps): import("react").JSX.Element;
+export { getNestedValue, setNestedValue, getCurrencySymbol, CURRENCY_SYMBOLS, ImageUploadProvider, useImageUpload, };