@allxsmith/bestax-bulma 5.8.0 → 5.8.2

package/dist/types/columns/Column.d.ts

@@ -6,64 +6,59 @@ import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
 export type BulmaColumnSize = number | 'full' | 'half' | 'one-third' | 'two-thirds' | 'one-quarter' | 'three-quarters' | 'one-fifth' | 'two-fifths' | 'three-fifths' | 'four-fifths';
 /**
  * Props for the Column 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 column.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- *
- * @property {BulmaColumnSize} [size] - Column size.
- * @property {BulmaColumnSize} [sizeMobile] - Mobile column size.
- * @property {BulmaColumnSize} [sizeTablet] - Tablet column size.
- * @property {BulmaColumnSize} [sizeDesktop] - Desktop column size.
- * @property {BulmaColumnSize} [sizeWidescreen] - Widescreen column size.
- * @property {BulmaColumnSize} [sizeFullhd] - FullHD column size.
- *
- * @property {BulmaColumnSize} [offset] - Column offset.
- * @property {BulmaColumnSize} [offsetMobile] - Mobile column offset.
- * @property {BulmaColumnSize} [offsetTablet] - Tablet column offset.
- * @property {BulmaColumnSize} [offsetDesktop] - Desktop column offset.
- * @property {BulmaColumnSize} [offsetWidescreen] - Widescreen column offset.
- * @property {BulmaColumnSize} [offsetFullhd] - FullHD column offset.
- *
- * @property {boolean} [isNarrow] - The column is narrow.
- * @property {boolean} [isNarrowMobile] - The column is narrow on mobile.
- * @property {boolean} [isNarrowTablet] - The column is narrow on tablet.
- * @property {boolean} [isNarrowTouch] - The column is narrow on touch devices.
- * @property {boolean} [isNarrowDesktop] - The column is narrow on desktop.
- * @property {boolean} [isNarrowWidescreen] - The column is narrow on widescreen.
- * @property {boolean} [isNarrowFullhd] - The column is narrow on fullhd.
- *
- * @property {React.ReactNode} [children] - Children to render inside the column.
  */
 export interface ColumnProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes for the column. */
     className?: string;
+    /** Text color. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma color modifier for the column. */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Background color. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Column size (see Bulma docs). */
     size?: BulmaColumnSize;
+    /** Size for mobile breakpoint. */
     sizeMobile?: BulmaColumnSize;
+    /** Size for tablet breakpoint. */
     sizeTablet?: BulmaColumnSize;
+    /** Size for desktop breakpoint. */
     sizeDesktop?: BulmaColumnSize;
+    /** Size for widescreen breakpoint. */
     sizeWidescreen?: BulmaColumnSize;
+    /** Size for fullhd breakpoint. */
     sizeFullhd?: BulmaColumnSize;
+    /** Offset for column. */
     offset?: BulmaColumnSize;
+    /** Offset for mobile. */
     offsetMobile?: BulmaColumnSize;
+    /** Offset for tablet. */
     offsetTablet?: BulmaColumnSize;
+    /** Offset for desktop. */
     offsetDesktop?: BulmaColumnSize;
+    /** Offset for widescreen. */
     offsetWidescreen?: BulmaColumnSize;
+    /** Offset for fullhd. */
     offsetFullhd?: BulmaColumnSize;
+    /** Column is only as wide as its content. */
     isNarrow?: boolean;
+    /** The column is narrow on mobile. */
     isNarrowMobile?: boolean;
+    /** The column is narrow on tablet. */
     isNarrowTablet?: boolean;
+    /** The column is narrow on touch devices. */
     isNarrowTouch?: boolean;
+    /** The column is narrow on desktop. */
     isNarrowDesktop?: boolean;
+    /** The column is narrow on widescreen. */
     isNarrowWidescreen?: boolean;
+    /** The column is narrow on fullhd. */
     isNarrowFullhd?: boolean;
