@alfadocs/ui-kit 1.3.12 → 1.4.0

package/dist/_chunks/cycle-calculator-B7fyH-h4.js

@@ -0,0 +1,425 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { forwardRef as G, useState as N, useMemo as x, useEffect as K, useRef as j } from "react";
+import { c as q } from "./index-D2ZczOXr.js";
+import { useTranslation as z } from "react-i18next";
+import { u as B } from "./registry-DvAUVLHh.js";
+import { F as S } from "./form-field-M5UpX65Z.js";
+import { D as Y } from "./date-picker-Bp64zk2p.js";
+import { N as H } from "./number-input-DOe5VYei.js";
+import { C as M } from "./card-DPmk26CL.js";
+import { B as T } from "./badge-DCOqV9mI.js";
+import { I as U } from "./insert-result-D074GtHX.js";
+import { a as m, c as V } from "./date-picker-variants-pKAJfnWr.js";
+import { C as J } from "./check-DrFSN__t.js";
+import { H as Q } from "./heart--qCA4ffe.js";
+import { c as X } from "./createLucideIcon-DhHxpK9K.js";
+import { p as Z } from "./parseISO-fOGpHKXm.js";
+import { f as ee } from "./format-4HNwNGrN.js";
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const te = [
+  [
+    "path",
+    {
+      d: "M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z",
+      key: "c7niix"
+    }
+  ]
+], re = X("droplet", te), ae = {
+  type: "string",
+  pattern: "^\\d{4}-\\d{2}-\\d{2}$"
+}, ne = {
+  id: "cycle-calculator",
+  // set_value → the three `set_*` actions + the `inputs` state slot.
+  capabilities: ["set_value"],
+  state: {
+    inputs: {
+      type: "{ lastPeriodStart: string | null, cycleLength: number | null, periodLength: number | null }",
+      descriptionKey: "ui.agent.cycleCalculator.state.inputs",
+      description: "The three cycle inputs as entered — last-period start date (`yyyy-MM-dd`), average cycle length in days, and period (bleed) length in days. Null where unset.",
+      read: (e) => e.getInputs()
+    },
+    result: {
+      type: "{ ovulation: string, fertileWindow: { start: string, end: string }, nextPeriod: string, periodRange: { start: string, end: string } | null, upcomingPeriods: string[] } | null",
+      descriptionKey: "ui.agent.cycleCalculator.state.result",
+      description: "Computed prediction — ovulation date, fertile window, next period, current bleed range and the next few period starts, all `yyyy-MM-dd`. Null until a last-period date is set.",
+      read: (e) => e.getResult()
+    }
+  },
+  actions: {
+    set_last_period: {
+      // Drives the same local input state a user types into; nothing is
+      // persisted to a record, and the value is reversible in the same UI.
+      safety: "write",
+      argsType: "{ date: string | null }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          date: {
+            oneOf: [
+              { ...ae, description: "Local calendar date, `yyyy-MM-dd`." },
+              { type: "null" }
+            ],
+            description: "Start date of the last period, or null to clear it. Must not be in the future."
+          }
+        },
+        required: ["date"],
+        additionalProperties: !1
+      },
+      idempotent: !0,
+      returns: "boolean",
+      returnsSchema: {
+        type: "boolean",
+        description: "True when the date was applied."
+      },
+      errors: [
+        "Returns false for an unparseable date or a date in the future — the on-screen DatePicker caps at today."
+      ],
+      examples: [
+        { args: { date: "2026-08-01" }, note: "Last period started 1 August." }
+      ],
+      descriptionKey: "ui.agent.cycleCalculator.actions.setLastPeriod",
+      description: "Set the start date of the last period. This is the only required input — the prediction stays null without it.",
+      invoke: (e, n) => e.setLastPeriod(n.date)
+    },
+    set_cycle_length: {
+      safety: "write",
+      argsType: "{ days: number | null }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          days: {
+            oneOf: [
+              { type: "integer", minimum: 20, maximum: 45 },
+              { type: "null" }
+            ],
+            description: "Average cycle length in days (20–45), or null to fall back to the 28-day default."
+          }
+        },
+        required: ["days"],
+        additionalProperties: !1
+      },
+      idempotent: !0,
+      returns: "boolean",
+      returnsSchema: {
+        type: "boolean",
+        description: "True when the value was applied."
+      },
+      errors: [
+        "Returns false outside 20–45 days — the same bounds the on-screen NumberInput enforces."
+      ],
+      descriptionKey: "ui.agent.cycleCalculator.actions.setCycleLength",
+      description: "Set the average cycle length in days. Shifts ovulation, the fertile window and every upcoming period.",
+      invoke: (e, n) => e.setCycleLength(n.days)
+    },
+    set_period_length: {
+      safety: "write",
+      argsType: "{ days: number | null }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          days: {
+            oneOf: [
+              { type: "integer", minimum: 1, maximum: 14 },
+              { type: "null" }
+            ],
+            description: "Period (bleed) length in days (1–14), or null to omit the bleed range."
+          }
+        },
+        required: ["days"],
+        additionalProperties: !1
+      },
+      idempotent: !0,
+      returns: "boolean",
+      returnsSchema: {
+        type: "boolean",
+        description: "True when the value was applied."
+      },
+      errors: [
+        "Returns false outside 1–14 days — the same bounds the on-screen NumberInput enforces."
+      ],
+      descriptionKey: "ui.agent.cycleCalculator.actions.setPeriodLength",
+      description: "Set the period (bleed) length in days. Optional — it only adds the current bleed range to the result.",
+      invoke: (e, n) => e.setPeriodLength(n.days)
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "cycle-calculator",
+      description: "Marks the CycleCalculator wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Also the registry key — without an `id` the instance does not register and only the DOM channel works."
+    }
+  }
+}, D = 28, ie = 14, le = 1;
+function se(e, n = 3) {
+  const o = e.cycleLength ?? D, { lastPeriodStart: d } = e, g = m(d, o - ie), v = {
+    start: m(g, -5),
+    end: m(g, le)
+  }, b = m(d, o), f = Array.from(
+    { length: n },
+    (E, C) => m(d, o * (C + 1))
+  ), L = e.periodLength && e.periodLength > 0 ? {
+    start: d,
+    end: m(d, e.periodLength - 1)
+  } : null;
+  return { nextPeriod: b, ovulation: g, fertileWindow: v, upcomingPeriods: f, periodRange: L };
+}
+const oe = q("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
+  variants: {
+    width: { full: "ds:w-full", auto: "ds:inline-flex" }
+  },
+  defaultVariants: { width: "full" }
+}), de = "--accent", c = (e) => ee(e, "yyyy-MM-dd"), ce = (e) => {
+  const n = Z(e);
+  return Number.isNaN(n.getTime()) ? null : n;
+}, _ = { min: 20, max: 45 }, R = { min: 1, max: 14 }, W = (e, { min: n, max: o }) => e === null || Number.isFinite(e) && e >= n && e <= o, ue = G(
+  ({
+    defaultCycleLength: e = D,
+    onResultChange: n,
+    onInsert: o,
+    insertVariant: d = "insert",
+    onCopy: g,
+    onError: v,
+    insertBrand: b,
+    id: f,
+    width: L,
+    className: E
+  }, C) => {
+    const { t: i, i18n: I } = z(), [u, P] = N(void 0), [y, A] = N(
+      e
+    ), [h, k] = N(null), a = x(() => u ? se({
+      lastPeriodStart: u,
+      cycleLength: y ?? D,
+      periodLength: h ?? void 0
+    }) : null, [u, y, h]), F = x(
+      () => new Intl.DateTimeFormat(I.language, { dateStyle: "medium" }),
+      [I.language]
+    );
+    K(() => {
+      n == null || n(a);
+    }, [a, n]);
+    const $ = x(() => /* @__PURE__ */ new Date(), []), p = j({ lastPeriod: u, cycleLength: y, periodLength: h, result: a });
+    p.current = { lastPeriod: u, cycleLength: y, periodLength: h, result: a };
+    const O = x(
+      () => ({
+        getInputs: () => ({
+          lastPeriodStart: p.current.lastPeriod ? c(p.current.lastPeriod) : null,
+          cycleLength: p.current.cycleLength,
+          periodLength: p.current.periodLength
+        }),
+        getResult: () => {
+          const r = p.current.result;
+          return r ? {
+            ovulation: c(r.ovulation),
+            fertileWindow: {
+              start: c(r.fertileWindow.start),
+              end: c(r.fertileWindow.end)
+            },
+            nextPeriod: c(r.nextPeriod),
+            periodRange: r.periodRange ? {
+              start: c(r.periodRange.start),
+              end: c(r.periodRange.end)
+            } : null,
+            upcomingPeriods: r.upcomingPeriods.map(c)
+          } : null;
+        },
+        setLastPeriod: (r) => {
+          if (r === null)
+            return P(void 0), !0;
+          const w = ce(r);
+          return !w || V(w, /* @__PURE__ */ new Date()) ? !1 : (P(w), !0);
+        },
+        setCycleLength: (r) => W(r, _) ? (A(r), !0) : !1,
+        setPeriodLength: (r) => W(r, R) ? (k(r), !0) : !1
+      }),
+      []
+    );
+    B(ne, O, f);
+    const l = (r) => F.format(r);
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: C,
+        "data-component": "cycle-calculator",
+        "data-component-id": f,
+        className: oe({ width: L, className: E }),
+        children: [
+          /* @__PURE__ */ s("div", { className: "ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-2", children: [
+            /* @__PURE__ */ t(S, { label: i("cycleCalculator.lastPeriod"), children: /* @__PURE__ */ t(
+              Y,
+              {
+                value: u,
+                onChange: P,
+                maxDate: $
+              }
+            ) }),
+            /* @__PURE__ */ t(
+              S,
+              {
+                label: i("cycleCalculator.cycleLength"),
+                description: i("cycleCalculator.cycleLengthHint"),
+                children: /* @__PURE__ */ t(
+                  H,
+                  {
+                    mode: "integer",
+                    min: _.min,
+                    max: _.max,
+                    value: y,
+                    onChange: A
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ t(
+              S,
+              {
+                label: i("cycleCalculator.periodLength"),
+                description: i("cycleCalculator.periodLengthHint"),
+                children: /* @__PURE__ */ t(
+                  H,
+                  {
+                    mode: "integer",
+                    min: R.min,
+                    max: R.max,
+                    value: h,
+                    onChange: k
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("p", { className: "ds:sr-only", role: "status", "aria-live": "polite", children: a ? `${i("cycleCalculator.ovulation")}: ${l(a.ovulation)}. ${i(
+            "cycleCalculator.nextPeriod"
+          )}: ${l(a.nextPeriod)}.` : "" }),
+          a ? /* @__PURE__ */ t(M, { variant: "elevated", children: /* @__PURE__ */ s(M.Body, { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+            /* @__PURE__ */ s("dl", { className: "ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-3", children: [
+              /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center", children: [
+                /* @__PURE__ */ t("dt", { className: "type-label ds:text-muted-foreground", children: i("cycleCalculator.ovulation") }),
+                /* @__PURE__ */ t("dd", { children: /* @__PURE__ */ t(
+                  T,
+                  {
+                    variant: "success",
+                    size: "lg",
+                    leading: /* @__PURE__ */ t(J, { "aria-hidden": !0 }),
+                    children: l(a.ovulation)
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center", children: [
+                /* @__PURE__ */ t("dt", { className: "type-label ds:text-muted-foreground", children: i("cycleCalculator.fertileWindow") }),
+                /* @__PURE__ */ t("dd", { children: /* @__PURE__ */ s(
+                  T,
+                  {
+                    variant: "accent",
+                    size: "lg",
+                    leading: /* @__PURE__ */ t(Q, { "aria-hidden": !0 }),
+                    children: [
+                      l(a.fertileWindow.start),
+                      " –",
+                      " ",
+                      l(a.fertileWindow.end)
+                    ]
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center", children: [
+                /* @__PURE__ */ t("dt", { className: "type-label ds:text-muted-foreground", children: i("cycleCalculator.nextPeriod") }),
+                /* @__PURE__ */ t("dd", { children: /* @__PURE__ */ t(
+                  T,
+                  {
+                    variant: "error",
+                    size: "lg",
+                    leading: /* @__PURE__ */ t(re, { "aria-hidden": !0 }),
+                    children: l(a.nextPeriod)
+                  }
+                ) })
+              ] })
+            ] }),
+            a.periodRange ? /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-2xs)]", children: [
+              /* @__PURE__ */ t("span", { className: "type-label ds:text-muted-foreground", children: i("cycleCalculator.periodRange") }),
+              /* @__PURE__ */ s("span", { className: "type-body ds:text-foreground", children: [
+                l(a.periodRange.start),
+                " –",
+                " ",
+                l(a.periodRange.end)
+              ] })
+            ] }) : null,
+            /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-2xs)]", children: [
+              /* @__PURE__ */ t("span", { className: "type-label ds:text-muted-foreground", children: i("cycleCalculator.upcomingPeriods") }),
+              /* @__PURE__ */ t("ul", { className: "ds:flex ds:flex-wrap ds:gap-x-[var(--spacing-md)] ds:gap-y-[var(--spacing-2xs)]", children: a.upcomingPeriods.map((r) => /* @__PURE__ */ t(
+                "li",
+                {
+                  className: "type-body ds:text-foreground",
+                  children: l(r)
+                },
+                r.getTime()
+              )) })
+            ] }),
+            d === "copy" || o ? /* @__PURE__ */ t(
+              U,
+              {
+                onInsert: o,
+                variant: d,
+                onCopy: g,
+                onError: v,
+                card: {
+                  title: i("insert.title.cycle"),
+                  icon: "heart",
+                  highlight: `${l(a.fertileWindow.start)} – ${l(
+                    a.fertileWindow.end
+                  )}`,
+                  // Chip reuses the on-screen fertile-window badge's accent
+                  // token so the inserted PNG chip matches the screen.
+                  highlightToken: de,
+                  brand: b,
+                  fields: [
+                    {
+                      // Ovulation is a predicted date → calendar glyph (the
+                      // on-screen badge uses a Check tick, which ICON_GEOMETRY
+                      // does not carry, so the calendar reads the date meaning).
+                      icon: "calendar",
+                      label: i("cycleCalculator.ovulation"),
+                      value: l(a.ovulation)
+                    },
+                    {
+                      // Fertile window → heart glyph, matching the on-screen
+                      // fertile-window badge's Heart icon.
+                      icon: "heart",
+                      label: i("cycleCalculator.fertileWindow"),
+                      value: `${l(a.fertileWindow.start)} – ${l(
+                        a.fertileWindow.end
+                      )}`
+                    },
+                    {
+                      // Next period → droplets glyph, matching the on-screen
+                      // next-period badge's Droplet icon.
+                      icon: "droplets",
+                      label: i("cycleCalculator.nextPeriod"),
+                      value: l(a.nextPeriod)
+                    }
+                  ]
+                }
+              }
+            ) : null
+          ] }) }) : /* @__PURE__ */ t("p", { className: "type-body ds:text-muted-foreground", children: i("cycleCalculator.empty") })
+        ]
+      }
+    );
+  }
+);
+ue.displayName = "CycleCalculator";
+export {
+  ue as C,
+  ie as L,
+  se as p
+};
+//# sourceMappingURL=cycle-calculator-B7fyH-h4.js.map