@allxsmith/bestax-bulma 5.62.0 → 5.64.0

package/dist/types-cjs/elements/Stat.d.ts

@@ -0,0 +1,242 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/** The colors a Stat's change can take, the union `messageColor` takes. */
+export type StatChangeColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Props for the Stat component. The helper props, the other attributes and
+ * the `ref` land on its root: a `<div>` inside `Stats`, or its own `<dl>` on
+ * its own.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the root, a `<div>` inside `Stats` or a `<dl>` on its own.
+ */
+export interface StatProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * What the figure is ("Revenue"), as a `Stat.Label` before the children.
+     * A Stat needs one, here or as a `Stat.Label` child: it's the figure's
+     * name for assistive tech, and a definition list's values belong to a
+     * term. A Stat with neither a `label` nor a `Stat.Label` child warns in
+     * development.
+     */
+    label?: React.ReactNode;
+    /**
+     * The figure, as a `Stat.Value` after the children. A number is written by
+     * `NumberFormatter` with `format` and `locale`; anything else, such as
+     * "N/A", renders as given, and `0` renders. `undefined`, `null`, a boolean
+     * and `''` leave it empty, and its `<dd>` still renders, one line of the
+     * figure tall, while the Stat has a label, so the label keeps its
+     * definition while the figure is missing. A `Stat.Value` child takes its
+     * place: with one, `value` and its `<dd>` are left out.
+     */
+    value?: React.ReactNode;
+    /**
+     * `Intl.NumberFormat` options for a number `value`, as NumberFormatter's
+     * `format`. A `value` that isn't a number ignores it.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * The locale for `value` and `change`, as NumberFormatter's `locale`.
+     * Unset, it's the `LocaleProvider`'s around it, and with neither, the
+     * runtime's own, so give one, here or through a `LocaleProvider`, on a
+     * page rendered on the server.
+     */
+    locale?: string;
+    /**
+     * The change, as a `Stat.Change` after the value. With the default format
+     * it's a fraction (`0.12` for 12%); with your own `changeFormat`, it's in
+     * that format's terms. It's written with its sign, so the direction is in
+     * the text.
+     */
+    change?: number;
+    /**
+     * `Intl.NumberFormat` options for `change`. Yours replace the default, and
+     * `signDisplay: 'exceptZero'` is added unless you set a `signDisplay`. With
+     * `signDisplay: 'never'`, or `'negative'` on a rise, the text carries no
+     * direction: the arrow is hidden from assistive tech and the tone is color
+     * alone, so keep a sign, or say the direction in `description`.
+     * @defaultValue { style: 'percent', signDisplay: 'exceptZero', maximumFractionDigits: 1 }
+     */
+    changeFormat?: Intl.NumberFormatOptions;
+    /**
+     * The change's color. Unset, it's the sign's: `success` up, `danger` down,
+     * and none at zero. Set it where up is bad news, such as a cost or an
+     * error rate.
+     */
+    changeColor?: StatChangeColor;
+    /** A note under the figure ("since last month"), as a `Stat.Description` last. */
+    description?: React.ReactNode;
+    /**
+     * The figure's size, a step of Bulma's size scale. The label, the change
+     * and the note stay small.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Shows a `Skeleton` in place of `value`, one line of the figure tall,
+     * and sets `aria-busy` on the Stat. The label, the change and the note
+     * render as given. With a `Stat.Value` child, it only sets `aria-busy`:
+     * the child renders as given, so put a `Skeleton` in it yourself.
+     */
+    loading?: boolean;
+    /**
+     * `Stat.Label`, `Stat.Value`, `Stat.Change` and `Stat.Description`, for
+     * anything the props don't cover, such as a unit or an info tip. They
+     * render between `label` and `value`. They're this Stat's own parts, so
+     * not another Stat: that would be a list inside this one's. The Stat finds
+     * a `Stat.Label` or `Stat.Value` among them by type, so one rendered from
+     * inside a component of your own isn't seen.
+     */
+    children?: React.ReactNode;
+    /**
+     * Text color helper. It colors the figure; the label, the change and the
+     * note keep their own colors. Inside `Stats`, a Stat without one takes the
+     * row's.
+     */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for Stat.Label, what the figure is. 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 StatLabelProps 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 figure, 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 Stat.Value, the figure. 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 StatValueProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The figure, written as you give it, so write a number with
+     * `NumberFormatter`.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for Stat.Description, a note under the figure. 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 StatDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** The note, such as "since last month". */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for Stat.Change, a change written with its sign. 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 StatChangeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color' | 'children'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The change, as Stat's `change`. One that rounds to zero in its format,
+     * such as `0.0004` at one decimal place of a percentage, reads as zero, so
+     * it gets no arrow and no color of its own.
+     */
+    value: number;
+    /**
+     * As Stat's `changeFormat`: yours replace the default, and
+     * `signDisplay: 'exceptZero'` is added unless you set a `signDisplay`.
+     * @defaultValue { style: 'percent', signDisplay: 'exceptZero', maximumFractionDigits: 1 }
+     */
+    format?: Intl.NumberFormatOptions;
+    /** As Stat's `locale`. Unset, the Stat's. */
+    locale?: string;
+    /**
+     * As Stat's `changeColor`. Unset, it's the sign's: `success` up, `danger`
+     * down, and none at zero. Set, it applies at zero too.
+     */
+    color?: StatChangeColor;
+}
+/**
+ * What the figure is: a `<dt>`, small and in the weaker text color.
+ *
+ * @function
+ * @param {StatLabelProps} props - Props for Stat.Label.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dt>`.
+ * @returns {JSX.Element} The rendered label.
+ *
+ * @example
+ * <Stat.Label>Revenue</Stat.Label>
+ */
+export declare const StatLabel: React.ForwardRefExoticComponent<StatLabelProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The figure: a `<dd>`, large, in the Stat's color, with digits of one width so a figure that updates doesn't shift.
+ *
+ * @function
+ * @param {StatValueProps} props - Props for Stat.Value.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
+ * @returns {JSX.Element} The rendered figure.
+ *
+ * @example
+ * <Stat.Value>
+ *   <NumberFormatter value={182} format={{ style: 'unit', unit: 'millisecond' }} />
+ * </Stat.Value>
+ */
+export declare const StatValue: React.ForwardRefExoticComponent<StatValueProps & React.RefAttributes<HTMLElement>>;
+/**
+ * A note under the figure: a `<dd>`, small and in the weaker text color.
+ *
+ * @function
+ * @param {StatDescriptionProps} props - Props for Stat.Description.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
+ * @returns {JSX.Element} The rendered note.
+ *
+ * @example
+ * <Stat.Description>since last month</Stat.Description>
+ */
+export declare const StatDescription: React.ForwardRefExoticComponent<StatDescriptionProps & React.RefAttributes<HTMLElement>>;
+/**
+ * A change written with its sign, such as "+12%", after an arrow that repeats the direction: a `<dd>`, green when it's up and red when it's down unless `color` says otherwise.
+ *
+ * The sign is in the text, written by `Intl` for the locale, so a screen
+ * reader hears the direction; the arrow is hidden from assistive tech, and
+ * the color repeats the direction for sighted readers rather than carry it.
+ *
+ * @function
+ * @param {StatChangeProps} props - Props for Stat.Change.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
+ * @returns {JSX.Element} The rendered change.
+ *
+ * @example
+ * <Stat.Change value={-0.08} color="success" />
+ */
+export declare const StatChange: React.ForwardRefExoticComponent<StatChangeProps & React.RefAttributes<HTMLElement>>;
+export declare const Stat: React.ForwardRefExoticComponent<StatProps & React.RefAttributes<HTMLElement>> & {
+    Label: React.ForwardRefExoticComponent<StatLabelProps & React.RefAttributes<HTMLElement>>;
+    Value: React.ForwardRefExoticComponent<StatValueProps & React.RefAttributes<HTMLElement>>;
+    Change: React.ForwardRefExoticComponent<StatChangeProps & React.RefAttributes<HTMLElement>>;
+    Description: React.ForwardRefExoticComponent<StatDescriptionProps & React.RefAttributes<HTMLElement>>;
+};
+export default Stat;

