@allxsmith/bestax-bulma 5.7.0 → 5.8.1

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

@@ -1,34 +1,101 @@
 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.
+ * @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;
 }
+/**
+ * The `Dialog` component provides confirmation and alert dialogs with customizable actions.
+ *
+ * @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;
@@ -37,11 +104,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,28 +1,70 @@
 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.
+ */
 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;
 }
+/**
+ * Props for the DropdownItem component.
+ */
 export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof BulmaClassesProps>, BulmaClassesProps {
+    /** Whether the item is active. */
     active?: boolean;
+    /** Additional CSS classes. */
     className?: string;
+    /** The element type to render. */
     as?: 'a' | 'div' | 'button';
+    /** Item content. */
     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,18 +1,68 @@
 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.
+ * @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/components/Menu.d.ts

@@ -1,27 +1,71 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * 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>;
+/**
+ * Props for the MenuItem component.
+ */
 export interface MenuItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, keyof BulmaClassesProps>, BulmaClassesProps {
+    /** Additional CSS classes. */
     className?: string;
+    /** Item content and optional nested MenuList. */
     children: React.ReactNode;
+    /** Highlight item as active. */
     active?: boolean;
+    /** Href for link items (if rendered as `<a>`). */
     href?: string;
+    /** Custom link component (e.g. `Link` from router). */
     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,20 +1,40 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Message component.
+ */
 export interface MessageProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** 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';
+    /** 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> & {

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

@@ -1,41 +1,91 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Modal component.
+ */
 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;
 }
+/**
+ * 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.FC<ModalProps> & {