@allxsmith/bestax-bulma 5.62.0 → 5.64.0

package/dist/index.esm.js

@@ -35,6 +35,7 @@ export { ScrollArea } from './esm/components/ScrollArea.js';
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './esm/components/Command.js';
 export { DataTable } from './esm/components/DataTable.js';
 export { Affix } from './esm/components/Affix.js';
+export { TableOfContents } from './esm/components/TableOfContents.js';
 export { Block } from './esm/elements/Block.js';
 export { Box } from './esm/elements/Box.js';
 export { Button } from './esm/elements/Button.js';
@@ -44,6 +45,7 @@ export { ToggleButton } from './esm/elements/ToggleButton.js';
 export { Code } from './esm/elements/Code.js';
 export { ColorSwatch } from './esm/elements/ColorSwatch.js';
 export { Content } from './esm/elements/Content.js';
+export { CopyButton } from './esm/elements/CopyButton.js';
 export { Delete } from './esm/elements/Delete.js';
 export { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue } from './esm/elements/DescriptionList.js';
 export { Divider } from './esm/elements/Divider.js';
@@ -66,6 +68,8 @@ export { Progress } from './esm/elements/Progress.js';
 export { RingProgress } from './esm/elements/RingProgress.js';
 export { Skeleton } from './esm/elements/Skeleton.js';
 export { Span } from './esm/elements/Span.js';
+export { Stat, StatChange, StatDescription, StatLabel, StatValue } from './esm/elements/Stat.js';
+export { Stats } from './esm/elements/Stats.js';
 export { Strong } from './esm/elements/Strong.js';
 export { SubTitle } from './esm/elements/SubTitle.js';
 export { Table } from './esm/elements/Table.js';
