@open-mercato/core 0.6.6-develop.6094.1.28b081ea16 → 0.6.6-develop.6121.1.5797a901b3

package/dist/modules/customers/components/calendar/editor/RelatedToField.js

@@ -0,0 +1,218 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Building2, ChevronDown, User, X } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import {
+  fetchDealsForEntity,
+  searchRelatedEntities
+} from "./lookups.js";
+import { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, PersonChip, UppercaseBadge } from "./inputs.js";
+const OPTION_ROW_CLASS = "h-auto w-full justify-start gap-2 whitespace-normal px-2 py-1.5 text-left text-sm font-normal text-foreground";
+function RelatedToField({
+  label,
+  value,
+  deal,
+  onChange,
+  onDealChange,
+  error
+}) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [options, setOptions] = React.useState([]);
+  const [deals, setDeals] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  React.useEffect(() => {
+    if (!open) return;
+    const controller = new AbortController();
+    let cancelled = false;
+    const timer = window.setTimeout(async () => {
+      setLoading(true);
+      try {
+        const trimmed = query.trim();
+        const [people, companies] = await Promise.all([
+          searchRelatedEntities("person", trimmed, controller.signal),
+          searchRelatedEntities("company", trimmed, controller.signal)
+        ]);
+        if (cancelled) return;
+        setOptions([...people, ...companies]);
+      } catch {
+        if (!cancelled) setOptions([]);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }, 200);
+    return () => {
+      cancelled = true;
+      controller.abort();
+      window.clearTimeout(timer);
+    };
+  }, [open, query]);
+  React.useEffect(() => {
+    if (!open || !value || value.kind === "unknown") {
+      setDeals([]);
+      return;
+    }
+    const controller = new AbortController();
+    let cancelled = false;
+    fetchDealsForEntity({ id: value.id, kind: value.kind }, controller.signal).then((items) => {
+      if (!cancelled) setDeals(items);
+    }).catch(() => {
+      if (!cancelled) setDeals([]);
+    });
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [open, value]);
+  const kindLabel = (kind) => kind === "person" ? t("customers.deals.detail.tabs.peopleSingular", "Person") : t("customers.deals.detail.tabs.companySingular", "Company");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative w-full",
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex h-10 w-full items-center rounded-md bg-background pl-2.5 pr-3",
+              error ? "border border-status-error-border" : CONTROL_BORDER
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": open,
+                  "aria-label": label,
+                  onClick: () => setOpen((previous) => !previous),
+                  className: "h-full min-w-0 flex-1 justify-between rounded-none bg-transparent p-0 text-left shadow-none hover:bg-transparent",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "flex min-w-0 items-center gap-2", children: value ? /* @__PURE__ */ jsx(
+                      PersonChip,
+                      {
+                        compact: true,
+                        name: value.label || value.id
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-muted-foreground", children: t("customers.calendar.editor.relatedToPlaceholder", "Search people or companies\u2026") }) }),
+                    /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center", children: [
+                      deal ? /* @__PURE__ */ jsx(UppercaseBadge, { className: "h-7 bg-status-info-bg text-status-info-text", children: t("customers.calendar.editor.dealBadge", "{name} \xB7 Deal", { name: deal.label }) }) : null,
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px w-2" }),
+                      /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-4 opacity-60" })
+                    ] })
+                  ]
+                }
+              ),
+              value ? /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "ghost",
+                  size: "xs",
+                  onClick: () => {
+                    onChange(null);
+                    onDealChange(null);
+                  },
+                  "aria-label": t("customers.calendar.editor.removeRelated", "Clear related record"),
+                  className: "ms-1 shrink-0 text-muted-foreground",
+                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-3.5" })
+                }
+              ) : null
+            ]
+          }
+        ),
+        open ? /* @__PURE__ */ jsxs("div", { role: "listbox", "aria-label": label, className: DROPDOWN_PANEL_CLASS, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              placeholder: t("customers.calendar.editor.relatedToPlaceholder", "Search people or companies\u2026"),
+              "aria-label": t("customers.calendar.editor.relatedToPlaceholder", "Search people or companies\u2026"),
+              autoFocus: true,
+              size: "sm",
+              className: "mb-1"
+            }
+          ),
+          loading ? /* @__PURE__ */ jsx("p", { className: "px-2 py-3 text-center text-xs text-muted-foreground", children: t("customers.calendar.editor.searching", "Searching\u2026") }) : null,
+          !loading && options.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 py-3 text-center text-xs text-muted-foreground", children: t("customers.calendar.editor.noResults", "No results") }) : null,
+          !loading ? options.map((option) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              role: "option",
+              "aria-selected": value?.id === option.id,
+              onClick: () => {
+                onChange({ id: option.id, kind: option.kind, label: option.label });
+                if (value?.id !== option.id) onDealChange(null);
+                setQuery("");
+              },
+              className: OPTION_ROW_CLASS,
+              children: [
+                option.kind === "company" ? /* @__PURE__ */ jsx(Building2, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx(User, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                  option.label,
+                  option.subtitle ? /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: option.subtitle }) : null
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: kindLabel(option.kind) })
+              ]
+            },
+            `${option.kind}:${option.id}`
+          )) : null,
+          value && deals.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 pt-2 text-overline font-medium uppercase text-muted-foreground", children: t("customers.calendar.editor.dealsSection", "Deals") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                role: "option",
+                "aria-selected": deal === null,
+                onClick: () => {
+                  onDealChange(null);
+                  setOpen(false);
+                },
+                className: OPTION_ROW_CLASS,
+                children: t("customers.calendar.editor.dealNone", "No deal")
+              }
+            ),
+            deals.map((option) => /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                role: "option",
+                "aria-selected": deal?.id === option.id,
+                onClick: () => {
+                  onDealChange(option);
+                  setOpen(false);
+                },
+                className: OPTION_ROW_CLASS,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+                  /* @__PURE__ */ jsx(UppercaseBadge, { className: "bg-status-info-bg text-status-info-text", children: t("customers.calendar.editor.dealBadgeSuffix", "Deal") })
+                ]
+              },
+              option.id
+            ))
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  RelatedToField
+};
+//# sourceMappingURL=RelatedToField.js.map

