@beautinique/frontend-components 1.0.7 → 1.0.9

package/dist/layout/Dropdown.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import { type TInputIcons } from '../inputs/index.js';
+import type { IClassName } from '../types/component.js';
+export interface IDropdownApi {
+    /** Closes the dropdown, e.g. when something in it was chosen. */
+    close: () => void;
+}
+export interface IDropdown extends IClassName {
+    /** What the button says: text, or an element. */
+    title: ReactNode;
+    /** An icon on each side of the title. One with an `onClick` is a button and needs a `label`. */
+    icons?: TInputIcons;
+    /** What is in the dropdown, or a function that gets `{ close }` to close it. */
+    children: ReactNode | ((api: IDropdownApi) => ReactNode);
+    /** Open when it is first shown. @default false */
+    defaultOpen?: boolean;
+    /** A press outside closes it. @default false */
+    closeOnOutsideClick?: boolean;
+    /** Escape closes it (unless a popup over it takes the Escape first). @default false */
+    closeOnEscape?: boolean;
+    /** The content floats over the page under the button instead of pushing it down. @default false */
+    isAbsolute?: boolean;
+    showShadow?: boolean;
+    isRounded?: boolean;
+}
+/**
+ * A button that opens and closes a panel under it (a disclosure): `aria-expanded` says which it is, the
+ * panel opens and closes with a slide, and a closed panel is out of reach of the keyboard and of
+ * assistive technology (`inert`), not only out of sight. The slide stops for a person who asked for
+ * less motion.
+ */
+export declare const Dropdown: ({ title, icons, children, className, defaultOpen, closeOnOutsideClick, closeOnEscape, isAbsolute, showShadow, isRounded, }: IDropdown) => import("react").JSX.Element;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/layout/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/layout/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,WAAW,YAAY;IAC3B,iEAAiE;IACjE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,iDAAiD;IACjD,KAAK,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,gFAAgF;IAChF,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE,YAAY,KAAK,SAAS,CAAC,CAAC;IACzD,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mGAAmG;IACnG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,4HAWtB,SAAS,gCA6DX,CAAC"}

package/dist/layout/LoadingPage.d.cts

@@ -0,0 +1,11 @@
+import type { IClassName } from '../types/component.js';
+export interface ILoadingPage extends IClassName {
+    /** The word under the rings. @default 'Loading' */
+    text?: string;
+}
+/**
+ * A whole page that is loading: the rings in the middle of the window, over what is behind. Put it
+ * where the page goes (a route that is still being loaded).
+ */
+export declare const LoadingPage: ({ text, className }: ILoadingPage) => import("react").JSX.Element;
+//# sourceMappingURL=LoadingPage.d.cts.map

package/dist/layout/LoadingPage.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingPage.d.cts","sourceRoot":"","sources":["../../src/layout/LoadingPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,qBAA0B,YAAY,gCAMjE,CAAC"}

package/dist/layout/LoadingPage.d.ts

@@ -0,0 +1,11 @@
+import type { IClassName } from '../types/component.js';
+export interface ILoadingPage extends IClassName {
+    /** The word under the rings. @default 'Loading' */
+    text?: string;
+}
+/**
+ * A whole page that is loading: the rings in the middle of the window, over what is behind. Put it
+ * where the page goes (a route that is still being loaded).
+ */
+export declare const LoadingPage: ({ text, className }: ILoadingPage) => import("react").JSX.Element;
+//# sourceMappingURL=LoadingPage.d.ts.map

package/dist/layout/LoadingPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingPage.d.ts","sourceRoot":"","sources":["../../src/layout/LoadingPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,qBAA0B,YAAY,gCAMjE,CAAC"}

package/dist/layout/LoadingRings.d.cts

