@allxsmith/bestax-bulma 5.6.2 → 5.8.0

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

@@ -1,6 +1,41 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Possible values for Bulma column size.
+ */
 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'> {
     className?: string;
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -27,4 +62,12 @@ export interface ColumnProps extends React.HTMLAttributes<HTMLDivElement>, Omit<
     isNarrowFullhd?: boolean;
     children?: React.ReactNode;
 }
+/**
+ * Bulma Column component for responsive grid layouts.
+ *
+ * @function
+ * @param {ColumnProps} props - Props for the Column component.
+ * @returns {JSX.Element} The rendered column.
+ * @see {@link https://bulma.io/documentation/columns/ | Bulma Columns documentation}
+ */
 export declare const Column: React.FC<ColumnProps>;

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

@@ -1,7 +1,39 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
 import type { BulmaGapValue } from '../grid/Grid';
+/**
+ * Possible values for the Bulma columns gap size.
+ * @deprecated Use {@link BulmaGapValue} instead — `gapSize*` and `gap*` share
+ * the same 0-8 scale.
+ */
 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'> {
     className?: string;
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -19,12 +51,20 @@ export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit
     gapDesktop?: BulmaGapValue;
     gapWidescreen?: BulmaGapValue;
     gapFullhd?: BulmaGapValue;
+    /** @deprecated Use `gap` instead — `gap` wins if both are set. */
     gapSize?: BulmaGapSize;
+    /** @deprecated Use `gapMobile` instead — `gapMobile` wins if both are set. */
     gapSizeMobile?: BulmaGapSize;
+    /** @deprecated Use `gapTablet` instead — `gapTablet` wins if both are set. */
     gapSizeTablet?: BulmaGapSize;
+    /** @deprecated Use `gapDesktop` instead — `gapDesktop` wins if both are set. */
     gapSizeDesktop?: BulmaGapSize;
+    /** @deprecated Use `gapWidescreen` instead — `gapWidescreen` wins if both are set. */
     gapSizeWidescreen?: BulmaGapSize;
+    /** @deprecated Use `gapFullhd` instead — `gapFullhd` wins if both are set. */
     gapSizeFullhd?: BulmaGapSize;
     children?: React.ReactNode;
 }
-export declare const Columns: React.FC<ColumnsProps>;
+export declare const Columns: React.FC<ColumnsProps> & {
+    Column: React.FC<import("./Column").ColumnProps>;
+};

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

@@ -1,10 +1,31 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 declare const avatarColors: readonly ["primary", "link", "info", "success", "warning", "danger", "black", "dark", "light", "white"];
+/** Valid color values for the Avatar component. */
 export type AvatarColor = (typeof avatarColors)[number];
 declare const avatarSizes: readonly ["16x16", "24x24", "32x32", "48x48", "64x64", "96x96", "128x128"];
+/** Valid preset size values for the Avatar component. */
 export type AvatarSize = (typeof avatarSizes)[number];
+/** Valid shape values for the Avatar component. */
 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'> {
     className?: string;
     src?: string;
@@ -21,5 +42,21 @@ export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'co
     rel?: string;
     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.
+ *
+ * @function
+ * @param {AvatarProps} props - Props for the Avatar component.
+ * @returns {JSX.Element} The rendered avatar element.
+ *
+ * @example
+ * <Avatar src="/users/ada.jpg" name="Ada Lovelace" size="64x64" />
+ * @example
+ * <Avatar name="Grace Hopper" />
+ */
 export declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

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

@@ -1,7 +1,20 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
-import { Avatar, AvatarProps } from './Avatar';
+import { AvatarProps } from './Avatar';
+/** Valid overlap spacing values for the Avatars component. */
 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'> {
     className?: string;
     max?: number;
@@ -13,6 +26,6 @@ export interface AvatarsProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     children?: React.ReactNode;
 }
 export declare const Avatars: React.FC<AvatarsProps> & {
-    Avatar: typeof Avatar;
+    Avatar: React.FC<AvatarProps>;
 };
 export default Avatars;

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

@@ -1,9 +1,29 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 declare const badgeColors: readonly ["primary", "link", "info", "success", "warning", "danger", "black", "dark", "light", "white"];
+/** Valid color values for the Badge component. */
 export type BadgeColor = (typeof badgeColors)[number];
+/** Valid corner position values for the Badge component. */
 export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/** Valid overlap adjustment values for the Badge component. */
 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'> {
     className?: string;
     badgeClassName?: string;
