@allxsmith/bestax-bulma 5.7.0 → 5.8.1

package/dist/types/elements/Skeleton.d.ts

@@ -1,8 +1,30 @@
 import React from 'react';
+/**
+ * Props for the Skeleton component.
+ */
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes to apply */
     className?: string;
+    /** Skeleton variant: block (single block) or lines. */
     variant?: 'block' | 'lines';
+    /** Number of lines (only for `lines` variant). */
     lines?: number;
+    /** Content inside the block (only for block variant). */
     children?: React.ReactNode;
 }
+/**
+ * The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
+ *
+ * @function
+ * @param {SkeletonProps} props - Props for the Skeleton component.
+ * @returns {JSX.Element} The rendered skeleton element.
+ *
+ * @example
+ * // Block skeleton
+ * <Skeleton />
+ *
+ * @example
+ * // Multi-line skeleton
+ * <Skeleton variant="lines" lines={5} />
+ */
 export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/types/elements/Span.d.ts

@@ -1,9 +1,23 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Span component.
+ */
 export interface SpanProps extends React.HTMLAttributes<HTMLSpanElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Content to render inside the span. */
     children?: React.ReactNode;
 }
+/**
+ * The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {SpanProps} props - Props for the Span component.
+ * @returns {JSX.Element} The rendered span element.
+ */
 export declare const Span: React.FC<SpanProps>;

package/dist/types/elements/Strong.d.ts

@@ -1,9 +1,23 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Strong component.
+ */
 export interface StrongProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Content to render inside the strong element. */
     children?: React.ReactNode;
 }
+/**
+ * The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {StrongProps} props - Props for the Strong component.
+ * @returns {JSX.Element} The rendered strong element.
+ */
 export declare const Strong: React.FC<StrongProps>;

package/dist/types/elements/SubTitle.d.ts

@@ -1,17 +1,42 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
 declare const validSubTitleSizes: readonly ["1", "2", "3", "4", "5", "6"];
+/**
+ * Valid size values for the SubTitle component (Bulma subtitle sizes).
+ */
 export type SubTitleSize = (typeof validSubTitleSizes)[number];
 declare const validSubTitleElements: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "p"];
+/**
+ * Valid HTML elements for the SubTitle component.
+ */
 export type SubTitleElement = (typeof validSubTitleElements)[number];
+/**
+ * Props for the SubTitle component.
+ * @extraProp {boolean} [skeleton] - Applies the `is-skeleton` class to the entire component.
+ */
 export interface SubTitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement | HTMLParagraphElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Size of the subtitle (Bulma sizes). */
     size?: SubTitleSize;
+    /** HTML element to render as (h1-h6 or p). */
     as?: SubTitleElement;
+    /** Applies the `has-skeleton` class to part of the content. */
     hasSkeleton?: boolean;
+    /** Subtitle content. */
     children?: React.ReactNode;
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
 }
+/**
+ * The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`, `p`).
+ *
+ * @function
+ * @param {SubTitleProps} props - Props for the SubTitle component.
+ * @returns {JSX.Element} The rendered subtitle element.
+ * @see {@link https://bulma.io/documentation/elements/title/#subtitle | Bulma Subtitle documentation}
+ */
 export declare const SubTitle: React.FC<SubTitleProps>;
 export default SubTitle;

package/dist/types/elements/Table.d.ts

@@ -1,13 +1,27 @@
+/**
+ * @group Table
+ */
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Table component.
+ */
 export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Adds borders to all cells. */
     isBordered?: boolean;
+    /** Adds zebra-striping to rows. */
     isStriped?: boolean;
+    /** Makes the table more compact by cutting cell padding in half. */
     isNarrow?: boolean;
+    /** Adds a hover effect on rows. */
     isHoverable?: boolean;
+    /** Makes the table span the full width of its parent. */
     isFullwidth?: boolean;
+    /** Makes the table horizontally scrollable on small screens. */
     isResponsive?: boolean;
