@allxsmith/bestax-bulma 5.8.0 → 5.8.2

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

@@ -4,46 +4,45 @@ import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 export type SidebarPosition = 'left' | 'right';
 /**
  * Props for the Sidebar component.
- *
- * @property {boolean} isOpen - Whether the sidebar is open.
- * @property {() => void} [onClose] - Callback when sidebar should close.
- * @property {SidebarPosition} [position] - Which side the sidebar appears from. Default: 'left'.
- * @property {string} [width] - Custom width. Default: '260px'.
- * @property {boolean} [fullWidth] - Sidebar takes full width (mobile-style).
- * @property {boolean} [overlay] - Show overlay behind sidebar. Default: true.
- * @property {boolean} [overlayClose] - Close sidebar when overlay is clicked. Default: true.
- * @property {boolean} [escapeClose] - Close sidebar on Escape key. Default: true.
- * @property {boolean} [canCancel] - Allow closing the sidebar. Default: true.
- * @property {React.ReactNode} [children] - Content to display in the sidebar.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the sidebar element.
  */
 export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>, BulmaClassesProps {
+    /** Whether the sidebar is open (required). */
     isOpen: boolean;
+    /** Callback when sidebar should close. */
     onClose?: () => void;
+    /** Which side the sidebar appears from. Default: 'left'. */
     position?: SidebarPosition;
+    /** Custom width of the sidebar. */
     width?: string;
+    /** Sidebar takes full width (mobile-style). */
     fullWidth?: boolean;
+    /** Show overlay behind sidebar. Default: true. */
     overlay?: boolean;
+    /** Close sidebar when overlay is clicked. Default: true. */
     overlayClose?: boolean;
+    /** Close sidebar on Escape key. Default: true. */
     escapeClose?: boolean;
+    /** Allow closing the sidebar. Default: true. */
     canCancel?: boolean;
+    /** Content to display in the sidebar. */
     children?: React.ReactNode;
-    /** Render without portal. Default false. */
+    /** Renders inline instead of using a portal. */
     inline?: boolean;
 }
 /**
  * Props for the SidebarHeader component.
- *
- * @property {React.ReactNode} [children] - Header content.
  */
 interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Header content. */
     children?: React.ReactNode;
 }
 /**
  * Props for the SidebarTitle component.
- *
- * @property {React.ReactNode} [children] - Title content.
  */
 interface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /** Title content. */
     children?: React.ReactNode;
 }
 /**
@@ -53,18 +52,16 @@ interface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
 type SidebarCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * Props for the SidebarBody component.
- *
- * @property {React.ReactNode} [children] - Body content.
  */
 interface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Body content. */
     children?: React.ReactNode;
 }
 /**
  * Props for the SidebarFooter component.
- *
- * @property {React.ReactNode} [children] - Footer content.
  */
 interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Footer content. */
     children?: React.ReactNode;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>> & {

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

@@ -6,77 +6,65 @@ export type StepsSize = 'small' | 'medium' | 'large';
 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. */
+    /**
+     * Icon shown when the step is completed.
+     * @defaultValue '✓'
+     */
     completedIcon?: React.ReactNode;
     /** Whether this step is clickable */
     clickable?: boolean;
-    /** Additional class for this step */
+    /** Additional CSS classes. */
     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).
+ * @extraProp {React.ReactNode} [children] - Step children (alternative to items).
+ * @extraProp {string} [className] - Additional CSS classes.
  */
 export interface StepsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /** Current active step (0-indexed). */
     value?: number;
+    /** Array of step items. */
     items?: StepItemProps[];
+    /** Size of the steps. */
     size?: StepsSize;
+    /** Color variant. */
     color?: StepsColor;
+    /** Show step markers. Default: true. */
     hasMarker?: boolean;
+    /** Enable animations. Default: true. */
     animated?: boolean;
+    /** Use rounded markers. Default: true. */
     rounded?: boolean;
+    /** Vertical layout. */
     vertical?: boolean;
+    /** Position of labels. */
     labelPosition?: 'bottom' | 'right' | 'left';
+    /** Mobile display mode. */
     mobileMode?: 'minimal' | 'compact' | 'right';
+    /** Displays step numbers in the markers. */
     showStepNumbers?: boolean;
+    /** Shows previous/next navigation buttons. */
     hasNavigation?: boolean;
+    /** Label for the previous button. */
     prevLabel?: string;
+    /** Label for the next button. */
     nextLabel?: string;
