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

package/src/components/media/Media.tsx

@@ -82,6 +82,30 @@ const loadIndicator = (
   </div>
 );
 
+/**
+ * Component for displaying images with optional reel decoration.
+ * A versatile media component that supports images and videos with various display options.
+ * It can display images with a reel decoration, handle loading states, and show error icons if the media fails to load.
+ * This component is useful for displaying images in a visually appealing way, with support for lazy loading and error handling.
+ * It automatically adjusts the display based on the provided fit property, allowing for different styles such as cover, contain, or fill.
+ *
+ * @param {ImageProps | VideoProps} props - The properties for the Media component.
+ * @returns {JSX.Element} The rendered Media component.
+ *
+ * @example
+ * ```jsx
+ * <Image
+ *   src="image.jpg"
+ *   alt="Example Image"
+ *   reel={true}
+ *   fit="cover"
+ *   className="custom-class"
+ * />
+ * // Renders an image with reel decoration, cover fit, and a custom class name.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-media--docs} for more details.
+ */
 export const Image = ({
   src,
   alt,
@@ -139,6 +163,36 @@ export const Image = ({
   );
 };
 
+/**
+ * Component for displaying videos with optional controls and reel decoration.
+ * A versatile video component that supports autoplay, hover play, and various display options.
+ * It can display videos with a reel decoration, handle loading states, and show error icons if the video fails to load.
+ * This component is useful for displaying videos in a visually appealing way, with support for controls, autoplay, and error handling.
+ * It automatically adjusts the display based on the provided fit property, allowing for different styles such as cover, contain, or fill.
+ * It also includes controls for play/pause and volume, enhancing user interaction with the video content.
+ * This component is ideal for media-rich applications where video content needs to be displayed with user-friendly controls and visual effects.
+ * It supports features like autoplay, play on hover, and custom fit options for the video display.
+ * It also includes a reel decoration for a more engaging visual presentation.
+ *
+ * @param {VideoProps} props - The properties for the Video component.
+ * @returns {JSX.Element} The rendered Video component.
+ *
+ * @example
+ * ```jsx
+ * <Video
+ *   src="video.mp4"
+ *   poster="poster.jpg"
+ *   reel={true}
+ *   autoPlay={true}
+ *   playOnHover={true}
+ *   fit="cover"
+ *   className="custom-class"
+ * />
+ * // Renders a video with reel decoration, autoplay, play on hover, cover fit, and a custom class name.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-video--docs} for more details.
+ */
 export const Video = ({
   src,
   poster,

package/src/components/menu/ContextMenu.tsx

@@ -42,6 +42,25 @@ export interface ContextMenuProps extends ChildrenProp {
   disabled?: boolean;
 }
 
+/**
+ * A component that provides a context menu that appears on right-click.
+ * It uses the Floating UI library to manage the positioning and interactions of the menu.
+ * This component is useful for creating custom context menus that can be triggered by right-clicking on elements.
+ *
+ * @param {ContextMenuProps} props - The properties for the ContextMenu component.
+ * @returns {JSX.Element} The rendered ContextMenu component.
+ *
+ * @example
+ * ```jsx
+ * <ContextMenu
+ *   menu={<Menu items={[{ label: "Option 1" }, { label: "Option 2" }]} />}
+ * >
+ *   <div className="context-menu-target">Right-click me!</div>
+ * </ContextMenu>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-menu--docs}
+ */
 export const ContextMenu = ({ children, menu, disabled }: ContextMenuProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const nodeId = useFloatingNodeId();

package/src/components/menu/Menu.tsx

@@ -276,6 +276,35 @@ const MenuComponent = ({
   );
 };
 
+/**
+ * A component that displays a menu with items, supports nested menus and various interactions.
+ * It can be triggered by hover or click events, and allows for custom styling and behavior.
+ * This component is designed to be used within a Floating UI context, allowing for dynamic positioning and interaction handling.
+ * It can be nested within other menus to create complex menu structures.
+ *
+ * @param {MenuProps} props - The properties for the Menu component.
+ * @returns {JSX.Element} The rendered Menu component.
+ *
+ * @example
+ * ```jsx
+ * <Menu
+ *   className="my-menu"
+ *   trigger="click"
+ *   onClick={(id) => console.log(`Clicked item with id: ${id}`)}
+ * >
+ *   <MenuItem id="item1" label="Item 1" />
+ *   <MenuItem id="item2" label="Item 2" />
+ *   <MenuItem id="item3" label="Item 3">
+ *     <Menu>
+ *       <MenuItem id="subitem1" label="Sub Item 1" />
+ *       <MenuItem id="subitem2" label="Sub Item 2" />
+ *     </Menu>
+ *   </MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-menu--docs} for more details.
+ */
 export const Menu = (props: MenuProps) => {
   const parentId = useFloatingParentNodeId();
   const tree = useFloatingTree();

package/src/components/menu/MenuItem.tsx

@@ -33,6 +33,27 @@ import { Badge, getBadgeProps } from "../badge/Badge";
 import { Icon } from "../icon/Icon";
 import { type MenuItemProps } from "./types";
 
+/**
+ * A menu item component that can be used in a dropdown or menu.
+ * It supports various features such as icons, badges, hotkeys, and more.
+ * It can be customized with different colors, icons, and behaviors.
+ *
+ * @param {MenuItemProps} props
+ * @returns A JSX element representing the menu item.
+ *
+ * @example
+ * ```jsx
+ * <MenuItem
+ *   label="Settings"
+ *   icon="settings"
+ *   onClick={() => console.log("Settings clicked")}
+ *   hotKey="Ctrl+S"
+ *   badge={{ count: 3, color: "red" }}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-menu--docs} for documentation.
+ */
 export const MenuItem = <Tag extends React.ElementType = "button">({
   as,
   label,

package/src/components/meter/Meter.tsx

@@ -37,6 +37,30 @@ export interface MeterProps extends CssProp, AriaProps, TestProps {
   hideLabel?: boolean;
 }
 
+/**
+ * A component that displays a visual representation of a value as a series of dots.
+ * It is useful for showing progress or completion status in a compact form.
+ * The meter consists of 6 dots, each representing approximately 16.67% of the total value.
+ * The active dots are filled based on the value provided, and the remaining dots are empty.
+ * The component can also display a label showing the percentage value.
+ *
+ * @param {MeterProps} props - The properties for the Meter component.
+ * @returns {JSX.Element} The rendered Meter component.
+ *
+ * @example
+ * ```jsx
+ * <Meter value={75} />
+ * // Renders a meter with 4 active dots and a label showing "75%"
+ *
+ * <Meter value={50} hideLabel />
+ * // Renders a meter with 3 active dots and no label
+ *
+ * <Meter value={100} className="custom-meter" />
+ * // Renders a meter with all 6 active dots and a custom class name
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-meter--docs} for more details.
+ */
 export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
   /** ***************** calculate active meter dots *******************/
   const activeCount = useMemoDebugger(

package/src/components/navigator/Navigator.tsx

@@ -54,6 +54,28 @@ export interface NavigatorProps
   onNavigate: (dir: -1 | 1) => void;
 }
 
+/**
+ * A component that provides navigation controls for traversing through items.
+ * It includes previous and next buttons, and supports keyboard navigation.
+ *
+ * @param {NavigatorProps} props - The properties for the Navigator component.
+ * @returns {JSX.Element} The rendered Navigator component.
+ *
+ * @example
+ * ```jsx
+ * <Navigator
+ *   className="my-navigator"
+ *   onNavigate={(dir) => console.log(`Navigate ${dir === -1 ? 'previous' : 'next'}`)}
+ *   color="blue"
+ *   length={10}
+ *   current={0}
+ * >
+ *   <span>Current Item: 1</span>
+ * </Navigator>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-navigator--docs} for more details.
+ */
 export const Navigator = ({
   className,
   onNavigate,

package/src/components/panel/Panel.tsx

@@ -101,6 +101,43 @@ export interface PanelProps
   onClose?: () => void;
 }
 
+/**
+ * A component that represents a panel with a header, body, and optional actions.
+ * It supports expandable and collapsible functionality, loading state, and customizable styles.
+ * The panel can be resized and has a fixed position when expanded.
+ * It can be customized with different colors, icons, and behaviors.
+ * This component is useful for displaying content in a structured way, allowing users to interact with it through actions and toggles.
+ * It can be used in various applications where panels are needed, such as dashboards, settings pages, or content management systems.
+ *
+ * @param {PanelProps} props - The properties for the Panel component.
+ * @returns {JSX.Element} The rendered Panel component.
+ *
+ * @example
+ * ```jsx
+ * <Panel
+ *   title="Panel Title"
+ *   icon={CoreIcons.info}
+ *   iconBg="bg-blue-500"
+ *   iconColor="text-white"
+ *   actions={<button>Action</button>}
+ *   expandable
+ *   collapsable
+ *   onExpand={() => console.log("Expanded")}
+ *   onCollapse={() => console.log("Collapsed")}
+ *   onClose={() => console.log("Closed")}
+ *   height="400px"
+ *   width="300px"
+ *   minHeight="200px"
+ *   minWidth="200px"
+ *   maxHeight="600px"
+ *   maxWidth="600px"
+ * >
+ *   <p>This is the content of the panel.</p>
+ * </Panel>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-panel--docs} for more details.
+ */
 export const Panel = ({
   children,
   className,

package/src/components/panel/PanelGroup.tsx

@@ -40,6 +40,30 @@ export interface PanelGroupProps extends ChildrenProp {
   onActiveChange?: (panelId: string) => void;
 }
 
+/**
+ * A component that groups multiple panels together, allowing for one panel to be expanded at a time.
+ * This component allows you to manage a group of panels where only one can be expanded at a time.
+ * It accepts an `activePanel` prop to control which panel is currently expanded,
+ * and an `onActiveChange` callback that is triggered when the active panel changes.
+ * It uses the `Panel` component to render each individual panel within the group.
+ *
+ * @param {PanelGroupProps} props - The properties for the PanelGroup component.
+ * @returns {JSX.Element} The rendered PanelGroup component.
+ *
+ * @example
+ * ```jsx
+ * <PanelGroup
+ *   activePanel="panel1"
+ *   onActiveChange={(panelId) => console.log(`Active panel changed to: ${panelId}`)}
+ * >
+ *   <Panel panelId="panel1" title="Panel 1">Content for Panel 1</Panel>
+ *   <Panel panelId="panel2" title="Panel 2">Content for Panel 2</Panel>
+ *   <Panel panelId="panel3" title="Panel 3">Content for Panel 3</Panel>
+ * </PanelGroup>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-panel--docs} for more details.
+ */
 export const PanelGroup = ({
   children,
   activePanel,

package/src/components/panel/PanelStack.tsx

@@ -49,6 +49,37 @@ export interface PanelStackProps extends CssProp, ChildrenProp {
   onBack?: (panelId: string, nextPanelId: string) => boolean | undefined;
 }
 
+/**
+ * A component that manages a stack of panels, allowing navigation between them.
+ * This component allows you to manage a stack of panels where you can navigate between them.
+ * It accepts an `active` prop to control which panel is currently active,
+ * an `onPanelChange` callback that is triggered when the active panel changes,
+ * and an `onBack` callback to handle navigation to the previous panel in the history.
+ * It uses the `Panel` component to render each individual panel within the stack.
+ * The component maintains a history of panels to allow back navigation,
+ * and it updates the active panel based on user interactions.
+ *
+ * @param {PanelStackProps} props - The properties for the PanelStack component.
+ * @returns {JSX.Element} The rendered PanelStack component.
+ *
+ * @example
+ * ```jsx
+ * <PanelStack
+ *   active="panel1"
+ *   onPanelChange={(panelId) => console.log(`Active panel changed to: ${panelId}`)}
+ *   onBack={(currentPanel, nextPanel) => {
+ *     console.log(`Navigating back from ${currentPanel} to ${nextPanel}`);
+ *     return true; // return false to prevent navigation
+ *   }}
+ * >
+ *   <Panel panelId="panel1" title="Panel 1">Content for Panel 1</Panel>
+ *   <Panel panelId="panel2" title="Panel 2">Content for Panel 2</Panel>
+ *   <Panel panelId="panel3" title="Panel 3">Content for Panel 3</Panel>
+ * </PanelStack>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-panelstack--docs} for more details.
+ */
 export const PanelStack = ({
   active,
   children,

package/src/components/progress/ProgressBar.tsx

@@ -60,6 +60,26 @@ const SizeMap: KeyValue = {
   xl: "2rem",
 };
 
+/**
+ * A component that displays a progress bar indicating the completion percentage of a task or operation.
+ * The progress bar is styled with a background color and a track that fills based on the value provided.
+ * It can also display a label showing the percentage value.
+ * The label can be customized or hidden based on the props provided.
+ *
+ * @param {ProgressProps} props - The properties for the ProgressBar component.
+ * @returns {JSX.Element} The rendered ProgressBar component.
+ *
+ * @example
+ * ```jsx
+ * <ProgressBar value={0.75} size="md" color="primary-500" label="Loading" animate />
+ * // Renders a progress bar with 75% completion, medium size, primary color, and a label "Loading"
+ *
+ * <ProgressBar value={0.5} size="lg" color="success-500" />
+ * // Renders a progress bar with 50% completion, large size, and success color without a label
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-progress--docs} for more details.
+ */
 export const ProgressBar = ({
   value = 0,
   size,

package/src/components/progress/ProgressCircle.tsx

@@ -50,6 +50,25 @@ const SizeMap: KeyValue = {
   xl: "2rem",
 };
 
+/**
+ * A circular progress indicator that visually represents a percentage of completion.
+ * It displays a circular track with a stroke that fills based on the `value` prop.
+ * The component is customizable with size and color props.
+ *
+ * @param {ProgressProps} props - The properties for the ProgressCircle component.
+ * @returns {JSX.Element} - A circular progress indicator.
+ *
+ * @example
+ * ```jsx
+ * <ProgressCircle value={0.75} size="md" color="primary-500" />
+ * // Renders a circular progress indicator with 75% completion, medium size, and primary color.
+ *
+ * <ProgressCircle value={0.5} size="lg" color="secondary-500" />
+ * // Renders a circular progress indicator with 50% completion, large size, and secondary color.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-progress--docs} for more details.
+ */
 export const ProgressCircle = ({
   value = 0,
   size = "sm",

package/src/components/tabpanel/Tab.tsx

@@ -92,6 +92,37 @@ export interface TabProps
   onClick?: (id: string) => CallbackReturn;
 }
 
+/**
+ * A component that represents a tab in a tabbed interface. It can display an icon, label, badge, and actions.
+ * It supports polymorphic rendering, allowing it to be rendered as different HTML elements.
+ * It also supports tooltips, active states, and click handling.
+ *
+ * @param {TabProps} props - The properties for the Tab component.
+ * @returns {JSX.Element} The rendered Tab component.
+ *
+ * @example
+ * ```jsx
+ * <Tab
+ *   id="tab1"
+ *   label="Tab 1"
+ *   icon="home"
+ *   iconBg="bg-blue-500"
+ *   iconColor="text-white"
+ *   badge="New"
+ *   onClick={(id) => console.log(`Tab clicked: ${id}`)}
+ *   onClose={() => console.log("Tab closed")}
+ *   active={true}
+ *   actions={<button>Action</button>}
+ *   color="primary"
+ *   tooltip="This is a tab"
+ *   activeClassName="bg-blue-100"
+ * />
+ * // Renders a tab with label "Tab 1", home icon, blue background, white text, badge "New",
+ * // and an action button. The tab is active and has a tooltip.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-tabpanel--docs} for more details.
+ */
 export const Tab = <Tag extends React.ElementType = "button">({
   ref,
   as,

package/src/components/tabpanel/TabPanel.tsx

@@ -84,6 +84,39 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
 
 // TODO: implement append/prepend tab-bar items
 
+/**
+ * A component that provides a tabbed interface for displaying content.
+ * It allows users to switch between different tabs, each containing its own content.
+ * It supports various orientations, justify options, and variants for the tab header.
+ * It also provides hooks for handling tab changes before and after they occur.
+ * This component is useful for organizing content into separate sections that can be easily navigated by the user.
+ * It can be customized with different styles and behaviors to fit the needs of the application.
+ *
+ * @param {TabPanelProps} props - The properties for the TabPanel component.
+ * @returns {JSX.Element} The rendered TabPanel component.
+ *
+ * @example
+ * ```jsx
+ * <TabPanel
+ *   orientation="top"
+ *   activeTab="tab1"
+ *   justify="start"
+ *   variant="solid"
+ *   tabFlex={true}
+ *   onBeforeChange={(nextTab, currentTab) => {
+ *     console.log(`Switching from ${currentTab} to ${nextTab}`);
+ *     return true; // or false to prevent change
+ *   }}
+ *   onChange={(id) => console.log(`Active tab changed to: ${id}`)}
+ * >
+ *   <Tab id="tab1" label="Tab 1">Content for Tab 1</Tab>
+ *   <Tab id="tab2" label="Tab 2">Content for Tab 2</Tab>
+ *   <Tab id="tab3" label="Tab 3">Content for Tab 3</Tab>
+ * </TabPanel>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-tabpanel--docs} for more details.
+ */
 export const TabPanel = ({
   children,
   headerClassName,

package/src/context/Global.tsx

@@ -232,13 +232,36 @@ export const ApplicationProvider: FC<GlobalProps> = ({
 export const useGlobals = () => useContext(GlobalContext);
 
 /**
- * global application context
+ * Hook to access the global application context.
+ * This hook provides access to the global context values, including the current locale, calendar, and color scheme.
+ *
+ * @returns {GlobalContextType} The global context values excluding the error element.
+ *
+ * @example
+ * ```jsx
+ * const { changeLocale, currentLocale, toggleColorScheme } = useApplicationContext();
+ * ```
  */
 export const useApplicationContext = () => {
   const { errorElement, ...rest } = useContext(GlobalContext);
   return rest;
 };
 
+/**
+ * Hook to access the notification manager from the global context.
+ * This hook provides methods to show alerts, errors, messages, and toasts.
+ * It returns a reference to the notification manager, which can be used to display notifications in the application.
+ *
+ * @returns {NotificationManagerRef} The notification manager reference.
+ *
+ * @example
+ * ```jsx
+ * const notificationService = useNotificationService();
+ * notificationService.showMessage("Hello World");
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-notifications--notifications} for more details on available methods.
+ */
 export const useNotificationService = () => {
   const { notificationManager } = useContext(GlobalContext);
   return notificationManager ?? {};

package/src/core/aside/Aside.tsx

@@ -105,7 +105,44 @@ export interface AsideProps
 }
 
 /**
- * Side panel
+ * A sidebar component that can be collapsed, resized, and has a flyout feature.
+ * It supports a title, icon, actions, and loading state.
+ * It can be aligned to the start or end of the page.
+ *
+ * @param {AsideProps} props - The properties for the Aside component.
+ * @returns {JSX.Element} The rendered Aside component.
+ *
+ * @example
+ * ```jsx
+ * <Aside
+ *   title="Sidebar Title"
+ *   icon={CoreIcons.menu}
+ *   iconBg="bg-gray-200"
+ *   iconColor="text-gray-800"
+ *   rtlFlip={true}
+ *   className="custom-aside"
+ *   bodyClassName="custom-aside-body"
+ *   headerClassName="custom-aside-header"
+ *   resizeable={true}
+ *   flyout={true}
+ *   onFlyout={() => console.log("Flyout triggered")}
+ *   collapsed={false}
+ *   collapsable={true}
+ *   onCollapse={() => console.log("Collapsed toggled")}
+ *   actions={<button>Action</button>}
+ *   loading={false}
+ *   align="start"
+ *   width="20rem"
+ *   minWidth="2rem"
+ *   maxWidth="30vw"
+ *   data-testid="aside-test"
+ *   data-test-value="aside-value"
+ * >
+ *   <Content>This is the content of the aside.</Content>
+ * </Aside>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--aside} for more details.
  */
 export const Aside = ({
   children,
@@ -273,7 +310,7 @@ export const Aside = ({
           {...resizeHandleProps}
           className={classNames(
             "fabric-asideResizer",
-            "before:absolute before:inset-0 before:w-1 before:top-1/2 before:-translate-y-1/2 before:transition-all",
+            "before:absolute before:inset-0 before:w-1 before:top-1/2 before:-translate-y-1/2 before:transition-all before:delay-150",
           )}
         />
       )}

package/src/core/boundary/ErrorBoundary.tsx

@@ -91,7 +91,23 @@ const ErrorStack = ({ error, stack }: KeyValue) => {
 };
 
 /**
- * An error boundary wrapper higher-order component designed to provide consistent error display across the application will trap runtime errors
+ * ErrorBoundary component to catch JavaScript errors anywhere in the child component tree,
+ * log those errors, and display a fallback UI.
+ * It can also display a custom error element if provided.
+ * This component is useful for preventing the entire application from crashing
+ * when an error occurs in a part of the component tree.
+ * It can be used to wrap any part of the application.
+ * It supports custom error display components and provides a default error message.
+ * It also conditionally displays the error stack trace in development mode.
+ *
+ * @example
+ * ```jsx
+ * <ErrorBoundary errorElement={CustomErrorComponent}>
+ *   <YourComponent />
+ * </ErrorBoundary>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--error-boundary}
  */
 export class ErrorBoundary extends Component<
   {

package/src/core/content/Content.tsx

@@ -51,7 +51,12 @@ export interface ContentProps
 }
 
 /**
- * Scrollable content element
+ * Content component that wraps children in a section element.
+ * It uses a resize observer to handle resizing and a debounced scroll handler.
+ * It also includes an error boundary to catch any errors in the children.
+ *
+ * @param {ContentProps} props - The properties for the Content component.
+ * @returns A section element containing the children wrapped in an error boundary.
  */
 export const Content = ({
   ref,

package/src/core/headfoot/HeadFoot.tsx

@@ -72,10 +72,50 @@ const HeadFoot = ({
   );
 };
 
+/**
+ * Header component that wraps children in a header element.
+ * It uses the HeadFoot component to handle layout and styling.
+ * It accepts properties for direction, alignment, and justification,
+ * allowing for flexible layout configurations.
+ * The `as` prop is set to "header" to render the element as a header.
+ * The `area` prop is set to "head" to indicate that this is a header area.
+ * It can be used to create a consistent header layout across an application.
+ *
+ * @param {HeadFootProps} props - The properties for the Header component.
+ * @returns A header element containing the children wrapped in the HeadFoot component.
+ *
+ * @example
+ * ```jsx
+ * <Header className="custom-header" dir="ltr">
+ *   <h1>Header content goes here</h1>
+ * </Header>
+ * ```
+ */
 export const Header = (props: HeadFootProps) => (
   <HeadFoot as="header" area="head" {...props} />
 );
 
+/**
+ * Footer component that wraps children in a footer element.
+ * It uses the HeadFoot component to handle layout and styling.
+ * It accepts properties for direction, alignment, and justification,
+ * allowing for flexible layout configurations.
+ * The `as` prop is set to "footer" to render the element as a footer.
+ * The `area` prop is set to "foot" to indicate that this is a footer area.
+ * It can be used to create a consistent footer layout across an application.
+ * * The Footer component is designed to be flexible and can be styled with custom classes.
+ * It supports both default and flex layouts, allowing for alignment and justification of its children.
+ *
+ * @param {HeadFootProps} props - The properties for the Footer component.
+ * @returns A footer element containing the children wrapped in the HeadFoot component.
+ *
+ * @example
+ * ```jsx
+ * <Footer className="custom-footer" dir="ltr">
+ *   <p>Footer content goes here</p>
+ * </Footer>
+ * ```
+ */
 export const Footer = (props: HeadFootProps) => (
   <HeadFoot as="footer" area="foot" {...props} />
 );