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

package/dist/cjs/hooks/usePropToggle.js

@@ -5,11 +5,22 @@ var react = require('react');
 var useEffectDebugger = require('./useEffectDebugger.js');
 
 /**
- * hook to control boolean props
- * @param isOn (is prop true)
- * @param callback (optional callback)
- * @param key (optional key to pass to callback)
- * @returns
+ * This hook is used to manage a toggle state based on a prop value.
+ * It allows you to toggle the state and also provides a reference to the current state.
+ * It is useful for scenarios where you want to control a toggle state from a parent component while also allowing local toggling.
+ *
+ * @param isOn - Initial state of the toggle (default: false)
+ * @param onToggle - Callback function that is called when the toggle state changes.
+ * @param key - Optional key to identify the toggle state, useful for multiple toggles.
+ * @returns A tuple containing the current toggle state, a function to toggle the state, and a reference to the current state.
+ *
+ * @example
+ * ```jsx
+ * const [isToggled, toggle, toggleRef] = usePropToggle(false, (newState) => {
+ *   console.log("Toggle state changed to:", newState);
+ * });
+ * toggle(); // This will toggle the state and call the onToggle callback
+ * ```
  */
 var usePropToggle = function usePropToggle() {
   var isOn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

package/dist/cjs/hooks/useResize.js

@@ -26,6 +26,24 @@ var useIsRtl = require('./useIsRtl.js');
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+/**
+ * Custom hook to handle resizing of an element.
+ * It provides a ref to the element and a mouse down event handler to initiate resizing.
+ * The resizing is done by tracking mouse movements and calculating the difference in x and y coordinates.
+ * It supports both horizontal and vertical resizing, and can be configured to reverse the direction based on RTL (Right-to-Left) layout.
+ *
+ * @param onResize - callback to handle resize event with the difference in x and y
+ * @param options - options for resizing behavior
+ * @returns ref to the element and a mouse down event handler to initiate resizing
+ *
+ * @example
+ * ```jsx
+ * const { ref, onMouseDown } = useResize((diff) => {
+ *   console.log("Resize difference:", diff);
+ * }, { isReverse: true, isVertical: false });
+ * <div ref={ref} onMouseDown={onMouseDown}>Resize Me</div>
+ * ```
+ */
 var useResize = function useResize(onResize, _ref) {
   var _ref$isReverse = _ref.isReverse,
     isReverse = _ref$isReverse === void 0 ? false : _ref$isReverse,

package/dist/cjs/hooks/useResizeObserver.js

@@ -5,6 +5,25 @@ var react = require('react');
 var ResizeObserver = require('resize-observer-polyfill');
 var useDebounce = require('./useDebounce.js');
 
+/**
+ * Custom hook to observe size changes of an element using ResizeObserver.
+ * It returns a ref that can be attached to the element you want to observe.
+ * The hook will call the provided `onResize` callback with the new size of the element
+ * whenever it changes.
+ * * This is useful for responsive designs where you need to adjust the layout or styles
+ * based on the size of an element.
+ *
+ * @param onResize Callback function that receives the new size of the element.
+ * @returns A ref object to be attached to the element you want to observe.
+ *
+ * @example
+ * ```jsx
+ * const ref = useResizeObserver((size) => {
+ *   console.log("Element resized:", size);
+ * });
+ * <div ref={ref}>Resize me!</div>
+ * ```
+ */
 var useResizeObserver = function useResizeObserver(onResize) {
   var ref = react.useRef(null);
   var _useTransition = react.useTransition(),

package/dist/cjs/hooks/useStorage.js

@@ -5,6 +5,24 @@ var react = require('react');
 var useClientService = require('./useClientService.js');
 var useEffectDebugger = require('./useEffectDebugger.js');
 
+/**
+ * Custom hook to manage local storage state.
+ * This hook allows you to store and retrieve values from the browser's local storage,
+ * and provides a way to update the stored value while keeping the state in sync with local storage.
+ * It initializes the state with the value from local storage if it exists, or uses a default value if it does not.
+ * The hook returns a tuple containing the current value and a function to update the value.
+ * This is useful for persisting user preferences or application state across page reloads.
+ *
+ * @param key - The key under which the value is stored in local storage.
+ * @param defaultValue - The default value to use if the key does not exist in local storage.
+ * @returns A tuple containing the current value and a function to update the value.
+ *
+ * @example
+ * ```jsx
+ * const [settings, setSettings] = useLocalStorage("userSettings", { theme: "light" });
+ * // This will initialize the settings state from local storage or use the default value.
+ * ```
+ */
 var useLocalStorage = function useLocalStorage(key, defaultValue) {
   var _JSON$parse, _service$getItem;
   var service = useClientService.useClientService(localStorage);
@@ -22,6 +40,27 @@ var useLocalStorage = function useLocalStorage(key, defaultValue) {
   };
   return [value, changeValue];
 };
+
+/**
+ * Custom hook to manage session storage state.
+ * This hook allows you to store and retrieve values from the browser's session storage,
+ * and provides a way to update the stored value while keeping the state in sync with session storage.
+ * It initializes the state with the value from session storage if it exists, or uses a default value if it does not.
+ * The hook returns a tuple containing the current value and a function to update the value.
+ * This is useful for persisting user preferences or application state during a single session,
+ * such as form data or temporary settings that should not persist across page reloads.
+ * This hook is similar to `useLocalStorage`, but it uses session storage instead of local storage.
+ *
+ * @param key - The key under which the value is stored in session storage.
+ * @param defaultValue - The default value to use if the key does not exist in session storage.
+ * @returns A tuple containing the current value and a function to update the value.
+ *
+ * @example
+ * ```jsx
+ * const [user, setUser] = useSessionStorage("user", { name: "", age: 0 });
+ * // This will initialize the user state from session storage or use the default value.
+ * ```
+ */
 var useSessionStorage = function useSessionStorage(key, defaultValue) {
   var _JSON$parse3, _service$getItem3;
   var service = useClientService.useClientService(sessionStorage);

package/dist/cjs/types/icons.js

@@ -24,6 +24,10 @@
  */
 /* istanbul ignore file */
 /* eslint-disable @typescript-eslint/no-namespace */
+/**
+ * Core icons used in the application.
+ * These icons are typically used for navigation, actions, and other UI elements.
+ */
 exports.CoreIcons = void 0;
 (function (_CoreIcons) {
   _CoreIcons.chevronDown = "M6.173 7.29l5.827 5.827 5.827-5.827 1.79 1.803-7.617 7.617-7.617-7.617 1.79-1.803z";

package/dist/cjs/typography/Abbr.js

@@ -36,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,

package/dist/cjs/typography/Anchor.js

@@ -14,7 +14,24 @@ var _excluded = ["ref", "as", "children", "className", "bg", "color", "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 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 Anchor = function Anchor(_ref) {
   var ref = _ref.ref,

package/dist/cjs/typography/Mark.js

@@ -23,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,

package/dist/cjs/typography/Text.js

@@ -18,7 +18,33 @@ var _excluded = ["children", "className", "inline", "bg", "color", "family", "si
 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,

package/dist/cjs/typography/Title.js

@@ -14,7 +14,22 @@ var _excluded = ["children", "className", "as", "bg", "color", "size", "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 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,

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

@@ -11,8 +11,27 @@ 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,
@@ -21,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);

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

@@ -13,6 +13,28 @@ 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,
@@ -59,6 +81,24 @@ var AnimationIndicator = function AnimationIndicator(_ref) {
     })]
   }));
 };
+
+/**
+ * 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-500" : _ref2$color,
@@ -78,6 +118,24 @@ var AnimationBars = function AnimationBars(_ref2) {
     })
   });
 };
+
+/**
+ * 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,
@@ -98,15 +156,24 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
     })
   });
 };
-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"
-    })
-  });
-};
+
+/**
+ * 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);
@@ -139,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 };

package/dist/esm/components/avatar/Avatar.js

@@ -22,7 +22,32 @@ var SizeMap = {
 };
 
 /**
- * An avatar is a graphical representation of a user's identity.
+ * A component that displays an avatar image or a fallback icon with customizable styles and properties.
+ * It supports various avatar types, including text-based avatars, and allows for customization of background color, icon color, size, and rounded corners.
+ * This component is useful for displaying user avatars in applications, providing a visual representation of users or entities.
+ * It can also handle cases where the avatar image fails to load by displaying a fallback icon or text.
+ * It uses the Boring Avatars library for generating fallback avatars based on the user's name.
+ *
+ * @param {AvatarProps} props - The properties for the Avatar component.
+ * @returns {JSX.Element} The rendered Avatar component.
+ *
+ * @example
+ * ```jsx
+ * <Avatar
+ *   name="John Doe"
+ *   avatar="https://example.com/avatar.jpg"
+ *   fallbackIcon="fas fa-user"
+ *   bg="bg-blue-500"
+ *   color="text-white"
+ *   size="md"
+ *   rounded
+ *   variant="beam"
+ *   onClick={() => console.log("Avatar clicked")}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-avatar--docs} for more details.
+ * @see {@link https://boringavatars.com/} for more information on Boring Avatars.
  */
 var Avatar = function Avatar(_ref) {
   var ref = _ref.ref,
@@ -46,7 +71,8 @@ var Avatar = function Avatar(_ref) {
     fallback = _useState2[0],
     setFallback = _useState2[1];
 
-  /** ***************** style map *******************/
+  // Memoize styles to avoid unnecessary recalculations
+  // and to ensure styles are only recalculated when dependencies change
   var styles = useMemo(function () {
     var s = {};
     if (bg) {
@@ -64,7 +90,8 @@ var Avatar = function Avatar(_ref) {
     return s;
   }, [bg, color, size]);
 
-  /** ***************** render icon *******************/
+  // avatar image
+  // if avatar is not provided, fallback to icon or text
   var avatarImage = useMemo(function () {
     setFallback(!avatar);
     return avatar && /*#__PURE__*/jsxs("div", {
@@ -85,6 +112,8 @@ var Avatar = function Avatar(_ref) {
       })]
     });
   }, [avatar]);
+
+  // render fallback icon or text
   var fallbackAvatar = useMemo(function () {
     if (fallbackIcon) {
       return isSvgPath(fallbackIcon) ? /*#__PURE__*/jsx("svg", {
@@ -119,6 +148,7 @@ var Avatar = function Avatar(_ref) {
         })
       });
     }
+    // Fallback to BoringAvatar
     return /*#__PURE__*/jsx(BoringAvatar, {
       square: true,
       size: 64,

package/dist/esm/components/avatar/AvatarGroup.js

@@ -19,7 +19,25 @@ var SizeMap = {
 };
 
 /**
- * Group multiple avatars together
+ * A component that groups multiple avatars together, displaying a count of additional avatars if the total exceeds the visible ones.
+ * It allows customization of size, rounding, and additional aria attributes.
+ * This component is useful for displaying a collection of user avatars in a compact format, such as in a chat application or user list.
+ * It automatically calculates the number of additional avatars based on the `totalCount` prop and the number of children provided.
+ *
+ * @param {AvatarGroupProps} props - The properties for the AvatarGroup component.
+ * @returns {JSX.Element} The rendered AvatarGroup component.
+ *
+ * @example
+ * ```jsx
+ * <AvatarGroup totalCount={5} size="md" className="my-avatar-group">
+ *   <Avatar name="John Doe" avatar="https://example.com/avatar1.jpg" />
+ *   <Avatar name="Jane Smith" avatar="https://example.com/avatar2.jpg" />
+ *   <Avatar name="Alice Johnson" avatar="https://example.com/avatar3.jpg" />
+ *   <Avatar name="Bob Brown" avatar="https://example.com/avatar4.jpg" />
+ * </AvatarGroup>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-avatar--docs} for more details.
  */
 var AvatarGroup = function AvatarGroup(_ref) {
   var ref = _ref.ref,

package/dist/esm/components/badge/Badge.js

@@ -4,15 +4,22 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { isObject, isNil, isNumber, mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo, cloneElement } from 'react';
+import { isValidElement, useMemo, cloneElement } from 'react';
 import { Icon } from '../icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "className", "value", "max", "ping", "block", "inline", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
 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; }
+/**
+ * Utility function to get badge properties from a badge value or object.
+ * It checks if the badge is an object and returns its properties,
+ *
+ * @param {string | number | BadgeType} badge - The badge value or object.
+ * @returns {AnyObject} An object containing badge properties.
+ */
 var getBadgeProps = function getBadgeProps(badge) {
-  if (isObject(badge)) {
+  if (isObject(badge) && ! /*#__PURE__*/isValidElement(badge)) {
     return Object.assign({
       forButton: true,
       placement: ""
@@ -25,6 +32,25 @@ var getBadgeProps = function getBadgeProps(badge) {
     };
   }
 };
+
+/**
+ * A component that displays a badge with a value, icon, and optional ping animation.
+ * It can be used to indicate notifications, messages, or other important information.
+ * It supports various placements, inline or block display, and custom styling.
+ * It can also wrap children elements, allowing for flexible usage in buttons or other components.
+ *
+ * @param {BadgeProps} props - The properties for the Badge component.
+ * @returns {JSX.Element} The rendered Badge component.
+ *
+ * @example
+ * ```jsx
+ * <Badge value={5} max={10} ping>
+ *   <button>Notifications</button>
+ * </Badge>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-badge--docs} for more details.
+ */
 var Badge = function Badge(_ref) {
   var ref = _ref.ref,
     className = _ref.className,
@@ -44,6 +70,9 @@ var Badge = function Badge(_ref) {
     rtlFlip = _ref.rtlFlip,
     rest = _objectWithoutProperties(_ref, _excluded);
   var label = useMemo(function () {
+    if ( /*#__PURE__*/isValidElement(value)) {
+      return value;
+    }
     if (!isNil(value)) {
       if (isNumber(value) && max && value > max) {
         return "".concat(max, "+");