+    /** Table content (should use subcomponents). */
     children?: React.ReactNode;
 }
 export declare const Table: React.FC<TableProps> & {

package/dist/types/elements/Tag.d.ts

@@ -1,18 +1,43 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 declare const validTagColors: readonly ["primary", "link", "info", "success", "warning", "danger", "black", "dark", "light", "white"];
+/**
+ * Valid color values for the Tag component (Bulma tag colors).
+ */
 export type TagColor = (typeof validTagColors)[number];
 declare const validTagSizes: readonly ["normal", "medium", "large"];
+/**
+ * Valid size values for the Tag component (Bulma tag sizes).
+ */
 export type TagSize = (typeof validTagSizes)[number];
+/**
+ * Props for the Tag component.
+ */
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Bulma color modifier for the tag. */
     color?: TagColor;
+    /** Tag size. */
     size?: TagSize;
+    /** Renders a rounded tag. */
     isRounded?: boolean;
+    /** Renders a delete-style tag (delete button). */
     isDelete?: boolean;
+    /** Adds hover effect to the tag. */
     isHoverable?: boolean;
+    /** Callback for delete tag/button. */
     onDelete?: () => void;
+    /** Tag content. */
     children?: React.ReactNode;
 }
+/**
+ * The `Tag` component renders a Bulma-styled label or badge.
+ *
+ * @function
+ * @param {TagProps} props - Props for the Tag component.
+ * @returns {JSX.Element} The rendered tag element.
+ * @see {@link https://bulma.io/documentation/elements/tag/ | Bulma Tag documentation}
+ */
 export declare const Tag: React.FC<TagProps>;
 export {};

package/dist/types/elements/Tags.d.ts

@@ -1,9 +1,16 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Tags component.
+ */
 export interface TagsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Group tags together as add-ons (no spacing). */
     hasAddons?: boolean;
+    /** Allow tags to wrap onto multiple lines. */
     isMultiline?: boolean;
+    /** Tag elements to render inside the container. */
     children?: React.ReactNode;
 }
 export declare const Tags: React.FC<TagsProps> & {

package/dist/types/elements/Tbody.d.ts

@@ -1,7 +1,25 @@
+/**
+ * @group Table
+ */
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Tbody component.
+ */
 export interface TbodyProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Table body content (rows). */
     children?: React.ReactNode;
 }
+/**
+ * Tbody component for rendering a styled Bulma table body.
+ *
+ * Supports Bulma helper classes for additional styling.
+ *
+ * @function
+ * @param {TbodyProps} props - Props for the Tbody component.
+ * @returns {JSX.Element} The rendered table body element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-body | Bulma Table documentation}
+ */
 export declare const Tbody: React.FC<TbodyProps>;

package/dist/types/elements/Td.d.ts

@@ -1,10 +1,33 @@
+/**
+ * @group Table
+ */
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/** Valid Bulma color values for table cells. */
 export declare const validTableColors: readonly ["primary", "link", "info", "success", "warning", "danger", "black", "dark", "light", "white"];
+/**
+ * Valid color values for the Td component (Bulma table cell colors).
+ */
 export type TableColor = (typeof validTableColors)[number];
+/**
+ * Props for the Td component.
+ */
 export interface TdProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Bulma color modifier for the table cell. */
     color?: TableColor;
+    /** Table cell content. */
     children?: React.ReactNode;
 }
+/**
+ * Td component for rendering a styled Bulma table cell.
+ *
+ * Supports Bulma color modifiers and helper classes for additional styling.
+ *
+ * @function
+ * @param {TdProps} props - Props for the Td component.
+ * @returns {JSX.Element} The rendered table cell element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-body | Bulma Table documentation}
+ */
 export declare const Td: React.FC<TdProps>;

package/dist/types/elements/Tfoot.d.ts

@@ -1,7 +1,25 @@
+/**
+ * @group Table
+ */
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Tfoot component.
+ */
 export interface TfootProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Table footer content (rows). */
     children?: React.ReactNode;
 }
+/**
+ * Tfoot component for rendering a styled Bulma table footer.
+ *
+ * Supports Bulma helper classes for additional styling.
+ *
+ * @function
+ * @param {TfootProps} props - Props for the Tfoot component.
+ * @returns {JSX.Element} The rendered table footer element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-footer | Bulma Table documentation}
+ */
 export declare const Tfoot: React.FC<TfootProps>;

package/dist/types/elements/Th.d.ts

@@ -1,14 +1,38 @@
+/**
+ * @group Table
+ */
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { TableColor } from './Td';
 declare const validAlignments: readonly ["left", "right", "centered"];
+/**
+ * Valid alignment values for the Th component.
+ */
 type TableAlignment = (typeof validAlignments)[number];
+/**
+ * Props for the Th component.
+ */
 export interface ThProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Text alignment for the header cell ('left', 'right', 'centered'). */
     isAligned?: TableAlignment;
+    /** Width of the header cell (e.g., '100px' or 100). */
     width?: string | number;
+    /** Bulma color modifier for the header cell. */
     color?: TableColor;
+    /** Table header cell content. */
     children?: React.ReactNode;
 }
