@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.52

package/dist/esm/components/card/FlipContent.js

@@ -0,0 +1,56 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import classNames from 'classnames';
+import { useState, useImperativeHandle, Children, isValidElement, cloneElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * A component that allows flipping between front and back content.
+ * It uses a ref to control the flipping action, which toggles the visibility of the front and back content.
+ * The component accepts children elements, which should be valid React elements representing the front and back content.
+ * The front content is expected to be the first child, and the back content is expected to be the second child.
+ * The component applies specific classes to the children based on their position (front or back) and manages the flipping state internally.
+ * The `flipCard` method can be called to toggle the visibility of the back content.
+ *
+ * @param {Props} props - The properties for the FlipContent component.
+ * @returns {JSX.Element} The rendered FlipContent component.
+ *
+ * @example
+ * ```jsx
+ * <FlipContent ref={flipRef}>
+ *   <div className="front">Front Content</div>
+ *   <div className="back">Back Content</div>
+ * </FlipContent>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-flipcontent--docs}
+ */
+var FlipContent = function FlipContent(_ref) {
+  var ref = _ref.ref,
+    children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showBack = _useState2[0],
+    setShowBack = _useState2[1];
+  useImperativeHandle(ref, function () {
+    return {
+      flipCard: function flipCard() {
+        return setShowBack(!showBack);
+      }
+    };
+  }, [showBack]);
+  return /*#__PURE__*/jsx("div", {
+    className: "relative flex-1",
+    "data-card-flip": showBack,
+    children: Children.map(children, function (child, idx) {
+      var _child$props$classNam, _child$props;
+      return /*#__PURE__*/isValidElement(child) && /*#__PURE__*/cloneElement(child, {
+        className: classNames((_child$props$classNam = (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className) !== null && _child$props$classNam !== void 0 ? _child$props$classNam : "", idx === 0 ? "bg-base relative" : "bg-base absolute inset-0"),
+        "data-card-flip-face": idx === 0 ? "front" : "back"
+      });
+    })
+  });
+};
+
+export { FlipContent };

package/dist/esm/components/chip/Chip.js

@@ -5,11 +5,10 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useCallback } from 'react';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import { getColor, getColorClass } from '../../utils/getColor.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
-import classes from './Chip.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "stopPropagation", "as"];
 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; }
@@ -21,6 +20,27 @@ var SizeMap = {
   lg: "1.5rem",
   xl: "2rem"
 };
+
+/**
+ * A component that represents a small block of information, often used for tags, categories, or actions.
+ * It allows customization of size, color, variant, and includes optional icon and remove functionality.
+ * It supports various properties for styling and interaction, including click handlers and disabled state.
+ * It can be used in various contexts, such as filtering options, displaying tags, or representing user actions.
+ * It can be styled with custom CSS classes and supports features like rounded edges and click handling.
+ * It can also include an icon and a remove button, making it versatile for different use cases.
+ *
+ * @param {ChipProps} props - The properties for the Chip component.
+ * @returns {JSX.Element} The rendered Chip component.
+ *
+ * @example
+ * ```jsx
+ * <Chip color="primary" size="md" className="my-chip">
+ *   Example Chip
+ * </Chip>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-chip--docs} for more details.
+ */
 var Chip = function Chip(_ref) {
   var ref = _ref.ref,
     children = _ref.children,
@@ -66,25 +86,30 @@ var Chip = function Chip(_ref) {
   return /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
     ref: ref,
     role: "term",
-    className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
+    "data-ref": "chip",
+    className: classNames("fabric-chip", className, "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded", rounded && "rounded-full", !!onClick && "clickable", disabled && "disabled"),
     style: styles,
     "data-variant": variant,
     "data-inner-clickable": !!onClick,
-    onClick: clickHandler
+    onClick: disabled ? undefined : clickHandler
   }, aria), {}, {
     children: [icon && /*#__PURE__*/jsx(Icon, {
-      className: classNames(classes.chipIcon, "m-1"),
+      "data-ref": "chipIcon",
+      className: classNames("fabric-chipIcon", "m-1 flex-auto"),
       icon: icon,
       bg: iconBg,
       onClick: onIconClick,
       color: iconColor,
       rtlFlip: rtlFlip
     }), children && /*#__PURE__*/jsx("label", {
-      className: classNames(classes.chipLabel, "truncate"),
+      "data-ref": "chipLabel",
+      className: classNames("fabric-chipLabel", "truncate"),
       children: children
     }), onRemove && /*#__PURE__*/jsx("span", {
       role: "none",
-      className: classNames(classes.chipRemove, "cursor-pointer pe-1 opacity-65 hover:opacity-90"),
+      "data-ref": "chipRemove",
+      "data-inner-cliackable": true,
+      className: classNames("fabric-chipRemove", "cursor-pointer pe-1 opacity-65 hover:opacity-90"),
       onClick: removeHandler,
       children: "\xD7"
     })]

package/dist/esm/components/collapsable/Collapsable.js

@@ -8,12 +8,37 @@ import classNames from 'classnames';
 import { useState, useRef, useImperativeHandle, useEffect, useMemo, Children } from 'react';
 import { CoreIcons } from '../../types/icons.js';
 import { Icon } from '../icon/Icon.js';
-import classes from './Collapsable.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
+var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "stickyHeader", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
 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; }
+/**
+ * A component that can be expanded or collapsed to show or hide content.
+ * It is useful for organizing content in a way that allows users to focus on the information they are interested in.
+ * It supports custom icons for open and closed states, alignment options, and can be made sticky.
+ * This component is ideal for creating accordions, expandable panels, or sections that can be toggled by the user.
+ *
+ * @param {CollapsableProps} props - The properties for the Collapsable component.
+ * @returns {JSX.Element} The rendered Collapsable component.
+ *
+ * @example
+ * ```jsx
+ * <Collapsable
+ *   iconAlign="start"
+ *   iconOpen={CoreIcons.chevronDown}
+ *   iconClosed={CoreIcons.chevronRight}
+ *   open={true}
+ *   onOpen={() => console.log("Opened")}
+ *   onClose={() => console.log("Closed")}
+ * >
+ *   <div>Header Content</div>
+ *   <div>Body Content</div>
+ * </Collapsable>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-collapsable--docs} for more details.
+ */
 var Collapsable = function Collapsable(_ref) {
   var ref = _ref.ref,
     disabled = _ref.disabled,
@@ -22,6 +47,7 @@ var Collapsable = function Collapsable(_ref) {
     headerClassName = _ref.headerClassName,
     children = _ref.children,
     iconAlign = _ref.iconAlign,
+    stickyHeader = _ref.stickyHeader,
     _ref$iconClosed = _ref.iconClosed,
     iconClosed = _ref$iconClosed === void 0 ? CoreIcons.chevronRight : _ref$iconClosed,
     _ref$iconOpen = _ref.iconOpen,
@@ -57,12 +83,12 @@ var Collapsable = function Collapsable(_ref) {
     head = _useMemo2[0],
     body = _useMemo2[1];
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(classes.collapsable, className)
+    className: classNames("fabric-collapsable", className)
   }, aria), {}, {
     children: [/*#__PURE__*/jsxs("div", {
       role: "none",
       ref: headRef,
-      className: classNames(classes.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
+      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
         return !disabled && setOpenState(!openState);
       },
@@ -71,12 +97,12 @@ var Collapsable = function Collapsable(_ref) {
         icon: openState ? iconOpen : iconClosed,
         rtlFlip: true
       }), /*#__PURE__*/jsx("div", {
-        className: "flex-1 px-2",
+        className: "flex-1",
         children: head
       })]
     }), openState && /*#__PURE__*/jsx("div", {
       ref: bodyRef,
-      className: classNames(classes.collapsableBody, bodyClassName),
+      className: classNames("fabric-collapsableBody", bodyClassName),
       children: body
     })]
   }));

package/dist/esm/components/divider/Divider.js

@@ -2,9 +2,9 @@
 
 import classNames from 'classnames';
 import { useCallback } from 'react';
