@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/dist/types/components/avatar/Avatar.d.ts

@@ -1,48 +1,99 @@
-/// <reference types="react" />
-import { type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
-export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
+/**
+ * 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, HtmlEvents, RefProp, SizeType, TestProps } from "../../types";
+export interface AvatarProps extends CssProp, TestProps, RefProp, HtmlEvents {
     /**
-     * avatar name for generated fallback
+     * Display name used for generating the fallback avatar (required).
+     * When no `avatar` image is provided, this name is used to generate
+     * a Boring Avatar pattern or extract text initials as a placeholder.
      */
     name: string;
     /**
-     * svg path
+     * SVG path string or CSS class name for a custom fallback icon.
+     * Used when no `avatar` image is provided and the variant is not `"text"`.
      */
     fallbackIcon?: string;
     /**
-     * avatar image url
+     * URL of the avatar image to display.
+     * Falls back to a Boring Avatar, text initials, or custom icon when
+     * the image fails to load or is not provided.
      */
     avatar?: string;
     /**
-     * avatar variant
+     * Fallback avatar style applied when no `avatar` image is provided.
+     * Defaults to `"beam"`. Options: `"text"` (text initials), `"beam"`,
+     * `"pixel"`, `"bauhaus"` (Boring Avatar variants).
      */
     variant?: "text" | "beam" | "pixel" | "bauhaus";
     /**
-     * background color (CSS color / tailwind color)
+     * Background color applied to the avatar container.
+     * Accepts Tailwind palette tokens or any CSS color.
      */
-    bg?: ColorType | string;
+    bg?: CustomColors;
     /**
-     * icon color (CSS color / tailwind color)
+     * Text/icon color applied to the avatar.
+     * Accepts Tailwind palette tokens or any CSS color.
      */
-    color?: ColorType | string;
+    color?: CustomColors;
     /**
-     * icon size
+     * Avatar size. Accepts predefined tokens `"xs"`–`"xl"` or a custom CSS size value.
      */
-    size?: SizeType | number | string;
+    size?: SizeType | number | (string & {});
     /**
-     * viewbox for svg path (default 24)
+     * SVG viewBox attribute for `fallbackIcon` when it is an SVG path.
+     * Defaults to `"0 0 24 24"`.
      */
     viewBox?: string;
     /**
-     * rounded icon
+     * When true, applies a fully rounded (circular) shape to the avatar.
+     * Otherwise, a standard rounded rectangle is used.
      */
     rounded?: boolean;
     /**
-     * click handler
+     * When true, prevents the default click action on the avatar.
+     * Useful when the avatar is nested inside an `<a>` element to avoid
+     * navigating away from the page.
      */
-    onClick?: React.MouseEventHandler;
+    preventDefault?: boolean;
 }
 /**
- * An avatar is a graphical representation of a user's identity.
+ * User avatar that renders an image with a Boring Avatar fallback.
+ *
+ * Displays a user image, falling back to a Boring Avatar (or text initials)
+ * when no image is provided or the image fails to load. Supports four
+ * Boring Avatar variants (beam, text, pixel, bauhaus) and custom SVG/icon fallbacks.
+ *
+ * @see {@link https://boringavatars.com/}
+ *
+ *  @example
+ * ```tsx
+ * import { Avatar } from "@react-fabric/core";
+ *
+ * <Avatar name="Ada Lovelace" avatar="/ada.jpg" />
+ * <Avatar name="John Doe" variant="pixel" size="lg" />
+ * <Avatar name="Jane" fallbackIcon="icon-[mdi--user]" variant="text" />
+ * ```
  */
-export declare const Avatar: ({ ref, name, avatar, fallbackIcon, bg, color, size, rounded, variant, className, viewBox, onClick, ...aria }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ ref, name, avatar, fallbackIcon, bg, color, size, rounded, variant, className, viewBox, preventDefault, onClick, ...props }: AvatarProps): import("react").JSX.Element;

package/dist/types/components/avatar/AvatarGroup.d.ts

@@ -1,24 +1,61 @@
-import { type ReactElement } from "react";
-import { type AriaProps, type CssProp, type RefProp, type SizeType } from "../../types";
-import { type AvatarProps } from "./Avatar";
-type AvatarChild = ReactElement<Omit<AvatarProps, "size" | "rounded">> | false | undefined;
-export interface AvatarGroupProps extends CssProp, RefProp, AriaProps {
-    children: AvatarChild | AvatarChild[];
+/**
+ * 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 { ChildrenProp, CssProp, RefProp, SizeType } from "../../types";
+import type { AvatarProps } from "./Avatar";
+export interface AvatarGroupProps extends CssProp, RefProp<HTMLDivElement>, ChildrenProp<Omit<AvatarProps, "size" | "rounded">> {
     /**
-     * rounded icon
+     * Whether to apply a fully rounded shape to all avatars and the group container.
      */
     rounded?: boolean;
     /**
-     * icon size
+     * Avatar size. Accepts `"xs"`–`"xl"` tokens or a custom CSS size value.
      */
-    size?: SizeType | number | string;
+    size?: SizeType | number | (string & {});
     /**
-     * max count
+     * Maximum number of avatars to display before showing a "+N" overflow badge.
      */
-    totalCount?: number;
+    max?: number;
 }
 /**
- * Group multiple avatars together
+ * Horizontal group of avatars with an overflow count badge.
+ *
+ * Renders its avatar children in a flex row, truncating to `max` visible
+ * avatars and appending a "+N" badge for the remainder. Each avatar is
+ * sized according to the `size` prop.
+ *
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarGroup } from "@react-fabric/core";
+ *
+ * <AvatarGroup max={3} size="md">
+ *     <Avatar name="John Doe" avatar="/john.jpg" />
+ *     <Avatar name="Jane Smith" avatar="/jane.jpg" />
+ *     <Avatar name="Alice Johnson" avatar="/alice.jpg" />
+ *     <Avatar name="Bob Brown" avatar="/bob.jpg" />
+ * </AvatarGroup>
+ * // Renders 3 avatars + a "+1" badge
+ * ```
  */
