@alfadocs/ui-kit 0.68.0 → 0.70.0

package/dist/_chunks/bmi-calculator-zjeY4E7J.js

@@ -0,0 +1,434 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as ae, useId as le, useState as d, useMemo as T, useEffect as ne, useRef as re } from "react";
+import { c as se } from "./index-D2ZczOXr.js";
+import { useTranslation as oe } from "react-i18next";
+import { u as ce } from "./registry-DvAUVLHh.js";
+import { R as E } from "./radio-TWf9Q-mp.js";
+import { R as ue } from "./radio-group-BPt7pKZW.js";
+import { F as G } from "./form-field-BOm9hK35.js";
+import { N as L } from "./number-input-DxphVG_A.js";
+import { C as j } from "./card-DPmk26CL.js";
+import { B as me } from "./badge-DCOqV9mI.js";
+import { B as de, I as ge, b as pe } from "./insert-result-njqBthzT.js";
+import { c as q, b as he, e as be, l as D, f as V, k as z } from "./bmi-BxD-tFzU.js";
+const ye = {
+  id: "bmi-calculator",
+  capabilities: ["set_value", "view_change"],
+  state: {
+    unitSystem: {
+      type: "'metric' | 'imperial'",
+      descriptionKey: "ui.agent.bmiCalculator.state.unitSystem",
+      description: "Active unit system the inputs are entered in.",
+      read: (a) => a.getUnitSystem()
+    },
+    inputs: {
+      type: "{ heightCm: number | null, weightKg: number | null }",
+      descriptionKey: "ui.agent.bmiCalculator.state.inputs",
+      description: "Canonical metric measurements regardless of the active unit system — height in centimetres and weight in kilograms, or null when unset.",
+      read: (a) => a.getInputs()
+    },
+    result: {
+      type: "{ bmi: number, category: string } | null",
+      descriptionKey: "ui.agent.bmiCalculator.state.result",
+      description: "Computed BMI (kg/m²) and WHO category (underweight / normal / overweight / obese). Null until both height and weight are valid.",
+      read: (a) => a.getResult()
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ heightCm?: number | null, weightKg?: number | null }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          heightCm: {
+            type: ["number", "null"],
+            description: "Height in centimetres (canonical metric).",
+            minimum: 0
+          },
+          weightKg: {
+            type: ["number", "null"],
+            description: "Weight in kilograms (canonical metric).",
+            minimum: 0
+          }
+        },
+        additionalProperties: !1
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.bmiCalculator.actions.setValue",
+      description: "Set height (cm) and/or weight (kg) in canonical metric units. Omitted fields are left unchanged.",
+      examples: [
+        {
+          args: { heightCm: 175, weightKg: 72 },
+          note: "A 175 cm, 72 kg patient → BMI ~23.5 (normal)."
+        }
+      ],
+      invoke: (a, o) => {
+        a.setMetric(o);
+      }
+    },
+    set_unit_system: {
+      safety: "write",
+      argsType: "{ unitSystem: 'metric' | 'imperial' }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          unitSystem: {
+            enum: ["metric", "imperial"],
+            description: "Unit system to display the inputs in."
+          }
+        },
+        required: ["unitSystem"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.bmiCalculator.actions.setUnitSystem",
+      description: "Switch the input unit system. Entered figures are preserved by conversion; the computed BMI is unchanged.",
+      invoke: (a, o) => {
+        a.setUnitSystem(o.unitSystem);
+      }
+    },
+    reset: {
+      safety: "write",
+      idempotent: !0,
+      descriptionKey: "ui.agent.bmiCalculator.actions.reset",
+      description: "Clear height and weight and the computed result.",
+      invoke: (a) => {
+        a.reset();
+      }
+    },
+    get_result: {
+      safety: "read",
+      returns: "{ bmi: number, category: string } | null",
+      returnsSchema: {
+        oneOf: [
+          {
+            type: "object",
+            properties: {
+              bmi: { type: "number", minimum: 0 },
+              category: {
+                enum: ["underweight", "normal", "overweight", "obese"]
+              }
+            },
+            required: ["bmi", "category"]
+          },
+          { type: "null" }
+        ]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.bmiCalculator.actions.getResult",
+      description: "Return the computed BMI + WHO category, or null until both inputs are valid.",
+      invoke: (a) => a.getResult()
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "bmi-calculator",
+      description: "Marks the BmiCalculator wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific calculator instance."
+    }
+  }
+}, fe = se("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
+  variants: {
+    width: {
+      full: "ds:w-full",
+      auto: "ds:inline-flex"
+    }
+  },
+  defaultVariants: { width: "full" }
+}), ve = {
+  underweight: "info",
+  normal: "success",
+  overweight: "warning",
+  obese: "error"
+}, Ce = {
+  underweight: "--info",
+  normal: "--success",
+  overweight: "--warning-readable",
+  obese: "--destructive"
+}, g = (a) => Math.round(a * 10) / 10, we = ae(
+  ({
+    defaultUnitSystem: a = "metric",
+    onResultChange: o,
+    onInsert: F,
+    insertVariant: H = "insert",
+    onCopy: P,
+    onError: Y,
+    insertBrand: J,
+    id: M,
+    width: Q,
+    className: X
+  }, Z) => {
+    const { t: e, i18n: U } = oe(), A = le(), [u, ee] = d(a), [S, x] = d(null), [k, K] = d(null), [p, h] = d(null), [b, y] = d(null), [f, N] = d(null), B = (s) => {
+      const i = s;
+      if (i !== u) {
+        if (i === "imperial") {
+          if (S !== null) {
+            const { ft: C, in: w } = q(S);
+            h(C), y(g(w));
+          }
+          k !== null && N(g(z(k)));
+        } else
+          (p !== null || b !== null) && x(g(V(p ?? 0, b ?? 0))), f !== null && K(g(D(f)));
+        ee(i);
+      }
+    }, I = u === "metric" ? S : p !== null || b !== null ? V(p ?? 0, b ?? 0) : null, R = u === "metric" ? k : f !== null ? D(f) : null, r = be(R, I), l = r !== null ? he(r) : null, _ = T(
+      () => new Intl.NumberFormat(U.language, {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 1
+      }),
+      [U.language]
+    );
+    ne(() => {
+      o == null || o(
+        r !== null && l !== null ? { bmi: r, category: l } : null
+      );
+    }, [r, l, o]);
+    const c = re({
+      unitSystem: u,
+      canonicalHeightCm: I,
+      canonicalWeightKg: R,
+      bmi: r,
+      category: l,
+      handleUnitChange: B
+    });
+    c.current = {
+      unitSystem: u,
+      canonicalHeightCm: I,
+      canonicalWeightKg: R,
+      bmi: r,
+      category: l,
+      handleUnitChange: B
+    };
+    const te = T(
+      () => ({
+        getUnitSystem: () => c.current.unitSystem,
+        setUnitSystem: (s) => c.current.handleUnitChange(s),
+        getInputs: () => ({
+          heightCm: c.current.canonicalHeightCm,
+          weightKg: c.current.canonicalWeightKg
+        }),
+        setMetric: (s) => {
+          if ("heightCm" in s) {
+            const i = s.heightCm;
+            if (c.current.unitSystem === "metric")
+              x(i ?? null);
+            else if (i == null)
+              h(null), y(null);
+            else {
+              const { ft: C, in: w } = q(i);
+              h(C), y(g(w));
+            }
+          }
+          if ("weightKg" in s) {
+            const i = s.weightKg;
+            c.current.unitSystem === "metric" ? K(i ?? null) : N(
+              i == null ? null : g(z(i))
+            );
+          }
+        },
+        getResult: () => {
+          const { bmi: s, category: i } = c.current;
+          return s !== null && i !== null ? { bmi: s, category: i } : null;
+        },
+        reset: () => {
+          x(null), K(null), h(null), y(null), N(null);
+        }
+      }),
+      []
+    );
+    ce(ye, te, M);
+    const v = u === "metric", n = T(() => {
+      if (r === null || l === null) return null;
+      const { bands: s, min: i, max: C, ticks: w } = pe(), $ = _.format(r), O = e(`bmiCalculator.category.${l}`), W = e(`bmiCalculator.range.${l}`), ie = e("bmiCalculator.gaugeAria", {
+        bmi: $,
+        category: O,
+        range: W
+      });
+      return {
+        value: r,
+        bands: s,
+        min: i,
+        max: C,
+        ticks: w,
+        valueLabel: $,
+        categoryLabel: O,
+        rangeLabel: W,
+        ariaLabel: ie
+      };
+    }, [r, l, _, e]);
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: Z,
+        "data-component": "bmi-calculator",
+        "data-component-id": M,
+        className: fe({ width: Q, className: X }),
+        children: [
+          /* @__PURE__ */ m(
+            ue,
+            {
+              label: e("bmiCalculator.unitSystem.label"),
+              variant: "horizontal",
+              value: u,
+              onValueChange: B,
+              children: [
+                /* @__PURE__ */ t(E, { label: e("bmiCalculator.unitSystem.metric"), value: "metric" }),
+                /* @__PURE__ */ t(
+                  E,
+                  {
+                    label: e("bmiCalculator.unitSystem.imperial"),
+                    value: "imperial"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ m("div", { className: "ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-2", children: [
+            v ? /* @__PURE__ */ t(
+              G,
+              {
+                label: `${e("bmiCalculator.height")} (${e("bmiCalculator.units.cm")})`,
+                children: /* @__PURE__ */ t(
+                  L,
+                  {
+                    mode: "decimal",
+                    min: 0,
+                    step: 0.5,
+                    value: S,
+                    onChange: x
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ m("div", { role: "group", "aria-labelledby": A, children: [
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  id: A,
+                  className: "type-label ds:mb-[var(--spacing-xs)] ds:block ds:text-foreground",
+                  children: e("bmiCalculator.height")
+                }
+              ),
+              /* @__PURE__ */ m("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+                /* @__PURE__ */ t(
+                  L,
+                  {
+                    mode: "integer",
+                    min: 0,
+                    value: p,
+                    onChange: h,
+                    "aria-label": e("bmiCalculator.feet")
+                  }
+                ),
+                /* @__PURE__ */ t("span", { className: "type-label ds:text-muted-foreground", children: e("bmiCalculator.units.ft") }),
+                /* @__PURE__ */ t(
+                  L,
+                  {
+                    mode: "decimal",
+                    min: 0,
+                    max: 11.9,
+                    step: 0.5,
+                    value: b,
+                    onChange: y,
+                    "aria-label": e("bmiCalculator.inches")
+                  }
+                ),
+                /* @__PURE__ */ t("span", { className: "type-label ds:text-muted-foreground", children: e("bmiCalculator.units.in") })
+              ] })
+            ] }),
+            /* @__PURE__ */ t(
+              G,
+              {
+                label: `${e("bmiCalculator.weight")} (${e(
+                  v ? "bmiCalculator.units.kg" : "bmiCalculator.units.lb"
+                )})`,
+                children: /* @__PURE__ */ t(
+                  L,
+                  {
+                    mode: "decimal",
+                    min: 0,
+                    step: v ? 0.1 : 0.5,
+                    value: v ? k : f,
+                    onChange: v ? K : N
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("p", { className: "ds:sr-only", role: "status", "aria-live": "polite", children: n ? n.ariaLabel : "" }),
+          r !== null && l !== null && n !== null ? /* @__PURE__ */ t(j, { variant: "elevated", children: /* @__PURE__ */ m(j.Body, { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-md)]", children: [
+            /* @__PURE__ */ m("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(me, { variant: ve[l], size: "lg", children: e(`bmiCalculator.category.${l}`) }),
+              /* @__PURE__ */ t("p", { className: "type-body ds:text-muted-foreground", children: n.rangeLabel })
+            ] }),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                "data-bmi-category": l,
+                className: "ds:w-full ds:max-w-[320px]",
+                children: /* @__PURE__ */ t(de, { model: n, className: "ds:w-full" })
+              }
+            ),
+            H === "copy" || F ? /* @__PURE__ */ t(
+              ge,
+              {
+                onInsert: F,
+                variant: H,
+                onCopy: P,
+                onError: Y,
+                card: {
+                  title: e("insert.title.bmi"),
+                  icon: "scale",
+                  highlight: e(`bmiCalculator.category.${l}`),
+                  // Chip shares the WHO-category semantic token so the
+                  // inserted PNG chip matches the on-screen band colour.
+                  highlightToken: Ce[l],
+                  brand: J,
+                  // Banded gauge: the SAME geometry + WHO bands as the
+                  // on-screen widget, baked into the card PNG with
+                  // probe-resolved theme colours.
+                  gauge: {
+                    variant: "banded",
+                    value: r,
+                    bands: n.bands,
+                    min: n.min,
+                    max: n.max,
+                    valueLabel: n.valueLabel,
+                    categoryLabel: n.categoryLabel,
+                    rangeLabel: n.rangeLabel,
+                    ariaLabel: n.ariaLabel,
+                    ticks: n.ticks
+                  },
+                  fields: [
+                    {
+                      // Mirrors the on-screen scale glyph + header icon.
+                      icon: "scale",
+                      label: e("insert.title.bmi"),
+                      value: n.valueLabel
+                    },
+                    {
+                      // WHO band is a classification → tag glyph.
+                      icon: "tag",
+                      label: e("bmiCalculator.category.label"),
+                      value: n.categoryLabel
+                    }
+                  ]
+                }
+              }
+            ) : null
+          ] }) }) : /* @__PURE__ */ t("p", { className: "type-body ds:text-muted-foreground", children: e("bmiCalculator.empty") })
+        ]
+      }
+    );
+  }
+);
+we.displayName = "BmiCalculator";
+export {
+  we as B
+};
+//# sourceMappingURL=bmi-calculator-zjeY4E7J.js.map