@allxsmith/bestax-bulma 5.50.0 → 5.52.0

package/dist/index.esm.js

@@ -32,6 +32,7 @@ export { Carousel, CarouselItem } from './esm/components/Carousel.js';
 export { Reveal } from './esm/components/Reveal.js';
 export { TreeView, TreeViewItem } from './esm/components/TreeView.js';
 export { ScrollArea } from './esm/components/ScrollArea.js';
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './esm/components/Command.js';
 export { Block } from './esm/elements/Block.js';
 export { Box } from './esm/elements/Box.js';
 export { Button } from './esm/elements/Button.js';
@@ -41,6 +42,7 @@ export { ToggleButton } from './esm/elements/ToggleButton.js';
 export { Code } from './esm/elements/Code.js';
 export { Content } from './esm/elements/Content.js';
 export { Delete } from './esm/elements/Delete.js';
+export { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue } from './esm/elements/DescriptionList.js';
 export { Divider } from './esm/elements/Divider.js';
 export { Emphasis } from './esm/elements/Emphasis.js';
 export { Figure } from './esm/elements/Figure.js';
@@ -73,11 +75,13 @@ export { Title } from './esm/elements/Title.js';
 export { Tr } from './esm/elements/Tr.js';
 export { UnorderedList } from './esm/elements/UnorderedList.js';
 export { Checkbox, checkboxColors, checkboxSizes } from './esm/form/Checkbox.js';
+export { CheckboxCard } from './esm/form/CheckboxCard.js';
 export { Checkboxes } from './esm/form/Checkboxes.js';
 export { Control } from './esm/form/Control.js';
 export { Field, FieldBody, FieldLabel } from './esm/form/Field.js';
 export { File } from './esm/form/File.js';
 export { Radio, radioColors, radioSizes } from './esm/form/Radio.js';
+export { RadioCard } from './esm/form/RadioCard.js';
 export { Radios } from './esm/form/Radios.js';
 export { Switch, switchColors, switchSizes } from './esm/form/Switch.js';
 export { Slider } from './esm/form/Slider.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,318 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { InputProps } from '../form/Input.js';
