@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.61

package/dist/cjs/overlays/flyout/Flyout.js

@@ -3,25 +3,21 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('@floating-ui/react');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react$1 = require('react');
 var Animations = require('../../components/animations/Animations.js');
 var Icon = require('../../components/icon/Icon.js');
 var HeadFoot = require('../../core/headfoot/HeadFoot.js');
 var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
-var icons = require('../../types/icons.js');
-var Flyout_module = require('./Flyout.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "hideMask", "align"];
+var _excluded = ["icon", "iconClassName", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "root", "hideMask", "align"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Flyout = function Flyout(_ref) {
   var icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     iconClassName = _ref.iconClassName,
-    rtlFlip = _ref.rtlFlip,
     title = _ref.title,
     actions = _ref.actions,
     closeOnClick = _ref.closeOnClick,
@@ -33,6 +29,7 @@ var Flyout = function Flyout(_ref) {
     size = _ref.size,
     width = _ref.width,
     minWidth = _ref.minWidth,
+    root = _ref.root,
     hideMask = _ref.hideMask,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? "start" : _ref$align,
@@ -47,6 +44,7 @@ var Flyout = function Flyout(_ref) {
     context = _useFloating.context;
   var dismiss = react.useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true
   });
   var role = react.useRole(context);
@@ -73,9 +71,7 @@ var Flyout = function Flyout(_ref) {
   }, [onBeforeClose, onClose]);
   react$1.useEffect(function () {
     setTimeout(function () {
-      var _refs$floating$curren2;
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector('[role="dialog"]')) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
     }, 50);
   }, []);
   var tryClosing = react$1.useCallback(function (e) {
@@ -85,67 +81,54 @@ var Flyout = function Flyout(_ref) {
       }, 100);
     }
   }, [closeOnClick, handleClose]);
-  var Wrapper = react$1.useCallback(function (_ref2) {
-    var children = _ref2.children;
-    if (hideMask) return /*#__PURE__*/jsxRuntime.jsx(react$1.Fragment, {
-      children: children
-    });
-    return /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
+  return /*#__PURE__*/jsxRuntime.jsxs(react.FloatingPortal, {
+    root: root,
+    children: [!hideMask && /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
       lockScroll: true,
       style: {
-        zIndex: "var(--z-overlay-mask)"
+        zIndex: "var(--z-overlay-mask)",
+        overflow: "hidden"
       },
-      className: "bg-base/10 backdrop-blur-sm transition-all",
-      children: children
-    });
-  }, [hideMask, handleClose]);
-  return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
-      children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-        context: context,
-        children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
-          children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-            "data-align": align,
-            className: classNames(Flyout_module.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
-            style: {
-              width: width,
-              minWidth: minWidth
-            },
-            onMouseUpCapture: tryClosing,
-            ref: refs.setFloating
-          }, getFloatingProps()), aria), aria), {}, {
-            children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
-              children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
-                flex: true,
-                className: classNames(Flyout_module.flyoutHeader, headerClassName),
-                children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-                  icon: icon,
-                  bg: iconBg,
-                  color: iconColor,
-                  className: classNames(iconClassName, "p-1"),
-                  rtlFlip: rtlFlip
-                }), /*#__PURE__*/jsxRuntime.jsx("label", {
-                  className: "flex-1 truncate py-2 px-1",
-                  children: title
-                }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-                  "data-ref": "panelClose",
-                  className: classNames(Flyout_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
-                  icon: icons.CoreIcons.close,
-                  onClick: function onClick() {
-                    return handleClose(false);
-                  }
-                })]
-              }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-                role: "dialog",
-                className: classNames(Flyout_module.flyoutBody, "flex-1 grid overflow-hidden"),
-                tabIndex: 0,
-                children: children
-              })]
-            })
-          }))
+      className: "bg-tint-100/10 backdrop-blur-sm transition-all"
+    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+      context: context,
+      children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        "data-align": align,
+        className: classNames("fabric-flyout", "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
+        style: {
+          width: width,
+          minWidth: minWidth
+        },
+        onMouseUpCapture: tryClosing,
+        ref: refs.setFloating
+      }, getFloatingProps()), aria), aria), {}, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
+            flex: true,
+            align: "center",
+            className: classNames("fabric-flyoutHeader", headerClassName),
+            children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
+              className: classNames(iconClassName, "p-1")
+            }, Icon.getIconProps(icon))), /*#__PURE__*/react$1.isValidElement(icon) && icon, /*#__PURE__*/jsxRuntime.jsx("label", {
+              className: "flex-1 truncate py-2 px-1",
+              children: title
+            }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+              "data-ref": "panelClose",
+              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
+              icon: "icon-[mdi--close]",
+              onClick: function onClick() {
+                return handleClose(false);
+              }
+            })]
+          }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.LoadingLine, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+            role: "dialog",
+            className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
+            tabIndex: 0,
+            children: children
+          })]
         })
