@withpotter/components 0.13.0-next.101

package/dist/product-editor/sections/pricing-inventory-section.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PricingFields } from "@withpotter/ui-kit/pricing-fields";
+import { EditorSectionHeader } from "./section-header";
+import { Input, Checkbox, inputErrorClass } from "@withpotter/ui-kit";
+function PricingInventorySection({
+  sku,
+  onSkuChange,
+  price,
+  compareAtPrice,
+  onPriceChange,
+  onCompareAtPriceChange,
+  currencySymbol,
+  trackInventory,
+  onTrackInventoryChange,
+  quantity,
+  onQuantityChange,
+  lowStockThreshold,
+  onLowStockThresholdChange,
+  showInventory
+}) {
+  const compareAtPriceError = compareAtPrice !== void 0 && price !== void 0 && compareAtPrice > 0 && compareAtPrice <= price ? "Compare at price must be higher than the selling price" : null;
+  const lowStockError = typeof lowStockThreshold === "number" && typeof quantity === "number" && lowStockThreshold > 0 && quantity > 0 && lowStockThreshold >= quantity ? "Low stock alert must be less than the quantity" : null;
+  return /* @__PURE__ */ jsx("section", { id: "section-pricing", className: "scroll-mt-36", children: /* @__PURE__ */ jsxs("div", { className: "surface", children: [
+    /* @__PURE__ */ jsx(
+      EditorSectionHeader,
+      {
+        title: showInventory ? "Pricing & Inventory" : "Pricing"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block text-sm font-medium text-[var(--text-secondary)]", children: [
+          "SKU",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-normal text-[var(--text-tertiary)]", children: "(optional)" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: sku,
+            onChange: (event) => onSkuChange(event.target.value),
+            placeholder: "Add a SKU",
+            className: "w-full"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        PricingFields,
+        {
+          price,
+          compareAtPrice,
+          onPriceChange,
+          onCompareAtPriceChange,
+          currencySymbol
+        }
+      ),
+      compareAtPriceError && /* @__PURE__ */ jsx("p", { className: "-mt-4 text-xs text-red-500", children: compareAtPriceError }),
+      showInventory && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] pt-4 space-y-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Inventory" }),
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: trackInventory,
+            onChange: (e) => onTrackInventoryChange(e.target.checked),
+            label: "Track inventory"
+          }
+        ),
+        trackInventory && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__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: (e) => onQuantityChange(
+                    e.target.value === "" ? "" : parseInt(e.target.value, 10)
+                  ),
+                  className: "w-full"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Low stock alert" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "number",
+                  min: 0,
+                  value: lowStockThreshold,
+                  onChange: (e) => onLowStockThresholdChange(
+                    e.target.value === "" ? "" : parseInt(e.target.value, 10)
+                  ),
+                  className: lowStockError ? inputErrorClass : ""
+                }
+              )
+            ] })
+          ] }),
+          lowStockError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: lowStockError })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  PricingInventorySection
+};
+//# sourceMappingURL=pricing-inventory-section.js.map