package/dist/modules/customers/components/calendar/editor/RelatedToField.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/modules/customers/components/calendar/editor/RelatedToField.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Building2, ChevronDown, User, X } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport type { EditorRelatedTo } from '../../../lib/calendar/editorPayload'\nimport {\n  fetchDealsForEntity,\n  searchRelatedEntities,\n  type DealOption,\n  type RelatedEntityOption,\n} from './lookups'\nimport { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, PersonChip, UppercaseBadge } from './inputs'\n\nconst OPTION_ROW_CLASS =\n  'h-auto w-full justify-start gap-2 whitespace-normal px-2 py-1.5 text-left text-sm font-normal text-foreground'\n\nexport function RelatedToField({\n  label,\n  value,\n  deal,\n  onChange,\n  onDealChange,\n  error,\n}: {\n  label: string\n  value: EditorRelatedTo | null\n  deal: DealOption | null\n  onChange(next: EditorRelatedTo | null): void\n  onDealChange(next: DealOption | null): void\n  error?: string | null\n}) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [query, setQuery] = React.useState('')\n  const [options, setOptions] = React.useState<RelatedEntityOption[]>([])\n  const [deals, setDeals] = React.useState<DealOption[]>([])\n  const [loading, setLoading] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!open) return\n    const controller = new AbortController()\n    let cancelled = false\n    const timer = window.setTimeout(async () => {\n      setLoading(true)\n      try {\n        const trimmed = query.trim()\n        const [people, companies] = await Promise.all([\n          searchRelatedEntities('person', trimmed, controller.signal),\n          searchRelatedEntities('company', trimmed, controller.signal),\n        ])\n        if (cancelled) return\n        setOptions([...people, ...companies])\n      } catch {\n        if (!cancelled) setOptions([])\n      } finally {\n        if (!cancelled) setLoading(false)\n      }\n    }, 200)\n    return () => {\n      cancelled = true\n      controller.abort()\n      window.clearTimeout(timer)\n    }\n  }, [open, query])\n\n  React.useEffect(() => {\n    if (!open || !value || value.kind === 'unknown') {\n      setDeals([])\n      return\n    }\n    const controller = new AbortController()\n    let cancelled = false\n    fetchDealsForEntity({ id: value.id, kind: value.kind }, controller.signal)\n      .then((items) => { if (!cancelled) setDeals(items) })\n      .catch(() => { if (!cancelled) setDeals([]) })\n    return () => {\n      cancelled = true\n      controller.abort()\n    }\n  }, [open, value])\n\n  const kindLabel = (kind: RelatedEntityOption['kind']) =>\n    kind === 'person'\n      ? t('customers.deals.detail.tabs.peopleSingular', 'Person')\n      : t('customers.deals.detail.tabs.companySingular', 'Company')\n\n  return (\n    <div\n      className=\"relative w-full\"\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOpen(false)\n      }}\n    >\n      <div\n        className={cn(\n          'flex h-10 w-full items-center rounded-md bg-background pl-2.5 pr-3',\n          error ? 'border border-status-error-border' : CONTROL_BORDER,\n        )}\n      >\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-label={label}\n          onClick={() => setOpen((previous) => !previous)}\n          className=\"h-full min-w-0 flex-1 justify-between rounded-none bg-transparent p-0 text-left shadow-none hover:bg-transparent\"\n        >\n          <span className=\"flex min-w-0 items-center gap-2\">\n            {value ? (\n              <PersonChip\n                compact\n                name={value.label || value.id}\n              />\n            ) : (\n              <span className=\"truncate text-sm text-muted-foreground\">\n                {t('customers.calendar.editor.relatedToPlaceholder', 'Search people or companies\u2026')}\n              </span>\n            )}\n          </span>\n          <span className=\"flex shrink-0 items-center\">\n            {deal ? (\n              <UppercaseBadge className=\"h-7 bg-status-info-bg text-status-info-text\">\n                {t('customers.calendar.editor.dealBadge', '{name} \u00B7 Deal', { name: deal.label })}\n              </UppercaseBadge>\n            ) : null}\n            <span aria-hidden className=\"h-px w-2\" />\n            <ChevronDown aria-hidden className=\"size-4 opacity-60\" />\n          </span>\n        </Button>\n        {value ? (\n          <IconButton\n            variant=\"ghost\"\n            size=\"xs\"\n            onClick={() => {\n              onChange(null)\n              onDealChange(null)\n            }}\n            aria-label={t('customers.calendar.editor.removeRelated', 'Clear related record')}\n            className=\"ms-1 shrink-0 text-muted-foreground\"\n          >\n            <X aria-hidden className=\"size-3.5\" />\n          </IconButton>\n        ) : null}\n      </div>\n      {open ? (\n        <div role=\"listbox\" aria-label={label} className={DROPDOWN_PANEL_CLASS}>\n          <Input\n            type=\"text\"\n            value={query}\n            onChange={(event) => setQuery(event.target.value)}\n            placeholder={t('customers.calendar.editor.relatedToPlaceholder', 'Search people or companies\u2026')}\n            aria-label={t('customers.calendar.editor.relatedToPlaceholder', 'Search people or companies\u2026')}\n            autoFocus\n            size=\"sm\"\n            className=\"mb-1\"\n          />\n          {loading ? (\n            <p className=\"px-2 py-3 text-center text-xs text-muted-foreground\">\n              {t('customers.calendar.editor.searching', 'Searching\u2026')}\n            </p>\n          ) : null}\n          {!loading && options.length === 0 ? (\n            <p className=\"px-2 py-3 text-center text-xs text-muted-foreground\">\n              {t('customers.calendar.editor.noResults', 'No results')}\n            </p>\n          ) : null}\n          {!loading\n            ? options.map((option) => (\n                <Button\n                  key={`${option.kind}:${option.id}`}\n                  type=\"button\"\n                  variant=\"ghost\"\n                  role=\"option\"\n                  aria-selected={value?.id === option.id}\n                  onClick={() => {\n                    onChange({ id: option.id, kind: option.kind, label: option.label })\n                    if (value?.id !== option.id) onDealChange(null)\n                    setQuery('')\n                  }}\n                  className={OPTION_ROW_CLASS}\n                >\n                  {option.kind === 'company'\n                    ? <Building2 aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n                    : <User aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />}\n                  <span className=\"min-w-0 flex-1 truncate\">\n                    {option.label}\n                    {option.subtitle ? <span className=\"ml-1.5 text-xs text-muted-foreground\">{option.subtitle}</span> : null}\n                  </span>\n                  <span className=\"shrink-0 text-xs text-muted-foreground\">{kindLabel(option.kind)}</span>\n                </Button>\n              ))\n            : null}\n          {value && deals.length > 0 ? (\n            <>\n              <p className=\"px-2 pb-1 pt-2 text-overline font-medium uppercase text-muted-foreground\">\n                {t('customers.calendar.editor.dealsSection', 'Deals')}\n              </p>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                role=\"option\"\n                aria-selected={deal === null}\n                onClick={() => {\n                  onDealChange(null)\n                  setOpen(false)\n                }}\n                className={OPTION_ROW_CLASS}\n              >\n                {t('customers.calendar.editor.dealNone', 'No deal')}\n              </Button>\n              {deals.map((option) => (\n                <Button\n                  key={option.id}\n                  type=\"button\"\n                  variant=\"ghost\"\n                  role=\"option\"\n                  aria-selected={deal?.id === option.id}\n                  onClick={() => {\n                    onDealChange(option)\n                    setOpen(false)\n                  }}\n                  className={OPTION_ROW_CLASS}\n                >\n                  <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                  <UppercaseBadge className=\"bg-status-info-bg text-status-info-text\">\n                    {t('customers.calendar.editor.dealBadgeSuffix', 'Deal')}\n                  </UppercaseBadge>\n                </Button>\n              ))}\n            </>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/customers/components/calendar/editor/RepeatField.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@open-mercato/ui/primitives/select";
+import { DateControl, LABEL_CLASS } from "./inputs.js";
+import { SegmentGroup } from "./SegmentGroup.js";
+const DAY_LABEL_KEYS = [
+  { letterKey: "customers.calendar.editor.repeat.days.mon", letterFallback: "M", ariaKey: "customers.calendar.day.mon", ariaFallback: "MON" },
+  { letterKey: "customers.calendar.editor.repeat.days.tue", letterFallback: "T", ariaKey: "customers.calendar.day.tue", ariaFallback: "TUE" },
+  { letterKey: "customers.calendar.editor.repeat.days.wed", letterFallback: "W", ariaKey: "customers.calendar.day.wed", ariaFallback: "WED" },
+  { letterKey: "customers.calendar.editor.repeat.days.thu", letterFallback: "T", ariaKey: "customers.calendar.day.thu", ariaFallback: "THU" },
+  { letterKey: "customers.calendar.editor.repeat.days.fri", letterFallback: "F", ariaKey: "customers.calendar.day.fri", ariaFallback: "FRI" },
+  { letterKey: "customers.calendar.editor.repeat.days.sat", letterFallback: "S", ariaKey: "customers.calendar.day.sat", ariaFallback: "SAT" },
+  { letterKey: "customers.calendar.editor.repeat.days.sun", letterFallback: "S", ariaKey: "customers.calendar.day.sun", ariaFallback: "SUN" }
+];
+function RepeatField({
+  freq,
+  days,
+  endType,
+  count,
+  untilDate,
+  locale,
+  onFreqChange,
+  onToggleDay,
+  onEndTypeChange,
+  onCountChange,
+  onUntilDateChange
+}) {
+  const t = useT();
+  const freqLabel = t("customers.calendar.editor.repeat.label", "Repeat");
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2.5", children: [
+    /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: freqLabel }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: freq,
+        onValueChange: (value) => onFreqChange(value),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": freqLabel, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: "none", children: t("customers.calendar.editor.repeat.freq.none", "Does not repeat") }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "daily", children: t("customers.calendar.editor.repeat.freq.daily", "Daily") }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "weekly", children: t("customers.calendar.editor.repeat.freq.weekly", "Weekly") })
+          ] })
+        ]
+      }
+    ),
+    freq === "weekly" ? /* @__PURE__ */ jsx("div", { className: "flex items-start gap-1.5", children: DAY_LABEL_KEYS.map((day, index) => {
+      const isActive = Boolean(days[index]);
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: isActive ? "default" : "outline",
+          "aria-pressed": isActive,
+          "aria-label": t(day.ariaKey, day.ariaFallback),
+          onClick: () => onToggleDay(index),
+          className: cn(
+            "size-9 px-0 text-xs font-medium",
+            !isActive && "text-muted-foreground"
+          ),
+          children: t(day.letterKey, day.letterFallback)
+        },
+        day.ariaKey
+      );
+    }) }) : null,
+    freq !== "none" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: t("customers.calendar.editor.repeat.ends", "Ends") }),
+      /* @__PURE__ */ jsx(
+        SegmentGroup,
+        {
+          ariaLabel: t("customers.calendar.editor.repeat.ends", "Ends"),
+          value: endType,
+          onChange: onEndTypeChange,
+          options: [
+            { value: "never", label: t("customers.calendar.editor.repeat.never", "Never") },
+            { value: "date", label: t("customers.calendar.editor.repeat.onDate", "On date") },
+            { value: "count", label: t("customers.calendar.editor.repeat.after", "After") }
+          ]
+        }
+      ),
+      endType === "date" ? /* @__PURE__ */ jsx(
+        DateControl,
+        {
+          className: "w-44",
+          value: untilDate || "",
+          onChange: onUntilDateChange,
+          ariaLabel: t("customers.calendar.editor.repeat.onDate", "On date"),
+          locale
+        }
+      ) : null,
+      endType === "count" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            min: 1,
+            max: 365,
+            value: count,
+            onChange: (event) => {
+              const next = Number(event.target.value);
+              if (Number.isInteger(next) && next >= 1) onCountChange(next);
+            },
+            "aria-label": t("customers.calendar.editor.repeat.after", "After"),
+            className: "h-9 w-20"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: t("customers.calendar.editor.repeat.times", "times") })
+      ] }) : null
+    ] }) : null
+  ] });
+}
+export {
+  RepeatField
+};
+//# sourceMappingURL=RepeatField.js.map