+/**
+ * Th component for rendering a styled Bulma table header cell.
+ *
+ * Supports alignment, width, and color modifiers.
+ *
+ * @function
+ * @param {ThProps} props - Props for the Th component.
+ * @returns {JSX.Element} The rendered table header cell element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}
+ */
 export declare const Th: React.FC<ThProps>;
 export {};

package/dist/types/elements/Thead.d.ts

@@ -1,7 +1,25 @@
+/**
+ * @group Table
+ */
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Thead component.
+ */
 export interface TheadProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Table header content (rows). */
     children?: React.ReactNode;
 }
+/**
+ * Thead component for rendering a styled Bulma table header.
+ *
+ * Supports Bulma helper classes for additional styling.
+ *
+ * @function
+ * @param {TheadProps} props - Props for the Thead component.
+ * @returns {JSX.Element} The rendered table header element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}
+ */
 export declare const Thead: React.FC<TheadProps>;

package/dist/types/elements/Title.d.ts

@@ -1,18 +1,44 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
 declare const validTitleSizes: readonly ["1", "2", "3", "4", "5", "6"];
+/**
+ * Valid size values for the Title component (Bulma title sizes).
+ */
 export type TitleSize = (typeof validTitleSizes)[number];
 declare const validTitleElements: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "p"];
+/**
+ * Valid HTML elements for the Title component.
+ */
 export type TitleElement = (typeof validTitleElements)[number];
+/**
+ * Props for the Title component.
+ * @extraProp {boolean} [skeleton] - Applies the `is-skeleton` class to the entire component.
+ */
 export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement | HTMLParagraphElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Size of the title (Bulma sizes). */
     size?: TitleSize;
+    /** Adds margin below the title. */
     isSpaced?: boolean;
+    /** HTML element to render as (h1-h6 or p). */
     as?: TitleElement;
+    /** Applies the `has-skeleton` class to part of the content. */
     hasSkeleton?: boolean;
+    /** Title content. */
     children?: React.ReactNode;
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
 }
+/**
+ * The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).
+ *
+ * @function
+ * @param {TitleProps} props - Props for the Title component.
+ * @returns {JSX.Element} The rendered title element.
+ * @see {@link https://bulma.io/documentation/elements/title/ | Bulma Title documentation}
+ */
 export declare const Title: React.FC<TitleProps>;
 export default Title;

package/dist/types/elements/Tr.d.ts

@@ -1,10 +1,30 @@
+/**
+ * @group Table
+ */
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { TableColor } from './Td';
+/**
+ * Props for the Tr component.
+ */
 export interface TrProps extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Whether the row is selected (adds Bulma's is-selected class). */
     isSelected?: boolean;
+    /** Bulma color modifier for the table row. */
     color?: TableColor;
+    /** Table row content (cells). */
     children?: React.ReactNode;
 }
+/**
+ * Tr component for rendering a styled Bulma table row.
+ *
+ * Supports the is-selected modifier and color modifiers.
+ *
+ * @function
+ * @param {TrProps} props - Props for the Tr component.
+ * @returns {JSX.Element} The rendered table row element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-row | Bulma Table documentation}
+ */
 export declare const Tr: React.FC<TrProps>;

package/dist/types/elements/UnorderedList.d.ts