package/dist/types-cjs/elements/Stats.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import type { BulmaMinColValue } from '../grid/Grid.js';
+/**
+ * Props for the Stats component, a row of Stats on Bulma's smart grid. The
+ * helper props, the other attributes and the `ref` land on its `<dl>`.
+ *
+ * @extraProp {React.Ref<HTMLDListElement>} [ref] - Ref forwarded to the `<dl>`.
+ * @extraProp {BulmaGapStep} [gap] - The space between tiles (`is-gap-*`), the helper prop with the values Grid's `gap` takes.
+ * @extraProp {string} [aria-labelledby] - The id of the heading above the row, which names it.
+ */
+export interface StatsProps extends Omit<React.HTMLAttributes<HTMLDListElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** `Stat`s, one per figure, and nothing else: they're the groups of its `<dl>`. */
+    children?: React.ReactNode;
+    /**
+     * The narrowest a tile gets before the row wraps (`is-col-min-*`), as
+     * Grid's `minCol`: 1.5rem a step. Unset, it's Bulma's 9rem.
+     */
+    minCol?: BulmaMinColValue;
+    /**
+     * Text color helper: `has-text-*` on the `<dl>`, as on Buttons. Each Stat
+     * in the row without a `textColor` of its own takes it too, which colors
+     * its figure, since a Stat sets its own color. The labels, the changes and
+     * the notes keep theirs.
+     */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+export declare const Stats: React.ForwardRefExoticComponent<StatsProps & React.RefAttributes<HTMLDListElement>> & {
+    Stat: React.ForwardRefExoticComponent<import("./Stat.js").StatProps & React.RefAttributes<HTMLElement>> & {
+        Label: React.ForwardRefExoticComponent<import("./Stat.js").StatLabelProps & React.RefAttributes<HTMLElement>>;
+        Value: React.ForwardRefExoticComponent<import("./Stat.js").StatValueProps & React.RefAttributes<HTMLElement>>;
+        Change: React.ForwardRefExoticComponent<import("./Stat.js").StatChangeProps & React.RefAttributes<HTMLElement>>;
+        Description: React.ForwardRefExoticComponent<import("./Stat.js").StatDescriptionProps & React.RefAttributes<HTMLElement>>;
+    };
+};
+export default Stats;

