@allxsmith/bestax-bulma 5.7.0 → 5.8.1

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

@@ -1,30 +1,68 @@
 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.
+ */
 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;
 }
+/**
+ * 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.
+ * @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,30 +1,61 @@
 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.
+ */
 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;
+    /** Gap size for all breakpoints. @deprecated Use `gap` instead — `gap` wins if both are set. */
     gapSize?: BulmaGapSize;
+    /** Gap size for mobile. @deprecated Use `gapMobile` instead — `gapMobile` wins if both are set. */
     gapSizeMobile?: BulmaGapSize;
+    /** Gap size for tablet. @deprecated Use `gapTablet` instead — `gapTablet` wins if both are set. */
     gapSizeTablet?: BulmaGapSize;
+    /** Gap size for desktop. @deprecated Use `gapDesktop` instead — `gapDesktop` wins if both are set. */
     gapSizeDesktop?: BulmaGapSize;
+    /** Gap size for widescreen. @deprecated Use `gapWidescreen` instead — `gapWidescreen` wins if both are set. */
     gapSizeWidescreen?: BulmaGapSize;
+    /** 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

@@ -1,25 +1,57 @@
 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.
+ */
 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>;
 }
+/**
+ * The `Avatar` component represents a person or entity as a compact image.
+ *
+ * @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,15 +1,27 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { AvatarProps } from './Avatar';
+/** Valid overlap spacing values for the Avatars component. */
 export type AvatarsSpacing = 'sm' | 'md' | 'lg';
+/**
+ * Props for the Avatars component.
+ */
 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

@@ -1,22 +1,56 @@
 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.
+ */
 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;
 }
+/**
+ * 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.
+ * @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,17 +1,42 @@
 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.
+ */
 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;
 }
+/**
+ * The `Breadcrumb` component renders a Bulma-styled breadcrumb navigation.
+ *
+ * @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,49 +1,108 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Card component.
+ * @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.
+ */
 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.
+ */
 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.
+ */
 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.
+ */
 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.
+ */
 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.
+ */
 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.
+ */
 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. */
 export declare const Card: React.FC<CardProps> & {
     Header: React.FC<CardHeaderProps> & {
         Title: React.FC<CardHeaderTitleProps>;
@@ -54,6 +113,7 @@ export declare const Card: React.FC<CardProps> & {
     Footer: React.FC<CardFooterProps>;
     FooterItem: React.FC<CardFooterItemProps>;
 };
+/** 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,34 +1,104 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the CarouselItem component.
+ */
 export interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Whether this item is active (set automatically). */
     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.
+ * @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;
 }
+/**
+ * The `Carousel` component provides an image/content slider with navigation arrows and indicators.
+ *
+ * @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,17 +1,69 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Collapse component.
+ * @extraProp {React.ReactNode} [children] - The collapsible content.
+ * @extraProp {string} [className] - Additional CSS classes.
+ */
 export interface CollapseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Controlled open state. If provided, component is controlled. */
     open?: boolean;
+    /** Initial open state for uncontrolled usage. */
     defaultOpen?: boolean;
+    /** Callback when collapse opens. */
     onOpen?: () => void;
+    /** Callback when collapse closes. */
     onClose?: () => void;
+    /** The clickable trigger element (header/button). */
     trigger?: React.ReactNode;
+    /** Animation style, or `false` to disable. */
     animation?: 'fade' | 'slide' | false;
+    /** Position of the trigger relative to content. */
     position?: 'top' | 'bottom';
+    /**
+     * Custom aria id for accessibility.
+     * @defaultValue auto
+     */
     ariaId?: string;
+    /** Adds a border around the collapse. */
     bordered?: boolean;
+    /** Additional classes for the trigger wrapper. */
     triggerClassName?: string;
+    /** Additional classes for the content wrapper. */
     contentClassName?: string;
 }
+/**
+ * The `Collapse` component provides an expandable/collapsible content panel.
+ *
+ * @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;