@allxsmith/bestax-bulma 5.6.2 → 5.8.0

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

@@ -1,6 +1,23 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/** Valid dialog type/color values. */
 export type DialogType = 'default' | 'success' | 'danger' | 'warning' | 'info';
+/**
+ * Props for the Dialog component.
+ *
+ * @property {boolean} isOpen - Whether the dialog is open.
+ * @property {string} [title] - Dialog title.
+ * @property {string | React.ReactNode} message - Dialog message/content.
+ * @property {DialogType} [type] - The type/color of the dialog. Default: 'default'.
+ * @property {string} [confirmText] - Text for confirm button. Default: 'OK'.
+ * @property {string} [cancelText] - Text for cancel button. Default: 'Cancel'.
+ * @property {() => void} [onConfirm] - Callback when confirm button is clicked.
+ * @property {() => void} [onCancel] - Callback when cancel button is clicked or dialog is dismissed.
+ * @property {boolean} [showCancel] - Whether to show cancel button. Default: true for confirm dialogs.
+ * @property {boolean} [canCancel] - Whether the dialog can be dismissed. Default: true.
+ * @property {boolean} [focusCancel] - Focus cancel button instead of confirm. Default: false.
+ * @property {React.ReactNode} [icon] - Custom icon to display.
+ */
 export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
     isOpen: boolean;
     title?: string;
@@ -15,7 +32,50 @@ export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     focusCancel?: boolean;
     icon?: React.ReactNode;
 }