package/dist/modules/customers/components/calendar/editor/RepeatField.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/modules/customers/components/calendar/editor/RepeatField.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'\nimport type { EditorRepeatEndType, EditorRepeatFreq } from '../../../lib/calendar/editorPayload'\nimport { DateControl, LABEL_CLASS } from './inputs'\nimport { SegmentGroup } from './SegmentGroup'\n\nconst DAY_LABEL_KEYS = [\n  { letterKey: 'customers.calendar.editor.repeat.days.mon', letterFallback: 'M', ariaKey: 'customers.calendar.day.mon', ariaFallback: 'MON' },\n  { letterKey: 'customers.calendar.editor.repeat.days.tue', letterFallback: 'T', ariaKey: 'customers.calendar.day.tue', ariaFallback: 'TUE' },\n  { letterKey: 'customers.calendar.editor.repeat.days.wed', letterFallback: 'W', ariaKey: 'customers.calendar.day.wed', ariaFallback: 'WED' },\n  { letterKey: 'customers.calendar.editor.repeat.days.thu', letterFallback: 'T', ariaKey: 'customers.calendar.day.thu', ariaFallback: 'THU' },\n  { letterKey: 'customers.calendar.editor.repeat.days.fri', letterFallback: 'F', ariaKey: 'customers.calendar.day.fri', ariaFallback: 'FRI' },\n  { letterKey: 'customers.calendar.editor.repeat.days.sat', letterFallback: 'S', ariaKey: 'customers.calendar.day.sat', ariaFallback: 'SAT' },\n  { letterKey: 'customers.calendar.editor.repeat.days.sun', letterFallback: 'S', ariaKey: 'customers.calendar.day.sun', ariaFallback: 'SUN' },\n]\n\nexport function RepeatField({\n  freq,\n  days,\n  endType,\n  count,\n  untilDate,\n  locale,\n  onFreqChange,\n  onToggleDay,\n  onEndTypeChange,\n  onCountChange,\n  onUntilDateChange,\n}: {\n  freq: EditorRepeatFreq\n  days: boolean[]\n  endType: EditorRepeatEndType\n  count: number\n  untilDate: string\n  locale: string\n  onFreqChange(next: EditorRepeatFreq): void\n  onToggleDay(index: number): void\n  onEndTypeChange(next: EditorRepeatEndType): void\n  onCountChange(next: number): void\n  onUntilDateChange(next: string): void\n}) {\n  const t = useT()\n  const freqLabel = t('customers.calendar.editor.repeat.label', 'Repeat')\n  return (\n    <div className=\"flex w-full flex-col gap-2.5\">\n      <span className={LABEL_CLASS}>{freqLabel}</span>\n      <Select\n        value={freq}\n        onValueChange={(value) => onFreqChange(value as EditorRepeatFreq)}\n      >\n        <SelectTrigger aria-label={freqLabel}>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"none\">{t('customers.calendar.editor.repeat.freq.none', 'Does not repeat')}</SelectItem>\n          <SelectItem value=\"daily\">{t('customers.calendar.editor.repeat.freq.daily', 'Daily')}</SelectItem>\n          <SelectItem value=\"weekly\">{t('customers.calendar.editor.repeat.freq.weekly', 'Weekly')}</SelectItem>\n        </SelectContent>\n      </Select>\n      {freq === 'weekly' ? (\n        <div className=\"flex items-start gap-1.5\">\n          {DAY_LABEL_KEYS.map((day, index) => {\n            const isActive = Boolean(days[index])\n            return (\n              <Button\n                key={day.ariaKey}\n                type=\"button\"\n                variant={isActive ? 'default' : 'outline'}\n                aria-pressed={isActive}\n                aria-label={t(day.ariaKey, day.ariaFallback)}\n                onClick={() => onToggleDay(index)}\n                className={cn(\n                  'size-9 px-0 text-xs font-medium',\n                  !isActive && 'text-muted-foreground',\n                )}\n              >\n                {t(day.letterKey, day.letterFallback)}\n              </Button>\n            )\n          })}\n        </div>\n      ) : null}\n      {freq !== 'none' ? (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <span className={LABEL_CLASS}>{t('customers.calendar.editor.repeat.ends', 'Ends')}</span>\n          <SegmentGroup\n            ariaLabel={t('customers.calendar.editor.repeat.ends', 'Ends')}\n            value={endType}\n            onChange={onEndTypeChange}\n            options={[\n              { value: 'never', label: t('customers.calendar.editor.repeat.never', 'Never') },\n              { value: 'date', label: t('customers.calendar.editor.repeat.onDate', 'On date') },\n              { value: 'count', label: t('customers.calendar.editor.repeat.after', 'After') },\n            ]}\n          />\n          {endType === 'date' ? (\n            <DateControl\n              className=\"w-44\"\n              value={untilDate || ''}\n              onChange={onUntilDateChange}\n              ariaLabel={t('customers.calendar.editor.repeat.onDate', 'On date')}\n              locale={locale}\n            />\n          ) : null}\n          {endType === 'count' ? (\n            <span className=\"flex items-center gap-2\">\n              <Input\n                type=\"number\"\n                min={1}\n                max={365}\n                value={count}\n                onChange={(event) => {\n                  const next = Number(event.target.value)\n                  if (Number.isInteger(next) && next >= 1) onCountChange(next)\n                }}\n                aria-label={t('customers.calendar.editor.repeat.after', 'After')}\n                className=\"h-9 w-20\"\n              />\n              <span className={LABEL_CLASS}>{t('customers.calendar.editor.repeat.times', 'times')}</span>\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/customers/components/calendar/editor/ScheduleSection.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { AllDayToggle, DateControl, LABEL_CLASS, TimeControl } from "./inputs.js";
+const DATE_LABEL_TEXT = {
+  starts: { key: "customers.calendar.editor.dates.starts", fallback: "Starts" },
+  when: { key: "customers.calendar.editor.dates.when", fallback: "When" },
+  sent: { key: "customers.calendar.editor.dates.sent", fallback: "Sent" },
+  logged: { key: "customers.calendar.editor.dates.logged", fallback: "Logged" },
+  due: { key: "customers.calendar.editor.dates.due", fallback: "Due" }
+};
+function DateTimeRow({
+  label,
+  date,
+  time,
+  showTime,
+  locale,
+  onDateChange,
+  onTimeChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-end gap-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: label }),
+      /* @__PURE__ */ jsx(DateControl, { value: date, onChange: onDateChange, ariaLabel: label, locale })
+    ] }),
+    showTime ? /* @__PURE__ */ jsx(TimeControl, { value: time, onChange: onTimeChange, ariaLabel: label }) : null
+  ] });
+}
+function ScheduleSection({
+  dateLabel,
+  hasAllDay,
+  hasEnd,
+  allDay,
+  date,
+  startTime,
+  endDate,
+  endTime,
+  locale,
+  endsError,
+  onAllDayChange,
+  onDateChange,
+  onStartTimeChange,
+  onEndDateChange,
+  onEndTimeChange
+}) {
+  const t = useT();
+  const showTime = !(hasAllDay && allDay);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2.5", children: [
+    hasAllDay ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: t("customers.calendar.editor.allDay", "All day") }),
+      /* @__PURE__ */ jsx(AllDayToggle, { checked: allDay, onCheckedChange: onAllDayChange, label: t("customers.calendar.editor.allDay", "All day") })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      DateTimeRow,
+      {
+        label: t(DATE_LABEL_TEXT[dateLabel].key, DATE_LABEL_TEXT[dateLabel].fallback),
+        date,
+        time: startTime,
+        showTime,
+        locale,
+        onDateChange,
+        onTimeChange: onStartTimeChange
+      }
+    ),
+    hasEnd ? /* @__PURE__ */ jsx(
+      DateTimeRow,
+      {
+        label: t("customers.calendar.editor.dates.ends", "Ends"),
+        date: endDate,
+        time: endTime,
+        showTime,
+        locale,
+        onDateChange: onEndDateChange,
+        onTimeChange: onEndTimeChange
+      }
+    ) : null,
+    endsError ? /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error-text", children: endsError }) : null
+  ] });
+}
+export {
+  ScheduleSection
+};
+//# sourceMappingURL=ScheduleSection.js.map

