@adgytec/adgytec-web-ui-components 2.3.0 → 2.3.1

package/dist/components/Popover/Popover.d.ts

@@ -1,2 +1,35 @@
 import { Popover as AriaPopover } from 'react-aria-components';
-export declare const Popover: React.FC<React.ComponentPropsWithRef<typeof AriaPopover>>;
+/**
+ * Props for the [`Popover`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Popover/Popover.tsx) component.
+ *
+ * Extends all properties from React Aria's `Popover`, including positioning (`placement`, `offset`, `crossOffset`),
+ * portal containers, and entry/exit transition states.
+ */
+export interface PopoverProps extends React.ComponentPropsWithRef<typeof AriaPopover> {
+}
+/**
+ * Overlay surface container that presents content anchored to a trigger element.
+ *
+ * Built on React Aria's `Popover` with Material Design 3 surface colors, shadow elevation,
+ * and built-in entry/exit animations responsive to placement directions.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     Popover,
+ *     Button,
+ *     DialogTrigger,
+ *     Dialog,
+ * } from "@adgytec/web-ui-components";
+ *
+ * <DialogTrigger>
+ *     <Button label="Open Popover" />
+ *     <Popover>
+ *         <Dialog>
+ *             <p>This is the content inside the popover.</p>
+ *         </Dialog>
+ *     </Popover>
+ * </DialogTrigger>
+ * ```
+ */
+export declare const Popover: React.FC<PopoverProps>;

package/dist/components/Sheets/BottomSheet/BottomSheet.d.ts

@@ -1,2 +1,40 @@
-import { Dialog } from 'react-aria-components';
-export declare const BottomSheet: React.FC<React.ComponentPropsWithRef<typeof Dialog>>;
+import { BottomSheetProps } from './types';
+/**
+ * Content container for bottom sheets, conforming to
+ * [Material 3 Bottom Sheets](https://m3.material.io/components/bottom-sheets/overview).
+ *
+ * Renders inside a React Aria `Dialog` within `DialogContext` (value: `true`), anchoring
+ * content to the bottom of the viewport with responsive maximum width and height.
+ * Consumes {@link BottomSheetContext} to apply `data-layout` for standard or detached layouts.
+ *
+ * Configurable CSS tokens:
+ * - `--md-bottom-sheet-background`: Background color of the bottom sheet (`var(--md-sys-color-surface-container-low)`).
+ * - `--md-bottom-sheet-color`: Text color of the bottom sheet (`var(--md-sys-color-on-surface)`).
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     BottomSheet,
+ *     BottomSheetModal,
+ *     Button,
+ *     ModalOverlay,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Bottom Sheet" />
+ *             <ModalOverlay>
+ *                 <BottomSheetModal layout="standard">
+ *                     <BottomSheet>
+ *                         <p>This is the bottom sheet content.</p>
+ *                     </BottomSheet>
+ *                 </BottomSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
+export declare const BottomSheet: React.FC<BottomSheetProps>;

package/dist/components/Sheets/BottomSheet/index.d.ts

@@ -1 +1,2 @@
 export * from './BottomSheet';
+export type * from './types';

package/dist/components/Sheets/BottomSheet/types.d.ts

@@ -0,0 +1,37 @@
+import { Dialog } from 'react-aria-components';
+/**
+ * Props for the {@link BottomSheet} component.
+ * Extends React Aria Components `Dialog` props for bottom sheet content containers.
+ *
+ * Configurable CSS tokens:
+ * - `--md-bottom-sheet-background`: Background color of the bottom sheet (`var(--md-sys-color-surface-container-low)`).
+ * - `--md-bottom-sheet-color`: Text color of the bottom sheet (`var(--md-sys-color-on-surface)`).
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     BottomSheet,
+ *     BottomSheetModal,
+ *     Button,
+ *     ModalOverlay,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Sheet" />
+ *             <ModalOverlay>
+ *                 <BottomSheetModal layout="standard">
+ *                     <BottomSheet>
+ *                         <p>Bottom sheet content goes here.</p>
+ *                     </BottomSheet>
+ *                 </BottomSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
+export interface BottomSheetProps extends React.ComponentPropsWithRef<typeof Dialog> {
+}

package/dist/components/Sheets/BottomSheetModal/BottomSheetModal.d.ts

@@ -1,2 +1,36 @@
 import { BottomSheetModalProps } from './types';
+/**
+ * Modal container for a bottom sheet ({@link BottomSheet}).
+ *
+ * Implements [Material 3 Bottom Sheets](https://m3.material.io/components/bottom-sheets/overview)
+ * positioning and animations using React Aria Components `Modal`. Sets `data-layout` attribute
+ * to control slide-up entrance/exit animations and viewport margin styling, and provides layout
+ * configuration to children through {@link BottomSheetContext}.
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     BottomSheet,
+ *     BottomSheetModal,
+ *     Button,
+ *     ModalOverlay,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Bottom Sheet" />
+ *             <ModalOverlay>
+ *                 <BottomSheetModal layout="standard">
+ *                     <BottomSheet>
+ *                         <p>This is the bottom sheet content.</p>
+ *                     </BottomSheet>
+ *                 </BottomSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export declare const BottomSheetModal: React.FC<BottomSheetModalProps>;

package/dist/components/Sheets/BottomSheetModal/context.d.ts

@@ -1,5 +1,15 @@
 import { SheetLayout } from '../core';
+/**
+ * Context value passed from {@link BottomSheetModal} to descendant {@link BottomSheet} components.
+ */
 export type BottomSheetContextValue = {
+    /**
+     * Current layout style (`"standard"` or `"detached"`).
+     */
     layout: SheetLayout;
 };
