@withpotter/components 0.13.0-next.101

package/dist/dashboard.d.ts

@@ -0,0 +1 @@
+export * from './dashboard/index';

package/dist/dashboard.js

@@ -0,0 +1 @@
+export * from './dashboard/index.js';

package/dist/digital-files-block.d.ts

@@ -0,0 +1,11 @@
+interface DigitalFilesBlockProps {
+    contentId: string | null;
+    /** Whether the content item is saved (has an ID) */
+    isNewItem: boolean;
+    /** Queued files for upload after save (used during create) */
+    pendingFiles?: File[];
+    /** Callback to update queued files */
+    onPendingFilesChange?: React.Dispatch<React.SetStateAction<File[]>>;
+}
+export declare function DigitalFilesBlock({ contentId, isNewItem, pendingFiles, onPendingFilesChange, }: DigitalFilesBlockProps): import("react").JSX.Element;
+export {};

package/dist/digital-files-block.js

@@ -0,0 +1,201 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { Pencil } from "lucide-react";
+import { digitalFilesApi } from "@withpotter/lib/api/digital-files";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { StorageMeter } from "@withpotter/components/shared/storage-meter";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { InlineDeleteButton } from "@withpotter/ui-kit/inline-delete-button";
+import { Button } from "@withpotter/ui-kit/button";
+import { Dropzone } from "@withpotter/ui-kit/dropzone";
+import { FileRow, FileRowGroup } from "@withpotter/ui-kit/file-row";
+import { fileKind } from "@withpotter/lib/file-intake";
+import { formatBytes } from "@withpotter/lib/utils";
+const MAX_SIZE_MB = 500;
+const HINT = "Files customers receive after purchase \xB7 Up to 500MB each";
+function DigitalFilesBlock({
+  contentId,
+  isNewItem,
+  pendingFiles,
+  onPendingFilesChange
+}) {
+  const { tenant } = useAuth();
+  const { toast } = useToast();
+  const [files, setFiles] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const loadFiles = useCallback(async () => {
+    if (!contentId || !tenant?.slug) return;
+    setLoading(true);
+    try {
+      const result = await digitalFilesApi.listByContent(
+        tenant.slug,
+        contentId
+      );
+      setFiles(result);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }, [contentId, tenant?.slug]);
+  useEffect(() => {
+    loadFiles();
+  }, [loadFiles]);
+  const handleUpload = async (picked) => {
+    if (!contentId || !tenant?.slug) return;
+    setUploading(true);
+    try {
+      for (const file of picked) {
+        const result = await digitalFilesApi.upload(
+          tenant.slug,
+          contentId,
+          file
+        );
+        setFiles((prev) => [...prev, result]);
+      }
+      toast({
+        title: picked.length > 1 ? `${picked.length} files uploaded` : "File uploaded",
+        description: picked.length === 1 ? picked[0].name : void 0
+      });
+    } catch (err) {
+      toast({
+        title: "Upload failed",
+        description: err.message,
+        variant: "destructive"
+      });
+    } finally {
+      setUploading(false);
+    }
+  };
+  const handleDelete = async (fileId) => {
+    if (!tenant?.slug) return;
+    try {
+      await digitalFilesApi.delete(tenant.slug, fileId);
+      setFiles((prev) => prev.filter((f) => f.id !== fileId));
+      toast({ title: "File deleted" });
+    } catch (err) {
+      toast({
+        title: "Delete failed",
+        description: err.message,
+        variant: "destructive"
+      });
+    }
+  };
+  const handleRename = async (fileId, currentName) => {
+    const newName = prompt("File display name:", currentName);
+    if (!newName || newName === currentName || !tenant?.slug) return;
+    try {
+      const updated = await digitalFilesApi.update(tenant.slug, fileId, {
+        filename: newName
+      });
+      setFiles((prev) => prev.map((f) => f.id === fileId ? updated : f));
+    } catch (err) {
+      toast({
+        title: "Rename failed",
+        description: err.message,
+        variant: "destructive"
+      });
+    }
+  };
+  if (isNewItem) {
+    const queuedFiles = pendingFiles || [];
+    return /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-3", children: [
+      /* @__PURE__ */ jsx(
+        Header,
+        {
+          title: "Digital files",
+          count: queuedFiles.length,
+          suffix: "queued"
+        }
+      ),
+      queuedFiles.length > 0 && /* @__PURE__ */ jsx(FileRowGroup, { children: queuedFiles.map((file, index) => /* @__PURE__ */ jsx(
+        FileRow,
+        {
+          name: file.name,
+          kind: fileKind(file),
+          size: file.size,
+          status: "pending",
+          onRemove: onPendingFilesChange ? () => onPendingFilesChange(
+            (prev) => prev.filter((_, i) => i !== index)
+          ) : void 0
+        },
+        `${file.name}-${index}`
+      )) }),
+      onPendingFilesChange && /* @__PURE__ */ jsx(
+        Dropzone,
+        {
+          multiple: true,
+          maxSizeMb: MAX_SIZE_MB,
+          hint: `${HINT} \xB7 Uploaded when you save`,
+          onFiles: (picked) => onPendingFilesChange((prev) => [...prev, ...picked])
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-3", children: [
+    /* @__PURE__ */ jsx(Header, { title: "Digital files", count: files.length }),
+    /* @__PURE__ */ jsx(StorageMeter, { className: "rounded-lg border border-[var(--border-default)] p-4" }),
+    loading && !files.length ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-[var(--border-default)] p-4 text-center text-sm text-[var(--text-tertiary)]", children: "Loading files\u2026" }) : files.length > 0 ? /* @__PURE__ */ jsx(FileRowGroup, { children: files.map((file) => /* @__PURE__ */ jsx(
+      FileRow,
+      {
+        name: file.filename,
+        kind: fileKind({ name: file.filename, type: file.mimeType }),
+        size: file.fileSize,
+        meta: file.downloadLimit ? `${file.fileSize ? `${formatBytes(file.fileSize)} \xB7 ` : ""}${file.downloadLimit} downloads max` : void 0,
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: () => handleRename(file.id, file.filename),
+              "aria-label": `Rename ${file.filename}`,
+              title: "Rename",
+              children: /* @__PURE__ */ jsx(Pencil, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InlineDeleteButton,
+            {
+              onDelete: () => handleDelete(file.id),
+              confirmText: "Delete file?"
+            }
+          )
+        ] })
+      },
+      file.id
+    )) }) : null,
+    /* @__PURE__ */ jsx(
+      Dropzone,
+      {
+        multiple: true,
+        maxSizeMb: MAX_SIZE_MB,
+        busy: uploading,
+        hint: HINT,
+        onFiles: (picked) => void handleUpload(picked)
+      }
+    )
+  ] });
+}
+function Header({
+  title,
+  count,
+  suffix
+}) {
+  return /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold text-[var(--text-primary)]", children: [
+    title,
+    count > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs font-normal text-[var(--text-tertiary)]", children: [
+      "(",
+      count,
+      " file",
+      count !== 1 ? "s" : "",
+      suffix ? ` ${suffix}` : "",
+      ")"
+    ] })
+  ] });
+}
+export {
+  DigitalFilesBlock
+};
+//# sourceMappingURL=digital-files-block.js.map