-      })
-    })
+      }))
+    })]
   });
 };
 

package/dist/cjs/overlays/message/Message.js

@@ -3,10 +3,9 @@
 var classNames = require('classnames');
 var react = require('react');
 var Icon = require('../../components/icon/Icon.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
-var Message_module = require('./Message.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 /*
  * React Fabric
@@ -36,6 +35,7 @@ var Message = function Message(_ref) {
     message = _ref.message,
     color = _ref.color,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose;
@@ -52,10 +52,15 @@ var Message = function Message(_ref) {
     }, 100);
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames(Message_module.message, color ? getColor.getBgClass(color + "-300") : "bg-invert", color ? getColor.getColorClass(color + "-900") : "text-invert", "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none"),
+    className: classNames("fabric-message", "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none"),
+    style: {
+      backgroundColor: color ? getColor.getColor(color + "-300") : "var(--bg-color-invert)",
+      color: color ? getColor.getColor(color + "-900") : "var(--text-color-invert)"
+    },
     ref: elRef,
     children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon,
+      iconSrc: iconSrc,
       size: "md",
       rtlFlip: rtlFlip
     }), title && /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/overlays/modal/Modal.js

@@ -3,25 +3,21 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('@floating-ui/react');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react$1 = require('react');
 var Animations = require('../../components/animations/Animations.js');
 var Icon = require('../../components/icon/Icon.js');
 var HeadFoot = require('../../core/headfoot/HeadFoot.js');
 var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
-var icons = require('../../types/icons.js');
-var Modal_module = require('./Modal.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "height", "minHeight", "minWidth"];
+var _excluded = ["icon", "iconClassName", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "hideMask", "width", "height", "minHeight", "minWidth"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Modal = function Modal(_ref) {
   var icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     iconClassName = _ref.iconClassName,
-    rtlFlip = _ref.rtlFlip,
     title = _ref.title,
     actions = _ref.actions,
     headerClassName = _ref.headerClassName,
@@ -29,7 +25,9 @@ var Modal = function Modal(_ref) {
     onBeforeClose = _ref.onBeforeClose,
     children = _ref.children,
     loading = _ref.loading,
+    root = _ref.root,
     size = _ref.size,
+    hideMask = _ref.hideMask,
     width = _ref.width,
     height = _ref.height,
     minHeight = _ref.minHeight,
@@ -71,22 +69,23 @@ var Modal = function Modal(_ref) {
   }, [onBeforeClose, onClose]);
   react$1.useEffect(function () {
     setTimeout(function () {
-      var _refs$floating$curren2;
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector("[role='dialog']")) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
     }, 50);
   }, []);
   return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+    root: root,
     children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
       lockScroll: true,
       style: {
-        zIndex: "var(--z-overlay-mask)"
+        zIndex: "var(--z-overlay-mask)",
+        position: "absolute",
+        overflow: "hidden"
       },
-      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      className: classNames("grid place-items-center p-16", !hideMask && "bg-tint-100/20 backdrop-blur-sm"),
       children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
-          className: classNames(Modal_module.modal, "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
+          className: classNames("fabric-modal", "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-2 ring-offset-2 ring-tint-100 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-160", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
           style: {
             width: width,
             height: height,
@@ -98,27 +97,24 @@ var Modal = function Modal(_ref) {
           children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
             children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
               flex: true,
-              className: classNames(Modal_module.modalHeader, headerClassName),
-              children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-                icon: icon,
-                bg: iconBg,
-                color: iconColor,
-                className: classNames(iconClassName, "p-1"),
-                rtlFlip: rtlFlip
-              }), /*#__PURE__*/jsxRuntime.jsx("label", {
+              align: "center",
+              className: classNames("fabric-modalHeader", headerClassName),
+              children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
+                className: classNames(iconClassName, "p-1")
+              }, Icon.getIconProps(icon))), /*#__PURE__*/react$1.isValidElement(icon) && icon, /*#__PURE__*/jsxRuntime.jsx("label", {
                 className: "flex-1 truncate py-2 px-1",
                 children: title
               }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 "data-ref": "panelClose",
-                className: classNames(Modal_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
-                icon: icons.CoreIcons.close,
+                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
+                icon: "icon-[mdi--close]",
                 onClick: function onClick() {
                   return handleClose(false);
                 }
               })]
-            }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+            }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.LoadingLine, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
               role: "dialog",