+/**
+ * React context providing layout configuration for bottom sheets.
+ * Default value is `layout: "standard"`.
+ */
 export declare const BottomSheetContext: import('react').Context<BottomSheetContextValue>;

package/dist/components/Sheets/BottomSheetModal/types.d.ts

@@ -1,5 +1,43 @@
 import { Modal } from 'react-aria-components';
 import { SheetLayout } from '../core';
+/**
+ * Props for the {@link BottomSheetModal} component.
+ * Extends React Aria Components `Modal` props with bottom-sheet layout configurations.
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     BottomSheet,
+ *     BottomSheetModal,
+ *     Button,
+ *     ModalOverlay,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Sheet" />
+ *             <ModalOverlay>
+ *                 <BottomSheetModal layout="standard">
+ *                     <BottomSheet>
+ *                         <p>Bottom sheet content.</p>
+ *                     </BottomSheet>
+ *                 </BottomSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export interface BottomSheetModalProps extends React.ComponentPropsWithRef<typeof Modal> {
+    /**
+     * Layout style of the bottom sheet.
+     *
+     * - `"standard"`: Attached to the bottom edge of the viewport.
+     * - `"detached"`: Floating with margin and rounded corners on all edges.
+     *
+     * @default "standard"
+     */
     layout?: SheetLayout;
 }

package/dist/components/Sheets/SideSheet/SideSheet.d.ts

@@ -1,2 +1,48 @@
 import { SideSheetProps } from './types';