package/dist/product-editor/sections/pricing-inventory-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/pricing-inventory-section.tsx"],"sourcesContent":["'use client';\n\nimport { PricingFields } from '@withpotter/ui-kit/pricing-fields';\nimport { EditorSectionHeader } from './section-header';\nimport { Input, Checkbox, inputErrorClass } from '@withpotter/ui-kit';\n\ninterface PricingInventorySectionProps {\n  sku: string;\n  onSkuChange: (v: string) => void;\n  price: number | undefined;\n  compareAtPrice: number | undefined;\n  onPriceChange: (v: number | undefined) => void;\n  onCompareAtPriceChange: (v: number | undefined) => void;\n  currencySymbol: string;\n  trackInventory: boolean;\n  onTrackInventoryChange: (v: boolean) => void;\n  quantity: number | '';\n  onQuantityChange: (v: number | '') => void;\n  lowStockThreshold: number | '';\n  onLowStockThresholdChange: (v: number | '') => void;\n  showInventory: boolean;\n}\n\nexport function PricingInventorySection({\n  sku,\n  onSkuChange,\n  price,\n  compareAtPrice,\n  onPriceChange,\n  onCompareAtPriceChange,\n  currencySymbol,\n  trackInventory,\n  onTrackInventoryChange,\n  quantity,\n  onQuantityChange,\n  lowStockThreshold,\n  onLowStockThresholdChange,\n  showInventory,\n}: PricingInventorySectionProps) {\n  const compareAtPriceError =\n    compareAtPrice !== undefined &&\n    price !== undefined &&\n    compareAtPrice > 0 &&\n    compareAtPrice <= price\n      ? 'Compare at price must be higher than the selling price'\n      : null;\n\n  /**\n   * Only once there is something to be wrong about.\n   *\n   * Both fields start at 0, and `0 >= 0` is true — so a brand-new item opened\n   * with \"Low stock alert must be less than the quantity\" in red under fields\n   * nobody had typed in yet. The first thing the screen said was that you had\n   * made a mistake.\n   *\n   * An alert of 0 never fires, so it is not a threshold at all and there is\n   * nothing to check; and an alert of 5 against a quantity of 0 is a product\n   * that is already below its alert, which is the alert working rather than a\n   * contradiction. What is genuinely wrong is a threshold at or above a real\n   * quantity, so that is the only case that speaks.\n   */\n  const lowStockError =\n    typeof lowStockThreshold === 'number' &&\n    typeof quantity === 'number' &&\n    lowStockThreshold > 0 &&\n    quantity > 0 &&\n    lowStockThreshold >= quantity\n      ? 'Low stock alert must be less than the quantity'\n      : null;\n\n  return (\n    <section id=\"section-pricing\" className=\"scroll-mt-36\">\n      <div className=\"surface\">\n        {/* The title has to match what is actually below it. A property or a\n            bookable service hides the stock fields entirely (`showInventory`),\n            and heading that section \"Pricing & Inventory\" promised a merchant\n            an inventory control that was not there. The description said the\n            same thing a second time — see the note on EditorSectionHeader. */}\n        <EditorSectionHeader\n          title={showInventory ? 'Pricing & Inventory' : 'Pricing'}\n        />\n        <div className=\"p-4 space-y-6\">\n          <div>\n            <label className=\"mb-1 block text-sm font-medium text-[var(--text-secondary)]\">\n              SKU{' '}\n              <span className=\"font-normal text-[var(--text-tertiary)]\">\n                (optional)\n              </span>\n            </label>\n            <Input\n              value={sku}\n              onChange={(event) => onSkuChange(event.target.value)}\n              placeholder=\"Add a SKU\"\n              className=\"w-full\"\n            />\n          </div>\n          <PricingFields\n            price={price}\n            compareAtPrice={compareAtPrice}\n            onPriceChange={onPriceChange}\n            onCompareAtPriceChange={onCompareAtPriceChange}\n            currencySymbol={currencySymbol}\n          />\n          {compareAtPriceError && (\n            <p className=\"-mt-4 text-xs text-red-500\">{compareAtPriceError}</p>\n          )}\n\n          {showInventory && (\n            <div className=\"border-t border-[var(--border-subtle)] pt-4 space-y-2\">\n              <h3 className=\"text-sm font-medium text-[var(--text-secondary)]\">\n                Inventory\n              </h3>\n              <Checkbox\n                checked={trackInventory}\n                onChange={(e) => onTrackInventoryChange(e.target.checked)}\n                label=\"Track inventory\"\n              />\n              {trackInventory && (\n                <div className=\"space-y-2\">\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={(e) =>\n                          onQuantityChange(\n                            e.target.value === ''\n                              ? ''\n                              : parseInt(e.target.value, 10),\n                          )\n                        }\n                        className=\"w-full\"\n                      />\n                    </div>\n                    <div>\n                      <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                        Low stock alert\n                      </label>\n                      <Input\n                        type=\"number\"\n                        min={0}\n                        value={lowStockThreshold}\n                        onChange={(e) =>\n                          onLowStockThresholdChange(\n                            e.target.value === ''\n                              ? ''\n                              : parseInt(e.target.value, 10),\n                          )\n                        }\n                        className={lowStockError ? inputErrorClass : ''}\n                      />\n                    </div>\n                  </div>\n                  {lowStockError && (\n                    <p className=\"text-xs text-red-500\">{lowStockError}</p>\n                  )}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AA8EQ,cAKI,YALJ;AA5ER,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,OAAO,UAAU,uBAAuB;AAmB1C,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,sBACJ,mBAAmB,UACnB,UAAU,UACV,iBAAiB,KACjB,kBAAkB,QACd,2DACA;AAgBN,QAAM,gBACJ,OAAO,sBAAsB,YAC7B,OAAO,aAAa,YACpB,oBAAoB,KACpB,WAAW,KACX,qBAAqB,WACjB,mDACA;AAEN,SACE,oBAAC,aAAQ,IAAG,mBAAkB,WAAU,gBACtC,+BAAC,SAAI,WAAU,WAMb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,gBAAgB,wBAAwB;AAAA;AAAA,IACjD;AAAA,IACA,qBAAC,SAAI,WAAU,iBACb;AAAA,2BAAC,SACC;AAAA,6BAAC,WAAM,WAAU,+DAA8D;AAAA;AAAA,UACzE;AAAA,UACJ,oBAAC,UAAK,WAAU,2CAA0C,wBAE1D;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,YAAY,MAAM,OAAO,KAAK;AAAA,YACnD,aAAY;AAAA,YACZ,WAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC,uBACC,oBAAC,OAAE,WAAU,8BAA8B,+BAAoB;AAAA,MAGhE,iBACC,qBAAC,SAAI,WAAU,yDACb;AAAA,4BAAC,QAAG,WAAU,oDAAmD,uBAEjE;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU,CAAC,MAAM,uBAAuB,EAAE,OAAO,OAAO;AAAA,YACxD,OAAM;AAAA;AAAA,QACR;AAAA,QACC,kBACC,qBAAC,SAAI,WAAU,aACb;AAAA,+BAAC,SAAI,WAAU,0BACb;AAAA,iCAAC,SACC;AAAA,kCAAC,WAAM,WAAU,+DAA8D,sBAE/E;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,KAAK;AAAA,kBACL,OAAO;AAAA,kBACP,UAAU,CAAC,MACT;AAAA,oBACE,EAAE,OAAO,UAAU,KACf,KACA,SAAS,EAAE,OAAO,OAAO,EAAE;AAAA,kBACjC;AAAA,kBAEF,WAAU;AAAA;AAAA,cACZ;AAAA,eACF;AAAA,YACA,qBAAC,SACC;AAAA,kCAAC,WAAM,WAAU,+DAA8D,6BAE/E;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,KAAK;AAAA,kBACL,OAAO;AAAA,kBACP,UAAU,CAAC,MACT;AAAA,oBACE,EAAE,OAAO,UAAU,KACf,KACA,SAAS,EAAE,OAAO,OAAO,EAAE;AAAA,kBACjC;AAAA,kBAEF,WAAW,gBAAgB,kBAAkB;AAAA;AAAA,cAC/C;AAAA,eACF;AAAA,aACF;AAAA,UACC,iBACC,oBAAC,OAAE,WAAU,wBAAwB,yBAAc;AAAA,WAEvD;AAAA,SAEJ;AAAA,OAEJ;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/product-editor/sections/section-header.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The header every editor section wears.
+ *
+ * This existed as the same eleven lines copy-pasted into ten section files,
+ * which is how they all ended up shouting: `uppercase tracking-wider` turns a
+ * section name into an eyebrow, and an eyebrow above every card is one of the
+ * tells that makes a screen read as generated rather than designed. Fixing it
+ * in ten places would have left an eleventh to write it wrong again.
+ *
+ * The description is optional and should stay that way. "Basic information
+ * about this item" under a heading called General tells a merchant nothing they
+ * did not get from the word General; it is filler taking up the space where
+ * something useful could go. Pass one only when it earns its line — a
+ * constraint, a consequence, something the field labels cannot say.
+ */
+export declare function EditorSectionHeader({ title, description, action, }: {
+    title: string;
+    /** Only when it says something the title and fields do not. */
+    description?: string;
+    /** Optional control that belongs with the section, not the page. */
+    action?: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/product-editor/sections/section-header.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function EditorSectionHeader({
+  title,
+  description,
+  action
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: description })
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+  ] });
+}
+export {
+  EditorSectionHeader
+};
+//# sourceMappingURL=section-header.js.map