+    /** Callback when previous button is clicked. */
     onPrev?: () => void;
+    /** Callback when next button is clicked. */
     onNext?: () => void;
+    /** Callback when a step is clicked. */
     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 */
@@ -93,7 +81,10 @@ export interface StepProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, '
     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. */
+    /**
+     * Icon shown when the step is completed.
+     * @defaultValue '✓'
+     */
     completedIcon?: React.ReactNode;
 }
 /**

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

@@ -2,52 +2,57 @@ 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'> {
+    /** Tab alignment. */
     align?: 'centered' | 'right' | 'left';
+    /** Tab size. */
     size?: 'small' | 'medium' | 'large';
+    /** Tabs expand to fill the horizontal space. */
     fullwidth?: boolean;
+    /** Tabs use the boxed style. */
     boxed?: boolean;
+    /** Tabs use the toggle style. */
     toggle?: boolean;
+    /** Tabs use the rounded toggle style (only with `toggle`). */
     rounded?: boolean;
+    /**
+     * Bulma color for tab underlines and active state (renders `is-<color>`).
+     *
+     * Bulma ships no tabs color CSS, so this prop has never had a visual effect
+     * for any value. Passing it logs a console warning in development.
+     * @deprecated No `.tabs.is-<color>` CSS exists; the prop renders unstyled
+     * and will be removed in the next major version.
+     */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    /** Controlled active tab index. */
     value?: number;
+    /** Callback when active tab changes. */
     onChange?: (index: number) => void;
+    /** Initial active tab index (uncontrolled). */
     defaultValue?: number;
+    /** Renders tabs vertically. */
     vertical?: boolean;
+    /** Side placement when `vertical` is true. */
     side?: 'left' | 'right';
+    /** Makes tabs take up the full width equally. */
     expanded?: boolean;
+    /** Additional CSS classes. */
     className?: string;
+    /** Tab list and tab items. */
     children?: React.ReactNode;
 }
 /**
  * Props for the TabList component.
- *
- * @property {string} [className] - Additional CSS classes.
- * @property {React.ReactNode} [children] - Tab elements.
  */
 export interface TabListProps extends React.HTMLAttributes<HTMLUListElement> {
+    /** Additional CSS classes. */
     className?: string;
+    /** Tab elements. */
     children?: React.ReactNode;
 }
 /**
- * Tab list container. Renders a `<ul>` with `role="tablist"`.
+ * The `<ul>` container for tab items.
  *
  * @function
  * @param {TabListProps} props - Props for the TabList component.
@@ -57,26 +62,25 @@ 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'> {
+    /** **Required.** Tab index for matching with content. */
     index: number;
+    /** Disables the tab. */
     disabled?: boolean;
+    /** Icon name for the tab. */
     icon?: string;
+    /** Icon library to use. */
     iconLibrary?: IconLibrary;
+    /** Icon style variant (e.g., 'solid', 'outlined', 'rounded'). */
     iconVariant?: string;
+    /** Size of the tab icon. */
     iconSize?: 'small' | 'medium' | 'large';
+    /** Additional icon modifiers. */
     iconFeatures?: string | string[];
+    /** Additional CSS classes. */
     className?: string;
+    /** Tab label content. */
     children?: React.ReactNode;
 }
 /**
@@ -90,20 +94,19 @@ export interface TabProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'o
 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> {
+    /** Whether the tab is active. */
     active?: boolean;
+    /** Additional CSS classes. */
     className?: string;
+    /** Tab content. */
     children?: React.ReactNode;
+    /** Click handler. */
     onClick?: React.MouseEventHandler<HTMLLIElement>;
 }
 /**
- * Legacy tab item. Does not consume context — active state is controlled via prop.
+ * Each tab; accepts `active`, `onClick`, etc.
  *
  * @function
  * @param {TabItemProps} props - Props for the TabItem component.
@@ -113,24 +116,22 @@ export interface TabItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
 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> {
+    /** Additional CSS classes. */
     className?: string;
+    /** TabContentItem elements. */
     children?: React.ReactNode;
 }
 /**
  * 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> {
+    /** **Required.** Tab index for matching with content. */
     index: number;
+    /** Additional CSS classes. */
     className?: string;
+    /** Panel content. */
     children?: React.ReactNode;
 }
 /**

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

@@ -6,49 +6,47 @@ export type ToastType = 'default' | 'primary' | 'link' | 'info' | 'success' | 'w
 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.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the toast element.
  */
 export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
