@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,189 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@withpotter/ui-kit/select";
+import { CurrencyInput } from "@withpotter/ui-kit/currency-input";
+import { BlockedDatesField } from "./blocked-dates-field";
+import { useRentableSiblings } from "./use-rentable-siblings";
+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 RentableConfigPanel({
+  config,
+  onChange,
+  labelOverrides,
+  currencySymbol = "$",
+  productId
+}) {
+  const { siblings } = useRentableSiblings(productId);
+  const fl = (name, def) => labelOverrides?.fields?.[name] || def;
+  const update = (partial) => onChange({ ...config, ...partial });
+  const model = config.pricingModel || "per-night";
+  const unit = model === "per-hour" ? "hour" : "night";
+  const unitPlural = `${unit}s`;
+  const hasLengthRules = model !== "flat-rate";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("pricingModel", "Pricing model") }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: config.pricingModel || "per-night",
+            onChange: (value) => update({
+              pricingModel: value
+            }),
+            options: [
+              { value: "per-night", label: "Per night" },
+              { value: "per-hour", label: "Per hour" },
+              { value: "flat-rate", label: "Flat rate" }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("availableUnits", "Available units") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            min: 1,
+            value: config.availableUnits ?? "",
+            onChange: (e) => update({
+              availableUnits: e.target.value ? parseInt(e.target.value) : void 0
+            }),
+            placeholder: "1"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: HELP_CLS, children: "How many interchangeable copies you let. Eight identical studios are one listing with eight units." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("surchargeWeekend", "Weekend surcharge") }),
+        /* @__PURE__ */ jsx(
+          CurrencyInput,
+          {
+            value: config.surchargeWeekend,
+            onChange: (val) => update({ surchargeWeekend: val }),
+            prefix: currencySymbol,
+            placeholder: "0"
+          }
+        ),
+        /* @__PURE__ */ jsxs("p", { className: HELP_CLS, children: [
+          "Extra charge for each Fri/Sat ",
+          unit,
+          "."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("cleaningFee", "Cleaning fee") }),
+        /* @__PURE__ */ jsx(
+          CurrencyInput,
+          {
+            value: config.cleaningFee,
+            onChange: (val) => update({ cleaningFee: val }),
+            prefix: currencySymbol,
+            placeholder: "0"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("securityDeposit", "Security deposit") }),
+        /* @__PURE__ */ jsx(
+          CurrencyInput,
+          {
+            value: config.securityDeposit,
+            onChange: (val) => update({ securityDeposit: val }),
+            prefix: currencySymbol,
+            placeholder: "0"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: HELP_CLS, children: "Charged with the booking and held until you release it at checkout." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("maxGuests", "Max guests") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            min: 1,
+            value: config.maxGuests ?? "",
+            onChange: (e) => update({
+              maxGuests: e.target.value ? parseInt(e.target.value) : void 0
+            }),
+            placeholder: "4"
+          }
+        )
+      ] })
+    ] }),
+    siblings.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("partOf", "Part of") }),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: config.partOf || "",
+          onChange: (value) => update({ partOf: value || void 0 }),
+          options: [
+            { value: "", label: "Let on its own" },
+            ...siblings.map((sibling) => ({
+              value: sibling.id,
+              label: sibling.title
+            }))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: HELP_CLS, children: "The larger thing this is inside. Letting either one takes the other, so the same Saturday cannot be sold twice." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      BlockedDatesField,
+      {
+        dates: config.blockedDates ?? [],
+        onChange: (blockedDates) => update({
+          blockedDates: blockedDates.length ? blockedDates : void 0
+        }),
+        label: fl("blockedDates", "Closed dates"),
+        unit
+      }
+    ),
+    hasLengthRules && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("minUnits", `Minimum ${unitPlural}`) }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            min: 1,
+            value: config.minUnits ?? "",
+            onChange: (e) => update({
+              minUnits: e.target.value ? parseInt(e.target.value) : void 0
+            }),
+            placeholder: "1"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: HELP_CLS, children: "Shortest booking you accept. Bookings under this are turned away." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: fl("maxUnits", `Maximum ${unitPlural}`) }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            min: 1,
+            value: config.maxUnits ?? "",
+            onChange: (e) => update({
+              maxUnits: e.target.value ? parseInt(e.target.value) : void 0
+            }),
+            placeholder: "No limit"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: HELP_CLS, children: "Leave empty for no limit." })
+      ] })
+    ] })
+  ] });
+}
+export {
+  RentableConfigPanel
+};
+//# sourceMappingURL=rentable-config-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/behaviors/rentable-config-panel.tsx"],"sourcesContent":["'use client';\n\nimport type { RentableConfig } from '@withpotter/lib/product-types';\nimport type { BehaviorLabelOverrides } from './behavior-config-section';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { CurrencyInput } from '@withpotter/ui-kit/currency-input';\nimport { BlockedDatesField } from './blocked-dates-field';\nimport { useRentableSiblings } from './use-rentable-siblings';\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 RentableConfigPanelProps {\n  config: RentableConfig;\n  onChange: (config: RentableConfig) => void;\n  labelOverrides?: BehaviorLabelOverrides['rentable'];\n  currencySymbol?: string;\n  /** This listing, so it cannot be made a part of itself. */\n  productId?: string;\n}\n\nexport function RentableConfigPanel({\n  config,\n  onChange,\n  labelOverrides,\n  currencySymbol = '$',\n  productId,\n}: RentableConfigPanelProps) {\n  const { siblings } = useRentableSiblings(productId);\n  const fl = (name: string, def: string) =>\n    labelOverrides?.fields?.[name] || def;\n\n  const update = (partial: Partial<RentableConfig>) =>\n    onChange({ ...config, ...partial });\n\n  // Every rule below is counted in whatever this thing is let by, so the\n  // labels say so. A hall asked for a \"2-night minimum\" would be a hall\n  // asking the wrong question.\n  const model = config.pricingModel || 'per-night';\n  const unit = model === 'per-hour' ? 'hour' : 'night';\n  const unitPlural = `${unit}s`;\n  const hasLengthRules = model !== 'flat-rate';\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"grid grid-cols-2 gap-4\">\n        <div>\n          <label className={LABEL_CLS}>\n            {fl('pricingModel', 'Pricing model')}\n          </label>\n          <Select\n            value={config.pricingModel || 'per-night'}\n            onChange={(value) =>\n              update({\n                pricingModel: value as RentableConfig['pricingModel'],\n              })\n            }\n            options={[\n              { value: 'per-night', label: 'Per night' },\n              { value: 'per-hour', label: 'Per hour' },\n              { value: 'flat-rate', label: 'Flat rate' },\n            ]}\n          />\n        </div>\n        <div>\n          <label className={LABEL_CLS}>\n            {fl('availableUnits', 'Available units')}\n          </label>\n          <Input\n            type=\"number\"\n            min={1}\n            value={config.availableUnits ?? ''}\n            onChange={(e) =>\n              update({\n                availableUnits: e.target.value\n                  ? parseInt(e.target.value)\n                  : undefined,\n              })\n            }\n            placeholder=\"1\"\n          />\n          <p className={HELP_CLS}>\n            How many interchangeable copies you let. Eight identical studios are\n            one listing with eight units.\n          </p>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-2 gap-4\">\n        <div>\n          <label className={LABEL_CLS}>\n            {fl('surchargeWeekend', 'Weekend surcharge')}\n          </label>\n          <CurrencyInput\n            value={config.surchargeWeekend}\n            onChange={(val) => update({ surchargeWeekend: val })}\n            prefix={currencySymbol}\n            placeholder=\"0\"\n          />\n          <p className={HELP_CLS}>Extra charge for each Fri/Sat {unit}.</p>\n        </div>\n        <div>\n          <label className={LABEL_CLS}>\n            {fl('cleaningFee', 'Cleaning fee')}\n          </label>\n          <CurrencyInput\n            value={config.cleaningFee}\n            onChange={(val) => update({ cleaningFee: val })}\n            prefix={currencySymbol}\n            placeholder=\"0\"\n          />\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-2 gap-4\">\n        <div>\n          <label className={LABEL_CLS}>\n            {fl('securityDeposit', 'Security deposit')}\n          </label>\n          <CurrencyInput\n            value={config.securityDeposit}\n            onChange={(val) => update({ securityDeposit: val })}\n            prefix={currencySymbol}\n            placeholder=\"0\"\n          />\n          <p className={HELP_CLS}>\n            Charged with the booking and held until you release it at checkout.\n          </p>\n        </div>\n        <div>\n          <label className={LABEL_CLS}>{fl('maxGuests', 'Max guests')}</label>\n          <Input\n            type=\"number\"\n            min={1}\n            value={config.maxGuests ?? ''}\n            onChange={(e) =>\n              update({\n                maxGuests: e.target.value\n                  ? parseInt(e.target.value)\n                  : undefined,\n              })\n            }\n            placeholder=\"4\"\n          />\n        </div>\n      </div>\n\n      {/* Which building this belongs to.\n          A house let both whole and by the room is one physical thing sold\n          under several names. Without this link every listing keeps a private\n          calendar, so hiring the whole house leaves each room inside it still\n          on sale for the same Saturday. */}\n      {siblings.length > 0 && (\n        <div>\n          <label className={LABEL_CLS}>{fl('partOf', 'Part of')}</label>\n          <Select\n            value={config.partOf || ''}\n            onChange={(value) => update({ partOf: value || undefined })}\n            options={[\n              { value: '', label: 'Let on its own' },\n              ...siblings.map((sibling) => ({\n                value: sibling.id,\n                label: sibling.title,\n              })),\n            ]}\n          />\n          <p className={HELP_CLS}>\n            The larger thing this is inside. Letting either one takes the other,\n            so the same Saturday cannot be sold twice.\n          </p>\n        </div>\n      )}\n\n      {/* Dates the owner has shut. */}\n      <BlockedDatesField\n        dates={config.blockedDates ?? []}\n        onChange={(blockedDates) =>\n          update({\n            blockedDates: blockedDates.length ? blockedDates : undefined,\n          })\n        }\n        label={fl('blockedDates', 'Closed dates')}\n        unit={unit}\n      />\n\n      {hasLengthRules && (\n        <div className=\"grid grid-cols-2 gap-4\">\n          <div>\n            <label className={LABEL_CLS}>\n              {fl('minUnits', `Minimum ${unitPlural}`)}\n            </label>\n            <Input\n              type=\"number\"\n              min={1}\n              value={config.minUnits ?? ''}\n              onChange={(e) =>\n                update({\n                  minUnits: e.target.value\n                    ? parseInt(e.target.value)\n                    : undefined,\n                })\n              }\n              placeholder=\"1\"\n            />\n            <p className={HELP_CLS}>\n              Shortest booking you accept. Bookings under this are turned away.\n            </p>\n          </div>\n          <div>\n            <label className={LABEL_CLS}>\n              {fl('maxUnits', `Maximum ${unitPlural}`)}\n            </label>\n            <Input\n              type=\"number\"\n              min={1}\n              value={config.maxUnits ?? ''}\n              onChange={(e) =>\n                update({\n                  maxUnits: e.target.value\n                    ? parseInt(e.target.value)\n                    : undefined,\n                })\n              }\n              placeholder=\"No limit\"\n            />\n            <p className={HELP_CLS}>Leave empty for no limit.</p>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/behaviors/resource-requirements-section.d.ts