@@ -0,0 +1,12 @@
+import type { IClassName } from '../types/component.js';
+export interface ILoadingRings extends IClassName {
+    /** The word under the rings. @default 'Loading' */
+    text?: string;
+}
+/**
+ * Three rings that turn in space over a word, for a part of a page that is loading. The size follows
+ * the window (`vmin`). The turning is drawn by the `ring-spin` animation of
+ * `@beautinique/frontend-styles`, and stops for a person who asked for less motion.
+ */
+export declare const LoadingRings: ({ className, text }: ILoadingRings) => import("react").JSX.Element;
+//# sourceMappingURL=LoadingRings.d.cts.map

package/dist/layout/LoadingRings.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingRings.d.cts","sourceRoot":"","sources":["../../src/layout/LoadingRings.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AASD;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,qBAAsC,aAAa,gCAwB/E,CAAC"}

package/dist/layout/LoadingRings.d.ts

@@ -0,0 +1,12 @@
+import type { IClassName } from '../types/component.js';
+export interface ILoadingRings extends IClassName {
+    /** The word under the rings. @default 'Loading' */
+    text?: string;
+}
+/**
+ * Three rings that turn in space over a word, for a part of a page that is loading. The size follows
+ * the window (`vmin`). The turning is drawn by the `ring-spin` animation of
+ * `@beautinique/frontend-styles`, and stops for a person who asked for less motion.
+ */
+export declare const LoadingRings: ({ className, text }: ILoadingRings) => import("react").JSX.Element;
+//# sourceMappingURL=LoadingRings.d.ts.map

package/dist/layout/LoadingRings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingRings.d.ts","sourceRoot":"","sources":["../../src/layout/LoadingRings.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AASD;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,qBAAsC,aAAa,gCAwB/E,CAAC"}

package/dist/layout/LoadingText.d.cts

@@ -0,0 +1,13 @@
+import type { IClassName } from '../types/component.js';
+export interface ILoadingText extends IClassName {
+    /** What is written, with a shine that goes over its letters. @default 'Loading' */
+    text?: string;
+}
+/**
+ * The word "Loading" (or another), with a shine that goes over its letters while the app waits. The
+ * shine is drawn by the `loading-text` utility of `@beautinique/frontend-styles` from the `data-text`
+ * attribute, which a screen reader does not read, so the text is also written for it
+ * (`role="status"`).
+ */
+export declare const LoadingText: ({ text, className }: ILoadingText) => import("react").JSX.Element;
+//# sourceMappingURL=LoadingText.d.cts.map

package/dist/layout/LoadingText.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingText.d.cts","sourceRoot":"","sources":["../../src/layout/LoadingText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,qBAAsC,YAAY,gCAc7E,CAAC"}

package/dist/layout/LoadingText.d.ts

@@ -0,0 +1,13 @@
+import type { IClassName } from '../types/component.js';
+export interface ILoadingText extends IClassName {
+    /** What is written, with a shine that goes over its letters. @default 'Loading' */
+    text?: string;
+}
+/**
+ * The word "Loading" (or another), with a shine that goes over its letters while the app waits. The
+ * shine is drawn by the `loading-text` utility of `@beautinique/frontend-styles` from the `data-text`
+ * attribute, which a screen reader does not read, so the text is also written for it
+ * (`role="status"`).
+ */
+export declare const LoadingText: ({ text, className }: ILoadingText) => import("react").JSX.Element;
+//# sourceMappingURL=LoadingText.d.ts.map

package/dist/layout/LoadingText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingText.d.ts","sourceRoot":"","sources":["../../src/layout/LoadingText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,qBAAsC,YAAY,gCAc7E,CAAC"}

package/dist/layout/ModalWrapper.d.cts