package/dist/product-editor/sections/section-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/section-header.tsx"],"sourcesContent":["/**\n * The header every editor section wears.\n *\n * This existed as the same eleven lines copy-pasted into ten section files,\n * which is how they all ended up shouting: `uppercase tracking-wider` turns a\n * section name into an eyebrow, and an eyebrow above every card is one of the\n * tells that makes a screen read as generated rather than designed. Fixing it\n * in ten places would have left an eleventh to write it wrong again.\n *\n * The description is optional and should stay that way. \"Basic information\n * about this item\" under a heading called General tells a merchant nothing they\n * did not get from the word General; it is filler taking up the space where\n * something useful could go. Pass one only when it earns its line — a\n * constraint, a consequence, something the field labels cannot say.\n */\nexport function EditorSectionHeader({\n  title,\n  description,\n  action,\n}: {\n  title: string;\n  /** Only when it says something the title and fields do not. */\n  description?: string;\n  /** Optional control that belongs with the section, not the page. */\n  action?: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-start justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-4\">\n      <div className=\"min-w-0\">\n        <h2 className=\"text-sm font-semibold text-[var(--text-primary)]\">\n          {title}\n        </h2>\n        {description && (\n          <p className=\"mt-1 text-xs text-[var(--text-tertiary)]\">\n            {description}\n          </p>\n        )}\n      </div>\n      {action && <div className=\"shrink-0\">{action}</div>}\n    </div>\n  );\n}\n"],"mappings":"AA4BM,SACE,KADF;AAbC,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE,qBAAC,SAAI,WAAU,2FACb;AAAA,yBAAC,SAAI,WAAU,WACb;AAAA,0BAAC,QAAG,WAAU,oDACX,iBACH;AAAA,MACC,eACC,oBAAC,OAAE,WAAU,4CACV,uBACH;AAAA,OAEJ;AAAA,IACC,UAAU,oBAAC,SAAI,WAAU,YAAY,kBAAO;AAAA,KAC/C;AAEJ;","names":[]}

package/dist/product-editor/sections/template-fields-section.d.ts

@@ -0,0 +1,25 @@
+import type { ContentFieldConfig } from '@withpotter/lib/template-types';
+export interface TemplateFieldGroup {
+    name: string;
+    label: string;
+    description?: string;
+    fields: string[];
+}
+interface TemplateFieldsSectionProps {
+    /** The template's fields for this content type. */
+    fields: ContentFieldConfig[];
+    /** The template's own grouping, if it declared one. */
+    fieldGroups?: TemplateFieldGroup[];
+    formValues: Record<string, unknown>;
+    setFormValues: (v: Record<string, unknown>) => void;
+    tenantCurrency: string;
+    tenantCategories: Record<string, {
+        value: string;
+        label: string;
+        sortOrder?: number;
+    }[]>;
+    tenantSlug?: string;
+    bare?: boolean;
+}
+export declare function TemplateFieldsSection({ fields, fieldGroups, formValues, setFormValues, tenantCurrency, tenantCategories, tenantSlug, bare, }: TemplateFieldsSectionProps): import("react").JSX.Element | null;
+export {};