@@ -0,0 +1,16 @@
+import type { BookableConfig } from '@withpotter/lib/product-types';
+import type { ContentResourceRequirementItem } from '@withpotter/lib/resource-types';
+interface ResourceCategoryOption {
+    id: string;
+    label: string;
+    labelPlural: string;
+    kind: string;
+}
+interface ResourceRequirementsSectionProps {
+    config: BookableConfig;
+    categories: ResourceCategoryOption[];
+    requirements: ContentResourceRequirementItem[];
+    onChange: (requirements: ContentResourceRequirementItem[]) => void;
+}
+export declare function ResourceRequirementsSection({ config, categories, requirements, onChange, }: ResourceRequirementsSectionProps): import("react").JSX.Element;
+export {};

package/dist/behaviors/resource-requirements-section.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Select } from "@withpotter/ui-kit/select";
+import { EligibleResourcesPicker } from "./eligible-resources-picker";
+const INPUT_CLS = "w-full rounded-[1px] border border-[var(--border-default)] px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-brand-500";
+const LABEL_CLS = "mb-1 block text-sm font-medium text-[var(--text-secondary)]";
+function ResourceRequirementsSection({
+  config,
+  categories,
+  requirements,
+  onChange
+}) {
+  const [expandedId, setExpandedId] = useState(null);
+  const additionalCategories = categories.filter(
+    (category) => category.kind !== "person"
+  );
+  const toggle = (categoryId) => {
+    const exists = requirements.some((item) => item.categoryId === categoryId);
+    if (exists) {
+      onChange(requirements.filter((item) => item.categoryId !== categoryId));
+      if (expandedId === categoryId) setExpandedId(null);
+      return;
+    }
+    onChange([
+      ...requirements,
+      { categoryId, isRequired: true, requiredSkills: [] }
+    ]);
+  };
+  const update = (categoryId, partial) => {
+    onChange(
+      requirements.map(
+        (item) => item.categoryId === categoryId ? { ...item, ...partial } : item
+      )
+    );
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "border-t border-[var(--border-default)] pt-4", children: [
+    /* @__PURE__ */ jsx("h4", { className: "mb-1 text-sm font-semibold text-[var(--text-primary)]", children: "Rooms and equipment" }),
+    /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-[var(--text-muted)]", children: "Add a room or equipment that must be available for each booking." }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: additionalCategories.map((category) => {
+      const requirement = requirements.find(
+        (item) => item.categoryId === category.id
+      );
+      const selected = Boolean(requirement);
+      const expanded = expandedId === category.id;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `border transition-colors ${selected ? "border-brand-500 bg-[var(--accent-secondary)]/5" : "border-[var(--border-default)]"}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [
+              /* @__PURE__ */ jsxs("label", { className: "flex flex-1 cursor-pointer items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: selected,
+                    onChange: () => toggle(category.id),
+                    className: "h-4 w-4 border-[var(--border-default)] text-brand-500 focus:ring-brand-500"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: [
+                  category.label,
+                  /* @__PURE__ */ jsx("span", { className: "ml-1.5 font-normal text-[var(--text-muted)]", children: category.kind })
+                ] })
+              ] }),
+              selected && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setExpandedId(expanded ? null : category.id),
+                  className: "text-xs text-brand-500 hover:text-brand-600",
+                  children: expanded ? "Hide options" : "Options"
+                }
+              )
+            ] }),
+            selected && expanded && requirement && /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-[var(--border-default)] px-3 pb-3 pt-3", children: [
+              /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "switch",
+                    "aria-checked": requirement.isRequired ?? true,
+                    onClick: () => update(category.id, {
+                      isRequired: !(requirement.isRequired ?? true)
+                    }),
+                    className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors ${requirement.isRequired ?? true ? "bg-brand-500" : "bg-[var(--bg-muted)]"}`,
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `inline-block h-3.5 w-3.5 transform rounded-full bg-[var(--bg-base)] transition-transform ${requirement.isRequired ?? true ? "translate-x-4" : "translate-x-0.5"}`
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-secondary)]", children: "Required for every booking" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: "Assignment strategy override" }),
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: requirement.assignmentStrategy || "",
+                    onChange: (value) => update(category.id, {
+                      assignmentStrategy: value || void 0
+                    }),
+                    options: [
+                      {
+                        value: "",
+                        label: `Use default (${config.assignmentStrategy || "auto-first"})`
+                      },
+                      {
+                        value: "auto-first",
+                        label: "Auto - first available"
+                      },
+                      { value: "auto-best", label: "Auto - best match" },
+                      {
+                        value: "customer-chooses",
+                        label: "Customer chooses"
+                      },
+                      { value: "round-robin", label: "Round robin" },
+                      { value: "pool", label: "Pool" }
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: LABEL_CLS, children: "Required skills (comma-separated)" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: (requirement.requiredSkills || []).join(", "),
+                    onChange: (event) => update(category.id, {
+                      requiredSkills: event.target.value.split(",").map((skill) => skill.trim()).filter(Boolean)
+                    }),
+                    placeholder: "e.g. massage, deep-tissue",
+                    className: INPUT_CLS
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--text-muted)]", children: "Selected resources must also match these skills." })
+              ] }),
+              category.kind !== "person" && /* @__PURE__ */ jsx(
+                EligibleResourcesPicker,
+                {
+                  categoryId: category.id,
+                  selectedIds: requirement.eligibleResourceIds,
+                  onChange: (eligibleResourceIds) => update(category.id, { eligibleResourceIds })
+                }
+              )
+            ] })
+          ]
+        },
+        category.id
+      );
+    }) })
+  ] });
+}
+export {
+  ResourceRequirementsSection
+};
+//# sourceMappingURL=resource-requirements-section.js.map

