@allxsmith/bestax-bulma 5.16.4 → 5.16.6

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/** Position of the sidebar relative to the viewport. */
+export type SidebarPosition = 'left' | 'right';
+/**
+ * Props for the Sidebar component.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the sidebar element.
+ */
+export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>, BulmaClassesProps {
+    /** Whether the sidebar is open (required). */
+    isOpen: boolean;
+    /** Callback when sidebar should close. */
+    onClose?: () => void;
+    /** Which side the sidebar appears from. Default: 'left'. */
+    position?: SidebarPosition;
+    /** Custom width of the sidebar. */
+    width?: string;
+    /** Sidebar takes full width (mobile-style). */
+    isFullwidth?: boolean;
+    /** Sidebar takes full width (mobile-style). @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */
+    fullWidth?: boolean;
+    /** Show overlay behind sidebar. Default: true. */
+    overlay?: boolean;
+    /** Close sidebar when overlay is clicked. Default: true. */
+    overlayClose?: boolean;
+    /** Close sidebar on Escape key. Default: true. */
+    escapeClose?: boolean;
+    /** Allow closing the sidebar. Default: true. */
+    canCancel?: boolean;
+    /** Content to display in the sidebar. */
+    children?: React.ReactNode;
+    /** Renders inline instead of using a portal. */
+    inline?: boolean;
+}
+/**
+ * Props for the SidebarHeader component.
+ */
+interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Header content. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the SidebarTitle component.
+ */
+interface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /** Title content. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the SidebarClose component.
+ * Extends standard button attributes.
+ */
+type SidebarCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * Props for the SidebarBody component.
+ */
+interface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Body content. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the SidebarFooter component.
+ */
+interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Footer content. */
+    children?: React.ReactNode;
+}
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>> & {
+    Header: React.FC<SidebarHeaderProps>;
+    Title: React.FC<SidebarTitleProps>;
+    Close: React.FC<SidebarCloseProps>;
+    Body: React.FC<SidebarBodyProps>;
+    Footer: React.FC<SidebarFooterProps>;
+};
+export default Sidebar;

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/** Available size modifiers for the Steps component. */
+export type StepsSize = 'small' | 'medium' | 'large';
+/** Available color variants for the Steps component. */
+export type StepsColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Props for individual Step items.
+ */
+export interface StepItemProps {
+    /** Step label/title */
+    label?: React.ReactNode;
+    /** Icon for the step marker */
+    icon?: React.ReactNode;
+    /**
+     * Icon shown when the step is completed.
+     * @defaultValue '✓'
+     */
+    completedIcon?: React.ReactNode;
+    /** Whether this step is clickable */
+    clickable?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Props for the Steps component.
+ * @extraProp {React.ReactNode} [children] - Step children (alternative to items).
+ * @extraProp {string} [className] - Additional CSS classes.
+ */
+export interface StepsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /** Current active step (0-indexed). */
+    value?: number;
+    /** Array of step items. */
+    items?: StepItemProps[];
+    /** Size of the steps. */
+    size?: StepsSize;
+    /** Color variant. */
+    color?: StepsColor;
+    /** Show step markers. Default: true. */
+    hasMarker?: boolean;
+    /** Enable animations. Default: true. */
+    animated?: boolean;
+    /** Use rounded markers. Default: true. */
+    rounded?: boolean;
+    /** Vertical layout. */
+    vertical?: boolean;
+    /** Position of labels. */
+    labelPosition?: 'bottom' | 'right' | 'left';
+    /** Mobile display mode. */
+    mobileMode?: 'minimal' | 'compact' | 'right';
+    /** Displays step numbers in the markers. */
+    showStepNumbers?: boolean;
+    /** Shows previous/next navigation buttons. */
+    hasNavigation?: boolean;
+    /** Label for the previous button. */
+    prevLabel?: string;
+    /** Label for the next button. */
+    nextLabel?: string;
+    /** Callback when previous button is clicked. */
+    onPrev?: () => void;
+    /** Callback when next button is clicked. */
+    onNext?: () => void;
+    /** Callback when a step is clicked. */
+    onStepClick?: (step: number) => void;
+}
+/**
+ * Props for the Step subcomponent.
+ */
+export interface StepProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Whether this step is active */
+    isActive?: boolean;
+    /** Whether this step is completed */
+    isCompleted?: boolean;
+    /** Step label/title */
+    label?: React.ReactNode;
+    /** Icon for the step marker */
+    icon?: React.ReactNode;
+    /** Whether this step is clickable */
+    clickable?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Step number to display in marker (1-indexed) */
+    stepNumber?: number;
+    /**
+     * Icon shown when the step is completed.
+     * @defaultValue '✓'
+     */
+    completedIcon?: React.ReactNode;
+}
+/**
+ * Individual Step component for use inside Steps.
+ *
+ * @function
+ * @param {StepProps} props - Props for the Step component.
+ * @returns {JSX.Element} The rendered step segment.
+ */
+export declare const Step: React.FC<StepProps>;
+export declare const Steps: React.FC<StepsProps> & {
+    Step: React.FC<StepProps>;
+};
+export default Steps;

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