+/** One action in a Command's `actions`. */
+export interface CommandAction {
+    /** Unique within the Command. It's the item's `value`, so `onSelect` hands it back. */
+    id: string;
+    /** What the item shows, and what typing matches first. */
+    label: string;
+    /**
+     * A line under the label, such as what the action does or where it goes.
+     * Typing matches it too, after the labels. A screen reader hears it after
+     * the label, as the item's description.
+     */
+    description?: string;
+    /**
+     * More words typing matches, after the labels, such as `['theme']` for
+     * "Dark mode". They aren't shown.
+     */
+    keywords?: string[];
+    /**
+     * The heading the action goes under. Groups show in the order the matches
+     * first name them, so the best match is always on top, and the actions with
+     * no group show together where the first of them is.
+     */
+    group?: string;
+    /** Shown before the label, and hidden from assistive tech. */
+    icon?: React.ReactNode;
+    /**
+     * Shown at the end of the row, such as the action's own keyboard shortcut in
+     * a `Kbd.Group`, or a `Tag`. It only shows: nothing listens for a shortcut
+     * written here. A screen reader hears it after the label, with the
+     * description.
+     */
+    hint?: React.ReactNode;
+    /** Shown, and reached with the arrows so a screen reader user finds it, but never run. */
+    disabled?: boolean;
+    /** Runs the action, when it's picked with Enter or a click, before the Command's `onSelect`. */
+    onSelect?: () => void;
+}
+/** What a Command takes whether it's given `actions` or built from parts. */
+interface CommandBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onSelect'>, Omit<BulmaClassesProps, 'color'> {
+    /**
+     * What the Command is for, such as "Commands" or "Settings". It's never
+     * shown: it names the search field and the list for assistive tech, and in
+     * `Command.Dialog` the dialog too. An empty string counts as none.
+     * @defaultValue 'Commands'
+     */
+    label?: string;
+    /**
+     * The search, controlled: the text in the field. Pair it with
+     * `onQueryChange`.
+     */
+    query?: string;
+    /**
+     * The search to start with when uncontrolled.
+     * @defaultValue ''
+     */
+    defaultQuery?: string;
+    /**
+     * Called with the search as the user types it. Built from parts, this is
+     * where the app filters its items.
+     */
+    onQueryChange?: (query: string) => void;
+    /**
+     * Called with the picked item's `value`, an action's `id`, when it's run
+     * with Enter or a click, after the item's own `onSelect`. A disabled item
+     * is never run.
+     */
+    onSelect?: (value: string) => void;
+}
+/** Props for a Command given `actions`. */
+export interface CommandActionsProps extends CommandBaseProps {
+    /**
+     * The actions, for a Command that renders the field, the list, the groups
+     * and the empty message itself. Typing filters them by label, keywords and
+     * description, ignoring case, with label matches first. Leave it out to
+     * build the Command from parts.
+     */
+    actions: CommandAction[];
+    /**
+     * Takes over the filtering, with `actions`: it's handed the search as typed
+     * and every action, and returns the ones to show, in the order to show
+     * them, which is how to plug in fuzzy matching or cut the list short. It's
+     * called with an empty search too.
+     */
+    filter?: (query: string, actions: CommandAction[]) => CommandAction[];
+    /** The field's placeholder, with `actions`. */
+    placeholder?: string;
+    /**
+     * What shows in place of the list, with `actions`, when nothing matches.
+     * It's announced the way `Command.Empty` is. `null` shows nothing.
+     * @defaultValue 'No results'
+     */
+    empty?: React.ReactNode;
+    /** @internal With `actions`, the Command renders its own parts. */
+    children?: never;
+}
+/** Props for a Command built from parts. */
+export interface CommandPartsProps extends CommandBaseProps {
+    /**
+     * The parts, in order: `Command.Input`, then `Command.List` while there are
+     * items and `Command.Empty` while there aren't. Nothing filters them, so
+     * render the items that match the search `onQueryChange` reports. With
+     * `actions` there are none to give: children given with it are ignored,
+     * with a warning in development.
+     */
+    children?: React.ReactNode;
+    /** @internal Built from parts, the app renders the items. */
+    actions?: never;
+    /** @internal Built from parts, the app filters. */
+    filter?: never;
+    /** @internal Built from parts, `Command.Input` takes the placeholder. */
+    placeholder?: never;
+    /** @internal Built from parts, `Command.Empty` is the empty message. */
+    empty?: never;
+}
+/**
+ * Props for the Command component: given `actions`, it renders, filters and
+ * groups them itself, and without them it's built from parts. The helper
+ * props, the other attributes and the `ref` land on the `div.command` around
+ * the field and the list.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `div.command` around the field and the list.
+ */
+export type CommandProps = CommandActionsProps | CommandPartsProps;
+/** What Command.Dialog takes on top of a Command's props. */
+interface CommandDialogOwnProps {
+    /** Controlled open state. When set, opening and closing only report through `onOpenChange`. */
+    open?: boolean;
+    /**
+     * Initial open state when uncontrolled.
+     * @defaultValue false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called with the open state asked for: `true` from the `shortcut`, and
+     * `false` from Escape, a click on the background, or a pick while
+     * `closeOnSelect` is on. Fires in controlled and uncontrolled use.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * A key combination that opens the dialog from anywhere on the page, such
+     * as `"mod+k"`: modifiers and a key joined by `+`, where `mod` is Ctrl or
+     * ⌘ (either one, on every platform), and the others are `ctrl`, `meta`,
+     * `alt` and `shift`. It's ignored while the user is typing in a text field,
+     * a select or editable content, while an IME is composing, while a modal
+     * overlay is open (a `Modal`, a `Dialog`, a `Sidebar` with its overlay or a
+     * full-page `Loading`), and when something else has already used the key.
+     * It only opens the dialog. Off unless given.
+     */
+    shortcut?: string;
+    /**
+     * Closes the dialog once an item has run. Turn it off for an item that
+     * opens another page of the palette, and close it yourself with `open`.
+     * @defaultValue true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Clears the search when the dialog closes: an uncontrolled one itself,
+     * and a controlled one through `onQueryChange('')`.
+     * @defaultValue true
+     */
+    clearOnClose?: boolean;
+    /**
+     * 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;
+}
+/** Props for a Command.Dialog given `actions`. */
+export interface CommandDialogActionsProps extends CommandActionsProps, CommandDialogOwnProps {
+}
+/** Props for a Command.Dialog built from parts. */
+export interface CommandDialogPartsProps extends CommandPartsProps, CommandDialogOwnProps {
+}
+/**
+ * Props for Command.Dialog, the Command in a modal: a Command's props, given
+ * `actions` or built from parts, and the dialog's own. The helper props, the
+ * other attributes and the `ref` land on the `div.command` that is the
+ * dialog.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `div.command` that is the dialog.
+ */
+export type CommandDialogProps = CommandDialogActionsProps | CommandDialogPartsProps;
+/**
+ * Props for Command.Input, the search field. It renders `Input`, so its
+ * icons, `isLoading` and `color` work as they do there. Its text is the
+ * Command's `query`, and it's `autoComplete="off"`, so the browser's own
+ * suggestions don't open over the list: neither is yours to set.
+ */
+export type CommandInputProps = Omit<InputProps, 'label' | 'labelSize' | 'labelProps' | 'horizontal' | 'message' | 'messageColor' | 'fieldClassName' | 'role' | 'autoComplete' | 'value' | 'defaultValue'>;
+/**
+ * Props for Command.List, the list. Its `id` is the one the field's
+ * `aria-controls` names, so it isn't yours to set.
+ */
+export interface CommandListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'id'> {
+    /** `Command.Item`s and `Command.Group`s, in the order they're shown. */
+    children?: React.ReactNode;
+}
+/** Props for Command.Group, items under a heading. */
+export interface CommandGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
+    /**
+     * The heading, which also names the group for assistive tech, unless you
+     * give the group an `aria-label` or `aria-labelledby` of its own.
+     */
+    label: React.ReactNode;
+    /** The group's `Command.Item`s. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for Command.Item, one thing to do in the list. Its `id` follows from
+ * its `value`, since the field's `aria-activedescendant` names it, so it
+ * isn't yours to set.
+ */
+export interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'onSelect' | 'id'> {
+    /** What the Command's `onSelect` hands back. Unique within the Command. */
+    value: string;
+    /**
+     * Can't be run. The arrows still reach it, so a screen reader user finds
+     * it, and it's never `aria-selected`.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /** Runs the item, when it's picked with Enter or a click, before the Command's `onSelect`. */
+    onSelect?: () => void;
+    /** Shown before the label, and hidden from assistive tech. */
+    icon?: React.ReactNode;
+    /**
+     * A line under the label. A screen reader hears it after the label, as the
+     * item's description.
+     */
+    description?: React.ReactNode;
+    /**
+     * Shown at the end of the row, such as a keyboard shortcut in a
+     * `Kbd.Group`, or a `Tag`. It only shows. A screen reader hears it after
+     * the label, with the description.
+     */
+    hint?: React.ReactNode;
+    /** The label, which names the item. */
+    children?: React.ReactNode;
+}
+/** Props for Command.Empty, the message shown in place of the list. */
+export interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The message, such as "No commands match". Its text is announced when
+     * typing brings it on screen and isn't read again while it stays, so a
+     * message that names the search is heard for the first search only.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The search field, with the combobox role and the keys, rendered as an `Input` with a search icon.
+ *
+ * @function
+ * @param {CommandInputProps} props - Props for the Command.Input component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The field in its Control.
+ */
+export declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * The list of items, a `listbox` named by the Command's `label`.
+ *
+ * @function
+ * @param {CommandListProps} props - Props for the Command.List component.
+ * @returns {JSX.Element} The listbox.
+ */
+export declare const CommandList: React.FC<CommandListProps>;
+/**
+ * Items under a heading, a `group` named by it.
+ *
+ * @function
+ * @param {CommandGroupProps} props - Props for the Command.Group component.
+ * @returns {JSX.Element} The group and its heading.
+ */
+export declare const CommandGroup: React.FC<CommandGroupProps>;
+/**
+ * One thing to do in the list, named by its label and described by its description and hint.
+ *
+ * @function
+ * @param {CommandItemProps} props - Props for the Command.Item component.
+ * @returns {JSX.Element} The item.
+ */
+export declare const CommandItem: React.FC<CommandItemProps>;
+/**
+ * The message shown in place of the list when nothing matches, announced when typing brings it on screen.
+ *
+ * @function
+ * @param {CommandEmptyProps} props - Props for the Command.Empty component.
+ * @returns {JSX.Element} The message.
+ */
+export declare const CommandEmpty: React.FC<CommandEmptyProps>;
+/**
+ * The Command in a modal, a command palette, opened by its `shortcut` or by `open`, that closes once an item has run.
+ *
+ * It renders nothing while it's closed. Open, it's a `Modal` with a
+ * background and the Command's box as the `dialog`, named by `label`:
+ * focus goes to the search field, Tab stays inside, Escape and a click on
+ * the background close it, the page behind it doesn't scroll, and focus goes
+ * back to where it was when it closes.
+ *
+ * @function
+ * @param {CommandDialogProps} props - Props for the Command.Dialog component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `div.command` that is the dialog.
+ * @returns {JSX.Element | null} The dialog, or nothing while it's closed.
+ */
+export declare const CommandDialog: React.ForwardRefExoticComponent<CommandDialogProps & React.RefAttributes<HTMLDivElement>>;
+/** Command with Input, List, Group, Item, Empty and Dialog sub-components. */
+export declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>> & {
+    Input: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+    List: React.FC<CommandListProps>;
+    Group: React.FC<CommandGroupProps>;
+    Item: React.FC<CommandItemProps>;
+    Empty: React.FC<CommandEmptyProps>;
+    Dialog: React.ForwardRefExoticComponent<CommandDialogProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default Command;

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const validDescriptionListOrientations: readonly ["vertical", "horizontal"];
+/** Whether each label sits above its value (`vertical`) or beside it (`horizontal`). */
+export type DescriptionListOrientation = (typeof validDescriptionListOrientations)[number];
+/**
+ * Props for the DescriptionList component. The helper props, the other
+ * attributes and the `ref` land on the `<dl>`.
+ *
+ * @extraProp {React.Ref<HTMLDListElement>} [ref] - Ref forwarded to the `<dl>`.
+ * @extraProp {string} [aria-labelledby] - The id of the heading above the list, which names it.
+ */
+export interface DescriptionListProps extends Omit<React.HTMLAttributes<HTMLDListElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** `DescriptionList.Item`s, one for each fact. */
+    children?: React.ReactNode;
+    /**
+     * Whether each label sits above its value or beside it, at every width no
+     * `orientation<Viewport>` prop covers. Those props read the way a
+     * `Column`'s `size<Viewport>` props do: `orientationMobile` applies below
+     * Bulma's tablet breakpoint, each of the others from its own breakpoint
+     * up, and where several apply the widest one wins. With none of them,
+     * labels sit above their values below the tablet breakpoint and beside
+     * them from it up. Beside, the labels share one column as wide as the
+     * longest label, up to `--bulma-description-list-label-max-width`, so the
+     * values line up.
+     */
+    orientation?: DescriptionListOrientation;
+    /**
+     * The orientation below Bulma's tablet breakpoint (769px). Falls back to
+     * `orientation`, then to `vertical`.
+     */
+    orientationMobile?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's tablet breakpoint (769px) up, until a wider
+     * viewport's prop takes over. Falls back to `orientation`, then to
+     * `horizontal`.
+     */
+    orientationTablet?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's desktop breakpoint (1024px) up, until a
+     * wider viewport's prop takes over. Falls back to `orientationTablet`, and
+     * on down.
+     */
+    orientationDesktop?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's widescreen breakpoint (1216px) up, until
+     * `orientationFullhd` takes over. Falls back to `orientationDesktop`, and
+     * on down.
+     */
+    orientationWidescreen?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's fullhd breakpoint (1408px) up. Falls back to
+     * `orientationWidescreen`, and on down.
+     */
+    orientationFullhd?: DescriptionListOrientation;
+    /**
+     * Draws a line between items, which helps the eye from a label to its
+     * value across a wide list, and shows where each item ends to someone
+     * zoomed in.
+     */
+    hasDividers?: boolean;
+    /** Text color helper. It colors the values; the labels keep their own color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Item, one fact. The helper props, the other
+ * attributes and the `ref` land on its `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `<div>`.
+ */
+export interface DescriptionListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The label, such as "Order", as a `DescriptionList.Label` before the
+     * children.
+     */
+    label?: React.ReactNode;
+    /**
+     * The value, such as "#1234", as a `DescriptionList.Value` after the
+     * children. Text, a link, a `Tag`: anything that renders. `undefined`,
+     * `null` and `''` render nothing, so when a value is missing, say so in
+     * words, such as "Not given", rather than leave a label with nothing after
+     * it.
+     */
+    value?: React.ReactNode;
+    /**
+     * `DescriptionList.Label`s and `DescriptionList.Value`s, for what `label`
+     * and `value` don't cover, such as a label with an info tip or several
+     * values. They render between the two, so a `Label` here reads before
+     * `value`, and a `Value` here after `label`.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Label. The helper props, the other attributes and
+ * the `ref` land on its `<dt>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<dt>`.
+ */
+export interface DescriptionListLabelProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The label. A button may sit in it, such as one that opens a `Popover`
+     * about the label, but not a heading, which HTML doesn't allow here.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Value. The helper props, the other attributes and
+ * the `ref` land on its `<dd>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<dd>`.
+ */
+export interface DescriptionListValueProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** The value. Anything goes, a list or a paragraph included. */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * A label, the name of a fact: a `<dt>`, in the weaker text color.
+ *
+ * @function
+ * @param {DescriptionListLabelProps} props - Props for DescriptionList.Label.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dt>`.
+ * @returns {JSX.Element} The rendered label.
+ *
+ * @example
+ * <DescriptionList.Label>Placed on</DescriptionList.Label>
+ */
+export declare const DescriptionListLabel: React.ForwardRefExoticComponent<DescriptionListLabelProps & React.RefAttributes<HTMLElement>>;
+/**
+ * A value, what the label says about the thing: a `<dd>`. An item may have several.
+ *
+ * @function
+ * @param {DescriptionListValueProps} props - Props for DescriptionList.Value.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
+ * @returns {JSX.Element} The rendered value.
+ *
+ * @example
+ * <DescriptionList.Value>14 October 2026</DescriptionList.Value>
+ */
+export declare const DescriptionListValue: React.ForwardRefExoticComponent<DescriptionListValueProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One fact: its label and its value, in a `<div>`, from the `label` and `value` props or from `Label` and `Value` children.
+ *
+ * @function
+ * @param {DescriptionListItemProps} props - Props for DescriptionList.Item.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns {JSX.Element} The rendered item.
+ *
+ * @example
+ * <DescriptionList.Item label="Order" value="#1234" />
+ *
+ * @example
+ * <DescriptionList.Item label="Tags">
+ *   <DescriptionList.Value>Gift</DescriptionList.Value>
+ *   <DescriptionList.Value>Priority</DescriptionList.Value>
+ * </DescriptionList.Item>
+ */
+export declare const DescriptionListItem: React.ForwardRefExoticComponent<DescriptionListItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DescriptionList: React.ForwardRefExoticComponent<DescriptionListProps & React.RefAttributes<HTMLDListElement>> & {
+    Item: React.ForwardRefExoticComponent<DescriptionListItemProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<DescriptionListLabelProps & React.RefAttributes<HTMLElement>>;
+    Value: React.ForwardRefExoticComponent<DescriptionListValueProps & React.RefAttributes<HTMLElement>>;
+};
+export default DescriptionList;

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const checkboxCardColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Props for the CheckboxCard component.
+ *
+ * @helperProps Helper props go on the outer `<label>`, the `.card`, with
+ * `className`. The other attributes go on the `<input>`.
+ * @extraProp {string} [name] - The form field name. Inside `Checkboxes`, the group's `name` when this is unset.
+ * @extraProp {string} [value] - What a form sends for the card when it's checked. Inside a `Checkboxes` group that takes `value`, `defaultValue` or `onChange`, the card is checked while the group's value holds it.
+ */
+export interface CheckboxCardProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color' | 'title'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /**
+     * What the option is, such as "Daily backups". It names the checkbox, so
+     * a screen reader says it with the state. Without it, the card's whole
+     * text names the checkbox, as a label's text does.
+     */
+    title?: React.ReactNode;
+    /**
+     * A line or two about the option, read after the name and the state. It's
+     * the checkbox's description when `title`, `aria-label` or
+     * `aria-labelledby` names it. Without one of those it's part of the name
+     * already, so it isn't read twice.
+     */
+    description?: React.ReactNode;
+    /**
+     * Anything else in the card, after the description, such as a price. A
+     * label holds phrasing content only, so spans, images and links: a link
+     * works and doesn't toggle the card, but a button or another input can't
+     * go inside a label at all. It isn't read when the checkbox takes focus,
+     * so put what a screen reader should hear in `title` and `description`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Shows the checkbox at the start of the card. Without it, the card's
+     * edge alone shows the selection, and it's thicker when checked, so the
+     * selection never rests on color.
+     */
+    hasIndicator?: boolean;
+    /** The color of the checkbox and of a checked card's edge. */
+    color?: (typeof checkboxCardColors)[number];
+    /**
+     * Text color helper, on the card. The title and the children take it, and
+     * the description keeps its own color.
+     */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Whether the card is disabled. A disabled card dims, takes no clicks, and leaves the Tab order. */
+    disabled?: boolean;
+    /**
+     * Shows the mixed state, as in a "Select all" card when some of what it
+     * covers is checked. It's a look and an announcement only: `checked` is
+     * still the value, and a click still toggles `checked`. Set to `true` or
+     * `false`, it's controlled: a browser clears the mixed state on a click,
+     * so the component sets it again from this prop after every click and
+     * every render. Unset isn't `false`. The component leaves the input's own
+     * `indeterminate` property alone, so a ref can set it, and going from set
+     * to unset clears it once and hands it back. It has no HTML attribute, so
+     * server-rendered markup can't carry it, and a mixed card renders unmixed
+     * until hydration.
+     */
+    indeterminate?: boolean;
+    /**
+     * Additional CSS classes, on the outer `<label>`, the card. That's the
+     * element that declares the `--bulma-checkbox-card-*` variables, and
+     * Bulma's `--bulma-card-*` ones, so a class is how to set one: `style` and
+     * the other input attributes go to the `<input>`. Name `.checkbox-card`
+     * beside your class in the selector, so it beats the card's own
+     * declaration whatever order the stylesheets load in. A `color` prop
+     * declares the active color again on `.checkbox-card.is-<color>`, which
+     * ties that selector, so leave `color` unset when a class sets it.
+     */
+    className?: string;
+}
+/**
+ * The `CheckboxCard` component is a checkbox drawn as a card, with a title and a description, that toggles wherever you click it.
+ *
+ * It's a `<label>` around a real checkbox, so it sends its `value` with a
+ * form and Space toggles it. The title names the checkbox and the
+ * description describes it. Alone it's one choice; inside `Checkboxes` it
+ * takes the group's name and selection, as `Checkbox` does.
+ *
+ * @function
+ * @param {CheckboxCardProps} props - Props for the CheckboxCard component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The rendered card.
+ *
+ * @example
+ * <Checkboxes label="Add-ons" name="extras" defaultValue={['backups']}>
+ *   <CheckboxCard value="backups" title="Daily backups" description="Kept for 30 days." />
+ *   <CheckboxCard value="domain" title="Custom domain" description="Bring your own." />
+ * </Checkboxes>
+ */
+export declare const CheckboxCard: React.ForwardRefExoticComponent<CheckboxCardProps & React.RefAttributes<HTMLInputElement>>;
+export default CheckboxCard;

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

@@ -30,6 +30,19 @@ export interface CheckboxesProps extends Omit<BulmaClassesProps, 'color'>, FormF
     onChange?: (values: string[]) => void;
     /** Checkbox elements to render in the group. */
     children?: React.ReactNode;
+    /**
+     * The element the group renders as. With `fieldset` it's a native
+     * `<fieldset>`. Where the group renders a `Field` of its own, that `Field`
+     * is the `<fieldset>` and the `label` is its `<legend>`, in the label
+     * column when `horizontal`, so the legend names the group with no ids to
+     * wire. Your other attributes then go on the `<fieldset>`, while
+     * `className` and the helper props stay on the box that lays out the
+     * checkboxes. Inside an outer `Field` there's no legend: the group element
+     * itself is the `<fieldset>`, named by that `Field`'s label as before.
+     * `div`, the default, renders the group as it always has.
+     * @defaultValue 'div'
+     */
+    as?: 'div' | 'fieldset';
 }
 export declare const Checkboxes: React.FC<CheckboxesProps> & {
     Checkbox: React.ForwardRefExoticComponent<import("./Checkbox.js").CheckboxProps & React.RefAttributes<HTMLInputElement>>;