@@ -0,0 +1,48 @@
+import { type ComponentProps, type CSSProperties, type ReactNode, type RefObject } from 'react';
+import type { IClassName } from '../types/component.js';
+export interface IModalHeader {
+    /** The title: it is the name of the dialog for assistive technology. */
+    title?: string;
+    /** A button that closes the dialog. */
+    showCloseIcon?: boolean;
+}
+export interface IModalWrapper extends IClassName {
+    isOpen: boolean;
+    /** Called when the dialog asks to be closed: Escape, the close button, a press on the backdrop. */
+    onClose: () => void;
+    children: ReactNode;
+    /** Attributes of the backdrop (the layer behind the dialog), e.g. `className`. */
+    containerProps?: ComponentProps<'div'>;
+    header?: IModalHeader;
+    /** Pressing the backdrop closes the dialog. @default true */
+    closeOnOutsideClick?: boolean;
+    /** The style of the dialog box. */
+    style?: CSSProperties;
+    /**
+     * A name for the dialog when it has no `header.title` ("Sign in"). Give one of the two: a dialog
+     * that has no name is announced as just "dialog".
+     */
+    label?: string;
+    /** The `id` of an element that names the dialog, when it is not the `header.title` or `label`. */
+    labelledBy?: string;
+    /** The `id` of the element that describes the dialog. */
+    describedBy?: string;
+    /** A dialog that interrupts to ask for a decision is an `alertdialog`. @default 'dialog' */
+    role?: 'dialog' | 'alertdialog';
+    /** The element that gets the focus when it opens. @default the first thing Tab stops on */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /** What the close button is called, for assistive technology. @default 'Close' */
+    closeLabel?: string;
+}
+/**
+ * A dialog over the page, drawn in `document.body` over a backdrop.
+ *
+ * It behaves as a dialog has to: it is announced as one (`role="dialog"`, `aria-modal`, named by its
+ * title or `label`), the keyboard stays inside it (Tab goes round), the focus goes into it when it
+ * opens and back to what had it when it closes, the page behind does not scroll, and Escape closes it
+ * (only the one that is on top when there are several). A press on the backdrop closes it too, unless
+ * `closeOnOutsideClick` is false; a press that starts inside the dialog and ends on the backdrop (a
+ * text that is selected by dragging) does not.
+ */
+export declare const ModalWrapper: ({ isOpen, onClose, children, containerProps, className, header, closeOnOutsideClick, style, label, labelledBy, describedBy, role, initialFocus, closeLabel, }: IModalWrapper) => import("react").ReactPortal | null;
+//# sourceMappingURL=ModalWrapper.d.cts.map

package/dist/layout/ModalWrapper.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalWrapper.d.cts","sourceRoot":"","sources":["../../src/layout/ModalWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,aAAa,EAGlB,KAAK,SAAS,EACd,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAKxD,MAAM,WAAW,YAAY;IAC3B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,mGAAmG;IACnG,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,kFAAkF;IAClF,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mCAAmC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,2FAA2F;IAC3F,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GAAI,+JAe1B,aAAa,uCAqGf,CAAC"}

package/dist/layout/ModalWrapper.d.ts

