@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.40

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

@@ -3,14 +3,14 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingOverlay, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useCallback, useEffect, Fragment } from 'react';
+import { useCallback, useEffect, Fragment, isValidElement } from 'react';
 import { Loading } from '../../components/animations/Animations.js';
 import { Icon } 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 './Flyout.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "hideMask", "align"];
@@ -47,6 +47,7 @@ var Flyout = function Flyout(_ref) {
     context = _useFloating.context;
   var dismiss = useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true
   });
   var role = useRole(context);
@@ -73,9 +74,7 @@ var Flyout = function Flyout(_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);
   }, []);
   var tryClosing = useCallback(function (e) {
@@ -95,7 +94,7 @@ var Flyout = function Flyout(_ref) {
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/10 backdrop-blur-sm transition-all",
+      className: "bg-tint-100/10 backdrop-blur-sm transition-all",
       children: children
     });
   }, [hideMask, handleClose]);
@@ -103,47 +102,46 @@ var Flyout = function Flyout(_ref) {
     children: /*#__PURE__*/jsx(Wrapper, {
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
-        children: /*#__PURE__*/jsx(Wrapper, {
-          children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-            "data-align": align,
-            className: classNames(classes.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__*/jsxs(HotKeyWrapper, {
-              children: [/*#__PURE__*/jsxs(Header, {
-                flex: true,
-                className: classNames(classes.flyoutHeader, headerClassName),
-                children: [icon && /*#__PURE__*/jsx(Icon, {
-                  icon: icon,
-                  bg: iconBg,
-                  color: iconColor,
-                  className: classNames(iconClassName, "p-1"),
-                  rtlFlip: rtlFlip
-                }), /*#__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,
-                  onClick: function onClick() {
-                    return handleClose(false);
-                  }
-                })]
-              }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
-                role: "dialog",
-                className: classNames(classes.flyoutBody, "flex-1 grid overflow-hidden"),
-                tabIndex: 0,
-                children: children
+        children: /*#__PURE__*/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__*/jsxs(HotKeyWrapper, {
+            children: [/*#__PURE__*/jsxs(Header, {
+              flex: true,
+              align: "center",
+              className: classNames("fabric-flyoutHeader", headerClassName),
+              children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
+                icon: icon,
+                bg: iconBg,
+                color: iconColor,
+                className: classNames(iconClassName, "p-1"),
+                rtlFlip: rtlFlip
+              }), /*#__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("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+                icon: CoreIcons.close,
+                onClick: function onClick() {
+                  return handleClose(false);
+                }
               })]
-            })
-          }))
-        })
+            }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+              role: "dialog",
+              className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
+              tabIndex: 0,
+              children: children
+            })]
+          })
+        }))
       })
     })
   });

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

@@ -3,10 +3,9 @@
 import classNames from 'classnames';
 import { useRef, useCallback, useLayoutEffect } from 'react';
 import { Icon } from '../../components/icon/Icon.js';
-import { getBgClass, getColorClass } from '../../utils/getColor.js';
-import '@react-fabric/utilities';
-import classes from './Message.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
 
 /*
  * React Fabric
@@ -52,7 +51,11 @@ var Message = function Message(_ref) {
     }, 100);
   }, []);
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(classes.message, color ? getBgClass(color + "-300") : "bg-invert", color ? 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(color + "-300") : "var(--bg-color-invert)",
+      color: color ? getColor(color + "-900") : "var(--text-color-invert)"
+    },
     ref: elRef,
     children: [icon && /*#__PURE__*/jsx(Icon, {
       icon: icon,

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

@@ -3,14 +3,14 @@
 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 { useCallback, useEffect, isValidElement } from 'react';
 import { Loading } from '../../components/animations/Animations.js';
 import { Icon } 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"];
@@ -71,9 +71,7 @@ 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, {
@@ -82,11 +80,11 @@ var Modal = function Modal(_ref) {
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      className: "bg-tint-100/20 backdrop-blur-sm grid place-items-center",
       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-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"),
           style: {
             width: width,
             height: height,
@@ -98,19 +96,20 @@ 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, {
+              align: "center",
+              className: classNames("fabric-modalHeader", headerClassName),
+              children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
                 icon: icon,
                 bg: iconBg,
                 color: iconColor,
                 className: classNames(iconClassName, "p-1"),
                 rtlFlip: rtlFlip
-              }), /*#__PURE__*/jsx("label", {
+              }), /*#__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"),
+                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
                 icon: CoreIcons.close,
                 onClick: function onClick() {
                   return handleClose(false);
@@ -118,7 +117,7 @@ var Modal = function Modal(_ref) {
               })]
             }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__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

@@ -7,10 +7,9 @@ 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
@@ -61,22 +60,22 @@ 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]);
@@ -94,13 +93,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", {

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

@@ -10,10 +10,10 @@ import { useRef, useState, useEffect, useMemo, Fragment, cloneElement, isValidEl
 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 +35,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,
@@ -97,7 +98,7 @@ var Tooltip = function Tooltip(_ref) {
       };
       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
@@ -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"),
+          className: classNames("font-medium flex-1 break-all", !textColor && "contrast", isString(content) && "whitespace-pre-wrap mixed-lang"),
+          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/types/icons.js

@@ -56,6 +56,8 @@ var CoreIcons;
   _CoreIcons.collapseActive = "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
   _CoreIcons.expandAll = "M5.293 16.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM18.707 7.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
   _CoreIcons.colapseAll = "M18.707 21.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM5.293 2.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+  _CoreIcons.expandAllVar = "M13,9V15H16L12,19L8,15H11V9H8L12,5L16,9H13M4,2H20V4H4V2M4,20H20V22H4V20Z";
+  _CoreIcons.colapseAllVar = "M4,12H20V14H4V12M4,9H20V11H4V9M16,4L12,8L8,4H11V1H13V4H16M8,19L12,15L16,19H13V22H11V19H8Z";
   _CoreIcons.folderClosed = "M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z";
   _CoreIcons.folderOpen = "M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z";
   _CoreIcons.zoomIn = "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM8 12h2v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
@@ -120,6 +122,7 @@ var CoreIcons;
   _CoreIcons.mic = "M12 2c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v8c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414v-8c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586zM12 0c-1.104 0-2.106 0.449-2.828 1.172s-1.172 1.724-1.172 2.828v8c0 1.104 0.449 2.106 1.172 2.828s1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828v-8c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172zM8 24h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-2.062c1.809-0.226 3.432-1.056 4.657-2.281 1.446-1.447 2.343-3.448 2.343-5.657v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2c0 1.657-0.67 3.156-1.757 4.243s-2.586 1.757-4.243 1.757-3.156-0.67-4.243-1.757-1.757-2.586-1.757-4.243v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2c0 2.209 0.897 4.21 2.343 5.657 1.225 1.225 2.847 2.055 4.657 2.281v2.062h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
   _CoreIcons.play = "M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z";
   _CoreIcons.pause = "M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z";
+  _CoreIcons.stop = "M18,18H6V6H18V18Z";
   _CoreIcons.volumeOn = "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM18.363 5.637c1.757 1.758 2.635 4.059 2.635 6.364 0 2.304-0.878 4.605-2.635 6.362-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c2.147-2.147 3.22-4.963 3.221-7.776s-1.074-5.63-3.221-7.778c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM14.833 9.167c0.781 0.781 1.171 1.803 1.171 2.828s-0.39 2.047-1.171 2.828c-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c1.171-1.171 1.757-2.708 1.757-4.242s-0.586-3.071-1.757-4.242c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
   _CoreIcons.volumeOff = "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM16.293 9.707l2.293 2.293-2.293 2.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l2.293-2.293 2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.293-2.293 2.293-2.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
   _CoreIcons.alignLeft = "M3,3H21V5H3V3M3,7H15V9H3V7M3,11H21V13H3V11M3,15H15V17H3V15M3,19H21V21H3V19Z";
@@ -161,6 +164,7 @@ var CoreIcons;
   _CoreIcons.radioOn = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z";
   _CoreIcons.colorSwatch = "M16 14V12H17.61C17.85 12.71 18 13.39 18 14H16M15.58 8C15.12 7.29 14.65 6.61 14.2 6H14V8H15.58M16 12V10H14V12H16M16 8.68V10H16.74C16.5 9.56 16.26 9.11 16 8.68M12 16V14H14V12H12V10H14V8H12V6H14V5.73C12.9 4.26 12 3.25 12 3.25S6 10 6 14C6 17.31 8.69 20 12 20V18H14V16H12M14 19.65C14.75 19.39 15.42 19 16 18.46V18H14V19.65M14 16H16V14H14V16M16 18H16.46C17 17.42 17.39 16.75 17.65 16H16V18Z";
   _CoreIcons.colorPicker = "M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z";
+  _CoreIcons.list = "M11 15H17V17H11V15M9 7H7V9H9V7M11 13H17V11H11V13M11 9H17V7H11V9M9 11H7V13H9V11M21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5M19 5H5V19H19V5M9 15H7V17H9V15Z";
   _CoreIcons.info = "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM13 16v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1v4c0 0.552 0.448 1 1 1s1-0.448 1-1zM12 9c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z";
   _CoreIcons.alert = "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM12 17c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z";
   _CoreIcons.error = "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM8.293 9.707l2.293 2.293-2.293 2.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l2.293-2.293 2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.293-2.293 2.293-2.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";

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; }
@@ -28,7 +27,7 @@ var AbbrText = function AbbrText(_ref) {
   }, [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,

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

@@ -4,10 +4,11 @@ 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; }
@@ -15,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /**
  * Typography link component
  */
-var Link = function Link(_ref) {
+var Anchor = function Anchor(_ref) {
   var ref = _ref.ref,
     as = _ref.as,
     children = _ref.children,
@@ -44,7 +45,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 +53,4 @@ var Link = function Link(_ref) {
   }));
 };
 
-export { Link };
+export { Anchor };

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,

package/dist/esm/typography/Text.js

@@ -10,10 +10,9 @@ 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; }
@@ -98,13 +97,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,11 +4,11 @@ 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; }
@@ -48,7 +48,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

package/dist/esm/utils/cloneElement.js

@@ -0,0 +1,44 @@
+'use client';
+
+import { Children, isValidElement } from 'react';
+import { Fragment } from 'react/jsx-runtime';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var cloneChildren = function cloneChildren(children, callback) {
+  var _Children$map;
+  return (_Children$map = Children.map(children, function (c) {
+    if ( /*#__PURE__*/isValidElement(c)) {
+      if (c.type === Fragment) {
+        var _c$props;
+        // just compare to `Fragment`
+        return cloneChildren((_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.children, callback);
+      }
+      return c;
+    }
+    return c;
+  })) === null || _Children$map === void 0 ? void 0 : _Children$map.flat().filter(Boolean).map(callback);
+};
+
+export { cloneChildren };

package/dist/esm/utils/getColor.js

@@ -29,21 +29,7 @@ var getColor = function getColor(color) {
   if (color && isColor(color)) {
     return color;
   }
-};
-var getBgClass = function getBgClass(bg) {
-  if (bg && !isColor(bg)) {
-    return "bg-".concat(bg);
-  }
-};
-var getColorClass = function getColorClass(color) {
-  if (color && !isColor(color)) {
-    return "text-".concat(color);
-  }
-};
-var getBorderClass = function getBorderClass(color) {
-  if (color && !isColor(color)) {
-    return "border-".concat(color);
-  }
+  return "var(--color-".concat(color, ")");
 };
 
-export { getBgClass, getBorderClass, getColor, getColorClass };
+export { getColor };

package/dist/types/components/actionLabel/ActionLabel.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
-import { type AriaProps, type ChildProp, type CssProp } from "../../types";
-export interface ActionLabelProps extends AriaProps, CssProp, ChildProp {
+import { type AriaProps, type ChildProp, type CssProp, type TestProps } from "../../types";
+export interface ActionLabelProps extends AriaProps, CssProp, ChildProp, TestProps {
     /**
      * action buttons aligment
      */