+    /** The message to display (required). */
     message: string;
+    /** Color variant — colors the toast **background**. */
     type?: ToastType;
+    /** Color variant — colors the **action button** text. */
     actionType?: ToastType;
+    /** Position on the screen. Default: 'top-right'. */
     position?: ToastPosition;
+    /** Duration in ms before auto-close. `0` disables auto-close. */
     duration?: number;
+    /** Keeps the toast visible until dismissed. */
     indefinite?: boolean;
+    /** Whether clicking the toast (or outside it) dismisses it. */
     dismissible?: boolean;
+    /** Show an explicit close (X) button. Default: false. */
     closable?: boolean;
+    /** Pill-shaped (rounded corners). */
     rounded?: boolean;
+    /** Pause auto-close timer on hover. Default: false. */
     pauseOnHover?: boolean;
+    /** Whether the toast can be dismissed with Escape. Default: true. */
     cancelable?: boolean;
+    /** Text for an action button (e.g. "Undo"). */
     actionText?: string;
+    /** Text for a cancel button. */
     cancelText?: string;
+    /** Callback when the action button is clicked. */
     onAction?: () => void;
+    /** Callback when toast closes. */
     onClose?: () => void;
+    /** CSS selector or DOM node to mount the toast into. */
     container?: string | HTMLElement;
+    /** Renders inline instead of using a portal. */
     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.
+ * The `Toast` component provides brief notification messages with optional action and cancel buttons.
  *
  * @function
  * @param {ToastProps} props - Props for the Toast component.
@@ -66,23 +64,20 @@ export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 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'> {
+    /** The message to display. */
     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 {
+    /** Unique identifier for this toast. */
     id: string;
+    /** Configuration options for the toast. */
     props: ToastOptions;
 }
 /**

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

@@ -8,43 +8,39 @@ export type TooltipColor = 'primary' | 'link' | 'info' | 'success' | 'warning' |
 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.
+ * @extraProp {React.ReactNode} [children] - The element that triggers the tooltip.
+ * @extraProp {string} [className] - Additional CSS classes.
  */
 export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** The tooltip text content. */
     label?: string;
+    /** Rich tooltip content (alternative to `label`). */
     content?: React.ReactNode;
+    /** Position of the tooltip. Default: 'top'. */
     position?: TooltipPosition;
+    /** Color variant for the tooltip. */
     color?: TooltipColor;
+    /** Size of the tooltip. */
     size?: TooltipSize;
+    /** Force tooltip to be always visible. */
     active?: boolean;
+    /** Allow tooltip to wrap to multiple lines. */
     multiline?: boolean;
+    /** Enable fade animation. Default: true. */
     animated?: boolean;
+    /** Use square corners instead of rounded. */
     square?: boolean;
+    /** Show dashed underline on trigger. */
     dashed?: boolean;
+    /** Delay before showing tooltip (ms). */
     delay?: number;
+    /** Delay in ms before hiding the tooltip. */
     closeDelay?: number;
+    /** Additional classes for the tooltip element. */
     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.
+ * The `Tooltip` component displays helpful information when users hover over or focus on an element.
  *
  * @function
  * @param {TooltipProps} props - Props for the Tooltip component.

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

@@ -2,25 +2,26 @@ 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'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Text color alias: renders `has-text-<color>`, exactly like `textColor`.
+     * Not a filled variant (no `.block.is-<color>` CSS exists). Prefer
+     * `textColor`, which takes precedence when both are set; use `bgColor` for
+     * a colored surface.
+     */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Background color helper. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Content to render inside the block. */
     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.
+ * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
  *
  * @function
  * @param {BlockProps} props - Props for the Block component.

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

@@ -2,28 +2,30 @@ import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
 /**
  * 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'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Text color alias: renders `has-text-<color>`, exactly like `textColor`.
+     * Not a filled box variant (no `.box.is-<color>` CSS exists). Prefer
+     * `textColor`, which takes precedence when both are set; use `bgColor` for
+     * a colored surface.
+     */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Background color helper. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Whether the box has a shadow (default: true). */
     hasShadow?: boolean;
+    /** Content to render inside the box. */
     children?: React.ReactNode;
 }
 /**
- * Box component for rendering a styled Bulma box element.
- *
- * Supports Bulma helper classes for styling and layout, with optional shadow control.
+ * The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
  *
  * @function
  * @param {BoxProps} props - Props for the Box component.