@allxsmith/bestax-bulma 5.63.0 → 5.65.0

package/dist/types/helpers/useSwipe.d.ts

@@ -0,0 +1,66 @@
+import type React from 'react';
+/** Which way a finished swipe went, on screen: where the pointer travelled. */
+export type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+/** Options for `useSwipe`. */
+export interface UseSwipeOptions {
+    /**
+     * Whether a press starts a drag. Off, the handlers leave a press alone,
+     * `preventDefault()` included. A drag already under way still finishes.
+     * @defaultValue true
+     */
+    enabled?: boolean;
+    /**
+     * Follow the vertical axis too, so a swipe up or down is reported. Off,
+     * only the horizontal distance counts and `offsetY` stays `0`.
+     * @defaultValue false
+     */
+    vertical?: boolean;
+    /**
+     * Called when a drag ends more than 50px from where it started along an
+     * axis. With `vertical`, the axis it travelled further along decides.
+     * The direction is physical, so a caller that follows the reading
+     * direction maps it itself.
+     */
+    onSwipe: (direction: SwipeDirection) => void;
+}
+/** The mouse and touch handlers `useSwipe` hands back, to spread on the surface. */
+export interface SwipeHandlers<T extends Element = Element> {
+    /** Starts a drag. Calls `preventDefault()` while enabled, so the press neither selects text nor drags an image. */
+    onMouseDown: (event: React.MouseEvent<T>) => void;
+    /** Follows a drag. */
+    onMouseMove: (event: React.MouseEvent<T>) => void;
+    /** Ends a drag. */
+    onMouseUp: () => void;
+    /** Ends a drag when the pointer leaves the surface, as a release would. */
+    onMouseLeave: () => void;
+    /** Starts a drag with the first finger. */
+    onTouchStart: (event: React.TouchEvent<T>) => void;
+    /** Follows the first finger. */
+    onTouchMove: (event: React.TouchEvent<T>) => void;
+    /** Ends a drag. */
+    onTouchEnd: () => void;
+}
+/** What `useSwipe` returns. */
+export interface UseSwipeResult<T extends Element = Element> {
+    /** Whether a drag is under way. */
+    isSwiping: boolean;
+    /** How far the drag has gone across, in CSS pixels, `0` between drags. */
+    offsetX: number;
+    /** How far the drag has gone down (up is negative), `0` without `vertical`. */
+    offsetY: number;
+    /** The handlers to put on the surface that takes the drag. */
+    handlers: SwipeHandlers<T>;
+    /** Drops the drag under way without reporting a swipe, as when a second finger lands. */
+    cancel: () => void;
+}
+/**
+ * Follows a mouse or touch drag on a surface and reports a swipe when it
+ * ends far enough from where it started. Carousel's drag, shared: it hands
+ * back the handlers to put on the surface and the live offset to draw the
+ * drag with, and leaves what a swipe does to the component.
+ *
+ * @function
+ * @param {UseSwipeOptions} options - Whether it's on, the axes, and the callback.
+ * @returns {UseSwipeResult} The drag's state, its handlers, and a way to drop it.
+ */
+export declare function useSwipe<T extends Element = Element>({ enabled, vertical, onSwipe, }: UseSwipeOptions): UseSwipeResult<T>;

package/dist/types/index.d.ts

@@ -28,12 +28,14 @@ export * from './components/Sidebar.js';
 export * from './components/Toast.js';
 export * from './components/Dialog.js';
 export * from './components/Carousel.js';
+export * from './components/Lightbox.js';
 export * from './components/Reveal.js';
 export * from './components/TreeView.js';
 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 +110,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/Lightbox.d.ts