package/dist/types-cjs/elements/statContext.d.ts

@@ -0,0 +1,18 @@
+import type { validColors } from '../helpers/useBulmaClasses.js';
+export interface StatScope {
+    /**
+     * Whether this is inside a `Stats` row, where a Stat is a `<div>` in the
+     * row's `<dl>` rather than a `<dl>` of its own. A Stat sets it back to
+     * `false` for its children. Those are meant to be its parts, so a Stat
+     * inside a part sits in a `<dd>`, where a `<dl>` of its own is valid. A
+     * Stat written straight among another's children isn't handled: it renders
+     * a `<dl>` inside the other's list, which HTML doesn't allow, and Stat's
+     * `children` TSDoc says not to.
+     */
+    row: boolean;
+    /** The row's `textColor`, which each Stat in it takes unless it has its own. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** The Stat's `locale`, which a `Stat.Change` in it takes unless it has its own. */
+    locale?: string;
+}
+export declare const StatScopeContext: import("react").Context<StatScope>;

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { FieldProps } from './Field.js';
+import { ControlBaseProps } from './Control.js';
+import { PasswordInputBaseProps } from './PasswordInputBase.js';
+/**
+ * Props for the PasswordInput component: PasswordInputBase's, plus Input's
+ * Field and Control props, except the right icon, whose place the toggle
+ * takes. Inside an existing `Control` it renders no `Control` of its own, so
+ * its Control-level props do nothing there and warn in development; set them
+ * on that `Control` instead. 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`.
+ *
+ * @helperProps Helper props go on the `.password-input-container` `<div>`, with
+ * `className` and `style`, so they move and size the field and its toggle
+ * together. The other attributes go on the `<input>`.
+ * @extraProp {string} [autoComplete="current-password"] - Tells the browser and password managers this is an existing password. Pass `"new-password"` where the user makes one up, on a sign-up or change-password form.
+ * @extraProp {boolean} [spellCheck=false] - Off, so a browser's spellcheck never sees the password once it shows.
+ * @extraProp {string} [autoCorrect="off"] - Off, so a phone's keyboard doesn't change what's typed.
+ * @extraProp {string} [autoCapitalize="none"] - Off, so a phone's keyboard doesn't capitalize the first letter.
+ * @extraProp {string} [value] - The password, controlled. React writes a controlled input's value into its `value` attribute, as it does on any input, so the password sits in the page's markup. Uncontrolled, read with `FormData`, the field never puts what's typed there.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the `<input>`.
+ */
+export interface PasswordInputProps extends PasswordInputBaseProps {
+    /** Field label. Automatically associated with the input via `htmlFor`, using 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;
+    /** Size for the label. */
+    labelSize?: FieldProps['labelSize'];
+    /** Props for the label element when the component renders its own `Field`; dropped inside an outer `Field` (use that `Field`'s `labelProps` instead). An explicit `htmlFor` key, even `undefined`, overrides the automatic association and no id is generated. */
+    labelProps?: FieldProps['labelProps'];
+    /** Horizontal field layout. */
+    horizontal?: boolean;
+    /**
+     * Icon props for the left icon.
+     * Bulma gives control icons `pointer-events: none`, so a clickable node here
+     * never receives a click.
+     */
+    iconLeft?: ControlBaseProps['iconLeft'];
+    /** Shortcut for the left icon's name. */
+    iconLeftName?: string;
+    /** Shortcut for the left icon's size. */
+    iconLeftSize?: ControlBaseProps['iconLeftSize'];
+    /** Force the left icon container. */
+    hasIconsLeft?: boolean;
+    /**
+     * Shows a loading spinner on the `Control` it renders, at the edge the
+     * toggle uses, so the toggle isn't drawn meanwhile, and a shown password is
+     * hidden until it's back. Inside your own
+     * `Control` it renders none, so this draws nothing and warns in
+     * development; set `isLoading` on that `Control`, which hides the toggle
+     * too.
+     */
+    isLoading?: boolean;
+    /** Expand the control. */
+    isExpanded?: boolean;
+    /** Control size. */
+    controlSize?: ControlBaseProps['size'];
+    /** Help/validation message below the input. */
+    message?: React.ReactNode;
+    /** Bulma color for the message. */
+    messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Additional CSS classes for the Field. */
+    fieldClassName?: string;
+    /** Additional CSS classes for the Control. */
+    controlClassName?: string;
+    /** Not offered: the toggle takes the right icon's place. Warns in development if passed. @internal */
+    iconRight?: never;
+    /** Not offered, as `iconRight`. @internal */
+    iconRightName?: never;
+    /** Not offered, as `iconRight`. @internal */
+    iconRightSize?: never;
+    /** Not offered, as `iconRight`. @internal */
+    hasIconsRight?: never;
+}
+/**
+ * The `PasswordInput` component is a password field with a button inside it that shows what was typed.
+ *
+ * By default the button is an eye named "Show password" that reports
+ * whether the password shows with `aria-pressed`; `variant="text"` makes it
+ * the words "Show" and "Hide". The field asks for
+ * `autocomplete="current-password"` and no spellcheck, and hides the
+ * password again when its form submits.
+ *
+ * @function
+ * @param {PasswordInputProps} props - Props for PasswordInput.
+ * @returns {JSX.Element} The composed field element.
+ *
+ * @example
+ * <PasswordInput label="Password" />
+ *
+ * @example
+ * <PasswordInput label="New password" autoComplete="new-password" variant="text" />
+ */
+export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+export default PasswordInput;

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

