@luscii-healthtech/web-ui 46.2.3 → 46.3.0

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

@@ -1,11 +1,14 @@
-import { type FC } from "react";
+import { type CSSProperties, type FC } from "react";
 import { Box } from "../Box/Box";
 type Color = string | readonly [string, string];
-export interface RangeCoverageSection {
+interface RangeCoverageSection {
     from: number;
     to: number;
     color: Color;
 }
+export interface RangeCoverageSectionWithBackground extends RangeCoverageSection {
+    background?: CSSProperties["background"];
+}
 export interface Props extends React.ComponentPropsWithoutRef<typeof Box<"div">> {
     /**
      * Each section defines a colored range within the overall start-end range.
@@ -38,6 +41,7 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof Box<"div">>
          */
         color: Color;
     }>;
+    onSectionFocus?: (section: RangeCoverageSection | null) => void;
     translations: {
         /**
          * This component doesn't support overlapping sections. If you cannot guarantee that
@@ -46,6 +50,12 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof Box<"div">>
          */
         sectionOverlapsMessage: string;
     };
+    slots?: {
+        /**
+         * Return `null` to render the default segment without a tooltip.
+         */
+        renderTooltipContent?: (section: RangeCoverageSectionWithBackground) => React.ReactNode;
+    };
 }
 export declare const COLOR_GREY_LIGHT = "var(--ui-color-background-info-secondary-hovered)";
 export declare const COLOR_GREY_DARK = "var(--ui-color-border-info-secondary-hovered)";

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

@@ -1,6 +1,7 @@
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import { type FC } from "react";
 import { type LegacyTextProps } from "../Text/Text";
+import { Box } from "../Box/Box";
 type StaticComponents = {
     Trigger: typeof RadixTooltip.Trigger;
     Root: typeof RadixTooltip.Root;
@@ -14,6 +15,7 @@ type ContentProps = {
      * When omitted the Tooltip will be rendered into the document.body.
      */
     container?: RadixTooltip.TooltipPortalProps["container"];
+    backgroundColor?: React.ComponentProps<typeof Box>["backgroundColor"] | "transparent";
 } & RadixTooltip.TooltipContentProps;
 declare const TooltipText: FC<LegacyTextProps<"span">>;
 /**

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

@@ -1,11 +1,14 @@
-import { type FC } from "react";
+import { type CSSProperties, type FC } from "react";
 import { Box } from "../Box/Box";
 type Color = string | readonly [string, string];
-export interface RangeCoverageSection {
+interface RangeCoverageSection {
     from: number;
     to: number;
     color: Color;
 }
+export interface RangeCoverageSectionWithBackground extends RangeCoverageSection {
+    background?: CSSProperties["background"];
+}
 export interface Props extends React.ComponentPropsWithoutRef<typeof Box<"div">> {
     /**
      * Each section defines a colored range within the overall start-end range.
@@ -38,6 +41,7 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof Box<"div">>
          */
         color: Color;
     }>;
+    onSectionFocus?: (section: RangeCoverageSection | null) => void;
     translations: {
         /**
          * This component doesn't support overlapping sections. If you cannot guarantee that
@@ -46,6 +50,12 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof Box<"div">>
          */
         sectionOverlapsMessage: string;
     };
+    slots?: {
+        /**
+         * Return `null` to render the default segment without a tooltip.
+         */
+        renderTooltipContent?: (section: RangeCoverageSectionWithBackground) => React.ReactNode;
+    };
 }
 export declare const COLOR_GREY_LIGHT = "var(--ui-color-background-info-secondary-hovered)";
 export declare const COLOR_GREY_DARK = "var(--ui-color-border-info-secondary-hovered)";

package/dist/src/generated/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import { type FC } from "react";
 import { type LegacyTextProps } from "../Text/Text";
+import { Box } from "../Box/Box";
 type StaticComponents = {
     Trigger: typeof RadixTooltip.Trigger;
     Root: typeof RadixTooltip.Root;
@@ -14,6 +15,7 @@ type ContentProps = {
      * When omitted the Tooltip will be rendered into the document.body.
      */
     container?: RadixTooltip.TooltipPortalProps["container"];
+    backgroundColor?: React.ComponentProps<typeof Box>["backgroundColor"] | "transparent";
 } & RadixTooltip.TooltipContentProps;
 declare const TooltipText: FC<LegacyTextProps<"span">>;
 /**

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

@@ -19,10 +19,12 @@ declare const meta: {
         }) => number[];
     };
     parameters: {};
+    decorators: import("@storybook/react").Decorator[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
+export declare const AdjacentSections: Story;
 export declare const Reversed: Story;
 export declare const EdgeCases: Story;
 export declare const OverlappingSections: Story;

package/dist/web-ui-tailwind.css

@@ -1426,6 +1426,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-\[55ch\] {
   max-width: 55ch;
 }
+.ui\:max-w-\[60ch\] {
+  max-width: 60ch;
+}
 .ui\:max-w-\[100vw\] {
   max-width: 100vw;
 }
@@ -2505,6 +2508,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:fill-secondary-background {
   fill: var(--ui-color-slate-600);
 }
+.ui\:fill-transparent {
+  fill: transparent;
+}
 .ui\:fill-white {
   fill: var(--ui-color-white);
 }