+/**
+ * Dialog component for confirmation and alert dialogs.
+ *
+ * Provides a modal dialog with confirm/cancel actions, customizable
+ * appearance, and keyboard support.
+ *
+ * @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.
+ *
+ * @property {string} [title] - Dialog title.
+ * @property {string | React.ReactNode} message - Dialog message/content.
+ * @property {DialogType} [type] - Dialog type/color.
+ * @property {string} [confirmText] - Text for the confirm button.
+ * @property {React.ReactNode} [icon] - Custom icon to display.
+ */
 export interface AlertOptions {
     title?: string;
     message: string | React.ReactNode;
@@ -23,10 +83,22 @@ export interface AlertOptions {
     confirmText?: string;
     icon?: React.ReactNode;
 }
+/**
+ * Options for showing a programmatic confirm dialog.
+ *
+ * @property {string} [cancelText] - Text for the cancel button.
+ * @property {boolean} [focusCancel] - Focus cancel button instead of confirm.
+ */
 export interface ConfirmOptions extends AlertOptions {
     cancelText?: string;
     focusCancel?: boolean;
 }
+/**
+ * Options for showing a programmatic prompt dialog.
+ *
+ * @property {string} [placeholder] - Input placeholder text.
+ * @property {string} [defaultValue] - Default input value.
+ */
 export interface PromptOptions extends ConfirmOptions {
     placeholder?: string;
     defaultValue?: string;
@@ -37,11 +109,33 @@ type DialogState = {
     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/components/Dropdown.d.ts

@@ -1,6 +1,28 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * 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.
+ *
+ * @property {React.ReactNode} label - The dropdown button content.
+ * @property {React.ReactNode} children - The menu items.
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {string} [menuClassName] - Additional CSS classes for the dropdown menu.
+ * @property {boolean} [active] - Whether the dropdown is open (controlled).
+ * @property {boolean} [up] - Dropdown direction up.
+ * @property {boolean} [right] - Dropdown aligned to the right.
+ * @property {boolean} [hoverable] - Dropdown opens on hover.
+ * @property {boolean} [disabled] - Disables the dropdown trigger.
+ * @property {(active: boolean) => void} [onActiveChange] - Called when active state changes.
+ * @property {boolean} [closeOnClick=true] - Close dropdown when clicking a menu item.
+ * @property {string} [id] - ID for the root element.
+ */
 export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof BulmaClassesProps>, BulmaClassesProps {
     label: React.ReactNode;
     children: React.ReactNode;
@@ -15,14 +37,36 @@ export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     closeOnClick?: boolean;
     id?: string;
 }
+/**
+ * Props for the DropdownItem component.
+ *
+ * @property {boolean} [active] - Whether the item is active.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {'a'|'div'|'button'} [as] - The element type to render.
+ * @property {React.ReactNode} [children] - Item content.
+ */
 export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof BulmaClassesProps>, BulmaClassesProps {
     active?: boolean;
     className?: string;
     as?: 'a' | 'div' | 'button';
     children?: React.ReactNode;
 }
+/**
+ * Bulma Dropdown item.
+ *
+ * @function
+ * @param {DropdownItemProps} props - Props for the DropdownItem component.
+ * @returns {JSX.Element} The rendered dropdown item.
+ */
 export declare const DropdownItem: React.FC<DropdownItemProps>;
+/**
+ * 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.FC<DropdownProps> & {
     Item: React.FC<DropdownItemProps>;
     Divider: React.FC<{}>;

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

@@ -1,7 +1,29 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * 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.
+ *
+ * @property {boolean} [active] - Whether the loading overlay is visible.
+ * @property {boolean} [isFullPage] - Cover the entire viewport.
+ * @property {'small' | 'medium' | 'large'} [size] - Size of the loading spinner.
+ * @property {LoadingColor} [color] - Color variant for the spinner. Default is light grey.
+ * @property {boolean} [canCancel] - Show a cancel button/allow closing.
+ * @property {() => void} [onCancel] - Callback when cancel is triggered.
+ * @property {React.ReactNode} [children] - Content to display below the spinner.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {string} [overlayClassName] - Additional classes for the overlay.
+ * @property {string} [iconClassName] - Additional classes for the spinner icon.
+ * @property {React.ReactNode} [indicator] - Custom content to replace the default CSS spinner. The Loading component wraps it in a spinning container.
+ * @property {LoadingOverlay} [overlay] - Overlay opacity level: 'light', 'dark', or 'opaque'. Defaults to a medium opacity.
+ */
 export interface LoadingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size' | 'overlay'> {
     active?: boolean;
     isFullPage?: boolean;
@@ -14,5 +36,38 @@ export interface LoadingProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     indicator?: React.ReactNode;
     overlay?: LoadingOverlay;
 }
+/**
+ * Loading component for displaying a loading overlay with spinner.
+ *
+ * Can be used as a full-page overlay or a container overlay to indicate
+ * loading states. Supports different sizes, color variants, and optional
+ * cancel functionality.
+ *
+ * @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/components/Menu.d.ts

@@ -1,19 +1,60 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Menu component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} children - Menu content.
+ */
 export interface MenuProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof BulmaClassesProps>, BulmaClassesProps {
     className?: string;
     children: React.ReactNode;
 }
+/**
+ * Props for the MenuLabel component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} children - Label content.
+ */
 export interface MenuLabelProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, keyof BulmaClassesProps>, BulmaClassesProps {
     className?: string;
     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.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} children - List items.
+ */
 export interface MenuListProps extends Omit<React.HTMLAttributes<HTMLUListElement>, keyof BulmaClassesProps>, BulmaClassesProps {
     className?: string;
     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>;
+/**
+ * Props for the MenuItem component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ * @property {boolean} [active] - Whether the item is active.
+ * @property {string} [href] - Href for link items.
+ * @property {React.ElementType} [as] - Render as a custom component.
+ * @property {React.ReactNode} children - Item content and optional nested MenuList.
+ */
 export interface MenuItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, keyof BulmaClassesProps>, BulmaClassesProps {
     className?: string;
     children: React.ReactNode;
@@ -22,6 +63,13 @@ export interface MenuItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement
     as?: React.ElementType;
     [key: string]: unknown;
 }
+/**
+ * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.
+ *
+ * @function
+ * @param {MenuItemProps} props - Props for the MenuItem component.
+ * @returns {JSX.Element} The rendered menu item.
+ */
 export declare const MenuItem: React.FC<MenuItemProps>;
 export declare const Menu: React.FC<MenuProps> & {
     Label: React.FC<MenuLabelProps>;

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

@@ -1,5 +1,16 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Message component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [title] - Title displayed in the message header.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma or 'inherit'/'current').
+ * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the message.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma or 'inherit'/'current').
+ * @property {() => void} [onClose] - Called when the close button is clicked.
+ * @property {React.ReactNode} [children] - Message body content.
+ */
 export interface MessageProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     className?: string;
     title?: React.ReactNode;
@@ -9,21 +20,28 @@ export interface MessageProps extends Omit<React.HTMLAttributes<HTMLElement>, 't
     onClose?: () => void;
     children?: React.ReactNode;
 }
-declare const MessageComponent: React.FC<MessageProps>;
+/**
+ * Props for the Message.Header compound component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Header content (title, close button, etc.).
+ */
 export interface MessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     children?: React.ReactNode;
 }