@@ -0,0 +1,91 @@
+import { InputBaseProps } from './InputBase.js';
+/** How PasswordInput's visibility toggle draws itself. */
+export type PasswordInputVariant = 'icon' | 'text';
+/** The strings PasswordInput's toggle shows and announces, for translating. */
+export interface PasswordInputLabels {
+    /**
+     * The toggle's name. With the `icon` variant it's the name in both states,
+     * and `aria-pressed` says whether the password shows. With `text`, it's the
+     * name while the password is hidden, and it has to contain `show`, the word
+     * on the button.
+     * @defaultValue 'Show password'
+     */
+    showPassword?: string;
+    /**
+     * The `text` variant's name while the password shows. It has to contain
+     * `hide`.
+     * @defaultValue 'Hide password'
+     */
+    hidePassword?: string;
+    /**
+     * The `text` variant's word while the password is hidden.
+     * @defaultValue 'Show'
+     */
+    show?: string;
+    /**
+     * The `text` variant's word while the password shows.
+     * @defaultValue 'Hide'
+     */
+    hide?: string;
+}
+/**
+ * Props for PasswordInputBase, the input and its toggle without a Field or a
+ * Control.
+ *
+ * @helperProps Helper props go on the `.password-input-container` `<div>`, with
+ * `className` and `style`, so they move and size the field and its toggle
+ * together. The other attributes go on the `<input>`.
+ * @extraProp {string} [autoComplete="current-password"] - Tells the browser and password managers this is an existing password. Pass `"new-password"` where the user makes one up, on a sign-up or change-password form.
+ * @extraProp {boolean} [spellCheck=false] - Off, so a browser's spellcheck never sees the password once it shows.
+ * @extraProp {string} [autoCorrect="off"] - Off, so a phone's keyboard doesn't change what's typed.
+ * @extraProp {string} [autoCapitalize="none"] - Off, so a phone's keyboard doesn't capitalize the first letter.
+ * @extraProp {string} [value] - The password, controlled. React writes a controlled input's value into its `value` attribute, as it does on any input, so the password sits in the page's markup. Uncontrolled, read with `FormData`, the field never puts what's typed there.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the `<input>`.
+ */
+export interface PasswordInputBaseProps extends Omit<InputBaseProps, 'type'> {
+    /**
+     * Whether the password shows, when you hold the state. Setting it makes
+     * the visibility controlled: the toggle only calls `onVisibleChange`, and
+     * so does hiding again on its own. Apply that `false` and the field is a
+     * password field by the time the form reads it; keep `visible` true and
+     * the field stays shown.
+     */
+    visible?: boolean;
+    /**
+     * Whether the password shows at first, when the input holds its own state.
+     * @defaultValue false
+     */
+    defaultVisible?: boolean;
+    /**
+     * Called with the new visibility on each toggle, and with `false` when the
+     * form submits or resets, or the page is left, which it also is on the way
+     * into the back-forward cache. React renders those hides at once, a state
+     * update you make here included, so the form reads a password field. One
+     * that fires while React is rendering or committing, which includes your
+     * `useEffect` and `useLayoutEffect` callbacks, such as a `requestSubmit()`
+     * from an effect, can't render there, and lands just after the form is
+     * read: hide the password first, or submit from an event handler.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * How the toggle draws itself: an eye icon with a fixed name and
+     * `aria-pressed`, or the words "Show" and "Hide" with a name that follows
+     * them.
+     * @defaultValue 'icon'
+     */
+    variant?: PasswordInputVariant;
+    /** Translations for the toggle. */
+    labels?: PasswordInputLabels;
+}
+/**
+ * The raw PasswordInput: a password field with a button inside it that shows what was typed, without Field/Control wrapping.
+ *
+ * Use `PasswordInput` for the convenience wrapper.
+ *
+ * @function
+ * @param {PasswordInputBaseProps} props - Props for PasswordInputBase.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The input and its toggle, in a container.
+ */
+export declare const PasswordInputBase: import("react").ForwardRefExoticComponent<PasswordInputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
+export default PasswordInputBase;