@@ -18,5 +38,27 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
     invisible?: boolean;
     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.
+ *
+ * @function
+ * @param {BadgeProps} props - Props for the Badge component.
+ * @returns {JSX.Element | null} The rendered badge (and children, if provided).
+ *
+ * @example
+ * <Badge dot color="success" overlap="circle">
+ *   <Avatar src="/users/ada.jpg" name="Ada" />
+ * </Badge>
+ * @example
+ * <Badge content={128} max={99} color="danger">
+ *   <Icon name="bell" />
+ * </Badge>
+ */
 export declare const Badge: React.FC<BadgeProps>;
 export default Badge;

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

@@ -1,11 +1,29 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 declare const validBreadcrumbAlignments: readonly ["centered", "right"];
+/**
+ * Valid alignment values for the Breadcrumb component.
+ */
 export type BreadcrumbAlignment = (typeof validBreadcrumbAlignments)[number];
 declare const validBreadcrumbSeparators: readonly ["arrow", "bullet", "dot", "succeeds"];
+/**
+ * Valid separator values for the Breadcrumb component.
+ */
 export type BreadcrumbSeparator = (typeof validBreadcrumbSeparators)[number];
 declare const validBreadcrumbSizes: readonly ["small", "medium", "large"];
+/**
+ * Valid size values for the Breadcrumb component.
+ */
 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'> {
     className?: string;
     alignment?: BreadcrumbAlignment;
@@ -13,5 +31,15 @@ export interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>,
     size?: BreadcrumbSize;
     children?: React.ReactNode;
 }
+/**
+ * Breadcrumb component for rendering a styled Bulma breadcrumb navigation.
+ *
+ * Supports alignment, separator styles, and sizes.
+ *
+ * @function
+ * @param {BreadcrumbProps} props - Props for the Breadcrumb component.
+ * @returns {JSX.Element} The rendered breadcrumb element.
+ * @see {@link https://bulma.io/documentation/components/breadcrumb/ | Bulma Breadcrumb documentation}
+ */
 export declare const Breadcrumb: React.FC<BreadcrumbProps>;
 export {};

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

@@ -1,5 +1,21 @@
 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.
+ */
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     className?: string;
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -14,56 +30,92 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Omit<Bu
     imageAlt?: string;
     children?: React.ReactNode;
 }
-declare const CardComponent: React.FC<CardProps>;
+/**
+ * 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> {
     className?: string;
     children?: React.ReactNode;
     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> {
     className?: string;
     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> {
     className?: string;
     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> {
     className?: string;
     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> {
     className?: string;
     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> {
     className?: string;
     children?: React.ReactNode;
     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> {
     className?: string;
     children?: React.ReactNode;
 }
-declare const CardHeader: React.FC<CardHeaderProps>;
-declare const CardHeaderTitle: React.FC<CardHeaderTitleProps>;
-declare const CardHeaderIcon: React.FC<CardHeaderIconProps>;
-declare const CardImage: React.FC<CardImageProps>;
-declare const CardContent: React.FC<CardContentProps>;
-declare const CardFooter: React.FC<CardFooterProps>;
-declare const CardFooterItem: React.FC<CardFooterItemProps>;
-type CardWithCompounds = typeof CardComponent & {
-    Header: typeof CardHeader & {
-        Title: typeof CardHeaderTitle;
-        Icon: typeof CardHeaderIcon;
+/** Card component with Header, Image, Content, Footer, and FooterItem sub-components. */
+export declare const Card: React.FC<CardProps> & {
+    Header: React.FC<CardHeaderProps> & {
+        Title: React.FC<CardHeaderTitleProps>;
+        Icon: React.FC<CardHeaderIconProps>;
     };
-    Image: typeof CardImage;
-    Content: typeof CardContent;
-    Footer: typeof CardFooter;
-    FooterItem: typeof CardFooterItem;
+    Image: React.FC<CardImageProps>;
+    Content: React.FC<CardContentProps>;
+    Footer: React.FC<CardFooterProps>;
+    FooterItem: React.FC<CardFooterItemProps>;
 };
-declare const CardWithSubComponents: CardWithCompounds;
-export { CardWithSubComponents as Card };
+/** Internal test-only exports. Not part of the public API. */
 export declare const __test_exports__: {
     renderFooter: (footer: CardProps["footer"], classPrefix: string | undefined) => React.JSX.Element[] | null;
 };

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