@@ -1,9 +1,16 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the UnorderedList component.
+ */
 export interface UnorderedListProps extends React.HTMLAttributes<HTMLUListElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** List items to render inside the list. */
     children?: React.ReactNode;
 }
 export declare const UnorderedList: React.FC<UnorderedListProps> & {

package/dist/types/form/Autocomplete.d.ts

@@ -1,42 +1,106 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/**
+ * An item in the Autocomplete dropdown list.
+ */
 export interface AutocompleteItem {
+    /** The value used for filtering and selection. */
     value: string;
+    /** Display label (optional). */
     label?: string;
+    /** Whether the item is disabled and unselectable. */
     disabled?: boolean;
     [key: string]: unknown;
 }
+/**
+ * Props for the Autocomplete component.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
+ */
 export interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onInput'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** The options data to display (required). */
     data: AutocompleteItem[] | string[];
+    /** The current input value (controlled). */
     value?: string;
+    /** The selected item (controlled). */
     selected?: AutocompleteItem | string | null;
+    /** Placeholder text for the input. */
     placeholder?: string;
+    /** Object property to use as the display field. */
     field?: string;
+    /** Whether to show a clear button. */
     clearable?: boolean;
+    /** Open dropdown when input is focused. */
     openOnFocus?: boolean;
+    /** Keep first option highlighted. */
     keepFirst?: boolean;
+    /** Keep dropdown open after selection. */
     keepOpen?: boolean;
+    /** Select highlighted item on click outside. */
     selectOnClickOutside?: boolean;
+    /** Maximum dropdown height in pixels. */
     maxHeight?: number;
+    /** Render as dropdown style. */
     dropdown?: boolean;
+    /** Show loading state. */
     loading?: boolean;
+    /** Whether the input is disabled. */
     disabled?: boolean;
+    /** Enables infinite scroll detection in the dropdown. */
     checkInfiniteScroll?: boolean;
+    /** Distance in pixels from the bottom to trigger `onInfiniteScroll`. */
     infiniteScrollDistance?: number;
+    /** Input color variant. */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Size variant. */
     size?: 'small' | 'medium' | 'large';
+    /** Form field name. Forwarded to the inner `<input>`. */
     name?: string;
+    /** Optional id of the form the input belongs to. */
     form?: string;
+    /** Marks the field as required for native HTML form validation. */
     required?: boolean;
+    /** Callback when input value changes. */
     onInput?: (value: string) => void;
+    /** Callback when item is selected. */
     onSelect?: (item: AutocompleteItem | string | null) => void;
+    /** Callback when dropdown active state changes. */
     onActiveChange?: (active: boolean) => void;
+    /** Callback when scrolled to bottom (infinite scroll). */
     onInfiniteScroll?: () => void;
+    /** Custom render for items. */
     itemTemplate?: (item: AutocompleteItem | string) => React.ReactNode;
+    /** Custom header in dropdown. */
     header?: React.ReactNode;
+    /** Custom footer in dropdown. */
     footer?: React.ReactNode;
+    /** Content to show when no results. */
     empty?: React.ReactNode;
 }
+/**
+ * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
+ *
+ * @function
+ * @param {AutocompleteProps} props - Props for the Autocomplete component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.
+ * @returns {JSX.Element} The rendered autocomplete component.
+ *
+ * @example
+ * // Basic usage with string array
+ * <Autocomplete
+ *   data={['Apple', 'Banana', 'Cherry']}
+ *   placeholder="Search fruit..."
+ *   onSelect={(item) => console.log(item)}
+ * />
+ *
+ * @example
+ * // With object data
+ * <Autocomplete
+ *   data={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]}
+ *   field="label"
+ *   onSelect={(item) => console.log(item)}
+ * />
+ */
 export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<HTMLInputElement>>;
 export default Autocomplete;

package/dist/types/form/Checkbox.d.ts

@@ -1,14 +1,47 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Valid colors for the Checkbox component.
+ */
 export declare const checkboxColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Valid sizes for the Checkbox component.
+ */
 export declare const checkboxSizes: readonly ["small", "normal", "medium", "large"];
+/**
+ * Props for the Checkbox component.
+ */
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /** Color of the checkbox. */
     color?: (typeof checkboxColors)[number];
+    /** Size of the checkbox. */
     size?: (typeof checkboxSizes)[number];
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Whether the checkbox is disabled. */
     disabled?: boolean;
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** The label/content for the checkbox. */
     children?: React.ReactNode;
 }
+/**
+ * The `Checkbox` component provides a Bulma-styled checkbox input.
+ *
+ * @function
+ * @param {CheckboxProps} props - Props for the Checkbox component.
+ * @returns {JSX.Element} The rendered checkbox element.
+ *
+ * @example
+ * // Basic checkbox
+ * <Checkbox>Accept terms</Checkbox>
+ *
+ * @example
+ * // Inside a group
+ * <Checkboxes name="tags" defaultValue={['react']}>
+ *   <Checkbox value="react">React</Checkbox>
+ *   <Checkbox value="vue">Vue</Checkbox>
+ * </Checkboxes>
+ */
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/dist/types/form/Checkboxes.d.ts

@@ -1,12 +1,21 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/**
+ * Props for the Checkboxes component.
+ */
 export interface CheckboxesProps extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Form field name shared by every Checkbox in the group (via context). */
     name?: string;
+    /** Currently-selected values (controlled mode). */
     value?: string[];
+    /** Initial selected values (uncontrolled mode). */
     defaultValue?: string[];
+    /** Fires when the selection changes; receives the new array. */
     onChange?: (values: string[]) => void;
+    /** Checkbox elements to render in the group. */
     children?: React.ReactNode;
 }
 export declare const Checkboxes: React.FC<CheckboxesProps> & {