package/dist/types-cjs/helpers/checkIcon.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A check mark, 1em square and drawn in `currentColor`, so it takes the text
+ * color around it, the system's in forced colors included. Combobox draws it
+ * beside a chosen item, and CopyButton after a copy. It's decorative: put it
+ * inside something `aria-hidden`.
+ *
+ * @function CheckIcon
+ * @returns The check mark's `<svg>`.
+ */
+export declare function CheckIcon(): import("react").JSX.Element;

package/dist/types-cjs/helpers/isGiven.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. Whether a prop
+ * was given something to render: `undefined`, `null`, a boolean and `''`
+ * weren't, and `0` was, since React renders it.
+ */
+export declare const isGiven: (node: ReactNode) => boolean;

package/dist/types-cjs/helpers/useClipboard.d.ts

@@ -0,0 +1,65 @@
+/** Options for useClipboard. */
+export interface UseClipboardOptions {
+    /**
+     * How long `copied` stays `true` after a copy, in milliseconds. Another
+     * copy restarts it. `0` turns the timer off, as Toast's `0` does, so
+     * `copied` stays `true` until a later copy fails. A missing or `NaN` value
+     * uses the default, a negative one ends it at once, and `Infinity`, or
+     * anything longer than the longest delay `setTimeout` takes (2147483647 ms,
+     * about 24.8 days), is that longest delay.
+     * @defaultValue 2000
+     */
+    duration?: number;
+    /**
+     * Called with `true` after each copy that worked, a repeat included, and
+     * with `false` when `duration` runs out or a later copy fails.
+     */
+    onCopiedChange?: (copied: boolean) => void;
+    /**
+     * Called when neither the Clipboard API nor the copy command could write,
+     * with the Clipboard API's own error when it refused, or an `Error` saying
+     * neither could.
+     */
+    onCopyError?: (error: Error) => void;
+}
+/** What useClipboard returns. */
+export interface UseClipboardResult {
+    /**
+     * Writes `text` to the clipboard, and resolves `true` once it's written or
+     * `false` when it couldn't be. It never rejects. Call it from a click or a
+     * key press, with no `await` before it: browsers only allow a write
+     * shortly after one. A call that a later one overtakes leaves `copied`,
+     * `error` and the callbacks to the later one, and doesn't fall back to the
+     * copy command once the later one has started.
+     */
+    copy: (text: string) => Promise<boolean>;
+    /**
+     * `true` for `duration` after a copy that worked, or, with a `duration` of
+     * `0`, until a later copy fails.
+     */
+    copied: boolean;
+    /** Why the last copy failed, or `null` after one that worked. */
+    error: Error | null;
+}
+/**
+ * Copies text to the clipboard through the Clipboard API, falling back to the copy command where that's missing or refused, and keeps a `copied` flag for `duration` after a copy.
+ *
+ * It announces nothing. A trigger of your own says "Copied" in a
+ * `role="status"` region that's in the page before the click; `CopyButton`
+ * is this hook with the button, the label and the announcement built in.
+ *
+ * A failed copy sets `error`, calls `onCopyError`, and ends `copied` if a
+ * copy before it had set it. When copies overlap, only the latest one's
+ * outcome sets the state and fires the callbacks, whichever finishes first.
+ * Nothing changes and no callback fires once the component using it has
+ * unmounted, though a write already under way still finishes.
+ *
+ * @function useClipboard
+ * @param options - How long `copied` lasts, and the callbacks.
+ * @returns `copy`, which writes, and the `copied` and `error` state.
+ *
+ * @example
+ * const { copy, copied } = useClipboard();
+ * <Button onClick={() => copy(url)}>{copied ? 'Copied' : 'Copy link'}</Button>
+ */
+export declare function useClipboard(options?: UseClipboardOptions): UseClipboardResult;