package/dist/behaviors/resource-requirements-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/behaviors/resource-requirements-section.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport type { BookableConfig } from '@withpotter/lib/product-types';\nimport type {\n  AssignmentStrategy,\n  ContentResourceRequirementItem,\n} from '@withpotter/lib/resource-types';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { EligibleResourcesPicker } from './eligible-resources-picker';\n\ninterface ResourceCategoryOption {\n  id: string;\n  label: string;\n  labelPlural: string;\n  kind: string;\n}\n\ninterface ResourceRequirementsSectionProps {\n  config: BookableConfig;\n  categories: ResourceCategoryOption[];\n  requirements: ContentResourceRequirementItem[];\n  onChange: (requirements: ContentResourceRequirementItem[]) => void;\n}\n\nconst INPUT_CLS =\n  'w-full rounded-[1px] border border-[var(--border-default)] px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-brand-500';\nconst LABEL_CLS = 'mb-1 block text-sm font-medium text-[var(--text-secondary)]';\n\nexport function ResourceRequirementsSection({\n  config,\n  categories,\n  requirements,\n  onChange,\n}: ResourceRequirementsSectionProps) {\n  const [expandedId, setExpandedId] = useState<string | null>(null);\n  const additionalCategories = categories.filter(\n    (category) => category.kind !== 'person',\n  );\n\n  const toggle = (categoryId: string) => {\n    const exists = requirements.some((item) => item.categoryId === categoryId);\n    if (exists) {\n      onChange(requirements.filter((item) => item.categoryId !== categoryId));\n      if (expandedId === categoryId) setExpandedId(null);\n      return;\n    }\n    onChange([\n      ...requirements,\n      { categoryId, isRequired: true, requiredSkills: [] },\n    ]);\n  };\n\n  const update = (\n    categoryId: string,\n    partial: Partial<ContentResourceRequirementItem>,\n  ) => {\n    onChange(\n      requirements.map((item) =>\n        item.categoryId === categoryId ? { ...item, ...partial } : item,\n      ),\n    );\n  };\n\n  return (\n    <section className=\"border-t border-[var(--border-default)] pt-4\">\n      <h4 className=\"mb-1 text-sm font-semibold text-[var(--text-primary)]\">\n        Rooms and equipment\n      </h4>\n      <p className=\"mb-3 text-xs text-[var(--text-muted)]\">\n        Add a room or equipment that must be available for each booking.\n      </p>\n\n      <div className=\"space-y-2\">\n        {additionalCategories.map((category) => {\n          const requirement = requirements.find(\n            (item) => item.categoryId === category.id,\n          );\n          const selected = Boolean(requirement);\n          const expanded = expandedId === category.id;\n\n          return (\n            <div\n              key={category.id}\n              className={`border transition-colors ${\n                selected\n                  ? 'border-brand-500 bg-[var(--accent-secondary)]/5'\n                  : 'border-[var(--border-default)]'\n              }`}\n            >\n              <div className=\"flex items-center justify-between px-3 py-3\">\n                <label className=\"flex flex-1 cursor-pointer items-center gap-3\">\n                  <input\n                    type=\"checkbox\"\n                    checked={selected}\n                    onChange={() => toggle(category.id)}\n                    className=\"h-4 w-4 border-[var(--border-default)] text-brand-500 focus:ring-brand-500\"\n                  />\n                  <span className=\"text-sm font-medium text-[var(--text-primary)]\">\n                    {category.label}\n                    <span className=\"ml-1.5 font-normal text-[var(--text-muted)]\">\n                      {category.kind}\n                    </span>\n                  </span>\n                </label>\n\n                {selected && (\n                  <button\n                    type=\"button\"\n                    onClick={() => setExpandedId(expanded ? null : category.id)}\n                    className=\"text-xs text-brand-500 hover:text-brand-600\"\n                  >\n                    {expanded ? 'Hide options' : 'Options'}\n                  </button>\n                )}\n              </div>\n\n              {selected && expanded && requirement && (\n                <div className=\"space-y-3 border-t border-[var(--border-default)] px-3 pb-3 pt-3\">\n                  <label className=\"flex cursor-pointer items-center gap-3\">\n                    <button\n                      type=\"button\"\n                      role=\"switch\"\n                      aria-checked={requirement.isRequired ?? true}\n                      onClick={() =>\n                        update(category.id, {\n                          isRequired: !(requirement.isRequired ?? true),\n                        })\n                      }\n                      className={`relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors ${\n                        (requirement.isRequired ?? true)\n                          ? 'bg-brand-500'\n                          : 'bg-[var(--bg-muted)]'\n                      }`}\n                    >\n                      <span\n                        className={`inline-block h-3.5 w-3.5 transform rounded-full bg-[var(--bg-base)] transition-transform ${\n                          (requirement.isRequired ?? true)\n                            ? 'translate-x-4'\n                            : 'translate-x-0.5'\n                        }`}\n                      />\n                    </button>\n                    <span className=\"text-sm text-[var(--text-secondary)]\">\n                      Required for every booking\n                    </span>\n                  </label>\n\n                  <div>\n                    <label className={LABEL_CLS}>\n                      Assignment strategy override\n                    </label>\n                    <Select\n                      value={requirement.assignmentStrategy || ''}\n                      onChange={(value) =>\n                        update(category.id, {\n                          assignmentStrategy: (value || undefined) as\n                            AssignmentStrategy | undefined,\n                        })\n                      }\n                      options={[\n                        {\n                          value: '',\n                          label: `Use default (${config.assignmentStrategy || 'auto-first'})`,\n                        },\n                        {\n                          value: 'auto-first',\n                          label: 'Auto - first available',\n                        },\n                        { value: 'auto-best', label: 'Auto - best match' },\n                        {\n                          value: 'customer-chooses',\n                          label: 'Customer chooses',\n                        },\n                        { value: 'round-robin', label: 'Round robin' },\n                        { value: 'pool', label: 'Pool' },\n                      ]}\n                    />\n                  </div>\n\n                  <div>\n                    <label className={LABEL_CLS}>\n                      Required skills (comma-separated)\n                    </label>\n                    <input\n                      type=\"text\"\n                      value={(requirement.requiredSkills || []).join(', ')}\n                      onChange={(event) =>\n                        update(category.id, {\n                          requiredSkills: event.target.value\n                            .split(',')\n                            .map((skill) => skill.trim())\n                            .filter(Boolean),\n                        })\n                      }\n                      placeholder=\"e.g. massage, deep-tissue\"\n                      className={INPUT_CLS}\n                    />\n                    <p className=\"mt-1 text-xs text-[var(--text-muted)]\">\n                      Selected resources must also match these skills.\n                    </p>\n                  </div>\n\n                  {category.kind !== 'person' && (\n                    <EligibleResourcesPicker\n                      categoryId={category.id}\n                      selectedIds={requirement.eligibleResourceIds}\n                      onChange={(eligibleResourceIds) =>\n                        update(category.id, { eligibleResourceIds })\n                      }\n                    />\n                  )}\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/behaviors/service-staffing-section.d.ts

@@ -0,0 +1,17 @@
+import type { BookableConfig } from '@withpotter/lib/product-types';
+import type { ContentResourceRequirementItem } from '@withpotter/lib/resource-types';
+interface ResourceCategoryOption {
+    id: string;
+    label: string;
+    labelPlural: string;
+    kind: string;
+}
+interface ServiceStaffingSectionProps {
+    config: BookableConfig;
+    resourceCategories: ResourceCategoryOption[];
+    resourceRequirements: ContentResourceRequirementItem[];
+    onConfigChange: (config: BookableConfig) => void;
+    onResourceRequirementsChange: (requirements: ContentResourceRequirementItem[]) => void;
+}
+export declare function ServiceStaffingSection({ config, resourceCategories, resourceRequirements, onConfigChange, onResourceRequirementsChange, }: ServiceStaffingSectionProps): import("react").JSX.Element;
+export {};

package/dist/behaviors/service-staffing-section.js

@@ -0,0 +1,78 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@withpotter/ui-kit";
+import { Button } from "@withpotter/ui-kit/button";
+import { Select } from "@withpotter/ui-kit/select";
+import { ResourceRequirementsSection } from "./resource-requirements-section";
+import { StaffAssignmentSection } from "./staff-assignment-section";
+function ServiceStaffingSection({
+  config,
+  resourceCategories,
+  resourceRequirements,
+  onConfigChange,
+  onResourceRequirementsChange
+}) {
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const hasAdditionalResources = resourceCategories.some(
+    (category) => category.kind !== "person"
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      StaffAssignmentSection,
+      {
+        resourceCategories,
+        resourceRequirements,
+        assignmentStrategy: config.assignmentStrategy,
+        onChange: onResourceRequirementsChange,
+        onAssignmentStrategyChange: (assignmentStrategy) => onConfigChange({ ...config, assignmentStrategy }),
+        advancedSelected: showAdvanced,
+        onAdvancedChange: setShowAdvanced
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open: showAdvanced, onOpenChange: setShowAdvanced, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-sm", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Custom assignment" }) }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: config.assignmentStrategy || "auto-first",
+          onChange: (value) => onConfigChange({
+            ...config,
+            assignmentStrategy: value
+          }),
+          options: [
+            { value: "auto-first", label: "First available" },
+            { value: "auto-best", label: "Best match by skills" },
+            { value: "customer-chooses", label: "Customer chooses" },
+            { value: "round-robin", label: "Round robin" },
+            { value: "pool", label: "Any available member" }
+          ],
+          ariaLabel: "Assignment method",
+          inset: true,
+          triggerClassName: "!bg-[var(--bg-muted)]",
+          portalToBody: true
+        }
+      ) }),
+      hasAdditionalResources && /* @__PURE__ */ jsx(
+        ResourceRequirementsSection,
+        {
+          config,
+          categories: resourceCategories,
+          requirements: resourceRequirements,
+          onChange: onResourceRequirementsChange
+        }
+      ),
+      /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { onClick: () => setShowAdvanced(false), children: "Done" }) })
+    ] }) })
+  ] });
+}
+export {
+  ServiceStaffingSection
+};
+//# sourceMappingURL=service-staffing-section.js.map