-import { getBorderClass, getBgClass, getColorClass } from '../../utils/getColor.js';
-import '@react-fabric/utilities';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
 
 /*
  * React Fabric
@@ -29,11 +29,32 @@ import { jsx, jsxs } from 'react/jsx-runtime';
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+/**
+ * A component that represents a visual divider between content.
+ * It can be used to separate sections of content, with optional text labels.
+ * It supports both horizontal and vertical orientations, customizable colors,
+ * styles, and alignment options.
+ *
+ * @param {DividerProps} props - The properties for the Divider component.
+ * @returns {JSX.Element} The rendered Divider component.
+ *
+ * @example
+ * ```jsx
+ * <Divider color="primary" align="center" style="dashed">
+ *   Divider Text
+ * </Divider>
+ * // Renders a horizontal divider with primary color, centered text, and dashed style.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-divider--docs} for more details.
+ */
 var Divider = function Divider(_ref) {
   var children = _ref.children,
-    color = _ref.color,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "tint-300" : _ref$color,
     vertical = _ref.vertical,
-    fill = _ref.fill,
+    labelClassName = _ref.labelClassName,
+    style = _ref.style,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? "start" : _ref$align,
     className = _ref.className;
@@ -42,17 +63,19 @@ var Divider = function Divider(_ref) {
       className = _ref2.className;
     return /*#__PURE__*/jsx("hr", {
       style: {
-        flex: flex
+        flex: flex,
+        borderColor: getColor(color),
+        borderStyle: style
       },
-      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "mx-1" : "my-1", color && getBorderClass(color + "-200"))
+      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal")
     });
   }, [color, vertical]);
   return children ? /*#__PURE__*/jsxs("div", {
-    className: classNames("flex flex-nowrap items-center", vertical && "flex-col", className),
+    className: classNames("flex flex-nowrap items-center fabric-divider", vertical && "flex-col", className),
     children: [/*#__PURE__*/jsx(Rule, {
       flex: align === "start" ? "0 0 1rem" : "1 1 1em"
     }), /*#__PURE__*/jsx("div", {
-      className: classNames("px-2 whitespace-nowrap", vertical ? "mx-1" : "my-1", fill && getBgClass((color !== null && color !== void 0 ? color : "tint") + "-200"), !fill && getColorClass((color !== null && color !== void 0 ? color : "tint") + "-600"), "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider-label--vertical" : "fabric-divider-label--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
       children: children
     }), /*#__PURE__*/jsx(Rule, {
       flex: align === "end" ? "0 0 1rem" : "1 1 1em"

package/dist/esm/components/dropdown/Dropdown.js

@@ -6,7 +6,6 @@ import { FloatingTree, useFloatingTree, useFloating, autoUpdate, shift, flip, of
 import { mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useState, useMemo, Children, useCallback, useEffect, Fragment, cloneElement } from 'react';
-import classes from './Dropdown.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 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; }
@@ -115,6 +114,7 @@ var DropdownElement = function DropdownElement(_ref) {
         e.stopPropagation();
       }
     })), {}, {
+      "data-inner-clickable": "true",
       "data-dropdown-open": isOpen ? true : undefined,
       ref: innerRef
     })), isOpen && /*#__PURE__*/jsxs(FloatingPortal, {
@@ -123,15 +123,12 @@ var DropdownElement = function DropdownElement(_ref) {
         context: context,
         modal: true,
         children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-          ref: function ref(el) {
-            var _el$querySelector;
-            refs.setFloating(el);
-            el === null || el === void 0 || (_el$querySelector = el.querySelector("input,textarea,button")) === null || _el$querySelector === void 0 || _el$querySelector.focus();
-          },
+          ref: refs.setFloating,
           style: _objectSpread({
             minWidth: minWidth,
             zIndex: "var(--z-popover)"
-          }, floatingStyles)
+          }, floatingStyles),
+          "data-ref": "dropdownBody"
         }, getFloatingProps({
           onClick: function onClick(e) {
             return e.stopPropagation();
@@ -139,25 +136,67 @@ var DropdownElement = function DropdownElement(_ref) {
         })), {}, {
           children: [/*#__PURE__*/jsx("div", {
             role: "none",
-            className: classNames(classes.dropdownBody, dropdownClassName, !plainDropdown && "shadow-lg shadow-base bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
+            className: classNames("fabric-dropdownBody", dropdownClassName, !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
             onMouseUpCapture: tryClosing,
             children: panel
           }), showArrow && /*#__PURE__*/jsx(FloatingArrow, {
             ref: arrowRef,
             context: context,
             strokeWidth: 0.5,
-            className: "fill-base stroke-muted"
+            className: "fill-base stroke-dimmed"
           })]
         }))
       })]
     })]
   });
 };