-              className: classNames(Modal_module.modalBody, "flex-1 grid overflow-hidden"),
+              className: classNames("fabric-modalBody", "flex-1 grid overflow-hidden"),
               tabIndex: 0,
               children: children
             })]

package/dist/cjs/overlays/toast/Toast.js

@@ -6,11 +6,9 @@ var reactI18next = require('react-i18next');
 var Animations = require('../../components/animations/Animations.js');
 var Button = require('../../components/button/Button.js');
 var Icon = require('../../components/icon/Icon.js');
-var icons = require('../../types/icons.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
-var Toast_module = require('./Toast.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 /*
  * React Fabric
@@ -41,6 +39,7 @@ var Toast = function Toast(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "primary" : _ref$color,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose,
@@ -53,6 +52,7 @@ var Toast = function Toast(_ref) {
   var iconType = react.useMemo(function () {
     if (icon) return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon,
+      iconSrc: iconSrc,
       size: "md",
       rtlFlip: rtlFlip,
       color: color + "-600"
@@ -61,25 +61,25 @@ var Toast = function Toast(_ref) {
       case "danger":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "cross",
-          className: getColor.getColorClass(color + "-600")
+          color: "danger-600"
         });
       case "success":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "check",
-          className: getColor.getColorClass(color + "-600")
+          color: "success-600"
         });
       case "warning":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "exclaim",
-          className: getColor.getColorClass(color + "-600")
+          color: "warning-600"
         });
       default:
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: type === "confirm" ? "question" : "info",
-          className: getColor.getColorClass(color + "-600")
+          color: "".concat(color, "-600")
         });
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
   var elRef = react.useRef(null);
   var handleClose = react.useCallback(function (ret) {
     elRef.current && (elRef.current.dataset.show = "false");
@@ -94,13 +94,22 @@ var Toast = function Toast(_ref) {
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "alert",
-    className: classNames(Toast_module.toast, getColor.getBorderClass(color + "-300"), "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none"),
+    className: classNames("fabric-toast", "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none"),
+    style: {
+      borderColor: getColor.getColor(color + "-300")
+    },
     ref: elRef,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("flex-initial p-2", getColor.getBgClass(color + "-100")),
+      className: classNames("flex-initial p-2"),
+      style: {
+        backgroundColor: getColor.getColor(color + "-300")
+      },
       children: iconType
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames(getColor.getBgClass(color + "-50/50"), "flex flex-col flex-1 flex-nowrap overflow-hidden p-2"),
+      className: classNames("flex flex-col flex-1 flex-nowrap overflow-hidden p-2"),
+      style: {
+        backgroundColor: getColor.getColor(color + "-50")
+      },
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-nowrap gap-2 items-start",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -112,7 +121,7 @@ var Toast = function Toast(_ref) {
             variant: "link",
             className: "m-0",
             color: color,
-            icon: icons.CoreIcons.closeAll,
+            icon: "icon-[mdi--close-box-multiple-outline]",
             "aria-label": "close-all",
             onClick: onCloseAll
           }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
@@ -120,7 +129,7 @@ var Toast = function Toast(_ref) {
             variant: "link",
             className: "m-0",
             color: color,
-            icon: icons.CoreIcons.close,
+            icon: "icon-[mdi--close]",
             "aria-label": "close",
             onClick: function onClick() {
               return handleClose(false);

package/dist/cjs/overlays/tooltip/Tooltip.js

@@ -9,11 +9,10 @@ var classNames = require('classnames');
 var react = require('react');
 var Icon = require('../../components/icon/Icon.js');
 var useIsRtl = require('../../hooks/useIsRtl.js');
-var icons = require('../../types/icons.js');
-var Tooltip_module = require('./Tooltip.module.css');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
 
-var _excluded = ["ref", "children", "color", "content", "open", "copyContent", "disabled", "placement"];
+var _excluded = ["ref", "children", "color", "textColor", "content", "open", "copyContent", "disabled", "placement"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getTooltipProps = function getTooltipProps(tooltip, innerRef) {
@@ -35,6 +34,7 @@ var Tooltip = function Tooltip(_ref) {
   var ref = _ref.ref,
     children = _ref.children,
     color = _ref.color,
+    textColor = _ref.textColor,
     content = _ref.content,
     open = _ref.open,
     copyContent = _ref.copyContent,
@@ -71,7 +71,7 @@ var Tooltip = function Tooltip(_ref) {
     floatingStyles = _useFloating.floatingStyles,
     context = _useFloating.context;
   var hover = react$1.useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: {
       open: 1000
     },
@@ -91,16 +91,17 @@ var Tooltip = function Tooltip(_ref) {
   var copyEl = react.useMemo(function () {
     if (copyContent) {
       var copyText = utilities.isString(copyContent) ? copyContent : content;
-      var handler = function handler() {
+      var handler = function handler(e) {
         setIsOpen(false);
+        e.stopPropagation();
         void navigator.clipboard.writeText(copyText.toString());
       };
       return /*#__PURE__*/jsxRuntime.jsx("span", {
         role: "none",
-        className: "ms-2 cursor-pointer text-invert flex-content opacity-75 hover:opacity-90 active:opacity-60",
+        className: "ms-2 cursor-pointer text-dimmed flex-content opacity-75 hover:opacity-90 active:opacity-60",
         onClick: handler,
         children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-          icon: icons.CoreIcons.copy
+          icon: "icon-[mdi--content-copy]"
         })
       });
     }
@@ -112,17 +113,28 @@ var Tooltip = function Tooltip(_ref) {
     }, open ? {} : getReferenceProps(rest))), isOpen && content && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
       children: /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
         "data-ref": "tooltip",
-        "data-color": color,
-        className: classNames(Tooltip_module.tooltip, "select-none text-sm not-italic flex py-1 px-2 rounded shadow-md bg-current"),
+        className: classNames("fabric-tooltip z-(--z-tooltip)", "select-none text-sm not-italic flex py-1 px-2 max-w-lg! rounded shadow-md bg-muted"),
         ref: refs.setFloating,
-        style: floatingStyles
+        style: _objectSpread({
+          color: textColor ? getColor.getColor(textColor) : undefined,
+          backgroundColor: color ? getColor.getColor(color) : undefined
+        }, floatingStyles)
       }, getFloatingProps()), {}, {
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: classNames("font-medium text-invert flex-1", utilities.isString(content) && "whitespace-pre-wrap"),
+        children: [/*#__PURE__*/react.isValidElement(content) && content, utilities.isString(content) && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: classNames("font-medium flex-1 break-all whitespace-pre-wrap mixed-lang", !textColor && "contrast"),
+          style: {
+            color: textColor ? undefined : color ? getColor.getColor(color) : "var(--bg-color-muted)"
+          },
           children: content
         }), copyEl, /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingArrow, {
           ref: arrowRef,
-          context: context
+          context: context,
+          strokeWidth: 0.5,
+          className: "fill-muted stroke-dimmed",
+          style: {
+            stroke: color ? getColor.getColor(color) : undefined,
+            fill: color ? getColor.getColor(color) : undefined
+          }
         })]
       }))
     })]

