@allxsmith/bestax-bulma 5.16.4 → 5.16.6

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

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

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

@@ -0,0 +1,142 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/** Valid dialog type/color values. */
+export type DialogType = 'default' | 'success' | 'danger' | 'warning' | 'info';
+/**
+ * Props for the Dialog component.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the dialog element.
+ */
+export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
+    /** Whether the dialog is open (required). */
+    isOpen: boolean;
+    /** Dialog title. */
+    title?: string;
+    /** Dialog message/content (required). */
+    message: string | React.ReactNode;
+    /** The type/color of the dialog. Default: 'default'. */
+    type?: DialogType;
+    /** Text for confirm button. Default: 'OK'. */
+    confirmText?: string;
+    /** Text for cancel button. Default: 'Cancel'. */
+    cancelText?: string;
+    /** Callback when confirm button is clicked. */
+    onConfirm?: () => void;
+    /** Callback when cancel button is clicked or dismissed. */
+    onCancel?: () => void;
+    /** Whether to show cancel button. Default: true for confirm dialogs. */
+    showCancel?: boolean;
+    /** Whether the dialog can be dismissed. Default: true. */
+    canCancel?: boolean;
+    /** Focus cancel button instead of confirm. Default: false. */
+    focusCancel?: boolean;
+    /** Custom icon to display. */
+    icon?: React.ReactNode;
+    /**
+     * Renders the dialog into a portal target instead of inline. Forwarded to
+     * the underlying `Modal`; see its `portal` prop for the accepted values.
+     * @defaultValue false
+     */
+    portal?: boolean | string | HTMLElement;
+}
+/**
+ * The `Dialog` component provides ready-made confirm and alert dialogs, so a destructive action stays one `await dialog.confirm()` call away.
+ *
+ * @function
+ * @param {DialogProps} props - Props for the Dialog component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the dialog element.
+ * @returns {JSX.Element | null} The rendered dialog component.
+ *
+ * @example
+ * // Alert dialog
+ * <Dialog
+ *   isOpen={showAlert}
+ *   title="Success"
+ *   message="Operation completed successfully!"
+ *   type="success"
+ *   onConfirm={() => setShowAlert(false)}
+ *   showCancel={false}
+ * />
+ *
+ * @example
+ * // Confirm dialog
+ * <Dialog
+ *   isOpen={showConfirm}
+ *   title="Delete Item?"
+ *   message="This action cannot be undone."
+ *   type="danger"
+ *   confirmText="Delete"
+ *   onConfirm={handleDelete}
+ *   onCancel={() => setShowConfirm(false)}
+ * />
+ */
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Options for showing a programmatic alert dialog.
+ */
+export interface AlertOptions {
+    /** Dialog title. */
+    title?: string;
+    /** Dialog message/content. */
+    message: string | React.ReactNode;
+    /** Dialog type/color. */
+    type?: DialogType;
+    /** Text for the confirm button. */
+    confirmText?: string;
+    /** Custom icon to display. */
+    icon?: React.ReactNode;
+}
+/**
+ * Options for showing a programmatic confirm dialog.
+ */
+export interface ConfirmOptions extends AlertOptions {
+    /** Text for the cancel button. */
+    cancelText?: string;
+    /** Focus cancel button instead of confirm. */
+    focusCancel?: boolean;
+}
+/**
+ * Options for showing a programmatic prompt dialog.
+ */
+export interface PromptOptions extends ConfirmOptions {
+    /** Input placeholder text. */
+    placeholder?: string;
+    /** Default input value. */
+    defaultValue?: string;
+}
+type DialogResolve = (value?: void | boolean | string) => void;
+type DialogState = {
+    type: 'alert' | 'confirm' | 'prompt';
+    options: PromptOptions;
+    resolve: DialogResolve;
+};
+/**
+ * Programmatic dialog API for showing dialogs from anywhere.
+ */
+export declare const dialog: {
+    /**
+     * Show an alert dialog. Returns a promise that resolves when closed.
+     */
+    alert: (options: AlertOptions | string) => Promise<void>;
+    /**
+     * Show a confirm dialog. Returns a promise that resolves to true/false.
+     */
+    confirm: (options: ConfirmOptions | string) => Promise<boolean>;
+    /**
+     * Close the current dialog.
+     */
+    close: (value?: string | boolean | void | undefined) => void;
+    /**
+     * Subscribe to dialog changes.
+     */
+    subscribe: (listener: (dialog: DialogState | null) => void) => (() => void);
+};
+/**
+ * DialogContainer component to render programmatic dialogs.
+ * Place this once at the root of your app.
+ *
+ * @function
+ * @returns {JSX.Element | null} The rendered dialog, or null if none is active.
+ */
+export declare const DialogContainer: React.FC;
+export default Dialog;

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import type { ConstrainedPolymorphicComponentWithoutRef } from '../helpers/polymorphic.js';
+/**
+ * Checks if code is running in a browser environment.
+ * @param win - Window object.
+ * @param doc - Document object.
+ * @returns {boolean} True if in browser, false otherwise.
+ */
+export declare const isBrowser: (win?: typeof window, doc?: typeof document) => boolean;
+/**
+ * Props for the Dropdown component.
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root dropdown element.
+ */
+export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof BulmaClassesProps>, BulmaClassesProps {
+    /** The dropdown button/trigger content. */
+    label: React.ReactNode;
+    /** Dropdown menu items and dividers. */
+    children: React.ReactNode;
+    /** Additional CSS classes for root. */
+    className?: string;
+    /** Additional CSS classes for the dropdown menu. */
+    menuClassName?: string;
+    /** Whether the dropdown is open (controlled). */
+    active?: boolean;
+    /** Dropdown menu opens upward. */
+    up?: boolean;
+    /** Menu is right-aligned. */
+    right?: boolean;
+    /** Open on hover instead of click. */
+    hoverable?: boolean;
+    /** Disables the dropdown trigger. */
+    disabled?: boolean;
+    /** Callback when dropdown active state changes. */
+    onActiveChange?: (active: boolean) => void;
+    /** Close dropdown when a menu item is clicked. */
+    closeOnClick?: boolean;
+    /** Root element ID (for aria-controls, etc). */
+    id?: string;
+}
+/**
+ * The elements a dropdown item may render as. Bulma's dropdown markup names
+ * these three and no others, so `as` is a closed set rather than an open
+ * `React.ElementType`.
+ */
+export type DropdownItemElement = 'a' | 'div' | 'button';
+/**
+ * The DropdownItem component's own props.
+ */
+export interface DropdownItemOwnProps extends BulmaClassesProps {
+    /** Whether the item is active. */
+    active?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+    /** Marks the item as disabled; disabled items are skipped during keyboard navigation. Use with `as="button"` for a native disabled control, or pair with `aria-disabled` on a link. */
+    disabled?: boolean;
+    /** Item content. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the DropdownItem component. Everything the item does not own
+ * follows `as`: `href`, `target` and `rel` under the default `'a'`, `type` and
+ * `form` under `'button'`, and the shared HTML attributes under any of them.
+ *
+ * Pinning these to `React.HTMLAttributes<HTMLElement>` instead — which is what
+ * this type did before — rejected `href` on an anchor and `type` on a button,
+ * both of which have always worked at runtime. Same defect as #641, in the
+ * narrower shape a constrained `as` takes.
+ *
+ * **Name the tag you mean.** The type parameter defaults to the whole union, not
+ * to the rendered element, so bare `DropdownItemProps` keeps accepting
+ * `{ as: 'div' }` the way it always has. The cost is that it is not
+ * distributive: `Omit` over a union keeps only the shared keys, so the bare
+ * alias carries no `href` even though the component takes one under `as="a"`.
+ * Write `DropdownItemProps<'a'>` for the anchor's props. That is the #667 alias
+ * limitation Button carries, labelled next-major because closing it is
+ * source-breaking, and pinned for this component in
+ * `__typetests__/polymorphic.tsx`; the component itself is unaffected.
+ */
+export type DropdownItemProps<T extends DropdownItemElement = DropdownItemElement> = DropdownItemOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof DropdownItemOwnProps | 'as'> & {
+    /** The element type to render. */
+    as?: T;
+};
+/**
+ * Bulma Dropdown item.
+ *
+ * @function
+ * @param {DropdownItemProps} props - Props for the DropdownItem component.
+ * @returns {JSX.Element} The rendered dropdown item.
+ */
+export declare const DropdownItem: ConstrainedPolymorphicComponentWithoutRef<DropdownItemOwnProps, DropdownItemElement, "a">;
+/**
+ * Bulma Dropdown divider.
+ *
+ * @function
+ * @returns {JSX.Element} The rendered divider element.
+ */
+export declare const DropdownDivider: React.FC;
+/** Bulma Dropdown component with Item and Divider sub-components. */
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: ConstrainedPolymorphicComponentWithoutRef<DropdownItemOwnProps, DropdownItemElement, "a">;
+    Divider: React.FC<{}>;
+};
+export default Dropdown;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/**
+ * Overlay opacity levels for the Loading background.
+ */
+export type LoadingOverlay = 'light' | 'dark' | 'opaque';
+/**
+ * Color variants for the Loading spinner.
+ */
+export type LoadingColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Props for the Loading component.
+ * @extraProp {React.ReactNode} [children] - Content to display below the spinner.
+ * @extraProp {string} [className] - Additional CSS classes.
+ */
+export interface LoadingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size' | 'overlay'> {
+    /** Whether the loading overlay is visible. */
+    active?: boolean;
+    /** Cover the entire viewport. */
+    isFullPage?: boolean;
+    /** Size of the loading spinner. */
+    size?: 'small' | 'medium' | 'large';
+    /** Color variant for the spinner. Default is light grey. */
+    color?: LoadingColor;
+    /** Show a cancel button and allow closing. */
+    canCancel?: boolean;
+    /** Callback when cancel is triggered. */
+    onCancel?: () => void;
+    /** Additional classes for the overlay. */
+    overlayClassName?: string;
+    /** Additional classes for the spinner icon. */
+    iconClassName?: string;
+    /** Custom loading indicator element. */
+    indicator?: React.ReactNode;
+    /** Style of the loading overlay. */
+    overlay?: LoadingOverlay;
+}
+/**
+ * The `Loading` component provides a loading overlay with a spinner animation.
+ *
+ * @function
+ * @param {LoadingProps} props - Props for the Loading component.
+ * @returns {JSX.Element | null} The rendered loading overlay or null if not active.
+ *
+ * @example
+ * // Full page loading
+ * <Loading active isFullPage />
+ *
+ * @example
+ * // Container loading with message
+ * <div style={{ position: 'relative', height: '200px' }}>
+ *   <Loading active>Loading data...</Loading>
+ * </div>
+ *
+ * @example
+ * // With color variant
+ * <Loading active color="primary" />
+ *
+ * @example
+ * // With cancel functionality
+ * <Loading
+ *   active={isLoading}
+ *   canCancel
+ *   onCancel={() => setIsLoading(false)}
+ * />
+ */
+export declare const Loading: React.FC<LoadingProps>;
+export default Loading;

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { type PolymorphicComponent } from '../helpers/polymorphic.js';
+/**
+ * Props for the Menu component.
+ */
+export interface MenuProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof BulmaClassesProps>, BulmaClassesProps {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Menu content (labels, lists, items, etc). */
+    children: React.ReactNode;
+}
+/**
+ * Props for the MenuLabel component.
+ */
+export interface MenuLabelProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, keyof BulmaClassesProps>, BulmaClassesProps {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Label content. */
+    children: React.ReactNode;
+}
+/**
+ * Bulma Menu label component.
+ *
+ * @function
+ * @param {MenuLabelProps} props - Props for the MenuLabel component.
+ * @returns {JSX.Element} The rendered menu label.
+ */
+export declare const MenuLabel: React.FC<MenuLabelProps>;
+/**
+ * Props for the MenuList component.
+ */
+export interface MenuListProps extends Omit<React.HTMLAttributes<HTMLUListElement>, keyof BulmaClassesProps>, BulmaClassesProps {
+    /** Additional CSS classes. */
+    className?: string;
+    /** List items. */
+    children: React.ReactNode;
+}
+/**
+ * MenuList applies `menu-list` class only at the top level (not for nested lists).
+ *
+ * @function
+ * @param {MenuListProps} props - Props for the MenuList component.
+ * @returns {JSX.Element} The rendered menu list.
+ */
+export declare const MenuList: React.FC<MenuListProps>;
+/**
+ * The MenuItem component's own props.
+ *
+ * A menu item is two elements: a wrapping `<li>` and, inside it, the element
+ * `as` names. The props here are the ones the `<li>` consumes; everything else
+ * follows `as` onto the inner element.
+ */
+export interface MenuItemOwnProps extends BulmaClassesProps {
+    /** Additional CSS classes for the wrapping `<li>`. */
+    className?: string;
+    /** Item content and optional nested MenuList. */
+    children: React.ReactNode;
+    /** Highlight item as active. */
+    active?: boolean;
+    /** Inline styles for the wrapping `<li>`. */
+    style?: React.CSSProperties;
+    /** `id` for the wrapping `<li>`. */
+    id?: string;
+    /** `title` for the wrapping `<li>`. */
+    title?: string;
+    /** ARIA role for the wrapping `<li>`. */
+    role?: React.AriaRole;
+    /** Tab index for the wrapping `<li>`. */
+    tabIndex?: number;
+    /** Test id for the wrapping `<li>`. */
+    'data-testid'?: string;
+}
+/**
+ * Props for the MenuItem component. Everything the `<li>` does not consume
+ * follows `as` onto the inner element: with the default `'a'` that means `href`
+ * and the other anchor attributes, and with `as={Link}` it means that
+ * component's own props.
+ *
+ * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the inner element `as` renders, not the wrapping `<li>`, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
+ */
+export type MenuItemProps<T extends React.ElementType = 'a'> = MenuItemOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof MenuItemOwnProps | 'as'> & {
+    /** Custom link component (e.g. `Link` from router). */
+    as?: T;
+};
+/**
+ * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.
+ *
+ * @function
+ * @param {MenuItemProps} props - Props for the MenuItem component.
+ * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.
+ * @returns {JSX.Element} The rendered menu item.
+ */
+export declare const MenuItem: PolymorphicComponent<MenuItemOwnProps, "a">;
+export declare const Menu: React.FC<MenuProps> & {
+    Label: React.FC<MenuLabelProps>;
+    List: React.FC<MenuListProps>;
+    Item: PolymorphicComponent<MenuItemOwnProps, "a">;
+};
+export default Menu;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const validMessageSizes: readonly ["small", "medium", "large"];
+/**
+ * Valid size values for the Message component (Bulma message sizes).
+ */
+export type MessageSize = (typeof validMessageSizes)[number];
+/**
+ * Props for the Message component.
+ */
+export interface MessageProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Title string/node (renders header section). */
+    title?: React.ReactNode;
+    /** Text color for the message (Bulma helper). */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma color modifier for the message. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Background color for the message (Bulma helper). */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Size of the message. */
+    size?: MessageSize;
+    /** Callback for the close ("X") button. */
+    onClose?: () => void;
+    /** Body content for the message. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the Message.Header compound component.
+ */
+export interface MessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Header content (title, close button, etc.). */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the Message.Body compound component.
+ */
+export interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Message body content. */
+    children?: React.ReactNode;
+}
+export declare const Message: React.FC<MessageProps> & {
+    Header: React.FC<MessageHeaderProps>;
+    Body: React.FC<MessageBodyProps>;
+};
+export default Message;

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Modal component.
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `.modal` element.
+ */
+export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'title'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Whether the modal is open/visible. */
+    active?: boolean;
+    /** Alias for `active`. Whether the modal is open/visible. */
+    isActive?: boolean;
+    /** Callback invoked to request modal close (background or close button). */
+    onClose?: () => void;
+    /** Additional CSS classes for the modal. */
+    className?: string;
+    /** Text color for modal content. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color for modal content. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Title/header for modal-card variant. (Legacy API only) */
+    modalCardTitle?: React.ReactNode;
+    /** Footer for modal-card variant. (Legacy API only) */
+    modalCardFoot?: React.ReactNode;
+    /**
+     * Modal style: `'card'` for modal-card, `'content'` for modal-content. (Legacy API only)
+     * @defaultValue auto
+     */
+    type?: 'card' | 'content';
+    /** Modal body/content or compound components. */
+    children?: React.ReactNode;
+    /**
+     * Close the modal when the Escape key is pressed (calls `onClose`). Only the
+     * topmost open modal responds, so Escape closes one layer at a time.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Lock body scroll while the modal is active. Ref-counted and shared with
+     * `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first does
+     * not unlock the page underneath one that is still open.
+     * @defaultValue true
+     */
+    lockScroll?: boolean;
+    /**
+     * Renders the modal into a portal target instead of inline, so it isn't
+     * clipped by an ancestor with `overflow: hidden`, `filter` or `transform`.
+     * `true` portals to `document.body`; a string is used as a
+     * `document.querySelector` selector; an element is used directly. Renders
+     * inline on the server and while hydrating, moving into the portal once the
+     * client takes over, so hydration matches.
+     * @defaultValue false
+     */
+    portal?: boolean | string | HTMLElement;
+}
+/**
+ * Props for Modal.Background component.
+ */
+export interface ModalBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Props for Modal.Content component.
+ */
+export interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Props for Modal.Card component.
+ */
+export interface ModalCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Props for Modal.Card.Head component.
+ */
+export interface ModalCardHeadProps extends React.HTMLAttributes<HTMLElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Props for Modal.Card.Title component.
+ */
+export interface ModalCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Props for Modal.Card.Body component.
+ */
+export interface ModalCardBodyProps extends React.HTMLAttributes<HTMLElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Props for Modal.Card.Foot component.
+ */
+export interface ModalCardFootProps extends React.HTMLAttributes<HTMLElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Props for Modal.Close component.
+ */
+export interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Size of the close button (only applies to 'floating' variant). */
+    size?: 'small' | 'medium' | 'large';
+    /** Button variant. 'delete' (default) for modal card headers, 'floating' for overlay close button. */
+    variant?: 'delete' | 'floating';
+}
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>> & {
+    Background: React.FC<ModalBackgroundProps>;
+    Content: React.FC<ModalContentProps>;
+    Card: React.FC<ModalCardProps> & {
+        Head: React.FC<ModalCardHeadProps>;
+        Title: React.FC<ModalCardTitleProps>;
+        Body: React.FC<ModalCardBodyProps>;
+        Foot: React.FC<ModalCardFootProps>;
+    };
+    Close: React.FC<ModalCloseProps>;
+};
+export default Modal;