+
+/**
+ * A component that displays a dropdown menu with an anchor and a panel.
+ * It supports various features such as placement, arrow display, click handling,
+ * and event handling for opening and closing the dropdown.
+ *
+ * @param props - Dropdown properties
+ * @returns JSX Element
+ *
+ * @example
+ * ```jsx
+ * <Dropdown
+ *   placement="bottom"
+ *   showArrow
+ *   closeOnClick
+ *   fitToParent
+ *   onOpen={() => console.log("Dropdown opened")}
+ *   onClose={() => console.log("Dropdown closed")}
+ * >
+ *   <button>Open Dropdown</button>
+ *   <div>
+ *     <DropdownDismiss>
+ *       <button>Dismiss</button>
+ *     </DropdownDismiss>
+ *     <p>Dropdown Content</p>
+ *   </div>
+ * </Dropdown>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-dropdown--docs} for more details.
+ * @see {@link https://floating-ui.com/docs/react} for more details on Floating UI.
+ */
 var Dropdown = function Dropdown(props) {
   return /*#__PURE__*/jsx(FloatingTree, {
     children: /*#__PURE__*/jsx(DropdownElement, _objectSpread({}, props))
   });
 };
+
+/**
+ * A component that allows dismissing the dropdown when clicked.
+ * It can be used inside the dropdown panel to provide a dismiss area.
+ * It supports an optional `dismiss` prop to control whether the dropdown should be dismissed on click.
+ *
+ * @param children - The children elements to render inside the dismiss area.
+ * @param dismiss - Whether to dismiss the dropdown on click (default: true).
+ * @returns JSX Element
+ */
 var DropdownDismiss = function DropdownDismiss(_ref3) {
   var children = _ref3.children,
     _ref3$dismiss = _ref3.dismiss,

package/dist/esm/components/dropdown/DropdownTool.js

@@ -8,18 +8,19 @@ import { Icon } from '../icon/Icon.js';
 import { Dropdown } from './Dropdown.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "className", "groupHover"];
+var _excluded = ["children", "className", "groupHover", "icon"];
 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 DropdownTool = function DropdownTool(_ref) {
   var children = _ref.children,
     className = _ref.className,
     groupHover = _ref.groupHover,
+    icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs(Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(Icon, {
-      icon: CoreIcons.caretDown,
-      className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover:inline-block data-[dropdown-open]:inline-block")
+      icon: icon !== null && icon !== void 0 ? icon : CoreIcons.caretDown,
+      className: classNames("outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer", className, groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
     }), children]
   }));
 };

package/dist/esm/components/empty/EmptyContent.js

@@ -5,10 +5,11 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { isValidElement } from 'react';
-import { Icon } from '../icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
+import { Icon } from '../icon/Icon.js';
 
-var _excluded = ["children", "title", "message", "icon", "className", "size"];
+var _excluded = ["children", "title", "message", "icon", "className", "size", "iconColor"];
 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 SizeMap = {
@@ -48,6 +49,33 @@ var DefaultIcon = function DefaultIcon() {
     })]
   });
 };
+
+/**
+ * A component that displays a message and an optional icon when there is no content to show.
+ * It allows customization of title, message, icon, size, and additional CSS properties.
+ * It can also accept children elements for additional actions or information.
+ * This component is useful for displaying a friendly message when data is not available,
+ * such as in empty states of lists, tables, or other content areas.
+ *
+ * @param {EmptyContentProps} props - The properties for the EmptyContent component.
+ * @returns {JSX.Element} The rendered EmptyContent component.
+ *
+ * @example
+ * ```jsx
+ * <EmptyContent
+ *   title="No Data Available"
+ *   message="Please check back later."
+ *   icon="empty"
+ *   iconColor="tint-700"
+ *   size="md"
+ * >
+ *   <Button onClick={() => console.log("Action clicked")}>Retry</Button>
+ * </EmptyContent>
+ * // Renders an empty content area with a title, message, icon, and a button for retrying the action.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-emptycontent--docs} for more details.
+ */
 var EmptyContent = function EmptyContent(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -55,6 +83,7 @@ var EmptyContent = function EmptyContent(_ref) {
     icon = _ref.icon,
     className = _ref.className,
     size = _ref.size,
+    iconColor = _ref.iconColor,
     test = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     className: classNames("p-6 flex flex-col items-center area-content", className),
@@ -65,18 +94,19 @@ var EmptyContent = function EmptyContent(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       className: "leading-none",
       style: {
-        fontSize: "4em"
+        fontSize: "4em",
+        color: getColor(iconColor !== null && iconColor !== void 0 ? iconColor : "tint-700")
       },
       children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
         icon: icon
       }), /*#__PURE__*/isValidElement(icon) && icon, !icon && /*#__PURE__*/jsx(DefaultIcon, {})]