@@ -0,0 +1,48 @@
+import { type ComponentProps, type CSSProperties, type ReactNode, type RefObject } from 'react';
+import type { IClassName } from '../types/component.js';
+export interface IModalHeader {
+    /** The title: it is the name of the dialog for assistive technology. */
+    title?: string;
+    /** A button that closes the dialog. */
+    showCloseIcon?: boolean;
+}
+export interface IModalWrapper extends IClassName {
+    isOpen: boolean;
+    /** Called when the dialog asks to be closed: Escape, the close button, a press on the backdrop. */
+    onClose: () => void;
+    children: ReactNode;
+    /** Attributes of the backdrop (the layer behind the dialog), e.g. `className`. */
+    containerProps?: ComponentProps<'div'>;
+    header?: IModalHeader;
+    /** Pressing the backdrop closes the dialog. @default true */
+    closeOnOutsideClick?: boolean;
+    /** The style of the dialog box. */
+    style?: CSSProperties;
+    /**
+     * A name for the dialog when it has no `header.title` ("Sign in"). Give one of the two: a dialog
+     * that has no name is announced as just "dialog".
+     */
+    label?: string;
+    /** The `id` of an element that names the dialog, when it is not the `header.title` or `label`. */
+    labelledBy?: string;
+    /** The `id` of the element that describes the dialog. */
+    describedBy?: string;
+    /** A dialog that interrupts to ask for a decision is an `alertdialog`. @default 'dialog' */
+    role?: 'dialog' | 'alertdialog';
+    /** The element that gets the focus when it opens. @default the first thing Tab stops on */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /** What the close button is called, for assistive technology. @default 'Close' */
+    closeLabel?: string;
+}
+/**
+ * A dialog over the page, drawn in `document.body` over a backdrop.
+ *
+ * It behaves as a dialog has to: it is announced as one (`role="dialog"`, `aria-modal`, named by its
+ * title or `label`), the keyboard stays inside it (Tab goes round), the focus goes into it when it
+ * opens and back to what had it when it closes, the page behind does not scroll, and Escape closes it
+ * (only the one that is on top when there are several). A press on the backdrop closes it too, unless
+ * `closeOnOutsideClick` is false; a press that starts inside the dialog and ends on the backdrop (a
+ * text that is selected by dragging) does not.
+ */
+export declare const ModalWrapper: ({ isOpen, onClose, children, containerProps, className, header, closeOnOutsideClick, style, label, labelledBy, describedBy, role, initialFocus, closeLabel, }: IModalWrapper) => import("react").ReactPortal | null;
+//# sourceMappingURL=ModalWrapper.d.ts.map

package/dist/layout/ModalWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalWrapper.d.ts","sourceRoot":"","sources":["../../src/layout/ModalWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,aAAa,EAGlB,KAAK,SAAS,EACd,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAKxD,MAAM,WAAW,YAAY;IAC3B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,mGAAmG;IACnG,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,kFAAkF;IAClF,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mCAAmC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,2FAA2F;IAC3F,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GAAI,+JAe1B,aAAa,uCAqGf,CAAC"}

package/dist/layout/NetworkStatusToaster.d.cts

@@ -0,0 +1,39 @@
+/** How the connection is: `'connecting'` is back on the network but nothing has answered yet. */
+export type TNetworkStatus = 'online' | 'offline' | 'connecting';
+/**
+ * The part of the toaster of `@beautinique/frontend-stores` (`createToaster`) that this uses. The
+ * toaster is the app's: it is given in, this package has none.
+ */
+export interface INetworkToaster {
+    success: (data: {
+        title: string;
+        description?: string;
+        closeTimer?: number;
+    }) => string;
+    warning: (data: {
+        title: string;
+        description?: string;
+        autoClose?: boolean;
+        isClosable?: boolean;
+    }) => string;
+    loading: (data: {
+        title: string;
+        description?: string;
+    }) => string;
+    remove: (toastId: string) => void;
+}
+export interface INetworkStatusToaster {
+    /** The state of the connection, e.g. `useOnlineStatus().status` of `@beautinique/frontend-hooks`. */
+    status: TNetworkStatus;
+    toaster: INetworkToaster;
+}
+/** How long "Back online" stays on screen. Offline and connecting stay until the status changes. */
+export declare const BACK_ONLINE_TOAST_MS = 3000;
+/**
+ * Tells the user when the internet goes away and when it comes back, with one toast at a time:
+ * "You're offline" (stays), then "Connecting to internet..." (stays) once the network is back but
+ * nothing has answered yet, then "Back online" (goes away by itself). Nothing is shown while the user
+ * simply is online. It draws nothing itself.
+ */
+export declare const NetworkStatusToaster: ({ status, toaster }: INetworkStatusToaster) => null;
+//# sourceMappingURL=NetworkStatusToaster.d.cts.map

