@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/dist/types/components/menu/Menu.d.ts

@@ -1,2 +1,26 @@
-import { type MenuProps } from "./types";
-export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;
+import type { MenuProps } from "./types";
+/**
+ * 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.
+ *
+ * @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>
+ * ```
+ */
+export declare function Menu(props: MenuProps): import("react").JSX.Element;

package/dist/types/components/menu/MenuItem.d.ts

@@ -1,4 +1,19 @@
-/// <reference types="react" />
-import { type PolymorphicProps } from "../../types";
-import { type MenuItemProps } from "./types";
-export declare const MenuItem: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+import type { PolymorphicProps } from "../../types";
+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.
+ *
+ * @example
+ * ```jsx
+ * <MenuItem
+ *   label="Settings"
+ *   icon="settings"
+ *   onClick={() => console.log("Settings clicked")}
+ *   hotKey="Ctrl+S"
+ *   badge={{ count: 3, color: "red" }}
+ * />
+ * ```
+ */
+export declare function MenuItem<Tag extends React.ElementType = "button">({ as, label, color, className, icon, labelRender, appendLabel, altIcon, id, active, disabled, onClick, badge, hotKey, tabIndex, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>): import("react").JSX.Element;

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

@@ -1,6 +1,8 @@
-import { type ElementType, type MouseEvent } from "react";
-import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorType, type CssProp, type IconProps, type TestProps } from "../../types";
-export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps {
+import type { Hotkey } from "@tanstack/react-hotkeys";
+import type { CallbackReturn, ChildrenProp, ColorBase, CssProp, TestProps } from "../../types";
+import type { BadgeType } from "../badge/Badge";
+import type { IconProps } from "../icon/Icon";
+export interface MenuItemProps extends CssProp, TestProps {
     /**
      * menu id passed via menu.onClick
      */
@@ -9,14 +11,19 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps
      * item label
      */
     label: string;
+    labelRender?: React.ReactElement;
     /**
      * append label badge text
      */
-    appendLabel?: string | false;
+    appendLabel?: React.ReactElement | string | number | false;
     /**
      * menu color
      */
-    color?: ColorType;
+    color?: ColorBase;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * item active
      */
@@ -32,7 +39,7 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps
     /**
      * keyboard shortcut label
      */
-    hotKey?: string;
+    hotKey?: Hotkey | Hotkey[];
     /**
      * alternate icon align end (caret, arrow)
      */
@@ -40,20 +47,22 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps
     /**
      * click handler
      */
-    onClick?: (e: MouseEvent) => CallbackReturn;
+    onClick?: (e: React.MouseEvent) => CallbackReturn;
 }
 export interface MenuRootProps extends CssProp {
     label?: never;
     minimal?: boolean;
-    menuClassName?: never;
+    /**
+     * use this create a dropdown button within menu-item
+     */
+    forDropdown?: boolean;
     onClick?: (id: string) => CallbackReturn;
 }
-export interface MenuInnerProps extends MenuItemProps {
+export interface MenuInnerProps extends Omit<MenuItemProps, "onClick"> {
     label: string;
     minimal?: never;
-    /**
-     * floating menu className
-     */
-    menuClassName?: string;
+    trigger?: "hover" | "click";
+    forDropdown?: boolean;
+    onClick?: (id: string) => CallbackReturn;
 }
-export type MenuProps = ChildrenProp<ElementType<MenuItemProps>> & (MenuRootProps | MenuInnerProps);
+export type MenuProps = ChildrenProp<MenuItemProps> & (MenuRootProps | MenuInnerProps);

package/dist/types/components/meter/Meter.d.ts

@@ -1,5 +1,5 @@
-import { type AriaProps, type CssProp, type TestProps } from "../../types";
-export interface MeterProps extends CssProp, AriaProps, TestProps {
+import type { CssProp, CustomColors, TestProps } from "../../types";
+export interface MeterProps extends CssProp, TestProps {
     /**
      * meter value (0-100)
      */
@@ -8,5 +8,25 @@ export interface MeterProps extends CssProp, AriaProps, TestProps {
      * hide value label
      */
     hideLabel?: boolean;
+    color?: CustomColors;
 }
-export declare const Meter: ({ value, hideLabel, className, ...aria }: MeterProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @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
+ * ```
+ */
+export declare function Meter({ value, hideLabel, color, className, ...props }: MeterProps): import("react").JSX.Element;

package/dist/types/components/modal/Modal.d.ts

@@ -0,0 +1,52 @@
+import type { CallbackReturn, ChildrenProp, CssPropWithMap, TestProps } from "../../types";
+import type { TitlebarProps } from "../titlebar/Titlebar";
+export interface ModalProps<T> extends TestProps, ChildrenProp, TitlebarProps, CssPropWithMap<{
+    root: string;
+    body?: string;
+    titlebar?: string;
+    title?: string;
+    icon?: string;
+}> {
+    /**
+     * show loading indicator
+     */
+    loading?: boolean;
+    /**
+     * modal size
+     */
+    size?: "sm" | "md" | "lg" | "xl" | "screen";
+    /**
+     * height
+     */
+    height?: string | number;
+    /**
+     * width
+     */
+    width?: string | number;
+    /**
+     * minimum height
+     */
+    minHeight?: string | number;
+    /**
+     * minimum width
+     */
+    minWidth?: string | number;
+    /**
+     * portal root element
+     */
+    root?: HTMLElement;
+    /**
+     * hide mask background
+     */
+    hideMask?: boolean;
+    closeOnEscape?: boolean;
+    /**
+     * close handler
+     */
+    onClose?: (args: T | null) => void;
+    /**
+     * before close handler, return false to prevent close
+     */
+    onBeforeClose?: (args: T | null) => CallbackReturn;
+}
+export declare function Modal<T extends AnyObject = AnyObject>({ icon, className, classNames, title, actions, onClose, onBeforeClose, children, loading, root, size, hideMask, width, height, minHeight, minWidth, closeOnEscape, ...props }: ModalProps<T>): import("react").JSX.Element;

package/dist/types/components/navigator/Navigator.d.ts

@@ -1,12 +1,38 @@
-import { type AriaProps, type ColorType, type CssProp, type TestProps } from "../../types";
-export interface NavigatorProps extends CssProp, AriaProps, TestProps {
+import type { ChildProp, CssProp, CustomColors, TestProps } from "../../types";
+export interface NavigatorProps extends CssProp, TestProps, Partial<ChildProp> {
+    /**
+     * item list length (ignore to enable infinite navigation)
+     */
+    length?: number;
+    /**
+     * current item index (ignore to enable infinite navigation)
+     */
+    current?: number;
+    disableKeyHandlers?: boolean;
     /**
      * navigator button color
      */
-    color?: ColorType | string;
+    color?: CustomColors;
     /**
      * navigation handler
      */
     onNavigate: (dir: -1 | 1) => void;
 }
-export declare const Navigator: ({ className, onNavigate, color, ...aria }: NavigatorProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that provides navigation controls for traversing through items.
+ * It includes previous and next buttons, and supports keyboard navigation.
+ *
+ * @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>
+ * ```
+ */
+export declare function Navigator({ className, onNavigate, color, children, length, current, disableKeyHandlers, ...aria }: NavigatorProps): import("react").JSX.Element;

package/dist/types/components/panel/Panel.d.ts

@@ -1,28 +1,18 @@
-/// <reference types="react" />
-import { type ContentProps } from "../../core/content/Content";
-import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
-import { type AriaProps, type ChildrenProp, type CollapseProps, type CssProp, type ExpandProps, type IconProps, type TestProps } from "../../types";
-export interface PanelProps extends CssProp, AriaProps, TestProps, IconProps, ExpandProps, CollapseProps, ChildrenProp<HeadFootProps | ContentProps> {
-    /**
-     * panel id used by panel stack
-     */
-    panelId?: string;
-    /**
-     * panel title
-     */
+import type { ContentProps } from "../../core/content/Content";
+import type { HeadFootProps } from "../../core/headfoot/HeadFoot";
+import type { ChildrenProp, CollapseProps, CssPropWithMap, ExpandProps, TestProps } from "../../types";
+import type { TitlebarProps } from "../titlebar/Titlebar";
+export interface PanelProps extends CssPropWithMap<{
+    root: string;
+    body?: string;
+    titlebar?: string;
     title?: string;
+    icon?: string;
+}>, TestProps, ExpandProps, CollapseProps, TitlebarProps, ChildrenProp<HeadFootProps | ContentProps> {
     /**
-     * header actions
-     */
-    actions?: JSX.Element;
-    /**
-     * header css classname(s)
-     */
-    headerClassName?: string;
-    /**
-     * title css classname(s)
+     * panel id used by panel stack
      */
-    titleClassName?: string;
+    panelId?: string | number;
     /**
      * loading state
      */
@@ -56,4 +46,34 @@ export interface PanelProps extends CssProp, AriaProps, TestProps, IconProps, Ex
      */
     onClose?: () => void;
 }
-export declare const Panel: ({ children, className, titleClassName, headerClassName, title, actions, icon, iconBg, iconColor, rtlFlip, panelId, height, width, minHeight, minWidth, maxHeight, maxWidth, loading, expandable, expanded: _expanded, onExpand, collapsable, collapsed: _collapsed, onCollapse, onClose, onBack, ...aria }: PanelProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @example
+ * ```jsx
+ * <Panel
+ *   title="Panel Title"
+ *   icon="icon-[mdi--info]"
+ *   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>
+ * ```
+ */
+export declare function Panel({ children, className, classNames, title, actions, icon, panelId, height, width, minHeight, minWidth, maxHeight, maxWidth, loading, expandable, expanded: _expanded, onExpand, collapsable, collapsed: _collapsed, onCollapse, onClose, onBack, ...aria }: PanelProps): import("react").JSX.Element;

package/dist/types/components/panel/PanelGroup.d.ts

@@ -1,4 +1,4 @@
-import { type ChildrenProp } from "../../types";
+import type { ChildrenProp } from "../../types";
 export interface PanelGroupProps extends ChildrenProp {
     /**
      * active panel id / index
@@ -7,6 +7,25 @@ export interface PanelGroupProps extends ChildrenProp {
     /**
      * active change callback
      */
-    onActiveChange?: (panelId: string) => void;
+    onActiveChange?: (panelId: string | number) => void;
 }
-export declare const PanelGroup: ({ children, activePanel, onActiveChange, }: PanelGroupProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @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>
+ * ```
+ */
+export declare function PanelGroup({ children, activePanel, onActiveChange }: PanelGroupProps): import("react").JSX.Element;

package/dist/types/components/panel/PanelStack.d.ts

@@ -1,4 +1,4 @@
-import { type ChildrenProp, type CssProp } from "../../types";
+import type { ChildrenProp, CssProp } from "../../types";
 export interface PanelStackProps extends CssProp, ChildrenProp {
     /**
      * active panel id
@@ -13,4 +13,30 @@ export interface PanelStackProps extends CssProp, ChildrenProp {
      */
     onBack?: (panelId: string, nextPanelId: string) => boolean | undefined;
 }
-export declare const PanelStack: ({ active, children, className, onPanelChange, onBack, ...rest }: PanelStackProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @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>
+ * ```
+ */
+export declare function PanelStack({ children, className, onPanelChange, onBack, ...rest }: PanelStackProps): import("react").JSX.Element;

package/dist/types/components/pillbox/Pillbox.d.ts

@@ -0,0 +1,95 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { CssProp, CustomColors } from "../../types";
+import type { IconProps } from "../icon/Icon";
+/**
+ * Represents a single selectable value type within a Pillbox.
+ */
+type ValueType = string | number | boolean;
+/**
+ * Configuration for a single pill option.
+ */
+interface PillOption {
+    /**
+     * Unique value identifying this option.
+     */
+    value: ValueType;
+    /**
+     * Display text shown inside the pill.
+     */
+    label?: React.ReactNode;
+    /**
+     * Icon configuration rendered before the label.
+     */
+    icon?: IconProps;
+    /**
+     * Background color override for the active pill highlight.
+     */
+    bg?: CustomColors;
+    /**
+     * Text color override for the active pill.
+     */
+    color?: CustomColors;
+    /**
+     * Whether this option is disabled and cannot be selected.
+     */
+    disabled?: boolean;
+}
+/**
+ * Props for the Pillbox component.
+ */
+interface PillboxProps extends CssProp {
+    /**
+     * Render pills in a full-width flex layout instead of inline.
+     */
+    block?: boolean;
+    /**
+     * Enable toggle behavior when exactly two options exist, allowing
+     * deselect on click.
+     */
+    toggle?: boolean;
+    /**
+     * Hide pills visually when the group is not hovered.
+     */
+    autoHide?: boolean;
+    /**
+     * Array of pill options to render.
+     */
+    options: PillOption[];
+    /**
+     * Currently selected value. Controlled component pattern.
+     */
+    value?: ValueType | null;
+    /**
+     * Callback invoked when a pill is selected with its value.
+     */
+    onChange?: (value: ValueType) => void;
+}
+/**
+ * A pill-based selector that renders a horizontal group of clickable options
+ * with an animated highlight tracking the selected pill.
+ */
+export declare function Pillbox({ options, className, block, toggle, value, autoHide, onChange }: PillboxProps): import("react").JSX.Element;
+export {};

package/dist/types/components/progress/ProgressBar.d.ts

@@ -1,7 +1,7 @@
-import { type ColorType } from "../../types";
+import type { CustomColors } from "../../types";
 export interface ProgressProps {
     /**
-     * progress value (0-100)
+     * progress value (0-1)
      */
     value: number;
     /**
@@ -11,7 +11,7 @@ export interface ProgressProps {
     /**
      * color
      */
-    color?: ColorType;
+    color?: CustomColors;
     /**
      * animate
      */
@@ -21,4 +21,19 @@ export interface ProgressProps {
      */
     label?: string;
 }
-export declare const ProgressBar: ({ value, size, color, label, animate, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @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
+ * ```
+ */
+export declare function ProgressBar({ value, size, color, label, animate }: ProgressProps): import("react").JSX.Element;

package/dist/types/components/progress/ProgressCircle.d.ts

@@ -1,7 +1,7 @@
-import { type ColorType } from "../../types";
+import type { CustomColors } from "../../types";
 export interface ProgressProps {
     /**
-     * progress value (0-100)
+     * progress value (0-1)
      */
     value: number;
     /**
@@ -11,6 +11,20 @@ export interface ProgressProps {
     /**
      * color
      */
-    color?: ColorType;
+    color?: CustomColors;
 }
-export declare const ProgressCircle: ({ value, size, color, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @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.
+ * ```
+ */
+export declare function ProgressCircle({ value, size, color }: ProgressProps): import("react").JSX.Element;

package/dist/types/components/tabpanel/Tab.d.ts

@@ -1,6 +1,13 @@
-import { type ReactElement } from "react";
-import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type TestProps, type TooltipProp } from "../../types";
-export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, IconProps, TooltipProp {
+import type { CallbackReturn, ChildrenProp, ColorBase, CssPropWithMap, PolymorphicProps, RefProp, TestProps } from "../../types";
+import type { BadgeType } from "../badge/Badge";
+import type { IconProps } from "../icon/Icon";
+import type { TooltipType } from "../tooltip/Tooltip";
+export interface TabProps extends Partial<ChildrenProp>, CssPropWithMap<{
+    root: string;
+    label: string;
+    active: string;
+    badge: string;
+}>, RefProp<HTMLButtonElement>, TestProps {
     /**
      * tab id
      */
@@ -12,11 +19,16 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
     /**
      * tab color
      */
-    color?: ColorType;
+    color?: ColorBase;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * tab badge
      */
     badge?: string | number | BadgeType;
+    tooltip?: string | TooltipType;
     /**
      * disabled
      */
@@ -25,14 +37,10 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
      * tab flex to fill button
      */
     tabFlex?: boolean;
-    /**
-     * className for active state
-     */
-    activeClassName?: string;
     /**
      * action dropdown body
      */
-    actions?: ReactElement;
+    actions?: React.ReactElement;
     /**
      * close handler
      */
@@ -42,4 +50,28 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
      */
     onClick?: (id: string) => CallbackReturn;
 }
-export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active, minimal, onClick, tabFlex, color, actions, tooltip, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @example
+ * ```jsx
+ * <Tab
+ *   id="tab1"
+ *   label="Tab 1"
+ *   icon="home"
+ *   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.
+ * ```
+ */
+export declare function Tab<Tag extends React.ElementType = "button">({ ref, as, id, className, classNames, label, icon, badge, disabled, onClose, onClick, tabFlex, color, actions, tooltip, active, ...props }: TabProps & PolymorphicProps<Tag>): React.ReactElement<TabProps>;