docs(bulma-ui): generate the elements API pages (3/4)

bulma-ui/src/elements/Block.tsx

@@ -8,29 +8,25 @@ import {
 
 /**
  * Props for the Block component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the block.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Content to be rendered inside the block.
  */
 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';
+  /** Bulma color modifier for the block. */
   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;
 }
 
 /**
- * Block component for rendering a styled Bulma block element.
- *
- * A block is a simple utility element that adds spacing (margin-bottom) between elements.
- * Supports Bulma helper classes for additional styling like text color, background color, and layout.
+ * 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.

bulma-ui/src/elements/Box.tsx

@@ -8,31 +8,28 @@ import {
 
 /**
  * Props for the Box component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the box.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {boolean} [hasShadow=true] - Whether the box has a shadow (default: true).
- * @property {React.ReactNode} [children] - Content to be rendered inside the box.
  */
 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';
+  /** Bulma color modifier for the box. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Whether the box has a shadow (default: true). */
   hasShadow?: boolean;
+  /** Content to render inside the box. */
   children?: React.ReactNode;
 }
 
 /**
- * Box component for rendering a styled Bulma box element.
- *
- * Supports Bulma helper classes for styling and layout, with optional shadow control.
+ * 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.

bulma-ui/src/elements/Button.tsx

@@ -8,34 +8,12 @@ import {
 
 /**
  * Props for the Button component.
- *
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'light' | 'dark' | 'black' | 'text' | 'ghost'} [color] - Bulma color modifier for the button.
- * @property {'small' | 'normal' | 'medium' | 'large'} [size] - Button size.
- * @property {boolean} [isLight] - Use the light version of the color.
- * @property {boolean} [isRounded] - Button is fully rounded.
- * @property {boolean} [isLoading] - Button shows a loading spinner.
- * @property {boolean} [isStatic] - Button is static and non-interactive.
- * @property {boolean} [isFullWidth] - Button takes the full width of parent.
- * @property {boolean} [isOutlined] - Use outlined button style.
- * @property {boolean} [isInverted] - Use inverted color style.
- * @property {boolean} [isFocused] - Button is styled as focused.
- * @property {boolean} [isActive] - Button is styled as active.
- * @property {boolean} [isHovered] - Button is styled as hovered.
- * @property {boolean} [isDisabled] - Button is disabled.
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ElementType} [as] - Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else (including `'a'`) uses anchor-style prop handling.
- * @property {string} [href] - Specifies the URL for anchor buttons.
- * @property {React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement>} [onClick] - Click handler for the button or anchor.
- * @property {string} [target] - Target for anchor element.
- * @property {string} [rel] - Rel attribute for anchor element.
- * @property {React.ReactNode} [children] - Content to be rendered inside the button.
  */
 export interface ButtonProps
   extends
     Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'onClick'>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+  /** Bulma color variant for the button. `ghost` renders a link-like button; `text` renders a minimal text-only button. */
   color?:
     | 'primary'
     | 'link'
@@ -49,42 +27,62 @@ export interface ButtonProps
     | 'black'
     | 'text'
     | 'ghost';
+  /** Size of the button. */
   size?: 'small' | 'normal' | 'medium' | 'large';
+  /** Applies a lighter color variant. */
   isLight?: boolean;
+  /** Makes the button rounded. */
   isRounded?: boolean;
+  /** Displays a loading spinner. */
   isLoading?: boolean;
+  /** Makes the button non-interactive. */
   isStatic?: boolean;
+  /** Makes the button full-width. */
   isFullWidth?: boolean;
+  /** Applies outlined styling (requires color). */
   isOutlined?: boolean;
+  /** Applies inverted styling (requires color). */
   isInverted?: boolean;
+  /** Applies focused styling (visual only). */
   isFocused?: boolean;
+  /** Applies active styling (visual only). */
   isActive?: boolean;
+  /** Applies hovered styling (visual only). */
   isHovered?: boolean;
+  /** Applies disabled styling. */
   isDisabled?: boolean;
+  /** Custom class name. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else (including `'a'`) uses anchor-style prop handling. */
   as?: React.ElementType;
+  /** Href value (if rendering as `<a>`). */
   href?: string;
+  /** Click event handler. */
   onClick?:
     | React.MouseEventHandler<HTMLButtonElement>
     | React.MouseEventHandler<HTMLAnchorElement>;
+  /** Anchor tag target. */
   target?: string;
+  /** Anchor tag rel. */
   rel?: string;
+  /** Button content. */
   children?: React.ReactNode;
 }
 
+const validButtonColors = [...validColors, 'text', 'ghost'] as const;
+
 /**
- * Button component for rendering a Bulma-styled button or anchor.
- *
- * Supports Bulma helper classes for colors, sizes, and various button states and modifiers.
+ * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
  *
  * @function
  * @param {ButtonProps} props - Props for the Button component.
  * @returns {JSX.Element} The rendered button or anchor element.
  * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
  */