+/**
+ * Props for the Message.Body compound component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Message body content.
+ */
 export interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     children?: React.ReactNode;
 }
-declare const MessageHeader: React.FC<MessageHeaderProps>;
-declare const MessageBody: React.FC<MessageBodyProps>;
-type MessageWithCompounds = typeof MessageComponent & {
-    Header: typeof MessageHeader;
-    Body: typeof MessageBody;
+export declare const Message: React.FC<MessageProps> & {
+    Header: React.FC<MessageHeaderProps>;
+    Body: React.FC<MessageBodyProps>;
 };
-declare const MessageWithSubComponents: MessageWithCompounds;
-export { MessageWithSubComponents as Message };
-export default MessageWithSubComponents;
+export default Message;

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

@@ -1,5 +1,19 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Modal component.
+ *
+ * @property {boolean} [active] - Whether the modal is open/visible.
+ * @property {boolean} [isActive] - Alias for `active`. Whether the modal is open/visible.
+ * @property {() => void} [onClose] - Callback invoked when modal close is requested (background click or close button).
+ * @property {string} [className] - Additional CSS classes for the modal.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color for modal content.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color for modal content.
+ * @property {React.ReactNode} [modalCardTitle] - Title for modal card variant (legacy API).
+ * @property {React.ReactNode} [modalCardFoot] - Footer for modal card variant (legacy API).
+ * @property {'card'|'content'} [type] - Modal type ('card' for modal-card, 'content' for modal-content). Legacy API only.
+ * @property {React.ReactNode} [children] - Modal body/content or compound components.
+ */
 export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'title'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     active?: boolean;
     isActive?: boolean;
@@ -12,49 +26,83 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     type?: 'card' | 'content';
     children?: React.ReactNode;
 }
+/**
+ * Props for Modal.Background component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ */
 export interface ModalBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
+/**
+ * Props for Modal.Content component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ */
 export interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
+/**
+ * Props for Modal.Card component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ */
 export interface ModalCardProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
+/**
+ * Props for Modal.Card.Head component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ */
 export interface ModalCardHeadProps extends React.HTMLAttributes<HTMLElement> {
     className?: string;
 }
+/**
+ * Props for Modal.Card.Title component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ */
 export interface ModalCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     className?: string;
 }
+/**
+ * Props for Modal.Card.Body component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ */
 export interface ModalCardBodyProps extends React.HTMLAttributes<HTMLElement> {
     className?: string;
 }
+/**
+ * Props for Modal.Card.Foot component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ */
 export interface ModalCardFootProps extends React.HTMLAttributes<HTMLElement> {
     className?: string;
 }
+/**
+ * Props for Modal.Close component.
+ *
+ * @property {string} [className] - Additional CSS classes.
+ * @property {'small' | 'medium' | 'large'} [size] - Size of the close button (only applies to 'floating' variant).
+ * @property {'delete' | 'floating'} [variant] - Button variant. 'delete' (default) for modal card headers, 'floating' for overlay close button.
+ */
 export interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
     size?: 'small' | 'medium' | 'large';
     variant?: 'delete' | 'floating';
 }
-declare const ModalBackground: React.FC<ModalBackgroundProps>;
-declare const ModalContent: React.FC<ModalContentProps>;
-declare const ModalCardHead: React.FC<ModalCardHeadProps>;
-declare const ModalCardTitle: React.FC<ModalCardTitleProps>;
-declare const ModalCardBody: React.FC<ModalCardBodyProps>;
-declare const ModalCardFoot: React.FC<ModalCardFootProps>;
-declare const ModalCard: React.FC<ModalCardProps> & {
-    Head: typeof ModalCardHead;
-    Title: typeof ModalCardTitle;
-    Body: typeof ModalCardBody;
-    Foot: typeof ModalCardFoot;
-};
-declare const ModalClose: React.FC<ModalCloseProps>;
 export declare const Modal: React.FC<ModalProps> & {
-    Background: typeof ModalBackground;
-    Content: typeof ModalContent;
-    Card: typeof ModalCard;
-    Close: typeof ModalClose;
+    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;