package/dist/layout/NetworkStatusToaster.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkStatusToaster.d.cts","sourceRoot":"","sources":["../../src/layout/NetworkStatusToaster.tsx"],"names":[],"mappings":"AAEA,iGAAiG;AACjG,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACxF,OAAO,EAAE,CAAC,IAAI,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;KACtB,KAAK,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACnE,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,qBAAqB;IACpC,qGAAqG;IACrG,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,eAAe,CAAC;CAC1B;AAED,oGAAoG;AACpG,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,qBAAqB,qBAAqB,SAwD9E,CAAC"}

package/dist/layout/NetworkStatusToaster.d.ts

@@ -0,0 +1,39 @@
+/** How the connection is: `'connecting'` is back on the network but nothing has answered yet. */
+export type TNetworkStatus = 'online' | 'offline' | 'connecting';
+/**
+ * The part of the toaster of `@beautinique/frontend-stores` (`createToaster`) that this uses. The
+ * toaster is the app's: it is given in, this package has none.
+ */
+export interface INetworkToaster {
+    success: (data: {
+        title: string;
+        description?: string;
+        closeTimer?: number;
+    }) => string;
+    warning: (data: {
+        title: string;
+        description?: string;
+        autoClose?: boolean;
+        isClosable?: boolean;
+    }) => string;
+    loading: (data: {
+        title: string;
+        description?: string;
+    }) => string;
+    remove: (toastId: string) => void;
+}
+export interface INetworkStatusToaster {
+    /** The state of the connection, e.g. `useOnlineStatus().status` of `@beautinique/frontend-hooks`. */
+    status: TNetworkStatus;
+    toaster: INetworkToaster;
+}
+/** How long "Back online" stays on screen. Offline and connecting stay until the status changes. */
+export declare const BACK_ONLINE_TOAST_MS = 3000;
+/**
+ * Tells the user when the internet goes away and when it comes back, with one toast at a time:
+ * "You're offline" (stays), then "Connecting to internet..." (stays) once the network is back but
+ * nothing has answered yet, then "Back online" (goes away by itself). Nothing is shown while the user
+ * simply is online. It draws nothing itself.
+ */
+export declare const NetworkStatusToaster: ({ status, toaster }: INetworkStatusToaster) => null;
+//# sourceMappingURL=NetworkStatusToaster.d.ts.map

package/dist/layout/NetworkStatusToaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkStatusToaster.d.ts","sourceRoot":"","sources":["../../src/layout/NetworkStatusToaster.tsx"],"names":[],"mappings":"AAEA,iGAAiG;AACjG,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACxF,OAAO,EAAE,CAAC,IAAI,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;KACtB,KAAK,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACnE,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,qBAAqB;IACpC,qGAAqG;IACrG,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,eAAe,CAAC;CAC1B;AAED,oGAAoG;AACpG,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,qBAAqB,qBAAqB,SAwD9E,CAAC"}

package/dist/layout/ScrollToTop.d.cts

@@ -0,0 +1,36 @@
+export interface IScrollToTop {
+    /**
+     * The current path of the page, from the router (`useLocation().pathname`). The scroll happens
+     * when it changes. The query and the hash are not part of it: a search that only changes `?page=2`
+     * does not throw people back to the top.
+     */
+    pathname: string;
+    /**
+     * The `id` of the element that scrolls: the one that holds the page. Nothing happens when the page
+     * has no element with this id.
+     * @default 'main'
+     */
+    id?: string;
+    /**
+     * `'smooth'` is turned into `'auto'` for a person who asked their system for less motion.
+     * @default 'auto'
+     */
+    behavior?: ScrollBehavior;
+    /** @default 'start' */
+    block?: ScrollLogicalPosition;
+    /** @default 'nearest' */
+    inline?: ScrollLogicalPosition;
+    /**
+     * Leaves the page where it is when the component first shows, and scrolls only on the changes of
+     * `pathname` after that. Needed when the browser puts the page back where it was on a reload.
+     * @default false
+     */
+    skipInitial?: boolean;
+}
+/**
+ * Scrolls an element of the page (`#main` unless told another) to the top each time the path
+ * changes, as a router does not do it for a single page app. It draws nothing; put it once, inside
+ * the layout that has the element.
+ */
+export declare const ScrollToTop: ({ pathname, id, behavior, block, inline, skipInitial, }: IScrollToTop) => null;
+//# sourceMappingURL=ScrollToTop.d.cts.map