-    }), title && /*#__PURE__*/jsx("p", {
+    }), title && /*#__PURE__*/jsx("div", {
       className: "font-medium text-center text-dimmed",
       style: {
         fontSize: "1.5em"
       },
       children: title
-    }), /*#__PURE__*/jsx("p", {
+    }), /*#__PURE__*/jsx("div", {
       className: "font-medium text-center text-muted",
       style: {
         fontSize: "0.875em"

package/dist/esm/components/icon/Icon.js

@@ -4,12 +4,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { isSvgPath, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
-import classes from './Icon.module.css';
+import { useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
 
-var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "viewBox", "className", "onClick"];
+var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "disabled", "viewBox", "className", "onClick"];
 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 SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
@@ -22,7 +21,33 @@ var SizeMap = {
 };
 
 /**
- * An icon is a display component for svg icon path / image
+ * A versatile icon component that supports SVG paths, webfont icons, and text icons.
+ * It can be styled with background color, icon color, size, and animations.
+ * It also supports RTL flipping and rounded corners.
+ * The component can be used as a standalone icon or as part of other components.
+ * It accepts various properties to customize its appearance and behavior.
+ * These include `bg`, `color`, `size`, `rtlFlip`, `animate`, and `rounded`.
+ *
+ * @param {IconProps} props - The properties for the Icon component.
+ * @returns {JSX.Element} The rendered Icon component.
+ *
+ * @example
+ * ```jsx
+ * <Icon
+ *   icon="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+ *   bg="bg-blue-500"
+ *   color="text-white"
+ *   size="lg"
+ *   rtlFlip={true}
+ *   animate="spin"
+ *   rounded={true}
+ *   onClick={() => console.log("Icon clicked")}
+ * />
+ * // Renders an icon with a SVG path, blue background, white text color,
+ * // large size, RTL flip, spin animation, rounded corners, and a click handler.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-icon--docs} for more details.
  */
 var Icon = function Icon(_ref) {
   var ref = _ref.ref,
@@ -34,13 +59,14 @@ var Icon = function Icon(_ref) {
     rtlFlip = _ref.rtlFlip,
     animate = _ref.animate,
     rounded = _ref.rounded,
+    disabled = _ref.disabled,
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
     className = _ref.className,
     onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   /** ***************** style map *******************/
-  var styles = useMemoDebugger(function () {
+  var styles = useMemo(function () {
     var s = {};
     if (bg) {
       s.backgroundColor = getColor(bg);
@@ -55,16 +81,15 @@ var Icon = function Icon(_ref) {
       s.fontSize = SizeMap[size];
     }
     return s;
-  }, [bg, color, size], "Icon styles");
+  }, [bg, color, size]);
 
   /** ***************** check if icon is svg path *******************/
-  var isSvg = useMemoDebugger(function () {
+  var isSvg = useMemo(function () {
     return isSvgPath(icon);
-  }, [icon], "Icon isSvg");
+  }, [icon]);
 
   /** ***************** render icon *******************/
-  var iconEl = useMemoDebugger(function () {
-    var _SvgTextSize$icon$len;
+  var iconEl = useMemo(function () {
     if (!isString(icon)) {
       throw Error("Invalid icon expected string");
     }
@@ -83,22 +108,25 @@ var Icon = function Icon(_ref) {
         dominantBaseline: "middle",
         textAnchor: "middle",
         style: {
-          fontSize: (_SvgTextSize$icon$len = SvgTextSize[icon.length]) !== null && _SvgTextSize$icon$len !== void 0 ? _SvgTextSize$icon$len : "1em"
+          fontSize: SvgTextSize[icon.length]
         },
         children: icon
       })
     }) : /*#__PURE__*/jsx("i", {
       className: "".concat(icon)
     });
-  }, [icon, isSvg, viewBox], "Icon el");
-  return /*#__PURE__*/jsx("dfn", _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref,
+  }, [icon, isSvg, viewBox]);
+  return /*#__PURE__*/jsx("dfn", _objectSpread(_objectSpread({
+    "data-ref": "icon",
+    ref: ref
+  }, rest), {}, {
     role: "presentation",
-    className: classNames(classes.icon, className, "select-none overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getBgClass(bg), color && getColorClass(color), !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate)),
+    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!onClick && disabled && "opacity-30 pointer-events-none", className),
     onClick: onClick,
     "data-flip": rtlFlip,
     style: styles,
     "data-clickable": !!onClick,
+    "data-inner-clickable": !!onClick,
     children: iconEl
   }));
 };