@luscii-healthtech/web-ui 58.6.0 → 58.6.1

package/dist/index.development.js

@@ -6774,6 +6774,12 @@ const calculateHighlightPosition = (args) => {
   const leftFraction = isDescending ? (start - higher) / totalRange : (lower - start) / totalRange;
   return { leftFraction, widthFraction };
 };
+const calculateTickPosition = (args) => {
+  const { tick, start, end } = args;
+  const totalRange = Math.abs(end - start);
+  const isDescending = start > end;
+  return isDescending ? (start - tick) / totalRange * 100 : (tick - start) / totalRange * 100;
+};
 const createStripedPattern = (options) => {
   const { colorA, colorB, startOffset = 0 } = options;
   const STRIPE_THICKNESS = 4;
@@ -6782,7 +6788,7 @@ const createStripedPattern = (options) => {
 };
 const getSegmentStyle = (color) => {
   const baseStyle = {
-    height: "18px",
+    height: "24px",
     boxSizing: "content-box"
   };
   if (isColorTuple(color)) {
@@ -6801,20 +6807,27 @@ const COLOR_GREY_DARK = "var(--ui-color-border-info-secondary-hovered)";
 const COLOR_RED = "var(--ui-color-border-error-primary-default)";
 const COLOR_AMBER = "var(--ui-color-icon-warning-secondary-default)";
 const COLOR_BLUE = COLOR_GREY_LIGHT;
-const BORDER_COLOR = "var(--ui-color-border-neutral-secondary-default)";
-const BORDER_RADIUS = "var(--ui-radius-sm, 4px)";
-const COLOR_GAP = [
-  "var(--ui-color-background-info-secondary-hovered)",
-  "var(--ui-color-background-info-primary-hovered)"
-];
+const BORDER_RADIUS = "var(--ui-semantic-radius-s, 4px)";
+const COLOR_GAP = "var(--ui-color-background-brand-secondary-default)";
 const COLOR_OVERLAP = [
   "var(--ui-color-background-info-secondary-hovered)",
   "var(--ui-color-border-neutral-primary-default)"
 ];
 const COLOR_FILL = "var(--ui-color-background-info-secondary-hovered)";
+const COLOR_ALERT_HIGH_SALMON = "var(--ui-color-icon-alerts-high-salmon)";
+const COLOR_ALERT_HIGH_CRIMSON = "var(--ui-color-icon-alerts-high-crimson)";
+const COLOR_ALERT_HIGH_RED = "var(--ui-color-icon-alerts-high-red)";
+const COLOR_ALERT_MEDIUM_SUN = "var(--ui-color-icon-alerts-medium-sun)";
+const COLOR_ALERT_MEDIUM_OAK = "var(--ui-color-icon-alerts-medium-oak)";
+const COLOR_ALERT_MEDIUM_AMBER = "var(--ui-color-icon-alerts-medium-amber)";
+const COLOR_ALERT_LOW_MINT = "var(--ui-color-icon-alerts-low-mint)";
+const COLOR_ALERT_LOW_LEAF = "var(--ui-color-icon-alerts-low-leaf)";
+const COLOR_ALERT_LOW_GREEN = "var(--ui-color-icon-alerts-low-green)";
+const COLOR_ALERT_NONE_FOG = "var(--ui-color-icon-alerts-neutral-fog)";
+const COLOR_ALERT_NONE_NEUTRAL = "var(--ui-color-icon-alerts-neutral-neutral)";
+const COLOR_ALERT_NONE_GRAPHITE = "var(--ui-color-icon-alerts-neutral-graphite)";
 const barContainerStyle = {
   width: "100%",
-  border: `1px solid ${BORDER_COLOR}`,
   borderRadius: BORDER_RADIUS,
   overflow: "hidden"
 };
@@ -6823,14 +6836,13 @@ const barStyle = {
   alignItems: "center",
   width: "100%",
   height: "24px",
-  padding: "0 3px",
-  // 3px looks better than 4px
+  // Must match the segments' own height so they fill the rounded container flush, with no gap.
   boxSizing: "border-box"
 };
 const HIGHLIGHT_RING_COLOR = "var(--ui-color-border-brand-primary-selected)";
 const HIGHLIGHT_RING_WIDTH = 2;
 const HIGHLIGHT_RING_INSET = 4;
-const BAR_HORIZONTAL_PADDING = 3;
+const BAR_HORIZONTAL_PADDING = 0;
 const getHighlightStyle = (position) => ({
   position: "absolute",
   top: -HIGHLIGHT_RING_INSET,
@@ -6847,10 +6859,37 @@ const ticksContainerStyle = {
   width: "100%",
   height: "20px"
 };
+const AXIS_LINE_COLOR = "var(--ui-color-border-neutral-secondary-default)";
+const TICK_MARK_HEIGHT = 8;
+const axisStyle = {
+  position: "relative",
+  width: "100%",
+  height: `${TICK_MARK_HEIGHT}px`
+};
+const axisLineStyle = {
+  position: "absolute",
+  top: "50%",
+  left: 0,
+  right: 0,
+  height: "1px",
+  background: AXIS_LINE_COLOR,
+  transform: "translateY(-50%)"
+};
+const tickMarkStyle = {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  width: "1px",
+  background: AXIS_LINE_COLOR,
+  transform: "translateX(-50%)"
+};
 const RangeCoverageComponent = (_a) => {
-  var { sections, start, end, highlightedRange, ticks = [], tickFormatter, title, legendSwatches, onSectionFocus, translations, className, slots } = _a, rest = __rest(_a, ["sections", "start", "end", "highlightedRange", "ticks", "tickFormatter", "title", "legendSwatches", "onSectionFocus", "translations", "className", "slots"]);
+  var _b, _c;
+  var { sections, start, end, highlightedRange, ticks = [], tickFormatter, showEdgeTickMarks, title, legendSwatches, onSectionFocus, translations, className, slots } = _a, rest = __rest(_a, ["sections", "start", "end", "highlightedRange", "ticks", "tickFormatter", "showEdgeTickMarks", "title", "legendSwatches", "onSectionFocus", "translations", "className", "slots"]);
   const { tooltipContent } = slots !== null && slots !== void 0 ? slots : {};
   const idPrefix = React.useId();
+  const showStartTickMark = (_b = showEdgeTickMarks === null || showEdgeTickMarks === void 0 ? void 0 : showEdgeTickMarks.start) !== null && _b !== void 0 ? _b : true;
+  const showEndTickMark = (_c = showEdgeTickMarks === null || showEdgeTickMarks === void 0 ? void 0 : showEdgeTickMarks.end) !== null && _c !== void 0 ? _c : true;
   if (hasSectionOverlaps(sections)) {
     return jsxRuntime.jsx(Text, { variant: "strong", children: translations.sectionOverlapsMessage });
   }
@@ -6867,11 +6906,19 @@ const RangeCoverageComponent = (_a) => {
       startOffset: -6
     }) : swatch.color;
     return jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { id: legendIdByLabel.get(swatch.label), role: "img", "aria-label": swatch.label, style: Object.assign(Object.assign({}, legendSwatchStyle), { background }) }), jsxRuntime.jsx(Text, { as: "span", children: swatch.label })] }, swatch.label);
-  }) }) })] }), jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment) => {
-    var _a2, _b;
+  }) }) })] }), jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment, index) => {
+    var _a2, _b2;
+    const isLastSegment = index === segments.length - 1;
     const sectionDataWithBackground = Object.assign(Object.assign({}, segment.originalSection), { background: getSegmentStyle(segment.color).background });
     const renderedTooltipContent = (_a2 = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.render) === null || _a2 === void 0 ? void 0 : _a2.call(tooltipContent, sectionDataWithBackground);
-    const segmentStyle = Object.assign({ flexBasis: `calc(${segment.widthPercent}% - 1px)`, flexGrow: 0, flexShrink: 0, marginRight: "1px" }, getSegmentStyle(segment.color));
+    const segmentStyle = Object.assign({
+      // Subtract the gap from the width, except for the last segment,
+      // which has no following gap and should reach the container's edge.
+      flexBasis: isLastSegment ? `${segment.widthPercent}%` : `calc(${segment.widthPercent}% - 1px)`,
+      flexGrow: 0,
+      flexShrink: 0,
+      marginRight: isLastSegment ? 0 : "1px"
+    }, getSegmentStyle(segment.color));
     const ariaLabel = `${segment.originalSection.from} - ${segment.originalSection.to}`;
     const legendId = segment.originalSection.legendLabel ? legendIdByLabel.get(segment.originalSection.legendLabel) : void 0;
     if (!renderedTooltipContent && !onSectionFocus) {
@@ -6890,7 +6937,7 @@ const RangeCoverageComponent = (_a) => {
     }
     return (
       // Sections cannot overlap, so from-to should be unique
-      jsxRuntime.jsxs(Tooltip.Root, { delayDuration: (_b = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.delayDuration) !== null && _b !== void 0 ? _b : 100, children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("button", { "aria-label": ariaLabel, "aria-describedby": legendId, style: segmentStyle, onFocus: () => {
+      jsxRuntime.jsxs(Tooltip.Root, { delayDuration: (_b2 = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.delayDuration) !== null && _b2 !== void 0 ? _b2 : 100, children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("button", { "aria-label": ariaLabel, "aria-describedby": legendId, style: segmentStyle, onFocus: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
       }, onBlur: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
@@ -6903,10 +6950,19 @@ const RangeCoverageComponent = (_a) => {
         maxWidth: 600
       }, children: jsxRuntime.jsx(Card, { border: true, elevation: "medium", width: "full", children: renderedTooltipContent }) })] }, ariaLabel)
     );
-  }) }) }), highlightPosition && highlightedRange && jsxRuntime.jsx("div", { role: "img", "aria-label": highlightedRange.label ? `${highlightedRange.label} (${highlightedRange.from} - ${highlightedRange.to})` : `${highlightedRange.from} - ${highlightedRange.to}`, style: getHighlightStyle(highlightPosition) })] }), ticks.length > 0 && jsxRuntime.jsx("div", { style: ticksContainerStyle, children: ticks.map((tick, index) => {
-    const totalRange = Math.abs(end - start);
-    const isDescending = start > end;
-    const position = isDescending ? (start - tick) / totalRange * 100 : (tick - start) / totalRange * 100;
+  }) }) }), highlightPosition && highlightedRange && jsxRuntime.jsx("div", { role: "img", "aria-label": highlightedRange.label ? `${highlightedRange.label} (${highlightedRange.from} - ${highlightedRange.to})` : `${highlightedRange.from} - ${highlightedRange.to}`, style: getHighlightStyle(highlightPosition) })] }), ticks.length > 0 && jsxRuntime.jsxs(Stack, { _gap: "xs", width: "full", align: "stretch", children: [jsxRuntime.jsxs("div", { style: axisStyle, children: [jsxRuntime.jsx("div", { style: axisLineStyle }), ticks.map((tick, index) => {
+    const isFirst = index === 0;
+    const isLast = index === ticks.length - 1;
+    if (isFirst && !showStartTickMark) {
+      return null;
+    }
+    if (isLast && !showEndTickMark) {
+      return null;
+    }
+    const position = calculateTickPosition({ tick, start, end });
+    return jsxRuntime.jsx("div", { "aria-hidden": "true", style: Object.assign(Object.assign({}, tickMarkStyle), { left: `${position}%` }) }, tick);
+  })] }), jsxRuntime.jsx("div", { style: ticksContainerStyle, children: ticks.map((tick, index) => {
+    const position = calculateTickPosition({ tick, start, end });
     const isFirst = index === 0;
     const isLast = index === ticks.length - 1;
     const content = tickFormatter ? tickFormatter(tick) : tick;
@@ -6917,7 +6973,7 @@ const RangeCoverageComponent = (_a) => {
       left: `${position}%`,
       transform: isFirst ? "translateX(0%)" : isLast ? "translateX(-100%)" : "translateX(-50%)"
     }, children: content }, tick);
-  }) })] })] }) }));
+  }) })] })] })] }) }));
 };
 const RangeCoverage = Object.assign(RangeCoverageComponent, {
   Colors: {
@@ -6928,7 +6984,33 @@ const RangeCoverage = Object.assign(RangeCoverageComponent, {
     BLUE: COLOR_BLUE,
     FILL: COLOR_FILL,
     GAP: COLOR_GAP,
-    OVERLAP: COLOR_OVERLAP
+    OVERLAP: COLOR_OVERLAP,
+    ALERT: {
+      HIGH: {
+        DEFAULT: COLOR_ALERT_HIGH_SALMON,
+        SALMON: COLOR_ALERT_HIGH_SALMON,
+        CRIMSON: COLOR_ALERT_HIGH_CRIMSON,
+        RED: COLOR_ALERT_HIGH_RED
+      },
+      MEDIUM: {
+        DEFAULT: COLOR_ALERT_MEDIUM_SUN,
+        SUN: COLOR_ALERT_MEDIUM_SUN,
+        OAK: COLOR_ALERT_MEDIUM_OAK,
+        AMBER: COLOR_ALERT_MEDIUM_AMBER
+      },
+      LOW: {
+        DEFAULT: COLOR_ALERT_LOW_MINT,
+        MINT: COLOR_ALERT_LOW_MINT,
+        LEAF: COLOR_ALERT_LOW_LEAF,
+        GREEN: COLOR_ALERT_LOW_GREEN
+      },
+      NONE: {
+        DEFAULT: COLOR_ALERT_NONE_FOG,
+        FOG: COLOR_ALERT_NONE_FOG,
+        NEUTRAL: COLOR_ALERT_NONE_NEUTRAL,
+        GRAPHITE: COLOR_ALERT_NONE_GRAPHITE
+      }
+    }
   },
   useAdaptiveTicks
 });