+/**
+ * High-level content container for side sheets, conforming to
+ * [Material 3 Side Sheets](https://m3.material.io/components/side-sheets/overview).
+ *
+ * Provides a standard structured side sheet layout containing:
+ * - A top header with an optional `headline` (`typography.titleLarge`) and a built-in close `IconButton` (`X`).
+ * - A scrollable `main` content area.
+ * - An optional bottom `actions` footer, automatically aligned with the sheet's alignment setting.
+ *
+ * Configurable CSS tokens:
+ * - `--md-side-sheet-background`: Background color of the side sheet (`var(--md-sys-color-surface-container-low)`).
+ * - `--md-side-sheet-color`: Text color of the side sheet (`var(--md-sys-color-on-surface)`).
+ * - `--md-side-sheet-headline-color`: Color of the side sheet headline (`var(--md-sys-color-on-surface-variant)`).
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     Button,
+ *     ModalOverlay,
+ *     SideSheet,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Side Sheet" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end" layout="standard">
+ *                     <SideSheet
+ *                         headline="Side Sheet Title"
+ *                         actions={[
+ *                             <Button key="save" label="Save" onPress={() => {}} />,
+ *                             <Button key="cancel" label="Cancel" variant="outline" onPress={() => {}} />,
+ *                         ]}
+ *                     >
+ *                         <p>This is the side sheet content.</p>
+ *                     </SideSheet>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export declare const SideSheet: React.FC<SideSheetProps>;

package/dist/components/Sheets/SideSheet/SideSheetDialog.d.ts

@@ -1,2 +1,45 @@
 import { SideSheetDialogProps } from './types';
+/**
+ * Low-level dialog container for side sheets, useful for custom layout structures.
+ *
+ * Consumes {@link SideSheetContext} to apply appropriate `data-alignment` and `data-layout`
+ * attributes for responsive positioning, border radiuses, and size constraints.
+ * Also provides `DialogContext` with `true` for modal integration.
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger, Header, Heading } from "react-aria-components";
+ * import {
+ *     Button,
+ *     IconButton,
+ *     ModalOverlay,
+ *     SideSheetDialog,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ * import { X } from "lucide-react";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Custom Sheet" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end" layout="standard">
+ *                     <SideSheetDialog>
+ *                         {({ close }) => (
+ *                             <>
+ *                                 <Header>
+ *                                     <Heading slot="title">Custom Title</Heading>
+ *                                     <IconButton icon={X} onPress={close} aria-label="Close" />
+ *                                 </Header>
+ *                                 <div>Custom content goes here.</div>
+ *                             </>
+ *                         )}
+ *                     </SideSheetDialog>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export declare const SideSheetDialog: React.FC<SideSheetDialogProps>;

package/dist/components/Sheets/SideSheet/types.d.ts

@@ -1,8 +1,102 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Dialog, DialogRenderProps } from 'react-aria-components';
+/**
+ * Props for the {@link SideSheetDialog} component.
+ * Extends React Aria Components `Dialog` props for low-level custom side sheet layouts.
+ *
+ * Configurable CSS tokens:
+ * - `--md-side-sheet-background`: Background color of the side sheet (`var(--md-sys-color-surface-container-low)`).
+ * - `--md-side-sheet-color`: Text color of the side sheet (`var(--md-sys-color-on-surface)`).
+ * - `--md-side-sheet-headline-color`: Color of the side sheet headline (`var(--md-sys-color-on-surface-variant)`).
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger, Header, Heading } from "react-aria-components";
+ * import {
+ *     Button,
+ *     IconButton,
+ *     ModalOverlay,
+ *     SideSheetDialog,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ * import { X } from "lucide-react";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Sheet" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end">
+ *                     <SideSheetDialog>
+ *                         {({ close }) => (
+ *                             <>
+ *                                 <Header>
+ *                                     <Heading slot="title">Custom Layout</Heading>
+ *                                     <IconButton icon={X} onPress={close} aria-label="Close" />
+ *                                 </Header>
+ *                                 <div>Content goes here</div>
+ *                             </>
+ *                         )}
+ *                     </SideSheetDialog>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export interface SideSheetDialogProps extends React.ComponentPropsWithRef<typeof Dialog> {
 }
+/**
+ * Props for the {@link SideSheet} component.
+ * Extends React Aria Components `Dialog` props with optional headline and footer action buttons.
+ *
+ * Configurable CSS tokens:
+ * - `--md-side-sheet-background`: Background color of the side sheet (`var(--md-sys-color-surface-container-low)`).
+ * - `--md-side-sheet-color`: Text color of the side sheet (`var(--md-sys-color-on-surface)`).
+ * - `--md-side-sheet-headline-color`: Color of the side sheet headline (`var(--md-sys-color-on-surface-variant)`).
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     Button,
+ *     ModalOverlay,
+ *     SideSheet,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Filters" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end" layout="standard">
+ *                     <SideSheet
+ *                         headline="Filter Items"
+ *                         actions={[
+ *                             <Button key="apply" label="Apply" onPress={() => {}} />,
+ *                             <Button key="reset" label="Reset" variant="outline" onPress={() => {}} />,
+ *                         ]}
+ *                     >
+ *                         <p>Filter options go here.</p>
+ *                     </SideSheet>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export interface SideSheetProps extends React.ComponentPropsWithRef<typeof Dialog> {
+    /**
+     * Optional headline text or element displayed in the side sheet header.
+     * Rendered inside a React Aria `Heading` using `typography.titleLarge`.
+     */
     headline?: ReactNode;