package/dist/product-editor/sections/template-fields-section.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { DynamicForm } from "@withpotter/components/dynamic-form";
+import { AddChip } from "@withpotter/ui-kit";
+import { EditorSectionHeader } from "./section-header";
+const EDITOR_OWNED = /* @__PURE__ */ new Set([
+  "title",
+  "slug",
+  "shortDescription",
+  "description",
+  "image",
+  "gallery",
+  "price",
+  "compareAtPrice",
+  "costPrice",
+  "sku",
+  "category",
+  "trackInventory",
+  "quantity",
+  "lowStockThreshold",
+  "featured",
+  "newArrival",
+  "onSale",
+  "status"
+]);
+function isFilled(value) {
+  if (value == null) return false;
+  if (typeof value === "string") return value.trim().length > 0;
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === "object") return Object.keys(value).length > 0;
+  return true;
+}
+function TemplateFieldsSection({
+  fields,
+  fieldGroups,
+  formValues,
+  setFormValues,
+  tenantCurrency,
+  tenantCategories,
+  tenantSlug,
+  bare
+}) {
+  const [opened, setOpened] = useState(/* @__PURE__ */ new Set());
+  const extra = useMemo(
+    () => fields.filter((field) => !EDITOR_OWNED.has(field.name)),
+    [fields]
+  );
+  const filledCount = useMemo(
+    () => extra.filter((f) => isFilled(formValues[f.name])).length,
+    [extra, formValues]
+  );
+  if (extra.length === 0) return null;
+  const shows = (field) => field.required || opened.has(field.name) || isFilled(formValues[field.name]);
+  const grouped = new Set((fieldGroups ?? []).flatMap((group) => group.fields));
+  const blocks = [
+    ...(fieldGroups ?? []).map((group) => ({
+      key: group.name,
+      label: group.label,
+      description: group.description,
+      fields: extra.filter((field) => group.fields.includes(field.name))
+    })).filter((block) => block.fields.length > 0),
+    {
+      key: "__ungrouped",
+      label: "Details",
+      description: void 0,
+      fields: extra.filter((field) => !grouped.has(field.name))
+    }
+  ].filter((block) => block.fields.length > 0);
+  const content = /* @__PURE__ */ jsx("div", { className: "space-y-6", children: blocks.map((block) => {
+    const shown = block.fields.filter(shows);
+    const rest = block.fields.filter((field) => !shows(field));
+    return /* @__PURE__ */ jsxs("div", { children: [
+      blocks.length > 1 && /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs font-medium text-[var(--text-secondary)]", children: block.label }),
+      shown.length > 0 && /* @__PURE__ */ jsx(
+        DynamicForm,
+        {
+          fields: shown,
+          values: formValues,
+          onChange: setFormValues,
+          currencyCode: tenantCurrency,
+          tenantCategories,
+          tenantSlug
+        }
+      ),
+      rest.length > 0 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `flex flex-wrap gap-2 ${shown.length > 0 ? "mt-3" : ""}`,
+          children: rest.map((field) => /* @__PURE__ */ jsx(
+            AddChip,
+            {
+              onClick: () => setOpened((prev) => new Set(prev).add(field.name)),
+              children: field.label
+            },
+            field.name
+          ))
+        }
+      )
+    ] }, block.key);
+  }) });
+  if (bare) return content;
+  return /* @__PURE__ */ jsx("section", { id: "section-templateFields", children: /* @__PURE__ */ jsxs("div", { className: "surface", children: [
+    /* @__PURE__ */ jsx(
+      EditorSectionHeader,
+      {
+        title: "Details",
+        description: filledCount > 0 ? `What your website asks for on this kind of item \u2014 ${filledCount} of ${extra.length} filled` : "What your website asks for on this kind of item"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "p-4", children: content })
+  ] }) });
+}
+export {
+  TemplateFieldsSection
+};
+//# sourceMappingURL=template-fields-section.js.map

