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

package/src/core/page/Page.tsx

@@ -55,7 +55,32 @@ export interface PageProps
 }
 
 /**
- * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
+ * Page component that wraps children in a div element.
+ * It includes a title section with an optional icon and a loading indicator.
+ * The component can be styled with a paper effect, page icon and title.
+ * It also accepts a loading prop to display a loading indicator.
+ *
+ * @param {PageProps} props - The properties for the Page component.
+ * @returns A div element containing the title and children, with optional loading indicator.
+ *
+ * @example
+ * ```jsx
+ * <Page
+ *   title="My Page"
+ *   icon="home"
+ *   iconBg="bg-blue-500"
+ *   iconColor="text-white"
+ *   loading={false}
+ *   paper={true}
+ *   data-testid="my-page"
+ *   data-test-value="page-value"
+ * >
+ *   <p>This is the content of the page.</p>
+ * </Page>
+ * // Renders a page with a title, icon, and content.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--page} for more details.
  */
 export const Page = ({
   ref,

package/src/core/responsive/Responsive.tsx

@@ -92,7 +92,20 @@ export interface ColProps
 }
 
 /**
- * Responsive layout container
+ * Container component that wraps children in a div element.
+ * It supports full width, gutter size, and additional CSS classes.
+ * It can be used to create a responsive layout with optional gutters for spacing.
+ * It accepts properties for full width, gutter size, and additional CSS classes.
+ *
+ * @param {ContainerProps} props - The properties for the Container component.
+ * @returns A div element containing the children with optional full width and gutter size.
+ *
+ * @example
+ * ```jsx
+ * <Container fullWidth={true} gutter="16px" className="custom-container">
+ *   <p>This is a container with full width and gutter.</p>
+ * </Container>
+ * ```
  */
 export const Container = ({
   children,
@@ -116,6 +129,26 @@ export const Container = ({
   );
 };
 
+/**
+ * Row component that allows for flexible layout of columns.
+ * It supports various flex properties, alignment, and wrapping.
+ * It can be used to create a responsive layout with optional gutters for spacing.
+ * It accepts properties for gutter size, orientation, alignment, justification, and additional CSS classes.
+ *
+ * @param {RowProps} props - The properties for the Row component.
+ * @returns A div element representing a row with the specified flex and alignment properties.
+ *
+ * @example
+ * ```jsx
+ * <Row gutter="16px" orient="row" align="center" justify="between">
+ *   <Col flex="fill">Column 1</Col>
+ *   <Col flex="fill">Column 2</Col>
+ * </Row>
+ * // Renders a row with two columns, each taking equal space, centered vertically and spaced evenly.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--responsive} for more details.
+ */
 export const Row = ({
   children,
   gutter,
@@ -148,6 +181,24 @@ export const Row = ({
   );
 };
 
+/**
+ * Column component that allows for flexible layout within a row.
+ * It supports various flex properties, alignment, and truncation.
+ * It can be used to create a responsive layout with optional stretching of inner content.
+ * It accepts properties for flex size, alignment, truncation, and additional CSS classes.
+ *
+ * @param {ColProps} props - The properties for the Col component.
+ * @returns A div element representing a column with the specified flex and alignment properties.
+ *
+ * @example
+ * ```jsx
+ * <Col flex="fill" align="center" truncate className="custom-col">
+ *   <p>This is a column with flexible layout.</p>
+ * </Col>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--responsive} for more details.
+ */
 export const Col = ({
   children,
   flex,

package/src/core/section/Section.tsx

@@ -26,7 +26,22 @@ import { type ChildrenProp, type CssProp, type RefProp } from "../../types";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
 
 /**
- * The section component provides a structured layout used within a page to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
+ * A component that represents a section of content within a page, with templated grid layout.
+ * It can be used to group related content together and can be styled with additional CSS classes.
+ * It supports RTL (right-to-left) text direction.
+ *
+ * @param {ChildrenProp} children - The children to be rendered inside the section.
+ * @param {CssProp} className - Additional CSS classes to apply to the section.
+ * @param {RefProp<HTMLDivElement>} ref - A ref to the section element.
+ *
+ * @example
+ * ```jsx
+ * <Section className="my-section" ref={sectionRef}>
+ *   <p>This is a section.</p>
+ * </Section>
+ * ```
+ *
+ *  @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-application--section} for more details.
  */
 export const Section = ({
   children,

package/src/core/theme/ThemeProvider.tsx

@@ -61,7 +61,27 @@ export interface ThemeProps {
 }
 
 /**
- * Theme override
+ * This component provides a way to set the theme for the application.
+ * It allows you to set the primary, accent, and tint colors, as well as the color scheme and rounding.
+ * It uses CSS variables to apply the colors and styles.
+ * It also applies the branding className to the root element.
+ * The component uses the `useApplicationContext` hook to get the current color scheme from the application context.
+ *
+ * @example
+ * ```jsx
+ * <ThemeProvider
+ *   branding="my-branding"
+ *   primaryColor="#ff0000"
+ *   accentColor="#00ff00"
+ *   tintColor="#0000ff"
+ *   colorScheme="dark"
+ *   rounding="md"
+ * >
+ *   <div>Your content here</div>
+ * </ThemeProvider>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--theme-provider} for more details.
  */
 export const ThemeProvider = ({
   children,

package/src/core/viewport/Viewport.tsx

@@ -25,7 +25,21 @@ import classNames from "classnames";
 import { type PropsWithChildren } from "react";
 
 /**
- * The application viewport is the main container that defines the visible area where content is displayed and interacted with.
+ * This component is used to create a full-screen viewport
+ * that can be used to display content in a grid layout.
+ * It is typically used as a container for the main content of the application.
+ * It is styled to take up the full width and height of the viewport,
+ * and it uses absolute positioning to ensure it covers the entire screen.
+ * The component accepts children as props, allowing you to nest other components inside it.
+ *
+ * @example
+ * ```jsx
+ * <Viewport>
+ *   <YourContentComponent />
+ * </Viewport>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-application--viewport} for more details.
  */
 export const Viewport = ({ children }: PropsWithChildren) => {
   return (

package/src/hooks/useControlledValue.tsx

@@ -24,6 +24,18 @@
 import { useDeferredValue, useState } from "react";
 import { useEffectDebugger } from "./useEffectDebugger";
 
+/**
+ * Custom hook to manage a controlled value with a default fallback for inputs.
+ * It updates the current value whenever the deferred value changes.
+ * This is useful for scenarios where you want to control the value of a component
+ * while also providing a default value if the controlled value is not set.
+ * This hook is particularly useful for form inputs or components that require a controlled value
+ * but also need to handle cases where the value might not be immediately available.
+ *
+ * @param value - The controlled value that may change.
+ * @param defaultValue - The default value to use if the controlled value is not set.
+ * @returns An object containing the current value and a function to update it.
+ */
 export const useControlledValue = <T extends AnyObject = string>(
   value: T,
   defaultValue: T,

package/src/hooks/useDebounce.ts

@@ -23,6 +23,18 @@
 
 import { useMemo, useRef } from "react";
 
+/**
+ * Custom hook to debounce a function.
+ * This hook delays the processing of the function until after a specified delay period
+ * has elapsed since the last time the function was invoked. This is useful for optimizing
+ * performance in scenarios where a function may be called frequently, such as during
+ * user input or window resizing events.
+ *
+ * @param callback - The function to debounce.
+ * @param deps - The dependency array for the hook.
+ * @param delay - The debounce delay in milliseconds.
+ * @returns A debounced version of the callback function.
+ */
 export const useDebounce = (
   callback: undefined | ((...rest: AnyObject) => AnyObject),
   deps: AnyObject[],

package/src/hooks/useEffectDebugger.ts

@@ -86,6 +86,19 @@ const compareInputs = (
   });
 };
 
+/**
+ * Custom hook to debug useMemo hooks.
+ * It compares the current and previous dependency arrays and logs any differences.
+ * @param func - The function to be memoized or executed in the effect.
+ * @param inputs - The dependency array for the hook.
+ * @param prefix - A prefix for the log messages to identify the hook.
+ * @returns The result of the memoized function or the effect.
+ *
+ * @example
+ * ```jsx
+ * const value = useMemoDebugger(() => computeValue(), [dependency1, dependency2], "MyComponent");
+ * ```
+ */
 export const useMemoDebugger = <T>(
   func: () => T,
   inputs: DependencyList,
@@ -108,6 +121,24 @@ export const useMemoDebugger = <T>(
   }, inputs);
 };
 
+/**
+ * Custom hook to debug useEffect and useLayoutEffect hooks.
+ * It compares the current and previous dependency arrays and logs any differences.
+ * @param func - The effect function to be executed.
+ * @param inputs - The dependency array for the effect.
+ * @param prefix - A prefix for the log messages to identify the effect.
+ * @returns A cleanup function if the effect returns one.
+ *
+ * @example
+ * ```jsx
+ * useEffectDebugger(() => {
+ *   // Effect logic here
+ *   return () => {
+ *     // Cleanup logic here
+ *   };
+ * }, [dependency1, dependency2], "MyComponent");
+ * ```
+ */
 export const useEffectDebugger = (
   func: EffectCallback,
   inputs: DependencyList,
@@ -130,6 +161,24 @@ export const useEffectDebugger = (
   }, inputs);
 };
 
+/**
+ * Custom hook to debug useLayoutEffect hooks.
+ * It compares the current and previous dependency arrays and logs any differences.
+ * @param func - The layout effect function to be executed.
+ * @param inputs - The dependency array for the layout effect.
+ * @param prefix - A prefix for the log messages to identify the layout effect.
+ * @returns A cleanup function if the layout effect returns one.
+ *
+ * @example
+ * ```jsx
+ * useLayoutEffectDebugger(() => {
+ *   // Layout effect logic here
+ *   return () => {
+ *     // Cleanup logic here
+ *   };
+ * }, [dependency1, dependency2], "MyComponent");
+ * ```
+ */
 export const useLayoutEffectDebugger = (
   func: EffectCallback,
   inputs: DependencyList,

package/src/hooks/useIsDark.ts

@@ -24,6 +24,14 @@
 import { useCallback, useState } from "react";
 import { useLayoutEffectDebugger } from "./useEffectDebugger";
 
+/**
+ * Custom hook to determine if the current theme is dark.
+ * It checks the background color of the document's root element
+ * and sets the `isDark` state based on the red component of the RGB color.
+ * If the red component is less than 50, it considers the theme to be dark.
+ *
+ * @returns {boolean} - Returns true if the theme is dark, false otherwise.
+ */
 export const useIsDark = () => {
   const [isDark, setDark] = useState(false);
   const checkTheme = useCallback(() => {

package/src/hooks/useIsRtl.ts

@@ -25,6 +25,18 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLayoutEffectDebugger } from "./useEffectDebugger";
 
+/**
+ * Custom hook to determine if the current locale is RTL (Right-to-Left).
+ * It uses the i18n instance from react-i18next to check the direction.
+ *
+ * @returns {boolean} - Returns true if the current locale is RTL, false otherwise.
+ *
+ * @example
+ * ```jsx
+ * const isRtl = useIsRtl();
+ * // This will return true if the current locale is RTL, false otherwise.
+ * ```
+ */
 export const useIsRtl = () => {
   const { i18n } = useTranslation("core");
   const [isRtl, setIsRtl] = useState(false);

package/src/hooks/useNavigator.tsx

@@ -23,6 +23,24 @@
 
 import { useCallback, useMemo, useRef, useState } from "react";
 
+/**
+ * Custom hook to manage navigation through a list of items.
+ * It provides functionality to navigate forward and backward,
+ * and keeps track of the current index and total count of items.
+ *
+ * @param totalCount - Total number of items to navigate through.
+ * @param defaultIndex - Initial index to start navigation from.
+ * @returns An object containing the current index, a function to navigate,
+ *          a label for the current position, and a function to set the current index.
+ *
+ * @example
+ * ```jsx
+ * const { headLabel, onNavigate, currentIndex, setCurrentIndex } = useNavigator(5, 0);
+ * // headLabel will show "1/5"
+ * // onNavigate(1) will move to the next item, and onNavigate(-1) will move to the previous item.
+ * // currentIndex will be updated accordingly.
+ * ```
+ */
 export const useNavigator = (totalCount = 0, defaultIndex = 0) => {
   const [currentIndex, setCurrentIndex] = useState(defaultIndex);
   const refCurrent = useRef(defaultIndex);

package/src/hooks/useOverlayService.tsx

@@ -31,6 +31,30 @@ import { type ModalProps } from "../types";
 
 type OverlayComponent = ElementType<ModalProps<AnyObject>>;
 
+/**
+ * Hook to manage overlay components like modals or flyouts.
+ * It provides a way to open an overlay with specified properties and handle its closure.
+ * This hook returns the current overlay component and a function to open it with props.
+ * It is useful for scenarios where you need to display overlays dynamically,
+ * such as modals, flyouts, or any other overlay components in a React application.
+ * The `openOverlay` function returns a promise that resolves with the result
+ * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
+ *
+ * @param ModalOrFlyout - The component to be used as an overlay.
+ * @returns An array containing the current overlay and a function to open it.
+ *
+ * @example
+ * ```jsx
+ * const [Overlay, openOverlay] = useOverlayService(MyModalComponent);
+ * // To open the overlay:
+ * const handleOpen = async () => {
+ *   const result = await openOverlay({ title: "My Modal", content: "Hello World" });
+ *   console.log(result); // Handle the result from the overlay
+ * };
+ * <button onClick={handleOpen}>Open Modal</button>
+ * <Overlay />
+ * ```
+ */
 export const useOverlayService = (
   ModalOrFlyout: OverlayComponent,
 ): [

package/src/hooks/usePropToggle.ts

@@ -25,11 +25,22 @@ import { useCallback, useRef, useState, type RefObject } from "react";
 import { useLayoutEffectDebugger } from "./useEffectDebugger";
 
 /**
- * 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
+ * ```
  */
 export const usePropToggle = (
   isOn = false,

package/src/hooks/useResize.ts

@@ -43,6 +43,24 @@ interface Options {
   onEnd?: () => void;
 }
 
+/**
+ * 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>
+ * ```
+ */
 export const useResize = <T extends HTMLElement = HTMLDivElement>(
   onResize: (diff: { x: number; y: number }) => void,
   { isReverse = false, isVertical = false, onStart, onEnd }: Options,

package/src/hooks/useResizeObserver.ts

@@ -26,6 +26,25 @@ import ResizeObserver from "resize-observer-polyfill";
 import { type SizeObject } from "../types";
 import { useDebounce } from "./useDebounce";
 
+/**
+ * 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>
+ * ```
+ */
 export const useResizeObserver = <T extends HTMLElement = HTMLDivElement>(
   onResize?: (size: SizeObject) => void,
 ): RefObject<T | null> => {

package/src/hooks/useStorage.ts

@@ -25,6 +25,24 @@ import { useState } from "react";
 import { useClientService } from "./useClientService";
 import { useEffectDebugger } from "./useEffectDebugger";
 
+/**
+ * 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 const useLocalStorage = <T>(
   key: string,
   defaultValue: T,
@@ -50,6 +68,26 @@ export const useLocalStorage = <T>(
   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.
+ * ```
+ */
 export const useSessionStorage = <T>(
   key: string,
   defaultValue: T,

package/src/types/icons.ts

@@ -24,7 +24,11 @@
 /* istanbul ignore file */
 /* eslint-disable @typescript-eslint/no-namespace */
 
-export module CoreIcons {
+/**
+ * Core icons used in the application.
+ * These icons are typically used for navigation, actions, and other UI elements.
+ */
+export namespace CoreIcons {
   /**
    * carets
    */

package/src/typography/Abbr.tsx

@@ -88,7 +88,34 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
 }
 
 /**
- * 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 const Abbr = ({
   children,

package/src/typography/Anchor.tsx

@@ -59,7 +59,24 @@ export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
 }
 
 /**
- * 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 const Anchor = <Tag extends React.ElementType = "a">({
   ref,

package/src/typography/Copy.tsx

@@ -29,6 +29,21 @@ import { Tooltip } from "../overlays/tooltip/Tooltip";
 import { type CssProp, type SizeType } from "../types";
 import { CoreIcons } from "../types/icons";
 
+/**
+ * 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/src/typography/Mark.tsx

@@ -60,7 +60,26 @@ export interface MarkProps extends ChildProp<string> {
 }
 
 /**
- * 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 const Mark = ({ children, mark, renderer }: MarkProps) => {
   /** ***************** abbr text renderer *******************/