package/dist/modules/customers/components/calendar/editor/ScheduleSection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/modules/customers/components/calendar/editor/ScheduleSection.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { EditorDateLabel } from '../../../lib/calendar/editorPayload'\nimport { AllDayToggle, DateControl, LABEL_CLASS, TimeControl } from './inputs'\n\nconst DATE_LABEL_TEXT: Record<EditorDateLabel, { key: string; fallback: string }> = {\n  starts: { key: 'customers.calendar.editor.dates.starts', fallback: 'Starts' },\n  when: { key: 'customers.calendar.editor.dates.when', fallback: 'When' },\n  sent: { key: 'customers.calendar.editor.dates.sent', fallback: 'Sent' },\n  logged: { key: 'customers.calendar.editor.dates.logged', fallback: 'Logged' },\n  due: { key: 'customers.calendar.editor.dates.due', fallback: 'Due' },\n}\n\nfunction DateTimeRow({\n  label,\n  date,\n  time,\n  showTime,\n  locale,\n  onDateChange,\n  onTimeChange,\n}: {\n  label: string\n  date: string\n  time: string\n  showTime: boolean\n  locale: string\n  onDateChange(next: string): void\n  onTimeChange(next: string): void\n}) {\n  return (\n    <div className=\"flex w-full items-end gap-2.5\">\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n        <span className={LABEL_CLASS}>{label}</span>\n        <DateControl value={date} onChange={onDateChange} ariaLabel={label} locale={locale} />\n      </div>\n      {showTime ? <TimeControl value={time} onChange={onTimeChange} ariaLabel={label} /> : null}\n    </div>\n  )\n}\n\nexport function ScheduleSection({\n  dateLabel,\n  hasAllDay,\n  hasEnd,\n  allDay,\n  date,\n  startTime,\n  endDate,\n  endTime,\n  locale,\n  endsError,\n  onAllDayChange,\n  onDateChange,\n  onStartTimeChange,\n  onEndDateChange,\n  onEndTimeChange,\n}: {\n  dateLabel: EditorDateLabel\n  hasAllDay: boolean\n  hasEnd: boolean\n  allDay: boolean\n  date: string\n  startTime: string\n  endDate: string\n  endTime: string\n  locale: string\n  endsError?: string | null\n  onAllDayChange(next: boolean): void\n  onDateChange(next: string): void\n  onStartTimeChange(next: string): void\n  onEndDateChange(next: string): void\n  onEndTimeChange(next: string): void\n}) {\n  const t = useT()\n  const showTime = !(hasAllDay && allDay)\n  return (\n    <div className=\"flex w-full flex-col gap-2.5\">\n      {hasAllDay ? (\n        <div className=\"flex w-full items-center justify-between\">\n          <span className={LABEL_CLASS}>{t('customers.calendar.editor.allDay', 'All day')}</span>\n          <AllDayToggle checked={allDay} onCheckedChange={onAllDayChange} label={t('customers.calendar.editor.allDay', 'All day')} />\n        </div>\n      ) : null}\n      <DateTimeRow\n        label={t(DATE_LABEL_TEXT[dateLabel].key, DATE_LABEL_TEXT[dateLabel].fallback)}\n        date={date}\n        time={startTime}\n        showTime={showTime}\n        locale={locale}\n        onDateChange={onDateChange}\n        onTimeChange={onStartTimeChange}\n      />\n      {hasEnd ? (\n        <DateTimeRow\n          label={t('customers.calendar.editor.dates.ends', 'Ends')}\n          date={endDate}\n          time={endTime}\n          showTime={showTime}\n          locale={locale}\n          onDateChange={onEndDateChange}\n          onTimeChange={onEndTimeChange}\n        />\n      ) : null}\n      {endsError ? <p className=\"text-xs text-status-error-text\">{endsError}</p> : null}\n    </div>\n  )\n}\n"],
+  "mappings": ";AAkCM,SACE,KADF;AA/BN,SAAS,YAAY;AAErB,SAAS,cAAc,aAAa,aAAa,mBAAmB;AAEpE,MAAM,kBAA8E;AAAA,EAClF,QAAQ,EAAE,KAAK,0CAA0C,UAAU,SAAS;AAAA,EAC5E,MAAM,EAAE,KAAK,wCAAwC,UAAU,OAAO;AAAA,EACtE,MAAM,EAAE,KAAK,wCAAwC,UAAU,OAAO;AAAA,EACtE,QAAQ,EAAE,KAAK,0CAA0C,UAAU,SAAS;AAAA,EAC5E,KAAK,EAAE,KAAK,uCAAuC,UAAU,MAAM;AACrE;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,SACE,qBAAC,SAAI,WAAU,iCACb;AAAA,yBAAC,SAAI,WAAU,wCACb;AAAA,0BAAC,UAAK,WAAW,aAAc,iBAAM;AAAA,MACrC,oBAAC,eAAY,OAAO,MAAM,UAAU,cAAc,WAAW,OAAO,QAAgB;AAAA,OACtF;AAAA,IACC,WAAW,oBAAC,eAAY,OAAO,MAAM,UAAU,cAAc,WAAW,OAAO,IAAK;AAAA,KACvF;AAEJ;AAEO,SAAS,gBAAgB;AAAA,EAC9B;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,GAgBG;AACD,QAAM,IAAI,KAAK;AACf,QAAM,WAAW,EAAE,aAAa;AAChC,SACE,qBAAC,SAAI,WAAU,gCACZ;AAAA,gBACC,qBAAC,SAAI,WAAU,4CACb;AAAA,0BAAC,UAAK,WAAW,aAAc,YAAE,oCAAoC,SAAS,GAAE;AAAA,MAChF,oBAAC,gBAAa,SAAS,QAAQ,iBAAiB,gBAAgB,OAAO,EAAE,oCAAoC,SAAS,GAAG;AAAA,OAC3H,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,gBAAgB,SAAS,EAAE,KAAK,gBAAgB,SAAS,EAAE,QAAQ;AAAA,QAC5E;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc;AAAA;AAAA,IAChB;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,wCAAwC,MAAM;AAAA,QACvD,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,cAAc;AAAA;AAAA,IAChB,IACE;AAAA,IACH,YAAY,oBAAC,OAAE,WAAU,kCAAkC,qBAAU,IAAO;AAAA,KAC/E;AAEJ;",
+  "names": []
+}