@@ -1,10 +1,50 @@
 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 */
     active?: boolean;
 }
+/**
+ * Individual carousel item/slide.
+ *
+ * @function
+ * @param {CarouselItemProps} props - Props for the CarouselItem component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the carousel item element.
+ * @returns {JSX.Element} The rendered carousel item.
+ */
 export declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
 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).
+ */
 export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>, BulmaClassesProps {
     value?: number;
     autoplay?: boolean;
@@ -26,9 +66,39 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     iconFeatures?: string | string[];
     arrowBackground?: boolean;
     arrowColor?: 'light' | 'dark';
+    /** Accessible label for the carousel region. Default: 'Image carousel'. */
     ariaLabel?: string;
     onChange?: (value: number) => void;
     children?: React.ReactNode;
 }
+/**
+ * Carousel component for displaying slides with navigation.
+ *
+ * Supports auto-play, drag navigation, indicators, and customizable arrows.
+ *
+ * @function
+ * @param {CarouselProps} props - Props for the Carousel component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the carousel element.
+ * @returns {JSX.Element} The rendered carousel component.
+ *
+ * @example
+ * // Basic carousel
+ * <Carousel>
+ *   <CarouselItem>Slide 1</CarouselItem>
+ *   <CarouselItem>Slide 2</CarouselItem>
+ *   <CarouselItem>Slide 3</CarouselItem>
+ * </Carousel>
+ *
+ * @example
+ * // Auto-playing carousel
+ * <Carousel autoplay interval={3000}>
+ *   <CarouselItem>
+ *     <img src="image1.jpg" alt="Slide 1" />
+ *   </CarouselItem>
+ *   <CarouselItem>
+ *     <img src="image2.jpg" alt="Slide 2" />
+ *   </CarouselItem>
+ * </Carousel>
+ */
 export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
 export default Carousel;

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

@@ -1,5 +1,22 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Collapse component.
+ *
+ * @property {boolean} [open] - Controlled open state. If provided, component is controlled.
+ * @property {boolean} [defaultOpen] - Initial open state for uncontrolled usage.
+ * @property {() => void} [onOpen] - Callback when collapse opens.
+ * @property {() => void} [onClose] - Callback when collapse closes.
+ * @property {React.ReactNode} [trigger] - The clickable trigger element (usually a header/button).
+ * @property {'fade'|'slide'|false} [animation] - Animation type. 'fade' for opacity transition, 'slide' for height transition, false to disable. Default: 'fade'.
+ * @property {'top'|'bottom'} [position] - Position of trigger relative to content. Default: 'top'.
+ * @property {string} [ariaId] - Custom aria id for accessibility.
+ * @property {boolean} [bordered] - Whether to show a border around the collapse.
+ * @property {React.ReactNode} [children] - The collapsible content.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {string} [triggerClassName] - Additional classes for the trigger wrapper.
+ * @property {string} [contentClassName] - Additional classes for the content wrapper.
+ */
 export interface CollapseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     open?: boolean;
     defaultOpen?: boolean;
@@ -13,5 +30,41 @@ export interface CollapseProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     triggerClassName?: string;
     contentClassName?: string;
 }
+/**
+ * Collapse component for expandable/collapsible content panels.
+ *
+ * Can be used in controlled or uncontrolled mode. Supports animation
+ * and accessibility features for screen readers.
+ *
+ * @function
+ * @param {CollapseProps} props - Props for the Collapse component.
+ * @returns {JSX.Element} The rendered collapse component.
+ *
+ * @example
+ * // Basic uncontrolled collapse
+ * <Collapse trigger={<button>Click to toggle</button>}>
+ *   <p>Collapsible content here</p>
+ * </Collapse>
+ *
+ * @example
+ * // Controlled collapse
+ * const [isOpen, setIsOpen] = useState(false);
+ * <Collapse
+ *   open={isOpen}
+ *   trigger={<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>}
+ * >
+ *   <p>Content</p>
+ * </Collapse>
+ *
+ * @example
+ * // With callbacks
+ * <Collapse
+ *   trigger={<button>Toggle</button>}
+ *   onOpen={() => console.log('Opened!')}
+ *   onClose={() => console.log('Closed!')}
+ * >
+ *   <p>Content</p>
+ * </Collapse>
+ */
 export declare const Collapse: React.FC<CollapseProps>;
 export default Collapse;