@withpotter/components 0.13.0-next.101

package/dist/features/product-form/behaviors-step.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/product-form/behaviors-step.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { BookableConfigPanel } from '@withpotter/components/behaviors/bookable-config-panel';\nimport {\n  BehaviorConfigSection,\n  type BehaviorKey,\n  type BehaviorLabelOverrides,\n} from '@withpotter/components/behaviors/behavior-config-section';\nimport { DownloadableConfigPanel } from '@withpotter/components/behaviors/downloadable-config-panel';\nimport { GatingConfigSection } from '@withpotter/components/behaviors/gating-config-section';\nimport { RentableConfigPanel } from '@withpotter/components/behaviors/rentable-config-panel';\nimport { ShippableConfigPanel } from '@withpotter/components/behaviors/shippable-config-panel';\nimport { SubscribableConfigPanel } from '@withpotter/components/behaviors/subscribable-config-panel';\nimport { TicketedConfigPanel } from '@withpotter/components/behaviors/ticketed-config-panel';\nimport type { FormStep } from '@withpotter/ui-kit/form-stepper-panel';\nimport type { MerchantPlan } from '@withpotter/lib/api/types';\nimport type { ContentResourceRequirementItem } from '@withpotter/lib/resource-types';\nimport {\n  getBehaviorConfig,\n  isBehaviorEnabled,\n  type BookableConfig,\n  type DownloadableConfig,\n  type ProductBehaviors,\n  type RentableConfig,\n  type ShippableConfig,\n  type SubscribableConfig,\n  type TicketedConfig,\n} from '@withpotter/lib/product-types';\n\ninterface BehaviorsStepProps {\n  behaviorConfigs: ProductBehaviors;\n  setBehaviorConfigs: (behaviors: ProductBehaviors) => void;\n  behaviorLabelOverrides?: BehaviorLabelOverrides;\n  availableBehaviors: BehaviorKey[];\n  behaviorConfigPanels: Partial<Record<BehaviorKey, ReactNode>>;\n  gatedBy: string[];\n  setGatedBy: (tags: string[]) => void;\n  gatedByPlanIds: string[];\n  setGatedByPlanIds: (ids: string[]) => void;\n  activePlans: MerchantPlan[];\n  linkedPlanName?: string;\n}\n\ninterface BehaviorConfigPanelsProps {\n  behaviorConfigs: ProductBehaviors;\n  updateBookableConfig: (config: BookableConfig) => void;\n  updateShippableConfig: (config: ShippableConfig) => void;\n  updateSubscribableConfig: (config: SubscribableConfig) => void;\n  updateDownloadableConfig: (config: DownloadableConfig) => void;\n  updateRentableConfig: (config: RentableConfig) => void;\n  updateTicketedConfig: (config: TicketedConfig) => void;\n  behaviorLabelOverrides?: BehaviorLabelOverrides;\n  currencySymbol: string;\n  resourceCategories: Array<{\n    id: string;\n    label: string;\n    labelPlural: string;\n    kind: string;\n  }>;\n  resourceRequirements: ContentResourceRequirementItem[];\n  setResourceRequirements: (items: ContentResourceRequirementItem[]) => void;\n  activePlans: MerchantPlan[];\n}\n\nexport function createBehaviorConfigPanels({\n  behaviorConfigs,\n  updateBookableConfig,\n  updateShippableConfig,\n  updateSubscribableConfig,\n  updateDownloadableConfig,\n  updateRentableConfig,\n  updateTicketedConfig,\n  behaviorLabelOverrides,\n  currencySymbol,\n  resourceCategories,\n  resourceRequirements,\n  setResourceRequirements,\n  activePlans,\n}: BehaviorConfigPanelsProps): Partial<Record<BehaviorKey, ReactNode>> {\n  const panels: Partial<Record<BehaviorKey, ReactNode>> = {};\n\n  const bookableVal = behaviorConfigs.bookable;\n  if (isBehaviorEnabled(bookableVal)) {\n    const config = getBehaviorConfig<BookableConfig>(bookableVal) || {\n      enabled: true,\n    };\n    panels.bookable = (\n      <BookableConfigPanel\n        config={config}\n        onChange={updateBookableConfig}\n        labelOverrides={behaviorLabelOverrides?.bookable}\n        resourceCategories={resourceCategories}\n        resourceRequirements={resourceRequirements}\n        onResourceRequirementsChange={setResourceRequirements}\n      />\n    );\n  }\n\n  const shippableVal = behaviorConfigs.shippable;\n  if (isBehaviorEnabled(shippableVal)) {\n    const config = getBehaviorConfig<ShippableConfig>(shippableVal) || {\n      enabled: true,\n    };\n    panels.shippable = (\n      <ShippableConfigPanel\n        config={config}\n        onChange={updateShippableConfig}\n        labelOverrides={behaviorLabelOverrides?.shippable}\n      />\n    );\n  }\n\n  const subscribableVal = behaviorConfigs.subscribable;\n  if (isBehaviorEnabled(subscribableVal)) {\n    const config = getBehaviorConfig<SubscribableConfig>(subscribableVal) || {\n      enabled: true,\n    };\n    panels.subscribable = (\n      <SubscribableConfigPanel\n        config={config}\n        onChange={updateSubscribableConfig}\n        labelOverrides={behaviorLabelOverrides?.subscribable}\n        plans={activePlans}\n      />\n    );\n  }\n\n  const downloadableVal = behaviorConfigs.downloadable;\n  if (isBehaviorEnabled(downloadableVal)) {\n    const config = getBehaviorConfig<DownloadableConfig>(downloadableVal) || {\n      enabled: true,\n    };\n    panels.downloadable = (\n      <DownloadableConfigPanel\n        config={config}\n        onChange={updateDownloadableConfig}\n        labelOverrides={behaviorLabelOverrides?.downloadable}\n      />\n    );\n  }\n\n  const rentableVal = behaviorConfigs.rentable;\n  if (isBehaviorEnabled(rentableVal)) {\n    const config = getBehaviorConfig<RentableConfig>(rentableVal) || {\n      enabled: true,\n    };\n    panels.rentable = (\n      <RentableConfigPanel\n        config={config}\n        onChange={updateRentableConfig}\n        labelOverrides={behaviorLabelOverrides?.rentable}\n        currencySymbol={currencySymbol}\n      />\n    );\n  }\n\n  const ticketedVal = behaviorConfigs.ticketed;\n  if (isBehaviorEnabled(ticketedVal)) {\n    const config = getBehaviorConfig<TicketedConfig>(ticketedVal) || {\n      enabled: true,\n    };\n    panels.ticketed = (\n      <TicketedConfigPanel\n        config={config}\n        onChange={updateTicketedConfig}\n        labelOverrides={behaviorLabelOverrides?.ticketed}\n        currencySymbol={currencySymbol}\n      />\n    );\n  }\n\n  return panels;\n}\n\nexport function createBehaviorsStep({\n  behaviorConfigs,\n  setBehaviorConfigs,\n  behaviorLabelOverrides,\n  availableBehaviors,\n  behaviorConfigPanels,\n  gatedBy,\n  setGatedBy,\n  gatedByPlanIds,\n  setGatedByPlanIds,\n  activePlans,\n  linkedPlanName,\n}: BehaviorsStepProps): FormStep {\n  return {\n    key: 'behaviors',\n    label: 'Behaviors',\n    description: 'What can customers do with this product?',\n    content: (\n      <div className=\"space-y-6\">\n        <BehaviorConfigSection\n          behaviors={behaviorConfigs}\n          onChange={setBehaviorConfigs}\n          labelOverrides={behaviorLabelOverrides}\n          availableBehaviors={availableBehaviors}\n          configPanels={behaviorConfigPanels}\n        />\n\n        {/* Content Gating — allow merchants to require subscriptions for access */}\n        <fieldset className=\"space-y-4\">\n          <legend className=\"text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider\">\n            Access & gating\n          </legend>\n          <GatingConfigSection\n            gatedBy={gatedBy}\n            onChange={setGatedBy}\n            gatedByPlanIds={gatedByPlanIds}\n            onPlanIdsChange={setGatedByPlanIds}\n            availablePlans={activePlans}\n            subscribablePlanName={linkedPlanName}\n          />\n        </fieldset>\n      </div>\n    ),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/features/product-form/currency-field.d.ts

@@ -0,0 +1,13 @@
+import type { Dispatch, SetStateAction } from 'react';
+export declare function CurrencyField({ label, currencySymbol, focused, setFocused, display, setDisplay, value, setValue, formatCurrency, parseCurrency, }: {
+    label: string;
+    currencySymbol: string;
+    focused: boolean;
+    setFocused: Dispatch<SetStateAction<boolean>>;
+    display: string;
+    setDisplay: Dispatch<SetStateAction<string>>;
+    value: number | undefined;
+    setValue: Dispatch<SetStateAction<number | undefined>>;
+    formatCurrency: (value: number | undefined) => string;
+    parseCurrency: (value: string) => number | undefined;
+}): import("react").JSX.Element;

package/dist/features/product-form/currency-field.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@withpotter/ui-kit";
+function CurrencyField({
+  label,
+  currencySymbol,
+  focused,
+  setFocused,
+  display,
+  setDisplay,
+  value,
+  setValue,
+  formatCurrency,
+  parseCurrency
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)] font-medium", children: currencySymbol }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          inputMode: "decimal",
+          value: focused ? display : formatCurrency(value),
+          onFocus: () => {
+            setFocused(true);
+            setDisplay(value !== void 0 ? String(value) : "");
+          },
+          onBlur: () => {
+            setFocused(false);
+            const parsed = parseCurrency(display);
+            setValue(parsed);
+            setDisplay(formatCurrency(parsed));
+          },
+          onChange: (event) => {
+            const next = event.target.value;
+            if (/^[0-9]*\.?[0-9]*$/.test(next) || next === "") {
+              setDisplay(next);
+            }
+          },
+          placeholder: "0.00",
+          className: "pl-8 pr-3"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  CurrencyField
+};
+//# sourceMappingURL=currency-field.js.map

package/dist/features/product-form/currency-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/product-form/currency-field.tsx"],"sourcesContent":["'use client';\n\nimport type { Dispatch, SetStateAction } from 'react';\nimport { Input } from '@withpotter/ui-kit';\n\nexport function CurrencyField({\n  label,\n  currencySymbol,\n  focused,\n  setFocused,\n  display,\n  setDisplay,\n  value,\n  setValue,\n  formatCurrency,\n  parseCurrency,\n}: {\n  label: string;\n  currencySymbol: string;\n  focused: boolean;\n  setFocused: Dispatch<SetStateAction<boolean>>;\n  display: string;\n  setDisplay: Dispatch<SetStateAction<string>>;\n  value: number | undefined;\n  setValue: Dispatch<SetStateAction<number | undefined>>;\n  formatCurrency: (value: number | undefined) => string;\n  parseCurrency: (value: string) => number | undefined;\n}) {\n  return (\n    <div>\n      <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n        {label}\n      </label>\n      <div className=\"relative\">\n        <span className=\"absolute left-3 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)] font-medium\">\n          {currencySymbol}\n        </span>\n        <Input\n          inputMode=\"decimal\"\n          value={focused ? display : formatCurrency(value)}\n          onFocus={() => {\n            setFocused(true);\n            setDisplay(value !== undefined ? String(value) : '');\n          }}\n          onBlur={() => {\n            setFocused(false);\n            const parsed = parseCurrency(display);\n            setValue(parsed);\n            setDisplay(formatCurrency(parsed));\n          }}\n          onChange={(event) => {\n            const next = event.target.value;\n            if (/^[0-9]*\\.?[0-9]*$/.test(next) || next === '') {\n              setDisplay(next);\n            }\n          }}\n          placeholder=\"0.00\"\n          className=\"pl-8 pr-3\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA8BM,cAGA,YAHA;AA3BN,SAAS,aAAa;AAEf,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,SACE,qBAAC,SACC;AAAA,wBAAC,WAAM,WAAU,+DACd,iBACH;AAAA,IACA,qBAAC,SAAI,WAAU,YACb;AAAA,0BAAC,UAAK,WAAU,oFACb,0BACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,UAAU,UAAU,eAAe,KAAK;AAAA,UAC/C,SAAS,MAAM;AACb,uBAAW,IAAI;AACf,uBAAW,UAAU,SAAY,OAAO,KAAK,IAAI,EAAE;AAAA,UACrD;AAAA,UACA,QAAQ,MAAM;AACZ,uBAAW,KAAK;AAChB,kBAAM,SAAS,cAAc,OAAO;AACpC,qBAAS,MAAM;AACf,uBAAW,eAAe,MAAM,CAAC;AAAA,UACnC;AAAA,UACA,UAAU,CAAC,UAAU;AACnB,kBAAM,OAAO,MAAM,OAAO;AAC1B,gBAAI,oBAAoB,KAAK,IAAI,KAAK,SAAS,IAAI;AACjD,yBAAW,IAAI;AAAA,YACjB;AAAA,UACF;AAAA,UACA,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/features/product-form/details-step.d.ts

@@ -0,0 +1,35 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { FormStep } from '@withpotter/ui-kit/form-stepper-panel';
+import type { ProductBehaviors } from '@withpotter/lib/product-types';
+import type { ContentFieldConfig, FieldGroup } from '@withpotter/lib/template-types';
+export interface ProductDetailSection {
+    key: string;
+    label: string;
+    description?: string;
+    fieldNames: string[];
+}
+interface DetailsStepProps {
+    behaviorConfigs: ProductBehaviors;
+    detailSections: ProductDetailSection[];
+    enabledDetailSections: Set<string>;
+    toggleDetailSection: (key: string) => void;
+    activeTemplateFields: ContentFieldConfig[];
+    activeFieldGroups?: FieldGroup[];
+    templateValues: Record<string, unknown>;
+    setTemplateValues: Dispatch<SetStateAction<Record<string, unknown>>>;
+    tenantCurrency: string;
+    tenantCategories: Record<string, {
+        value: string;
+        label: string;
+        sortOrder?: number;
+    }[]>;
+    tenantSlug?: string;
+    trackInventory: boolean;
+    setTrackInventory: Dispatch<SetStateAction<boolean>>;
+    quantity: number | '';
+    setQuantity: Dispatch<SetStateAction<number | ''>>;
+    lowStockThreshold: number | '';
+    setLowStockThreshold: Dispatch<SetStateAction<number | ''>>;
+}
+export declare function createDetailsStep({ behaviorConfigs, detailSections, enabledDetailSections, toggleDetailSection, activeTemplateFields, activeFieldGroups, templateValues, setTemplateValues, tenantCurrency, tenantCategories, tenantSlug, trackInventory, setTrackInventory, quantity, setQuantity, lowStockThreshold, setLowStockThreshold, }: DetailsStepProps): FormStep;
+export {};

package/dist/features/product-form/details-step.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { DynamicForm } from "@withpotter/components/dynamic-form";
+import { Input } from "@withpotter/ui-kit";
+import { isBehaviorEnabled } from "@withpotter/lib/product-types";
+const BOOKING_FIELDS = /* @__PURE__ */ new Set([
+  "minimumStay",
+  "maximumStay",
+  "checkInTime",
+  "checkOutTime",
+  "durationUnit",
+  "maxBookingsPerSlot"
+]);
+function createDetailsStep({
+  behaviorConfigs,
+  detailSections,
+  enabledDetailSections,
+  toggleDetailSection,
+  activeTemplateFields,
+  activeFieldGroups,
+  templateValues,
+  setTemplateValues,
+  tenantCurrency,
+  tenantCategories,
+  tenantSlug,
+  trackInventory,
+  setTrackInventory,
+  quantity,
+  setQuantity,
+  lowStockThreshold,
+  setLowStockThreshold
+}) {
+  const isBookableActive = isBehaviorEnabled(behaviorConfigs.bookable);
+  const filteredSections = isBookableActive ? detailSections.filter(
+    (section) => !section.fieldNames.some(
+      (fieldName) => BOOKING_FIELDS.has(fieldName)
+    )
+  ) : detailSections;
+  return {
+    key: "details",
+    label: "Details & stock",
+    description: "Additional details and inventory tracking",
+    content: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      filteredSections.length > 0 ? /* @__PURE__ */ jsxs("fieldset", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("legend", { className: "text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider", children: "Suggested details" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)] -mt-2", children: "Optional fields from your template \u2014 add whichever apply to this product." }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: filteredSections.map((section) => {
+          const isEnabled = enabledDetailSections.has(section.key);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggleDetailSection(section.key),
+              className: `inline-flex items-center gap-2 px-3 py-2 text-sm rounded-full border transition-colors ${isEnabled ? "bg-brand-500/10 border-brand-500 text-brand-500" : "border-[var(--border-default)] text-[var(--text-tertiary)] hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"}`,
+              children: [
+                isEnabled && /* @__PURE__ */ jsx(Check, {}),
+                section.label
+              ]
+            },
+            section.key
+          );
+        }) }),
+        activeTemplateFields.length > 0 && /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(
+          DynamicForm,
+          {
+            fields: activeTemplateFields,
+            fieldGroups: activeFieldGroups,
+            values: templateValues,
+            onChange: setTemplateValues,
+            currencyCode: tenantCurrency,
+            tenantCategories,
+            tenantSlug
+          }
+        ) })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("fieldset", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("legend", { className: "text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider", children: "Inventory" }),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 cursor-pointer", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": trackInventory,
+              onClick: () => setTrackInventory(!trackInventory),
+              className: `relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${trackInventory ? "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 ${trackInventory ? "translate-x-4" : "translate-x-0.5"}`
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-secondary)]", children: "Track inventory" })
+        ] }),
+        trackInventory && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Quantity" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                min: 0,
+                value: quantity,
+                onChange: (event) => setQuantity(
+                  event.target.value === "" ? "" : parseInt(event.target.value)
+                ),
+                placeholder: "0"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Low stock threshold" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                min: 0,
+                value: lowStockThreshold,
+                onChange: (event) => setLowStockThreshold(
+                  event.target.value === "" ? "" : parseInt(event.target.value)
+                ),
+                placeholder: "5"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  };
+}
+export {
+  createDetailsStep
+};
+//# sourceMappingURL=details-step.js.map