package/dist/layout/ScrollToTop.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToTop.d.cts","sourceRoot":"","sources":["../../src/layout/ScrollToTop.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,uBAAuB;IACvB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,yBAAyB;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,yDAOzB,YAAY,SAsBd,CAAC"}

package/dist/layout/ScrollToTop.d.ts

@@ -0,0 +1,36 @@
+export interface IScrollToTop {
+    /**
+     * The current path of the page, from the router (`useLocation().pathname`). The scroll happens
+     * when it changes. The query and the hash are not part of it: a search that only changes `?page=2`
+     * does not throw people back to the top.
+     */
+    pathname: string;
+    /**
+     * The `id` of the element that scrolls: the one that holds the page. Nothing happens when the page
+     * has no element with this id.
+     * @default 'main'
+     */
+    id?: string;
+    /**
+     * `'smooth'` is turned into `'auto'` for a person who asked their system for less motion.
+     * @default 'auto'
+     */
+    behavior?: ScrollBehavior;
+    /** @default 'start' */
+    block?: ScrollLogicalPosition;
+    /** @default 'nearest' */
+    inline?: ScrollLogicalPosition;
+    /**
+     * Leaves the page where it is when the component first shows, and scrolls only on the changes of
+     * `pathname` after that. Needed when the browser puts the page back where it was on a reload.
+     * @default false
+     */
+    skipInitial?: boolean;
+}
+/**
+ * Scrolls an element of the page (`#main` unless told another) to the top each time the path
+ * changes, as a router does not do it for a single page app. It draws nothing; put it once, inside
+ * the layout that has the element.
+ */
+export declare const ScrollToTop: ({ pathname, id, behavior, block, inline, skipInitial, }: IScrollToTop) => null;
+//# sourceMappingURL=ScrollToTop.d.ts.map

package/dist/layout/ScrollToTop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToTop.d.ts","sourceRoot":"","sources":["../../src/layout/ScrollToTop.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,uBAAuB;IACvB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,yBAAyB;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,yDAOzB,YAAY,SAsBd,CAAC"}

package/dist/layout/ScrollableGradientContainer.d.cts

