npm - @alfadocs/ui-kit-debug - Versions diffs - 0.41.2 → 0.43.0 - Mend

@alfadocs/ui-kit-debug 0.41.2 → 0.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (346) hide show

package/dist/_chunks/chart-Cg3e9EH9.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"chart-Cg3e9EH9.js","sources":["../../src/components/chart/chart.agent.ts","../../src/components/chart/chart.tsx"],"sourcesContent":["import type { AgentAdapter } from '../../agent/types';\nimport type { ChartHandle } from './chart';\n\nexport const chartAgent: AgentAdapter<ChartHandle> = {\n id: 'chart',\n capabilities: [],\n state: {},\n actions: {\n update_series: {\n safety: 'read',\n argsType: 'series',\n description: 'Replace the chart series without remounting.',\n invoke: (\n handle,\n args: { series: Parameters<ChartHandle['updateSeries']>[0] },\n ) => {\n handle.updateSeries(args.series);\n },\n },\n export_png: {\n safety: 'read',\n description:\n 'Return a PNG data URI of the chart for export or screenshotting.',\n invoke: (handle) => handle.dataURI(),\n },\n },\n domHooks: {\n root: { attr: 'data-component', value: 'chart' },\n instanceId: {\n attr: 'data-component-id',\n sourceProp: 'id',\n description: 'Sourced from the id prop.',\n },\n },\n};\n","/* ------------------------------------------------------------------ */\n/* Chart — thin, typed wrapper over ApexCharts (react-apexcharts). */\n/* */\n/* - All chrome, colours, and fonts flow from */\n/* `src/tokens/apexcharts-theme.ts` — never hex literals in user */\n/* code. A MutationObserver on `<html class>` re-reads the bridge so */\n/* theme changes repaint without remount. */\n/* - A ResizeObserver on the wrapper keeps the chart responsive */\n/* without listening on `window.resize`. */\n/* - Accessibility: the wrapper carries `role=\"img\"` + `aria-label` */\n/* (required `title` prop) + `aria-describedby` pointing at a */\n/* visually-hidden `<table>` that mirrors series × categories. */\n/* - Colour-blind users: `patterns` prop flips `fill.type` to pattern */\n/* using ApexCharts' built-in pattern presets. */\n/* - Numbers format via `Intl.NumberFormat(locale)` — no hand-rolled */\n/* `toFixed()`. */\n/* ------------------------------------------------------------------ */\n\nimport {\n forwardRef,\n useEffect,\n useId,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport ReactApexChart from 'react-apexcharts';\nimport ApexCharts from 'apexcharts';\nimport { getApexChartsTheme } from '../../tokens/apexcharts-theme';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { useNeutraliseHiddenFocus } from '../_shared/use-neutralize-hidden-focus';\nimport { useAgentRegistration } from '../../agent/registry';\nimport { chartAgent } from './chart.agent';\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst chartVariants = cva('ds:relative ds:block ds:w-full', {\n variants: {\n density: {\n compact: 'ds:min-h-[var(--chart-min-height-compact)]',\n comfortable: 'ds:min-h-[var(--chart-min-height-comfortable)]',\n // Applied when an explicit `height` prop is given and no density was\n // requested: the wrapper must not exceed the caller's height (a 96px\n // KPI chart inside a card must not reserve 320px).\n none: '',\n },\n },\n defaultVariants: { density: 'comfortable' },\n});\n\n/* ------------------------------------------------------------------ */\n/* Public types */\n/* ------------------------------------------------------------------ */\n\nexport type ChartType = 'line' | 'bar' | 'pie' | 'donut' | 'area' | 'radialBar';\n\nexport interface ChartSeries {\n name: string;\n data: number[];\n}\n\nexport interface ChartProps extends VariantProps<typeof chartVariants> {\n /** Required — drives aria-label and sr-only table caption. */\n title: string;\n /** Opaque instance id — emitted as `data-component-id` for the agent registry. */\n id?: string;\n /** Chart visual type. */\n type: ChartType;\n /**\n * For `line` / `bar` / `area`: an array of `ChartSeries`.\n * For `pie` / `donut` / `radialBar`: an array of numbers matched to `labels`.\n */\n series: ChartSeries[] | number[];\n /** Category axis labels (line / bar / area). */\n categories?: string[];\n /** Slice labels (pie / donut / radialBar). */\n labels?: string[];\n /** Height override. Defaults to 320px. */\n height?: number | string;\n /** Width override. Defaults to 100% of container. */\n width?: number | string;\n /** Opt-in pattern fills for colour-blind users. */\n patterns?: boolean;\n /**\n * Override the series colour ramp. Pass **already-resolved** colour strings\n * (e.g. the live value of `var(--success)` sampled by the consumer) — these\n * are handed straight to ApexCharts, which can't read CSS custom properties.\n * When omitted, the theme bridge's `colors` ramp from `apexcharts-theme.ts`\n * is used, so existing consumers are unaffected. Typical use: a single-arc\n * `radialBar` gauge (e.g. BMI) that must change hue with the value —\n * green in the healthy band, amber/red outside it.\n */\n colors?: string[];\n /** Show the ApexCharts toolbar. Defaults to false. */\n toolbar?: boolean;\n /** Locale override — defaults to the active i18next language. */\n locale?: string;\n /**\n * radialBar only. Formats the value printed in the ring centre. Use when the\n * gauge represents a non-percentage figure: pass the arc fill (0–100) as the\n * single `series` value and return the real figure here (e.g. `(_, ) => '22.4'`).\n * Ignored for every other chart type. Defaults to ApexCharts' `${value}%`.\n */\n radialValueFormatter?: (value: number) => string;\n /** Extra class names on the wrapper. */\n className?: string;\n}\n\nexport interface ChartHandle {\n /** Returns a PNG data URI for the chart. */\n dataURI: () => Promise<string>;\n /** Updates series without remounting. */\n updateSeries: (next: ChartProps['series']) => void;\n}\n\n/* ------------------------------------------------------------------ */\n/* Constants */\n/* ------------------------------------------------------------------ */\n\nconst PATTERN_STYLES = [\n 'verticalLines',\n 'horizontalLines',\n 'slantedLines',\n 'squares',\n 'circles',\n] as const;\n\n/** Types where `categories` belong on an x-axis. */\nconst CATEGORICAL_TYPES: ReadonlyArray<ChartType> = ['line', 'bar', 'area'];\n\n/** Types where `series` is a flat `number[]` paired with `labels`. */\nconst SLICE_TYPES: ReadonlyArray<ChartType> = ['pie', 'donut', 'radialBar'];\n\n/* ------------------------------------------------------------------ */\n/* Helpers */\n/* ------------------------------------------------------------------ */\n\nfunction isSliceType(type: ChartType): boolean {\n return SLICE_TYPES.includes(type);\n}\n\nfunction isCategoricalType(type: ChartType): boolean {\n return CATEGORICAL_TYPES.includes(type);\n}\n\n/** Coerce `series` into `ChartSeries[]` for shared logic (table, aria). */\nfunction normaliseSeries(\n series: ChartSeries[] | number[],\n type: ChartType,\n): ChartSeries[] {\n if (isSliceType(type)) {\n const nums = series as number[];\n return [\n {\n name: '',\n data: nums,\n },\n ];\n }\n return series as ChartSeries[];\n}\n\n/* ------------------------------------------------------------------ */\n/* Chart component */\n/* ------------------------------------------------------------------ */\n\nexport const Chart = forwardRef<ChartHandle, ChartProps>(\n (\n {\n title,\n id,\n type,\n series,\n categories,\n labels,\n height,\n width,\n patterns = false,\n colors,\n toolbar = false,\n locale: localeProp,\n radialValueFormatter,\n density,\n className,\n },\n ref,\n ) => {\n const { t, i18n } = useTranslation();\n const rawId = useId();\n const chartId = useMemo(\n () => `chart-${rawId.replace(/[^a-zA-Z0-9-_]/g, '')}`,\n [rawId],\n );\n const summaryId = `${chartId}-summary`;\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState(0);\n\n /* ApexCharts injects focusable canvases inside the `aria-hidden` */\n /* chart wrapper. Neutralise their tabindex so axe's */\n /* `aria-hidden-focus` rule passes. Same hook used in Sparkline. */\n useNeutraliseHiddenFocus(wrapperRef);\n\n const locale = localeProp ?? i18n.language ?? 'en';\n\n /* ---- dev warning if title missing ------------------------------ */\n if (import.meta.env.DEV && !title) {\n console.warn(\n 'Chart: `title` prop is required. It drives aria-label and the screen-reader summary table.',\n );\n }\n\n /* ---- theme-reactive state -------------------------------------- */\n const [themeOptions, setThemeOptions] = useState<ApexCharts.ApexOptions>(\n () => {\n try {\n return getApexChartsTheme();\n } catch {\n return {};\n }\n },\n );\n\n /* ---- MutationObserver: re-read theme on class change ------------ */\n useEffect(() => {\n if (typeof document === 'undefined') return undefined;\n let timer: ReturnType<typeof setTimeout>;\n const observer = new MutationObserver(() => {\n clearTimeout(timer);\n timer = setTimeout(() => {\n try {\n setThemeOptions(getApexChartsTheme());\n } catch {\n /* no-op in non-browser environments */\n }\n }, 50);\n });\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class'],\n });\n return () => {\n clearTimeout(timer);\n observer.disconnect();\n };\n }, []);\n\n /* ---- ResizeObserver: track container width --------------------- */\n useEffect(() => {\n const el = wrapperRef.current;\n if (!el || typeof ResizeObserver === 'undefined') return undefined;\n const ro = new ResizeObserver((entries) => {\n const entry = entries[0];\n if (entry) setContainerWidth(Math.floor(entry.contentRect.width));\n });\n ro.observe(el);\n return () => ro.disconnect();\n }, []);\n\n /* ---- imperative handle ----------------------------------------- */\n const agentHandle = useMemo<ChartHandle>(\n () => ({\n async dataURI(): Promise<string> {\n const instance = ApexCharts.getChartByID(chartId);\n if (!instance) return '';\n const result = await instance.dataURI();\n return (result as { imgURI: string }).imgURI;\n },\n updateSeries(next) {\n const instance = ApexCharts.getChartByID(chartId);\n if (!instance) return;\n if (isSliceType(type)) {\n instance.updateSeries(next as number[]);\n } else {\n instance.updateSeries(next as ChartSeries[]);\n }\n },\n }),\n [chartId, type],\n );\n useImperativeHandle(ref, () => agentHandle, [agentHandle]);\n useAgentRegistration(chartAgent, agentHandle, id);\n\n /* ---- RTL detection --------------------------------------------- */\n const isRtl =\n typeof document !== 'undefined' && document.documentElement.dir === 'rtl';\n\n /* ---- normalised series for sr-only table ----------------------- */\n const tableSeries = useMemo(\n () => normaliseSeries(series, type),\n [series, type],\n );\n\n /* ---- Intl formatter -------------------------------------------- */\n const numberFormatter = useMemo(\n () => new Intl.NumberFormat(locale),\n [locale],\n );\n\n /* ---- toolbar localisation -------------------------------------- */\n const toolbarLocale = useMemo(\n () => ({\n name: locale,\n options: {\n toolbar: {\n download: t('chart.toolbar.download'),\n selection: t('chart.toolbar.selection'),\n selectionZoom: t('chart.toolbar.selectionZoom'),\n zoomIn: t('chart.toolbar.zoomIn'),\n zoomOut: t('chart.toolbar.zoomOut'),\n pan: t('chart.toolbar.pan'),\n reset: t('chart.toolbar.reset'),\n exportToSVG: t('chart.toolbar.exportToSVG'),\n exportToPNG: t('chart.toolbar.exportToPNG'),\n exportToCSV: t('chart.toolbar.exportToCSV'),\n },\n },\n }),\n [locale, t],\n );\n\n /* ---- build ApexOptions ----------------------------------------- */\n const reducedMotion = usePrefersReducedMotion();\n\n const chartOptions: ApexCharts.ApexOptions = useMemo(() => {\n const base = themeOptions;\n\n const options: ApexCharts.ApexOptions = {\n ...base,\n chart: {\n ...base.chart,\n id: chartId,\n toolbar: { show: toolbar },\n zoom: { enabled: toolbar },\n animations: {\n enabled: !reducedMotion,\n dynamicAnimation: { enabled: !reducedMotion },\n },\n locales: [toolbarLocale],\n defaultLocale: locale,\n parentHeightOffset: 0,\n },\n labels: labels,\n legend: {\n ...base.legend,\n position: 'bottom',\n // ApexCharts legend.horizontalAlign is a physical prop mapped internally\n // to the chart's own text flow. For RTL we flip via `yaxis.opposite`\n // and ApexCharts' own `direction: 'rtl'` handling; legend stays anchored\n // to the inline-start by asking for 'left' on LTR and 'right' on RTL.\n horizontalAlign: isRtl ? 'right' : 'left',\n fontFamily: 'inherit',\n },\n tooltip: {\n ...base.tooltip,\n y: {\n formatter: (value: number) => numberFormatter.format(value),\n },\n },\n noData: {\n text: t('chart.noData'),\n },\n };\n\n // Consumer-supplied, already-resolved colour ramp wins over the theme\n // bridge's `colors`. Ignored when absent so existing charts keep the\n // tokenised ramp. ApexCharts can't read `var(--…)`, so the consumer is\n // responsible for sampling the live token value before passing it in.\n if (colors && colors.length > 0) {\n options.colors = colors;\n }\n\n if (isCategoricalType(type)) {\n options.xaxis = {\n ...base.xaxis,\n categories: categories ?? [],\n };\n options.yaxis = {\n ...base.yaxis,\n opposite: isRtl,\n labels: {\n formatter: (value: number) => numberFormatter.format(value),\n },\n };\n options.stroke = {\n curve: 'smooth',\n width: type === 'bar' ? 0 : 2,\n };\n options.dataLabels = { enabled: false };\n }\n\n if (type === 'radialBar' && radialValueFormatter) {\n // ApexCharts treats a radialBar series value as a 0–100 percent and\n // renders it verbatim in the ring centre. When the displayed value is\n // NOT a percentage (e.g. a BMI), the consumer scales the series to a\n // percent for the arc and supplies `radialValueFormatter` to print the\n // real value in the centre. Without this, the gauge would read \"56%\"\n // for a BMI of 22.4 — misleading. Default behaviour is untouched.\n const basePlot = (base.plotOptions ?? {}) as NonNullable<\n ApexCharts.ApexOptions['plotOptions']\n >;\n options.plotOptions = {\n ...basePlot,\n radialBar: {\n ...(basePlot.radialBar ?? {}),\n dataLabels: {\n ...(basePlot.radialBar?.dataLabels ?? {}),\n value: {\n ...(basePlot.radialBar?.dataLabels?.value ?? {}),\n formatter: (val: number) => radialValueFormatter(Number(val)),\n },\n },\n },\n };\n }\n\n if (patterns) {\n options.fill = {\n type: 'pattern',\n opacity: type === 'area' ? 0.3 : 1,\n pattern: {\n style: [...PATTERN_STYLES],\n strokeWidth: 2,\n },\n };\n } else if (type === 'area') {\n options.fill = {\n type: 'gradient',\n opacity: 0.3,\n };\n }\n\n return options;\n }, [\n themeOptions,\n chartId,\n toolbar,\n reducedMotion,\n toolbarLocale,\n locale,\n labels,\n numberFormatter,\n t,\n type,\n categories,\n isRtl,\n patterns,\n colors,\n radialValueFormatter,\n ]);\n\n /* ---- resolved dimensions --------------------------------------- */\n const resolvedWidth =\n width ?? (containerWidth > 0 ? containerWidth : '100%');\n const resolvedHeight = height ?? 320;\n\n /* ---- sr-only data table --------------------------------------- */\n const srTable = useMemo(() => {\n const columnLabels = isSliceType(type)\n ? (labels ?? [])\n : (categories ?? []);\n const rows = tableSeries;\n return (\n <table id={summaryId} className=\"ds:sr-only\">\n <caption>{title}</caption>\n <thead>\n <tr>\n <th scope=\"col\">{t('chart.table.series')}</th>\n {columnLabels.map((col, i) => (\n <th key={`${col}-${i}`} scope=\"col\">\n {col}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {rows.map((row, rowIndex) => (\n <tr key={`${row.name}-${rowIndex}`}>\n <th scope=\"row\">{row.name || t('chart.table.value')}</th>\n {row.data.map((value, colIndex) => (\n <td key={`${rowIndex}-${colIndex}`}>\n {/* For a radialBar gauge the series is a synthetic arc\n percent — announce the consumer's display value (e.g.\n the real BMI) instead of the raw fill so AT users get\n the same figure sighted users see in the ring. */}\n {type === 'radialBar' && radialValueFormatter\n ? radialValueFormatter(value)\n : numberFormatter.format(value)}\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n );\n }, [\n type,\n tableSeries,\n labels,\n categories,\n summaryId,\n title,\n t,\n numberFormatter,\n radialValueFormatter,\n ]);\n\n /* ---- ApexCharts `series` prop shape ----------------------------- */\n const apexSeries = useMemo(() => {\n if (isSliceType(type)) {\n return series as number[];\n }\n return series as ChartSeries[];\n }, [series, type]);\n\n return (\n <div\n ref={wrapperRef}\n role=\"img\"\n aria-label={title}\n aria-describedby={summaryId}\n className={chartVariants({\n // Explicit height wins over the density min-height unless the\n // caller also asked for a density explicitly.\n density: density ?? (height !== undefined ? 'none' : undefined),\n className,\n })}\n data-component=\"chart\"\n data-component-id={id}\n >\n {srTable}\n <ReactApexChart\n type={type}\n series={apexSeries as ApexCharts.ApexOptions['series']}\n options={chartOptions}\n width={resolvedWidth}\n height={resolvedHeight}\n aria-hidden=\"true\"\n />\n </div>\n );\n },\n);\n\nChart.displayName = 'Chart';\n\n/* ------------------------------------------------------------------ */\n/* Re-export internal helper for downstream theming (kept narrow). */\n/* ------------------------------------------------------------------ */\n\nexport { chartVariants };\n"],"names":["chartAgent","handle","args","chartVariants","cva","PATTERN_STYLES","CATEGORICAL_TYPES","SLICE_TYPES","isSliceType","type","isCategoricalType","normaliseSeries","series","Chart","forwardRef","title","id","categories","labels","height","width","patterns","colors","toolbar","localeProp","radialValueFormatter","density","className","ref","t","i18n","useTranslation","rawId","useId","chartId","useMemo","summaryId","wrapperRef","useRef","containerWidth","setContainerWidth","useState","useNeutraliseHiddenFocus","locale","themeOptions","setThemeOptions","getApexChartsTheme","useEffect","timer","observer","el","ro","entries","entry","agentHandle","instance","ApexCharts","next","useImperativeHandle","useAgentRegistration","isRtl","tableSeries","numberFormatter","toolbarLocale","reducedMotion","usePrefersReducedMotion","chartOptions","base","options","value","basePlot","_a","_c","_b","val","resolvedWidth","resolvedHeight","srTable","columnLabels","rows","jsx","jsxs","col","i","row","rowIndex","colIndex","apexSeries","ReactApexChart"],"mappings":"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"}