package/dist/features/product-form/details-step.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/product-form/details-step.tsx"],"sourcesContent":["'use client';\n\nimport type { Dispatch, SetStateAction } from 'react';\nimport { Check } from 'lucide-react';\nimport { DynamicForm } from '@withpotter/components/dynamic-form';\nimport { Input } from '@withpotter/ui-kit';\nimport type { FormStep } from '@withpotter/ui-kit/form-stepper-panel';\nimport type { ProductBehaviors } from '@withpotter/lib/product-types';\nimport { isBehaviorEnabled } from '@withpotter/lib/product-types';\nimport type { ContentFieldConfig, FieldGroup } from '@withpotter/lib/template-types';\n\nexport interface ProductDetailSection {\n  key: string;\n  label: string;\n  description?: string;\n  fieldNames: string[];\n}\n\ninterface DetailsStepProps {\n  behaviorConfigs: ProductBehaviors;\n  detailSections: ProductDetailSection[];\n  enabledDetailSections: Set<string>;\n  toggleDetailSection: (key: string) => void;\n  activeTemplateFields: ContentFieldConfig[];\n  activeFieldGroups?: FieldGroup[];\n  templateValues: Record<string, unknown>;\n  setTemplateValues: Dispatch<SetStateAction<Record<string, unknown>>>;\n  tenantCurrency: string;\n  tenantCategories: Record<\n    string,\n    { value: string; label: string; sortOrder?: number }[]\n  >;\n  tenantSlug?: string;\n  trackInventory: boolean;\n  setTrackInventory: Dispatch<SetStateAction<boolean>>;\n  quantity: number | '';\n  setQuantity: Dispatch<SetStateAction<number | ''>>;\n  lowStockThreshold: number | '';\n  setLowStockThreshold: Dispatch<SetStateAction<number | ''>>;\n}\n\nconst BOOKING_FIELDS = new Set([\n  'minimumStay',\n  'maximumStay',\n  'checkInTime',\n  'checkOutTime',\n  'durationUnit',\n  'maxBookingsPerSlot',\n]);\n\nexport function createDetailsStep({\n  behaviorConfigs,\n  detailSections,\n  enabledDetailSections,\n  toggleDetailSection,\n  activeTemplateFields,\n  activeFieldGroups,\n  templateValues,\n  setTemplateValues,\n  tenantCurrency,\n  tenantCategories,\n  tenantSlug,\n  trackInventory,\n  setTrackInventory,\n  quantity,\n  setQuantity,\n  lowStockThreshold,\n  setLowStockThreshold,\n}: DetailsStepProps): FormStep {\n  const isBookableActive = isBehaviorEnabled(behaviorConfigs.bookable);\n  const filteredSections = isBookableActive\n    ? detailSections.filter(\n        (section) =>\n          !section.fieldNames.some((fieldName) =>\n            BOOKING_FIELDS.has(fieldName),\n          ),\n      )\n    : detailSections;\n\n  return {\n    key: 'details',\n    label: 'Details & stock',\n    description: 'Additional details and inventory tracking',\n    content: (\n      <div className=\"space-y-6\">\n        {filteredSections.length > 0 ? (\n          <fieldset className=\"space-y-4\">\n            <legend className=\"text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider\">\n              Suggested details\n            </legend>\n            <p className=\"text-xs text-[var(--text-muted)] -mt-2\">\n              Optional fields from your template — add whichever apply to this\n              product.\n            </p>\n\n            <div className=\"flex flex-wrap gap-2\">\n              {filteredSections.map((section) => {\n                const isEnabled = enabledDetailSections.has(section.key);\n                return (\n                  <button\n                    key={section.key}\n                    type=\"button\"\n                    onClick={() => toggleDetailSection(section.key)}\n                    className={`inline-flex items-center gap-2 px-3 py-2 text-sm rounded-full border transition-colors ${\n                      isEnabled\n                        ? 'bg-brand-500/10 border-brand-500 text-brand-500'\n                        : 'border-[var(--border-default)] text-[var(--text-tertiary)] hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]'\n                    }`}\n                  >\n                    {isEnabled && <Check />}\n                    {section.label}\n                  </button>\n                );\n              })}\n            </div>\n\n            {activeTemplateFields.length > 0 && (\n              <div className=\"pt-2\">\n                <DynamicForm\n                  fields={activeTemplateFields}\n                  fieldGroups={activeFieldGroups}\n                  values={templateValues}\n                  onChange={setTemplateValues}\n                  currencyCode={tenantCurrency}\n                  tenantCategories={tenantCategories}\n                  tenantSlug={tenantSlug}\n                />\n              </div>\n            )}\n          </fieldset>\n        ) : null}\n\n        <fieldset className=\"space-y-4\">\n          <legend className=\"text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider\">\n            Inventory\n          </legend>\n          <label className=\"flex items-center gap-3 cursor-pointer\">\n            <button\n              type=\"button\"\n              role=\"switch\"\n              aria-checked={trackInventory}\n              onClick={() => setTrackInventory(!trackInventory)}\n              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${\n                trackInventory ? 'bg-brand-500' : '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                  trackInventory ? 'translate-x-4' : 'translate-x-0.5'\n                }`}\n              />\n            </button>\n            <span className=\"text-sm text-[var(--text-secondary)]\">\n              Track inventory\n            </span>\n          </label>\n          {trackInventory && (\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div>\n                <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                  Quantity\n                </label>\n                <Input\n                  type=\"number\"\n                  min={0}\n                  value={quantity}\n                  onChange={(event) =>\n                    setQuantity(\n                      event.target.value === ''\n                        ? ''\n                        : parseInt(event.target.value),\n                    )\n                  }\n                  placeholder=\"0\"\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                  Low stock threshold\n                </label>\n                <Input\n                  type=\"number\"\n                  min={0}\n                  value={lowStockThreshold}\n                  onChange={(event) =>\n                    setLowStockThreshold(\n                      event.target.value === ''\n                        ? ''\n                        : parseInt(event.target.value),\n                    )\n                  }\n                  placeholder=\"5\"\n                />\n              </div>\n            </div>\n          )}\n        </fieldset>\n      </div>\n    ),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/features/product-form/organize-step.d.ts

@@ -0,0 +1,23 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { ContentItem } from '@withpotter/lib/api/types';
+import { ProductType, type Product } from '@withpotter/lib/product-types';
+import type { FormStep } from '@withpotter/ui-kit/form-stepper-panel';
+interface OrganizeStepProps {
+    collectionsLoading: boolean;
+    allCollections: ContentItem[];
+    selectedCollectionIds: Set<string>;
+    setSelectedCollectionIds: Dispatch<SetStateAction<Set<string>>>;
+    isActive: boolean;
+    setIsActive: Dispatch<SetStateAction<boolean>>;
+    isEditing: boolean;
+    productType: ProductType;
+    setProductType: Dispatch<SetStateAction<ProductType>>;
+    slug: string;
+    setSlug: Dispatch<SetStateAction<string>>;
+    setSlugManuallyEdited: Dispatch<SetStateAction<boolean>>;
+    product?: Product | null;
+    featured: boolean;
+    setFeatured: Dispatch<SetStateAction<boolean>>;
+}
+export declare function createOrganizeStep({ collectionsLoading, allCollections, selectedCollectionIds, setSelectedCollectionIds, isActive, setIsActive, isEditing, productType, setProductType, slug, setSlug, setSlugManuallyEdited, product, featured, setFeatured, }: OrganizeStepProps): FormStep;
+export {};

package/dist/features/product-form/organize-step.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Layers, Loader2 } from "lucide-react";
+import { deriveContentStatus } from "@withpotter/lib/api/misc";
+import {
+  PRODUCT_TYPE_OPTIONS
+} from "@withpotter/lib/product-types";
+import { Select } from "@withpotter/ui-kit/select";
+import { EmptyNote, Input } from "@withpotter/ui-kit";
+function createOrganizeStep({
+  collectionsLoading,
+  allCollections,
+  selectedCollectionIds,
+  setSelectedCollectionIds,
+  isActive,
+  setIsActive,
+  isEditing,
+  productType,
+  setProductType,
+  slug,
+  setSlug,
+  setSlugManuallyEdited,
+  product,
+  featured,
+  setFeatured
+}) {
+  return {
+    key: "organize",
+    label: "Organize",
+    description: "Collections, product type, and visibility settings",
+    content: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("fieldset", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("legend", { className: "text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider", children: "Collections" }),
+        collectionsLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-3 text-sm text-[var(--text-tertiary)]", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }),
+          "Loading collections\u2026"
+        ] }) : allCollections.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "border-2 border-dashed border-[var(--border-default)] rounded-md p-4 text-center", children: [
+          /* @__PURE__ */ jsx(Layers, { className: "size-6 mx-auto mb-2 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsx(EmptyNote, { children: "No collections yet. Create collections to group your products." })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "border border-[var(--border-default)] rounded-md overflow-x-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto divide-y divide-[var(--border-subtle)]", children: allCollections.map((collection) => {
+            const isSelected = selectedCollectionIds.has(collection.id);
+            const productCount = Array.isArray(
+              collection.data?.productIds
+            ) ? collection.data.productIds.length : 0;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setSelectedCollectionIds((previous) => {
+                    const next = new Set(previous);
+                    if (next.has(collection.id)) {
+                      next.delete(collection.id);
+                    } else {
+                      next.add(collection.id);
+                    }
+                    return next;
+                  });
+                },
+                className: `w-full flex items-center gap-3 px-3 py-3 text-left transition-colors ${isSelected ? "bg-[var(--info-bg)]" : "hover:bg-[var(--interactive-hover)]"}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `w-4 h-4 rounded-md border-2 flex items-center justify-center flex-shrink-0 ${isSelected ? "bg-brand-500 border-brand-500" : "border-[var(--border-strong)]"}`,
+                      children: isSelected && /* @__PURE__ */ jsx(Check, { className: "text-white" })
+                    }
+                  ),
+                  collection.data?.image ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: collection.data.image,
+                        alt: "",
+                        className: "w-7 h-7 rounded-md object-cover flex-shrink-0"
+                      }
+                    )
+                  ) : /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-md bg-[var(--bg-muted)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(Layers, { className: "text-[var(--text-muted)]" }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)] truncate", children: collection.title }),
+                    /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--text-tertiary)]", children: [
+                      productCount,
+                      " product",
+                      productCount !== 1 ? "s" : "",
+                      deriveContentStatus(collection) !== "published" && /* @__PURE__ */ jsxs("span", { className: "ml-1.5 text-[var(--warning)]", children: [
+                        "(",
+                        deriveContentStatus(collection),
+                        ")"
+                      ] })
+                    ] })
+                  ] })
+                ]
+              },
+              collection.id
+            );
+          }) }),
+          selectedCollectionIds.size > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] border-t border-[var(--border-default)] px-3 py-2 text-xs text-[var(--text-secondary)]", children: [
+            selectedCollectionIds.size,
+            " collection",
+            selectedCollectionIds.size !== 1 ? "s" : "",
+            " selected"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "space-y-4 border-l-4 border-brand-500 pl-4 py-0", children: [
+        /* @__PURE__ */ jsx("legend", { className: "text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider", children: "Status & organization" }),
+        /* @__PURE__ */ jsx("div", { className: "bg-[var(--bg-muted)] rounded px-3 py-3", children: /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 cursor-pointer", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": isActive,
+              onClick: () => setIsActive(!isActive),
+              className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isActive ? "bg-brand-500" : "bg-[var(--border-default)]"}`,
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `inline-block h-4 w-4 transform rounded-full bg-[var(--bg-base)] transition-transform ${isActive ? "translate-x-5" : "translate-x-1"}`
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: isActive ? "Published" : "Draft" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-secondary)]", children: isActive ? "Visible on business page" : "Hidden until published" })
+          ] })
+        ] }) }),
+        !isEditing && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Product type" }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: productType,
+              onChange: (value) => setProductType(value),
+              options: PRODUCT_TYPE_OPTIONS,
+              placeholder: "Select product type"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "URL slug" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: slug,
+              onChange: (event) => {
+                setSlug(event.target.value);
+                setSlugManuallyEdited(true);
+              },
+              placeholder: "silk-blouse",
+              className: "font-mono text-xs"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--text-muted)]", children: "Auto-generated from title. Edit only if you need a custom URL." }),
+          isEditing && slug !== product?.slug && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--warning)]", children: "Changing the slug may affect existing links and SEO." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3 pt-1", children: /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 cursor-pointer", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": featured,
+              onClick: () => setFeatured(!featured),
+              className: `relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${featured ? "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 ${featured ? "translate-x-4" : "translate-x-0.5"}`
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-secondary)]", children: "Featured product" })
+        ] }) })
+      ] })
+    ] })
+  };
+}
+export {
+  createOrganizeStep
+};
+//# sourceMappingURL=organize-step.js.map

