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

package/dist/cjs/typography/Abbr.js

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

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

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

package/dist/cjs/typography/Mark.js

@@ -6,9 +6,8 @@ var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
-var getColor = require('../utils/getColor.js');
-var Typography_module = require('./Typography.module.css');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../utils/getColor.js');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -16,7 +15,7 @@ var MarkText = function MarkText(_ref) {
   var color = _ref.color,
     children = _ref.children;
   return /*#__PURE__*/jsxRuntime.jsx("mark", {
-    className: classNames(Typography_module.mark, "whitespace-nowrap", color && getColor.getBgClass(color)),
+    className: classNames("fabric-mark", "whitespace-nowrap"),
     style: color ? {
       "--mark-color": getColor.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 = useEffectDebugger.useMemoDebugger(function () {
+  var inner = useEffectDebugger.useMemoDebugger(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function () {
     if (utilities.isString(children)) {
       if (!utilities.isEmpty(mark)) {
         var tokens = utilities.tokenize(children, mark.map(function (_ref3) {

package/dist/cjs/typography/Text.js

@@ -10,16 +10,41 @@ var reactI18next = require('react-i18next');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
 var usePropToggle = require('../hooks/usePropToggle.js');
 var calculateDimensions = require('../utils/calculateDimensions.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
-var Typography_module = require('./Typography.module.css');
 var types = require('./types.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 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__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-        className: classNames(Typography_module.text, "text-reset mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getColor.getBgClass(bg), color && getColor.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__*/jsxRuntime.jsx("div", {
-      className: Typography_module.moreLink,
+      className: "fabric-moreLink",
       children: /*#__PURE__*/jsxRuntime.jsxs("span", {
         role: "link",
         tabIndex: 0,

package/dist/cjs/typography/Title.js

@@ -4,17 +4,32 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 require('@react-fabric/utilities');
 var types = require('./types.js');
-var Typography_module = require('./Typography.module.css');
-var jsxRuntime = require('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__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
-    className: classNames(Typography_module.title, "px-[2px] py-1 truncate whitespace-pre-wrap", className, family && "font-".concat(family), !as && "text-lg", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color)),
+    className: classNames("fabric-title", className, family && "font-".concat(family), !as && "text-lg"),
     style: styles
   }, aria), {}, {
     children: children

package/dist/cjs/utils/cloneElement.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('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 = react.Children.map(children, function (c) {
+    if ( /*#__PURE__*/react.isValidElement(c)) {
+      if (c.type === jsxRuntime.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;
+    }
+    if (c instanceof Promise) {
+      return undefined;
+    }
+    return c;
+  })) === null || _Children$map === void 0 ? void 0 : _Children$map.flat().filter(Boolean).map(callback);
+};
+
+exports.cloneChildren = cloneChildren;

package/dist/cjs/utils/getColor.js

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

package/dist/esm/components/actionLabel/ActionLabel.js

@@ -5,15 +5,33 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useCallback } from 'react';
 import { ButtonGroup } from '../button/ButtonGroup.js';
-import classes from './ActionLabel.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "align", "actions", "disabled"];
 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 simple label component with additional actions (like a button or icon) that becomes visible only when the user hovers over the label,
- * useful in interfaces where space is limited or where it's important to keep the UI clean and focused
+ * A label with action buttons that can be aligned to the start or end.
+ * This component is useful for displaying a label with associated actions, such as buttons, that can be aligned based on the design requirements.
+ * It automatically calculates the width of the action buttons to ensure that the label text does not overflow the container.
+ * It uses CSS variables to manage the width of the label text dynamically based on the action buttons' width.
+ * This component is designed to be flexible and can be used in various contexts where a label with actions is needed.
+ * It supports custom alignment, disabled states, and can be easily styled with additional CSS classes.
+ *
+ * @param {ActionLabelProps} props - The properties for the ActionLabel component.
+ * @returns {JSX.Element} The rendered ActionLabel component.
+ *
+ * @example
+ * ```jsx
+ * <ActionLabel
+ *   actions={[<Button>Action 1</Button>, <Button>Action 2</Button>]}
+ *   align="end"
+ * >
+ *   Label Text
+ * </ActionLabel>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-action-label--docs} for more details.
  */
 var ActionLabel = function ActionLabel(_ref) {
   var children = _ref.children,
@@ -22,9 +40,8 @@ var ActionLabel = function ActionLabel(_ref) {
     actions = _ref.actions,
     disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
-  /**
-   * calculate the width of the action box, width will be used for a delayed transition on hover
-   */
+  // Calculate the width of the action buttons to set a CSS variable
+  // This is used to ensure the label text does not overflow the container
   var calculateBasis = useCallback(function (el) {
     if (el) {
       var clone = el.cloneNode(true);
@@ -39,12 +56,13 @@ var ActionLabel = function ActionLabel(_ref) {
     }
   }, []);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(className, classes.actionLabel, "flex overflow-hidden gap-1 items-center cursor-default select-none"),
+    className: classNames(className, "fabric-actionLabel", "flex overflow-hidden gap-1 items-center cursor-default select-none"),
     "data-disabled": disabled
   }, rest), {}, {
     children: [/*#__PURE__*/jsx(ButtonGroup, {
       ref: calculateBasis,
-      className: classNames(classes.actions, "overflow-hidden flex-content", align === "end" && "order-2"),
+      "data-inner-clickable": true,
+      className: classNames("fabric-actions", "overflow-hidden flex-content", align === "end" && "order-2"),
       children: actions
     }), /*#__PURE__*/jsx("div", {
       className: "flex-initial truncate",

package/dist/esm/components/animations/Animations.js

@@ -5,15 +5,36 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import { getColor, getColorClass } from '../../utils/getColor.js';
-import '@react-fabric/utilities';
-import classes from './Animations.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
 
 var _excluded = ["className", "color", "strokeColor", "type"],
   _excluded2 = ["className"];
 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 displays an animated indicator with a customizable icon type and colors.
+ * It can be used to indicate various states such as success, error, or information.
+ * The component supports different icon types like check, cross, question, and exclamation.
+ * It also allows customization of the icon color and stroke color.
+ *
+ * @param {AnimationProps} props - The properties for the AnimationIndicator component.
+ * @returns {JSX.Element} The rendered AnimationIndicator component.
+ *
+ * @example
+ * ```jsx
+ * <AnimationIndicator
+ *   type="check"
+ *   color="primary-500"
+ *   strokeColor="primary-700"
+ *   className="my-custom-class"
+ *   aria-label="Loading"
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
 var AnimationIndicator = function AnimationIndicator(_ref) {
   var className = _ref.className,
     color = _ref.color,
@@ -40,41 +61,81 @@ var AnimationIndicator = function AnimationIndicator(_ref) {
   /** ***************** component *******************/
   return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
     "data-ref": "animated-indicator",
-    className: classNames(classes.checkAnimation, className, "inline-block rounded-full", color && getColorClass(color)),
+    className: classNames("fabric-checkAnimation", className, "inline-block rounded-full"),
     style: styles,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 52 52",
     "aria-hidden": "true"
   }, aria), {}, {
     children: [/*#__PURE__*/jsx("circle", {
-      className: classes.circlePart,
+      className: "fabric-circlePart",
       cx: "26",
       cy: "26",
       r: "25"
     }), /*#__PURE__*/jsx("path", {
-      className: classNames(classes.iconPart, getColorClass(strokeColor !== null && strokeColor !== void 0 ? strokeColor : "invert")),
+      className: classNames("fabric-iconPart"),
+      style: {
+        color: strokeColor ? getColor(strokeColor) : "var(--text-color-invert)"
+      },
       d: path
     })]
   }));
 };
+
+/**
+ * A component that displays an animated bars loader.
+ * It can be customized with color and size properties.
+ * This component is typically used to indicate loading states in the UI.
+ *
+ * @param {Object} props - The properties for the AnimationBars component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
+ * @param {number | string} [props.size="2rem"] - The size of the bars.
+ * @returns {JSX.Element} The rendered AnimationBars component.
+ *
+ * @example
+ * ```jsx
+ * <AnimationBars color="primary-500" size="3rem" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
 var AnimationBars = function AnimationBars(_ref2) {
   var _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? "tint" : _ref2$color,
+    color = _ref2$color === void 0 ? "tint-500" : _ref2$color,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? "2rem" : _ref2$size;
   return /*#__PURE__*/jsx("div", {
     className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
     children: /*#__PURE__*/jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsx("div", {
-        className: classNames(classes.bars, getColorClass(color + "-500/50")),
+        className: classNames("fabric-bars"),
         style: {
-          width: size
+          width: size,
+          color: getColor(color)
         }
       })
     })
   });
 };
+
+/**
+ * A component that displays a spinner animation.
+ * It can be customized with color and size properties.
+ * This component is typically used to indicate loading states in the UI.
+ *
+ * @param {Object} props - The properties for the AnimationSpinner component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-700"] - The color of the spinner.
+ * @param {number | string} [props.size="2rem"] - The size of the spinner.
+ * @returns {JSX.Element} The rendered AnimationSpinner component.
+ *
+ * @example
+ * ```jsx
+ * <AnimationSpinner color="primary-500" size="3rem" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
 var AnimationSpinner = function AnimationSpinner(_ref3) {
   var _ref3$color = _ref3.color,
     color = _ref3$color === void 0 ? "tint-700" : _ref3$color,
@@ -82,33 +143,43 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
     size = _ref3$size === void 0 ? "2rem" : _ref3$size;
   return /*#__PURE__*/jsx("div", {
     className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
-    "data-testid": "spinner",
+    "data-ref": "spinner",
     children: /*#__PURE__*/jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsx("div", {
-        className: classNames(classes.spinner, getColorClass(color)),
+        className: classNames("fabric-spinner"),
         style: {
-          width: size
+          width: size,
+          color: getColor(color)
         }
       })
     })
   });
 };
-var Loading = function Loading() {
-  return /*#__PURE__*/jsx("div", {
-    className: classNames(classes.loader, "area-[loader] relative overflow-x-clip"),
-    "data-testid": "loading",
-    children: /*#__PURE__*/jsx("div", {
-      className: "absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500"
-    })
-  });
-};
+
+/**
+ * A component that displays a skeleton loader with a placeholder for content.
+ * It can be customized with color and size properties.
+ * This component is typically used to indicate loading states in the cards, panels and virtual lists,
+ * providing a visual placeholder for content that is being loaded.
+ *
+ * @param {CssProp} props - The properties for the Skeleton component.
+ * @returns {JSX.Element} The rendered Skeleton component.
+ *
+ * @example
+ * ```jsx
+ * <Skeleton className="my-skeleton" />
+ * * // Renders a skeleton loader with a placeholder for content.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
 var Skeleton = function Skeleton(_ref4) {
   var className = _ref4.className,
     rest = _objectWithoutProperties(_ref4, _excluded2);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     className: classNames(className, "p-2 animate-pulse flex gap-2 max-w-lg"),
-    "data-testid": "skeleton"
+    "data-ref": "skeleton"
   }, rest), {}, {
     children: [/*#__PURE__*/jsx("div", {
       className: "bg-tint-100 rounded aspect-square h-12"
@@ -135,4 +206,20 @@ var Skeleton = function Skeleton(_ref4) {
   }));
 };
 
+/**
+ * A component that displays a loading animation with a top border.
+ * It is typically used to indicate that content is being loaded in pages and page sections.
+ *
+ * @returns {JSX.Element} The rendered Loading component.
+ */
+var Loading = function Loading() {
+  return /*#__PURE__*/jsx("div", {
+    className: classNames("fabric-loader", "area-[loader] relative overflow-x-clip"),
+    "data-ref": "loading",
+    children: /*#__PURE__*/jsx("div", {
+      className: "absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500"
+    })
+  });
+};
+
 export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton };