@allxsmith/bestax-bulma 5.6.2 → 5.8.0

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

@@ -1,14 +1,52 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/** Available size modifiers for the Steps component. */
 export type StepsSize = 'small' | 'medium' | 'large';
+/** Available color variants for the Steps component. */
 export type StepsColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Props for individual Step items.
+ *
+ * @property {React.ReactNode} [label] - Step label/title.
+ * @property {React.ReactNode} [icon] - Icon for the step marker.
+ * @property {React.ReactNode} [completedIcon] - Custom icon for completed state. Set to null to show step number instead of checkmark.
+ * @property {boolean} [clickable] - Whether this step is clickable.
+ * @property {string} [className] - Additional class for this step.
+ */
 export interface StepItemProps {
+    /** Step label/title */
     label?: React.ReactNode;
+    /** Icon for the step marker */
     icon?: React.ReactNode;
+    /** Custom icon for completed state. Set to null to show step number instead of checkmark. */
     completedIcon?: React.ReactNode;
+    /** Whether this step is clickable */
     clickable?: boolean;
+    /** Additional class for this step */
     className?: string;
 }
+/**
+ * Props for the Steps component.
+ *
+ * @property {number} [value] - Current active step (0-indexed).
+ * @property {StepItemProps[]} [items] - Array of step items.
+ * @property {StepsSize} [size] - Size of the steps.
+ * @property {StepsColor} [color] - Color variant.
+ * @property {boolean} [hasMarker] - Show step markers. Default: true.
+ * @property {boolean} [animated] - Enable animations. Default: true.
+ * @property {boolean} [rounded] - Use rounded markers. Default: true.
+ * @property {boolean} [vertical] - Vertical layout.
+ * @property {'bottom' | 'right' | 'left'} [labelPosition] - Position of labels.
+ * @property {boolean} [showStepNumbers] - Show step numbers in markers. Default: true.
+ * @property {boolean} [hasNavigation] - Render built-in prev/next buttons.
+ * @property {string} [prevLabel] - Custom prev button text (default 'Previous').
+ * @property {string} [nextLabel] - Custom next button text (default 'Next').
+ * @property {() => void} [onPrev] - Custom prev button callback.
+ * @property {() => void} [onNext] - Custom next button callback.
+ * @property {(step: number) => void} [onStepClick] - Callback when a step is clicked.
+ * @property {'minimal' | 'compact' | 'right'} [mobileMode] - Mobile display mode.
+ * @property {React.ReactNode} [children] - Step children (alternative to items).
+ */
 export interface StepsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
     value?: number;
     items?: StepItemProps[];
@@ -28,18 +66,45 @@ export interface StepsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     onNext?: () => void;
     onStepClick?: (step: number) => void;
 }
+/**
+ * Props for the Step subcomponent.
+ *
+ * @property {boolean} [isActive] - Whether this step is active.
+ * @property {boolean} [isCompleted] - Whether this step is completed.
+ * @property {React.ReactNode} [label] - Step label/title.
+ * @property {React.ReactNode} [icon] - Icon for the step marker.
+ * @property {boolean} [clickable] - Whether this step is clickable.
+ * @property {() => void} [onClick] - Click handler.
+ * @property {number} [stepNumber] - Step number to display in marker (1-indexed).
+ * @property {React.ReactNode} [completedIcon] - Custom icon for completed state.
+ */
 export interface StepProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Whether this step is active */
     isActive?: boolean;
+    /** Whether this step is completed */
     isCompleted?: boolean;
+    /** Step label/title */
     label?: React.ReactNode;
+    /** Icon for the step marker */
     icon?: React.ReactNode;
+    /** Whether this step is clickable */
     clickable?: boolean;
+    /** Click handler */
     onClick?: () => void;
+    /** Step number to display in marker (1-indexed) */
     stepNumber?: number;
+    /** Custom icon for completed state. Set to null to show step number instead of checkmark. */
     completedIcon?: React.ReactNode;
 }
+/**
+ * Individual Step component for use inside Steps.
+ *
+ * @function
+ * @param {StepProps} props - Props for the Step component.
+ * @returns {JSX.Element} The rendered step segment.
+ */
 export declare const Step: React.FC<StepProps>;
 export declare const Steps: React.FC<StepsProps> & {
-    Step: typeof Step;
+    Step: React.FC<StepProps>;
 };
 export default Steps;

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

@@ -1,5 +1,24 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Tabs component.
+ *
+ * @property {'centered'|'right'|'left'} [align] - Tab alignment.
+ * @property {'small'|'medium'|'large'} [size] - Tab size.
+ * @property {boolean} [fullwidth] - Tabs are fullwidth.
+ * @property {boolean} [boxed] - Tabs are boxed style.
+ * @property {boolean} [toggle] - Tabs are toggle style.
+ * @property {boolean} [rounded] - Tabs are rounded (if toggle).
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'|'black'|'dark'|'light'|'white'} [color] - Bulma color.
+ * @property {number} [value] - Controlled active tab index.
+ * @property {(index: number) => void} [onChange] - Callback when active tab changes.
+ * @property {number} [defaultValue] - Initial active tab index for uncontrolled mode.
+ * @property {boolean} [vertical] - Render tabs vertically.
+ * @property {'left'|'right'} [side] - Which side vertical tabs appear on.
+ * @property {boolean} [expanded] - Vertical tabs fill full height.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Tab content.
+ */
 export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     align?: 'centered' | 'right' | 'left';
     size?: 'small' | 'medium' | 'large';
@@ -17,20 +36,38 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
     className?: string;
     children?: React.ReactNode;
 }
-export declare const Tabs: React.FC<TabsProps> & {
-    List: typeof TabList;
-    Tab: typeof Tab;
-    Item: typeof TabItem;
-    Content: typeof TabsContent & {
-        Item: typeof TabContentItem;
-    };
-};
+/**
+ * Props for the TabList component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Tab elements.
+ */
 export interface TabListProps extends React.HTMLAttributes<HTMLUListElement> {
     className?: string;
     children?: React.ReactNode;
 }
+/**
+ * Tab list container. Renders a `<ul>` with `role="tablist"`.
+ *
+ * @function
+ * @param {TabListProps} props - Props for the TabList component.
+ * @returns {JSX.Element} The rendered tab list.
+ */
 export declare const TabList: React.FC<TabListProps>;
 type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
+/**
+ * Props for the Tab component.
+ *
+ * @property {number} index - The tab index for state management.
+ * @property {boolean} [disabled] - Whether the tab is disabled.
+ * @property {string} [icon] - Icon name to render before the label.
+ * @property {IconLibrary} [iconLibrary] - Icon library override (defaults to ConfigProvider value or 'fa').
+ * @property {string} [iconVariant] - Icon style variant (e.g., 'solid', 'outlined', 'rounded').
+ * @property {'small'|'medium'|'large'} [iconSize] - Icon size modifier. Default: 'small'.
+ * @property {string|string[]} [iconFeatures] - Additional icon library-specific modifiers.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Tab label content.
+ */
 export interface TabProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> {
     index: number;
     disabled?: boolean;
@@ -42,25 +79,77 @@ export interface TabProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'o
     className?: string;
     children?: React.ReactNode;
 }
+/**
+ * Individual tab button. Consumes Tabs context for active state management.
+ * Renders `<a>` internally — consumers provide only the label text/children.
+ *
+ * @function
+ * @param {TabProps} props - Props for the Tab component.
+ * @returns {JSX.Element} The rendered tab.
+ */
 export declare const Tab: React.FC<TabProps>;
+/**
+ * Props for the TabItem component (backward-compatible).
+ *
+ * @property {boolean} [active] - Whether the tab is active.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Tab content.
+ * @property {React.MouseEventHandler<HTMLLIElement>} [onClick] - Click handler.
+ */
 export interface TabItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     active?: boolean;
     className?: string;
     children?: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
 }
+/**
+ * Legacy tab item. Does not consume context — active state is controlled via prop.
+ *
+ * @function
+ * @param {TabItemProps} props - Props for the TabItem component.
+ * @returns {JSX.Element} The rendered tab item.
+ * @deprecated Use `Tabs.Tab` with an `index` prop instead.
+ */
 export declare const TabItem: React.FC<TabItemProps>;
+/**
+ * Props for the TabsContent component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - TabContentItem elements.
+ */
 export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     children?: React.ReactNode;
 }
-export declare const TabsContent: React.FC<TabsContentProps> & {
-    Item: typeof TabContentItem;
-};
+/**
+ * Props for the TabContentItem component.
+ *
+ * @property {number} index - The tab index this content panel corresponds to.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Panel content.
+ */
 export interface TabContentItemProps extends React.HTMLAttributes<HTMLDivElement> {
     index: number;
     className?: string;
     children?: React.ReactNode;
 }
+/**
+ * Individual content panel. Shows/hides based on active tab from context.
+ *
+ * @function
+ * @param {TabContentItemProps} props - Props for the TabContentItem component.
+ * @returns {JSX.Element} The rendered tab content panel.
+ */
 export declare const TabContentItem: React.FC<TabContentItemProps>;
+export declare const TabsContent: React.FC<TabsContentProps> & {
+    Item: React.FC<TabContentItemProps>;
+};
+export declare const Tabs: React.FC<TabsProps> & {
+    List: React.FC<TabListProps>;
+    Tab: React.FC<TabProps>;
+    Item: React.FC<TabItemProps>;
+    Content: React.FC<TabsContentProps> & {
+        Item: React.FC<TabContentItemProps>;
+    };
+};
 export default Tabs;

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

@@ -1,7 +1,30 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/** Color/style type presets for toast messages. */
 export type ToastType = 'default' | 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/** Screen positions where toasts can be displayed. */
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/**
+ * Props for the Toast component.
+ *
+ * @property {string} message - The message to display.
+ * @property {ToastType} [type] - Colors the toast background. Default: 'default'.
+ * @property {ToastType} [actionType] - Colors the action button text.
+ * @property {ToastPosition} [position] - Position on the screen. Default: 'top-right'.
+ * @property {number} [duration] - Duration in ms before auto-close (0 disables). Default: 2000.
+ * @property {boolean} [indefinite] - Stay open until dismissed. Default: false.
+ * @property {boolean} [dismissible] - Click toast (or outside) to dismiss. Default: true.
+ * @property {boolean} [closable] - Show an explicit close (X) button. Default: false.
+ * @property {boolean} [rounded] - Pill-shaped toast. Default: false.
+ * @property {boolean} [pauseOnHover] - Pause auto-close timer on hover. Default: false.
+ * @property {boolean} [cancelable] - Whether the toast can be dismissed with Escape. Default: true.
+ * @property {string} [actionText] - Text for action button.
+ * @property {string} [cancelText] - Text for cancel button.
+ * @property {() => void} [onAction] - Callback when action button is clicked.
+ * @property {() => void} [onClose] - Callback when toast closes.
+ * @property {string | HTMLElement} [container] - Custom mount target (CSS selector string or HTMLElement).
+ * @property {boolean} [inline] - Render only the .toast element without portal/container wrapper. Default: false.
+ */
 export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
     message: string;
     type?: ToastType;
@@ -21,25 +44,111 @@ export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     container?: string | HTMLElement;
     inline?: boolean;
 }
+/**
+ * Toast component for displaying brief notification messages with optional action buttons.
+ *
+ * Appears at a configurable screen position with auto-close, pause-on-hover,
+ * keyboard dismiss, action/cancel buttons, and an optional explicit close button.
+ *
+ * @function
+ * @param {ToastProps} props - Props for the Toast component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the toast element.
+ * @returns {JSX.Element | null} The rendered toast component.
+ *
+ * @example
+ * // Basic toast
+ * <Toast message="Operation successful!" type="success" />
+ *
+ * @example
+ * // Toast with action button
+ * <Toast message="Item deleted" actionText="Undo" onAction={handleUndo} />
+ */
 export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Options for showing a programmatic toast. Extends ToastProps with a required message.
+ *
+ * @property {string} message - The message to display.
+ * @property {boolean} [queue] - When true, toasts enter a FIFO queue and display one at a time. Default: false.
+ */
 export interface ToastOptions extends Omit<ToastProps, 'message'> {
     message: string;
+    /** When true, toasts enter a FIFO queue and display one at a time. Default false. */
     queue?: boolean;
 }
+/**
+ * Internal representation of a toast instance.
+ *
+ * @property {string} id - Unique identifier for this toast.
+ * @property {ToastOptions} props - Configuration options for the toast.
+ */
 export interface ToastInstance {
     id: string;
     props: ToastOptions;
 }
+/**
+ * Programmatic toast API for showing, closing, and managing toasts.
+ *
+ * @example
+ * toast.success('Saved!');
+ * toast.show({ message: 'Item deleted', actionText: 'Undo', onAction: handleUndo });
+ */
 export declare const toast: {
+    /**
+     * Show a toast with the given options.
+     * @param {ToastOptions} options - Toast configuration.
+     * @returns {string} The unique ID of the created toast.
+     */
     show: (options: ToastOptions) => string;
+    /**
+     * Show a success toast.
+     * @param {string} message - The message to display.
+     * @param {Partial<ToastOptions>} [options] - Additional options.
+     * @returns {string} The toast ID.
+     */
     success: (message: string, options?: Partial<ToastOptions>) => string;
+    /**
+     * Show a danger toast.
+     * @param {string} message - The message to display.
+     * @param {Partial<ToastOptions>} [options] - Additional options.
+     * @returns {string} The toast ID.
+     */
     danger: (message: string, options?: Partial<ToastOptions>) => string;
+    /**
+     * Show a warning toast.
+     * @param {string} message - The message to display.
+     * @param {Partial<ToastOptions>} [options] - Additional options.
+     * @returns {string} The toast ID.
+     */
     warning: (message: string, options?: Partial<ToastOptions>) => string;
+    /**
+     * Show an info toast.
+     * @param {string} message - The message to display.
+     * @param {Partial<ToastOptions>} [options] - Additional options.
+     * @returns {string} The toast ID.
+     */
     info: (message: string, options?: Partial<ToastOptions>) => string;
+    /**
+     * Close a specific toast by ID.
+     * @param {string} id - The toast ID to close.
+     */
     close: (id: string) => void;
+    /** Close all toasts and clear the queue. */
     closeAll: () => void;
+    /**
+     * Subscribe to toast state changes.
+     * @param {(toasts: ToastInstance[]) => void} listener - Callback invoked on changes.
+     * @returns {() => void} Unsubscribe function.
+     */
     subscribe: (listener: (toasts: ToastInstance[]) => void) => (() => void);
 };
+/**
+ * Container component for rendering programmatic toasts.
+ * Place once at your app root to enable the toast API.
+ *
+ * @function
+ * @param {{ position?: ToastPosition }} props - Container props.
+ * @returns {JSX.Element | null} The rendered toast container, or null if empty.
+ */
 export declare const ToastContainer: React.FC<{
     position?: ToastPosition;
 }>;

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

@@ -1,8 +1,30 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/** Screen positions for the tooltip. */
 export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
+/** Color variants for the tooltip. */
 export type TooltipColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'dark' | 'light';
+/** Size variants for the tooltip. */
 export type TooltipSize = 'small' | 'medium' | 'large';
+/**
+ * Props for the Tooltip component.
+ *
+ * @property {string} [label] - The tooltip text content.
+ * @property {React.ReactNode} [content] - Custom rich content for the tooltip (takes precedence over label).
+ * @property {TooltipPosition} [position] - Position of the tooltip. Default: 'top'.
+ * @property {TooltipColor} [color] - Color variant for the tooltip.
+ * @property {TooltipSize} [size] - Size variant for the tooltip ('small', 'medium', 'large').
+ * @property {boolean} [active] - Force tooltip to be always visible.
+ * @property {boolean} [multiline] - Allow tooltip to wrap to multiple lines.
+ * @property {boolean} [animated] - Enable fade animation. Default: true.
+ * @property {boolean} [square] - Use square corners instead of rounded.
+ * @property {boolean} [dashed] - Show dashed underline on trigger.
+ * @property {number} [delay] - Delay before showing tooltip (ms).
+ * @property {number} [closeDelay] - Delay before hiding tooltip after mouse leave (ms).
+ * @property {React.ReactNode} [children] - The element that triggers the tooltip.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {string} [tooltipClassName] - Additional classes for the tooltip element.
+ */
 export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     label?: string;
     content?: React.ReactNode;
@@ -18,5 +40,33 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
     closeDelay?: number;
     tooltipClassName?: string;
 }
+/**
+ * Tooltip component for displaying helpful information on hover.
+ *
+ * Shows a small popup with text when the user hovers over or focuses
+ * on the wrapped element. Supports multiple positions and color variants.
+ *
+ * @function
+ * @param {TooltipProps} props - Props for the Tooltip component.
+ * @returns {JSX.Element} The rendered tooltip wrapper.
+ *
+ * @example
+ * // Basic tooltip
+ * <Tooltip label="This is helpful info">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // Positioned tooltip with color
+ * <Tooltip label="Delete item" position="right" color="danger">
+ *   <Icon icon="fas fa-trash" />
+ * </Tooltip>
+ *
+ * @example
+ * // Multiline tooltip
+ * <Tooltip label="This is a longer tooltip that wraps to multiple lines" multiline>
+ *   <span>?</span>
+ * </Tooltip>
+ */
 export declare const Tooltip: React.FC<TooltipProps>;
 export default Tooltip;

package/dist/types/elements/Block.d.ts

@@ -1,5 +1,14 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Block component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
+ * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the block.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
+ * @property {React.ReactNode} [children] - Content to be rendered inside the block.
+ */
 export interface BlockProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     className?: string;
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -7,4 +16,15 @@ export interface BlockProps extends React.HTMLAttributes<HTMLDivElement>, Omit<B
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
     children?: React.ReactNode;
 }
+/**
+ * Block component for rendering a styled Bulma block element.
+ *
+ * A block is a simple utility element that adds spacing (margin-bottom) between elements.
+ * Supports Bulma helper classes for additional styling like text color, background color, and layout.
+ *
+ * @function
+ * @param {BlockProps} props - Props for the Block component.
+ * @returns {JSX.Element} The rendered block element.
+ * @see {@link https://bulma.io/documentation/elements/block/ | Bulma Block documentation}
+ */
 export declare const Block: React.FC<BlockProps>;

package/dist/types/elements/Box.d.ts

@@ -1,6 +1,18 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
-export interface BoxProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+/**
+ * Props for the Box component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
+ * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the box.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
+ * @property {boolean} [hasShadow=true] - Whether the box has a shadow (default: true).
+ * @property {React.ReactNode} [children] - Content to be rendered inside the box.
+ */
+export interface BoxProps
+/** @ignore */
+ extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     className?: string;
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
@@ -8,5 +20,15 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement>, Omit<Bul
     hasShadow?: boolean;
     children?: React.ReactNode;
 }
+/**
+ * Box component for rendering a styled Bulma box element.
+ *
+ * Supports Bulma helper classes for styling and layout, with optional shadow control.
+ *
+ * @function
+ * @param {BoxProps} props - Props for the Box component.
+ * @returns {JSX.Element} The rendered box element.
+ * @see {@link https://bulma.io/documentation/elements/box/ | Bulma Box documentation}
+ */
 export declare const Box: React.FC<BoxProps>;
 export default Box;

package/dist/types/elements/Button.d.ts

@@ -1,5 +1,31 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Button component.
+ *
+ * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'light' | 'dark' | 'black' | 'text' | 'ghost'} [color] - Bulma color modifier for the button.
+ * @property {'small' | 'normal' | 'medium' | 'large'} [size] - Button size.
+ * @property {boolean} [isLight] - Use the light version of the color.
+ * @property {boolean} [isRounded] - Button is fully rounded.
+ * @property {boolean} [isLoading] - Button shows a loading spinner.
+ * @property {boolean} [isStatic] - Button is static and non-interactive.
+ * @property {boolean} [isFullWidth] - Button takes the full width of parent.
+ * @property {boolean} [isOutlined] - Use outlined button style.
+ * @property {boolean} [isInverted] - Use inverted color style.
+ * @property {boolean} [isFocused] - Button is styled as focused.
+ * @property {boolean} [isActive] - Button is styled as active.
+ * @property {boolean} [isHovered] - Button is styled as hovered.
+ * @property {boolean} [isDisabled] - Button is disabled.
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
+ * @property {React.ElementType} [as] - Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else (including `'a'`) uses anchor-style prop handling.
+ * @property {string} [href] - Specifies the URL for anchor buttons.
+ * @property {React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement>} [onClick] - Click handler for the button or anchor.
+ * @property {string} [target] - Target for anchor element.
+ * @property {string} [rel] - Rel attribute for anchor element.
+ * @property {React.ReactNode} [children] - Content to be rendered inside the button.
+ */
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'onClick'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'light' | 'dark' | 'black' | 'text' | 'ghost';
     size?: 'small' | 'normal' | 'medium' | 'large';

package/dist/types/elements/Buttons.d.ts

@@ -1,5 +1,17 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Buttons component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
+ * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the buttons group.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
+ * @property {boolean} [isCentered] - Center the group of buttons.
+ * @property {boolean} [isRight] - Align the group of buttons to the right.
+ * @property {boolean} [hasAddons] - Group buttons together as addons.
+ * @property {React.ReactNode} children - The button elements to render inside the group.
+ */
 interface ButtonsProps extends React.HTMLAttributes<HTMLDivElement>, BulmaClassesProps {
     className?: string;
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -10,5 +22,8 @@ interface ButtonsProps extends React.HTMLAttributes<HTMLDivElement>, BulmaClasse
     hasAddons?: boolean;
     children: React.ReactNode;
 }
-export declare const Buttons: React.FC<ButtonsProps>;
+export declare const Buttons: React.FC<ButtonsProps> & {
+    Button: React.FC<import("./Button").ButtonProps>;
+    LinkButton: React.FC<import("./LinkButton").LinkButtonProps>;
+};
 export {};

package/dist/types/elements/Code.d.ts

@@ -1,9 +1,28 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Code component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
+ * @property {React.ReactNode} [children] - Code content to be rendered inside the element.
+ */
 export interface CodeProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     className?: string;
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
     children?: React.ReactNode;
 }
+/**
+ * Code component for rendering inline code snippets.
+ *
+ * A Code wraps the HTML `<code>` element with Bulma helper class integration.
+ * Use it for short inline code snippets, variable names, or technical terms.
+ * For multi-line code blocks, use the Pre component.
+ *
+ * @function
+ * @param {CodeProps} props - Props for the Code component.
+ * @returns {JSX.Element} The rendered code element.
+ */
 export declare const Code: React.FC<CodeProps>;

package/dist/types/elements/Content.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Content component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
+ * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the content.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
+ * @property {'small' | 'normal' | 'medium' | 'large'} [size] - Size modifier for the content.
+ * @property {React.ReactNode} [children] - Content to be rendered inside the block.
+ */
 interface ContentProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     className?: string;
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -8,5 +18,16 @@ interface ContentProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaC
     size?: 'small' | 'normal' | 'medium' | 'large';
     children?: React.ReactNode;
 }
+/**
+ * Content component for rendering a styled Bulma content block.
+ *
+ * Applies typographic styles to HTML content (e.g., paragraphs, headings, lists) with Bulma's content class.
+ * Supports size modifiers and Bulma helper classes for additional styling.
+ *
+ * @function
+ * @param {ContentProps} props - Props for the Content component.
+ * @returns {JSX.Element} The rendered content block.
+ * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}
+ */
 export declare const Content: React.FC<ContentProps>;
 export default Content;