+    /** Children to render inside the column. */
     children?: React.ReactNode;
 }
 /**
- * Bulma Column component for responsive grid layouts.
+ * The `Column` component provides a single responsive layout column using Bulma's flexbox-based column system.
  *
  * @function
  * @param {ColumnProps} props - Props for the Column component.

package/dist/types/columns/Columns.d.ts

@@ -9,60 +9,53 @@ import type { BulmaGapValue } from '../grid/Grid';
 export type BulmaGapSize = BulmaGapValue;
 /**
  * Props for the Columns 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 columns.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {boolean} [isCentered] - Center the columns container.
- * @property {boolean} [isGapless] - Remove all column gaps.
- * @property {boolean} [isMultiline] - Allow columns to wrap to multiple lines.
- * @property {boolean} [isVCentered] - Vertically center columns.
- * @property {boolean} [isMobile] - Only apply columns styles on mobile.
- * @property {boolean} [isDesktop] - Only apply columns styles on desktop.
- * @property {BulmaGapValue} [gap] - Gap size for all breakpoints. Wins over `gapSize` if both are set.
- * @property {BulmaGapValue} [gapMobile] - Gap size for mobile. Wins over `gapSizeMobile` if both are set.
- * @property {BulmaGapValue} [gapTablet] - Gap size for tablet. Wins over `gapSizeTablet` if both are set.
- * @property {BulmaGapValue} [gapDesktop] - Gap size for desktop. Wins over `gapSizeDesktop` if both are set.
- * @property {BulmaGapValue} [gapWidescreen] - Gap size for widescreen. Wins over `gapSizeWidescreen` if both are set.
- * @property {BulmaGapValue} [gapFullhd] - Gap size for fullhd. Wins over `gapSizeFullhd` if both are set.
- * @property {BulmaGapSize} [gapSize] - Gap size for all breakpoints. @deprecated Use `gap` instead.
- * @property {BulmaGapSize} [gapSizeMobile] - Gap size for mobile. @deprecated Use `gapMobile` instead.
- * @property {BulmaGapSize} [gapSizeTablet] - Gap size for tablet. @deprecated Use `gapTablet` instead.
- * @property {BulmaGapSize} [gapSizeDesktop] - Gap size for desktop. @deprecated Use `gapDesktop` instead.
- * @property {BulmaGapSize} [gapSizeWidescreen] - Gap size for widescreen. @deprecated Use `gapWidescreen` instead.
- * @property {BulmaGapSize} [gapSizeFullhd] - Gap size for fullhd. @deprecated Use `gapFullhd` instead.
- * @property {React.ReactNode} [children] - Columns to render within the container.
  */
 export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes for the columns container. */
     className?: string;
+    /** Text color. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma color modifier for all columns. */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Background color for all columns. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Horizontally center columns within the container. */
     isCentered?: boolean;
+    /** Remove gap between columns. */
     isGapless?: boolean;
+    /** Allow columns to wrap to multiple lines. */
     isMultiline?: boolean;
+    /** Vertically center columns within the container. */
     isVCentered?: boolean;
+    /** Apply columns layout on mobile and up. */
     isMobile?: boolean;
+    /** Apply columns layout on desktop and up. */
     isDesktop?: boolean;
+    /** Gap size for all breakpoints. Same scale as `Grid`'s `gap` prop; wins over `gapSize` if both are set. */
     gap?: BulmaGapValue;
+    /** Gap size for mobile. Wins over `gapSizeMobile` if both are set. */
     gapMobile?: BulmaGapValue;
+    /** Gap size for tablet. Wins over `gapSizeTablet` if both are set. */
     gapTablet?: BulmaGapValue;
+    /** Gap size for desktop. Wins over `gapSizeDesktop` if both are set. */
     gapDesktop?: BulmaGapValue;
+    /** Gap size for widescreen. Wins over `gapSizeWidescreen` if both are set. */
     gapWidescreen?: BulmaGapValue;
+    /** Gap size for fullhd. Wins over `gapSizeFullhd` if both are set. */
     gapFullhd?: BulmaGapValue;
-    /** @deprecated Use `gap` instead — `gap` wins if both are set. */
+    /** Gap size for all breakpoints. @deprecated Use `gap` instead — `gap` wins if both are set. */
     gapSize?: BulmaGapSize;
-    /** @deprecated Use `gapMobile` instead — `gapMobile` wins if both are set. */
+    /** Gap size for mobile. @deprecated Use `gapMobile` instead — `gapMobile` wins if both are set. */
     gapSizeMobile?: BulmaGapSize;