@@ -0,0 +1,160 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Tabs component.
+ */
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Tab alignment. */
+    align?: 'centered' | 'right' | 'left';
+    /** Tab size. */
+    size?: 'small' | 'medium' | 'large';
+    /** Tabs expand to fill the horizontal space. */
+    isFullwidth?: boolean;
+    /** Tabs expand to fill the horizontal space. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */
+    isFullWidth?: boolean;
+    /** Tabs expand to fill the horizontal space. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */
+    fullwidth?: boolean;
+    /** Tabs use the boxed style. */
+    boxed?: boolean;
+    /** Tabs use the toggle style. */
+    toggle?: boolean;
+    /** Tabs use the rounded toggle style (only with `toggle`). */
+    rounded?: boolean;
+    /**
+     * Bulma color for tab underlines and active state (renders `is-<color>`).
+     *
+     * Bulma ships no tabs color CSS, so this prop has never had a visual effect
+     * for any value. Passing it logs a console warning in development.
+     * @deprecated No `.tabs.is-<color>` CSS exists; the prop renders unstyled
+     * and will be removed in the next major version.
+     */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    /** Controlled active tab index. */
+    value?: number;
+    /** Callback when active tab changes. */
+    onChange?: (index: number) => void;
+    /** Initial active tab index (uncontrolled). */
+    defaultValue?: number;
+    /** Renders tabs vertically. */
+    vertical?: boolean;
+    /** Side placement when `vertical` is true. */
+    side?: 'left' | 'right';
+    /** Makes tabs take up the full width equally. */
+    expanded?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+    /** Tab list and tab items. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the TabList component.
+ */
+export interface TabListProps extends React.HTMLAttributes<HTMLUListElement> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Tab elements. */
+    children?: React.ReactNode;
+}
+/**
+ * The `<ul>` container for tab items.
+ *
+ * @function
+ * @param {TabListProps} props - Props for the TabList component.
+ * @returns {JSX.Element} The rendered tab list.
+ */
+export declare const TabList: React.FC<TabListProps>;
+type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
+/**
+ * Props for the Tab component.
+ */
+export interface TabProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> {
+    /** **Required.** Tab index for matching with content. */
+    index: number;
+    /** Disables the tab. */
+    disabled?: boolean;
+    /** Icon name for the tab. */
+    icon?: string;
+    /** Icon library to use. */
+    iconLibrary?: IconLibrary;
+    /** Icon style variant (e.g., 'solid', 'outlined', 'rounded'). */
+    iconVariant?: string;
+    /** Size of the tab icon. */
+    iconSize?: 'small' | 'medium' | 'large';
+    /** Additional icon modifiers. */
+    iconFeatures?: string | string[];
+    /** Additional CSS classes. */
+    className?: string;
+    /** Tab label content. */
+    children?: React.ReactNode;
+}
+/**
+ * Individual tab button. Consumes Tabs context for active state management.
+ * Renders `<a>` internally — consumers provide only the label text/children.
+ *
+ * @function
+ * @param {TabProps} props - Props for the Tab component.
+ * @returns {JSX.Element} The rendered tab.
+ */
+export declare const Tab: React.FC<TabProps>;
+/**
+ * Props for the TabItem component (backward-compatible).
+ */
+export interface TabItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** Whether the tab is active. */
+    active?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+    /** Tab content. */
+    children?: React.ReactNode;
+    /** Click handler. */
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+}
+/**
+ * Each tab; accepts `active`, `onClick`, etc.
+ *
+ * @function
+ * @param {TabItemProps} props - Props for the TabItem component.
+ * @returns {JSX.Element} The rendered tab item.
+ * @deprecated Use `Tabs.Tab` with an `index` prop instead.
+ */
+export declare const TabItem: React.FC<TabItemProps>;
+/**
+ * Props for the TabsContent component.
+ */
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** TabContentItem elements. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the TabContentItem component.
+ */
+export interface TabContentItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** **Required.** Tab index for matching with content. */
+    index: number;
+    /** Additional CSS classes. */
+    className?: string;
+    /** Panel content. */
+    children?: React.ReactNode;
+}
+/**
+ * Individual content panel. Shows/hides based on active tab from context.
+ *
+ * @function
+ * @param {TabContentItemProps} props - Props for the TabContentItem component.
+ * @returns {JSX.Element} The rendered tab content panel.
+ */
+export declare const TabContentItem: React.FC<TabContentItemProps>;
+export declare const TabsContent: React.FC<TabsContentProps> & {
+    Item: React.FC<TabContentItemProps>;
+};
+export declare const Tabs: React.FC<TabsProps> & {
+    List: React.FC<TabListProps>;
+    Tab: React.FC<TabProps>;
+    Item: React.FC<TabItemProps>;
+    Content: React.FC<TabsContentProps> & {
+        Item: React.FC<TabContentItemProps>;
+    };
+};
+export default Tabs;

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/** Color/style type presets for toast messages. */
+export type ToastType = 'default' | 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/** Screen positions where toasts can be displayed. */
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/**
+ * Props for the Toast component.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the toast element.
+ */
+export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
+    /** The message to display (required). */
+    message: string;
+    /** Color variant — colors the toast **background**. */
+    type?: ToastType;
+    /** Color variant — colors the **action button** text. */
+    actionType?: ToastType;
+    /** Position on the screen. Default: 'top-right'. */
+    position?: ToastPosition;
+    /** Duration in ms before auto-close. `0` disables auto-close. */
+    duration?: number;
+    /** Keeps the toast visible until dismissed. */
+    indefinite?: boolean;
+    /** Whether clicking the toast (or outside it) dismisses it. */
+    dismissible?: boolean;
+    /** Show an explicit close (X) button. Default: false. */
+    closable?: boolean;
+    /** Pill-shaped (rounded corners). */
+    rounded?: boolean;
+    /** Pause auto-close timer on hover. Default: false. */
+    pauseOnHover?: boolean;
+    /** Whether the toast can be dismissed with Escape. Default: true. */
+    cancelable?: boolean;
+    /** Text for an action button (e.g. "Undo"). */
+    actionText?: string;
+    /** Text for a cancel button. */
+    cancelText?: string;
+    /** Callback when the action button is clicked. */
+    onAction?: () => void;
+    /** Callback when toast closes. */
+    onClose?: () => void;
+    /** CSS selector or DOM node to mount the toast into. */
+    container?: string | HTMLElement;
+    /** Renders inline instead of using a portal. */
+    inline?: boolean;
+}
+/**
+ * The `Toast` component provides brief notification messages with optional action and cancel buttons.
+ *
+ * @function
+ * @param {ToastProps} props - Props for the Toast component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the toast element.
+ * @returns {JSX.Element | null} The rendered toast component.
+ *
+ * @example
+ * // Basic toast
+ * <Toast message="Operation successful!" type="success" />
+ *
+ * @example
+ * // Toast with action button
+ * <Toast message="Item deleted" actionText="Undo" onAction={handleUndo} />
+ */
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Options for showing a programmatic toast. Extends ToastProps with a required message.
+ */
+export interface ToastOptions extends Omit<ToastProps, 'message'> {
+    /** The message to display. */
+    message: string;
+    /** When true, toasts enter a FIFO queue and display one at a time. Default false. */
+    queue?: boolean;
+}
+/**
+ * Internal representation of a toast instance.
+ */
+export interface ToastInstance {
+    /** Unique identifier for this toast. */
+    id: string;
+    /** Configuration options for the toast. */
+    props: ToastOptions;
+}
+/**
+ * Programmatic toast API for showing, closing, and managing toasts.
+ *
+ * @example
+ * toast.success('Saved!');
+ * toast.show({ message: 'Item deleted', actionText: 'Undo', onAction: handleUndo });
+ */
+export declare const toast: {
+    /**
+     * Show a toast with the given options.
+     * @param {ToastOptions} options - Toast configuration.
+     * @returns {string} The unique ID of the created toast.
+     */
+    show: (options: ToastOptions) => string;
+    /**
+     * Show a success toast.
+     * @param {string} message - The message to display.
+     * @param {Partial<ToastOptions>} [options] - Additional options.
+     * @returns {string} The toast ID.
+     */
+    success: (message: string, options?: Partial<ToastOptions>) => string;
+    /**
+     * Show a danger toast.
+     * @param {string} message - The message to display.
+     * @param {Partial<ToastOptions>} [options] - Additional options.
+     * @returns {string} The toast ID.
+     */
+    danger: (message: string, options?: Partial<ToastOptions>) => string;
+    /**
+     * Show a warning toast.
+     * @param {string} message - The message to display.
+     * @param {Partial<ToastOptions>} [options] - Additional options.
+     * @returns {string} The toast ID.
+     */
+    warning: (message: string, options?: Partial<ToastOptions>) => string;
+    /**
+     * Show an info toast.
+     * @param {string} message - The message to display.
+     * @param {Partial<ToastOptions>} [options] - Additional options.
+     * @returns {string} The toast ID.
+     */
+    info: (message: string, options?: Partial<ToastOptions>) => string;
+    /**
+     * Close a specific toast by ID.
+     * @param {string} id - The toast ID to close.
+     */
+    close: (id: string) => void;
+    /** Close all toasts and clear the queue. */
+    closeAll: () => void;
+    /**
+     * Subscribe to toast state changes.
+     * @param {(toasts: ToastInstance[]) => void} listener - Callback invoked on changes.
+     * @returns {() => void} Unsubscribe function.
+     */
+    subscribe: (listener: (toasts: ToastInstance[]) => void) => (() => void);
+};
+/**
+ * Container component for rendering programmatic toasts.
+ * Place once at your app root to enable the toast API.
+ *
+ * @function
+ * @param {{ position?: ToastPosition }} props - Container props.
+ * @returns {JSX.Element | null} The rendered toast container, or null if empty.
+ */
+export declare const ToastContainer: React.FC<{
+    position?: ToastPosition;
+}>;
+export default Toast;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/** Screen positions for the tooltip. */
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
+/** Color variants for the tooltip. */
+export type TooltipColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'dark' | 'light';
+/** Size variants for the tooltip. */
+export type TooltipSize = 'small' | 'medium' | 'large';
+/**
+ * Props for the Tooltip component.
+ * @extraProp {React.ReactNode} [children] - The element that triggers the tooltip.
+ * @extraProp {string} [className] - Additional CSS classes.
+ */
+export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** The tooltip text content. */
+    label?: string;
+    /** Rich tooltip content (alternative to `label`). */
+    content?: React.ReactNode;
+    /** Position of the tooltip. Default: 'top'. */
+    position?: TooltipPosition;
+    /** Color variant for the tooltip. */
+    color?: TooltipColor;
+    /** Size of the tooltip. */
+    size?: TooltipSize;
+    /** Force tooltip to be always visible. */
+    active?: boolean;
+    /** Allow tooltip to wrap to multiple lines. */
+    multiline?: boolean;
+    /** Enable fade animation. Default: true. */
+    animated?: boolean;
+    /** Use square corners instead of rounded. */
+    square?: boolean;
+    /** Show dashed underline on trigger. */
+    dashed?: boolean;
+    /** Delay before showing tooltip (ms). */
+    delay?: number;
+    /** Delay in ms before hiding the tooltip. */
+    closeDelay?: number;
+    /** Additional classes for the tooltip element. */
+    tooltipClassName?: string;
+}
+/**
+ * The `Tooltip` component displays helpful information when users hover over or focus on an element.
+ *
+ * @function
+ * @param {TooltipProps} props - Props for the Tooltip component.
+ * @returns {JSX.Element} The rendered tooltip wrapper.
+ *
+ * @example
+ * // Basic tooltip
+ * <Tooltip label="This is helpful info">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // Positioned tooltip with color
+ * <Tooltip label="Delete item" position="right" color="danger">
+ *   <Icon icon="fas fa-trash" />
+ * </Tooltip>
+ *
+ * @example
+ * // Multiline tooltip
+ * <Tooltip label="This is a longer tooltip that wraps to multiple lines" multiline>
+ *   <span>?</span>
+ * </Tooltip>
+ */
+export declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Block component.
+ */
+export interface BlockProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Text color alias: renders `has-text-<color>`, exactly like `textColor`.
+     * Not a filled variant (no `.block.is-<color>` CSS exists). Prefer
+     * `textColor`, which takes precedence when both are set; use `bgColor` for
+     * a colored surface.
+     */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Content to render inside the block. */
+    children?: React.ReactNode;
+}
+/**
+ * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
+ *
+ * @function
+ * @param {BlockProps} props - Props for the Block component.
+ * @returns {JSX.Element} The rendered block element.
+ * @see {@link https://bulma.io/documentation/elements/block/ | Bulma Block documentation}
+ */
+export declare const Block: React.FC<BlockProps>;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { BulmaClassesProps, validColors, validSchemeColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Box component.
+ */
+export interface BoxProps
+/** @ignore */
+ extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Text color alias: renders `has-text-<color>`, exactly like `textColor`.
+     * Not a filled box variant (no `.box.is-<color>` CSS exists). Prefer
+     * `textColor`, which takes precedence when both are set; use `bgColor` for
+     * a colored surface.
+     */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /**
+     * Background color helper. `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 box has a shadow (default: true). */
+    hasShadow?: boolean;
+    /** Content to render inside the box. */
+    children?: React.ReactNode;
+}
+/**
+ * The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
+ *
+ * @function
+ * @param {BoxProps} props - Props for the Box component.
+ * @returns {JSX.Element} The rendered box element.
+ * @see {@link https://bulma.io/documentation/elements/box/ | Bulma Box documentation}
+ */
+export declare const Box: React.FC<BoxProps>;
+export default Box;