package/dist/digital-files-block.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/digital-files-block.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { Pencil } from 'lucide-react';\nimport { digitalFilesApi } from '@withpotter/lib/api/digital-files';\nimport type { DigitalFileInfo } from '@withpotter/lib/api/types';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { StorageMeter } from '@withpotter/components/shared/storage-meter';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { InlineDeleteButton } from '@withpotter/ui-kit/inline-delete-button';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Dropzone } from '@withpotter/ui-kit/dropzone';\nimport { FileRow, FileRowGroup } from '@withpotter/ui-kit/file-row';\nimport { fileKind } from '@withpotter/lib/file-intake';\nimport { formatBytes } from '@withpotter/lib/utils';\n\n/** What the storage tier allows per file. */\nconst MAX_SIZE_MB = 500;\nconst HINT = 'Files customers receive after purchase · Up to 500MB each';\n\ninterface DigitalFilesBlockProps {\n  contentId: string | null;\n  /** Whether the content item is saved (has an ID) */\n  isNewItem: boolean;\n  /** Queued files for upload after save (used during create) */\n  pendingFiles?: File[];\n  /** Callback to update queued files */\n  onPendingFilesChange?: React.Dispatch<React.SetStateAction<File[]>>;\n}\n\nexport function DigitalFilesBlock({\n  contentId,\n  isNewItem,\n  pendingFiles,\n  onPendingFilesChange,\n}: DigitalFilesBlockProps) {\n  const { tenant } = useAuth();\n  const { toast } = useToast();\n  const [files, setFiles] = useState<DigitalFileInfo[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [uploading, setUploading] = useState(false);\n\n  const loadFiles = useCallback(async () => {\n    if (!contentId || !tenant?.slug) return;\n    setLoading(true);\n    try {\n      const result = await digitalFilesApi.listByContent(\n        tenant.slug,\n        contentId,\n      );\n      setFiles(result);\n    } catch {\n      // silent\n    } finally {\n      setLoading(false);\n    }\n  }, [contentId, tenant?.slug]);\n\n  useEffect(() => {\n    loadFiles();\n  }, [loadFiles]);\n\n  const handleUpload = async (picked: File[]) => {\n    if (!contentId || !tenant?.slug) return;\n    setUploading(true);\n    try {\n      for (const file of picked) {\n        const result = await digitalFilesApi.upload(\n          tenant.slug,\n          contentId,\n          file,\n        );\n        setFiles((prev) => [...prev, result]);\n      }\n      toast({\n        title:\n          picked.length > 1\n            ? `${picked.length} files uploaded`\n            : 'File uploaded',\n        description: picked.length === 1 ? picked[0].name : undefined,\n      });\n    } catch (err) {\n      toast({\n        title: 'Upload failed',\n        description: (err as Error).message,\n        variant: 'destructive',\n      });\n    } finally {\n      setUploading(false);\n    }\n  };\n\n  const handleDelete = async (fileId: string) => {\n    if (!tenant?.slug) return;\n\n    try {\n      await digitalFilesApi.delete(tenant.slug, fileId);\n      setFiles((prev) => prev.filter((f) => f.id !== fileId));\n      toast({ title: 'File deleted' });\n    } catch (err) {\n      toast({\n        title: 'Delete failed',\n        description: (err as Error).message,\n        variant: 'destructive',\n      });\n    }\n  };\n\n  const handleRename = async (fileId: string, currentName: string) => {\n    const newName = prompt('File display name:', currentName);\n    if (!newName || newName === currentName || !tenant?.slug) return;\n\n    try {\n      const updated = await digitalFilesApi.update(tenant.slug, fileId, {\n        filename: newName,\n      });\n      setFiles((prev) => prev.map((f) => (f.id === fileId ? updated : f)));\n    } catch (err) {\n      toast({\n        title: 'Rename failed',\n        description: (err as Error).message,\n        variant: 'destructive',\n      });\n    }\n  };\n\n  /* ── Before save: files are queued, not uploaded ─────────────── */\n  if (isNewItem) {\n    const queuedFiles = pendingFiles || [];\n\n    return (\n      <div className=\"mt-6 space-y-3\">\n        <Header\n          title=\"Digital files\"\n          count={queuedFiles.length}\n          suffix=\"queued\"\n        />\n\n        {queuedFiles.length > 0 && (\n          <FileRowGroup>\n            {queuedFiles.map((file, index) => (\n              <FileRow\n                key={`${file.name}-${index}`}\n                name={file.name}\n                kind={fileKind(file)}\n                size={file.size}\n                status=\"pending\"\n                onRemove={\n                  onPendingFilesChange\n                    ? () =>\n                        onPendingFilesChange((prev) =>\n                          prev.filter((_, i) => i !== index),\n                        )\n                    : undefined\n                }\n              />\n            ))}\n          </FileRowGroup>\n        )}\n\n        {onPendingFilesChange && (\n          <Dropzone\n            multiple\n            maxSizeMb={MAX_SIZE_MB}\n            hint={`${HINT} · Uploaded when you save`}\n            onFiles={(picked) =>\n              onPendingFilesChange((prev) => [...prev, ...picked])\n            }\n          />\n        )}\n      </div>\n    );\n  }\n\n  /* ── After save: real uploads ────────────────────────────────── */\n  return (\n    <div className=\"mt-6 space-y-3\">\n      <Header title=\"Digital files\" count={files.length} />\n\n      {/* What the workspace has left.\n          Storage on a Box plan is `SUM(file_size)` over exactly two tables —\n          `gallery_items` and `digital_files` — so these uploads and the gallery\n          are the only two things that consume it. This is the bigger of the two\n          and the moment it matters: a 200MB course file is where a merchant\n          meets the ceiling. */}\n      <StorageMeter className=\"rounded-lg border border-[var(--border-default)] p-4\" />\n\n      {loading && !files.length ? (\n        <div className=\"rounded-lg border border-[var(--border-default)] p-4 text-center text-sm text-[var(--text-tertiary)]\">\n          Loading files…\n        </div>\n      ) : files.length > 0 ? (\n        <FileRowGroup>\n          {files.map((file) => (\n            <FileRow\n              key={file.id}\n              name={file.filename}\n              kind={fileKind({ name: file.filename, type: file.mimeType })}\n              size={file.fileSize}\n              meta={\n                file.downloadLimit\n                  ? `${file.fileSize ? `${formatBytes(file.fileSize)} · ` : ''}${file.downloadLimit} downloads max`\n                  : undefined\n              }\n              actions={\n                <>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    onClick={() => handleRename(file.id, file.filename)}\n                    aria-label={`Rename ${file.filename}`}\n                    title=\"Rename\"\n                  >\n                    <Pencil />\n                  </Button>\n                  <InlineDeleteButton\n                    onDelete={() => handleDelete(file.id)}\n                    confirmText=\"Delete file?\"\n                  />\n                </>\n              }\n            />\n          ))}\n        </FileRowGroup>\n      ) : null}\n\n      <Dropzone\n        multiple\n        maxSizeMb={MAX_SIZE_MB}\n        busy={uploading}\n        hint={HINT}\n        onFiles={(picked) => void handleUpload(picked)}\n      />\n    </div>\n  );\n}\n\nfunction Header({\n  title,\n  count,\n  suffix,\n}: {\n  title: string;\n  count: number;\n  suffix?: string;\n}) {\n  return (\n    <h3 className=\"text-sm font-semibold text-[var(--text-primary)]\">\n      {title}\n      {count > 0 && (\n        <span className=\"ml-2 text-xs font-normal text-[var(--text-tertiary)]\">\n          ({count} file{count !== 1 ? 's' : ''}\n          {suffix ? ` ${suffix}` : ''})\n        </span>\n      )}\n    </h3>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/discount-editor/discount-editor-content.d.ts

@@ -0,0 +1,8 @@
+import type { useDiscountFormState } from '@withpotter/hooks/use-discount-form-state';
+type DiscountFormState = ReturnType<typeof useDiscountFormState>;
+interface DiscountEditorContentProps {
+    state: DiscountFormState;
+    currencyCode: string;
+}
+export declare function DiscountEditorContent({ state, currencyCode, }: DiscountEditorContentProps): import("react").JSX.Element;
+export {};

package/dist/discount-editor/discount-editor-content.js

@@ -0,0 +1,399 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DetailColumns } from "@withpotter/ui-kit/detail-columns";
+import { CurrencyInput } from "@withpotter/ui-kit/currency-input";
+import { Button } from "@withpotter/ui-kit/button";
+import { Percent, Tag, Truck, Gift } from "lucide-react";
+import { ProductScopePicker } from "./product-scope-picker";
+import { TierGatePicker } from "./tier-gate-picker";
+import { Select } from "@withpotter/ui-kit/select";
+import { Input, Checkbox, NumberField, OptionButton } from "@withpotter/ui-kit";
+import { Textarea } from "@withpotter/ui-kit";
+const todayDateTimeLocal = () => {
+  const now = /* @__PURE__ */ new Date();
+  now.setSeconds(0, 0);
+  return now.toISOString().slice(0, 16);
+};
+const tomorrowDateTimeLocal = () => {
+  const d = /* @__PURE__ */ new Date();
+  d.setDate(d.getDate() + 1);
+  d.setHours(0, 0, 0, 0);
+  return d.toISOString().slice(0, 16);
+};
+const DISCOUNT_TYPES = [
+  { type: "percentage", label: "Percentage", icon: Percent },
+  { type: "fixed_amount", label: "Fixed amount", icon: Tag },
+  { type: "free_shipping", label: "Free shipping", icon: Truck },
+  { type: "buy_x_get_y", label: "Buy X get Y", icon: Gift }
+];
+function DiscountEditorContent({
+  state,
+  currencyCode
+}) {
+  return /* @__PURE__ */ jsxs(
+    DetailColumns,
+    {
+      className: "pb-12",
+      aside: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-4 text-sm font-medium text-[var(--text-primary)]", children: "Schedule" }),
+          /* @__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: "Starts" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "datetime-local",
+                  value: state.startsAt,
+                  min: todayDateTimeLocal(),
+                  onChange: (e) => state.setStartsAt(e.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Ends" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "datetime-local",
+                  value: state.endsAt,
+                  min: state.startsAt || tomorrowDateTimeLocal(),
+                  onChange: (e) => state.setEndsAt(e.target.value)
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-4 text-sm font-medium text-[var(--text-primary)]", children: "Usage limits" }),
+          /* @__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: "Total usage limit" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "number",
+                  value: state.usageLimit ?? "",
+                  onChange: (e) => state.setUsageLimit(
+                    e.target.value ? Number(e.target.value) : void 0
+                  ),
+                  placeholder: "Unlimited",
+                  min: 0
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Per customer limit" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "number",
+                  value: state.usageLimitPerCustomer ?? "",
+                  onChange: (e) => state.setUsageLimitPerCustomer(
+                    e.target.value ? Number(e.target.value) : void 0
+                  ),
+                  placeholder: "Unlimited",
+                  min: 0
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-4 text-sm font-medium text-[var(--text-primary)]", children: "Settings" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("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: "Status" }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: state.status,
+                  onChange: (next) => state.setStatus(
+                    next
+                  ),
+                  options: [
+                    { value: "active", label: "Active" },
+                    { value: "inactive", label: "Inactive" },
+                    { value: "scheduled", label: "Scheduled" }
+                  ]
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: state.autoApply,
+                onChange: (e) => state.setAutoApply(e.target.checked),
+                label: "Auto-apply at checkout"
+              }
+            )
+          ] })
+        ] })
+      ] }) }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-4 text-sm font-medium text-[var(--text-primary)]", children: "Basics" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Name" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "text",
+                  value: state.name,
+                  onChange: (e) => state.setName(e.target.value),
+                  placeholder: "Summer Sale 20% Off"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Description" }),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  value: state.description,
+                  onChange: (e) => state.setDescription(e.target.value),
+                  placeholder: "Optional description",
+                  rows: 2
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Discount code" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "text",
+                    value: state.code,
+                    onChange: (e) => state.setCode(e.target.value),
+                    className: "flex-1 font-mono",
+                    placeholder: "SUMMER20"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    onClick: state.generateCode,
+                    children: "Generate"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-4 text-sm font-medium text-[var(--text-primary)]", children: "Type and value" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: DISCOUNT_TYPES.map(({ type, label, icon: Icon }) => /* @__PURE__ */ jsxs(
+              OptionButton,
+              {
+                shape: "card",
+                selected: state.discountType === type,
+                onClick: () => state.setDiscountType(type),
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+                  label
+                ]
+              },
+              type
+            )) }),
+            (state.discountType === "percentage" || state.discountType === "fixed_amount") && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsx("div", { children: state.discountType === "percentage" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Percentage (%)" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    value: state.value ?? "",
+                    onChange: (e) => state.setValue(
+                      e.target.value ? Number(e.target.value) : void 0
+                    ),
+                    min: 0,
+                    max: 100
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx(
+                CurrencyInput,
+                {
+                  label: "Amount",
+                  value: state.value,
+                  onChange: (v) => state.setValue(v ?? void 0),
+                  currencyCode
+                }
+              ) }),
+              state.discountType === "percentage" && /* @__PURE__ */ jsx(
+                CurrencyInput,
+                {
+                  label: "Maximum discount",
+                  value: state.maxDiscountAmount,
+                  onChange: (v) => state.setMaxDiscountAmount(v ?? void 0),
+                  placeholder: "No limit",
+                  currencyCode
+                }
+              )
+            ] }),
+            state.discountType === "buy_x_get_y" && /* @__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: "Buy quantity" }),
+                /* @__PURE__ */ jsx(
+                  NumberField,
+                  {
+                    value: state.buyXGetYConfig?.buyQuantity,
+                    onChange: (v) => state.setBuyXGetYConfig({
+                      ...state.buyXGetYConfig || {
+                        buyQuantity: 0,
+                        getQuantity: 0
+                      },
+                      buyQuantity: v ?? 1
+                    }),
+                    min: 1,
+                    decimal: false
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Get quantity" }),
+                /* @__PURE__ */ jsx(
+                  NumberField,
+                  {
+                    value: state.buyXGetYConfig?.getQuantity,
+                    onChange: (v) => state.setBuyXGetYConfig({
+                      ...state.buyXGetYConfig || {
+                        buyQuantity: 0,
+                        getQuantity: 0
+                      },
+                      getQuantity: v ?? 1
+                    }),
+                    min: 1,
+                    decimal: false
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "col-span-2", children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Discount on the free items (%)" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    value: state.buyXGetYConfig?.getDiscountPercent ?? "",
+                    onChange: (e) => state.setBuyXGetYConfig({
+                      ...state.buyXGetYConfig || {
+                        buyQuantity: 0,
+                        getQuantity: 0
+                      },
+                      getDiscountPercent: e.target.value ? Number(e.target.value) : void 0
+                    }),
+                    placeholder: "100 = fully free",
+                    min: 1,
+                    max: 100
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-4 text-sm font-medium text-[var(--text-primary)]", children: "Conditions" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsx(
+                CurrencyInput,
+                {
+                  label: "Min order amount",
+                  value: state.conditions.minOrderAmount,
+                  onChange: (v) => state.setConditions({
+                    ...state.conditions,
+                    minOrderAmount: v ?? void 0
+                  }),
+                  placeholder: "No minimum",
+                  currencyCode
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Min quantity" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    value: state.conditions.minQuantity ?? "",
+                    onChange: (e) => state.setConditions({
+                      ...state.conditions,
+                      minQuantity: e.target.value ? Number(e.target.value) : void 0
+                    }),
+                    placeholder: "No minimum",
+                    min: 0
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Max quantity" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    value: state.conditions.maxQuantity ?? "",
+                    onChange: (e) => state.setConditions({
+                      ...state.conditions,
+                      maxQuantity: e.target.value ? Number(e.target.value) : void 0
+                    }),
+                    placeholder: "No maximum",
+                    min: 0
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: state.conditions.memberOnly || false,
+                  onChange: (e) => state.setConditions({
+                    ...state.conditions,
+                    memberOnly: e.target.checked
+                  }),
+                  label: "Members only"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: state.conditions.firstOrderOnly || false,
+                  onChange: (e) => state.setConditions({
+                    ...state.conditions,
+                    firstOrderOnly: e.target.checked
+                  }),
+                  label: "First order only"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              TierGatePicker,
+              {
+                selectedTierIds: state.conditions.loyaltyTierIds ?? [],
+                onChange: (ids) => state.setConditions({
+                  ...state.conditions,
+                  loyaltyTierIds: ids.length ? ids : void 0
+                })
+              }
+            ),
+            state.conditions.minOrderAmount != null && state.maxDiscountAmount != null && state.conditions.minOrderAmount > state.maxDiscountAmount && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--error)] mt-1", children: "Min order amount cannot exceed the max discount amount." }),
+            /* @__PURE__ */ jsx("div", { className: "pt-2 border-t border-[var(--border-subtle)]", children: /* @__PURE__ */ jsx(
+              ProductScopePicker,
+              {
+                conditions: state.conditions,
+                onChange: (next) => state.setConditions(next)
+              }
+            ) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DiscountEditorContent
+};
+//# sourceMappingURL=discount-editor-content.js.map