@luscii-healthtech/web-ui 36.2.0 → 37.0.0

package/README.md

@@ -95,6 +95,34 @@ The locale passed should adhere to the `{language}-{region}` format, for example
 - `de-DE`
 - `fr-FR`
 
+### Tooltip Provider
+
+Install the `@radix-ui/react-tooltip` peer dependency into your project:
+
+```bash
+yarn add @radix-ui/react-tooltip
+```
+
+Wrap your app with the `Tooltip.Provider` component:
+
+```tsx
+import * as Tooltip from "@radix-ui/react-tooltip";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+function start() {
+  const root = createRoot(document.querySelector("#root"));
+  root.render(
+    <Tooltip.Provider delayDuration={800} skipDelayDuration={500}>
+      <App />
+    </Tooltip.Provider>
+  );
+}
+```
+
+More about this component can be found in its [documentation](https://www.radix-ui.com/primitives/docs/components/tooltip).
+
 ## How to use
 
 The primary goal of WebUI is to make frontend development faster. It does this by providing a set of commonly used components that can be composed together to build user interfaces.  

package/dist/components/Text/Text.d.ts

@@ -37,6 +37,7 @@ export declare const allowedColors: {
      */
     readonly "on-surface": "ui-text-on-surface";
     readonly "on-surface-variant": "ui-text-on-surface-variant";
+    readonly "on-secondary": "ui-text-on-secondary";
 };
 declare const allowedHoverColors: {
     readonly "blue-900": "hover:ui-text-primary-dark";

package/dist/index.development.js

@@ -10,7 +10,7 @@ var sortable = require('@dnd-kit/sortable');
 var omit = require('lodash.omit');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 var utilities = require('@dnd-kit/utilities');
-var ReactTooltip = require('react-tooltip');
+var Tooltip = require('@radix-ui/react-tooltip');
 var ReactModal = require('react-modal');
 var Glider = require('react-glider');
 require('glider-js/glider.min.css');
@@ -58,7 +58,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var isString__default = /*#__PURE__*/_interopDefault(isString);
 var omit__default = /*#__PURE__*/_interopDefault(omit);
-var ReactTooltip__default = /*#__PURE__*/_interopDefault(ReactTooltip);
+var Tooltip__namespace = /*#__PURE__*/_interopNamespace(Tooltip);
 var ReactModal__default = /*#__PURE__*/_interopDefault(ReactModal);
 var Glider__default = /*#__PURE__*/_interopDefault(Glider);
 var ReactDatePicker__default = /*#__PURE__*/_interopDefault(ReactDatePicker);
@@ -1408,7 +1408,8 @@ const allowedColors = {
    * Semantic colors
    */
   "on-surface": "ui-text-on-surface",
-  "on-surface-variant": "ui-text-on-surface-variant"
+  "on-surface-variant": "ui-text-on-surface-variant",
+  "on-secondary": "ui-text-on-secondary"
 };
 const allowedHoverColors = {
   "blue-900": "hover:ui-text-primary-dark",
@@ -1868,6 +1869,7 @@ const Box = (props) => {
   return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
     "ui-bg-surface": props.backgroundColor === "surface",
     "ui-bg-background": props.backgroundColor === "background",
+    "ui-bg-secondary-background": props.backgroundColor === "secondary-background",
     "ui-bg-slate-100": props.backgroundColor === "base",
     "ui-bg-blue-50": props.backgroundColor === "blue",
     "ui-bg-red-50": props.backgroundColor === "red",
@@ -1878,6 +1880,7 @@ const Box = (props) => {
   }, {
     "hover:ui-bg-slate-100": props.hoverBackgroundColor === "base",
     "hover:ui-bg-background": props.backgroundColor === "background",
+    "hover:ui-bg-secondary-background": props.hoverBackgroundColor === "secondary-background",
     "hover:ui-bg-blue-50": props.hoverBackgroundColor === "blue",
     "hover:ui-bg-red-50": props.hoverBackgroundColor === "red",
     "hover:ui-bg-green-50": props.hoverBackgroundColor === "green",
@@ -2403,10 +2406,23 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
   );
   if (title) {
     return React__namespace.default.createElement(
-      React__namespace.default.Fragment,
+      Tooltip__namespace.Root,
       null,
-      React__namespace.default.createElement(ReactTooltip__default.default, { className: "ui-max-w-55", effect: "solid", id: buttonTooltipId }, title),
-      buttonComponent
+      React__namespace.default.createElement(Tooltip__namespace.Trigger, { asChild: true, id: buttonTooltipId }, buttonComponent),
+      React__namespace.default.createElement(
+        Tooltip__namespace.Portal,
+        null,
+        React__namespace.default.createElement(
+          Tooltip__namespace.Content,
+          { className: classNames__default.default("ui-max-w-55", "data-[state=delayed-open]:ui-animate-in data-[state=closed]:ui-animate-out data-[state=closed]:ui-fade-out-0 data-[state=delayed-open]:ui-fade-in-0 data-[state=closed]:ui-zoom-out-95 data-[state=delayed-open]:ui-zoom-in-95 data-[side=bottom]:ui-slide-in-from-top-2 data-[side=left]:ui-slide-in-from-right-2 data-[side=right]:ui-slide-in-from-left-2 data-[side=top]:ui-slide-in-from-bottom-2"), sideOffset: 4 },
+          React__namespace.default.createElement(
+            Box,
+            { backgroundColor: "secondary-background", px: "m", py: "xs", borderRadius: "xxxxs" },
+            React__namespace.default.createElement(Text, { color: "on-secondary" }, title)
+          ),
+          React__namespace.default.createElement(Tooltip__namespace.Arrow, { width: 8, height: 8, className: "ui-fill-secondary-background" })
+        )
+      )
     );
   }
   return buttonComponent;