@@ -0,0 +1,28 @@
+import { type ReactNode, type Ref } from 'react';
+import { type TGradientPosition } from '../linear-gradient/index.js';
+import { type TScrollDirection } from '../lib/useScrollable.js';
+import type { IClassName, IContainerClassName } from '../types/component.js';
+export interface IScrollableGradientContainer extends IClassName, IContainerClassName {
+    /** The way the content scrolls: a row (`'horizontal'`) or a column (`'vertical'`). */
+    direction: TScrollDirection;
+    /** Classes for the fade on each edge, e.g. `{ top: 'h-8!' }`. */
+    gradientClassNames?: Partial<Record<TGradientPosition, string>>;
+    /**
+     * Names the area that scrolls for assistive technology (`role="region"`). Give it when what scrolls
+     * is a part of the page of its own (a list of thumbnails, a long form) and not the page.
+     */
+    label?: string;
+    /** The element that scrolls, e.g. to move it to an item (`scrollLeft`, `scrollTop`). */
+    scrollerRef?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+/**
+ * Content that scrolls inside a box, with a fade on the edge that has more behind it. The fade
+ * shows only once there is something to scroll to, and goes when the end is reached. The content is
+ * centred while it fits, and starts at the beginning once it scrolls.
+ *
+ * A box that scrolls can be reached with the keyboard (it is a tab stop while it scrolls) so that
+ * people who do not use a mouse can scroll it with the arrow keys.
+ */
+export declare const ScrollableGradientContainer: ({ direction, gradientClassNames, className, containerClassName, label, scrollerRef, children, }: IScrollableGradientContainer) => import("react").JSX.Element;
+//# sourceMappingURL=ScrollableGradientContainer.d.cts.map

package/dist/layout/ScrollableGradientContainer.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableGradientContainer.d.cts","sourceRoot":"","sources":["../../src/layout/ScrollableGradientContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAW,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAkB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAErF,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,yBAAyB,CAAC;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE7E,MAAM,WAAW,4BAA6B,SAAQ,UAAU,EAAE,mBAAmB;IACnF,sFAAsF;IACtF,SAAS,EAAE,gBAAgB,CAAC;IAC5B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;IAChE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,WAAW,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAKD;;;;;;;GAOG;AACH,eAAO,MAAM,2BAA2B,GAAI,iGAQzC,4BAA4B,gCAkC9B,CAAC"}

package/dist/layout/ScrollableGradientContainer.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode, type Ref } from 'react';
+import { type TGradientPosition } from '../linear-gradient/index.js';
+import { type TScrollDirection } from '../lib/useScrollable.js';
+import type { IClassName, IContainerClassName } from '../types/component.js';
+export interface IScrollableGradientContainer extends IClassName, IContainerClassName {
+    /** The way the content scrolls: a row (`'horizontal'`) or a column (`'vertical'`). */
+    direction: TScrollDirection;
+    /** Classes for the fade on each edge, e.g. `{ top: 'h-8!' }`. */
+    gradientClassNames?: Partial<Record<TGradientPosition, string>>;
+    /**
+     * Names the area that scrolls for assistive technology (`role="region"`). Give it when what scrolls
+     * is a part of the page of its own (a list of thumbnails, a long form) and not the page.
+     */
+    label?: string;
+    /** The element that scrolls, e.g. to move it to an item (`scrollLeft`, `scrollTop`). */
+    scrollerRef?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+/**
+ * Content that scrolls inside a box, with a fade on the edge that has more behind it. The fade
+ * shows only once there is something to scroll to, and goes when the end is reached. The content is
+ * centred while it fits, and starts at the beginning once it scrolls.
+ *
+ * A box that scrolls can be reached with the keyboard (it is a tab stop while it scrolls) so that
+ * people who do not use a mouse can scroll it with the arrow keys.
+ */
+export declare const ScrollableGradientContainer: ({ direction, gradientClassNames, className, containerClassName, label, scrollerRef, children, }: IScrollableGradientContainer) => import("react").JSX.Element;
+//# sourceMappingURL=ScrollableGradientContainer.d.ts.map

package/dist/layout/ScrollableGradientContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableGradientContainer.d.ts","sourceRoot":"","sources":["../../src/layout/ScrollableGradientContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAW,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAkB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAErF,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,yBAAyB,CAAC;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE7E,MAAM,WAAW,4BAA6B,SAAQ,UAAU,EAAE,mBAAmB;IACnF,sFAAsF;IACtF,SAAS,EAAE,gBAAgB,CAAC;IAC5B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;IAChE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,WAAW,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAKD;;;;;;;GAOG;AACH,eAAO,MAAM,2BAA2B,GAAI,iGAQzC,4BAA4B,gCAkC9B,CAAC"}

package/dist/layout/Skeleton.d.cts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+/**
+ * A grey block that pulses where something is still loading. It is only a picture of the shape, so
+ * it is hidden from assistive technology: say that the area is loading where it is (`aria-busy` on
+ * the area, a `role="status"` text) and not on every block. The pulse stops for a person who asked
+ * for less motion.
+ */
+export declare const Skeleton: ({ className, ...divProps }: ComponentProps<"div">) => import("react").JSX.Element;
+//# sourceMappingURL=Skeleton.d.cts.map

package/dist/layout/Skeleton.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.cts","sourceRoot":"","sources":["../../src/layout/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,4BAAiC,cAAc,CAAC,KAAK,CAAC,gCAM9E,CAAC"}

package/dist/layout/Skeleton.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+/**
+ * A grey block that pulses where something is still loading. It is only a picture of the shape, so
+ * it is hidden from assistive technology: say that the area is loading where it is (`aria-busy` on
+ * the area, a `role="status"` text) and not on every block. The pulse stops for a person who asked
+ * for less motion.
+ */
+export declare const Skeleton: ({ className, ...divProps }: ComponentProps<"div">) => import("react").JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/layout/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/layout/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,4BAAiC,cAAc,CAAC,KAAK,CAAC,gCAM9E,CAAC"}

package/dist/layout/Table.d.cts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+export declare const Table: ({ className, ...props }: ComponentProps<"table">) => import("react").JSX.Element;
+export declare const TableHead: ({ className, ...props }: ComponentProps<"thead">) => import("react").JSX.Element;
+export declare const TableBody: (props: ComponentProps<"tbody">) => import("react").JSX.Element;
+export declare const TableRow: ({ className, ...props }: ComponentProps<"tr">) => import("react").JSX.Element;
+/** A header cell. It is the header of its column unless told otherwise (`scope="row"`). */
+export declare const TableHeadCell: ({ className, scope, ...props }: ComponentProps<"th">) => import("react").JSX.Element;
+export declare const TableRowCell: ({ className, ...props }: ComponentProps<"td">) => import("react").JSX.Element;
+//# sourceMappingURL=Table.d.cts.map

package/dist/layout/Table.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.cts","sourceRoot":"","sources":["../../src/layout/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,eAAO,MAAM,KAAK,GAAI,yBAA8B,cAAc,CAAC,OAAO,CAAC,gCAE1E,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,yBAA8B,cAAc,CAAC,OAAO,CAAC,gCAE9E,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,CAAC,OAAO,CAAC,gCAAyB,CAAC;AAElF,eAAO,MAAM,QAAQ,GAAI,yBAA8B,cAAc,CAAC,IAAI,CAAC,gCAE1E,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,aAAa,GAAI,gCAI3B,cAAc,CAAC,IAAI,CAAC,gCAMtB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,yBAA8B,cAAc,CAAC,IAAI,CAAC,gCAK9E,CAAC"}

package/dist/layout/Table.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+export declare const Table: ({ className, ...props }: ComponentProps<"table">) => import("react").JSX.Element;
+export declare const TableHead: ({ className, ...props }: ComponentProps<"thead">) => import("react").JSX.Element;
+export declare const TableBody: (props: ComponentProps<"tbody">) => import("react").JSX.Element;
+export declare const TableRow: ({ className, ...props }: ComponentProps<"tr">) => import("react").JSX.Element;
+/** A header cell. It is the header of its column unless told otherwise (`scope="row"`). */
+export declare const TableHeadCell: ({ className, scope, ...props }: ComponentProps<"th">) => import("react").JSX.Element;
+export declare const TableRowCell: ({ className, ...props }: ComponentProps<"td">) => import("react").JSX.Element;
+//# sourceMappingURL=Table.d.ts.map

package/dist/layout/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/layout/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,eAAO,MAAM,KAAK,GAAI,yBAA8B,cAAc,CAAC,OAAO,CAAC,gCAE1E,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,yBAA8B,cAAc,CAAC,OAAO,CAAC,gCAE9E,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,CAAC,OAAO,CAAC,gCAAyB,CAAC;AAElF,eAAO,MAAM,QAAQ,GAAI,yBAA8B,cAAc,CAAC,IAAI,CAAC,gCAE1E,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,aAAa,GAAI,gCAI3B,cAAc,CAAC,IAAI,CAAC,gCAMtB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,yBAA8B,cAAc,CAAC,IAAI,CAAC,gCAK9E,CAAC"}