@allxsmith/bestax-bulma 5.16.4 → 5.16.6

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Possible values for Bulma column size: a number 1–12 (as a number or a numeric string, `7` and `"7"` are equivalent) or a named fraction.
+ */
+export type BulmaColumnSize = number | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '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-cjs/columns/Columns.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import type { BulmaGapValue } from '../grid/Grid.js';
+/**
+ * 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> & {
+    Column: React.FC<import("./Column.js").ColumnProps>;
+};

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { type PolymorphicComponent } from '../helpers/polymorphic.js';
+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';
+/**
+ * The Avatar component's own props — everything it adds on top of the
+ * attributes of whatever element `as` renders.
+ */
+export interface AvatarOwnProps extends 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;
+    /** 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>;
+    /** Inline styles, merged after the size style. */
+    style?: React.CSSProperties;
+    /**
+     * Not accepted. Avatar always renders its own content — the image, the
+     * initials, or the icon — so anything a caller passed would be replaced. It
+     * is declared unavailable rather than derived from `as`, which would let a
+     * target requiring `children` compel a value it then never receives.
+     * @internal
+     */
+    children?: never;
+}
+/**
+ * Props for the Avatar component. The DOM attributes and the `ref` both follow
+ * `as`.
+ *
+ * `href`, `target` and `rel` stay Avatar's own props rather than being derived:
+ * they are what *chooses* the element when `as` is absent (an `<a>` with an
+ * `href`, a `<figure>` without one), so they have to be accepted before `as` is
+ * known.
+ *
+ * The type parameter defaults to `'figure'`, not to `React.ElementType`.
+ * Defaulting to the constraint sounds truer to a runtime default that is
+ * conditional, but `ComponentPropsWithoutRef<React.ElementType>` spreads across
+ * every element at once and accepts anything — which is the false-positive this
+ * whole change exists to remove. `'figure'` is the element a no-`href` avatar
+ * actually renders, and the anchor props it can additionally take are declared
+ * above.
+ *
+ * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
+ */
+export type AvatarProps<T extends React.ElementType = 'figure'> = AvatarOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof AvatarOwnProps | 'as'> & {
+    /** Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`. */
+    as?: T;
+};
+/**
+ * The `Avatar` component represents a person or entity as a compact image.
+ *
+ * @function
+ * @param {AvatarProps} props - Props for the Avatar component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @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: PolymorphicComponent<AvatarOwnProps, "figure">;
+export default Avatar;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { AvatarProps } from './Avatar.js';
+/** 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> & {
+    Avatar: import("../index.js").PolymorphicComponent<import("./Avatar.js").AvatarOwnProps, "figure">;
+};
+export default Avatars;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+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-cjs/components/Breadcrumb.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+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-cjs/components/Card.d.ts

@@ -0,0 +1,166 @@
+import React from 'react';
+import { BulmaClassesProps, validColors, validSchemeColors } from '../helpers/useBulmaClasses.js';
+/**
+ * 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. `scheme-*` values render as a
+     * dark-mode-safe inline `background-color: var(--bulma-scheme-*)` instead
+     * of a class. The `scheme-invert*` values do not change text color — pair
+     * them with a contrasting foreground.
+     */
+    bgColor?: (typeof validColors)[number] | (typeof validSchemeColors)[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>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier (text color helper). */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color helper; wins over `color` when both are set. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** 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>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier (text color helper). */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color helper; wins over `color` when both are set. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** 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>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier (text color helper). */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color helper; wins over `color` when both are set. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** 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>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier (text color helper). */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color helper; wins over `color` when both are set. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** 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>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier (text color helper). */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color helper; wins over `color` when both are set. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** 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>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier (text color helper). */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color helper; wins over `color` when both are set. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** 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>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier (text color helper). */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color helper; wins over `color` when both are set. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** 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>;
+        Icon: React.FC<CardHeaderIconProps>;
+    };
+    Image: React.FC<CardImageProps>;
+    Content: React.FC<CardContentProps>;
+    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-cjs/components/Carousel.d.ts

@@ -0,0 +1,104 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/**
+ * 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;