package/dist/behaviors/service-staffing-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/behaviors/service-staffing-section.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport type { BookableConfig } from '@withpotter/lib/product-types';\nimport type { ContentResourceRequirementItem } from '@withpotter/lib/resource-types';\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@withpotter/ui-kit';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { ResourceRequirementsSection } from './resource-requirements-section';\nimport { StaffAssignmentSection } from './staff-assignment-section';\n\ninterface ResourceCategoryOption {\n  id: string;\n  label: string;\n  labelPlural: string;\n  kind: string;\n}\n\ninterface ServiceStaffingSectionProps {\n  config: BookableConfig;\n  resourceCategories: ResourceCategoryOption[];\n  resourceRequirements: ContentResourceRequirementItem[];\n  onConfigChange: (config: BookableConfig) => void;\n  onResourceRequirementsChange: (\n    requirements: ContentResourceRequirementItem[],\n  ) => void;\n}\n\nexport function ServiceStaffingSection({\n  config,\n  resourceCategories,\n  resourceRequirements,\n  onConfigChange,\n  onResourceRequirementsChange,\n}: ServiceStaffingSectionProps) {\n  const [showAdvanced, setShowAdvanced] = useState(false);\n  const hasAdditionalResources = resourceCategories.some(\n    (category) => category.kind !== 'person',\n  );\n\n  return (\n    <>\n      <StaffAssignmentSection\n        resourceCategories={resourceCategories}\n        resourceRequirements={resourceRequirements}\n        assignmentStrategy={config.assignmentStrategy}\n        onChange={onResourceRequirementsChange}\n        onAssignmentStrategyChange={(assignmentStrategy) =>\n          onConfigChange({ ...config, assignmentStrategy })\n        }\n        advancedSelected={showAdvanced}\n        onAdvancedChange={setShowAdvanced}\n      />\n\n      <Dialog open={showAdvanced} onOpenChange={setShowAdvanced}>\n        <DialogContent className=\"max-w-sm\">\n          <DialogHeader>\n            <DialogTitle>Custom assignment</DialogTitle>\n          </DialogHeader>\n          <div>\n            <Select\n              value={config.assignmentStrategy || 'auto-first'}\n              onChange={(value) =>\n                onConfigChange({\n                  ...config,\n                  assignmentStrategy:\n                    value as BookableConfig['assignmentStrategy'],\n                })\n              }\n              options={[\n                { value: 'auto-first', label: 'First available' },\n                { value: 'auto-best', label: 'Best match by skills' },\n                { value: 'customer-chooses', label: 'Customer chooses' },\n                { value: 'round-robin', label: 'Round robin' },\n                { value: 'pool', label: 'Any available member' },\n              ]}\n              ariaLabel=\"Assignment method\"\n              inset\n              triggerClassName=\"!bg-[var(--bg-muted)]\"\n              portalToBody\n            />\n          </div>\n          {hasAdditionalResources && (\n            <ResourceRequirementsSection\n              config={config}\n              categories={resourceCategories}\n              requirements={resourceRequirements}\n              onChange={onResourceRequirementsChange}\n            />\n          )}\n          <DialogFooter>\n            <Button onClick={() => setShowAdvanced(false)}>Done</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"mappings":";AA+CI,mBACE,KAaE,YAdJ;AA7CJ,SAAS,gBAAgB;AAGzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAmBhC,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,yBAAyB,mBAAmB;AAAA,IAChD,CAAC,aAAa,SAAS,SAAS;AAAA,EAClC;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,oBAAoB,OAAO;AAAA,QAC3B,UAAU;AAAA,QACV,4BAA4B,CAAC,uBAC3B,eAAe,EAAE,GAAG,QAAQ,mBAAmB,CAAC;AAAA,QAElD,kBAAkB;AAAA,QAClB,kBAAkB;AAAA;AAAA,IACpB;AAAA,IAEA,oBAAC,UAAO,MAAM,cAAc,cAAc,iBACxC,+BAAC,iBAAc,WAAU,YACvB;AAAA,0BAAC,gBACC,8BAAC,eAAY,+BAAiB,GAChC;AAAA,MACA,oBAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,OAAO,sBAAsB;AAAA,UACpC,UAAU,CAAC,UACT,eAAe;AAAA,YACb,GAAG;AAAA,YACH,oBACE;AAAA,UACJ,CAAC;AAAA,UAEH,SAAS;AAAA,YACP,EAAE,OAAO,cAAc,OAAO,kBAAkB;AAAA,YAChD,EAAE,OAAO,aAAa,OAAO,uBAAuB;AAAA,YACpD,EAAE,OAAO,oBAAoB,OAAO,mBAAmB;AAAA,YACvD,EAAE,OAAO,eAAe,OAAO,cAAc;AAAA,YAC7C,EAAE,OAAO,QAAQ,OAAO,uBAAuB;AAAA,UACjD;AAAA,UACA,WAAU;AAAA,UACV,OAAK;AAAA,UACL,kBAAiB;AAAA,UACjB,cAAY;AAAA;AAAA,MACd,GACF;AAAA,MACC,0BACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,UAAU;AAAA;AAAA,MACZ;AAAA,MAEF,oBAAC,gBACC,8BAAC,UAAO,SAAS,MAAM,gBAAgB,KAAK,GAAG,kBAAI,GACrD;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

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

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