-const validButtonColors = [...validColors, 'text', 'ghost'] as const;
 
 export const Button: React.FC<ButtonProps> = ({
   color,

bulma-ui/src/elements/Buttons.tsx

@@ -11,32 +11,29 @@ import {
 
 /**
  * Props for the Buttons component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the buttons group.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {boolean} [isCentered] - Center the group of buttons.
- * @property {boolean} [isRight] - Align the group of buttons to the right.
- * @property {boolean} [hasAddons] - Group buttons together as addons.
- * @property {React.ReactNode} children - The button elements to render inside the group.
  */
 interface ButtonsProps
   extends React.HTMLAttributes<HTMLDivElement>, BulmaClassesProps {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper for the button group. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the button group. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper for the button group. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Center the group of buttons. */
   isCentered?: boolean;
+  /** Align the group of buttons to the right. */
   isRight?: boolean;
+  /** Group buttons together as addons (removes spacing between them). */
   hasAddons?: boolean;
+  /** The button elements to render inside the group. */
   children: React.ReactNode;
 }
 
 /**
- * Buttons component for rendering a group of Bulma-styled buttons.
- *
- * Supports Bulma helper classes for styling, color, and layout, including centering, right alignment, and grouping as addons.
+ * The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
  *
  * @function
  * @param {ButtonsProps} props - Props for the Buttons component.

bulma-ui/src/elements/Code.tsx

@@ -8,28 +8,23 @@ import {
 
 /**
  * Props for the Code component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Code content to be rendered inside the element.
  */
 export interface CodeProps
   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';
+  /** Code content to render inside the element. */
   children?: React.ReactNode;
 }
 
 /**
- * Code component for rendering inline code snippets.
- *
- * A Code wraps the HTML `<code>` element with Bulma helper class integration.
- * Use it for short inline code snippets, variable names, or technical terms.
- * For multi-line code blocks, use the Pre component.
+ * The `Code` component renders a styled `<code>` element with Bulma helper class integration.
  *
  * @function
  * @param {CodeProps} props - Props for the Code component.

bulma-ui/src/elements/Content.tsx

@@ -8,34 +8,30 @@ import {
 
 /**
  * Props for the Content component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the content.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {'small' | 'normal' | 'medium' | 'large'} [size] - Size modifier for the content.
- * @property {React.ReactNode} [children] - Content to be rendered inside the block.
  */
 interface ContentProps
   extends
     React.HTMLAttributes<HTMLDivElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper (e.g., `'danger'` for `has-text-danger`). */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the content. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper (e.g., `'info'` for `has-background-info`). */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Size modifier for the content. */
   size?: 'small' | 'normal' | 'medium' | 'large';
+  /** Content to be rendered inside the block. */
   children?: React.ReactNode;
 }
 
 // Valid size modifiers for the content class
 const validSizes = ['small', 'medium', 'large'] as const;
 
 /**
- * Content component for rendering a styled Bulma content block.
- *
- * Applies typographic styles to HTML content (e.g., paragraphs, headings, lists) with Bulma's content class.
- * Supports size modifiers and Bulma helper classes for additional styling.
+ * The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables.
  *
  * @function
  * @param {ContentProps} props - Props for the Content component.

bulma-ui/src/elements/Delete.tsx

@@ -8,32 +8,29 @@ import {
 
 /**
  * Props for the Delete component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the delete button.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - Click handler for the button.
- * @property {'small' | 'medium' | 'large'} [size] - Size modifier for the delete button.
- * @property {string} [ariaLabel='Close'] - ARIA label for accessibility (default: 'Close').
- * @property {boolean} [disabled=false] - Whether the button is disabled (default: false).
  */
 interface DeleteProps
   extends React.HTMLAttributes<HTMLButtonElement>, BulmaClassesProps {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the button. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Click handler for the button. */
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Size modifier for the delete button. */
   size?: 'small' | 'medium' | 'large';
+  /** ARIA label for accessibility (default: 'Close'). */
   ariaLabel?: string;
+  /** Whether the button is disabled (default: false). */
   disabled?: boolean;
 }
 
 /**
- * Delete component for rendering a Bulma-styled delete/close button.
- *
- * Supports Bulma helper classes for styling, color, and size, and includes accessibility and disabled state.
+ * The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
  *
  * @function
  * @param {DeleteProps} props - Props for the Delete component.

bulma-ui/src/elements/Divider.tsx

@@ -8,23 +8,19 @@ import {
 
 /**
  * Props for the Divider component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
  */
 export interface DividerProps
   extends
     React.HTMLAttributes<HTMLHRElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
 }
 
 /**
- * Divider component for rendering a styled horizontal rule element.
- *
- * A Divider wraps the HTML `<hr>` element with Bulma helper class integration.
- * Use it to visually separate content sections with a horizontal line.
+ * The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
  *
  * @function
  * @param {DividerProps} props - Props for the Divider component.

bulma-ui/src/elements/Emphasis.tsx

@@ -8,28 +8,23 @@ import {
 
 /**
  * Props for the Emphasis component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Content to be rendered inside the em element.
  */
 export interface EmphasisProps
   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 em element. */
   children?: React.ReactNode;
 }
 
 /**
- * Emphasis component for rendering semantically emphasized italic text.
- *
- * An Emphasis wraps the HTML `<em>` element with Bulma helper class integration.
- * Use it for text that has stress emphasis, affecting the meaning of the sentence.
- * For visual-only italic styling without semantic meaning, use CSS font-style: italic.
+ * The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
  *
  * @function
  * @param {EmphasisProps} props - Props for the Emphasis component.