package/dist/features/product-form/organize-step.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/product-form/organize-step.tsx"],"sourcesContent":["'use client';\n\nimport type { Dispatch, SetStateAction } from 'react';\nimport { Check, Layers, Loader2 } from 'lucide-react';\nimport type { ContentItem } from '@withpotter/lib/api/types';\nimport { deriveContentStatus } from '@withpotter/lib/api/misc';\nimport {\n  ProductType,\n  PRODUCT_TYPE_OPTIONS,\n  type Product,\n} from '@withpotter/lib/product-types';\nimport type { FormStep } from '@withpotter/ui-kit/form-stepper-panel';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { EmptyNote, Input } from '@withpotter/ui-kit';\n\ninterface OrganizeStepProps {\n  collectionsLoading: boolean;\n  allCollections: ContentItem[];\n  selectedCollectionIds: Set<string>;\n  setSelectedCollectionIds: Dispatch<SetStateAction<Set<string>>>;\n  isActive: boolean;\n  setIsActive: Dispatch<SetStateAction<boolean>>;\n  isEditing: boolean;\n  productType: ProductType;\n  setProductType: Dispatch<SetStateAction<ProductType>>;\n  slug: string;\n  setSlug: Dispatch<SetStateAction<string>>;\n  setSlugManuallyEdited: Dispatch<SetStateAction<boolean>>;\n  product?: Product | null;\n  featured: boolean;\n  setFeatured: Dispatch<SetStateAction<boolean>>;\n}\n\nexport function createOrganizeStep({\n  collectionsLoading,\n  allCollections,\n  selectedCollectionIds,\n  setSelectedCollectionIds,\n  isActive,\n  setIsActive,\n  isEditing,\n  productType,\n  setProductType,\n  slug,\n  setSlug,\n  setSlugManuallyEdited,\n  product,\n  featured,\n  setFeatured,\n}: OrganizeStepProps): FormStep {\n  return {\n    key: 'organize',\n    label: 'Organize',\n    description: 'Collections, product type, and visibility settings',\n    content: (\n      <div className=\"space-y-6\">\n        <fieldset className=\"space-y-4\">\n          <legend className=\"text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider\">\n            Collections\n          </legend>\n          {collectionsLoading ? (\n            <div className=\"flex items-center gap-2 py-3 text-sm text-[var(--text-tertiary)]\">\n              <Loader2 className=\"size-4 animate-spin\" />\n              Loading collections…\n            </div>\n          ) : allCollections.length === 0 ? (\n            <div className=\"border-2 border-dashed border-[var(--border-default)] rounded-md p-4 text-center\">\n              <Layers className=\"size-6 mx-auto mb-2 text-[var(--text-muted)]\" />\n              <EmptyNote>\n                No collections yet. Create collections to group your products.\n              </EmptyNote>\n            </div>\n          ) : (\n            <div className=\"border border-[var(--border-default)] rounded-md overflow-x-auto\">\n              <div className=\"max-h-48 overflow-y-auto divide-y divide-[var(--border-subtle)]\">\n                {allCollections.map((collection) => {\n                  const isSelected = selectedCollectionIds.has(collection.id);\n                  const productCount = Array.isArray(\n                    collection.data?.productIds,\n                  )\n                    ? (collection.data.productIds as string[]).length\n                    : 0;\n                  return (\n                    <button\n                      key={collection.id}\n                      type=\"button\"\n                      onClick={() => {\n                        setSelectedCollectionIds((previous) => {\n                          const next = new Set(previous);\n                          if (next.has(collection.id)) {\n                            next.delete(collection.id);\n                          } else {\n                            next.add(collection.id);\n                          }\n                          return next;\n                        });\n                      }}\n                      className={`w-full flex items-center gap-3 px-3 py-3 text-left transition-colors ${\n                        isSelected\n                          ? 'bg-[var(--info-bg)]'\n                          : 'hover:bg-[var(--interactive-hover)]'\n                      }`}\n                    >\n                      <div\n                        className={`w-4 h-4 rounded-md border-2 flex items-center justify-center flex-shrink-0 ${\n                          isSelected\n                            ? 'bg-brand-500 border-brand-500'\n                            : 'border-[var(--border-strong)]'\n                        }`}\n                      >\n                        {isSelected && <Check className=\"text-white\" />}\n                      </div>\n                      {collection.data?.image ? (\n                        // eslint-disable-next-line @next/next/no-img-element\n                        <img\n                          src={collection.data.image as string}\n                          alt=\"\"\n                          className=\"w-7 h-7 rounded-md object-cover flex-shrink-0\"\n                        />\n                      ) : (\n                        <div className=\"w-7 h-7 rounded-md bg-[var(--bg-muted)] flex items-center justify-center flex-shrink-0\">\n                          <Layers className=\"text-[var(--text-muted)]\" />\n                        </div>\n                      )}\n                      <div className=\"flex-1 min-w-0\">\n                        <p className=\"text-sm font-medium text-[var(--text-primary)] truncate\">\n                          {collection.title}\n                        </p>\n                        <p className=\"text-xs text-[var(--text-tertiary)]\">\n                          {productCount} product\n                          {productCount !== 1 ? 's' : ''}\n                          {deriveContentStatus(collection) !== 'published' && (\n                            <span className=\"ml-1.5 text-[var(--warning)]\">\n                              ({deriveContentStatus(collection)})\n                            </span>\n                          )}\n                        </p>\n                      </div>\n                    </button>\n                  );\n                })}\n              </div>\n              {selectedCollectionIds.size > 0 && (\n                <div className=\"bg-[var(--bg-subtle)] border-t border-[var(--border-default)] px-3 py-2 text-xs text-[var(--text-secondary)]\">\n                  {selectedCollectionIds.size} collection\n                  {selectedCollectionIds.size !== 1 ? 's' : ''} selected\n                </div>\n              )}\n            </div>\n          )}\n        </fieldset>\n\n        <fieldset className=\"space-y-4 border-l-4 border-brand-500 pl-4 py-0\">\n          <legend className=\"text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider\">\n            Status & organization\n          </legend>\n\n          <div className=\"bg-[var(--bg-muted)] rounded px-3 py-3\">\n            <label className=\"flex items-center gap-3 cursor-pointer\">\n              <button\n                type=\"button\"\n                role=\"switch\"\n                aria-checked={isActive}\n                onClick={() => setIsActive(!isActive)}\n                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${\n                  isActive ? 'bg-brand-500' : 'bg-[var(--border-default)]'\n                }`}\n              >\n                <span\n                  className={`inline-block h-4 w-4 transform rounded-full bg-[var(--bg-base)] transition-transform ${\n                    isActive ? 'translate-x-5' : 'translate-x-1'\n                  }`}\n                />\n              </button>\n              <div>\n                <span className=\"text-sm font-medium text-[var(--text-primary)]\">\n                  {isActive ? 'Published' : 'Draft'}\n                </span>\n                <p className=\"text-xs text-[var(--text-secondary)]\">\n                  {isActive\n                    ? 'Visible on business page'\n                    : 'Hidden until published'}\n                </p>\n              </div>\n            </label>\n          </div>\n          {!isEditing && (\n            <div>\n              <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                Product type\n              </label>\n              <Select\n                value={productType}\n                onChange={(value) => setProductType(value as ProductType)}\n                options={PRODUCT_TYPE_OPTIONS}\n                placeholder=\"Select product type\"\n              />\n            </div>\n          )}\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              URL slug\n            </label>\n            <Input\n              value={slug}\n              onChange={(event) => {\n                setSlug(event.target.value);\n                setSlugManuallyEdited(true);\n              }}\n              placeholder=\"silk-blouse\"\n              className=\"font-mono text-xs\"\n            />\n            <p className=\"mt-1 text-xs text-[var(--text-muted)]\">\n              Auto-generated from title. Edit only if you need a custom URL.\n            </p>\n            {isEditing && slug !== product?.slug && (\n              <p className=\"mt-1 text-xs text-[var(--warning)]\">\n                Changing the slug may affect existing links and SEO.\n              </p>\n            )}\n          </div>\n          <div className=\"space-y-3 pt-1\">\n            <label className=\"flex items-center gap-3 cursor-pointer\">\n              <button\n                type=\"button\"\n                role=\"switch\"\n                aria-checked={featured}\n                onClick={() => setFeatured(!featured)}\n                className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${\n                  featured ? 'bg-brand-500' : '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                    featured ? 'translate-x-4' : 'translate-x-0.5'\n                  }`}\n                />\n              </button>\n              <span className=\"text-sm text-[var(--text-secondary)]\">\n                Featured product\n              </span>\n            </label>\n          </div>\n        </fieldset>\n      </div>\n    ),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/features/product-form.d.ts

@@ -0,0 +1,11 @@
+import { type Product } from '@withpotter/lib/product-types';
+interface ProductFormProps {
+    /** Existing product to edit, or null for create mode */
+    product?: Product | null;
+    /** Called after successful save with the saved product */
+    onSaved: () => void;
+    /** Called when the form is closed/cancelled */
+    onClose: () => void;
+}
+export declare function ProductForm({ product, onSaved, onClose }: ProductFormProps): import("react").JSX.Element;
+export {};