-    /** @deprecated Use `gapTablet` instead — `gapTablet` wins if both are set. */
+    /** Gap size for tablet. @deprecated Use `gapTablet` instead — `gapTablet` wins if both are set. */
     gapSizeTablet?: BulmaGapSize;
-    /** @deprecated Use `gapDesktop` instead — `gapDesktop` wins if both are set. */
+    /** Gap size for desktop. @deprecated Use `gapDesktop` instead — `gapDesktop` wins if both are set. */
     gapSizeDesktop?: BulmaGapSize;
-    /** @deprecated Use `gapWidescreen` instead — `gapWidescreen` wins if both are set. */
+    /** Gap size for widescreen. @deprecated Use `gapWidescreen` instead — `gapWidescreen` wins if both are set. */
     gapSizeWidescreen?: BulmaGapSize;
-    /** @deprecated Use `gapFullhd` instead — `gapFullhd` wins if both are set. */
+    /** Gap size for fullhd. @deprecated Use `gapFullhd` instead — `gapFullhd` wins if both are set. */
     gapSizeFullhd?: BulmaGapSize;
+    /** Columns to render within the container. */
     children?: React.ReactNode;
 }
 export declare const Columns: React.FC<ColumnsProps> & {

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

@@ -10,44 +10,39 @@ export type AvatarSize = (typeof avatarSizes)[number];
 export type AvatarShape = 'circle' | 'rounded' | 'square';
 /**
  * Props for the Avatar component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {string} [src] - Image URL. On load error (or if absent), falls back to initials, then icon.
- * @property {string} [alt] - Alternate text for the image (required for meaningful images). An explicit `alt=""` marks a non-interactive avatar as decorative (skipped by screen readers).
- * @property {string} [name] - Derives initials and a deterministic background color when no `src`/`initials` is shown.
- * @property {string} [initials] - Explicit initials override (else derived from `name`).
- * @property {React.ReactNode} [icon] - Final fallback rendered when there is no `src`, `name`, or `initials`.
- * @property {AvatarSize | number} [size] - Preset size, or a pixel size when a number.
- * @property {AvatarShape} [shape] - Avatar shape. Default `'circle'`.
- * @property {AvatarColor} [color] - Background color for initials/icon avatars (else auto-derived from `name`).
- * @property {React.ElementType} [as] - Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`.
- * @property {string} [href] - When set, renders the avatar as a link.
- * @property {string} [target] - Anchor target (forwarded only when rendering a link).
- * @property {string} [rel] - Anchor rel (forwarded only when rendering a link).
- * @property {React.ImgHTMLAttributes<HTMLImageElement>} [imageProps] - Extra props forwarded to the underlying `<img>` (e.g. `loading`, `crossOrigin`); its `onError` is chained before the fallback fires.
  */
 export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Image URL. On load error (or if absent), falls back to initials, then `icon`. */
     src?: string;
+    /** Alternate text for the image (used for the accessible name in every render mode). An explicit `alt=""` marks a non-interactive avatar as decorative. */
     alt?: string;
+    /** Derives initials and a deterministic background color when no `src` is shown. */
     name?: string;
+    /** Explicit initials override (else derived from `name`). */
     initials?: string;
+    /** Final fallback, rendered when there is no `src`, `name`, or `initials`. */
     icon?: React.ReactNode;
+    /** Preset size, or a pixel size when a number. */
     size?: AvatarSize | number;
+    /** Avatar shape. Default `'circle'`. */
     shape?: AvatarShape;
+    /** Background color for initials/icon avatars (else auto-derived from `name`). */
     color?: AvatarColor;
+    /** Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`. */
     as?: React.ElementType;
+    /** When set, renders the avatar as a link. */
     href?: string;
+    /** Anchor target — forwarded only when rendering a link (an `a` or a custom `as` component). */
     target?: string;
+    /** Anchor rel — forwarded only when rendering a link (an `a` or a custom `as` component). */
     rel?: string;
+    /** Extra props forwarded to the underlying `<img>` (e.g. `loading`, `crossOrigin`); its `onError` is chained before the fallback fires. */
     imageProps?: React.ImgHTMLAttributes<HTMLImageElement>;
 }
 /**
- * Avatar component for representing a person or entity as a compact image.
- *
- * Falls back automatically: `src` (image) -> initials (from `initials`/`name`) -> `icon` ->
- * a generic default icon. Initials avatars get a stable auto background color derived from
- * `name` unless `color` is set.
+ * The `Avatar` component represents a person or entity as a compact image.
  *
  * @function
  * @param {AvatarProps} props - Props for the Avatar component.

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

@@ -5,24 +5,23 @@ import { AvatarProps } from './Avatar';
 export type AvatarsSpacing = 'sm' | 'md' | 'lg';
 /**
  * Props for the Avatars component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {number} [max] - Show only the first `max` children, replacing the overflow with a "+N" surplus avatar. A single overflow avatar is shown directly rather than as a pointless "+1".
- * @property {AvatarProps['size']} [size] - Uniform size applied to every child `Avatar` (and the surplus avatar).
- * @property {AvatarProps['shape']} [shape] - Uniform shape applied to every child `Avatar` (and the surplus avatar).
- * @property {AvatarsSpacing | number} [spacing] - Space between avatars: a `'sm'`/`'md'`/`'lg'` preset or a pixel `number`. Default `'md'`.
- * @property {boolean} [spaced] - Lay the avatars out side by side (non-overlapping) with `spacing` as the gap. Default `false`.
- * @property {(count: number) => string} [surplusLabel] - Builds the surplus avatar's accessible name from the hidden count, for localization. Default: `` `${count} more` ``.
- * @property {React.ReactNode} [children] - `Avatar` elements to render inside the group.
  */
 export interface AvatarsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Show only the first `max` children, replacing the overflow with a "+N" surplus avatar. A single overflow avatar is shown directly rather than as a pointless "+1". */
     max?: number;
