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

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

@@ -3,25 +3,21 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useCallback, useEffect } from 'react';
-import { Loading } from '../../components/animations/Animations.js';
-import { Icon } from '../../components/icon/Icon.js';
+import { useCallback, useEffect, isValidElement } from 'react';
+import { LoadingLine } from '../../components/animations/Animations.js';
+import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
-import { CoreIcons } from '../../types/icons.js';
-import classes from './Modal.module.css';
 import { jsx, jsxs } from '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]);
   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__*/jsx(FloatingPortal, {
+    root: root,
     children: /*#__PURE__*/jsx(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__*/jsx(FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
-          className: classNames(classes.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__*/jsxs(HotKeyWrapper, {
             children: [/*#__PURE__*/jsxs(Header, {
               flex: true,
-              className: classNames(classes.modalHeader, headerClassName),
-              children: [icon && /*#__PURE__*/jsx(Icon, {
-                icon: icon,
-                bg: iconBg,
-                color: iconColor,
-                className: classNames(iconClassName, "p-1"),
-                rtlFlip: rtlFlip
-              }), /*#__PURE__*/jsx("label", {
+              align: "center",
+              className: classNames("fabric-modalHeader", headerClassName),
+              children: [isString(icon) && /*#__PURE__*/jsx(Icon, _objectSpread({
+                className: classNames(iconClassName, "p-1")
+              }, getIconProps(icon))), /*#__PURE__*/isValidElement(icon) && icon, /*#__PURE__*/jsx("label", {
                 className: "flex-1 truncate py-2 px-1",
                 children: title
               }), actions, /*#__PURE__*/jsx(Icon, {
                 "data-ref": "panelClose",
-                className: classNames(classes.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
-                icon: 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__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+            }), loading && /*#__PURE__*/jsx(LoadingLine, {}), /*#__PURE__*/jsx("div", {
               role: "dialog",
-              className: classNames(classes.modalBody, "flex-1 grid overflow-hidden"),
+              className: classNames("fabric-modalBody", "flex-1 grid overflow-hidden"),
               tabIndex: 0,
               children: children
             })]

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

@@ -6,11 +6,9 @@ import { useTranslation } from 'react-i18next';
 import { AnimationIndicator } from '../../components/animations/Animations.js';
 import { Button } from '../../components/button/Button.js';
 import { Icon } from '../../components/icon/Icon.js';
-import { CoreIcons } from '../../types/icons.js';
-import { getColorClass, getBorderClass, getBgClass } from '../../utils/getColor.js';
-import '@react-fabric/utilities';
-import classes from './Toast.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
 
 /*
  * 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 = useMemo(function () {
     if (icon) return /*#__PURE__*/jsx(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__*/jsx(AnimationIndicator, {
           type: "cross",
-          className: getColorClass(color + "-600")
+          color: "danger-600"
         });
       case "success":
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: "check",
-          className: getColorClass(color + "-600")
+          color: "success-600"
         });
       case "warning":
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: "exclaim",
-          className: getColorClass(color + "-600")
+          color: "warning-600"
         });
       default:
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: type === "confirm" ? "question" : "info",
-          className: getColorClass(color + "-600")
+          color: "".concat(color, "-600")
         });
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
   var elRef = useRef(null);
   var handleClose = useCallback(function (ret) {
     elRef.current && (elRef.current.dataset.show = "false");
@@ -94,13 +94,22 @@ var Toast = function Toast(_ref) {
   }, []);
   return /*#__PURE__*/jsxs("div", {
     role: "alert",
-    className: classNames(classes.toast, 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(color + "-300")
+    },
     ref: elRef,
     children: [/*#__PURE__*/jsx("div", {
-      className: classNames("flex-initial p-2", getBgClass(color + "-100")),
+      className: classNames("flex-initial p-2"),
+      style: {
+        backgroundColor: getColor(color + "-300")
+      },
       children: iconType
     }), /*#__PURE__*/jsxs("div", {
-      className: classNames(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(color + "-50")
+      },
       children: [/*#__PURE__*/jsxs("div", {
         className: "flex flex-nowrap gap-2 items-start",
         children: [/*#__PURE__*/jsx("div", {
@@ -112,7 +121,7 @@ var Toast = function Toast(_ref) {
             variant: "link",
             className: "m-0",
             color: color,
-            icon: CoreIcons.closeAll,
+            icon: "icon-[mdi--close-box-multiple-outline]",
             "aria-label": "close-all",
             onClick: onCloseAll
           }), /*#__PURE__*/jsx(Button, {
@@ -120,7 +129,7 @@ var Toast = function Toast(_ref) {
             variant: "link",
             className: "m-0",
             color: color,
-            icon: CoreIcons.close,
+            icon: "icon-[mdi--close]",
             "aria-label": "close",
             onClick: function onClick() {
               return handleClose(false);

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

@@ -9,11 +9,10 @@ import classNames from 'classnames';
 import { useRef, useState, useEffect, useMemo, Fragment, cloneElement, isValidElement } from 'react';
 import { Icon } from '../../components/icon/Icon.js';
 import { useIsRtl } from '../../hooks/useIsRtl.js';
-import { CoreIcons } from '../../types/icons.js';
-import classes from './Tooltip.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../../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 = useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: {
       open: 1000
     },
@@ -91,16 +91,17 @@ var Tooltip = function Tooltip(_ref) {
   var copyEl = useMemo(function () {
     if (copyContent) {
       var copyText = 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__*/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__*/jsx(Icon, {
-          icon: CoreIcons.copy
+          icon: "icon-[mdi--content-copy]"
         })
       });
     }
@@ -112,17 +113,28 @@ var Tooltip = function Tooltip(_ref) {
     }, open ? {} : getReferenceProps(rest))), isOpen && content && /*#__PURE__*/jsx(FloatingPortal, {
       children: /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
         "data-ref": "tooltip",
-        "data-color": color,
-        className: classNames(classes.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(textColor) : undefined,
+          backgroundColor: color ? getColor(color) : undefined
+        }, floatingStyles)
       }, getFloatingProps()), {}, {
-        children: [/*#__PURE__*/jsx("span", {
-          className: classNames("font-medium text-invert flex-1", isString(content) && "whitespace-pre-wrap"),
+        children: [/*#__PURE__*/isValidElement(content) && content, isString(content) && /*#__PURE__*/jsx("span", {
+          className: classNames("font-medium flex-1 break-all whitespace-pre-wrap mixed-lang", !textColor && "contrast"),
+          style: {
+            color: textColor ? undefined : color ? getColor(color) : "var(--bg-color-muted)"
+          },
           children: content
         }), copyEl, /*#__PURE__*/jsx(FloatingArrow, {
           ref: arrowRef,
-          context: context
+          context: context,
+          strokeWidth: 0.5,
+          className: "fill-muted stroke-dimmed",
+          style: {
+            stroke: color ? getColor(color) : undefined,
+            fill: color ? getColor(color) : undefined
+          }
         })]
       }))
     })]

package/dist/esm/typography/Abbr.js

@@ -7,9 +7,8 @@ import classNames from 'classnames';
 import { useCallback, Fragment, useMemo } from 'react';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import { Tooltip, getTooltipProps } from '../overlays/tooltip/Tooltip.js';
-import { getColorClass, getColor } from '../utils/getColor.js';
-import classes from './Typography.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../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 : Fragment;
   }, [tooltip]);
   var tooltipProps = useMemo(function () {
-    return _objectSpread(_objectSpread({}, getTooltipProps(tooltip)), {}, {
+    return tooltip ? _objectSpread(_objectSpread({}, getTooltipProps(tooltip)), {}, {
       copyContent: content
-    });
+    }) : {};
   }, [tooltip, content]);
   return /*#__PURE__*/jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
     children: /*#__PURE__*/jsx("abbr", {
-      className: classNames(classes.abbr, "whitespace-nowrap", color && getColorClass(color)),
+      className: classNames("fabric-abbr", "whitespace-nowrap"),
       style: color ? {
         "--abbr-color": 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 = useMemoDebugger(function () {
+  var inner = useMemoDebugger(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function () {
     if (isString(children)) {
       if (!isEmpty(abbr)) {
         var tokens = tokenize(children, abbr.map(function (_ref3) {

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

@@ -4,18 +4,36 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
-import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import { getColor } from '../utils/getColor.js';
 import '@react-fabric/utilities';
 import { TextSizeMap } from './types.js';
-import { jsx } from '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__*/jsx(E, _objectSpread(_objectSpread({
-    className: classNames("link", className, family && "font-".concat(family), bg && getBgClass(bg), color && getColorClass(color)),
+    className: classNames("link", className, family && "font-".concat(family)),
     style: styles,
     ref: ref
   }, aria), {}, {
@@ -52,4 +70,4 @@ var Link = function Link(_ref) {
   }));
 };
 
-export { Link };
+export { Anchor };

package/dist/esm/typography/Copy.js

@@ -5,7 +5,6 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '../components/button/Button.js';
 import { Tooltip } from '../overlays/tooltip/Tooltip.js';
-import { CoreIcons } from '../types/icons.js';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -45,7 +44,7 @@ var Copy = function Copy(_ref) {
   return /*#__PURE__*/jsx(Tooltip, {
     content: t("action.copy"),
     children: /*#__PURE__*/jsx(Button, {
-      icon: CoreIcons.copy,
+      icon: "icon-[mdi--content-copy]",
       "aria-label": "Copy text",
       actionMessage: t("action.copied"),
       variant: "link",

package/dist/esm/typography/Mark.js

@@ -6,9 +6,8 @@ import { isString, isEmpty, tokenize } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useCallback, Fragment } from 'react';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
-import { getBgClass, getColor } from '../utils/getColor.js';
-import classes from './Typography.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../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; }
@@ -16,7 +15,7 @@ var MarkText = function MarkText(_ref) {
   var color = _ref.color,
     children = _ref.children;
   return /*#__PURE__*/jsx("mark", {
-    className: classNames(classes.mark, "whitespace-nowrap", color && getBgClass(color)),
+    className: classNames("fabric-mark", "whitespace-nowrap"),
     style: color ? {
       "--mark-color": getColor(color)
     } : undefined,
@@ -24,7 +23,26 @@ var MarkText = function MarkText(_ref) {
   });
 };
 /**
- * Typography mark component to wrap text parts in `mark`
+ * A component that highlights specific text parts with a mark element, allowing for custom rendering and color.
+ * It tokenizes the children string based on the provided `mark` array,
+ * which contains pairs of text parts and their corresponding colors.
+ * The component can use a custom renderer to display the marked text,
+ * allowing for greater flexibility in how the text is presented.
+ *
+ * @param {MarkProps} props - The properties for the Mark component.
+ * @returns {JSX.Element} The rendered Mark component.
+ *
+ * @example
+ * <Mark
+ *   mark={[
+ *     ["important", "red"],
+ *     ["note", "blue"],
+ *   ]}
+ * >
+ *   This is an important note that should be highlighted.
+ * </Mark>
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--mark} for more details.
  */
 var Mark = function Mark(_ref2) {
   var children = _ref2.children,
@@ -41,7 +59,9 @@ var Mark = function Mark(_ref2) {
   }, [renderer]);
 
   /** ***************** tokenize text with abbr list *******************/
-  var inner = useMemoDebugger(function () {
+  var inner = useMemoDebugger(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function () {
     if (isString(children)) {
       if (!isEmpty(mark)) {
         var tokens = tokenize(children, mark.map(function (_ref3) {

package/dist/esm/typography/Text.js

@@ -10,16 +10,41 @@ import { useTranslation } from 'react-i18next';
 import { useLayoutEffectDebugger, useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import { usePropToggle } from '../hooks/usePropToggle.js';
 import { calculateTextHeight } from '../utils/calculateDimensions.js';
-import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
-import classes from './Typography.module.css';
-import { TextSizeMap } from './types.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../utils/getColor.js';
+import { TextSizeMap } from './types.js';
 
 var _excluded = ["children", "className", "inline", "bg", "color", "family", "size", "clamp", "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; }
 /**
- * Typography text component
+ * A component that renders text with various styles, supports line clamping, and provides a "show more" link if the text is clipped.
+ * It can be rendered as an inline element or a block element, and allows customization of background color, text color, font size, font family, and text alignment.
+ * It also supports line clamping to limit the number of visible lines, and provides a toggle to show more or less text when the content exceeds the specified clamp.
+ * The component uses a combination of CSS and JavaScript to achieve the desired effects, ensuring a smooth user experience.
+ * It leverages the ResizeObserver API to detect changes in the text container's size and adjust the line clamping accordingly.
+ *
+ * @param {TextProps} props - The properties for the Text component.
+ * @returns {JSX.Element} The rendered Text component.
+ *
+ * @example
+ * ```jsx
+ * <Text
+ *   inline={false}
+ *   bg="bg-gray-100"
+ *   color="text-gray-800"
+ *   size="md"
+ *   family="sans"
+ *   clamp={2}
+ *   align="start"
+ * >
+ *   This is a sample text that demonstrates the Text component with various styles applied.
+ * </Text>
+ * // Renders a block-level text with gray background, dark gray text, medium font size,
+ * // sans-serif font family, clamped to 2 lines, and left-aligned.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--text} for more details.
  */
 var Text = function Text(_ref) {
   var children = _ref.children,
@@ -98,13 +123,13 @@ var Text = function Text(_ref) {
         "--text-clamp": showMore ? "unset" : clamp !== null && clamp !== void 0 ? clamp : "unset"
       },
       children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-        className: classNames(classes.text, "text-reset mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getBgClass(bg), color && getColorClass(color), clamp && "line-clamp-1"),
+        className: classNames("fabric-text", "mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), clamp && "line-clamp-1"),
         style: styles
       }, aria), {}, {
         children: children
       }))
     }), clipped && /*#__PURE__*/jsx("div", {
-      className: classes.moreLink,
+      className: "fabric-moreLink",
       children: /*#__PURE__*/jsxs("span", {
         role: "link",
         tabIndex: 0,

package/dist/esm/typography/Title.js

@@ -4,17 +4,32 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
-import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import { getColor } from '../utils/getColor.js';
 import '@react-fabric/utilities';
 import { TitleSizeMap } from './types.js';
-import classes from './Typography.module.css';
-import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "as", "bg", "color", "size", "align", "family"];
 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 title component
+ * A component that renders a title with customizable styles such as background color, text color, size, alignment, and font family.
+ * It can be rendered as different HTML elements based on the `as` prop.
+ * This component is useful for creating headings or titles in a consistent style across an application.
+ *
+ * @param {TitleProps} props - The properties for the Title component.
+ * @returns {JSX.Element} The rendered Title component.
+ *
+ * @example
+ * ```jsx
+ * <Title as="h1" bg="blue-500" color="white" size="2xl" align="center">
+ *   This is a Title
+ * </Title>
+ * // Renders a title as an h1 element with a blue background, white text color, size of 2xl, and centered alignment.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--title} for more details.
  */
 var Title = function Title(_ref) {
   var children = _ref.children,
@@ -48,7 +63,7 @@ var Title = function Title(_ref) {
   }, [bg, color, size, align], "Title styles");
   var E = as !== null && as !== void 0 ? as : "p";
   return /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
-    className: classNames(classes.title, "px-[2px] py-1 truncate whitespace-pre-wrap", className, family && "font-".concat(family), !as && "text-lg", bg && getBgClass(bg), color && getColorClass(color)),
+    className: classNames("fabric-title", className, family && "font-".concat(family), !as && "text-lg"),
     style: styles
   }, aria), {}, {
     children: children