@allxsmith/bestax-bulma 5.63.0 → 5.64.0

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/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-cjs/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';