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

@alfadocs/ui-kit-debug 0.43.0 → 0.44.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 (61) hide show

package/dist/_chunks/{bmi-calculator-DuVSFDuw.js → bmi-calculator-DFPWL2OJ.js} RENAMED Viewed

@@ -1,17 +1,17 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { forwardRef as q, useId as J, useState as c, useMemo as Q, useEffect as k } from "react";
-import { c as K } from "./index-D2ZczOXr.js";
-import { useTranslation as X } from "react-i18next";
-import { R as E } from "./radio-TWf9Q-mp.js";
-import { R as Z } from "./radio-group-CLjK-SlK.js";
-import { F as S } from "./form-field-BOm9hK35.js";
+import { forwardRef as ee, useId as te, useState as c, useMemo as ae, useEffect as A } from "react";
+import { c as M } from "./index-D2ZczOXr.js";
+import { useTranslation as le } from "react-i18next";
+import { R as G } from "./radio-TWf9Q-mp.js";
+import { R as ie } from "./radio-group-CLjK-SlK.js";
+import { F as k } from "./form-field-BOm9hK35.js";
 import { N as C } from "./number-input-Dj5L3pXK.js";
-import { C as ee } from "./chart-Cg3e9EH9.js";
-import { C as H } from "./card-DPmk26CL.js";
-import { B as te } from "./badge-zsf5i5bH.js";
-import { I as ae } from "./insert-result-DisOY2G-.js";
-import { a as le, b as ie, e as re, c as oe, f as L, l as V, k as ne } from "./bmi-BxD-tFzU.js";
-const se = K("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
+import { C as oe } from "./chart-Cg3e9EH9.js";
+import { C as L } from "./card-DPmk26CL.js";
+import { B as re } from "./badge-zsf5i5bH.js";
+import { I as ne } from "./insert-result-CoC1oo6R.js";
+import { a as S, b as se, e as ce, c as me, f as H, l as V, k as ue } from "./bmi-BxD-tFzU.js";
+const de = M("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
   variants: {
     width: {
       full: "ds:w-full",
@@ -19,12 +19,12 @@ const se = K("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
     }
   },
   defaultVariants: { width: "full" }
-}), ce = {
+}), ge = {
   underweight: "info",
   normal: "success",
   overweight: "warning",
   obese: "error"
-}, me = K("", {
+}, O = M("", {
   variants: {
     category: {
       underweight: "--info",
@@ -33,85 +33,89 @@ const se = K("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
       obese: "--destructive"
     }
   }
-}), ue = "--color-orange-600";
-function de(i) {
+}), W = "--color-orange-600";
+function be(i) {
   if (typeof document > "u") return;
-  const r = document.documentElement, o = getComputedStyle(r), n = i === "overweight" && r.classList.contains("theme-light") && !r.classList.contains("theme-accessible") ? ue : me({ category: i });
-  return o.getPropertyValue(n).trim() || void 0;
+  const o = document.documentElement, r = getComputedStyle(o), n = i === "overweight" && o.classList.contains("theme-light") && !o.classList.contains("theme-accessible") ? W : O({ category: i });
+  return r.getPropertyValue(n).trim() || void 0;
 }
-function ge(i) {
-  const [r, o] = c(void 0);
-  return k(() => {
+function K(i) {
+  return typeof document < "u" && i === "overweight" && document.documentElement.classList.contains("theme-light") && !document.documentElement.classList.contains("theme-accessible") ? W : O({ category: i });
+}
+function he(i) {
+  const [o, r] = c(void 0);
+  return A(() => {
     if (i === null) {
-      o(void 0);
+      r(void 0);
       return;
     }
-    const n = () => o(de(i));
+    const n = () => r(be(i));
     if (n(), typeof document > "u") return;
     const f = new MutationObserver(n);
     return f.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: ["class"]
     }), () => f.disconnect();
-  }, [i]), r;
+  }, [i]), o;
 }
