@allxsmith/bestax-bulma 5.42.1 → 5.43.0

package/dist/index.esm.js

@@ -80,6 +80,7 @@ export { Radios } from './esm/form/Radios.js';
 export { Switch, switchColors, switchSizes } from './esm/form/Switch.js';
 export { Slider } from './esm/form/Slider.js';
 export { NumberInput, Numberinput } from './esm/form/Numberinput.js';
+export { PinInput } from './esm/form/PinInput.js';
 export { Rate } from './esm/form/Rate.js';
 export { Autocomplete } from './esm/form/Autocomplete.js';
 export { Combobox, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxMenu } from './esm/form/Combobox.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/Carousel.d.ts

@@ -9,6 +9,13 @@ export interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement>
      * so with several in view several are active.
      */
     active?: boolean;
+    /**
+     * The slide's content. An image in it is held to the slide's width at its
+     * own height, unless something sizes the image itself: a ratio `Image`
+     * fills its frame, and an `Avatar`'s photo its circle, as they do outside a
+     * carousel.
+     */
+    children?: React.ReactNode;
 }
 /**
  * Individual carousel item/slide.

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

@@ -12,7 +12,7 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, Omit<B
     hasAddons?: boolean | 'centered' | 'right';
     /** Constrains the field to its content's width (used inside horizontal field bodies). */
     narrow?: boolean;
