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

package/dist/types/hooks/useStorage.d.ts

@@ -1,2 +1,40 @@
+/**
+ * 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.
+ * ```
+ */
 export declare const useLocalStorage: <T>(key: string, defaultValue: T) => [T, (value: T) => void];
+/**
+ * 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.
+ * ```
+ */
 export declare const useSessionStorage: <T>(key: string, defaultValue: T) => [T, (value: T) => void];

package/dist/types/types/icons.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Core icons used in the application.
+ * These icons are typically used for navigation, actions, and other UI elements.
+ */
 export declare namespace CoreIcons {
     /**
      * carets

package/dist/types/typography/Abbr.d.ts

@@ -20,6 +20,33 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
     renderer?: (part: string[]) => JSX.Element;
 }
 /**
- * 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.
  */
 export declare const Abbr: ({ children, abbr, className, renderer, copyContent, }: AbbrProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Anchor.d.ts

@@ -20,6 +20,23 @@ export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
     onClick?: MouseEventHandler;
 }
 /**
- * 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.
  */
-export declare const Anchor: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">({ ref, as, children, className, bg, color, family, size, ...aria }: AnchorProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const Anchor: <Tag extends React.ElementType = "a">({ ref, as, children, className, bg, color, family, size, ...aria }: AnchorProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Copy.d.ts

@@ -1,4 +1,19 @@
 import { type CssProp, type SizeType } from "../types";
+/**
+ * A component that provides a button to copy text to the clipboard.
+ * It uses the Clipboard API to write the specified text to the clipboard.
+ * The button displays a tooltip feedback when the text is successfully copied.
+ *
+ * @param {CopyProps} props - The properties for the Copy component.
+ * @returns {JSX.Element} The rendered Copy component.
+ *
+ * @example
+ * ```jsx
+ * <Copy text="Text to copy" size="small" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--copy} for more details.
+ */
 export interface CopyProps extends CssProp {
     text: string;
     /**

package/dist/types/typography/Mark.d.ts

@@ -12,6 +12,25 @@ export interface MarkProps extends ChildProp<string> {
     renderer?: (part: string[]) => JSX.Element;
 }
 /**
- * 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.
  */
 export declare const Mark: ({ children, mark, renderer }: MarkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Text.d.ts

@@ -30,6 +30,32 @@ export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
     clamp?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 }
 /**
- * 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.
  */
 export declare const Text: ({ children, className, inline, bg, color, family, size, clamp, align, ...aria }: TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Title.d.ts

@@ -24,6 +24,21 @@ export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
     align?: "start" | "end" | "center" | "justify";
 }
 /**
- * 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.
  */
 export declare const Title: ({ children, className, as, bg, color, size, align, family, ...aria }: TitleProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.51",
+  "version": "1.0.0-beta.52",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
-    "@react-fabric/utilities": "^1.0.0-beta.50",
+    "@react-fabric/utilities": "^1.0.0-beta.52",
     "@tailwindcss/postcss": "~4.1.8",
     "boring-avatars": "^1.11.2",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a1b04de4663045f82992bff2aef8db26608eac74"
+  "gitHead": "0eabb9d88d91af93d657bcc209b226fd576e8260"
 }

package/src/components/actionLabel/ActionLabel.tsx

@@ -51,8 +51,27 @@ export interface ActionLabelProps
 }
 
 /**
- * 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.
  */
 export const ActionLabel = ({
   children,
@@ -62,9 +81,8 @@ export const ActionLabel = ({
   disabled,
   ...rest
 }: ActionLabelProps) => {
-  /**
-   * 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
   const calculateBasis = useCallback((el: HTMLElement | null) => {
     if (el) {
       const clone = el.cloneNode(true) as HTMLElement;

package/src/components/animations/Animations.tsx

@@ -44,6 +44,28 @@ export interface AnimationProps extends CssProp, AriaProps {
   strokeColor?: ColorType | PaletteType | string;
 }
 
+/**
+ * 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.
+ */
 export const AnimationIndicator = ({
   className,
   color,
@@ -103,6 +125,23 @@ export const AnimationIndicator = ({
   );
 };
 
+/**
+ * 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.
+ */
 export const AnimationBars = ({
   color = "tint-500",
   size = "2rem",
@@ -130,6 +169,23 @@ export const AnimationBars = ({
   );
 };
 
+/**
+ * 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.
+ */
 export const AnimationSpinner = ({
   color = "tint-700",
   size = "2rem",
@@ -158,20 +214,23 @@ export const AnimationSpinner = ({
   );
 };
 
-export const Loading = () => {
-  return (
-    <div
-      className={classNames(
-        "fabric-loader",
-        "area-[loader] relative overflow-x-clip",
-      )}
-      data-ref="loading"
-    >
-      <div className="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500" />
-    </div>
-  );
-};
-
+/**
+ * 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.
+ */
 export const Skeleton = ({ className, ...rest }: CssProp) => {
   return (
     <div
@@ -194,3 +253,23 @@ export const Skeleton = ({ className, ...rest }: CssProp) => {
     </div>
   );
 };
+
+/**
+ * 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.
+ */
+export const Loading = () => {
+  return (
+    <div
+      className={classNames(
+        "fabric-loader",
+        "area-[loader] relative overflow-x-clip",
+      )}
+      data-ref="loading"
+    >
+      <div className="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500" />
+    </div>
+  );
+};

package/src/components/avatar/Avatar.tsx

@@ -88,7 +88,32 @@ const SizeMap: KeyValue<string> = {
 };
 
 /**
- * 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.
  */
 export const Avatar = ({
   ref,
@@ -107,7 +132,8 @@ export const Avatar = ({
 }: AvatarProps) => {
   const [fallback, setFallback] = useState(true);
 
-  /** ***************** style map *******************/
+  // Memoize styles to avoid unnecessary recalculations
+  // and to ensure styles are only recalculated when dependencies change
   const styles = useMemo(() => {
     const s: KeyValue = {};
     if (bg) {
@@ -125,7 +151,8 @@ export const Avatar = ({
     return s;
   }, [bg, color, size]);
 
-  /** ***************** render icon *******************/
+  // avatar image
+  // if avatar is not provided, fallback to icon or text
   const avatarImage = useMemo(() => {
     setFallback(!avatar);
     return (
@@ -149,6 +176,7 @@ export const Avatar = ({
     );
   }, [avatar]);
 
+  // render fallback icon or text
   const fallbackAvatar = useMemo(() => {
     if (fallbackIcon) {
       return isSvgPath(fallbackIcon) ? (
@@ -178,6 +206,7 @@ export const Avatar = ({
         </svg>
       );
     }
+    // Fallback to BoringAvatar
     return <BoringAvatar square size={64} variant={variant} name={name} />;
   }, [name, variant, fallbackIcon]);
 

package/src/components/avatar/AvatarGroup.tsx

@@ -62,7 +62,25 @@ const SizeMap: KeyValue<string> = {
 };
 
 /**
- * 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.
  */
 export const AvatarGroup = ({
   ref,

package/src/components/badge/Badge.tsx

@@ -23,7 +23,7 @@
 
 import { isNil, isNumber, isObject, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { cloneElement, useMemo } from "react";
+import { cloneElement, isValidElement, useMemo } from "react";
 import {
   type BadgeType,
   type ChildProp,
@@ -72,10 +72,17 @@ export interface BadgeProps
     | "end";
 }
 
+/**
+ * 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.
+ */
 export const getBadgeProps = (
   badge?: string | number | BadgeType,
 ): AnyObject => {
-  if (isObject(badge)) {
+  if (isObject(badge) && !isValidElement(badge)) {
     return Object.assign({ forButton: true, placement: "" }, badge);
   } else {
     return {
@@ -86,6 +93,24 @@ export const getBadgeProps = (
   }
 };
 
+/**
+ * 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.
+ */
 export const Badge = ({
   ref,
   className,
@@ -105,6 +130,9 @@ export const Badge = ({
   ...rest
 }: BadgeProps) => {
   const label = useMemo(() => {
+    if (isValidElement(value)) {
+      return value;
+    }
     if (!isNil(value)) {
       if (isNumber(value) && max && value > max) {
         return `${max}+`;

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -45,6 +45,35 @@ export interface BreadcrumbProps
   color?: "primary" | "accent";
 }
 
+/**
+ * A navigation component that displays the current page's location within a hierarchy and allows users to navigate back to previous pages.
+ * It supports different styles, separators, and colors, and can handle a variable number of breadcrumb links.
+ * This component is useful for enhancing user navigation experience in applications with multiple levels of content hierarchy.
+ * It automatically manages the display of overflow items when there are too many links to fit in the available space, providing a dropdown for additional links.
+ *
+ * @param {BreadcrumbProps} props - The properties for the Breadcrumbs component.
+ * @returns {JSX.Element} The rendered Breadcrumbs component.
+ *
+ * @example
+ * ```jsx
+ * <Breadcrumbs
+ *   variant="classic"
+ *   separator=">"
+ *   color="primary"
+ *   className="my-custom-class"
+ *   aria-label="Breadcrumbs"
+ * >
+ *   <Anchor href="/">Home</Anchor>
+ *   <Anchor href="/products">Products</Anchor>
+ *   <Anchor href="/products/shoes">Shoes</Anchor>
+ *   <Anchor href="/products/shoes/sneakers">Sneakers</Anchor>
+ *   <Anchor href="/products/shoes/sneakers/nike">Nike</Anchor>
+ *   <Anchor href="/products/shoes/sneakers/nike/airmax">Air Max</Anchor>
+ * </Breadcrumbs>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-breadcrumbs--docs} for more details.
+ */
 export const Breadcrumbs = ({
   variant = "classic",
   className,

package/src/components/button/Button.tsx

@@ -156,7 +156,28 @@ export type ButtonProps<Tag extends React.ElementType = "button"> = BaseProps &
   PolymorphicProps<Tag>;
 
 /**
- * Clickable action button
+ * A versatile button component that supports various styles, icons, and actions.
+ * It can be used as a primary action button, with options for loading states, action messages, and more.
+ * It supports polymorphic rendering, allowing it to be used as different HTML elements (e.g., button, a, div).
+ * It also includes features like after action tooltips, badges, and keyboard shortcuts.
+ *
+ * @param {ButtonProps} props - The properties for the Button component.
+ * @returns {JSX.Element} The rendered Button component.
+ *
+ * @example
+ * ```jsx
+ * <Button
+ *   color="primary"
+ *   size="md"
+ *   variant="solid"
+ *   icon="check"
+ *   onClick={() => console.log("Button clicked!")}
+ * >
+ *   Click Me
+ * </Button>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-button--docs} for more details.
  */
 export const Button = <Tag extends React.ElementType = "button">({
   as,
@@ -195,6 +216,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   const [busy, setBusy] = useState(false);
   const [actionDone, setActionDone] = useState(false);
 
+  // Handle click events
   const clickHandler = useCallback(
     (e: React.MouseEvent) => {
       setBusy(true);