@allxsmith/bestax-bulma 5.51.0 → 5.53.0

package/dist/types-cjs/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-cjs/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-cjs/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>>;

package/dist/types-cjs/form/DateInputBase.d.ts

@@ -68,7 +68,15 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
      * format leaves out, such as the time of day.
      */
     parse?: (s: string) => Date | null;
-    /** BCP-47 locale tag for day/month names and Intl formatting. */
+    /**
+     * BCP-47 locale tag for day/month names and Intl formatting. Unset, it is
+     * the `locale` of a `LocaleProvider` around the picker, and with neither,
+     * `Intl` uses the runtime's own locale. On a server render that is the
+     * server's, so an `inline` calendar rendered there names its days in the
+     * server's language and the browser's own render names them in the
+     * browser's: give it a locale, here or through a `LocaleProvider`, where
+     * the two can differ.
+     */
     locale?: string;
     /** Render the calendar inline (no popover). */
     inline?: boolean;
@@ -119,9 +127,23 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
     shouldDisableDate?: (d: Date) => boolean;
     /** Convenience array of disabled dates; merged with `shouldDisableDate`. Matched by calendar day and also rejected during manual typing. */
     unselectableDates?: Date[];
-    /** Day the week starts on (0 = Sunday). */
+    /**
+     * Day the week starts on (0 = Sunday). Unset inside a `LocaleProvider`,
+     * it is the first day of the week in the picker's locale, its own `locale`
+     * or else the provider's, such as Monday for `"de"`. Elsewhere, with no
+     * locale from either, or with seven `dayNames` of your own, it is Sunday:
+     * set it with `dayNames` to start the week on another day.
+     * @defaultValue 0
+     */
     firstDayOfWeek?: DayOfWeek;
-    /** Override the 7 day-name labels (in calendar order, post-rotation). */
+    /**
+     * Override the 7 day-name labels (in calendar order, post-rotation). They
+     * are shown exactly as given, from the first column, so they have to start
+     * on the day the week does. With them, an unset `firstDayOfWeek` stays
+     * Sunday even inside a `LocaleProvider`, so names written Sunday first keep
+     * matching their columns; to start on the locale's day, set
+     * `firstDayOfWeek` too and list the names from that day.
+     */
     dayNames?: string[];
     /** Override the 12 month-name labels. */
     monthNames?: string[];

package/dist/types-cjs/form/DateRangeInputBase.d.ts

@@ -52,7 +52,15 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
      * Enter and leaving an input call it only if the user changed its text.
      */
     parse?: (s: string) => Date | null;
-    /** BCP-47 locale tag for day/month names and Intl formatting. */
+    /**
+     * BCP-47 locale tag for day/month names and Intl formatting. Unset, it is
+     * the `locale` of a `LocaleProvider` around the picker, and with neither,
+     * `Intl` uses the runtime's own locale. On a server render that is the
+     * server's, so an `inline` calendar rendered there names its days in the
+     * server's language and the browser's own render names them in the
+     * browser's: give it a locale, here or through a `LocaleProvider`, where
+     * the two can differ.
+     */
     locale?: string;
     /**
      * Render the calendar inline, with no inputs and no popover. The hidden
@@ -115,9 +123,23 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
      * between, so off, a span too long to walk is refused as well.
      */
     allowDisabledInRange?: boolean;
-    /** Day the week starts on (0 = Sunday). */
+    /**
+     * Day the week starts on (0 = Sunday). Unset inside a `LocaleProvider`,
+     * it is the first day of the week in the picker's locale, its own `locale`
+     * or else the provider's, such as Monday for `"de"`. Elsewhere, with no
+     * locale from either, or with seven `dayNames` of your own, it is Sunday:
+     * set it with `dayNames` to start the week on another day.
+     * @defaultValue 0
+     */
     firstDayOfWeek?: DayOfWeek;
-    /** Override the 7 day-name labels (in calendar order, post-rotation). */
+    /**
+     * Override the 7 day-name labels (in calendar order, post-rotation). They
+     * are shown exactly as given, from the first column, so they have to start
+     * on the day the week does. With them, an unset `firstDayOfWeek` stays
+     * Sunday even inside a `LocaleProvider`, so names written Sunday first keep
+     * matching their columns; to start on the locale's day, set
+     * `firstDayOfWeek` too and list the names from that day.
+     */
     dayNames?: string[];
     /** Override the 12 month-name labels. */
     monthNames?: string[];

package/dist/types-cjs/form/DateTimeInputBase.d.ts

@@ -49,7 +49,15 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
      * keeps what the format leaves out, such as seconds.
      */
     parse?: (s: string) => Date | null;
-    /** BCP-47 locale tag. */
+    /**
+     * BCP-47 locale tag for day/month names and Intl formatting. Unset, it is
+     * the `locale` of a `LocaleProvider` around the picker, and with neither,
+     * `Intl` uses the runtime's own locale. On a server render that is the
+     * server's, so an `inline` calendar rendered there names its days in the
+     * server's language and the browser's own render names them in the
+     * browser's: give it a locale, here or through a `LocaleProvider`, where
+     * the two can differ.
+     */
     locale?: string;
     /** Render the panel inline (no popover). */
     inline?: boolean;
@@ -96,9 +104,23 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
     shouldDisableDate?: (d: Date) => boolean;
     /** Convenience array of disabled dates, matched by calendar day; also rejected by manual typing. */
     unselectableDates?: Date[];