package/dist/types-cjs/helpers/useScrollSpy.d.ts

@@ -0,0 +1,61 @@
+/** Options for useScrollSpy. */
+export interface UseScrollSpyOptions {
+    /**
+     * **Required.** The ids of the sections to watch, without the `#`, in the
+     * order they come on the page. Each one is looked up each time the hook
+     * checks, so an id with no element on the page is skipped until one
+     * appears, and a section replaced under the same id keeps working.
+     */
+    ids: string[];
+    /**
+     * Pixels from the viewport's top where a section counts as reached. Unset,
+     * it's the page's `scroll-padding-top`, read when the hook mounts and on
+     * resize, so the highlight agrees with where a jump lands under a sticky
+     * header. A `scroll-padding-top` that mixes a percentage with a length in
+     * `calc()` isn't read: pass `offset` then.
+     */
+    offset?: number;
+    /** Called with the new current id when it changes, or `null` above the first section. */
+    onCurrentChange?: (id: string | null) => void;
+}
+/**
+ * The `useScrollSpy` hook returns the id of the section being read: the last
+ * of `ids` whose top is at or above the offset line, or the last one once the
+ * page is scrolled to its end. After a jump to one of them, it's that one
+ * until the reader scrolls on. `null` above the first section, on the server
+ * and until the page hydrates.
+ *
+ * It checks once per frame while the page scrolls, and on resize. A jump is
+ * a plain click on a link to one of the ids (the main button, no modifier
+ * key, opening in this page), noted and never stopped, so the browser jumps
+ * as it always does; and the `#id` a page opened afresh opens at. Back,
+ * Forward and a reload aren't jumps. That `#id` is read once, when `ids`
+ * first has some: a section rendered after that isn't held, even if the
+ * page opened at it, and the reading rule marks where the page is. Once the
+ * page has been still for a
+ * moment, the section stays current only if it's where a jump puts it: its
+ * top at the line, give or take a shift of the layout smaller than its own
+ * height, or, at the end of the page, on screen below the line. Otherwise,
+ * as after a flick right after the click, the reading rule takes over. The
+ * next scroll after that lets it go, the browser's own included, so when
+ * content loading above it makes the browser scroll to keep the reader's
+ * place, the rule takes over too.
+ *
+ * A section that isn't drawn (`display: none`) is never current. A section
+ * that moves while nothing scrolls is seen at the next scroll or resize. It
+ * watches the document only: not a panel that scrolls inside it, and not
+ * sections inside a shadow root, which an `#id` link can't reach either.
+ * Whether a page was opened afresh is read from how the document loaded, so
+ * in an app that changes routes on the client, a route change can briefly
+ * mark the address bar's section until the page settles, when the reading
+ * rule takes over, and after a reload a route change to an `#id` holds
+ * nothing.
+ *
+ * @function
+ * @param {UseScrollSpyOptions} options - The ids to watch, the offset, and a change callback.
+ * @returns {string | null} The current section's id, or `null`.
+ *
+ * @example
+ * const current = useScrollSpy({ ids: ['profile', 'security', 'billing'] });
+ */
+export declare function useScrollSpy({ ids, offset, onCurrentChange, }: UseScrollSpyOptions): string | null;