package/dist/product-editor/sections/template-fields-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/template-fields-section.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport { DynamicForm } from '@withpotter/components/dynamic-form';\nimport { AddChip } from '@withpotter/ui-kit';\nimport type { ContentFieldConfig } from '@withpotter/lib/template-types';\nimport { EditorSectionHeader } from './section-header';\n\n/**\n * The fields this template asked for.\n *\n * A template declares what its pages actually render: a room's check-in time,\n * how many a terrace seats standing, what is in the room. Those declarations\n * reached the editor and stopped there — the schema was threaded into this\n * component and never drawn — so a merchant on a template that needed them\n * had no way to fill them in, and the pages that read them stayed blank.\n *\n * Only the fields the editor does not already own in a dedicated section, so\n * a template that redeclares `title` or `price` does not get a second input\n * for it further down the page.\n */\nconst EDITOR_OWNED = new Set([\n  'title',\n  'slug',\n  'shortDescription',\n  'description',\n  'image',\n  'gallery',\n  'price',\n  'compareAtPrice',\n  'costPrice',\n  'sku',\n  'category',\n  'trackInventory',\n  'quantity',\n  'lowStockThreshold',\n  'featured',\n  'newArrival',\n  'onSale',\n  'status',\n]);\n\nexport interface TemplateFieldGroup {\n  name: string;\n  label: string;\n  description?: string;\n  fields: string[];\n}\n\ninterface TemplateFieldsSectionProps {\n  /** The template's fields for this content type. */\n  fields: ContentFieldConfig[];\n  /** The template's own grouping, if it declared one. */\n  fieldGroups?: TemplateFieldGroup[];\n  formValues: Record<string, unknown>;\n  setFormValues: (v: Record<string, unknown>) => void;\n  tenantCurrency: string;\n  tenantCategories: Record<\n    string,\n    { value: string; label: string; sortOrder?: number }[]\n  >;\n  tenantSlug?: string;\n  bare?: boolean;\n}\n\nfunction isFilled(value: unknown): boolean {\n  if (value == null) return false;\n  if (typeof value === 'string') return value.trim().length > 0;\n  if (Array.isArray(value)) return value.length > 0;\n  if (typeof value === 'object') return Object.keys(value).length > 0;\n  return true;\n}\n\nexport function TemplateFieldsSection({\n  fields,\n  fieldGroups,\n  formValues,\n  setFormValues,\n  tenantCurrency,\n  tenantCategories,\n  tenantSlug,\n  bare,\n}: TemplateFieldsSectionProps) {\n  /**\n   * A field the merchant opened deliberately. Empty and unopened fields are\n   * offered as chips instead of rendered as inputs — see the note below.\n   */\n  const [opened, setOpened] = useState<Set<string>>(new Set());\n\n  const extra = useMemo(\n    () => fields.filter((field) => !EDITOR_OWNED.has(field.name)),\n    [fields],\n  );\n\n  const filledCount = useMemo(\n    () => extra.filter((f) => isFilled(formValues[f.name])).length,\n    [extra, formValues],\n  );\n\n  if (extra.length === 0) return null;\n\n  /**\n   * SEVENTEEN EMPTY BOXES ARE NOT SEVENTEEN QUESTIONS WORTH ASKING.\n   *\n   * This block was 2,045px of the editor — 46% of the whole page — because an\n   * event-hall template declares seventeen optional fields and every one of\n   * them rendered as an input whether or not it had anything in it. A merchant\n   * listing a hall met \"Power\", \"Parking\", \"What comes with the hall\" and\n   * fourteen more before they reached anything they had to answer, all of them\n   * blank, none of them required, and no signal anywhere that skipping the lot\n   * still produces a perfectly good listing.\n   *\n   * So a field earns its box by having something in it, or by being asked for.\n   * Required fields always show — the template said they matter. Everything\n   * else waits behind its own name as a chip, which is one click to open and\n   * says what is available without spending a screen on it.\n   */\n  const shows = (field: ContentFieldConfig) =>\n    field.required ||\n    opened.has(field.name) ||\n    isFilled(formValues[field.name]);\n\n  // The template's groups first, in its order, then anything it declared but\n  // did not group.\n  const grouped = new Set((fieldGroups ?? []).flatMap((group) => group.fields));\n  const blocks = [\n    ...(fieldGroups ?? [])\n      .map((group) => ({\n        key: group.name,\n        label: group.label,\n        description: group.description,\n        fields: extra.filter((field) => group.fields.includes(field.name)),\n      }))\n      .filter((block) => block.fields.length > 0),\n    {\n      key: '__ungrouped',\n      label: 'Details',\n      description: undefined,\n      fields: extra.filter((field) => !grouped.has(field.name)),\n    },\n  ].filter((block) => block.fields.length > 0);\n\n  const content = (\n    <div className=\"space-y-6\">\n      {blocks.map((block) => {\n        const shown = block.fields.filter(shows);\n        const rest = block.fields.filter((field) => !shows(field));\n        return (\n          <div key={block.key}>\n            {blocks.length > 1 && (\n              <p className=\"mb-3 text-xs font-medium text-[var(--text-secondary)]\">\n                {block.label}\n              </p>\n            )}\n\n            {shown.length > 0 && (\n              <DynamicForm\n                fields={shown}\n                values={formValues}\n                onChange={setFormValues}\n                currencyCode={tenantCurrency}\n                tenantCategories={tenantCategories}\n                tenantSlug={tenantSlug}\n              />\n            )}\n\n            {rest.length > 0 && (\n              <div\n                className={`flex flex-wrap gap-2 ${shown.length > 0 ? 'mt-3' : ''}`}\n              >\n                {rest.map((field) => (\n                  <AddChip\n                    key={field.name}\n                    onClick={() =>\n                      setOpened((prev) => new Set(prev).add(field.name))\n                    }\n                  >\n                    {field.label}\n                  </AddChip>\n                ))}\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n\n  if (bare) return content;\n\n  return (\n    <section id=\"section-templateFields\">\n      <div className=\"surface\">\n        {/* Was a hand-rolled header shouting DETAILS in `uppercase\n            tracking-wider` — the eyebrow that EditorSectionHeader exists to\n            stop every section from re-inventing. */}\n        {/* The count appears once there is progress to report. \"0 of 17\n            filled\" on a brand-new item is a score against someone who has not\n            been given a chance to type yet — and it is the only section on the\n            screen that grades you, opening at zero. These fields are optional;\n            the header should not open by implying otherwise. */}\n        <EditorSectionHeader\n          title=\"Details\"\n          description={\n            filledCount > 0\n              ? `What your website asks for on this kind of item — ${filledCount} of ${extra.length} filled`\n              : 'What your website asks for on this kind of item'\n          }\n        />\n        <div className=\"p-4\">{content}</div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AAoJU,SAEI,KAFJ;AAlJV,SAAS,SAAS,gBAAgB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAepC,MAAM,eAAe,oBAAI,IAAI;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAyBD,SAAS,SAAS,OAAyB;AACzC,MAAI,SAAS,KAAM,QAAO;AAC1B,MAAI,OAAO,UAAU,SAAU,QAAO,MAAM,KAAK,EAAE,SAAS;AAC5D,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,MAAM,SAAS;AAChD,MAAI,OAAO,UAAU,SAAU,QAAO,OAAO,KAAK,KAAK,EAAE,SAAS;AAClE,SAAO;AACT;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAK7B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsB,oBAAI,IAAI,CAAC;AAE3D,QAAM,QAAQ;AAAA,IACZ,MAAM,OAAO,OAAO,CAAC,UAAU,CAAC,aAAa,IAAI,MAAM,IAAI,CAAC;AAAA,IAC5D,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,cAAc;AAAA,IAClB,MAAM,MAAM,OAAO,CAAC,MAAM,SAAS,WAAW,EAAE,IAAI,CAAC,CAAC,EAAE;AAAA,IACxD,CAAC,OAAO,UAAU;AAAA,EACpB;AAEA,MAAI,MAAM,WAAW,EAAG,QAAO;AAkB/B,QAAM,QAAQ,CAAC,UACb,MAAM,YACN,OAAO,IAAI,MAAM,IAAI,KACrB,SAAS,WAAW,MAAM,IAAI,CAAC;AAIjC,QAAM,UAAU,IAAI,KAAK,eAAe,CAAC,GAAG,QAAQ,CAAC,UAAU,MAAM,MAAM,CAAC;AAC5E,QAAM,SAAS;AAAA,IACb,IAAI,eAAe,CAAC,GACjB,IAAI,CAAC,WAAW;AAAA,MACf,KAAK,MAAM;AAAA,MACX,OAAO,MAAM;AAAA,MACb,aAAa,MAAM;AAAA,MACnB,QAAQ,MAAM,OAAO,CAAC,UAAU,MAAM,OAAO,SAAS,MAAM,IAAI,CAAC;AAAA,IACnE,EAAE,EACD,OAAO,CAAC,UAAU,MAAM,OAAO,SAAS,CAAC;AAAA,IAC5C;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,aAAa;AAAA,MACb,QAAQ,MAAM,OAAO,CAAC,UAAU,CAAC,QAAQ,IAAI,MAAM,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF,EAAE,OAAO,CAAC,UAAU,MAAM,OAAO,SAAS,CAAC;AAE3C,QAAM,UACJ,oBAAC,SAAI,WAAU,aACZ,iBAAO,IAAI,CAAC,UAAU;AACrB,UAAM,QAAQ,MAAM,OAAO,OAAO,KAAK;AACvC,UAAM,OAAO,MAAM,OAAO,OAAO,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC;AACzD,WACE,qBAAC,SACE;AAAA,aAAO,SAAS,KACf,oBAAC,OAAE,WAAU,yDACV,gBAAM,OACT;AAAA,MAGD,MAAM,SAAS,KACd;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,cAAc;AAAA,UACd;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAGD,KAAK,SAAS,KACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,wBAAwB,MAAM,SAAS,IAAI,SAAS,EAAE;AAAA,UAEhE,eAAK,IAAI,CAAC,UACT;AAAA,YAAC;AAAA;AAAA,cAEC,SAAS,MACP,UAAU,CAAC,SAAS,IAAI,IAAI,IAAI,EAAE,IAAI,MAAM,IAAI,CAAC;AAAA,cAGlD,gBAAM;AAAA;AAAA,YALF,MAAM;AAAA,UAMb,CACD;AAAA;AAAA,MACH;AAAA,SAhCM,MAAM,GAkChB;AAAA,EAEJ,CAAC,GACH;AAGF,MAAI,KAAM,QAAO;AAEjB,SACE,oBAAC,aAAQ,IAAG,0BACV,+BAAC,SAAI,WAAU,WASb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aACE,cAAc,IACV,0DAAqD,WAAW,OAAO,MAAM,MAAM,YACnF;AAAA;AAAA,IAER;AAAA,IACA,oBAAC,SAAI,WAAU,OAAO,mBAAQ;AAAA,KAChC,GACF;AAEJ;","names":[]}

package/dist/product-editor/sections/use-media-ingest.d.ts

@@ -0,0 +1,11 @@
+import { type ProductGalleryItem } from '@withpotter/lib/media-utils';
+/**
+ * Files into product media for the Media card: screened, uploaded one after
+ * another, and taken from a paste onto the card itself.
+ */
+export declare function useMediaIngest(galleryItems: ProductGalleryItem[], onGalleryItemsChange: React.Dispatch<React.SetStateAction<ProductGalleryItem[]>>, rootRef: React.RefObject<HTMLDivElement | null>): {
+    ingest: (files: File[]) => Promise<void>;
+    uploading: number;
+    progress: number;
+    failed: string | null;
+};

package/dist/product-editor/sections/use-media-ingest.js

@@ -0,0 +1,83 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { screenFiles } from "@withpotter/lib/file-intake";
+import { uploadImageWithProgress } from "@withpotter/lib/media-service";
+import {
+  createGalleryItemId,
+  MAX_GALLERY_ITEMS
+} from "@withpotter/lib/media-utils";
+function isMedia(file) {
+  return file.type.startsWith("image/") || file.type.startsWith("video/");
+}
+function useMediaIngest(galleryItems, onGalleryItemsChange, rootRef) {
+  const [uploading, setUploading] = useState(0);
+  const [failed, setFailed] = useState(null);
+  const [progress, setProgress] = useState(0);
+  const batch = useRef({ total: 0, done: 0 });
+  const report = useCallback((current) => {
+    const { total, done } = batch.current;
+    if (total === 0) return;
+    setProgress(Math.min(100, Math.round((done + current) / total * 100)));
+  }, []);
+  const ingest = useCallback(
+    async (files) => {
+      const { accepted, message } = screenFiles(files, {
+        accept: "image/*,video/*",
+        maxFiles: MAX_GALLERY_ITEMS,
+        currentCount: galleryItems.length
+      });
+      setFailed(message);
+      if (accepted.length === 0) return;
+      setUploading((n) => n + accepted.length);
+      batch.current.total += accepted.length;
+      for (const file of accepted) {
+        try {
+          const result = await uploadImageWithProgress(
+            file,
+            (p) => report(p / 100)
+          );
+          const item = {
+            id: createGalleryItemId(result.url),
+            url: result.url,
+            type: result.resourceType === "video" ? "video" : "image",
+            width: result.width,
+            height: result.height,
+            thumbnail: result.thumbnail,
+            duration: result.duration
+          };
+          onGalleryItemsChange((prev) => [...prev, item]);
+        } catch (e) {
+          setFailed(
+            e instanceof Error ? e.message : `Could not upload ${file.name}`
+          );
+        } finally {
+          batch.current.done += 1;
+          report(0);
+          if (batch.current.done >= batch.current.total) {
+            batch.current = { total: 0, done: 0 };
+            setProgress(0);
+          }
+          setUploading((n) => n - 1);
+        }
+      }
+    },
+    [galleryItems.length, onGalleryItemsChange, report]
+  );
+  useEffect(() => {
+    const node = rootRef.current;
+    if (!node) return;
+    const onPaste = (e) => {
+      const files = Array.from(e.clipboardData?.files ?? []).filter(isMedia);
+      if (files.length === 0) return;
+      e.preventDefault();
+      void ingest(files);
+    };
+    node.addEventListener("paste", onPaste);
+    return () => node.removeEventListener("paste", onPaste);
+  }, [ingest, rootRef]);
+  return { ingest, uploading, progress, failed };
+}
+export {
+  useMediaIngest
+};
+//# sourceMappingURL=use-media-ingest.js.map

package/dist/product-editor/sections/use-media-ingest.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/use-media-ingest.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { screenFiles } from '@withpotter/lib/file-intake';\nimport { uploadImageWithProgress } from '@withpotter/lib/media-service';\nimport {\n  createGalleryItemId,\n  MAX_GALLERY_ITEMS,\n  type ProductGalleryItem,\n} from '@withpotter/lib/media-utils';\n\nfunction isMedia(file: File) {\n  return file.type.startsWith('image/') || file.type.startsWith('video/');\n}\n\n/**\n * Files into product media for the Media card: screened, uploaded one after\n * another, and taken from a paste onto the card itself.\n */\nexport function useMediaIngest(\n  galleryItems: ProductGalleryItem[],\n  onGalleryItemsChange: React.Dispatch<\n    React.SetStateAction<ProductGalleryItem[]>\n  >,\n  rootRef: React.RefObject<HTMLDivElement | null>,\n) {\n  const [uploading, setUploading] = useState(0);\n  const [failed, setFailed] = useState<string | null>(null);\n  // Whole-batch progress, 0–100: files already through plus the fraction of\n  // the one in flight, over every file queued since the last idle moment.\n  const [progress, setProgress] = useState(0);\n  const batch = useRef({ total: 0, done: 0 });\n\n  const report = useCallback((current: number) => {\n    const { total, done } = batch.current;\n    if (total === 0) return;\n    setProgress(Math.min(100, Math.round(((done + current) / total) * 100)));\n  }, []);\n\n  const ingest = useCallback(\n    async (files: File[]) => {\n      // Screened, not silently filtered: a merchant who drops a PDF among\n      // eight photos gets told the PDF stayed out, and one who drops past the\n      // gallery cap is told there was no room rather than watching two of the\n      // eight quietly fail to appear.\n      const { accepted, message } = screenFiles(files, {\n        accept: 'image/*,video/*',\n        maxFiles: MAX_GALLERY_ITEMS,\n        currentCount: galleryItems.length,\n      });\n      setFailed(message);\n      if (accepted.length === 0) return;\n\n      setUploading((n) => n + accepted.length);\n      batch.current.total += accepted.length;\n\n      // Sequential, not Promise.all: a merchant dropping eight photos on a\n      // Lagos connection gets eight tiles appearing one after another rather\n      // than one long nothing followed by all of them.\n      for (const file of accepted) {\n        try {\n          const result = await uploadImageWithProgress(file, (p) =>\n            report(p / 100),\n          );\n          const item: ProductGalleryItem = {\n            id: createGalleryItemId(result.url),\n            url: result.url,\n            type: result.resourceType === 'video' ? 'video' : 'image',\n            width: result.width,\n            height: result.height,\n            thumbnail: result.thumbnail,\n            duration: result.duration,\n          };\n          onGalleryItemsChange((prev) => [...prev, item]);\n        } catch (e) {\n          setFailed(\n            e instanceof Error ? e.message : `Could not upload ${file.name}`,\n          );\n        } finally {\n          batch.current.done += 1;\n          report(0);\n          if (batch.current.done >= batch.current.total) {\n            batch.current = { total: 0, done: 0 };\n            setProgress(0);\n          }\n          setUploading((n) => n - 1);\n        }\n      }\n    },\n    [galleryItems.length, onGalleryItemsChange, report],\n  );\n\n  /**\n   * Paste is scoped to this card, not the window: ⌘V while the cursor is in\n   * the description should paste text into the description, not silently\n   * upload whatever image happens to be on the clipboard.\n   */\n  useEffect(() => {\n    const node = rootRef.current;\n    if (!node) return;\n    const onPaste = (e: ClipboardEvent) => {\n      const files = Array.from(e.clipboardData?.files ?? []).filter(isMedia);\n      if (files.length === 0) return;\n      e.preventDefault();\n      void ingest(files);\n    };\n    node.addEventListener('paste', onPaste);\n    return () => node.removeEventListener('paste', onPaste);\n  }, [ingest, rootRef]);\n\n  return { ingest, uploading, progress, failed };\n}\n"],"mappings":";AAEA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AACzD,SAAS,mBAAmB;AAC5B,SAAS,+BAA+B;AACxC;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,QAAQ,MAAY;AAC3B,SAAO,KAAK,KAAK,WAAW,QAAQ,KAAK,KAAK,KAAK,WAAW,QAAQ;AACxE;AAMO,SAAS,eACd,cACA,sBAGA,SACA;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AAGxD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,QAAQ,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,CAAC;AAE1C,QAAM,SAAS,YAAY,CAAC,YAAoB;AAC9C,UAAM,EAAE,OAAO,KAAK,IAAI,MAAM;AAC9B,QAAI,UAAU,EAAG;AACjB,gBAAY,KAAK,IAAI,KAAK,KAAK,OAAQ,OAAO,WAAW,QAAS,GAAG,CAAC,CAAC;AAAA,EACzE,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS;AAAA,IACb,OAAO,UAAkB;AAKvB,YAAM,EAAE,UAAU,QAAQ,IAAI,YAAY,OAAO;AAAA,QAC/C,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,cAAc,aAAa;AAAA,MAC7B,CAAC;AACD,gBAAU,OAAO;AACjB,UAAI,SAAS,WAAW,EAAG;AAE3B,mBAAa,CAAC,MAAM,IAAI,SAAS,MAAM;AACvC,YAAM,QAAQ,SAAS,SAAS;AAKhC,iBAAW,QAAQ,UAAU;AAC3B,YAAI;AACF,gBAAM,SAAS,MAAM;AAAA,YAAwB;AAAA,YAAM,CAAC,MAClD,OAAO,IAAI,GAAG;AAAA,UAChB;AACA,gBAAM,OAA2B;AAAA,YAC/B,IAAI,oBAAoB,OAAO,GAAG;AAAA,YAClC,KAAK,OAAO;AAAA,YACZ,MAAM,OAAO,iBAAiB,UAAU,UAAU;AAAA,YAClD,OAAO,OAAO;AAAA,YACd,QAAQ,OAAO;AAAA,YACf,WAAW,OAAO;AAAA,YAClB,UAAU,OAAO;AAAA,UACnB;AACA,+BAAqB,CAAC,SAAS,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,QAChD,SAAS,GAAG;AACV;AAAA,YACE,aAAa,QAAQ,EAAE,UAAU,oBAAoB,KAAK,IAAI;AAAA,UAChE;AAAA,QACF,UAAE;AACA,gBAAM,QAAQ,QAAQ;AACtB,iBAAO,CAAC;AACR,cAAI,MAAM,QAAQ,QAAQ,MAAM,QAAQ,OAAO;AAC7C,kBAAM,UAAU,EAAE,OAAO,GAAG,MAAM,EAAE;AACpC,wBAAY,CAAC;AAAA,UACf;AACA,uBAAa,CAAC,MAAM,IAAI,CAAC;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,aAAa,QAAQ,sBAAsB,MAAM;AAAA,EACpD;AAOA,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,UAAM,UAAU,CAAC,MAAsB;AACrC,YAAM,QAAQ,MAAM,KAAK,EAAE,eAAe,SAAS,CAAC,CAAC,EAAE,OAAO,OAAO;AACrE,UAAI,MAAM,WAAW,EAAG;AACxB,QAAE,eAAe;AACjB,WAAK,OAAO,KAAK;AAAA,IACnB;AACA,SAAK,iBAAiB,SAAS,OAAO;AACtC,WAAO,MAAM,KAAK,oBAAoB,SAAS,OAAO;AAAA,EACxD,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,SAAO,EAAE,QAAQ,WAAW,UAAU,OAAO;AAC/C;","names":[]}

package/dist/product-editor/sections/variants-section.d.ts

@@ -0,0 +1,17 @@
+import type { ProductVariant } from '@withpotter/lib/product-types';
+import type { VariantOption } from '@withpotter/hooks/use-product-form-state';
+interface VariantsSectionProps {
+    hasVariants: boolean;
+    setHasVariants: (v: boolean) => void;
+    variants: ProductVariant[];
+    setVariants: React.Dispatch<React.SetStateAction<ProductVariant[]>>;
+    variantOptions: VariantOption[];
+    setVariantOptions: React.Dispatch<React.SetStateAction<VariantOption[]>>;
+    defaultPrice?: number;
+    currencySymbol: string;
+    bare?: boolean;
+    productQuantity?: number | '';
+    showProfitability?: boolean;
+}
+export declare function VariantsSection({ hasVariants, setHasVariants, variants, setVariants, variantOptions, setVariantOptions, defaultPrice, currencySymbol, bare, productQuantity, showProfitability, }: VariantsSectionProps): import("react").JSX.Element;
+export {};