@allxsmith/bestax-bulma 5.64.0 → 5.65.0

package/dist/index.esm.js

@@ -29,6 +29,7 @@ export { Sidebar } from './esm/components/Sidebar.js';
 export { Toast, ToastContainer, toast } from './esm/components/Toast.js';
 export { Dialog, DialogContainer, dialog } from './esm/components/Dialog.js';
 export { Carousel, CarouselItem } from './esm/components/Carousel.js';
+export { Lightbox, LightboxTrigger } from './esm/components/Lightbox.js';
 export { Reveal } from './esm/components/Reveal.js';
 export { TreeView, TreeViewItem } from './esm/components/TreeView.js';
 export { ScrollArea } from './esm/components/ScrollArea.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/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/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/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;

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,6 +28,7 @@ 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';

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