-    /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Combobox`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete`, a `Combobox` or a `Taginput` also names its open list after the label through `aria-labelledby`. `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */
+    /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `PinInput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Combobox`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete`, a `Combobox` or a `Taginput` also names its open list after the label through `aria-labelledby`. `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: 'small' | 'normal' | 'medium' | 'large';

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/**
+ * What a PinInput takes: `'number'` keeps digits only, and `'alphanumeric'`
+ * keeps the letters A to Z, in either case, and digits. A digit from any
+ * script, such as an Arabic-Indic `٣` or a Persian `۳`, is kept as its ASCII
+ * digit, `3`.
+ */
+export type PinInputType = 'number' | 'alphanumeric';
+/**
+ * Props for the PinInput component.
+ * Inside an existing `Control` it renders no `Control` of its own. Inside an
+ * outer `Field`, or a `Control` with no `Field` around it, it renders no
+ * `Field` of its own either. The exception is `label`, `message`, `horizontal`
+ * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,
+ * nested in the `.control`, and warns in development. Wrap the `Control` in a
+ * `Field` instead, and set the `label`, `horizontal` and class name on that
+ * `Field`.
+ * Every other prop goes to the `<input>` that holds the code, except
+ * `className` and the helper props, which go to the row of boxes.
+ * @extraProp {string} [name] - Form field name, on the input, so a form submits the code under it.
+ * @extraProp {string} [autoComplete="one-time-code"] - Lets the browser offer a code it received by text message, and tells a password manager this is a one-time code.
+ * @extraProp {string} [inputMode] - The keyboard a phone shows: `"numeric"` with `type="number"`, `"text"` with `type="alphanumeric"`.
+ * @extraProp {string} [pattern] - Exactly `length` of what `type` takes, `[0-9]{6}` by default, so a form with `required` won't submit a partial code. Any non-empty partial code fails it, `required` or not.
+ * @extraProp {string} [className] - Additional CSS classes for the row of boxes.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input that holds the code.
+ */
+export interface PinInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'maxLength'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
+    /** Field label. Automatically associated with the input that holds the code via `htmlFor`, so a screen reader announces one field under this name. Uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */
+    label?: React.ReactNode;
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
+    /** Applied to the input that holds the code (the labellable control), not the row of boxes. */
+    id?: string;
+    /** How many characters the code has. Each gets a box, and it is the input's `maxLength`. */
+    length?: number;
+    /** The code (controlled). Only its first `length` characters are shown and submitted. */
+    value?: string;
+    /** The code to start with (uncontrolled). Only its first `length` characters are kept. */
+    defaultValue?: string;
+    /**
+     * What the code takes. A digit from any script, such as an Arabic-Indic or
+     * a Persian one, goes in as its ASCII digit, so the code reaches
+     * `onChange`, `onComplete` and the form as `0` to `9`. Anything else typed
+     * or pasted is dropped, and the caret stays where it was. The input stays a
+     * text field either way, so a code keeps its leading zeros.
+     */
+    type?: PinInputType;
+    /**
+     * Shows a dot in each filled box in place of its character, and makes the
+     * input a password field, so a screen reader doesn't read the code out
+     * either.
+     */
+    isMasked?: boolean;
+    /** Bulma color for the boxes, the colors an `Input` takes. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    /** Size of the boxes. */
+    size?: 'small' | 'medium' | 'large';
+    /** Round boxes. */
+    isRounded?: boolean;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    /**
+     * Called with the code each time it changes. A paste replaces the whole
+     * code with what was pasted, kept to what `type` takes and cut to `length`,
+     * and a paste with nothing the code takes changes nothing.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called with the code when a change makes it `length` characters long,
+     * such as typing the last character, a paste or autofill. It fires once for
+     * each change that fills the last box with a new code, and never on a
+     * render. A `value` you set yourself doesn't call it.
+     */
+    onComplete?: (value: string) => void;
+}
+/**
+ * The `PinInput` component is a field for a short code, such as a one-time
+ * code or a PIN, drawn as a row of boxes with one character in each.
+ *
+ * The code lives in one real `<input>` that lies over the boxes, so it is
+ * one field to a screen reader, and paste, autofill from a text message and
+ * password managers work on it as they do on any input. The boxes draw what
+ * it holds, and the box at the caret, or every box in a selection, shows
+ * Bulma's focus look.
+ *
+ * @function
+ * @param {PinInputProps} props - Props for the PinInput component.
+ * @returns {JSX.Element} The rendered code field.
+ *
+ * @example
+ * <PinInput
+ *   label="Verification code"
+ *   value={code}
+ *   onChange={setCode}
+ *   onComplete={verify}
+ * />
+ */
+export declare const PinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<HTMLInputElement>>;
+export default PinInput;

package/dist/types/index.d.ts

@@ -79,6 +79,7 @@ export * from './form/Radios.js';
 export * from './form/Switch.js';
 export * from './form/Slider.js';
 export * from './form/Numberinput.js';
+export * from './form/PinInput.js';
 export * from './form/Rate.js';
 export * from './form/Autocomplete.js';
 export * from './form/Combobox.js';

package/dist/types-cjs/components/Carousel.d.ts

@@ -9,6 +9,13 @@ export interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement>
      * so with several in view several are active.
      */
     active?: boolean;
+    /**
+     * The slide's content. An image in it is held to the slide's width at its
+     * own height, unless something sizes the image itself: a ratio `Image`
+     * fills its frame, and an `Avatar`'s photo its circle, as they do outside a
+     * carousel.
+     */
+    children?: React.ReactNode;
 }
 /**
  * Individual carousel item/slide.

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

@@ -12,7 +12,7 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, Omit<B
     hasAddons?: boolean | 'centered' | 'right';
     /** Constrains the field to its content's width (used inside horizontal field bodies). */
     narrow?: boolean;
-    /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Combobox`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete`, a `Combobox` or a `Taginput` also names its open list after the label through `aria-labelledby`. `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */
+    /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `PinInput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Combobox`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete`, a `Combobox` or a `Taginput` also names its open list after the label through `aria-labelledby`. `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: 'small' | 'normal' | 'medium' | 'large';

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/**
+ * What a PinInput takes: `'number'` keeps digits only, and `'alphanumeric'`
+ * keeps the letters A to Z, in either case, and digits. A digit from any
+ * script, such as an Arabic-Indic `٣` or a Persian `۳`, is kept as its ASCII
+ * digit, `3`.
+ */
+export type PinInputType = 'number' | 'alphanumeric';
+/**
+ * Props for the PinInput component.
+ * Inside an existing `Control` it renders no `Control` of its own. Inside an
+ * outer `Field`, or a `Control` with no `Field` around it, it renders no
+ * `Field` of its own either. The exception is `label`, `message`, `horizontal`
+ * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,
+ * nested in the `.control`, and warns in development. Wrap the `Control` in a
+ * `Field` instead, and set the `label`, `horizontal` and class name on that
+ * `Field`.
+ * Every other prop goes to the `<input>` that holds the code, except
+ * `className` and the helper props, which go to the row of boxes.
+ * @extraProp {string} [name] - Form field name, on the input, so a form submits the code under it.
+ * @extraProp {string} [autoComplete="one-time-code"] - Lets the browser offer a code it received by text message, and tells a password manager this is a one-time code.
+ * @extraProp {string} [inputMode] - The keyboard a phone shows: `"numeric"` with `type="number"`, `"text"` with `type="alphanumeric"`.
+ * @extraProp {string} [pattern] - Exactly `length` of what `type` takes, `[0-9]{6}` by default, so a form with `required` won't submit a partial code. Any non-empty partial code fails it, `required` or not.
+ * @extraProp {string} [className] - Additional CSS classes for the row of boxes.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input that holds the code.
+ */
+export interface PinInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'maxLength'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
+    /** Field label. Automatically associated with the input that holds the code via `htmlFor`, so a screen reader announces one field under this name. Uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */
+    label?: React.ReactNode;
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
+    /** Applied to the input that holds the code (the labellable control), not the row of boxes. */
+    id?: string;
+    /** How many characters the code has. Each gets a box, and it is the input's `maxLength`. */
+    length?: number;
+    /** The code (controlled). Only its first `length` characters are shown and submitted. */
+    value?: string;
+    /** The code to start with (uncontrolled). Only its first `length` characters are kept. */
+    defaultValue?: string;
+    /**
+     * What the code takes. A digit from any script, such as an Arabic-Indic or
+     * a Persian one, goes in as its ASCII digit, so the code reaches
+     * `onChange`, `onComplete` and the form as `0` to `9`. Anything else typed
+     * or pasted is dropped, and the caret stays where it was. The input stays a
+     * text field either way, so a code keeps its leading zeros.
+     */
+    type?: PinInputType;
+    /**
+     * Shows a dot in each filled box in place of its character, and makes the
+     * input a password field, so a screen reader doesn't read the code out
+     * either.
+     */
+    isMasked?: boolean;
+    /** Bulma color for the boxes, the colors an `Input` takes. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    /** Size of the boxes. */
+    size?: 'small' | 'medium' | 'large';
+    /** Round boxes. */
+    isRounded?: boolean;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    /**
+     * Called with the code each time it changes. A paste replaces the whole
+     * code with what was pasted, kept to what `type` takes and cut to `length`,
+     * and a paste with nothing the code takes changes nothing.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called with the code when a change makes it `length` characters long,
+     * such as typing the last character, a paste or autofill. It fires once for
+     * each change that fills the last box with a new code, and never on a
+     * render. A `value` you set yourself doesn't call it.
+     */
+    onComplete?: (value: string) => void;
+}
+/**
+ * The `PinInput` component is a field for a short code, such as a one-time
+ * code or a PIN, drawn as a row of boxes with one character in each.
+ *
+ * The code lives in one real `<input>` that lies over the boxes, so it is
+ * one field to a screen reader, and paste, autofill from a text message and
+ * password managers work on it as they do on any input. The boxes draw what
+ * it holds, and the box at the caret, or every box in a selection, shows
+ * Bulma's focus look.
+ *
+ * @function
+ * @param {PinInputProps} props - Props for the PinInput component.
+ * @returns {JSX.Element} The rendered code field.
+ *
+ * @example
+ * <PinInput
+ *   label="Verification code"
+ *   value={code}
+ *   onChange={setCode}
+ *   onComplete={verify}
+ * />
+ */
+export declare const PinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<HTMLInputElement>>;
+export default PinInput;

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

@@ -79,6 +79,7 @@ export * from './form/Radios.js';
 export * from './form/Switch.js';
 export * from './form/Slider.js';
 export * from './form/Numberinput.js';
+export * from './form/PinInput.js';
 export * from './form/Rate.js';
 export * from './form/Autocomplete.js';
 export * from './form/Combobox.js';