@@ -103,9 +107,11 @@ export { ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerHueSli
 export { InputBase } from './esm/form/InputBase.js';
 export { SelectBase } from './esm/form/SelectBase.js';
 export { TextAreaBase } from './esm/form/TextAreaBase.js';
+export { PasswordInputBase } from './esm/form/PasswordInputBase.js';
 export { Input } from './esm/form/Input.js';
 export { Select } from './esm/form/Select.js';
 export { TextArea } from './esm/form/TextArea.js';
+export { PasswordInput } from './esm/form/PasswordInput.js';
 export { DateInputBase } from './esm/form/DateInputBase.js';
 export { DateInput } from './esm/form/DateInput.js';
 export { TimeInputBase } from './esm/form/TimeInputBase.js';
@@ -130,6 +136,7 @@ export { Portal } from './esm/helpers/portal.js';
 export { LocaleProvider, useLocale } from './esm/helpers/LocaleProvider.js';
 export { useNumberFormat } from './esm/helpers/localeFormat.js';
 export { useFocusTrap } from './esm/helpers/useFocusTrap.js';
+export { useClipboard } from './esm/helpers/useClipboard.js';
 export { AppFrame, AppFrameAside, AppFrameBurger, AppFrameFooter, AppFrameHeader, AppFrameMain, AppFrameNav, useAppFrame } from './esm/layout/AppFrame.js';
 export { Center } from './esm/layout/Center.js';
 export { Container } from './esm/layout/Container.js';
@@ -146,6 +153,7 @@ export { useColorClasses, useColorStyles } from './esm/helpers/useColorClasses.j
 export { useDataTable } from './esm/components/useDataTable.js';
 export { useFlexboxClasses } from './esm/helpers/useFlexboxClasses.js';
 export { useOtherClasses } from './esm/helpers/useOtherClasses.js';
+export { useScrollSpy } from './esm/helpers/useScrollSpy.js';
 export { useSpacingClasses } from './esm/helpers/useSpacingClasses.js';
 export { useTypographyClasses } from './esm/helpers/useTypographyClasses.js';
 export { useVisibilityClasses } from './esm/helpers/useVisibilityClasses.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/TableOfContents.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+export { useScrollSpy } from '../helpers/useScrollSpy.js';
+export type { UseScrollSpyOptions } from '../helpers/useScrollSpy.js';
+/** One entry in a TableOfContents. */
+export interface TableOfContentsItem {
+    /** **Required.** The `id` of the section or heading it links to, without the `#`. Unique on the page. */
+    id: string;
+    /** **Required.** What the link says, usually the heading's own text. */
+    label: React.ReactNode;
+    /** Entries under this one, drawn as a nested list. */
+    children?: TableOfContentsItem[];
+}
+/** The visible strings, in your app's language. */
+export interface TableOfContentsLabels {
+    /**
+     * The list's visible title, which also names its `<nav>`.
+     * @defaultValue 'On this page'
+     */
+    title?: string;
+}
+/**
+ * Props for the TableOfContents component. The helper props, the other
+ * attributes and the `ref` land on the `<nav>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<nav>`.
+ */
+export interface TableOfContentsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color' | 'children'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * **Required.** The sections, in page order, as links to their ids. Each
+     * link is a plain `<a href="#id">`, so following one is the browser's own
+     * jump: put `scroll-padding-top` on the page to land clear of a sticky
+     * header, and smooth scrolling, if you want it, in page CSS inside
+     * `@media (prefers-reduced-motion: no-preference)`.
+     */
+    items: TableOfContentsItem[];
+    /**
+     * Called with the current section's id when it changes, or `null` above
+     * the first section. Never called on the server or before hydration.
+     */
+    onCurrentChange?: (id: string | null) => void;
+    /**
+     * Pixels from the viewport's top where a section counts as reached.
+     * Unset, it's the page's `scroll-padding-top`, so the highlight agrees
+     * with where a jump lands under a sticky header.
+     */
+    offset?: number;
+    /**
+     * Sticks to the top of the viewport as the page scrolls, at
+     * `--bulma-table-of-contents-sticky-top`, and scrolls itself when it's
+     * taller than the viewport. Adds `is-sticky`.
+     */
+    isSticky?: boolean;
+    /** The visible strings, in your app's language. */
+    labels?: TableOfContentsLabels;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * The `TableOfContents` component lists a long page's sections as links in Bulma's menu look, and marks the one being read.
+ *
+ * It's a `<nav>` named by its title, holding `MenuList` and `MenuItem` links
+ * to each `#id`, rendered in full on the server. `useScrollSpy` picks the
+ * current section, and its link alone gets `is-active` and
+ * `aria-current="location"`. Use the hook on its own to mark the section in
+ * view somewhere else, such as an app's nav `Menu`.
+ *
+ * @function
+ * @param {TableOfContentsProps} props - Props for the TableOfContents component.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<nav>`.
+ * @returns {JSX.Element} The rendered table of contents.
+ *
+ * @example
+ * <TableOfContents
+ *   isSticky
+ *   items={[
+ *     { id: 'install', label: 'Install' },
+ *     { id: 'usage', label: 'Usage', children: [{ id: 'props', label: 'Props' }] },
+ *   ]}
+ * />
+ */
+export declare const TableOfContents: React.ForwardRefExoticComponent<TableOfContentsProps & React.RefAttributes<HTMLElement>>;
+export default TableOfContents;

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

@@ -38,5 +38,6 @@ export declare const Buttons: React.FC<ButtonsProps> & {
     LinkButton: import("../index.js").PolymorphicComponent<import("./LinkButton.js").LinkButtonOwnProps, "button", never>;
     ToggleButton: React.ForwardRefExoticComponent<import("./ToggleButton.js").ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
     IconButton: import("../index.js").PolymorphicComponent<import("./IconButton.js").IconButtonOwnProps & import("./IconButton.js").IconButtonName, "button", never>;
+    CopyButton: React.ForwardRefExoticComponent<import("./CopyButton.js").CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
 };
 export {};

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { type ButtonOwnProps } from './Button.js';
+/**
+ * The strings CopyButton shows and announces, each with an English default. A
+ * key left out, or set to an empty string, keeps its default.
+ */
+export interface CopyButtonLabels {
+    /**
+     * The button's label, and so its name, until a copy. With `showLabel` off
+     * it's the name in both states, given as `aria-label`.
+     * @defaultValue 'Copy'
+     */
+    copy?: string;
+    /**
+     * The label shown for `duration` after a copy, and so the name meanwhile.
+     * Not used with `showLabel` off, where only the glyph changes.
+     * @defaultValue 'Copied'
+     */
+    copied?: string;
+    /**
+     * Announced after a copy.
+     * @defaultValue 'Copied to the clipboard'
+     */
+    copiedStatus?: string;
+    /**
+     * Announced when the copy fails.
+     * @defaultValue "Couldn't copy to the clipboard"
+     */
+    failedStatus?: string;
+}
+/**
+ * Props for the CopyButton component. The helper props, the other button
+ * attributes and the `ref` land on the `<button>`.
+ *
+ * @extraProp {'button' | 'submit' | 'reset'} [type=button] - `button` unless you pass `submit` or `reset`.
+ * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Runs before the copy. An `onClick` that calls `preventDefault()` stops the copy, and neither `onCopiedChange` nor `onCopyError` fires.
+ * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the `<button>`.
+ */
+export interface CopyButtonProps extends Omit<ButtonOwnProps, 'children'>, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps | 'value'> {
+    /**
+     * The text it copies. This is not the `<button>`'s form value, which it
+     * doesn't render.
+     */
+    value: string;
+    /**
+     * How long the "Copied" label stays, in milliseconds. Another copy
+     * restarts it. `0` turns the reset off, as Toast's `0` turns off its
+     * auto-close, so "Copied" stays 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 (about 24.8
+     * days), is that longest delay.
+     * @defaultValue 2000
+     */
+    duration?: number;
+    /**
+     * Shows the label beside the icon, which is then the button's name: it
+     * carries no `aria-label`, so the name reads "Copy" and then "Copied" as
+     * the words on it do. Turned off, it's a square icon-only button named by
+     * `labels.copy` through `aria-label` in both states, and only the glyph
+     * changes. An `aria-label` you pass yourself names it in either form.
+     * @defaultValue true
+     */
+    showLabel?: boolean;
+    /** Translations for the label and the announcements. */
+    labels?: CopyButtonLabels;
+    /**
+     * 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 fallback could write. A
+     * copy field can select its text from here, so the reader can copy it
+     * themselves.
+     */
+    onCopyError?: (error: Error) => void;
+}
+/**
+ * The `CopyButton` component renders a button that copies a piece of text to the clipboard, says "Copied" for a moment, and announces the result.
+ *
+ * It's a `Button` with a copy icon and "Copy", and takes everything `Button`
+ * takes. A click writes `value` through the Clipboard API, or through the
+ * older copy command where that's missing or refused, and reports a failure
+ * rather than showing "Copied". Each outcome is announced through a polite
+ * status region portaled out of the button's place, so it stays the last
+ * child of a `Control` or `Buttons`: into the open modal dialog the button is
+ * in, otherwise where `Portal` puts portaled content (the `ConfigProvider`'s
+ * `portalContainer`, or the end of the page). With `showLabel={false}` it's an
+ * `IconButton`. For a trigger of your own, use `useClipboard`, which it's
+ * built on.
+ *
+ * @function
+ * @param {CopyButtonProps} props - Props for the CopyButton component.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered button.
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 4.1.3 Status Messages}
+ *
+ * @example
+ * <CopyButton value="https://bestax.io" />
+ *
+ * @example
+ * <CopyButton value={apiKey} showLabel={false} size="small" />
+ */
+export declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default CopyButton;

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