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

package/dist/types/components/button/ToggleButtonGroup.d.ts

@@ -1,9 +1,6 @@
-/// <reference types="react" />
 import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type SizeType } from "../../types";
 import { type ButtonProps } from "./Button";
-interface BaseProps extends CssProp, AriaProps, ChildrenProp<React.ReactElement<ButtonProps & {
-    value: string;
-}>> {
+interface BaseProps extends CssProp, AriaProps {
     /**
      * vertical orientation
      */
@@ -33,24 +30,55 @@ interface BaseProps extends CssProp, AriaProps, ChildrenProp<React.ReactElement<
      */
     fullWidth?: boolean;
 }
-export type ToggleButtonGroupProps = BaseProps & ({
+export type ToggleButtonGroupValueProps<T> = {
     /**
      *
      */
-    value: string;
+    value: T;
     /**
      * change handler
      */
-    onChange?: (value: string) => void;
+    onChange?: (value: T | null) => void;
 } | {
     /**
      *
      */
-    value: string[];
+    value: T[];
     /**
      * change handler
      */
-    onChange?: (value: string[]) => void;
-});
-export declare const ToggleButtonGroup: ({ vertical, className, children, variant, rounded, disabled, fullWidth, color, size, value, onChange, ...aria }: ToggleButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+    onChange?: (value: T[] | null) => void;
+};
+export type ToggleButtonGroupProps<T> = BaseProps & ChildrenProp<React.ReactElement<ButtonProps & {
+    value: T;
+}>> & ToggleButtonGroupValueProps<T>;
+/**
+ * A component that groups toggle buttons together, allowing for consistent styling and behavior across multiple toggle buttons.
+ * It supports vertical orientation, various button styles, and can handle properties like size, color, and disabled state.
+ * This component is useful for creating toggle button groups that maintain a uniform appearance and functionality,
+ * such as toggle switches, selection groups, or multi-select options.
+ *
+ * @param {ToggleButtonGroupProps} props - The properties for the ToggleButtonGroup component.
+ * @returns {JSX.Element} The rendered ToggleButtonGroup component.
+ *
+ * @example
+ * ```jsx
+ * <ToggleButtonGroup
+ *   value={selectedValues}
+ *   onChange={(newValues) => setSelectedValues(newValues)}
+ *   variant="outline"
+ *   color="primary"
+ *   size="md"
+ *   rounded
+ *   fullWidth
+ * >
+ *   <Button value="option1">Option 1</Button>
+ *   <Button value="option2">Option 2</Button>
+ *   <Button value="option3">Option 3</Button>
+ * </ToggleButtonGroup>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-togglebuttongroup--docs} for more details.
+ */
+export declare const ToggleButtonGroup: <T extends AnyObject = string>({ vertical, className, children, variant, rounded, disabled, fullWidth, color, size, value, onChange, ...aria }: ToggleButtonGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/callout/Callout.d.ts

@@ -1,13 +1,13 @@
-import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
+import { type AriaProps, type ChildrenProp, type ColorState, type CssProp, type TestProps } from "../../types";
 export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProps {
     /**
      * callout color
      */
-    color?: ColorType | PaletteType;
+    color?: ColorState | "none";
     /**
      * legend title
      */
-    legend?: string;
+    legend?: string | React.ReactElement;
     /**
      * callout icon
      */
@@ -25,4 +25,30 @@ export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProp
      */
     onClose?: () => void;
 }
+/**
+ * A component that displays a callout box with an optional title, icon, and legend.
+ * It can be used to highlight important information, warnings, or notices.
+ * The callout can be styled with different colors and border styles, and it supports a close action.
+ * This component is useful for drawing attention to specific content within a page or application,
+ * such as alerts, notifications, or important messages.
+ *
+ * @param {CalloutProps} props - The properties for the Callout component.
+ * @returns {JSX.Element} The rendered Callout component.
+ *
+ * @example
+ * ```jsx
+ * <Callout
+ *   color="primary"
+ *   legend="Important Notice"
+ *   title="Attention Required"
+ *   icon="info"
+ *   onClose={() => console.log("Callout closed")}
+ * >
+ *   This is an important message that requires your attention.
+ * </Callout>
+ * // Renders a callout box with a primary color, an icon, a title, and a close button.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-callout--docs} for more details.
+ */
 export declare const Callout: ({ children, color, legend, title, icon, border, onClose, className, ...aria }: CalloutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/card/Card.d.ts

@@ -1,8 +1,8 @@
-import { type MouseEventHandler } from "react";
+import { type DragEvent, type MouseEventHandler } from "react";
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
-import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
-export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
+import { type PolymorphicProps, type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
+interface BaseProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
     /**
      * apply flex fill styling
      */
@@ -11,6 +11,10 @@ export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDi
      * click handler
      */
     onClick?: MouseEventHandler;
+    /**
+     * drag start handler
+     */
+    onDragStart?: (event: DragEvent, dragKey: string, dragData?: KeyValue) => void;
     /**
      * body css classname(s)
      */
@@ -36,4 +40,40 @@ export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDi
      */
     dragData?: KeyValue;
 }
-export declare const Card: ({ children, className, bodyClassName, selected, selectedRibbon, onClick, flex, draggable, dragKey, dragData, ref, ...aria }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export type CardProps<Tag extends React.ElementType = "div"> = BaseProps & PolymorphicProps<Tag>;
+/**
+ * A component that displays a card with a header, body, and footer. It can be used to display content in a structured format.
+ * It supports various features such as click handling, drag-and-drop functionality, and customizable styles.
+ * The Card component is designed to be flexible and can be used in various contexts, such as displaying user profiles, product information, or any other content that benefits from a card layout.
+ * The component accepts children that can include a Header, body content, and a Footer.
+ * It also supports additional properties for styling, accessibility, and interaction.
+ * It can be styled with custom CSS classes and supports features like selection indication and drag-and-drop functionality.
+ *
+ * @param {CardProps} props - The properties for the Card component.
+ * @returns {JSX.Element} The rendered Card component.
+ *
+ * @example
+ * ```jsx
+ * <Card
+ *   className="my-custom-class"
+ *   bodyClassName="my-body-class"
+ *   selected={true}
+ *   selectedRibbon={true}
+ *   onClick={() => console.log("Card clicked")}
+ *   onDragStart={(event, key, data) => console.log("Drag started", key, data)}
+ *   flex={true}
+ *   draggable={true}
+ *   dragKey="my-drag-key"
+ *   dragData={{ id: 1, name: "Card Data" }}
+ *   aria-label="My Card"
+ * >
+ *   <Header>Card Header</Header>
+ *   <div>Card Body Content</div>
+ *   <Footer>Card Footer</Footer>
+ * </Card>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-card--docs} for more details.
+ */
+export declare const Card: <Tag extends React.ElementType = "div">({ children, className, bodyClassName, selected, selectedRibbon, onClick, onDragStart, flex, draggable, dragKey, dragData, ref, as, ...aria }: CardProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/card/CardCover.d.ts

@@ -13,4 +13,29 @@ export interface CardCoverProps extends CssProp, AriaProps, ChildrenProp {
      */
     justify?: "start" | "center" | "end";
 }
+/**
+ * A cover component for cards that can contain media and content.
+ * It allows for flexible layout options and supports different color schemes.
+ * It can be used to create visually appealing card layouts with media content.
+ *
+ * @param {CardCoverProps} props - The properties for the CardCover component.
+ * @returns {JSX.Element} The rendered CardCover component.
+ *
+ * @example
+ * ```jsx
+ * <CardCover
+ *   height={200}
+ *   colorScheme="light"
+ *   justify="center"
+ *   className="my-custom-class"
+ *   aria-label="Card Cover"
+ * >
+ *   <Image src="image.jpg" alt="Card Image" />
+ *   <div>Card Content</div>
+ * </CardCover>
+ * // Renders a card cover with a height of 200px, light color scheme, centered content, and a custom class name.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-card--docs} for more details.
+ */
 export declare const CardCover: ({ className, children, height, justify, colorScheme, ...aria }: CardCoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/card/FlipContent.d.ts

@@ -0,0 +1,28 @@
+import { type ChildrenProp, type RefProp } from "../../types";
+export interface FlipContentRef {
+    flipCard: () => void;
+}
+export interface Props extends ChildrenProp, RefProp<FlipContentRef> {
+}
+/**
+ * A component that allows flipping between front and back content.
+ * It uses a ref to control the flipping action, which toggles the visibility of the front and back content.
+ * The component accepts children elements, which should be valid React elements representing the front and back content.
+ * The front content is expected to be the first child, and the back content is expected to be the second child.
+ * The component applies specific classes to the children based on their position (front or back) and manages the flipping state internally.
+ * The `flipCard` method can be called to toggle the visibility of the back content.
+ *
+ * @param {Props} props - The properties for the FlipContent component.
+ * @returns {JSX.Element} The rendered FlipContent component.
+ *
+ * @example
+ * ```jsx
+ * <FlipContent ref={flipRef}>
+ *   <div className="front">Front Content</div>
+ *   <div className="back">Back Content</div>
+ * </FlipContent>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-flipcontent--docs}
+ */
+export declare const FlipContent: ({ ref, children }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/chip/Chip.d.ts

@@ -1,14 +1,15 @@
 import { type ReactElement } from "react";
-import { type AriaProps, type ChildProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
-export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, ChildProp<string | ReactElement>, RefProp<HTMLDivElement> {
+import { type AriaProps, type ChildProp, type ColorType, type CssProp, type PaletteType, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
+import { type IconProps } from "../icon/Icon";
+export interface ChipProps extends CssProp, AriaProps, TestProps, ChildProp<string | ReactElement>, RefProp<HTMLDivElement> {
     /**
      * chip size
      */
-    size?: SizeType;
+    size?: SizeType | number | string;
     /**
      * chip color (CSS color / tailwind color)
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * chip styling
      */
@@ -17,10 +18,18 @@ export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, Chi
      * full rounded edges
      */
     rounded?: boolean;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * disabled state
      */
     disabled?: boolean;
+    /**
+     * prevent click default, useful when component is within a `a` link
+     */
+    preventDefault?: boolean;
     /**
      * prevent click propagation
      */
@@ -38,4 +47,24 @@ export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, Chi
      */
     onRemove?: React.MouseEventHandler;
 }
-export declare const Chip: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">({ ref, children, className, size, color, variant, icon, iconBg, iconColor, rtlFlip, disabled, onClick, onIconClick, onRemove, rounded, stopPropagation, as, ...aria }: ChipProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that represents a small block of information, often used for tags, categories, or actions.
+ * It allows customization of size, color, variant, and includes optional icon and remove functionality.
+ * It supports various properties for styling and interaction, including click handlers and disabled state.
+ * It can be used in various contexts, such as filtering options, displaying tags, or representing user actions.
+ * It can be styled with custom CSS classes and supports features like rounded edges and click handling.
+ * It can also include an icon and a remove button, making it versatile for different use cases.
+ *
+ * @param {ChipProps} props - The properties for the Chip component.
+ * @returns {JSX.Element} The rendered Chip component.
+ *
+ * @example
+ * ```jsx
+ * <Chip color="primary" size="md" className="my-chip">
+ *   Example Chip
+ * </Chip>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-chip--docs} for more details.
+ */
+export declare const Chip: <Tag extends React.ElementType = "div">({ ref, children, className, size, color, variant, icon, disabled, onClick, onIconClick, onRemove, rounded, preventDefault, stopPropagation, as, ...aria }: ChipProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/collapsable/Collapsable.d.ts

@@ -1,8 +1,8 @@
 import { type RefObject } from "react";
 import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
 interface CollapsableRef {
-    button: RefObject<HTMLElement>;
-    body: RefObject<HTMLElement>;
+    button: RefObject<HTMLElement | null>;
+    body: RefObject<HTMLElement | null>;
     open: boolean;
 }
 export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp<CollapsableRef>, ChildrenProp {
@@ -47,5 +47,31 @@ export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp
      */
     onClose?: () => void;
 }
+/**
+ * A component that can be expanded or collapsed to show or hide content.
+ * It is useful for organizing content in a way that allows users to focus on the information they are interested in.
+ * It supports custom icons for open and closed states, alignment options, and can be made sticky.
+ * This component is ideal for creating accordions, expandable panels, or sections that can be toggled by the user.
+ *
+ * @param {CollapsableProps} props - The properties for the Collapsable component.
+ * @returns {JSX.Element} The rendered Collapsable component.
+ *
+ * @example
+ * ```jsx
+ * <Collapsable
+ *   iconAlign="start"
+ *   iconOpen="icon-[mdi--chevron-down]"
+ *   iconClosed="icon-[mdi--chevron-right]"
+ *   open={true}
+ *   onOpen={() => console.log("Opened")}
+ *   onClose={() => console.log("Closed")}
+ * >
+ *   <div>Header Content</div>
+ *   <div>Body Content</div>
+ * </Collapsable>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-collapsable--docs} for more details.
+ */
 export declare const Collapsable: ({ ref, disabled, className, bodyClassName, headerClassName, children, iconAlign, stickyHeader, iconClosed, iconOpen, open, onClose, onOpen, ...aria }: CollapsableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/divider/Divider.d.ts

@@ -1,20 +1,43 @@
-import { type CssProp, type ChildProp, type ColorType, type PaletteType } from "../../types";
+import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../../types";
 export interface DividerProps extends CssProp, Partial<ChildProp> {
-    /**
-     * apply text bg
-     */
-    fill?: boolean;
     /**
      * vertical rule
      */
     vertical?: boolean;
+    /**
+     * divider label classname(s)
+     */
+    labelClassName?: string;
     /**
      * rule color
      */
-    color?: ColorType | PaletteType | "tint";
+    color?: ColorType | PaletteType | string;
     /**
      * text alignment
      */
     align?: "start" | "end" | "center";
+    /**
+     * divider style
+     */
+    style?: "solid" | "dashed" | "dotted";
 }
-export declare const Divider: ({ children, color, vertical, fill, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that represents a visual divider between content.
+ * It can be used to separate sections of content, with optional text labels.
+ * It supports both horizontal and vertical orientations, customizable colors,
+ * styles, and alignment options.
+ *
+ * @param {DividerProps} props - The properties for the Divider component.
+ * @returns {JSX.Element} The rendered Divider component.
+ *
+ * @example
+ * ```jsx
+ * <Divider color="primary" align="center" style="dashed">
+ *   Divider Text
+ * </Divider>
+ * // Renders a horizontal divider with primary color, centered text, and dashed style.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-divider--docs} for more details.
+ */
+export declare const Divider: ({ children, color, vertical, labelClassName, style, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/dropdown/Dropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type Placement } from "@floating-ui/react";
 import { type ChildProp, type RefProp } from "../../types";
 export interface DropdownProps extends RefProp {
@@ -44,7 +43,47 @@ export interface DropdownProps extends RefProp {
      */
     onClose?: () => void;
 }
+/**
+ * A component that displays a dropdown menu with an anchor and a panel.
+ * It supports various features such as placement, arrow display, click handling,
+ * and event handling for opening and closing the dropdown.
+ *
+ * @param props - Dropdown properties
+ * @returns JSX Element
+ *
+ * @example
+ * ```jsx
+ * <Dropdown
+ *   placement="bottom"
+ *   showArrow
+ *   closeOnClick
+ *   fitToParent
+ *   onOpen={() => console.log("Dropdown opened")}
+ *   onClose={() => console.log("Dropdown closed")}
+ * >
+ *   <button>Open Dropdown</button>
+ *   <div>
+ *     <DropdownDismiss>
+ *       <button>Dismiss</button>
+ *     </DropdownDismiss>
+ *     <p>Dropdown Content</p>
+ *   </div>
+ * </Dropdown>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-dropdown--docs} for more details.
+ * @see {@link https://floating-ui.com/docs/react} for more details on Floating UI.
+ */
 export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that allows dismissing the dropdown when clicked.
+ * It can be used inside the dropdown panel to provide a dismiss area.
+ * It supports an optional `dismiss` prop to control whether the dropdown should be dismissed on click.
+ *
+ * @param children - The children elements to render inside the dismiss area.
+ * @param dismiss - Whether to dismiss the dropdown on click (default: true).
+ * @returns JSX Element
+ */
 export declare const DropdownDismiss: ({ children, dismiss, }: ChildProp & {
     dismiss?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/dropdown/DropdownTool.d.ts

@@ -1,5 +1,30 @@
 import { type ChildProp, type CssProp } from "../../types";
 import { type DropdownProps } from "./Dropdown";
+/**
+ * A dropdown component that displays an icon and tool menu.
+ * It can be used to create a dropdown menu that appears when the icon is clicked or hovered over.
+ * This component is useful for creating toolbars or action menus in a user interface.
+ * It accepts children as menu items and can be styled with additional CSS classes.
+ *
+ * @param {ChildProp} children - The content to be displayed inside the dropdown.
+ * @param {CssProp} className - Additional CSS classes to apply to the dropdown.
+ * @param {string} icon - The icon to be displayed in the dropdown.
+ * @param {boolean} groupHover - If true, the dropdown will only be visible when the parent group is hovered.
+ * @param {DropdownProps} props - Additional properties for the dropdown.
+ * @returns {JSX.Element} The rendered DropdownTool component.
+ *
+ * @example
+ * ```jsx
+ * <DropdownTool
+ *   icon="caret-down"
+ *   groupHover={true}
+ *   className="my-dropdown"
+ * >
+ *   <MenuItem>Item 1</MenuItem>
+ *   <MenuItem>Item 2</MenuItem>
+ * </DropdownTool>
+ * ```
+ */
 export declare const DropdownTool: ({ children, className, groupHover, icon, ...props }: ChildProp & CssProp & Omit<DropdownProps, "children"> & {
     icon?: string;
     /**

package/dist/types/components/empty/EmptyContent.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+import { type ChildrenProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
 export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenProp> {
     /**
      * empty title
@@ -17,5 +16,35 @@ export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenP
      * empty icon
      */
     icon?: string | React.ReactElement;
+    /**
+     * icon color
+     */
+    iconColor?: ColorType | PaletteType;
 }
-export declare const EmptyContent: ({ children, title, message, icon, className, size, ...test }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that displays a message and an optional icon when there is no content to show.
+ * It allows customization of title, message, icon, size, and additional CSS properties.
+ * It can also accept children elements for additional actions or information.
+ * This component is useful for displaying a friendly message when data is not available,
+ * such as in empty states of lists, tables, or other content areas.
+ *
+ * @param {EmptyContentProps} props - The properties for the EmptyContent component.
+ * @returns {JSX.Element} The rendered EmptyContent component.
+ *
+ * @example
+ * ```jsx
+ * <EmptyContent
+ *   title="No Data Available"
+ *   message="Please check back later."
+ *   icon="empty"
+ *   iconColor="tint-700"
+ *   size="md"
+ * >
+ *   <Button onClick={() => console.log("Action clicked")}>Retry</Button>
+ * </EmptyContent>
+ * // Renders an empty content area with a title, message, icon, and a button for retrying the action.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-emptycontent--docs} for more details.
+ */
+export declare const EmptyContent: ({ children, title, message, icon, className, size, iconColor, ...test }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/icon/Icon.d.ts

@@ -1,18 +1,21 @@
-/// <reference types="react" />
-import { type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
-export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
+import { type AriaProps, type ColorType, type CssProp, type PaletteType, type RefProp, type SizeType, type TestProps } from "../../types";
+export interface Props extends CssProp, AriaProps, RefProp, TestProps {
     /**
      * svg path / webfont className / 1-4 letter text
      */
-    icon: string;
+    icon: string | JSX.Element;
+    /**
+     * icon image source URL, if failed to load then shows icon
+     */
+    iconSrc?: string;
     /**
      * background color (CSS color / tailwind color)
      */
-    bg?: ColorType | string;
+    bg?: ColorType | PaletteType | string;
     /**
      * icon color (CSS color / tailwind color)
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * flip icon in rtl
      */
@@ -33,12 +36,41 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
      * apply animation
      */
     animate?: "spin" | "pulse" | "bounce";
+    disabled?: boolean;
     /**
      * click handler
      */
     onClick?: React.MouseEventHandler;
 }
+export type IconProps = string | JSX.Element | Pick<Props, "icon" | "iconSrc" | "bg" | "color" | "size" | "rtlFlip" | "viewBox" | "rounded" | "animate">;
+export declare const getIconProps: (props: IconProps) => Props;
 /**
- * An icon is a display component for svg icon path / image
+ * A versatile icon component that supports SVG paths, webfont icons, and text icons.
+ * It can be styled with background color, icon color, size, and animations.
+ * It also supports RTL flipping and rounded corners.
+ * The component can be used as a standalone icon or as part of other components.
+ * It accepts various properties to customize its appearance and behavior.
+ * These include `bg`, `color`, `size`, `rtlFlip`, `animate`, and `rounded`.
+ *
+ * @param {IconProps} props - The properties for the Icon component.
+ * @returns {JSX.Element} The rendered Icon component.
+ *
+ * @example
+ * ```jsx
+ * <Icon
+ *   icon="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+ *   bg="bg-blue-500"
+ *   color="text-white"
+ *   size="lg"
+ *   rtlFlip={true}
+ *   animate="spin"
+ *   rounded={true}
+ *   onClick={() => console.log("Icon clicked")}
+ * />
+ * // Renders an icon with a SVG path, blue background, white text color,
+ * // large size, RTL flip, spin animation, rounded corners, and a click handler.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-icon--docs} for more details.
  */
-export declare const Icon: ({ ref, icon, bg, color, size, rtlFlip, animate, rounded, viewBox, className, onClick, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ ref, icon, iconSrc, bg, color, size, rtlFlip, animate, rounded, disabled, viewBox, className, onClick, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/index.d.ts

@@ -1,5 +1,5 @@
 export { ActionLabel } from "./actionLabel/ActionLabel";
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Skeleton, Loading, } from "./animations/Animations";
+export { LoadingBars, AnimationIndicator, LoadingSpinner, LoadingLine, Skeleton, } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";
 export { Badge, getBadgeProps } from "./badge/Badge";
@@ -11,13 +11,14 @@ export { ToggleButtonGroup } from "./button/ToggleButtonGroup";
 export { Callout } from "./callout/Callout";
 export { Card } from "./card/Card";
 export { CardCover } from "./card/CardCover";
+export { FlipContent, type FlipContentRef } from "./card/FlipContent";
 export { Chip } from "./chip/Chip";
 export { Collapsable } from "./collapsable/Collapsable";
 export { Divider } from "./divider/Divider";
 export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
 export { DropdownTool } from "./dropdown/DropdownTool";
 export { EmptyContent } from "./empty/EmptyContent";
-export { Icon } from "./icon/Icon";
+export { Icon, getIconProps } from "./icon/Icon";
 export { Image, Video } from "./media/Media";
 export { ContextMenu } from "./menu/ContextMenu";
 export { Menu } from "./menu/Menu";