-const y = (i) => Math.round(i * 10) / 10, be = q(
+const y = (i) => Math.round(i * 10) / 10, fe = ee(
   ({
     defaultUnitSystem: i = "metric",
-    onResultChange: r,
-    onInsert: o,
+    onResultChange: o,
+    onInsert: r,
     insertVariant: n = "insert",
     onCopy: f,
-    onError: A,
-    id: M,
-    width: O,
-    className: W
-  }, D) => {
-    const { t: e, i18n: w } = X(), N = J(), [m, _] = c(i), [h, F] = c(null), [p, I] = c(null), [u, $] = c(null), [d, B] = c(null), [g, T] = c(null), j = (R) => {
-      const x = R;
+    onError: D,
+    insertBrand: _,
+    id: j,
+    width: z,
+    className: P
+  }, R) => {
+    const { t: e, i18n: w } = le(), N = te(), [m, U] = c(i), [p, T] = c(null), [v, F] = c(null), [u, $] = c(null), [d, I] = c(null), [g, B] = c(null), Y = (Q) => {
+      const x = Q;
       if (x !== m) {
         if (x === "imperial") {
-          if (h !== null) {
-            const { ft: U, in: Y } = oe(h);
-            $(U), B(y(Y));
+          if (p !== null) {
+            const { ft: X, in: Z } = me(p);
+            $(X), I(y(Z));
           }
-          p !== null && T(y(ne(p)));
+          v !== null && B(y(ue(v)));
         } else
-          (u !== null || d !== null) && F(y(L(u ?? 0, d ?? 0))), g !== null && I(y(V(g)));
-        _(x);
+          (u !== null || d !== null) && T(y(H(u ?? 0, d ?? 0))), g !== null && F(y(V(g)));
+        U(x);
       }
-    }, z = m === "metric" ? h : u !== null || d !== null ? L(u ?? 0, d ?? 0) : null, P = m === "metric" ? p : g !== null ? V(g) : null, l = re(P, z), a = l !== null ? ie(l) : null, G = ge(a), v = Q(
+    }, q = m === "metric" ? p : u !== null || d !== null ? H(u ?? 0, d ?? 0) : null, J = m === "metric" ? v : g !== null ? V(g) : null, l = ce(J, q), a = l !== null ? se(l) : null, E = he(a), b = ae(
       () => new Intl.NumberFormat(w.language, {
         minimumFractionDigits: 1,
         maximumFractionDigits: 1
       }),
       [w.language]
     );
-    k(() => {
-      r == null || r(
+    A(() => {
+      o == null || o(
         l !== null && a !== null ? { bmi: l, category: a } : null
       );
-    }, [l, a, r]);
-    const b = m === "metric";
+    }, [l, a, o]);
+    const h = m === "metric";
     return /* @__PURE__ */ s(
       "div",
       {
-        ref: D,
+        ref: R,
         "data-component": "bmi-calculator",
-        "data-component-id": M,
-        className: se({ width: O, className: W }),
+        "data-component-id": j,
+        className: de({ width: z, className: P }),
         children: [
           /* @__PURE__ */ s(
-            Z,
+            ie,
             {
               label: e("bmiCalculator.unitSystem.label"),
               variant: "horizontal",
               value: m,
-              onValueChange: j,
+              onValueChange: Y,
               children: [
-                /* @__PURE__ */ t(E, { label: e("bmiCalculator.unitSystem.metric"), value: "metric" }),
+                /* @__PURE__ */ t(G, { label: e("bmiCalculator.unitSystem.metric"), value: "metric" }),
                 /* @__PURE__ */ t(
-                  E,
+                  G,
                   {
                     label: e("bmiCalculator.unitSystem.imperial"),
                     value: "imperial"
@@ -121,8 +125,8 @@ const y = (i) => Math.round(i * 10) / 10, be = q(
             }
           ),
           /* @__PURE__ */ s("div", { className: "ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-2", children: [
-            b ? /* @__PURE__ */ t(
-              S,
+            h ? /* @__PURE__ */ t(
+              k,
               {
                 label: `${e("bmiCalculator.height")} (${e("bmiCalculator.units.cm")})`,
                 children: /* @__PURE__ */ t(
@@ -131,8 +135,8 @@ const y = (i) => Math.round(i * 10) / 10, be = q(
                     mode: "decimal",
                     min: 0,
                     step: 0.5,
-                    value: h,
-                    onChange: F
+                    value: p,
+                    onChange: T
                   }
                 )
               }
@@ -165,7 +169,7 @@ const y = (i) => Math.round(i * 10) / 10, be = q(
                     max: 11.9,
                     step: 0.5,
                     value: d,
-                    onChange: B,
+                    onChange: I,
                     "aria-label": e("bmiCalculator.inches")
                   }
                 ),
@@ -173,32 +177,32 @@ const y = (i) => Math.round(i * 10) / 10, be = q(
               ] })
             ] }),
             /* @__PURE__ */ t(
-              S,
+              k,
               {
                 label: `${e("bmiCalculator.weight")} (${e(
-                  b ? "bmiCalculator.units.kg" : "bmiCalculator.units.lb"
+                  h ? "bmiCalculator.units.kg" : "bmiCalculator.units.lb"
                 )})`,
                 children: /* @__PURE__ */ t(
                   C,
                   {
                     mode: "decimal",
                     min: 0,
-                    step: b ? 0.1 : 0.5,
-                    value: b ? p : g,
-                    onChange: b ? I : T
+                    step: h ? 0.1 : 0.5,
+                    value: h ? v : g,
+                    onChange: h ? F : B
                   }
                 )
               }
             )
           ] }),
           /* @__PURE__ */ t("p", { className: "ds:sr-only", role: "status", "aria-live": "polite", children: l !== null && a !== null ? e("bmiCalculator.gaugeAria", {
-            bmi: v.format(l),
+            bmi: b.format(l),
             category: e(`bmiCalculator.category.${a}`)
           }) : "" }),
-          l !== null && a !== null ? /* @__PURE__ */ t(H, { variant: "elevated", children: /* @__PURE__ */ s(H.Body, { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-md)]", children: [
+          l !== null && a !== null ? /* @__PURE__ */ t(L, { variant: "elevated", children: /* @__PURE__ */ s(L.Body, { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-md)]", children: [
             /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center", children: [
               /* @__PURE__ */ t("span", { className: "type-label ds:text-muted-foreground", children: e("bmiCalculator.category.label") }),
-              /* @__PURE__ */ t(te, { variant: ce[a], size: "lg", children: e(`bmiCalculator.category.${a}`) }),
+              /* @__PURE__ */ t(re, { variant: ge[a], size: "lg", children: e(`bmiCalculator.category.${a}`) }),
               /* @__PURE__ */ t("p", { className: "type-body ds:text-muted-foreground", children: e(`bmiCalculator.range.${a}`) })
             ] }),
             /* @__PURE__ */ t(
@@ -207,36 +211,46 @@ const y = (i) => Math.round(i * 10) / 10, be = q(
                 "data-bmi-category": a,
                 className: "ds:w-[240px] ds:max-w-full",
                 children: /* @__PURE__ */ t(
-                  ee,
+                  oe,
                   {
                     type: "radialBar",
                     title: e("bmiCalculator.gaugeAria", {
-                      bmi: v.format(l),
+                      bmi: b.format(l),
                       category: e(`bmiCalculator.category.${a}`)
                     }),
-                    series: [le(l)],
+                    series: [S(l)],
                     labels: [e(`bmiCalculator.category.${a}`)],
-                    colors: G ? [G] : void 0,
-                    radialValueFormatter: () => v.format(l),
+                    colors: E ? [E] : void 0,
+                    radialValueFormatter: () => b.format(l),
                     height: 240
                   }
                 )
               }
             ),
-            n === "copy" || o ? /* @__PURE__ */ t(
-              ae,
+            n === "copy" || r ? /* @__PURE__ */ t(
+              ne,
               {
-                onInsert: o,
+                onInsert: r,
                 variant: n,
                 onCopy: f,
-                onError: A,
+                onError: D,
                 card: {
                   title: e("insert.title.bmi"),
                   highlight: e(`bmiCalculator.category.${a}`),
+                  // Chip + gauge arc share the WHO-category semantic token so
+                  // the inserted PNG matches the on-screen gauge.
+                  highlightToken: K(a),
+                  brand: _,
+                  gauge: {
+                    value: b.format(l),
+                    fraction: S(l) / 100,
+                    colorToken: K(a),
+                    label: e(`bmiCalculator.category.${a}`)
+                  },
                   fields: [
                     {
                       label: e("insert.title.bmi"),
-                      value: v.format(l)
+                      value: b.format(l)
                     },
                     {
                       label: e("bmiCalculator.category.label"),
@@ -252,8 +266,8 @@ const y = (i) => Math.round(i * 10) / 10, be = q(
     );
   }
 );
-be.displayName = "BmiCalculator";
+fe.displayName = "BmiCalculator";
 export {
-  be as B
+  fe as B
 };
-//# sourceMappingURL=bmi-calculator-DuVSFDuw.js.map
+//# sourceMappingURL=bmi-calculator-DFPWL2OJ.js.map

package/dist/_chunks/bmi-calculator-DFPWL2OJ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bmi-calculator-DFPWL2OJ.js","sources":["../../src/components/bmi-calculator/bmi-calculator.tsx"],"sourcesContent":["/* ------------------------------------------------------------------ */\n/* BmiCalculator — height + weight → WHO body-mass-index, shown on a */\n/* radialBar gauge. */\n/* */\n/* - Maths + unit conversion live in `./bmi` (pure, separately tested). */\n/* - Metric ⇄ imperial toggle persists the entered figures across the */\n/* switch by converting them (a patient measured in lb/ft doesn't */\n/* lose their numbers when a clinician flips to kg/cm). */\n/* - The gauge reuses the kit `Chart` (radialBar). Because ApexCharts */\n/* reads a radialBar series value as a 0–100 percent, the arc is fed */\n/* the BMI mapped onto the clinical 12–40 span and the true BMI is */\n/* printed in the centre via `radialValueFormatter`. */\n/* ------------------------------------------------------------------ */\n\nimport { forwardRef, useEffect, useId, useMemo, useState } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { RadioGroup, Radio } from '../radio-group';\nimport { FormField } from '../form-field';\nimport { NumberInput } from '../number-input';\nimport { Chart } from '../chart';\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 UnitSystem,\n type BmiCategory,\n computeBmi,\n bmiCategory,\n bmiToGaugePercent,\n cmToFtIn,\n ftInToCm,\n kgToLb,\n lbToKg,\n} from './bmi';\n\n/* ------------------------------------------------------------------ */\n/* Result payload emitted to consumers */\n/* ------------------------------------------------------------------ */\n\nexport interface BmiResult {\n /** BMI in kg/m². */\n bmi: number;\n /** WHO category the BMI falls into. */\n category: BmiCategory;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst rootVariants = cva('ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]', {\n variants: {\n width: {\n full: 'ds:w-full',\n auto: 'ds:inline-flex',\n },\n },\n defaultVariants: { width: 'full' },\n});\n\n/* ------------------------------------------------------------------ */\n/* Category → semantic intent for the Stat headline */\n/* ------------------------------------------------------------------ */\n\nconst CATEGORY_BADGE: Record<\n BmiCategory,\n 'info' | 'success' | 'warning' | 'error'\n> = {\n underweight: 'info',\n normal: 'success',\n overweight: 'warning',\n obese: 'error',\n};\n\n/* ------------------------------------------------------------------ */\n/* Gauge arc colour — semantic-token-per-WHO-category. */\n/* */\n/* The CVA below emits the *token NAME* (not a colour) for each */\n/* category. ApexCharts can't read `var(--…)`, so the component samples */\n/* the live token off the theme root with `getComputedStyle` and hands */\n/* the resolved string to `<Chart colors={[…]} />` — re-resolving on */\n/* every html-class change (theme switch) via a MutationObserver. */\n/* */\n/* underweight → --info · normal → --success · overweight → --warning · */\n/* obese → --destructive. */\n/* */\n/* Light-theme override: `--warning` is yellow-500, which only reaches */\n/* ~3.2:1 on white and fails the 3:1 non-text bar for the arc. In */\n/* light, non-accessible mode the overweight arc instead resolves */\n/* `--color-orange-600` (3.52:1 on white — passes). Dark and the */\n/* accessible themes keep `--warning`, whose deepened ramp already */\n/* clears the bar against their surfaces. */\n/* ------------------------------------------------------------------ */\n\nconst gaugeColorVariants = cva('', {\n variants: {\n category: {\n underweight: '--info',\n normal: '--success',\n overweight: '--warning',\n obese: '--destructive',\n },\n },\n});\n\n/** Token substituted for the overweight arc in light, non-accessible mode. */\nconst OVERWEIGHT_LIGHT_TOKEN = '--color-orange-600';\n\n/**\n * Read a CSS custom property off the theme root, resolved to a concrete\n * colour string ApexCharts can consume. Returns `undefined` outside a DOM.\n */\nfunction resolveGaugeColor(category: BmiCategory): string | undefined {\n if (typeof document === 'undefined') return undefined;\n const root = document.documentElement;\n const styles = getComputedStyle(root);\n // The overweight `--warning` yellow fails 3:1 on white — substitute the\n // orange token, but ONLY in light, non-accessible mode (the scope where the\n // contrast gap exists). Mirrors `.theme-light:not(.theme-accessible)`.\n const token =\n category === 'overweight' &&\n root.classList.contains('theme-light') &&\n !root.classList.contains('theme-accessible')\n ? OVERWEIGHT_LIGHT_TOKEN\n : gaugeColorVariants({ category });\n return styles.getPropertyValue(token).trim() || undefined;\n}\n\n/**\n * The DS token NAME for a category's gauge arc, mirroring `resolveGaugeColor`'s\n * theme-aware overweight override. Passed to the result card's `gauge.colorToken`\n * (and chip `highlightToken`) so the inserted PNG arc matches the on-screen one;\n * `InsertButton` resolves the name to a concrete colour at raster time.\n */\nfunction gaugeColorToken(category: BmiCategory): string {\n if (\n typeof document !== 'undefined' &&\n category === 'overweight' &&\n document.documentElement.classList.contains('theme-light') &&\n !document.documentElement.classList.contains('theme-accessible')\n ) {\n return OVERWEIGHT_LIGHT_TOKEN;\n }\n return gaugeColorVariants({ category });\n}\n\n/**\n * Resolve the gauge arc colour for the current category, re-sampling whenever\n * the html-class flips (theme switch). `null` category → no colour.\n */\nfunction useGaugeColor(category: BmiCategory | null): string | undefined {\n const [color, setColor] = useState<string | undefined>(undefined);\n useEffect(() => {\n if (category === null) {\n setColor(undefined);\n return undefined;\n }\n const read = () => setColor(resolveGaugeColor(category));\n read();\n if (typeof document === 'undefined') return undefined;\n const observer = new MutationObserver(read);\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class'],\n });\n return () => observer.disconnect();\n }, [category]);\n return color;\n}\n\nexport interface BmiCalculatorProps extends VariantProps<typeof rootVariants> {\n /** Initial unit system. Defaults to `'metric'`. */\n defaultUnitSystem?: UnitSystem;\n /** Fires whenever a valid BMI can be computed (and with `null` when it can't). */\n onResultChange?: (result: BmiResult | null) => void;\n /** When provided, shows an \"Insert\" button that emits the result for an editor. */\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 /**\n * Brand wordmark printed in the inserted/copied result-card footer.\n * Omitted → the default `'AlfaDocs'` wordmark; a string overrides it;\n * `false` removes the brand line.\n */\n insertBrand?: string | false;\n /** Opaque instance id, emitted as `data-component-id`. */\n id?: string;\n /** Extra class names on the wrapper. */\n className?: string;\n}\n\n/** Round to one decimal place — used when seeding a unit-switch. */\nconst round1 = (n: number): number => Math.round(n * 10) / 10;\n\nexport const BmiCalculator = forwardRef<HTMLDivElement, BmiCalculatorProps>(\n (\n {\n defaultUnitSystem = 'metric',\n onResultChange,\n onInsert,\n insertVariant = 'insert',\n onCopy,\n onError,\n insertBrand,\n id,\n width,\n className,\n },\n ref,\n ) => {\n const { t, i18n } = useTranslation();\n const heightGroupId = useId();\n\n const [unitSystem, setUnitSystem] = useState<UnitSystem>(defaultUnitSystem);\n\n // Raw per-system inputs. Metric is canonical for cm/kg; imperial keeps\n // ft + in + lb so typing isn't fought by rounding round-trips.\n const [heightCm, setHeightCm] = useState<number | null>(null);\n const [weightKg, setWeightKg] = useState<number | null>(null);\n const [heightFt, setHeightFt] = useState<number | null>(null);\n const [heightIn, setHeightIn] = useState<number | null>(null);\n const [weightLb, setWeightLb] = useState<number | null>(null);\n\n const handleUnitChange = (next: string): void => {\n const target = next as UnitSystem;\n if (target === unitSystem) return;\n if (target === 'imperial') {\n if (heightCm !== null) {\n const { ft, in: inches } = cmToFtIn(heightCm);\n setHeightFt(ft);\n setHeightIn(round1(inches));\n }\n if (weightKg !== null) setWeightLb(round1(kgToLb(weightKg)));\n } else {\n if (heightFt !== null || heightIn !== null) {\n setHeightCm(round1(ftInToCm(heightFt ?? 0, heightIn ?? 0)));\n }\n if (weightLb !== null) setWeightKg(round1(lbToKg(weightLb)));\n }\n setUnitSystem(target);\n };\n\n /* Canonical metric figures for the active system. */\n const canonicalHeightCm =\n unitSystem === 'metric'\n ? heightCm\n : heightFt !== null || heightIn !== null\n ? ftInToCm(heightFt ?? 0, heightIn ?? 0)\n : null;\n const canonicalWeightKg =\n unitSystem === 'metric'\n ? weightKg\n : weightLb !== null\n ? lbToKg(weightLb)\n : null;\n\n const bmi = computeBmi(canonicalWeightKg, canonicalHeightCm);\n const category = bmi !== null ? bmiCategory(bmi) : null;\n\n // Resolved arc colour for the active category + theme (ApexCharts can't\n // read CSS vars, so we sample the token off the theme root).\n const gaugeColor = useGaugeColor(category);\n\n const bmiFormatter = useMemo(\n () =>\n new Intl.NumberFormat(i18n.language, {\n minimumFractionDigits: 1,\n maximumFractionDigits: 1,\n }),\n [i18n.language],\n );\n\n // Notify consumers without re-firing on unrelated re-renders.\n useEffect(() => {\n onResultChange?.(\n bmi !== null && category !== null ? { bmi, category } : null,\n );\n }, [bmi, category, onResultChange]);\n\n const isMetric = unitSystem === 'metric';\n\n return (\n <div\n ref={ref}\n data-component=\"bmi-calculator\"\n data-component-id={id}\n className={rootVariants({ width, className })}\n >\n <RadioGroup\n label={t('bmiCalculator.unitSystem.label')}\n variant=\"horizontal\"\n value={unitSystem}\n onValueChange={handleUnitChange}\n >\n <Radio label={t('bmiCalculator.unitSystem.metric')} value=\"metric\" />\n <Radio\n label={t('bmiCalculator.unitSystem.imperial')}\n value=\"imperial\"\n />\n </RadioGroup>\n\n <div className=\"ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-2\">\n {isMetric ? (\n <FormField\n label={`${t('bmiCalculator.height')} (${t('bmiCalculator.units.cm')})`}\n >\n <NumberInput\n mode=\"decimal\"\n min={0}\n step={0.5}\n value={heightCm}\n onChange={setHeightCm}\n />\n </FormField>\n ) : (\n <div role=\"group\" aria-labelledby={heightGroupId}>\n <span\n id={heightGroupId}\n className=\"type-label ds:mb-[var(--spacing-xs)] ds:block ds:text-foreground\"\n >\n {t('bmiCalculator.height')}\n </span>\n <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-sm)]\">\n <NumberInput\n mode=\"integer\"\n min={0}\n value={heightFt}\n onChange={setHeightFt}\n aria-label={t('bmiCalculator.feet')}\n />\n <span className=\"type-label ds:text-muted-foreground\">\n {t('bmiCalculator.units.ft')}\n </span>\n <NumberInput\n mode=\"decimal\"\n min={0}\n max={11.9}\n step={0.5}\n value={heightIn}\n onChange={setHeightIn}\n aria-label={t('bmiCalculator.inches')}\n />\n <span className=\"type-label ds:text-muted-foreground\">\n {t('bmiCalculator.units.in')}\n </span>\n </div>\n </div>\n )}\n\n <FormField\n label={`${t('bmiCalculator.weight')} (${t(\n isMetric ? 'bmiCalculator.units.kg' : 'bmiCalculator.units.lb',\n )})`}\n >\n <NumberInput\n mode=\"decimal\"\n min={0}\n step={isMetric ? 0.1 : 0.5}\n value={isMetric ? weightKg : weightLb}\n onChange={isMetric ? setWeightKg : setWeightLb}\n />\n </FormField>\n </div>\n\n {/* Concise polite announcement when the result resolves — the gauge\n itself stays out of the live region to avoid re-reading on every\n keystroke. */}\n <p className=\"ds:sr-only\" role=\"status\" aria-live=\"polite\">\n {bmi !== null && category !== null\n ? t('bmiCalculator.gaugeAria', {\n bmi: bmiFormatter.format(bmi),\n category: t(`bmiCalculator.category.${category}`),\n })\n : ''}\n </p>\n\n {bmi !== null && category !== null ? (\n <Card variant=\"elevated\">\n <Card.Body className=\"ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-md)]\">\n <div className=\"ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:text-center\">\n <span className=\"type-label ds:text-muted-foreground\">\n {t('bmiCalculator.category.label')}\n </span>\n <Badge variant={CATEGORY_BADGE[category]} size=\"lg\">\n {t(`bmiCalculator.category.${category}`)}\n </Badge>\n <p className=\"type-body ds:text-muted-foreground\">\n {t(`bmiCalculator.range.${category}`)}\n </p>\n </div>\n {/* `data-bmi-category` exposes the WHO band so the gauge arc's\n semantic colour is assertable without sampling the canvas. */}\n <div\n data-bmi-category={category}\n className=\"ds:w-[240px] ds:max-w-full\"\n >\n <Chart\n type=\"radialBar\"\n title={t('bmiCalculator.gaugeAria', {\n bmi: bmiFormatter.format(bmi),\n category: t(`bmiCalculator.category.${category}`),\n })}\n series={[bmiToGaugePercent(bmi)]}\n labels={[t(`bmiCalculator.category.${category}`)]}\n colors={gaugeColor ? [gaugeColor] : undefined}\n radialValueFormatter={() => bmiFormatter.format(bmi)}\n height={240}\n />\n </div>\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.bmi'),\n highlight: t(`bmiCalculator.category.${category}`),\n // Chip + gauge arc share the WHO-category semantic token so\n // the inserted PNG matches the on-screen gauge.\n highlightToken: gaugeColorToken(category),\n brand: insertBrand,\n gauge: {\n value: bmiFormatter.format(bmi),\n fraction: bmiToGaugePercent(bmi) / 100,\n colorToken: gaugeColorToken(category),\n label: t(`bmiCalculator.category.${category}`),\n },\n fields: [\n {\n label: t('insert.title.bmi'),\n value: bmiFormatter.format(bmi),\n },\n {\n label: t('bmiCalculator.category.label'),\n value: t(`bmiCalculator.category.${category}`),\n },\n ],\n }}\n />\n ) : null}\n </Card.Body>\n </Card>\n ) : (\n <p className=\"type-body ds:text-muted-foreground\">\n {t('bmiCalculator.empty')}\n </p>\n )}\n </div>\n );\n },\n);\n\nBmiCalculator.displayName = 'BmiCalculator';\n"],"names":["rootVariants","cva","CATEGORY_BADGE","gaugeColorVariants","OVERWEIGHT_LIGHT_TOKEN","resolveGaugeColor","category","root","styles","token","gaugeColorToken","useGaugeColor","color","setColor","useState","useEffect","read","observer","round1","n","BmiCalculator","forwardRef","defaultUnitSystem","onResultChange","onInsert","insertVariant","onCopy","onError","insertBrand","id","width","className","ref","t","i18n","useTranslation","heightGroupId","useId","unitSystem","setUnitSystem","heightCm","setHeightCm","weightKg","setWeightKg","heightFt","setHeightFt","heightIn","setHeightIn","weightLb","setWeightLb","handleUnitChange","next","target","ft","inches","cmToFtIn","kgToLb","ftInToCm","lbToKg","canonicalHeightCm","canonicalWeightKg","bmi","computeBmi","bmiCategory","gaugeColor","bmiFormatter","useMemo","isMetric","jsxs","RadioGroup","jsx","Radio","FormField","NumberInput","Card","Badge","Chart","bmiToGaugePercent","InsertButton"],"mappings":"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"}

package/dist/_chunks/{calculator-dialog-DdexHrTP.js → calculator-dialog-D-nfvteH.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as l } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { D as r } from "./dialog-DOYgd75U.js";
+import { D as r } from "./dialog-BTpZV6It.js";
 const u = p(
   ({
     trigger: i,
@@ -37,4 +37,4 @@ u.displayName = "CalculatorDialog";
 export {
   u as C
 };
-//# sourceMappingURL=calculator-dialog-DdexHrTP.js.map
+//# sourceMappingURL=calculator-dialog-D-nfvteH.js.map

package/dist/_chunks/{calculator-dialog-DdexHrTP.js.map → calculator-dialog-D-nfvteH.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calculator-dialog-~~DdexHrTP~~.js","sources":["../../src/components/calculator-dialog/calculator-dialog.tsx"],"sourcesContent":["/* ------------------------------------------------------------------ /\n/ CalculatorDialog — shared modal wrapper for the calculator toolset. /\n/ /\n/ Rather than baking Dialog wiring into every calculator, this single /\n/ wrapper composes the kit `Dialog` and hosts ANY calculator (or any /\n/ content) as children. Every calculator therefore gains a modal /\n/ presentation for free: /\n/ /\n/ <CalculatorDialog /\n/ trigger={<Button>Open BMI calculator</Button>} /\n/ title=\"BMI calculator\"> /\n/ <BmiCalculator /> /\n/ </CalculatorDialog> /\n/ ------------------------------------------------------------------ /\n\nimport { forwardRef, type ReactNode } from 'react';\nimport { Dialog, type DialogContentProps } from '../dialog';\n\nexport interface CalculatorDialogProps {\n /* The element that opens the modal (rendered via `Dialog.Trigger asChild`). /\n trigger: ReactNode;\n /* Modal heading — also names the dialog for assistive tech. /\n title: string;\n /* Optional supporting line under the title. /\n description?: string;\n /* The calculator (or any content) shown inside the modal. /\n children: ReactNode;\n /* Dialog size. Calculators default to `lg` to fit inputs + result. /\n size?: DialogContentProps['size'];\n /* Controlled open state. /\n open?: boolean;\n /* Uncontrolled initial open state. /\n defaultOpen?: boolean;\n /* Open-state change handler. /\n onOpenChange?: (open: boolean) => void;\n /* Opaque instance id, forwarded to the dialog content. /\n id?: string;\n /* Extra class names on the modal body wrapper. */\n className?: string;\n}\n\nexport const CalculatorDialog = forwardRef<\n HTMLDivElement,\n CalculatorDialogProps\n>(\n (\n {\n trigger,\n title,\n description,\n children,\n size = 'lg',\n open,\n defaultOpen,\n onOpenChange,\n id,\n className,\n },\n ref,\n ) => {\n return (\n <Dialog\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n id={id}\n >\n <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>\n <Dialog.Content ref={ref} size={size}>\n <Dialog.Header>\n <Dialog.Title>{title}</Dialog.Title>\n {description ? (\n <Dialog.Description>{description}</Dialog.Description>\n ) : null}\n </Dialog.Header>\n <div data-component=\"calculator-dialog\" className={className}>\n {children}\n </div>\n </Dialog.Content>\n </Dialog>\n );\n },\n);\n\nCalculatorDialog.displayName = 'CalculatorDialog';\n"],"names":["CalculatorDialog","forwardRef","trigger","title","description","children","size","open","defaultOpen","onOpenChange","id","className","ref","jsxs","Dialog","jsx"],"mappings":";;;AAyCO,MAAMA,IAAmBC;AAAA,EAI9B,CACE;AAAA,IACE,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,IAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAEFC,MAGE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,IAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAK,EAACD,EAAO,SAAP,EAAe,SAAO,IAAE,UAAAZ,GAAQ;AAAA,QACjC,gBAAAW,EAACC,EAAO,SAAP,EAAe,KAAAF,GAAU,MAAAN,GACxB,UAAA;AAAA,UAAA,gBAAAO,EAACC,EAAO,QAAP,EACC,UAAA;AAAA,YAAA,gBAAAC,EAACD,EAAO,OAAP,EAAc,UAAAX,EAAA,CAAM;AAAA,YACpBC,IACC,gBAAAW,EAACD,EAAO,aAAP,EAAoB,aAAY,IAC/B;AAAA,UAAA,GACN;AAAA,UACA,gBAAAC,EAAC,OAAA,EAAI,kBAAe,qBAAoB,WAAAJ,GACrC,UAAAN,EAAA,CACH;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAL,EAAiB,cAAc;"}
1	+ {"version":3,"file":"calculator-dialog-D-nfvteH.js","sources":["../../src/components/calculator-dialog/calculator-dialog.tsx"],"sourcesContent":["/* ------------------------------------------------------------------ /\n/ CalculatorDialog — shared modal wrapper for the calculator toolset. /\n/ /\n/ Rather than baking Dialog wiring into every calculator, this single /\n/ wrapper composes the kit `Dialog` and hosts ANY calculator (or any /\n/ content) as children. Every calculator therefore gains a modal /\n/ presentation for free: /\n/ /\n/ <CalculatorDialog /\n/ trigger={<Button>Open BMI calculator</Button>} /\n/ title=\"BMI calculator\"> /\n/ <BmiCalculator /> /\n/ </CalculatorDialog> /\n/ ------------------------------------------------------------------ /\n\nimport { forwardRef, type ReactNode } from 'react';\nimport { Dialog, type DialogContentProps } from '../dialog';\n\nexport interface CalculatorDialogProps {\n /* The element that opens the modal (rendered via `Dialog.Trigger asChild`). /\n trigger: ReactNode;\n /* Modal heading — also names the dialog for assistive tech. /\n title: string;\n /* Optional supporting line under the title. /\n description?: string;\n /* The calculator (or any content) shown inside the modal. /\n children: ReactNode;\n /* Dialog size. Calculators default to `lg` to fit inputs + result. /\n size?: DialogContentProps['size'];\n /* Controlled open state. /\n open?: boolean;\n /* Uncontrolled initial open state. /\n defaultOpen?: boolean;\n /* Open-state change handler. /\n onOpenChange?: (open: boolean) => void;\n /* Opaque instance id, forwarded to the dialog content. /\n id?: string;\n /* Extra class names on the modal body wrapper. */\n className?: string;\n}\n\nexport const CalculatorDialog = forwardRef<\n HTMLDivElement,\n CalculatorDialogProps\n>(\n (\n {\n trigger,\n title,\n description,\n children,\n size = 'lg',\n open,\n defaultOpen,\n onOpenChange,\n id,\n className,\n },\n ref,\n ) => {\n return (\n <Dialog\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n id={id}\n >\n <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>\n <Dialog.Content ref={ref} size={size}>\n <Dialog.Header>\n <Dialog.Title>{title}</Dialog.Title>\n {description ? (\n <Dialog.Description>{description}</Dialog.Description>\n ) : null}\n </Dialog.Header>\n <div data-component=\"calculator-dialog\" className={className}>\n {children}\n </div>\n </Dialog.Content>\n </Dialog>\n );\n },\n);\n\nCalculatorDialog.displayName = 'CalculatorDialog';\n"],"names":["CalculatorDialog","forwardRef","trigger","title","description","children","size","open","defaultOpen","onOpenChange","id","className","ref","jsxs","Dialog","jsx"],"mappings":";;;AAyCO,MAAMA,IAAmBC;AAAA,EAI9B,CACE;AAAA,IACE,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,IAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAEFC,MAGE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,IAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAK,EAACD,EAAO,SAAP,EAAe,SAAO,IAAE,UAAAZ,GAAQ;AAAA,QACjC,gBAAAW,EAACC,EAAO,SAAP,EAAe,KAAAF,GAAU,MAAAN,GACxB,UAAA;AAAA,UAAA,gBAAAO,EAACC,EAAO,QAAP,EACC,UAAA;AAAA,YAAA,gBAAAC,EAACD,EAAO,OAAP,EAAc,UAAAX,EAAA,CAAM;AAAA,YACpBC,IACC,gBAAAW,EAACD,EAAO,aAAP,EAAoB,aAAY,IAC/B;AAAA,UAAA,GACN;AAAA,UACA,gBAAAC,EAAC,OAAA,EAAI,kBAAe,qBAAoB,WAAAJ,GACrC,UAAAN,EAAA,CACH;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAL,EAAiB,cAAc;"}

package/dist/_chunks/{cycle-calculator-Dln-y1k_.js → cycle-calculator-ChHBcjet.js} RENAMED Viewed

@@ -1,17 +1,17 @@
 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 { forwardRef as F, useState as L, useMemo as h, useEffect as H } from "react";
+import { c as $ } from "./index-D2ZczOXr.js";
+import { useTranslation as A } from "react-i18next";
+import { F as w } from "./form-field-BOm9hK35.js";
+import { D as I } from "./date-picker-Bq7xhMA-.js";
+import { N as S } from "./number-input-Dj5L3pXK.js";
+import { C as P } from "./card-DPmk26CL.js";
+import { B as v } from "./badge-zsf5i5bH.js";
+import { I as k } from "./insert-result-CoC1oo6R.js";
+import { a as s } 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";
+import { c as G } from "./createLucideIcon-CrFbzy84.js";
 /**
  * @license lucide-react v1.8.0 - ISC
  *
@@ -26,77 +26,78 @@ const Y = [
       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(
+], j = G("droplet", Y), x = 28, M = 14, U = 1;
+function K(n, c = 3) {
+  const d = n.cycleLength ?? x, { lastPeriodStart: i } = n, o = s(i, d - M), u = {
+    start: s(o, -5),
+    end: s(o, U)
+  }, f = s(i, d), p = Array.from(
     { length: c },
-    (C, g) => i(s, d * (g + 1))
+    (C, g) => s(i, 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)]", {
+const O = $("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(
+}), V = "--accent", q = F(
   ({
-    defaultCycleLength: n = h,
+    defaultCycleLength: n = x,
     onResultChange: c,
     onInsert: d,
-    insertVariant: s = "insert",
+    insertVariant: i = "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(
+    insertBrand: f,
+    id: p,
+    width: C,
+    className: g
+  }, b) => {
+    const { t: a, i18n: N } = A(), [m, D] = L(void 0), [y, E] = L(
       n
-    ), t = v(() => m ? G({
+    ), t = h(() => m ? K({
       lastPeriodStart: m,
-      cycleLength: y ?? h
-    }) : null, [m, y]), E = v(
+      cycleLength: y ?? x
+    }) : null, [m, y]), T = h(
       () => new Intl.DateTimeFormat(N.language, { dateStyle: "medium" }),
       [N.language]
     );
-    S(() => {
+    H(() => {
       c == null || c(t);
     }, [t, c]);
-    const _ = v(() => /* @__PURE__ */ new Date(), []), l = (F) => E.format(F);
+    const _ = h(() => /* @__PURE__ */ new Date(), []), l = (W) => T.format(W);
     return /* @__PURE__ */ r(
       "div",
       {
-        ref: g,
+        ref: b,
         "data-component": "cycle-calculator",
-        "data-component-id": f,
-        className: V({ width: p, className: C }),
+        "data-component-id": p,
+        className: O({ width: C, className: g }),
         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(
-              $,
+            /* @__PURE__ */ e(w, { label: a("cycleCalculator.lastPeriod"), children: /* @__PURE__ */ e(
+              I,
               {
                 value: m,
-                onChange: b,
+                onChange: D,
                 maxDate: _
               }
             ) }),
             /* @__PURE__ */ e(
-              P,
+              w,
               {
                 label: a("cycleCalculator.cycleLength"),
                 description: a("cycleCalculator.cycleLengthHint"),
                 children: /* @__PURE__ */ e(
-                  H,
+                  S,
                   {
                     mode: "integer",
                     min: 20,
                     max: 45,
                     value: y,
-                    onChange: D
+                    onChange: E
                   }
                 )
               }
@@ -105,12 +106,12 @@ const V = T("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
           /* @__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: [
+          t ? /* @__PURE__ */ e(P, { variant: "elevated", children: /* @__PURE__ */ r(P.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,
+                  v,
                   {
                     variant: "success",
                     size: "lg",
@@ -122,7 +123,7 @@ const V = T("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
               /* @__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,
+                  v,
                   {
                     variant: "accent",
                     size: "lg",
@@ -139,7 +140,7 @@ const V = T("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
               /* @__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,
+                  v,
                   {
                     variant: "error",
                     size: "lg",
@@ -149,15 +150,22 @@ const V = T("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
                 ) })
               ] })
             ] }),
-            s === "copy" || d ? /* @__PURE__ */ e(
-              I,
+            i === "copy" || d ? /* @__PURE__ */ e(
+              k,
               {
                 onInsert: d,
-                variant: s,
+                variant: i,
                 onCopy: o,
                 onError: u,
                 card: {
                   title: a("insert.title.cycle"),
+                  highlight: `${l(t.fertileWindow.start)} – ${l(
+                    t.fertileWindow.end
+                  )}`,
+                  // Chip reuses the on-screen fertile-window badge's accent
+                  // token so the inserted PNG chip matches the screen.
+                  highlightToken: V,
+                  brand: f,
                   fields: [
                     {
                       label: a("cycleCalculator.ovulation"),
@@ -187,6 +195,6 @@ q.displayName = "CycleCalculator";
 export {
   q as C,
   M as L,
-  G as p
+  K as p
 };
-//# sourceMappingURL=cycle-calculator-Dln-y1k_.js.map
+//# sourceMappingURL=cycle-calculator-ChHBcjet.js.map