@allxsmith/bestax-bulma 5.63.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';
@@ -106,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';
@@ -150,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/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/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/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;

package/dist/types/index.d.ts

@@ -34,6 +34,7 @@ export * from './components/ScrollArea.js';
 export * from './components/Command.js';
 export * from './components/DataTable.js';
 export * from './components/Affix.js';
+export * from './components/TableOfContents.js';
 export * from './elements/Block.js';
 export * from './elements/Box.js';
 export * from './elements/Button.js';
@@ -108,12 +109,16 @@ export { SelectBase } from './form/SelectBase.js';
 export type { SelectBaseProps } from './form/SelectBase.js';
 export { TextAreaBase } from './form/TextAreaBase.js';
 export type { TextAreaBaseProps } from './form/TextAreaBase.js';
+export { PasswordInputBase } from './form/PasswordInputBase.js';
+export type { PasswordInputBaseProps, PasswordInputLabels, PasswordInputVariant, } from './form/PasswordInputBase.js';
 export { Input } from './form/Input.js';
 export type { InputProps } from './form/Input.js';
 export { Select } from './form/Select.js';
 export type { SelectProps } from './form/Select.js';
 export { TextArea } from './form/TextArea.js';
 export type { TextAreaProps } from './form/TextArea.js';
+export { PasswordInput } from './form/PasswordInput.js';
+export type { PasswordInputProps } from './form/PasswordInput.js';
 export { DateInputBase } from './form/DateInputBase.js';
 export type { DateInputBaseProps } from './form/DateInputBase.js';
 export { DateInput } from './form/DateInput.js';

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