-    /** Day the calendar week starts on. */
+    /**
+     * Day the week starts on (0 = Sunday). Unset inside a `LocaleProvider`,
+     * it is the first day of the week in the picker's locale, its own `locale`
+     * or else the provider's, such as Monday for `"de"`. Elsewhere, with no
+     * locale from either, or with seven `dayNames` of your own, it is Sunday:
+     * set it with `dayNames` to start the week on another day.
+     * @defaultValue 0
+     */
     firstDayOfWeek?: DayOfWeek;
-    /** Override the 7 day-name labels. */
+    /**
+     * Override the 7 day-name labels (in calendar order, post-rotation). They
+     * are shown exactly as given, from the first column, so they have to start
+     * on the day the week does. With them, an unset `firstDayOfWeek` stays
+     * Sunday even inside a `LocaleProvider`, so names written Sunday first keep
+     * matching their columns; to start on the locale's day, set
+     * `firstDayOfWeek` too and list the names from that day.
+     */
     dayNames?: string[];
     /** Override the 12 month-name labels. */
     monthNames?: string[];

package/dist/types-cjs/form/Fieldset.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import type { FormFieldProps } from './fieldProps.js';
+/** The looks a Fieldset comes in. */
+export type FieldsetVariant = 'default' | 'filled' | 'unstyled';
+/**
+ * Props for the Fieldset component. The helper props, the other attributes
+ * and the `ref` land on its `<fieldset>`.
+ *
+ * @extraProp {React.Ref<HTMLFieldSetElement>} [ref] - Ref forwarded to the `<fieldset>`, whose `elements` lists the controls inside.
+ * @extraProp {string} [aria-describedby] - Ids of more text that describes the group. The `message`'s id is added after them.
+ * @extraProp {string} [name] - The fieldset's name in its form's `elements`. Nothing is submitted under it.
+ */
+export interface FieldsetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /**
+     * The group's name, shown in a `<legend>`, which names the fieldset with no
+     * ids to wire. The `default` and `filled` variants draw it on the border,
+     * and `unstyled` above the content. Controls you put in it, such as a
+     * `Checkbox` that turns the section on, stay enabled when the Fieldset is
+     * disabled, as the browser leaves them.
+     */
+    legend?: React.ReactNode;
+    /** Props for the `<legend>`, such as an `id` or a `className`. */
+    legendProps?: React.HTMLAttributes<HTMLLegendElement>;
+    /**
+     * The look: `default` draws a border round the group, `filled` adds a
+     * tinted background, and `unstyled` draws no box at all, which suits a
+     * Fieldset that's there to name or disable a group.
+     */
+    variant?: FieldsetVariant;
+    /**
+     * Disables every control inside. The browser disables the native ones and
+     * leaves them out of the form's data, and each bestax input with a
+     * `disabled` prop takes this as that prop's default, which also stops
+     * widgets the browser doesn't reach, such as `Rate`'s stars and the time
+     * wheels, and gives them their disabled look. An input's own `disabled`
+     * still wins when you set it, though the browser keeps its native parts
+     * disabled whatever it says. Links and `LinkButton`s stay operable, as in
+     * plain HTML.
+     */
+    disabled?: boolean;
+    /**
+     * Help text under the group. It describes the fieldset through
+     * `aria-describedby`, alongside any ids you pass there. Nothing passes it
+     * to the inputs, so each still shows its own errors.
+     */
+    message?: React.ReactNode;
+    /** Bulma color for the message. */
+    messageColor?: FormFieldProps['messageColor'];
+    /** Text color helper, for the text in the group. The legend keeps its own color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** The group's content, such as `Field`s and inputs. */
+    children?: React.ReactNode;
+}
+/**
+ * The `Fieldset` component groups a section of a form in a native
+ * `<fieldset>`, named by its `legend`, which a `disabled` switches off as a
+ * whole.
+ *
+ * It starts its own Field scope: inside it, nothing reads as inside a
+ * `Field` or `Control`, so the convenience inputs render their own `Field`,
+ * and a labeled `Field` around the Fieldset names nothing in it.
+ *
+ * @function
+ * @param {FieldsetProps} props - Props for the Fieldset component.
+ * @returns {JSX.Element} The rendered fieldset.
+ *
+ * @example
+ * <Fieldset legend="Shipping address" message="We only ship within the EU.">
+ *   <Input label="Street" name="street" />
+ *   <Input label="City" name="city" />
+ * </Fieldset>
+ *
+ * @example
+ * // A form that's saving
+ * <Fieldset disabled={saving} variant="unstyled">
+ *   <Input label="Name" name="name" />
+ *   <Rate label="Rating" name="rating" />
+ * </Fieldset>
+ */
+export declare const Fieldset: React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
+export default Fieldset;

package/dist/types-cjs/form/FormContext.d.ts

@@ -14,6 +14,18 @@ export declare const useInsideControl: () => boolean;
 export declare const FieldProvider: React.Provider<boolean>;
 /** Provider for Control context — used internally by Control component. */
 export declare const ControlProvider: React.Provider<boolean>;
+/**
+ * An input's `disabled`: its own prop when the caller set one, otherwise
+ * whether a disabled `Fieldset` holds it. A `<fieldset disabled>` disables the
+ * native controls inside on its own, and this carries the same state to what
+ * the browser doesn't reach, such as Rate's stars, the time wheels, and the
+ * `is-disabled` classes. The content of a Fieldset's legend reads the state
+ * from outside that Fieldset, as the browser leaves the first legend's
+ * controls enabled. Internal; not part of the public API.
+ */
+export declare const useFieldsetDisabled: (disabled: boolean | undefined) => boolean;
+/** Provider for a Fieldset's disabled state, used internally by Fieldset. */
+export declare const FieldsetDisabledProvider: React.Provider<boolean>;
 /** The wrapper props that change what its own `Field` renders. */
 interface FieldShapingProps {
     /** Rendered as the `Field`'s label. */