package/dist/modules/customers/components/calendar/editor/SegmentGroup.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Button } from "@open-mercato/ui/primitives/button";
+function SegmentGroup({
+  options,
+  value,
+  onChange,
+  size = "sm",
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: "inline-flex max-w-full items-start overflow-x-auto rounded-md border border-border bg-background",
+      children: options.map((option, index) => {
+        const isActive = option.value === value;
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            "aria-pressed": isActive,
+            onClick: () => onChange(option.value),
+            className: cn(
+              "h-auto rounded-none border-0 text-sm font-medium leading-5 shadow-none",
+              size === "md" ? "px-4 py-2" : "px-3.5 py-1.5",
+              index > 0 && "border-l border-border",
+              isActive ? "bg-muted text-foreground hover:bg-muted" : "bg-background text-muted-foreground"
+            ),
+            children: option.label
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+export {
+  SegmentGroup
+};
+//# sourceMappingURL=SegmentGroup.js.map

package/dist/modules/customers/components/calendar/editor/SegmentGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/modules/customers/components/calendar/editor/SegmentGroup.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\nexport type SegmentOption<T extends string> = { value: T; label: string }\n\nexport function SegmentGroup<T extends string>({\n  options,\n  value,\n  onChange,\n  size = 'sm',\n  ariaLabel,\n}: {\n  options: Array<SegmentOption<T>>\n  value: T\n  onChange(next: T): void\n  size?: 'sm' | 'md'\n  ariaLabel: string\n}) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className=\"inline-flex max-w-full items-start overflow-x-auto rounded-md border border-border bg-background\"\n    >\n      {options.map((option, index) => {\n        const isActive = option.value === value\n        return (\n          <Button\n            key={option.value}\n            type=\"button\"\n            variant=\"ghost\"\n            aria-pressed={isActive}\n            onClick={() => onChange(option.value)}\n            className={cn(\n              'h-auto rounded-none border-0 text-sm font-medium leading-5 shadow-none',\n              size === 'md' ? 'px-4 py-2' : 'px-3.5 py-1.5',\n              index > 0 && 'border-l border-border',\n              isActive ? 'bg-muted text-foreground hover:bg-muted' : 'bg-background text-muted-foreground',\n            )}\n          >\n            {option.label}\n          </Button>\n        )\n      })}\n    </div>\n  )\n}\n"],
+  "mappings": ";AA8BU;AA3BV,SAAS,UAAU;AACnB,SAAS,cAAc;AAIhB,SAAS,aAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAU;AAAA,MAET,kBAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,WAAW,OAAO,UAAU;AAClC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,gBAAc;AAAA,YACd,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,YACpC,WAAW;AAAA,cACT;AAAA,cACA,SAAS,OAAO,cAAc;AAAA,cAC9B,QAAQ,KAAK;AAAA,cACb,WAAW,4CAA4C;AAAA,YACzD;AAAA,YAEC,iBAAO;AAAA;AAAA,UAZH,OAAO;AAAA,QAad;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;",
+  "names": []
+}