-    actions?: ReactElement[] | ((renderProps: DialogRenderProps) => ReactElement[]);
+    /**
+     * Optional action buttons rendered in the bottom action bar.
+     * Can be an array of React nodes or a render function receiving React Aria `DialogRenderProps` (such as `close`).
+     */
+    actions?: ReactNode[] | ((renderProps: DialogRenderProps) => ReactNode[]);
 }

package/dist/components/Sheets/SideSheetModal/SideSheetModal.d.ts

@@ -1,2 +1,36 @@
 import { SideSheetModalProps } from './types';
+/**
+ * Modal container for a side sheet ({@link SideSheet} or {@link SideSheetDialog}).
+ *
+ * Implements [Material 3 Side Sheets](https://m3.material.io/components/side-sheets/overview)
+ * positioning and animations using React Aria Components `Modal`. Sets `data-alignment` and
+ * `data-layout` attributes to control entry/exit slide animations and viewport anchoring,
+ * and provides layout and alignment configurations to children through {@link SideSheetContext}.
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     Button,
+ *     ModalOverlay,
+ *     SideSheet,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Details" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end" layout="standard">
+ *                     <SideSheet headline="Details">
+ *                         <p>Side sheet content goes here.</p>
+ *                     </SideSheet>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export declare const SideSheetModal: React.FC<SideSheetModalProps>;

package/dist/components/Sheets/SideSheetModal/context.d.ts

@@ -1,7 +1,20 @@
 import { SheetLayout } from '../core';
 import { SideSheetAlignment } from './types';
+/**
+ * Context value passed from {@link SideSheetModal} to descendant side sheet components like {@link SideSheetDialog} and {@link SideSheet}.
+ */
 export type SideSheetContextValue = {
+    /**
+     * Current layout style (`"standard"` or `"detached"`).
+     */
     layout: SheetLayout;
+    /**
+     * Current alignment edge (`"start"` or `"end"`).
+     */
     alignment: SideSheetAlignment;
 };
+/**
+ * React context providing layout and alignment properties for side sheets.
+ * Default values are `layout: "standard"` and `alignment: "end"`.
+ */
 export declare const SideSheetContext: import('react').Context<SideSheetContextValue>;

package/dist/components/Sheets/SideSheetModal/types.d.ts

@@ -1,7 +1,56 @@
 import { Modal } from 'react-aria-components';
 import { SheetLayout } from '../core';
+/**
+ * Alignment edge for a side sheet on the screen.
+ *
+ * - `"start"`: Anchors to the inline-start edge of the viewport (left in LTR, right in RTL).
+ * - `"end"`: Anchors to the inline-end edge of the viewport (right in LTR, left in RTL).
+ */
 export type SideSheetAlignment = "start" | "end";
+/**
+ * Props for the {@link SideSheetModal} component.
+ * Extends React Aria Components `Modal` props with side-sheet layout and alignment configurations.
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     Button,
+ *     ModalOverlay,
+ *     SideSheet,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Sheet" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end" layout="standard">
+ *                     <SideSheet headline="Details">
+ *                         <p>Side sheet content.</p>
+ *                     </SideSheet>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export interface SideSheetModalProps extends React.ComponentPropsWithRef<typeof Modal> {
+    /**
+     * Side of the screen where the side sheet appears.
+     *
+     * @default "end"
+     */
     alignment?: SideSheetAlignment;
+    /**
+     * Layout style of the side sheet.
+     *
+     * - `"standard"`: Attached to the screen edge.
+     * - `"detached"`: Floating with margin and rounded corners on all edges.
+     *
+     * @default "standard"
+     */
     layout?: SheetLayout;
 }

package/dist/components/Sheets/core/layout.d.ts

