@luscii-healthtech/web-ui 42.8.6 → 42.9.0

package/dist/index.development.js

@@ -5938,6 +5938,159 @@ const Collapse = (props) => {
   return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { className: buttonClassName, onClick, "aria-expanded": !isCollapsed, children: [jsxRuntime.jsx("div", { className: contentClassName, children }), isCollapsed && showMoreIndicator && moreIndicator] }) });
 };
 
+function isColorTuple(color) {
+  return Array.isArray(color) && color.length === 2;
+}
+const validateNoOverlaps = (sections) => {
+  sections.forEach((sectionA, i) => {
+    sections.slice(i + 1).forEach((sectionB) => {
+      const aMin = Math.min(sectionA.from, sectionA.to);
+      const aMax = Math.max(sectionA.from, sectionA.to);
+      const bMin = Math.min(sectionB.from, sectionB.to);
+      const bMax = Math.max(sectionB.from, sectionB.to);
+      const overlaps = aMin < bMax && bMin < aMax;
+      if (overlaps) {
+        throw new Error(`RangeCoverage: Sections cannot overlap. Section [${sectionA.from}, ${sectionA.to}] overlaps with section [${sectionB.from}, ${sectionB.to}].`);
+      }
+    });
+  });
+};
+const generateIntermediateTicks = (args) => {
+  const { step, start, end } = args;
+  const tickSet = /* @__PURE__ */ new Set();
+  const isDescending = start > end;
+  let currentValue = start;
+  const rangeMin = Math.min(start, end);
+  const rangeMax = Math.max(start, end);
+  tickSet.add(start);
+  tickSet.add(end);
+  while (currentValue >= rangeMin && currentValue <= rangeMax) {
+    tickSet.add(currentValue);
+    if (isDescending) {
+      currentValue -= step;
+    } else {
+      currentValue += step;
+    }
+  }
+  return Array.from(tickSet).sort((a, b) => isDescending ? b - a : a - b);
+};
+const calculateSegments = (sections, start, end) => {
+  const isDescending = start > end;
+  const rangeMin = Math.min(start, end);
+  const rangeMax = Math.max(start, end);
+  const totalRange = Math.abs(end - start);
+  const segments = [];
+  const normalizedSections = sections.map((section) => {
+    const clampedFrom = Math.max(rangeMin, Math.min(rangeMax, section.from));
+    const clampedTo = Math.max(rangeMin, Math.min(rangeMax, section.to));
+    const higher = Math.max(clampedFrom, clampedTo);
+    const lower = Math.min(clampedFrom, clampedTo);
+    const startPos = isDescending ? (start - higher) / totalRange * 100 : (lower - start) / totalRange * 100;
+    const width = (higher - lower) / totalRange * 100;
+    return {
+      startPos,
+      width,
+      color: section.color
+    };
+  }).filter((s) => s.width > 0).sort((a, b) => a.startPos - b.startPos);
+  let currentPos = 0;
+  for (const section of normalizedSections) {
+    if (section.startPos > currentPos) {
+      segments.push({
+        widthPercent: section.startPos - currentPos,
+        color: "transparent"
+      });
+    }
+    segments.push({
+      widthPercent: section.width,
+      color: section.color
+    });
+    currentPos = section.startPos + section.width;
+  }
+  if (currentPos < 100) {
+    segments.push({
+      widthPercent: 100 - currentPos,
+      color: "transparent"
+    });
+  }
+  return segments;
+};
+const createStripedPattern = (colorA, colorB) => `repeating-linear-gradient(-45deg, ${colorA}, ${colorA} 4px, ${colorB} 4px, ${colorB} 8px)`;
+const getSegmentStyle = (color) => {
+  const baseStyle = {
+    height: "18px",
+    boxSizing: "content-box"
+  };
+  if (isColorTuple(color)) {
+    return Object.assign(Object.assign({}, baseStyle), { background: createStripedPattern(color[0], color[1]) });
+  }
+  return Object.assign(Object.assign({}, baseStyle), { background: color });
+};
+const legendSwatchStyle = {
+  width: "18px",
+  height: "18px",
+  borderRadius: "2px",
+  flexShrink: 0
+};
+const COLOR_RED = "var(--ui-color-red-800)";
+const COLOR_AMBER = "var(--ui-color-amber-700)";
+const COLOR_GREY_DARK = "var(--ui-color-slate-700)";
+const COLOR_GREY_LIGHT = "var(--ui-color-slate-300)";
+const COLOR_BLUE = "var(--ui-color-blue-200)";
+const BORDER_COLOR = COLOR_GREY_LIGHT;
+const BORDER_RADIUS = "var(--ui-radius-sm, 4px)";
+const barContainerStyle = {
+  width: "100%",
+  border: `1px solid ${BORDER_COLOR}`,
+  borderRadius: BORDER_RADIUS,
+  overflow: "hidden"
+};
+const barStyle = {
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  height: "24px",
+  padding: "0 3px",
+  // 3px looks better than 4px
+  boxSizing: "border-box"
+};
+const ticksContainerStyle = {
+  position: "relative",
+  width: "100%",
+  height: "20px"
+};
+const RangeCoverageComponent = ({ sections, start, end, ticks = [], title, legendSwatches, className }) => {
+  validateNoOverlaps(sections);
+  const segments = calculateSegments(sections, start, end);
+  return jsxRuntime.jsx(Box, { className, children: jsxRuntime.jsxs(Stack, { gap: "xs", width: "full", align: "stretch", children: [jsxRuntime.jsxs(Stack, { justify: "between", axis: "x", align: "center", children: [jsxRuntime.jsx(Title, { variant: "xs", level: "3", children: title }), legendSwatches && (legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.length) > 0 && jsxRuntime.jsx(Stack, { axis: "x", gap: "m", children: jsxRuntime.jsx(Stack, { axis: "x", gap: "xxs", align: "center", children: legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.map((swatch) => {
+    const background = isColorTuple(swatch.color) ? createStripedPattern(swatch.color[0], swatch.color[1]) : swatch.color;
+    return jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { style: Object.assign(Object.assign({}, legendSwatchStyle), { background }) }), jsxRuntime.jsx(Text, { as: "span", children: swatch.label })] }, swatch.label);
+  }) }) })] }), jsxRuntime.jsxs(Stack, { gap: "xs", width: "full", align: "stretch", children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment, index) => jsxRuntime.jsx("div", { style: Object.assign({ flexBasis: `${segment.widthPercent}%`, flexGrow: 0, flexShrink: 0 }, getSegmentStyle(segment.color)) }, index)) }) }), 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;
+    const isFirst = index === 0;
+    const isLast = index === ticks.length - 1;
+    return jsxRuntime.jsx(Text, { style: {
+      position: "absolute",
+      color: COLOR_GREY_DARK,
+      whiteSpace: "nowrap",
+      left: `${position}%`,
+      transform: isFirst ? "translateX(0%)" : isLast ? "translateX(-100%)" : "translateX(-50%)"
+    }, children: tick }, tick);
+  }) })] })] }) });
+};
+const RangeCoverage = Object.assign(RangeCoverageComponent, {
+  Colors: {
+    RED: COLOR_RED,
+    AMBER: COLOR_AMBER,
+    GREY_DARK: COLOR_GREY_DARK,
+    GREY_LIGHT: COLOR_GREY_LIGHT,
+    BLUE: COLOR_BLUE
+  },
+  generateIntermediateTicks
+});
+
 const AsideLayout = (_a) => {
   var { aside, children } = _a, rest = __rest(_a, ["aside", "children"]);
   const containerClasses = classNames__default.default("ui:flex-col ui:md:flex-row");
@@ -6444,6 +6597,7 @@ exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupV2 = RadioGroupV2;
 exports.RadioV2 = RadioV2;
+exports.RangeCoverage = RangeCoverage;
 exports.RedAlertColoredIcon = RedAlertColoredIcon;
 exports.RedAlertIcon = RedAlertIcon;
 exports.RightArrowIcon = ChevronRightIcon;