-export declare const AvatarGroup: ({ ref, children, className, totalCount, rounded, size, ...aria }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function AvatarGroup({ ref, children, className, max, rounded, size, ...props }: AvatarGroupProps): import("react").JSX.Element;

package/dist/types/components/badge/Badge.d.ts

@@ -1,25 +1,75 @@
-import { type BadgeType, type ChildProp, type CssProp, type IconProps, type RefProp } from "../../types";
-export interface BadgeProps extends CssProp, RefProp, IconProps, Partial<ChildProp> {
+import type { ChildProp, CssProp, TestProps } from "../../types";
+import type { CustomColors } from "../../types/colors";
+export interface BadgeType {
     /**
-     * make wrapper a block element
+     * Numeric or text value displayed inside the badge (e.g., a count like "42").
+     * Mutually exclusive with `icon` and `ping`.
      */
-    block?: boolean;
+    value?: string | number;
     /**
-     * badge value
+     * Icon path or props rendered inside the badge instead of a value.
+     * Mutually exclusive with `value` and `ping`.
      */
-    value?: number | string;
+    icon?: string;
     /**
-     * max value for number display
+     * When true, renders a pulsing dot indicator (used for "unread" or "live" states).
+     * Mutually exclusive with `value` and `icon`.
      */
-    max?: number;
+    ping?: boolean;
     /**
-     * ping animation
+     * When true, the badge is positioned inline with its content rather than absolutely positioned.
      */
-    ping?: boolean;
+    inline?: boolean;
+    /**
+     * Placement of the badge relative to its child when `inline` is false.
+     * Defaults to `"top-end"`.
+     */
+    placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "end" | "start";
     /**
-     * badge placement
+     * Background color applied to the badge. Accepts Tailwind palette tokens or any CSS color.
      */
-    placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top" | "bottom" | "start" | "end";
+    bg?: CustomColors;
+    /**
+     * Text/icon color applied to the badge. Accepts Tailwind palette tokens or any CSS color.
+     */
+    color?: CustomColors;
 }
-export declare const getBadgeProps: (badge?: string | number | BadgeType) => AnyObject;
-export declare const Badge: ({ ref, className, value, max, ping, block, placement, children, forButton, icon, iconBg, iconColor, rtlFlip, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export type BadgeProps = BadgeType & CssProp & TestProps & Partial<ChildProp> & ({
+    value: string | number;
+    icon?: never;
+    ping?: never;
+} | {
+    icon: string;
+    value?: never;
+    ping?: never;
+} | {
+    ping?: boolean;
+    value?: never;
+    icon?: never;
+});
+/**
+ * A small overlay component used to display a numeric value, icon, or pulsing
+ * indicator positioned relative to a child element.
+ *
+ * Commonly used for notification counts, unread indicators, or status badges
+ * on avatars, buttons, or list items.
+ *
+ * @example
+ * ```tsx
+ * import { Badge } from "@react-fabric/core";
+ *
+ * // Numeric badge
+ * <Badge value="42">
+ *    <Avatar name="John" />
+ * </Badge>
+ *
+ * // Icon badge
+ * <Badge icon="icon-[mdi--bell]" />
+ *
+ * // Pulsing indicator
+ * <Badge ping>
+ *    <Icon icon="icon-[mdi--email]" />
+ * </Badge>
+ * ```
+ */
+export declare function Badge({ className, bg, color, icon, inline, ping, value, children, placement, ...props }: BadgeProps): import("react").JSX.Element;

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

@@ -1,95 +1,112 @@
-import { type MouseEventHandler, type WheelEventHandler } from "react";
-import { type AriaProps, type BadgeType, type CallbackReturn, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
-export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestProps {
+import type { Hotkey } from "@tanstack/react-hotkeys";
+import type { ChildProp, CssPropWithMap, CSSSizeType, HtmlEvents, PolymorphicProps, RefProp, SizeType, TestProps } from "../../types";
+import type { IconProps } from "../icon/Icon";
+export interface SharedButtonProps extends HtmlEvents {
     /**
-     * primary icon alignment
+     * Visual style variant of the button. Defaults to `"default"`.
      */
-    iconAlign?: "start" | "end";
+    variant?: "default" | "soft" | "outlined" | "dashed" | "solid" | "link";
     /**
-     * alternate icon align end (caret, arrow)
+     * Color scheme for the button. Defaults to `"default"`.
      */
-    altIcon?: string;
+    color?: "default" | "muted" | "primary" | "secondary" | "info" | "danger" | "success" | "warning";
     /**
-     * button size
+     * When true, applies fully rounded (pill) corners to the button.
      */
-    size?: SizeType;
+    rounded?: boolean;
     /**
-     * button color
+     * Button size. Accepts `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
      */
-    color?: ColorType;
+    size?: SizeType;
+}
+interface BaseButtonProps extends CssPropWithMap<{
+    root: string;
+    button: string;
+    label: string;
+    icon: string;
+}>, RefProp<HTMLButtonElement>, TestProps, SharedButtonProps {
+    "aria-label"?: string;
     /**
-     * button type
+     * Keyboard shortcut combo that triggers the button's `onClick` handler.
      */
-    type?: "button" | "reset" | "submit";
+    hotKey?: Hotkey | Hotkey[];
     /**
-     * button styling
+     * When true, hides the visual hotkey label displayed inside the button.
      */
-    variant?: "outline" | "solid" | "link";
+    hideHotKeyLabel?: boolean;
     /**
-     * active state with click disabled
+     * Icon path or props rendered inside the button.
      */
-    active?: boolean;
+    icon?: IconProps;
     /**
-     * loading state with animation and click disabled
+     * Alternative icon rendered for dropdown carets or state indicators.
      */
-    loading?: boolean;
+    altIcon?: IconProps;
     /**
-     * full rounded edges
+     * When true, marks the button as in an active/selected state.
      */
-    rounded?: boolean;
+    active?: boolean;
     /**
-     * spin icon on hover
+     * When true, shows a loading spinner and disables clicks to prevent duplicate submissions.
      */
-    spinOnHover?: boolean;
+    loading?: boolean;
     /**
-     * disabled state
+     * When true, disables the button and prevents user interaction.
      */
     disabled?: boolean;
     /**
-     * stretch to full width
+     * When true, allows the button to be clicked even when `active` is true.
      */
-    fullWidth?: boolean;
+    activeClickable?: boolean;
+    type?: "button" | "submit" | "reset";
     /**
-     * action completed message works best with `onClick` Promise return.
-     * To hide completed message onClick/Promise return should be false
+     * Explicit width of the button (CSS size value).
      */
-    actionMessage?: string;
+    width?: CSSSizeType;
     /**
-     * manually force show action message
+     * When true, manually shows the action-completed checkmark overlay.
      */
     showActionDone?: boolean;
     /**
-     * show action message `onClick` or manually by setting `showActionDone` true
+     * Controls when the action-completed checkmark appears: `"click"` shows it after onClick,
+     * `"manual"` requires setting `showActionDone` to true.
      */
     showActionDoneEvent?: "click" | "manual";
-    /**
-     * click handler, return Promise to autoset loading state
-     */
-    onClick?: (e?: React.MouseEvent) => CallbackReturn;
-    /**
-     * badges
-     */
-    badge?: string | number | BadgeType;
-    /**
-     * keyboard shortcut
-     */
-    hotKey?: string;
-    stopPropagation?: boolean;
-    onMouseOut?: MouseEventHandler;
-    onMouseOver?: MouseEventHandler;
-    onMouseMove?: MouseEventHandler;
-    onMouseEnter?: MouseEventHandler;
-    onMouseLeave?: MouseEventHandler;
-    onWheel?: WheelEventHandler;
 }
-export type ButtonProps = {
-    children: string | React.ReactElement;
-    "aria-label"?: string;
+type ButtonTypeProps = {
+    children: ChildProp["children"];
 } | {
     children?: never;
     "aria-label": string;
 };
+export type ButtonProps<Tag extends React.ElementType = "button"> = BaseButtonProps & ButtonTypeProps & PolymorphicProps<Tag>;
 /**
- * Clickable action button
+ * A versatile button component that supports multiple variants, colors, sizes, and states.
+ * It can display icons, handle loading/action states, show keyboard shortcuts, and be
+ * polymorphic to render as different HTML elements or custom components.
+ *
+ * @example
+ * ```tsx
+ * // Basic button
+ * <Button variant="solid" color="primary" onClick={handleClick}>
+ *   Click me
+ * </Button>
+ *
+ * // Icon button with loading state
+ * <Button icon="icon-[mdi--floppy]" loading={saving}>
+ *   Save
+ * </Button>
+ *
+ * // Polymorphic: renders as a link
+ * <Button as="a" href="/dashboard" variant="soft">
+ *   Dashboard
+ * </Button>
+ *
+ * // Button with keyboard shortcut
+ * <Button hotKey="Ctrl+S" variant="dashed">
+ *   Save (Ctrl+S)
+ * </Button>
+ * ```
  */
-export declare const Button: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, ref, children, className, active, color, icon, iconBg, iconColor, iconAlign, altIcon, rtlFlip, rounded, size, disabled, loading, variant, badge, fullWidth, spinOnHover, onClick, actionMessage, stopPropagation, type, hotKey, showActionDone, showActionDoneEvent, tabIndex, "data-ref": dataRef, ...aria }: BaseProps & ButtonProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare function Button<Tag extends React.ElementType = "button">({ active, altIcon, as, children, className, classNames, color, disabled, icon, loading, onBlur, onClick, onFocus, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOver, onMouseUp, activeClickable, showActionDone, showActionDoneEvent, type, ref, rounded, size, variant, width, hotKey, hideHotKeyLabel, ...props }: ButtonProps<Tag>): import("react").JSX.Element;
+export {};

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

@@ -1,34 +1,96 @@
-/// <reference types="react" />
-import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
-import { type Button } from "./Button";
-export interface ButtonGroupProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<typeof Button>> {
+/**
+ * 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 { ChildrenProp, CssProp, RefProp, TestProps } from "../../types";
+import type { ButtonProps, SharedButtonProps } from "./Button";
+interface BaseProps extends CssProp, TestProps, SharedButtonProps {
     /**
-     * vertical orientation
+     * When true, arranges buttons vertically (top-to-bottom) instead of horizontally.
      */
     vertical?: boolean;
     /**
-     * button styling
-     */
-    variant?: "outline" | "solid" | "link";
-    /**
-     * button size
-     */
-    size?: SizeType;
-    /**
-     * button color
-     */
-    color?: ColorType;
-    /**
-     * full rounded edges
-     */
-    rounded?: boolean;
-    /**
-     * disabled state
+     * When true, disables all child buttons and prevents user interaction.
      */
     disabled?: boolean;
     /**
-     * stretch to full width
+     * When true, stretches the group to full available width (uses `flex` instead of `inline-flex`).
      */
     fullWidth?: boolean;
 }
-export declare const ButtonGroup: ({ vertical, className, children, variant, rounded, disabled, fullWidth, color, size, ...aria }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+export type ButtonGroupProps<T> = BaseProps & RefProp<HTMLDivElement> & ChildrenProp<ButtonProps & {
+    value: T;
+}> & {
+    onClick?: (value: T | null, e?: React.MouseEvent) => void;
+};
+/**
+ * A container component that renders a group of related buttons with shared styling and behavior.
+ *
+ * ButtonGroup propagates common button properties (variant, color, size, rounded, disabled)
+ * to all direct child `<Button>` elements, ensuring visual consistency across the group.
+ * It also coordinates click handling by intercepting each child's `onClick` and invoking
+ * the group-level `onClick` callback with the clicked button's `value` prop — making it
+ * ideal for toggle groups, radio-style selections, and multi-select toolbars.
+ *
+ * @template T - The type of the `value` prop expected by child buttons (defaults to `string`).
+ *
+ * @example
+ * ```tsx
+ * // Single-select toggle group
+ * const [mode, setMode] = useState<"day" | "week" | "month">("day");
+ *
+ * <ButtonGroup
+ *   value={mode}
+ *   onClick={(v) => setMode(v ?? "day")}
+ *   variant="outlined"
+ *   color="primary"
+ *   size="sm"
+ * >
+ *    <Button value="day">Day</Button>
+ *    <Button value="week">Week</Button>
+ *    <Button value="month">Month</Button>
+ * </ButtonGroup>
+ *
+ * @example
+ * ```tsx
+ * // Multi-select with vertical layout
+ * const [tags, setTags] = useState<string[]>([]);
+ *
+ * <ButtonGroup
+ *   vertical
+ *   variant="soft"
+ *   color="info"
+ *   onClick={(tag) =>
+ *     setTags((prev) =>
+ *       prev.includes(tag!) ? prev.filter((t) => t !== tag) : [...prev, tag!]
+ *       )
+ *     }
+ * >
+ *    <Button value="react">React</Button>
+ *    <Button value="typescript">TypeScript</Button>
+ *    <Button value="tailwind">Tailwind</Button>
+ * </ButtonGroup>
+ * ```
+ */
+export declare function ButtonGroup<T extends AnyObject = string>({ ref, vertical, className, children, variant, rounded, disabled, fullWidth, color, size, onClick, ...props }: ButtonGroupProps<T>): import("react").JSX.Element;
+export {};

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { type Placement } from "@floating-ui/react";
-import { type CallbackReturn, type PolymorphicProps, type RefProp } from "../../types";
-import { type BaseProps, type ButtonProps } from "./Button";
-interface ExtendedProps extends Omit<BaseProps, "onClick">, RefProp {
+import { type CallbackReturn } from "../../types";
+import { type ButtonProps } from "./Button";
+interface ExtendedProps {
     /**
      * confirm message
      */
@@ -24,9 +23,24 @@ interface ExtendedProps extends Omit<BaseProps, "onClick">, RefProp {
      */
     onClick?: (e: boolean) => CallbackReturn;
 }
-export type ConfirmButtonProps = ExtendedProps & ButtonProps;
 /**
- * Button with confirmation dropdown
+ * A button that shows a confirmation dialog when clicked, allowing the user to confirm or cancel an action.
+ * It supports custom messages, labels, and loading states.
+ * This component is useful for actions that require user confirmation, such as deleting items or submitting forms.
+ * It uses the Floating UI library to manage the positioning of the confirmation dialog, ensuring it appears correctly relative to the button.
+ * It also supports custom placement of the dialog, and can display an action message when the action is completed.
+ *
+ * @example
+ * ```jsx
+ * <ConfirmButton
+ *   message="Are you sure you want to delete this item?"
+ *   onClick={(confirmed) => {
+ *     if (confirmed) {
+ *       // Perform action
+ *     }
+ *   }}
+ * />
+ * ```
  */
-export declare const ConfirmButton: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, message, color, okLabel, cancelLabel, onClick, loading, placement, actionMessage, showActionDone, showActionDoneEvent, ...props }: ConfirmButtonProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfirmButton: <Tag extends React.ElementType = "button">(props: ExtendedProps & ButtonProps<Tag>) => import("react").JSX.Element;
 export {};