{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reference-range",
  "type": "registry:component",
  "title": "Reference range",
  "description": "Positions a supplied numeric reading against caller-supplied reference bounds, with a complete text equivalent.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/reference-range.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\n\nexport interface ReferenceRangeProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string;\n  value?: number | null;\n  /** Caller-supplied lower bound. Omit for an upper bound only. */\n  minimum?: number | null;\n  /** Caller-supplied upper bound. Omit for a lower bound only. */\n  maximum?: number | null;\n  unit?: string;\n  /** Display formatting for the supplied numeric value. */\n  valueLabel?: string;\n  /** Optional contextual label, such as the laboratory's reference interval. */\n  rangeLabel?: string;\n}\n\nconst styles = stylex.create({\n  root: { display: \"grid\", gap: \"0.5rem\", width: \"100%\", minWidth: 0, color: vlak.ink, lineHeight: 1.45, overflowWrap: \"anywhere\" },\n  head: { margin: 0, display: \"flex\", alignItems: \"baseline\", flexWrap: \"wrap\", justifyContent: \"space-between\", gap: \"0.25rem 1rem\", fontSize: \"0.875rem\" },\n  label: { fontWeight: 500 },\n  value: { fontVariantNumeric: \"tabular-nums\", fontSize: \"1.25rem\", fontWeight: 500, lineHeight: 1.2, textAlign: \"end\", marginInlineStart: \"auto\" },\n  track: { position: \"relative\", height: \"1.5rem\", marginInline: \"0.3125rem\", \"::before\": { content: \"''\", position: \"absolute\", insetInline: 0, top: \"50%\", height: vlak.hairline, transform: \"translateY(-50%)\", backgroundColor: { default: vlak.controlBorder, [mq.forcedColors]: \"CanvasText\" } } },\n  interval: { position: \"absolute\", insetInlineStart: \"20%\", width: \"60%\", height: \"0.5rem\", top: \"50%\", transform: \"translateY(-50%)\", backgroundColor: { default: vlak.divider, [mq.forcedColors]: \"Canvas\" }, borderWidth: vlak.hairline, borderStyle: \"solid\", borderColor: vlak.controlBorder, boxSizing: \"border-box\" },\n  marker: { position: \"absolute\", top: \"50%\", transform: \"translateY(-50%)\", height: \"0.625rem\", width: \"0.625rem\", marginInlineStart: \"-0.3125rem\", backgroundColor: { default: vlak.ink, [mq.forcedColors]: \"CanvasText\" }, borderWidth: vlak.hairline, borderStyle: \"solid\", borderColor: vlak.ink, boxSizing: \"border-box\" },\n  bounds: { display: \"flex\", alignItems: \"baseline\", flexWrap: \"wrap\", justifyContent: \"space-between\", gap: \"0.25rem 1rem\", margin: 0, fontSize: \"0.75rem\", color: vlak.gray, fontVariantNumeric: \"tabular-nums\" },\n  boundValue: { textAlign: \"end\", marginInlineStart: \"auto\" },\n  description: { margin: 0, fontSize: \"0.75rem\", color: vlak.gray },\n});\n\n/** A supplied numeric reference interval. Position describes arithmetic, never clinical status. */\nexport const ReferenceRange = React.forwardRef<HTMLDivElement, ReferenceRangeProps>(function ReferenceRange({ label, value, minimum, maximum, unit, valueLabel, rangeLabel = \"Reference interval\", className, style, children, ...props }, ref) {\n  const hasValue = typeof value === \"number\" && Number.isFinite(value);\n  const hasMinimum = typeof minimum === \"number\" && Number.isFinite(minimum);\n  const hasMaximum = typeof maximum === \"number\" && Number.isFinite(maximum);\n  const invalid = (minimum != null && !hasMinimum) || (maximum != null && !hasMaximum) || (hasMinimum && hasMaximum && minimum >= maximum);\n  const bounded = !invalid && hasMinimum && hasMaximum;\n  const suffix = unit ? ` ${unit}` : \"\";\n  const intervalText = invalid || (!hasMinimum && !hasMaximum) ? \"Unavailable\" : hasMinimum && hasMaximum ? `${minimum}–${maximum}${suffix}` : hasMinimum ? `At least ${minimum}${suffix}` : `Up to ${maximum}${suffix}`;\n  // Normalize first so finite bounds near Number.MAX_VALUE cannot overflow their span.\n  const scale = bounded ? Math.max(Math.abs(minimum), Math.abs(maximum), 1) : 1;\n  const ratio = bounded && hasValue ? (value / scale - minimum / scale) / (maximum / scale - minimum / scale) : null;\n  const position = ratio != null && !Number.isNaN(ratio) ? Math.min(100, Math.max(0, 20 + ratio * 60)) : null;\n  const placement = bounded && hasValue ? value < minimum ? \"Below displayed interval\" : value > maximum ? \"Above displayed interval\" : null : null;\n  const root = rs([\"rs-reference-range\", className], styles.root);\n  const head = rs([\"rs-reference-range-head\"], styles.head);\n  const labelStyle = rs([\"rs-reference-range-label\"], styles.label);\n  const valueStyle = rs([\"rs-reference-range-value\"], styles.value);\n  const track = rs([\"rs-reference-range-track\"], styles.track);\n  const interval = rs([\"rs-reference-range-interval\"], styles.interval);\n  const marker = rs([\"rs-reference-range-marker\"], styles.marker);\n  const bounds = rs([\"rs-reference-range-bounds\"], styles.bounds);\n  const boundValue = rs([\"rs-reference-range-bound-value\"], styles.boundValue);\n  const description = rs([\"rs-reference-range-description\"], styles.description);\n  return <div ref={ref} {...props} className={root.className} style={{ ...root.style, ...style }}>\n    <p {...head}><span {...labelStyle}>{label}</span><span {...valueStyle}>{hasValue ? (valueLabel ?? `${value}${suffix}`) : \"No result\"}</span></p>\n    {bounded && <div {...track} aria-hidden=\"true\"><span {...interval} />{position != null && <span className={marker.className} style={{ ...marker.style, insetInlineStart: `${position}%` }} />}</div>}\n    <p {...bounds}><span>{rangeLabel}</span><span {...boundValue}>{intervalText}</span></p>\n    {placement && <p {...description}>{placement}</p>}\n    {children}\n  </div>;\n});\n",
      "type": "registry:component",
      "target": "components/vlak/reference-range.tsx"
    },
    {
      "path": "vlak/styles/reference-range.css",
      "content": "/* ── reference-range: generated from packages/react/src/components/reference-range.tsx ── */\n.rs-reference-range{display:grid;gap:0.5rem;width:100%;min-width:0;color:var(--text);line-height:1.45;overflow-wrap:anywhere}\n.rs-reference-range-head{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;justify-content:space-between;gap:0.25rem 1rem;font-size:0.875rem}\n.rs-reference-range-label{font-weight:500}\n.rs-reference-range-value{font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:500;line-height:1.2;text-align:end;margin-inline-start:auto}\n.rs-reference-range-track{position:relative;height:1.5rem;margin-inline:0.3125rem}\n.rs-reference-range-track::before{content:'';position:absolute;inset-inline:0;top:50%;height:1px;transform:translateY(-50%);background-color:var(--control-border)}\n@media (forced-colors: active){.rs-reference-range-track::before{background-color:CanvasText}}\n.rs-reference-range-interval{position:absolute;inset-inline-start:20%;width:60%;height:0.5rem;top:50%;transform:translateY(-50%);background-color:var(--divider);border-width:1px;border-style:solid;border-color:var(--control-border);box-sizing:border-box}\n@media (forced-colors: active){.rs-reference-range-interval{background-color:Canvas}}\n.rs-reference-range-marker{position:absolute;top:50%;transform:translateY(-50%);height:0.625rem;width:0.625rem;margin-inline-start:-0.3125rem;background-color:var(--text);border-width:1px;border-style:solid;border-color:var(--text);box-sizing:border-box}\n@media (forced-colors: active){.rs-reference-range-marker{background-color:CanvasText}}\n.rs-reference-range-bounds{display:flex;align-items:baseline;flex-wrap:wrap;justify-content:space-between;gap:0.25rem 1rem;margin:0;font-size:0.75rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}\n.rs-reference-range-bound-value{text-align:end;margin-inline-start:auto}\n.rs-reference-range-description{margin:0;font-size:0.75rem;color:var(--text-secondary)}\n",
      "type": "registry:file",
      "target": "styles/vlak/reference-range.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "health",
      "classes": [
        "rs-reference-range",
        "rs-reference-range-head",
        "rs-reference-range-label",
        "rs-reference-range-value",
        "rs-reference-range-track",
        "rs-reference-range-interval",
        "rs-reference-range-marker",
        "rs-reference-range-bounds",
        "rs-reference-range-bound-value",
        "rs-reference-range-description"
      ],
      "snippet": "<div class=\"rs-reference-range\">\n  <p class=\"rs-reference-range-head\"><span class=\"rs-reference-range-label\">Reported measurement</span><span class=\"rs-reference-range-value\">24 units</span></p>\n  <div class=\"rs-reference-range-track\" aria-hidden=\"true\"><span class=\"rs-reference-range-interval\"></span><span class=\"rs-reference-range-marker\" style=\"inset-inline-start:44%\"></span></div>\n  <p class=\"rs-reference-range-bounds\"><span>Supplied reference interval</span><span class=\"rs-reference-range-bound-value\">20–30 units</span></p>\n</div>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib"
      ],
      "aliases": [
        "Reference interval",
        "Lab range",
        "Result range",
        "Observation range",
        "Biomarker interval"
      ],
      "example": "import { ReferenceRange } from \"@noorddev/vlak-react\";\n\n<ReferenceRange\n  label=\"Reported measurement\"\n  value={24}\n  minimum={20}\n  maximum={30}\n  unit=\"units\"\n  rangeLabel=\"Supplied reference interval\"\n/>\n<ReferenceRange label=\"One-sided interval\" value={8} maximum={10} unit=\"units\" />",
      "usage": {
        "use": [
          "Display numeric bounds supplied by the responsible laboratory or data source.",
          "Pass valueLabel to format the reading and rangeLabel to identify the source of the interval.",
          "One-sided intervals are textual; a marker requires two finite, ordered bounds."
        ],
        "avoid": [
          "Hard-coding a universal normal interval across patients, methods or units.",
          "Using the marker to indicate a diagnosis, treatment decision or calculated clinical status.",
          "Comparing a value and bounds expressed in different units."
        ]
      },
      "keyboard": [],
      "a11y": [
        "The reading, unit and reference interval are visible as text; decorative geometry is aria-hidden.",
        "The reference band spans 20% to 80% of the track from the reading direction's start. Outlying markers clamp to the track and have a textual above or below description.",
        "Missing, non-finite, equal and reversed bounds never produce an invalid marker position. Missing results are named explicitly.",
        "A one-sided interval is rendered as at least or up to without inventing a second bound.",
        "The marker remains visible in forced colors. There is no animation, interactive control or clinical classification."
      ]
    }
  }
}