@luscii-healthtech/web-ui 42.8.7 → 42.9.0

package/dist/src/components/RangeCoverage/RangeCoverage.d.ts

@@ -0,0 +1,56 @@
+import { type FC } from "react";
+type Color = string | readonly [string, string];
+export interface RangeCoverageSection {
+    from: number;
+    to: number;
+    color: Color;
+}
+export interface Props {
+    /**
+     * Each section defines a colored range within the overall start-end range.
+     */
+    sections: RangeCoverageSection[];
+    /**
+     * Optional custom tick marks to display along the range bar, between the
+     * start and end values.
+     */
+    ticks?: number[];
+    /**
+     * The start of the range, which will be shown at the left side of the bar.
+     */
+    start: number;
+    /**
+     * The end of the range, which will be shown at the right side of the bar.
+     */
+    end: number;
+    title?: string;
+    className?: string;
+    legendSwatches?: Array<{
+        label: string;
+        /**
+         * @example "red" // single color
+         * @example ["green", "lightgreen"]  // striped
+         */
+        color: Color;
+    }>;
+}
+export declare const COLOR_RED = "var(--ui-color-red-800)";
+export declare const COLOR_AMBER = "var(--ui-color-amber-700)";
+export declare const COLOR_GREY_DARK = "var(--ui-color-slate-700)";
+export declare const COLOR_GREY_LIGHT = "var(--ui-color-slate-300)";
+export declare const COLOR_BLUE = "var(--ui-color-blue-200)";
+export declare const RangeCoverage: FC<Props> & {
+    Colors: {
+        RED: string;
+        AMBER: string;
+        GREY_DARK: string;
+        GREY_LIGHT: string;
+        BLUE: string;
+    };
+    generateIntermediateTicks: (args: {
+        start: number;
+        end: number;
+        step: number;
+    }) => number[];
+};
+export {};

package/dist/src/index.d.ts

@@ -119,6 +119,7 @@ export { StyledUnorderedList } from "./components/StyledLists/StyledUnorderedLis
 export { StyledOrderedList } from "./components/StyledLists/StyledOrderedList";
 export { HoverIndicatorControl } from "./components/HoverIndicatorControl/HoverIndicatorControl";
 export { Collapse } from "./components/Collapse/Collapse";
+export { RangeCoverage } from "./components/RangeCoverage/RangeCoverage";
 export { Skeleton } from "./components/Skeleton/Skeleton";
 export { DetailsDisclosure } from "./components/DetailsDisclosure/DetailsDisclosure";
 export { ModalDialog } from "./components/ModalDialog/ModalDialog";

package/dist/stories/RangeCoverage.stories.d.ts

@@ -0,0 +1,24 @@
+import { type StoryObj } from "@storybook/react-webpack5";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../src/components/RangeCoverage/RangeCoverage").Props> & {
+        Colors: {
+            RED: string;
+            AMBER: string;
+            GREY_DARK: string;
+            GREY_LIGHT: string;
+            BLUE: string;
+        };
+        generateIntermediateTicks: (args: {
+            start: number;
+            end: number;
+            step: number;
+        }) => number[];
+    };
+    parameters: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const Reversed: Story;
+export declare const EdgeCases: Story;

package/dist/web-ui-tailwind.css

@@ -17,6 +17,7 @@
   --ui-color-amber-500: #f59e0b;
   --ui-color-amber-700: #b45309;
   --ui-color-amber-800: #92400e;
+  --ui-color-amber-900: #78350f;
   --ui-color-yellow-200: oklch(94.5% 0.129 101.54);
   --ui-color-yellow-400: oklch(85.2% 0.199 91.936);
   --ui-color-yellow-800: oklch(47.6% 0.114 61.907);
@@ -35,6 +36,7 @@
   --ui-color-blue-800: #1e40af;
   --ui-color-blue-900: #1e3a8a;
   --ui-color-purple-400: oklch(71.4% 0.203 305.504);
+  --ui-color-purple-900: oklch(38.1% 0.176 304.987);
   --ui-color-pink-400: oklch(71.8% 0.202 349.761);
   --ui-color-slate-50: #f8fafc;
   --ui-color-slate-100: #f1f5f9;