@allxsmith/bestax-bulma 5.50.0 → 5.52.0

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/RadioCard.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const radioCardColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Props for the RadioCard 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, which the cards of one choice share, so the arrow keys move between them. Inside `Radios`, the group's `name` when this is unset.
+ * @extraProp {string} [value] - What a form sends when this card is the one picked. Inside a `Radios` group that takes `value`, `defaultValue` or `onChange`, the card is checked while the group's value is this.
+ */
+export interface RadioCardProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color' | 'title'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /**
+     * What the option is, such as "Express". It names the radio, so a screen
+     * reader says it with the state and its place in the group. Without it,
+     * the card's whole text names the radio, 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 radio'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 pick the card, but a button or another input can't go
+     * inside a label at all. It isn't read when the radio takes focus, so put
+     * what a screen reader should hear in `title` and `description`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Shows the radio at the start of the card. Without it, the card's edge
+     * alone shows the selection, and it's thicker when picked, so the
+     * selection never rests on color.
+     */
+    hasIndicator?: boolean;
+    /** The color of the radio and of a picked card's edge. */
+    color?: (typeof radioCardColors)[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 the arrow keys skip it. */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes, on the outer `<label>`, the card. That's the
+     * element that declares the `--bulma-radio-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 `.radio-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 `.radio-card.is-<color>`, which ties that
+     * selector, so leave `color` unset when a class sets it.
+     */
+    className?: string;
+}
+/**
+ * The `RadioCard` component is a radio button drawn as a card, with a title and a description, picked wherever you click it.
+ *
+ * It's a `<label>` around a real radio, so it sends its `value` with a form,
+ * and the cards that share a `name` are one choice the arrow keys move
+ * through. The title names the radio and the description describes it.
+ * Inside `Radios` it takes the group's name and selection, as `Radio` does.
+ *
+ * @function
+ * @param {RadioCardProps} props - Props for the RadioCard component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The rendered card.
+ *
+ * @example
+ * <Radios label="Shipping" name="shipping" defaultValue="standard">
+ *   <RadioCard value="standard" title="Standard" description="Arrives in 4 to 6 days." />
+ *   <RadioCard value="express" title="Express" description="Arrives tomorrow." />
+ * </Radios>
+ */
+export declare const RadioCard: React.ForwardRefExoticComponent<RadioCardProps & React.RefAttributes<HTMLInputElement>>;
+export default RadioCard;

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

@@ -30,6 +30,19 @@ export interface RadiosProps extends Omit<BulmaClassesProps, 'color'>, FormField
     onChange?: (value: string) => void;
     /** Radio elements to render in the group. */
     children: React.ReactNode;
+    /**
+     * The element the group renders as. With `fieldset` it's a native
+     * `<fieldset>` that keeps `role="radiogroup"`. 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 radios. 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 Radios: React.FC<RadiosProps> & {
     Radio: React.ForwardRefExoticComponent<import("./Radio.js").RadioProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { FormFieldProps } from './fieldProps.js';
+interface GroupFieldsetProps {
+    /** The group's label, rendered as the `<legend>`. */
+    label: React.ReactNode;
+    /** Sizes the legend's label column when `horizontal`. */
+    labelSize?: FormFieldProps['labelSize'];
+    /** Props for the element that shows the label; any `htmlFor` is dropped. */
+    labelProps?: FormFieldProps['labelProps'];
+    /** Puts the legend in the label column and the rest in the body. */
+    horizontal?: boolean;
+    /** Set on the `<fieldset>` beside its `field` class. */
+    fieldClassName?: string;
+    /** The group's role, when it isn't the fieldset's own `group`. */
+    role?: 'radiogroup';
+    /** The group's own attributes: they describe the group, so they go on the `<fieldset>`. */
+    attributes: object;
+    /** The group's help text, after the content. */
+    message: React.ReactNode;
+    /** The group's content: its `Control` and the box of choices. */
+    children: React.ReactNode;
+}
+/**
+ * The `Field` a `Checkboxes` or `Radios` with `as="fieldset"` renders of its
+ * own, as a native `<fieldset>`: Bulma's field markup, with its label as the
+ * `<legend>` (inside the `field-label` column when horizontal), so the legend
+ * names the group and needs no id. It holds a `Field`'s place for what is
+ * inside, so the choices read as inside a `Field`. Internal; not part of the
+ * public API.
+ */
+export declare const GroupFieldset: React.FC<GroupFieldsetProps>;
+export {};

package/dist/types-cjs/index.d.ts

@@ -31,6 +31,7 @@ export * from './components/Carousel.js';
 export * from './components/Reveal.js';
 export * from './components/TreeView.js';
 export * from './components/ScrollArea.js';
+export * from './components/Command.js';
 export * from './elements/Block.js';
 export * from './elements/Box.js';
 export * from './elements/Button.js';
@@ -40,6 +41,7 @@ export * from './elements/ToggleButton.js';
 export * from './elements/Code.js';
 export * from './elements/Content.js';
 export * from './elements/Delete.js';
+export * from './elements/DescriptionList.js';
 export * from './elements/Divider.js';
 export * from './elements/Emphasis.js';
 export * from './elements/Figure.js';
@@ -72,11 +74,13 @@ export * from './elements/Title.js';
 export * from './elements/Tr.js';
 export * from './elements/UnorderedList.js';
 export * from './form/Checkbox.js';
+export * from './form/CheckboxCard.js';
 export * from './form/Checkboxes.js';
 export * from './form/Control.js';
 export * from './form/Field.js';
 export * from './form/File.js';
 export * from './form/Radio.js';
+export * from './form/RadioCard.js';
 export * from './form/Radios.js';
 export * from './form/Switch.js';
 export * from './form/Slider.js';