package/dist/_chunks/cycle-calculator-Dln-y1k_.js ADDED Viewed

@@ -0,0 +1,192 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { forwardRef as A, useState as L, useMemo as v, useEffect as S } from "react";
+import { c as T } from "./index-D2ZczOXr.js";
+import { useTranslation as W } from "react-i18next";
+import { F as P } from "./form-field-BOm9hK35.js";
+import { D as $ } from "./date-picker-Bq7xhMA-.js";
+import { N as H } from "./number-input-Dj5L3pXK.js";
+import { C as w } from "./card-DPmk26CL.js";
+import { B as x } from "./badge-zsf5i5bH.js";
+import { I } from "./insert-result-DisOY2G-.js";
+import { a as i } from "./date-picker-variants-DLi1Va_e.js";
+import { C as z } from "./check-DPdL_Sm7.js";
+import { H as B } from "./heart-C0faivFf.js";
+import { c as k } from "./createLucideIcon-CrFbzy84.js";
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Y = [
+  [
+    "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"
+    }
+  ]
+], j = k("droplet", Y), h = 28, M = 14, U = 1;
+function G(n, c = 3) {
+  const d = n.cycleLength ?? h, { lastPeriodStart: s } = n, o = i(s, d - M), u = {
+    start: i(o, -5),
+    end: i(o, U)
+  }, f = i(s, d), p = Array.from(
+    { length: c },
+    (C, g) => i(s, d * (g + 1))
+  );
+  return { nextPeriod: f, ovulation: o, fertileWindow: u, upcomingPeriods: p };
+}
+const V = T("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
+  variants: {
+    width: { full: "ds:w-full", auto: "ds:inline-flex" }
+  },
+  defaultVariants: { width: "full" }
+}), q = A(
+  ({
+    defaultCycleLength: n = h,
+    onResultChange: c,
+    onInsert: d,
+    insertVariant: s = "insert",
+    onCopy: o,
+    onError: u,
+    id: f,
+    width: p,
+    className: C
+  }, g) => {
+    const { t: a, i18n: N } = W(), [m, b] = L(void 0), [y, D] = L(
+      n
+    ), t = v(() => m ? G({
+      lastPeriodStart: m,
+      cycleLength: y ?? h
+    }) : null, [m, y]), E = v(
+      () => new Intl.DateTimeFormat(N.language, { dateStyle: "medium" }),
+      [N.language]
+    );
+    S(() => {
+      c == null || c(t);
+    }, [t, c]);
+    const _ = v(() => /* @__PURE__ */ new Date(), []), l = (F) => E.format(F);
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: g,
+        "data-component": "cycle-calculator",
+        "data-component-id": f,
+        className: V({ width: p, className: C }),
+        children: [
+          /* @__PURE__ */ r("div", { className: "ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-2", children: [
+            /* @__PURE__ */ e(P, { label: a("cycleCalculator.lastPeriod"), children: /* @__PURE__ */ e(
+              $,
+              {
+                value: m,
+                onChange: b,
+                maxDate: _
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              P,
+              {
+                label: a("cycleCalculator.cycleLength"),
+                description: a("cycleCalculator.cycleLengthHint"),
+                children: /* @__PURE__ */ e(
+                  H,
+                  {
+                    mode: "integer",
+                    min: 20,
+                    max: 45,
+                    value: y,
+                    onChange: D
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("p", { className: "ds:sr-only", role: "status", "aria-live": "polite", children: t ? `${a("cycleCalculator.ovulation")}: ${l(t.ovulation)}. ${a(
+            "cycleCalculator.nextPeriod"
+          )}: ${l(t.nextPeriod)}.` : "" }),
+          t ? /* @__PURE__ */ e(w, { variant: "elevated", children: /* @__PURE__ */ r(w.Body, { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+            /* @__PURE__ */ r("dl", { className: "ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-3", children: [
+              /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center", children: [
+                /* @__PURE__ */ e("dt", { className: "type-label ds:text-muted-foreground", children: a("cycleCalculator.ovulation") }),
+                /* @__PURE__ */ e("dd", { children: /* @__PURE__ */ e(
+                  x,
+                  {
+                    variant: "success",
+                    size: "lg",
+                    leading: /* @__PURE__ */ e(z, { "aria-hidden": !0 }),
+                    children: l(t.ovulation)
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center", children: [
+                /* @__PURE__ */ e("dt", { className: "type-label ds:text-muted-foreground", children: a("cycleCalculator.fertileWindow") }),
+                /* @__PURE__ */ e("dd", { children: /* @__PURE__ */ r(
+                  x,
+                  {
+                    variant: "accent",
+                    size: "lg",
+                    leading: /* @__PURE__ */ e(B, { "aria-hidden": !0 }),
+                    children: [
+                      l(t.fertileWindow.start),
+                      " –",
+                      " ",
+                      l(t.fertileWindow.end)
+                    ]
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center", children: [
+                /* @__PURE__ */ e("dt", { className: "type-label ds:text-muted-foreground", children: a("cycleCalculator.nextPeriod") }),
+                /* @__PURE__ */ e("dd", { children: /* @__PURE__ */ e(
+                  x,
+                  {
+                    variant: "error",
+                    size: "lg",
+                    leading: /* @__PURE__ */ e(j, { "aria-hidden": !0 }),
+                    children: l(t.nextPeriod)
+                  }
+                ) })
+              ] })
+            ] }),
+            s === "copy" || d ? /* @__PURE__ */ e(
+              I,
+              {
+                onInsert: d,
+                variant: s,
+                onCopy: o,
+                onError: u,
+                card: {
+                  title: a("insert.title.cycle"),
+                  fields: [
+                    {
+                      label: a("cycleCalculator.ovulation"),
+                      value: l(t.ovulation)
+                    },
+                    {
+                      label: a("cycleCalculator.fertileWindow"),
+                      value: `${l(t.fertileWindow.start)} – ${l(
+                        t.fertileWindow.end
+                      )}`
+                    },
+                    {
+                      label: a("cycleCalculator.nextPeriod"),
+                      value: l(t.nextPeriod)
+                    }
+                  ]
+                }
+              }
+            ) : null
+          ] }) }) : /* @__PURE__ */ e("p", { className: "type-body ds:text-muted-foreground", children: a("cycleCalculator.empty") })
+        ]
+      }
+    );
+  }
+);
+q.displayName = "CycleCalculator";
+export {
+  q as C,
+  M as L,
+  G as p
+};
+//# sourceMappingURL=cycle-calculator-Dln-y1k_.js.map

package/dist/_chunks/cycle-calculator-Dln-y1k_.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cycle-calculator-Dln-y1k_.js","sources":["../../node_modules/lucide-react/dist/esm/icons/droplet.js","../../src/components/cycle-calculator/cycle.ts","../../src/components/cycle-calculator/cycle-calculator.tsx"],"sourcesContent":["/**\n * @license lucide-react v1.8.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n [\n \"path\",\n {\n 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\",\n key: \"c7niix\"\n }\n ]\n];\nconst Droplet = createLucideIcon(\"droplet\", __iconNode);\n\nexport { __iconNode, Droplet as default };\n//# sourceMappingURL=droplet.js.map\n","/* ------------------------------------------------------------------ */\n/* Menstrual-cycle prediction — pure, framework-free, unit-testable. */\n/* */\n/* Uses the standard fixed-luteal-phase model: ovulation falls ~14 days */\n/* before the next period, so on a cycle of length L ovulation is day */\n/* (L − 14). The fertile window spans the 5 days before ovulation */\n/* (sperm survival) through 1 day after (oocyte viability). */\n/* ------------------------------------------------------------------ */\n\nimport { addDays } from 'date-fns';\n\n/** Standard menstrual-cycle length. */\nexport const DEFAULT_CYCLE_LENGTH = 28;\n/** Luteal phase is biologically near-constant at ~14 days. */\nexport const LUTEAL_PHASE_DAYS = 14;\n/** Sperm survive up to ~5 days before ovulation. */\nexport const FERTILE_DAYS_BEFORE = 5;\n/** The oocyte is viable ~1 day after ovulation. */\nexport const FERTILE_DAYS_AFTER = 1;\n\nexport interface CycleInput {\n /** First day of the most recent period. */\n lastPeriodStart: Date;\n /** Average cycle length in days. Defaults to 28. */\n cycleLength?: number;\n /** Period (bleed) length in days. Optional — used for the period range. */\n periodLength?: number;\n}\n\nexport interface DateRange {\n start: Date;\n end: Date;\n}\n\nexport interface CyclePrediction {\n /** Start date of the next period. */\n nextPeriod: Date;\n /** Estimated ovulation date. */\n ovulation: Date;\n /** Fertile window (5 days before ovulation → 1 day after). */\n fertileWindow: DateRange;\n /** Start dates of the next few periods (length = `occurrences`). */\n upcomingPeriods: Date[];\n}\n\n/**\n * Predict ovulation, the fertile window and upcoming periods from the last\n * period's start date. `occurrences` controls how many future periods to\n * list (default 3).\n */\nexport function predictCycle(\n input: CycleInput,\n occurrences = 3,\n): CyclePrediction {\n const cycle = input.cycleLength ?? DEFAULT_CYCLE_LENGTH;\n const { lastPeriodStart } = input;\n\n const ovulation = addDays(lastPeriodStart, cycle - LUTEAL_PHASE_DAYS);\n const fertileWindow: DateRange = {\n start: addDays(ovulation, -FERTILE_DAYS_BEFORE),\n end: addDays(ovulation, FERTILE_DAYS_AFTER),\n };\n const nextPeriod = addDays(lastPeriodStart, cycle);\n const upcomingPeriods = Array.from({ length: occurrences }, (_, i) =>\n addDays(lastPeriodStart, cycle * (i + 1)),\n );\n\n return { nextPeriod, ovulation, fertileWindow, upcomingPeriods };\n}\n","/* ------------------------------------------------------------------ */\n/* CycleCalculator — predict ovulation, fertile window and upcoming */\n/* periods from the last period's start date. */\n/* */\n/* Maths lives in `./cycle` (pure, separately tested). */\n/* ------------------------------------------------------------------ */\n\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Heart, Check, Droplet } from 'lucide-react';\nimport { FormField } from '../form-field';\nimport { DatePicker } from '../date-picker';\nimport { NumberInput } from '../number-input';\nimport { Card } from '../card';\nimport { Badge } from '../badge';\nimport {\n InsertButton,\n type InsertPayload,\n type InsertVariant,\n type InsertMode,\n} from '../_shared/insert-result';\nimport {\n type CyclePrediction,\n predictCycle,\n DEFAULT_CYCLE_LENGTH,\n} from './cycle';\n\nconst rootVariants = cva('ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]', {\n variants: {\n width: { full: 'ds:w-full', auto: 'ds:inline-flex' },\n },\n defaultVariants: { width: 'full' },\n});\n\nexport interface CycleCalculatorProps extends VariantProps<\n typeof rootVariants\n> {\n /** Initial cycle length in days. Defaults to 28. */\n defaultCycleLength?: number;\n /** Fires whenever a prediction can be computed (and `null` when it can't). */\n onResultChange?: (result: CyclePrediction | null) => void;\n /** When provided, shows the result-action buttons that emit / copy the result. */\n onInsert?: (payload: InsertPayload) => void;\n /**\n * Which verb the result button performs. Defaults to `'insert'`.\n * Use `'copy'` in an app-shell surface (no editor to insert into) — the\n * button writes the result to the clipboard as a multi-format `ClipboardItem`.\n */\n insertVariant?: InsertVariant;\n /** `copy` variant only — fired after a successful clipboard write. */\n onCopy?: (mode: InsertMode) => void;\n /** `copy` variant only — fired if the clipboard write can't proceed. */\n onError?: (error: unknown) => void;\n /** Opaque instance id, emitted as `data-component-id`. */\n id?: string;\n /** Extra class names on the wrapper. */\n className?: string;\n}\n\nexport const CycleCalculator = forwardRef<HTMLDivElement, CycleCalculatorProps>(\n (\n {\n defaultCycleLength = DEFAULT_CYCLE_LENGTH,\n onResultChange,\n onInsert,\n insertVariant = 'insert',\n onCopy,\n onError,\n id,\n width,\n className,\n },\n ref,\n ) => {\n const { t, i18n } = useTranslation();\n\n const [lastPeriod, setLastPeriod] = useState<Date | undefined>(undefined);\n const [cycleLength, setCycleLength] = useState<number | null>(\n defaultCycleLength,\n );\n\n const result = useMemo<CyclePrediction | null>(() => {\n if (!lastPeriod) return null;\n return predictCycle({\n lastPeriodStart: lastPeriod,\n cycleLength: cycleLength ?? DEFAULT_CYCLE_LENGTH,\n });\n }, [lastPeriod, cycleLength]);\n\n const dateFormatter = useMemo(\n () => new Intl.DateTimeFormat(i18n.language, { dateStyle: 'medium' }),\n [i18n.language],\n );\n\n useEffect(() => {\n onResultChange?.(result);\n }, [result, onResultChange]);\n\n const today = useMemo(() => new Date(), []);\n\n const fmt = (d: Date): string => dateFormatter.format(d);\n\n return (\n <div\n ref={ref}\n data-component=\"cycle-calculator\"\n data-component-id={id}\n className={rootVariants({ width, className })}\n >\n <div className=\"ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-2\">\n <FormField label={t('cycleCalculator.lastPeriod')}>\n <DatePicker\n value={lastPeriod}\n onChange={setLastPeriod}\n maxDate={today}\n />\n </FormField>\n <FormField\n label={t('cycleCalculator.cycleLength')}\n description={t('cycleCalculator.cycleLengthHint')}\n >\n <NumberInput\n mode=\"integer\"\n min={20}\n max={45}\n value={cycleLength}\n onChange={setCycleLength}\n />\n </FormField>\n </div>\n\n <p className=\"ds:sr-only\" role=\"status\" aria-live=\"polite\">\n {result\n ? `${t('cycleCalculator.ovulation')}: ${fmt(result.ovulation)}. ${t(\n 'cycleCalculator.nextPeriod',\n )}: ${fmt(result.nextPeriod)}.`\n : ''}\n </p>\n\n {result ? (\n <Card variant=\"elevated\">\n <Card.Body className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-md)]\">\n <dl className=\"ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-3\">\n <div className=\"ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center\">\n <dt className=\"type-label ds:text-muted-foreground\">\n {t('cycleCalculator.ovulation')}\n </dt>\n <dd>\n <Badge\n variant=\"success\"\n size=\"lg\"\n leading={<Check aria-hidden />}\n >\n {fmt(result.ovulation)}\n </Badge>\n </dd>\n </div>\n <div className=\"ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center\">\n <dt className=\"type-label ds:text-muted-foreground\">\n {t('cycleCalculator.fertileWindow')}\n </dt>\n <dd>\n <Badge\n variant=\"accent\"\n size=\"lg\"\n leading={<Heart aria-hidden />}\n >\n {fmt(result.fertileWindow.start)} –{' '}\n {fmt(result.fertileWindow.end)}\n </Badge>\n </dd>\n </div>\n <div className=\"ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center\">\n <dt className=\"type-label ds:text-muted-foreground\">\n {t('cycleCalculator.nextPeriod')}\n </dt>\n <dd>\n <Badge\n variant=\"error\"\n size=\"lg\"\n leading={<Droplet aria-hidden />}\n >\n {fmt(result.nextPeriod)}\n </Badge>\n </dd>\n </div>\n </dl>\n {insertVariant === 'copy' || onInsert ? (\n <InsertButton\n onInsert={onInsert}\n variant={insertVariant}\n onCopy={onCopy}\n onError={onError}\n card={{\n title: t('insert.title.cycle'),\n fields: [\n {\n label: t('cycleCalculator.ovulation'),\n value: fmt(result.ovulation),\n },\n {\n label: t('cycleCalculator.fertileWindow'),\n value: `${fmt(result.fertileWindow.start)} – ${fmt(\n result.fertileWindow.end,\n )}`,\n },\n {\n label: t('cycleCalculator.nextPeriod'),\n value: fmt(result.nextPeriod),\n },\n ],\n }}\n />\n ) : null}\n </Card.Body>\n </Card>\n ) : (\n <p className=\"type-body ds:text-muted-foreground\">\n {t('cycleCalculator.empty')}\n </p>\n )}\n </div>\n );\n },\n);\n\nCycleCalculator.displayName = 'CycleCalculator';\n"],"names":["__iconNode","Droplet","createLucideIcon","DEFAULT_CYCLE_LENGTH","LUTEAL_PHASE_DAYS","FERTILE_DAYS_AFTER","predictCycle","input","occurrences","cycle","lastPeriodStart","ovulation","addDays","fertileWindow","nextPeriod","upcomingPeriods","_","i","rootVariants","cva","CycleCalculator","forwardRef","defaultCycleLength","onResultChange","onInsert","insertVariant","onCopy","onError","id","width","className","ref","t","i18n","useTranslation","lastPeriod","setLastPeriod","useState","cycleLength","setCycleLength","result","useMemo","dateFormatter","useEffect","today","fmt","d","jsxs","jsx","FormField","DatePicker","NumberInput","Card","Badge","Check","Heart","InsertButton"],"mappings":"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","x_google_ignoreList":[0]}