package/dist/cjs/typography/Abbr.js

@@ -7,9 +7,8 @@ var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
 var Tooltip = require('../overlays/tooltip/Tooltip.js');
-var getColor = require('../utils/getColor.js');
-var Typography_module = require('./Typography.module.css');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../utils/getColor.js');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -22,13 +21,13 @@ var AbbrText = function AbbrText(_ref) {
     return tooltip ? Tooltip.Tooltip : react.Fragment;
   }, [tooltip]);
   var tooltipProps = react.useMemo(function () {
-    return _objectSpread(_objectSpread({}, Tooltip.getTooltipProps(tooltip)), {}, {
+    return tooltip ? _objectSpread(_objectSpread({}, Tooltip.getTooltipProps(tooltip)), {}, {
       copyContent: content
-    });
+    }) : {};
   }, [tooltip, content]);
   return /*#__PURE__*/jsxRuntime.jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("abbr", {
-      className: classNames(Typography_module.abbr, "whitespace-nowrap", color && getColor.getColorClass(color)),
+      className: classNames("fabric-abbr", "whitespace-nowrap"),
       style: color ? {
         "--abbr-color": getColor.getColor(color)
       } : undefined,
@@ -37,7 +36,34 @@ var AbbrText = function AbbrText(_ref) {
   }));
 };
 /**
- * Typography abbr component to wrap text parts in `abbr` with tooltip
+ * A component that renders abbreviated text with tooltips for additional information.
+ * It allows you to define a list of abbreviations, each with a tooltip and optional color.
+ * The component will tokenize the children text and replace matching parts with the abbreviated version.
+ * It supports a copy action that can either copy the text or the tooltip content.
+ * This component is useful for displaying technical terms or acronyms in a user-friendly way,
+ * while providing additional context through tooltips.
+ *
+ * @param {AbbrProps} props - The properties for the Abbr component.
+ * @returns {JSX.Element} The rendered Abbr component.
+ *
+ * @example
+ * ```jsx
+ * <Abbr
+ * abbr={[
+ *   ["HTML", "HyperText Markup Language", "primary"],
+ *   ["CSS", "Cascading Style Sheets", "secondary"],
+ *   ["JS", "JavaScript", "success"],
+ * ]}
+ * className="text-sm"
+ * copyContent="tooltip"
+ * >
+ *   Learn more about HTML, CSS, and JS.
+ * </Abbr>
+ * // Renders the text with abbreviations for HTML, CSS, and JS,
+ * // each with a tooltip showing the full form and colored according to the specified color.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--abbr} for more details.
  */
 var Abbr = function Abbr(_ref2) {
   var children = _ref2.children,
@@ -59,7 +85,9 @@ var Abbr = function Abbr(_ref2) {
   }, [renderer, copyContent]);
 
   /** ***************** tokenize text with abbr list *******************/