@@ -0,0 +1,244 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { type PolymorphicRef } from '../helpers/polymorphic.js';
+/** One image a Lightbox shows. */
+export interface LightboxItem {
+    /** The full-size image's URL. */
+    src: string;
+    /**
+     * The image's text alternative, which the status line reads after each
+     * move. In a viewer the image is the content, so `''` is almost never
+     * right; a development build warns once for an item without one.
+     */
+    alt: string;
+    /** Shown under the image as its `<figcaption>`. */
+    caption?: React.ReactNode;
+    /** The `<img>`'s `srcSet`, so the browser picks a size for the screen. Preloading uses it too. */
+    srcSet?: string;
+    /** The `<img>`'s `sizes`, read with `srcSet`. */
+    sizes?: string;
+}
+/**
+ * The words a Lightbox writes. Each is English unless you give your own,
+ * and the numbers in the default progress line are written in the
+ * `LocaleProvider`'s locale.
+ */
+export interface LightboxLabels {
+    /**
+     * The close button's name.
+     * @defaultValue 'Close'
+     */
+    close?: string;
+    /**
+     * The previous button's name.
+     * @defaultValue 'Previous image'
+     */
+    previous?: string;
+    /**
+     * The next button's name.
+     * @defaultValue 'Next image'
+     */
+    next?: string;
+    /**
+     * The zoom-in button's name.
+     * @defaultValue 'Zoom in'
+     */
+    zoomIn?: string;
+    /**
+     * The zoom-out button's name.
+     * @defaultValue 'Zoom out'
+     */
+    zoomOut?: string;
+    /**
+     * The button that fits the image again.
+     * @defaultValue 'Reset zoom'
+     */
+    resetZoom?: string;
+    /**
+     * The `Loader`'s name while an image loads.
+     * @defaultValue 'Loading image'
+     */
+    loading?: string;
+    /**
+     * Shown, above the alt text, when an image fails to load. The status line
+     * for a failed image starts with it, then a space and the line a loaded
+     * image gets, so write it as a whole sentence, punctuated as your language
+     * does.
+     * @defaultValue "This image didn't load."
+     */
+    loadError?: string;
+    /**
+     * The button that tries a failed image again.
+     * @defaultValue 'Retry'
+     */
+    retry?: string;
+    /**
+     * The start of the status line read after each move, which goes on with
+     * a colon and the image's alt: "Image 3 of 10: Harbour at dusk". For a
+     * failed image, `loadError` and a space come first. It gets the image's
+     * place counting from 1, and the number of images.
+     * @defaultValue (current, total) => 'Image ' + current + ' of ' + total
+     */
+    progress?: (current: number, total: number) => string;
+}
+/**
+ * Props for the Lightbox component. Its children render where it stands,
+ * with no wrapper. The helper props, the other attributes and the `ref`
+ * land on the viewer's `.modal` element while it's open.
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the viewer's `.modal` element, `null` while it's closed.
+ */
+export interface LightboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** **Required.** The images, in order. */
+    items: LightboxItem[];
+    /** Rendered in place: usually `Lightbox.Trigger`s, in whatever layout you like. */
+    children?: React.ReactNode;
+    /** Whether the viewer is open (controlled). With no `items` it shows nothing. */
+    open?: boolean;
+    /**
+     * Whether the viewer starts open (uncontrolled).
+     * @defaultValue false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when a trigger, the close button, Escape, a click on the
+     * background or a swipe down opens or closes the viewer, and with `false`
+     * when `items` goes from some to none while it's open.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The index of the image shown (controlled). A value past either end is
+     * shown as the last or the first image, or wrapped round with `repeat`,
+     * without calling `onChange`.
+     */
+    value?: number;
+    /**
+     * The image an uncontrolled viewer shows when something other than a
+     * trigger opens it. A trigger opens at its own `index`.
+     * @defaultValue 0
+     */
+    defaultValue?: number;
+    /**
+     * Called with the new index when an arrow, a key or a swipe changes the
+     * image, and when a trigger opens the viewer, with the trigger's `index`
+     * even when that's the image already shown, before `onOpenChange(true)`.
+     * A parent that opens the viewer from `value` hears the trigger that way.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Go from the last image to the first and back, as Carousel does. Off,
+     * the previous and next buttons are `aria-disabled` at the ends.
+     * @defaultValue true
+     */
+    repeat?: boolean;
+    /**
+     * Zoom with the buttons, the wheel, a double click or tap, pinch and the
+     * `+`, `-` and `0` keys, and pan a zoomed image by dragging or with the
+     * arrow keys. Zoom waits for the image to load. `false` drops the zoom
+     * buttons and all of it.
+     * @defaultValue true
+     */
+    zoomable?: boolean;
+    /**
+     * How far an image zooms, as a multiple of its fitted size. The smallest
+     * zoom is always the fitted size.
+     * @defaultValue 3
+     */
+    maxZoom?: number;
+    /**
+     * Close on Escape. Only the topmost open overlay answers, as with Modal.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Close on a click on the dark background around the image. The space
+     * around the image, beside the toolbar's buttons and under the caption is
+     * all background.
+     * @defaultValue true
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Renders the viewer into a portal: `true` for the `ConfigProvider`'s
+     * `portalContainer` (`document.body` by default), a selector string, or an
+     * element. `false` renders it in place. It's on by default, unlike Modal's,
+     * Dialog's and Command.Dialog's, because its triggers sit in gallery
+     * cells, and a cell with a transform or a filter would trap a viewer
+     * rendered in place.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    /**
+     * The dialog's accessible name. It stays the same from image to image;
+     * the status line says which image is shown.
+     * @defaultValue 'Image viewer'
+     */
+    ariaLabel?: string;
+    /** The words it writes, for another language. */
+    labels?: LightboxLabels;
+}
+/**
+ * The Lightbox.Trigger component's own props, on top of the attributes of
+ * whatever element `as` renders.
+ */
+export interface LightboxTriggerOwnProps extends Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** **Required.** The index in `items` the viewer opens at. */
+    index: number;
+    /**
+     * What the button shows: a thumbnail, or text such as "View all photos".
+     * A ratio `Image` here takes `as="div"`, since its `<figure>` would keep
+     * the image's alt from naming the button.
+     */
+    children?: React.ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Props for Lightbox.Trigger, a `<button type="button"
+ * aria-haspopup="dialog">` that opens the viewer. Its content names it, so
+ * give the thumbnail inside a real `alt`. A ratio `Image` renders a
+ * `<figure>`, and an image inside a figure doesn't name the button around
+ * it, so give that `Image` `as="div"`. A development build warns for a
+ * trigger outside a `Lightbox` or with no name.
+ * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders: the `<button>`, or what `Button` renders.
+ */
+export type LightboxTriggerProps<T extends React.ElementType = 'button'> = LightboxTriggerOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof LightboxTriggerOwnProps | 'as' | ElementColor<T>> & {
+    /**
+     * Renders the trigger through another component, which gets its class,
+     * `aria-haspopup`, `type="button"`, click handler and ref along with
+     * its own props. `as={Button} color="link"` draws it as Bulma's link
+     * button. `color` is taken only with a component: on an element it
+     * would be HTML's old presentational attribute.
+     */
+    as?: T;
+};
+/**
+ * `color`, for an element `as`: a `<button>` or another tag takes no
+ * `color`, as Link and Navbar.Item take none, while a component such as
+ * Button keeps its own.
+ */
+type ElementColor<T extends React.ElementType> = T extends string ? 'color' : never;
+/**
+ * Lightbox.Trigger's call signatures, those of `PolymorphicComponent` over
+ * `LightboxTriggerProps`, so `color` follows `as` as described there.
+ */
+interface LightboxTriggerComponent {
+    <T extends React.ElementType = 'button'>(props: LightboxTriggerProps<T> & {
+        ref?: PolymorphicRef<T>;
+    }): React.ReactElement | null;
+    (props: LightboxTriggerProps & {
+        ref?: PolymorphicRef<'button'>;
+    }): React.ReactElement | null;
+    displayName?: string;
+}
+/**
+ * A button around a thumbnail, or a line of text, that opens the viewer at its `index`.
+ *
+ * @function
+ * @param {LightboxTriggerProps} props - Props for the trigger.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered button.
+ */
+export declare const LightboxTrigger: LightboxTriggerComponent;
+export declare const Lightbox: React.ForwardRefExoticComponent<LightboxProps & React.RefAttributes<HTMLDivElement>> & {
+    Trigger: LightboxTriggerComponent;
+};
+export default Lightbox;

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;

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

@@ -0,0 +1,14 @@
+/**
+ * Chevron pointing left, for a previous button.
+ *
+ * @function
+ * @returns {JSX.Element} The rendered SVG chevron-left icon.
+ */
+export declare const ChevronPrevIcon: () => import("react").JSX.Element;
+/**
+ * Chevron pointing right, for a next button.
+ *
+ * @function
+ * @returns {JSX.Element} The rendered SVG chevron-right icon.
+ */
+export declare const ChevronNextIcon: () => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+/**
+ * Detects the user's `prefers-reduced-motion` preference, for motion that
+ * runs in script, where a stylesheet's media query can't reach it. Always
+ * `false` on the server and on the very first client render, so SSR output
+ * and the initial hydration pass always agree.
+ *
+ * @function
+ * @returns {boolean} Whether the user has requested reduced motion.
+ */
+export declare function usePrefersReducedMotion(): boolean;