@@ -1 +1,12 @@
+/**
+ * Layout styles for Material 3 sheets (`SideSheet` and `BottomSheet`).
+ *
+ * - `"standard"`: The sheet is attached directly to the edge(s) of the viewport (no outer margins; corners on the attachment edge are square).
+ * - `"detached"`: The sheet has outer margins separating it from the viewport edges and features rounded corners on all sides, appearing as a floating container.
+ *
+ * @example
+ * ```tsx
+ * const layout: SheetLayout = "detached";
+ * ```
+ */
 export type SheetLayout = "standard" | "detached";

package/dist/components/Snackbar/SnackbarRegion.d.ts

@@ -1,2 +1,52 @@
 import { SnackbarRegionProps } from './types';
+/**
+ * Root region component for managing and rendering [Material 3 Snackbars](https://m3.material.io/components/snackbar/overview).
+ *
+ * Wraps your application or a section of it to provide a snackbar context via {@link SnackbarQueueContext}.
+ * Renders an underlying React Aria `ToastRegion` fixed at the bottom center of the viewport (elevated with
+ * high z-index), displaying queued snackbar notifications with supporting text, optional actions,
+ * and an optional dismiss button.
+ *
+ * Configurable CSS tokens:
+ * - `--md-snackbar-background`: Background color of the snackbar (`var(--md-sys-color-inverse-surface)`).
+ * - `--md-snackbar-color`: Text and icon color of the snackbar (`var(--md-sys-color-inverse-on-surface)`).
+ * - `--md-snackbar-action-color`: Text color of the action button (`var(--md-sys-color-inverse-primary)`).
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     Button,
+ *     SnackbarRegion,
+ *     useSnackbarQueue,
+ * } from "@adgytec/web-ui-components";
+ *
+ * function NotificationTrigger() {
+ *     const queue = useSnackbarQueue();
+ *
+ *     const showNotification = () => {
+ *         queue.add(
+ *             {
+ *                 supportingText: "File uploaded successfully.",
+ *                 action: (
+ *                     <Button color="text" onPress={() => console.log("View")}>
+ *                         View
+ *                     </Button>
+ *                 ),
+ *             },
+ *             { timeout: 5000 }
+ *         );
+ *     };
+ *
+ *     return <Button onPress={showNotification}>Upload</Button>;
+ * }
+ *
+ * export function App() {
+ *     return (
+ *         <SnackbarRegion maxVisibleSnackbars={1}>
+ *             <NotificationTrigger />
+ *         </SnackbarRegion>
+ *     );
+ * }
+ * ```
+ */
 export declare const SnackbarRegion: React.FC<SnackbarRegionProps>;

package/dist/components/Snackbar/context.d.ts

@@ -1,4 +1,42 @@
 import { UNSTABLE_ToastQueue as ToastQueue } from 'react-aria-components';
 import { SnackbarContent } from './types';
+/**
+ * React context holding the active `ToastQueue` instance for snackbars,
+ * or `null` if accessed outside a {@link SnackbarRegion}.
+ */
 export declare const SnackbarQueueContext: import('react').Context<ToastQueue<SnackbarContent> | null>;
+/**
+ * Hook to access the active snackbar queue from any child component within a {@link SnackbarRegion}.
+ *
+ * Returns the underlying React Aria `ToastQueue` instance, allowing components
+ * to enqueue new snackbars, dismiss existing ones, or inspect the queue.
+ *
+ * @throws {Error} If called outside of a {@link SnackbarRegion}.
+ *
+ * @example
+ * ```tsx
+ * import { Button, useSnackbarQueue } from "@adgytec/web-ui-components";
+ *
+ * export function CopyButton({ text }: { text: string }) {
+ *     const snackbarQueue = useSnackbarQueue();
+ *
+ *     const handleCopy = async () => {
+ *         await navigator.clipboard.writeText(text);
+ *         snackbarQueue.add(
+ *             {
+ *                 supportingText: "Copied to clipboard",
+ *                 action: (
+ *                     <Button color="text" onPress={() => console.log("Undo")}>
+ *                         Undo
+ *                     </Button>
+ *                 ),
+ *             },
+ *             { timeout: 4000 }
+ *         );
+ *     };
+ *
+ *     return <Button onPress={handleCopy}>Copy</Button>;
+ * }
+ * ```
+ */
 export declare function useSnackbarQueue(): ToastQueue<SnackbarContent>;