-  var inner = useEffectDebugger.useMemoDebugger(function () {
+  var inner = useEffectDebugger.useMemoDebugger(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function () {
     if (utilities.isString(children)) {
       if (!utilities.isEmpty(abbr)) {
         var tokens = utilities.tokenize(children, abbr.map(function (_ref3) {

package/dist/cjs/typography/{Link.js → Anchor.js}

@@ -4,18 +4,36 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 require('@react-fabric/utilities');
 var types = require('./types.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "as", "children", "className", "bg", "color", "family", "size"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Typography link component
+ * A versatile link component that supports polymorphic rendering, allowing it to be used as an anchor (`<a>`), button, or any other HTML element.
+ * It can be styled with background color, text color, font size, and font family.
+ * It accepts various properties such as `bg`, `color`, `size`, and `family` to customize its appearance.
+ * This component is useful for creating links that need to be styled consistently across an application, while also providing flexibility in terms of the HTML element used.
+ *
+ * @param {AnchorProps} props - The properties for the Anchor component.
+ * @param {Tag} as - The HTML element type to render as (default is "a").
+ * @returns {JSX.Element} - A styled anchor element with the specified properties.
+ *
+ * @example
+ * ```jsx
+ * <Anchor href="https://example.com" bg="blue-500" color="white" size="md">
+ *   Click here
+ * </Anchor>
+ * // Renders a link with a blue background, white text, and medium font size.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--anchor} for more details.
  */
-var Link = function Link(_ref) {
+var Anchor = function Anchor(_ref) {
   var ref = _ref.ref,
     as = _ref.as,
     children = _ref.children,
@@ -44,7 +62,7 @@ var Link = function Link(_ref) {
   }, [bg, color, size, family], "Link styles");
   var E = as !== null && as !== void 0 ? as : "a";
   return /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
-    className: classNames("link", className, family && "font-".concat(family), bg && getColor.getBgClass(bg), color && getColor.getColorClass(color)),
+    className: classNames("link", className, family && "font-".concat(family)),
     style: styles,
     ref: ref
   }, aria), {}, {
@@ -52,4 +70,4 @@ var Link = function Link(_ref) {
   }));
 };
 
-exports.Link = Link;
+exports.Anchor = Anchor;