@luscii-healthtech/web-ui 46.2.2 → 46.2.4

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/TextEditor/LinkTooltip.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from "react";
+import type Quill from "quill";
+interface Props {
+    linkElement: HTMLAnchorElement;
+    quillInstance: Quill;
+    onClose: () => void;
+}
+export declare const LinkTooltip: FC<Props>;
+export {};

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

@@ -1,7 +1,7 @@
 import type { FC, HTMLAttributes } from "react";
 import type { Delta, EmitterSource } from "quill/core";
 import "quill-paste-smart";
-import "quill/dist/quill.snow.css";
+import { type TextEditorToolbarOption } from "./TextEditorToolbar";
 import "./TextEditor.scss";
 type Props = HTMLAttributes<HTMLDivElement> & {
     /**
@@ -59,11 +59,6 @@ type Props = HTMLAttributes<HTMLDivElement> & {
      */
     placeholder?: string;
 };
-type TextEditorToolbarOption = "bold" | "italic" | "underline" | "strike" | "link" | "video" | {
-    list: "ordered";
-} | {
-    list: "bullet";
-};
 type TextEditorFormat = "background" | "bold" | "color" | "font" | "code" | "italic" | "link" | "size" | "strike" | "script" | "underline" | "blockquote" | "header" | "list" | "align";
 export declare const TextEditor: FC<Props>;
 export default TextEditor;

package/dist/src/components/TextEditor/TextEditorToolbar.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from "react";
+export type TextEditorToolbarOption = "bold" | "italic" | "underline" | "strike" | "link" | "video" | {
+    list: "ordered";
+} | {
+    list: "bullet";
+};
+interface Props {
+    toolbarId: string;
+    toolbar: TextEditorToolbarOption[][];
+    hasTextSelected: boolean;
+}
+export declare const TextEditorToolbar: FC<Props>;
+export {};

package/dist/src/components/TextEditor/TextEditorToolbarButton.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+import { type TextEditorToolbarOption } from "./TextEditorToolbar";
+interface Props {
+    option: TextEditorToolbarOption;
+    hasTextSelected: boolean;
+}
+export declare const TextEditorToolbarButton: FC<Props>;
+export {};

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/TextEditor/LinkTooltip.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from "react";
+import type Quill from "quill";
+interface Props {
+    linkElement: HTMLAnchorElement;
+    quillInstance: Quill;
+    onClose: () => void;
+}
+export declare const LinkTooltip: FC<Props>;
+export {};

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

@@ -1,7 +1,7 @@
 import type { FC, HTMLAttributes } from "react";
 import type { Delta, EmitterSource } from "quill/core";
 import "quill-paste-smart";
-import "quill/dist/quill.snow.css";
+import { type TextEditorToolbarOption } from "./TextEditorToolbar";
 import "./TextEditor.scss";
 type Props = HTMLAttributes<HTMLDivElement> & {
     /**
@@ -59,11 +59,6 @@ type Props = HTMLAttributes<HTMLDivElement> & {
      */
     placeholder?: string;
 };
-type TextEditorToolbarOption = "bold" | "italic" | "underline" | "strike" | "link" | "video" | {
-    list: "ordered";
-} | {
-    list: "bullet";
-};
 type TextEditorFormat = "background" | "bold" | "color" | "font" | "code" | "italic" | "link" | "size" | "strike" | "script" | "underline" | "blockquote" | "header" | "list" | "align";
 export declare const TextEditor: FC<Props>;
 export default TextEditor;

package/dist/src/generated/components/TextEditor/TextEditorToolbar.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from "react";
+export type TextEditorToolbarOption = "bold" | "italic" | "underline" | "strike" | "link" | "video" | {
+    list: "ordered";
+} | {
+    list: "bullet";
+};
+interface Props {
+    toolbarId: string;
+    toolbar: TextEditorToolbarOption[][];
+    hasTextSelected: boolean;
+}
+export declare const TextEditorToolbar: FC<Props>;
+export {};

package/dist/src/generated/components/TextEditor/TextEditorToolbarButton.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+import { type TextEditorToolbarOption } from "./TextEditorToolbar";
+interface Props {
+    option: TextEditorToolbarOption;
+    hasTextSelected: boolean;
+}
+export declare const TextEditorToolbarButton: FC<Props>;
+export {};

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/stories/TextEditor.stories.d.ts

@@ -3,11 +3,7 @@ declare const _default: {
     component: import("react").FC<import("react").HTMLAttributes<HTMLDivElement> & {
         onValueChange: (html: string, delta: import("quill-delta").default, source: import("quill").EmitterSource) => void;
         formats?: ("bold" | "link" | "strike" | "blockquote" | "code" | "header" | "script" | "color" | "align" | "list" | "font" | "size" | "background" | "italic" | "underline")[];
-        toolbar?: ("bold" | "link" | "strike" | "video" | "italic" | "underline" | {
-            list: "ordered";
-        } | {
-            list: "bullet";
-        })[][];
+        toolbar?: import("../src/components/TextEditor/TextEditorToolbar").TextEditorToolbarOption[][];
         defaultValue?: string;
         placeholder?: string;
     }>;

package/dist/web-ui-tailwind.css

@@ -81,6 +81,7 @@
   --ui-color-blue-300: #93c5fd;
   --ui-color-blue-400: #60a5fa;
   --ui-color-blue-500: #3b82f6;
+  --ui-color-blue-600: #2563eb;
   --ui-color-blue-700: #1d4ed8;
   --ui-color-blue-800: #1e40af;
   --ui-color-blue-900: #1e3a8a;
@@ -1233,6 +1234,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:min-h-15 {
   min-height: 3.75rem;
 }
+.ui\:min-h-40 {
+  min-height: calc(var(--ui-spacing) * 40);
+}
 .ui\:min-h-\[650px\] {
   min-height: 650px;
 }
@@ -1422,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;
 }
@@ -1637,6 +1644,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:cursor-wait {
   cursor: wait;
 }
+.ui\:resize-y {
+  resize: vertical;
+}
 .ui\:snap-x {
   scroll-snap-type: x var(--tw-scroll-snap-strictness);
 }
@@ -2498,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);
 }
@@ -2969,6 +2982,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:break-all {
   word-break: break-all;
 }
+.ui\:text-ellipsis {
+  text-overflow: ellipsis;
+}
 .ui\:whitespace-break-spaces {
   white-space: break-spaces;
 }
@@ -2987,6 +3003,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:text-amber-800 {
   color: var(--ui-color-amber-800);
 }
+.ui\:text-blue-600 {
+  color: var(--ui-color-blue-600);
+}
 .ui\:text-current {
   color: currentcolor;
 }
@@ -4672,6 +4691,16 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     }
   }
 }
+.ui\:aria-disabled\:cursor-not-allowed {
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+  }
+}
+.ui\:aria-pressed\:bg-primary-background {
+  &[aria-pressed="true"] {
+    background-color: var(--ui-color-blue-100);
+  }
+}
 .ui\:data-\[side\=bottom\]\:slide-in-from-top-2 {
   &[data-side="bottom"] {
     --tw-enter-translate-y: -0.5rem;