@allxsmith/bestax-bulma 5.63.0 → 5.65.0

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