+    /** Uniform size applied to every child `Avatar` (and the surplus avatar). */
     size?: AvatarProps['size'];
+    /** Uniform shape applied to every child `Avatar` (and the surplus avatar); a child's own `shape` wins when this is unset. */
     shape?: AvatarProps['shape'];
+    /** Space between avatars: a preset or a pixel `number`. The overlap distance, or the gap when `spaced`. */
     spacing?: AvatarsSpacing | number;
+    /** Lay the avatars out side by side (non-overlapping), using `spacing` as the gap. */
     spaced?: boolean;
+    /** Builds the surplus avatar's accessible name from the hidden count, for localization. Default: `` `${count} more` ``. */
     surplusLabel?: (count: number) => string;
+    /** `Avatar` elements to render inside the group. */
     children?: React.ReactNode;
 }
 export declare const Avatars: React.FC<AvatarsProps> & {

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

@@ -9,43 +9,35 @@ export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-
 export type BadgeOverlap = 'circle' | 'square';
 /**
  * Props for the Badge component.
- *
- * @property {string} [className] - Additional CSS classes applied to the root (the wrapper when `children` are present, else the badge pill).
- * @property {string} [badgeClassName] - Additional CSS classes applied to the badge pill itself.
- * @property {React.ReactNode} [content] - Count, short text, or a custom node to display; omit with `dot` for a plain dot. `max`/`showZero` apply only to numeric content.
- * @property {number} [max] - Numeric `content` above this renders as `"{max}+"`. Default `99`; a
- * negative or non-integer value falls back to the default.
- * @property {boolean} [dot] - Render a small dot with no content.
- * @property {boolean} [showZero] - Show the badge when `content` is `0`. Default `false`.
- * @property {BadgeColor} [color] - Status color. Default `'danger'`.
- * @property {BadgePosition} [position] - Corner to overlay the badge on, relative to `children`. Default `'top-right'`.
- * @property {BadgeOverlap} [overlap] - Nudges the offset for a round (`'circle'`) vs rectangular (`'square'`) child. Default `'square'`.
- * @property {boolean} [pulse] - Processing/pulse animation; no-ops under `prefers-reduced-motion: reduce`.
- * @property {boolean} [invisible] - Hide the badge without unmounting it.
- * @property {React.ReactNode} [children] - The element the badge overlays. Omit to render a standalone badge.
  */
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>, Omit<BulmaClassesProps, 'color'> {
+    /** Additional CSS classes for the root — the wrapper when `children` are present, else the badge pill. */
     className?: string;
+    /** Additional CSS classes applied to the badge pill itself (unprefixed, like `Tooltip`'s `tooltipClassName`). */
     badgeClassName?: string;
+    /** Count, short text, or a custom node to display; omit with `dot` for a plain dot. `max`/`showZero` apply only to numeric content. */
     content?: React.ReactNode;
+    /** Numeric `content` above this renders as `"{max}+"`. A negative or non-integer value falls back to the default. */
     max?: number;
+    /** Render a small dot with no content. */
     dot?: boolean;
+    /** Show the badge when `content` is `0`. Default `false`. */
     showZero?: boolean;
+    /** Status color. Default `'danger'`. */
     color?: BadgeColor;
+    /** Corner to overlay the badge on, relative to `children`. Ignored for standalone badges (no `children`). */
     position?: BadgePosition;
+    /** Nudges the offset for a round (`'circle'`) vs rectangular (`'square'`) child. Ignored for standalone badges (no `children`). */
     overlap?: BadgeOverlap;
+    /** Processing/pulse animation; no-ops under `prefers-reduced-motion: reduce`. */
     pulse?: boolean;
+    /** Hide the badge pill without unmounting it (the wrapper and `children` stay visible). */
     invisible?: boolean;
+    /** The element the badge overlays. Omit to render a standalone badge. */
     children?: React.ReactNode;
 }
 /**
- * Badge component for a small status/count indicator overlaid on the corner of another
- * element (or rendered standalone).
- *
- * Renders `{max}+` when a numeric `content` exceeds `max` and no-ops its `pulse` animation
- * under `prefers-reduced-motion: reduce`. At `0` without `showZero` the pill is visually
- * hidden but stays mounted, so its `role="status"` live region announces a later `0 -> 1`
- * change.
+ * The `Badge` component is a small status/count indicator overlaid on the corner of another element, or rendered standalone.
  *
  * @function
  * @param {BadgeProps} props - Props for the Badge component.

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

@@ -17,24 +17,21 @@ declare const validBreadcrumbSizes: readonly ["small", "medium", "large"];
 export type BreadcrumbSize = (typeof validBreadcrumbSizes)[number];
 /**
  * Props for the Breadcrumb component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {BreadcrumbAlignment} [alignment] - Alignment modifier for the breadcrumb.
- * @property {BreadcrumbSeparator} [separator] - Separator style for the breadcrumb.
- * @property {BreadcrumbSize} [size] - Size modifier for the breadcrumb.
- * @property {React.ReactNode} [children] - Breadcrumb items (e.g., "a" or "span" html elements).
  */
 export interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Alignment of the breadcrumb (`is-centered`, `is-right`). */
     alignment?: BreadcrumbAlignment;
+    /** Type of separator between breadcrumb items. */
     separator?: BreadcrumbSeparator;
+    /** Breadcrumb size. */
     size?: BreadcrumbSize;
+    /** Breadcrumb items (`<li>`s with `<a>` or `<span>`). */
     children?: React.ReactNode;
 }
 /**
- * Breadcrumb component for rendering a styled Bulma breadcrumb navigation.
- *
- * Supports alignment, separator styles, and sizes.
+ * The `Breadcrumb` component renders a Bulma-styled breadcrumb navigation.
  *
  * @function
  * @param {BreadcrumbProps} props - Props for the Breadcrumb component.

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

@@ -2,106 +2,104 @@ import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
 /**
  * Props for the Card component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color for the card.
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the card.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color for the card.
- * @property {boolean} [hasShadow] - Whether the card has a shadow (default: true).
- * @property {React.ReactNode} [header] - Card header content, rendered inside `.card-header-title`.
- * @property {boolean} [headerCentered] - If true, centers the header title.
- * @property {React.ReactNode} [headerIcon] - Card header icon, rendered as a sibling to the header title.
- * @property {React.ReactNode|React.ReactNode[]} [footer] - Card footer content, each wrapped in `.card-footer-item`.
- * @property {React.ReactNode|string} [image] - Card image node or image src string.
- * @property {string} [imageAlt] - Alternate text for the card image.
- * @property {React.ReactNode} [children] - Card content.
+ * @extraProp {'centered' | 'justified' | 'left' | 'right'} [textAlign] - Text alignment.
  */
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Text color for the card. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Text color alias: renders `has-text-<color>`, exactly like `textColor`.
+     * Not a filled card variant (no `.card.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 for the card. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Whether the card has a shadow (default: `true`). */
     hasShadow?: boolean;
+    /** Card header content, rendered inside `.card-header-title`. */
     header?: React.ReactNode;
+    /** If true, centers the header title. */
     headerCentered?: boolean;
+    /** Card header icon, rendered as a sibling to the header title. */
     headerIcon?: React.ReactNode;
+    /** Card footer content; each item is wrapped in `.card-footer-item`. */
     footer?: React.ReactNode | React.ReactNode[];
+    /** Card image node or image src string. */
     image?: React.ReactNode | string;
+    /** Alternate text for the card image. */
     imageAlt?: string;
+    /** Card content (body). */
     children?: React.ReactNode;
 }
 /**
  * Props for the Card.Header compound component.
- *
- * @property {string} [className] - Additional CSS classes.
- * @property {React.ReactNode} [children] - Header content. Wrap in Card.Header.Title for Bulma styling.
- * @property {boolean} [centered] - Whether to center the header title text.
  */
 export interface CardHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /** Additional CSS classes. */
     className?: string;
+    /** Header content. Wrap in Card.Header.Title for Bulma styling. */
     children?: React.ReactNode;
+    /** Whether to center the header title text. */
     centered?: boolean;
 }
 /**
  * Props for the Card.Image compound component.
- *
- * @property {string} [className] - Additional CSS classes.
- * @property {React.ReactNode} [children] - Image content (e.g. a `<figure>` with an `<img>`).
  */
 export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes. */
     className?: string;
+    /** Image content (e.g. a `<figure>` with an `<img>`). */
     children?: React.ReactNode;
 }
 /**
  * Props for the Card.Content compound component.
- *
- * @property {string} [className] - Additional CSS classes.
- * @property {React.ReactNode} [children] - Card body content.
  */
 export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes. */
     className?: string;
+    /** Card body content. */
     children?: React.ReactNode;
 }
 /**
  * Props for the Card.Footer compound component.
- *
- * @property {string} [className] - Additional CSS classes.
- * @property {React.ReactNode} [children] - Footer content, typically Card.FooterItem elements.
  */
 export interface CardFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /** Additional CSS classes. */
     className?: string;
+    /** Footer content, typically Card.FooterItem elements. */
     children?: React.ReactNode;
 }
 /**
  * Props for the Card.FooterItem compound component.
- *
- * @property {string} [className] - Additional CSS classes.
- * @property {React.ReactNode} [children] - Footer item content (link, button, text, etc.).
  */
 export interface CardFooterItemProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Additional CSS classes. */
     className?: string;
+    /** Footer item content (link, button, text, etc.). */
     children?: React.ReactNode;
 }
 /**
  * Props for the Card.Header.Title compound component.
- *
- * @property {string} [className] - Additional CSS classes.
- * @property {React.ReactNode} [children] - Title text content.
- * @property {boolean} [centered] - Whether to center the title text.
  */
 export interface CardHeaderTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes. */
     className?: string;
+    /** Title text content. */
     children?: React.ReactNode;
+    /** Whether to center the title text. */
     centered?: boolean;
 }
 /**
  * Props for the Card.Header.Icon compound component.
- *
- * @property {string} [className] - Additional CSS classes.
- * @property {React.ReactNode} [children] - Icon content (e.g. an icon element).
  */
 export interface CardHeaderIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Additional CSS classes. */
     className?: string;
+    /** Icon content (e.g. an icon element). */
     children?: React.ReactNode;
 }
 /** Card component with Header, Image, Content, Footer, and FooterItem sub-components. */

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

@@ -2,11 +2,9 @@ import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 /**
  * Props for the CarouselItem component.
- *
- * @property {boolean} [active] - Whether this item is the active/visible slide.
  */
 export interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Whether this item is active */
+    /** Whether this item is active (set automatically). */
     active?: boolean;
 }
 /**
@@ -21,60 +19,62 @@ export declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemP
 type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
 /**
  * Props for the Carousel component.
- *
- * @property {number} [value] - Current active slide index (controlled).
- * @property {boolean} [autoplay] - Enable auto-play.
- * @property {number} [interval] - Auto-play interval in milliseconds. Default: 5000.
- * @property {boolean} [pauseOnHover] - Pause auto-play on hover. Default: true.
- * @property {boolean} [repeat] - Loop back to first slide after last. Default: true.
- * @property {boolean} [hasDrag] - Enable drag/swipe navigation. Default: true.
- * @property {boolean} [arrow] - Show navigation arrows. Default: true.
- * @property {boolean} [arrowHover] - Only show arrows on hover.
- * @property {boolean} [indicator] - Show slide indicators. Default: true.
- * @property {boolean} [indicatorInside] - Position indicators inside carousel.
- * @property {'bottom'|'top'} [indicatorPosition] - Indicator position. Default: 'bottom'.
- * @property {'circles'|'dots'|'lines'|'bars'} [indicatorStyle] - Indicator style. Default: 'dots'.
- * @property {string} [iconPrev] - Icon name for the previous arrow button.
- * @property {string} [iconNext] - Icon name for the next arrow button.
- * @property {IconLibrary} [iconLibrary] - Icon library to use.
- * @property {string} [iconVariant] - Icon style variant (e.g., 'solid', 'outlined').
- * @property {'small' | 'medium' | 'large'} [iconSize] - Icon size modifier.
- * @property {string | string[]} [iconFeatures] - Additional icon modifiers.
- * @property {boolean} [arrowBackground] - Show semi-transparent background on arrow buttons. Default: true.
- * @property {'light'|'dark'} [arrowColor] - Arrow icon color variant. Useful for transparent arrows on dark/light backgrounds.
- * @property {(value: number) => void} [onChange] - Callback when slide changes.
- * @property {React.ReactNode} [children] - Carousel slide items (CarouselItem elements).
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the carousel element.
  */
 export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>, BulmaClassesProps {
+    /**
+     * Current active slide index (controlled).
+     * @defaultValue 0
+     */
     value?: number;
+    /** Enable auto-play. */
     autoplay?: boolean;
+    /** Auto-play interval in milliseconds. Default: 5000. */
     interval?: number;
+    /** Pause auto-play on hover. Default: true. */
     pauseOnHover?: boolean;
+    /** Loop back to first slide after last. Default: true. */
     repeat?: boolean;
+    /** Enable drag/swipe navigation. Default: true. */
     hasDrag?: boolean;
+    /** Show navigation arrows. Default: true. */
     arrow?: boolean;
+    /** Only show arrows on hover. */
     arrowHover?: boolean;
+    /** Show slide indicators. Default: true. */
     indicator?: boolean;
+    /** Position indicators inside carousel. */
     indicatorInside?: boolean;
+    /** Indicator position. Default: 'bottom'. */
     indicatorPosition?: 'bottom' | 'top';
+    /** Indicator style. Default: 'dots'. */
     indicatorStyle?: 'circles' | 'dots' | 'lines' | 'bars';
+    /** Icon name for the previous arrow button. */
     iconPrev?: string;
+    /** Icon name for the next arrow button. */
     iconNext?: string;
+    /** Icon library to use. */
     iconLibrary?: IconLibrary;
+    /** Icon style variant (e.g., 'solid', 'outlined'). */
     iconVariant?: string;
+    /** Icon size modifier. */
     iconSize?: 'small' | 'medium' | 'large';
+    /** Additional icon modifiers. */
     iconFeatures?: string | string[];
+    /** Show semi-transparent background on arrow buttons. Set to `false` for icon-only arrows. */
     arrowBackground?: boolean;
+    /** Color theme for navigation arrows. */
     arrowColor?: 'light' | 'dark';
     /** Accessible label for the carousel region. Default: 'Image carousel'. */
     ariaLabel?: string;
+    /** Callback when slide changes. */
     onChange?: (value: number) => void;
+    /** CarouselItem children. */
     children?: React.ReactNode;
 }
 /**
- * Carousel component for displaying slides with navigation.
- *
- * Supports auto-play, drag navigation, indicators, and customizable arrows.
+ * The `Carousel` component provides an image/content slider with navigation arrows and indicators.
  *
  * @function
  * @param {CarouselProps} props - Props for the Carousel component.