@tinybigui/react 0.21.1 → 0.22.0

package/dist/index.d.cts

@@ -6249,12 +6249,13 @@ type ChipVariants = VariantProps<typeof chipVariants>;
  * Structural variant of the MD3 Dialog.
  *
  * - `basic` — Floating dialog with headline, body, and action buttons.
- *   Supports scale + fade entry animation. Closes on scrim click or Escape.
- *   Max width 560dp per MD3 spec.
+ *   Supports scale + fade entry animation (MD3 Expressive, `animate-md-scale-in`).
+ *   Closes on scrim click or Escape. Max width 560dp per MD3 spec.
  *
  * - `fullscreen` — Full viewport overlay suited for mobile and complex forms.
  *   Replaces headline with a top app bar row (close icon + confirm action).
- *   Slide-up entry animation. Does NOT close on scrim click per MD3 spec.
+ *   Slide-up entry animation (`animate-md-slide-in-bottom`). Does NOT close on
+ *   scrim click per MD3 spec.
  *
  * @default 'basic'
  */
@@ -6262,10 +6263,12 @@ type DialogVariant = "basic" | "fullscreen";
 /**
  * Internal animation state machine for the Dialog.
  *
- * - `entering` — initial mount state before transition fires
- * - `visible`  — fully shown, entry animation complete
- * - `exiting`  — exit animation in progress
- * - `exited`   — removed from DOM
+ * - `entering` — initial mount state; dialog starts invisible before animation fires
+ * - `visible`  — entry animation active (`animate-md-scale-in` / `animate-md-slide-in-bottom`)
+ * - `exiting`  — exit animation active (`animate-md-scale-out` / `animate-md-slide-out-bottom`)
+ * - `exited`   — animation complete; portal removes element from DOM
+ *
+ * The scrim receives the same state for its own fade-in/out animation.
  */
 type DialogAnimationState = "entering" | "visible" | "exiting" | "exited";
 /**
@@ -6302,7 +6305,7 @@ interface DialogContextValue {
  *   onOpenChange={setOpen}
  *   aria-label="Confirm action"
  *   className="bg-surface-container-high rounded-xl shadow-elevation-3"
- *   scrimClassName="fixed inset-0 z-40 bg-scrim opacity-32"
+ *   scrimClassName="fixed inset-0 z-40 bg-scrim/32"
  * >
  *   <DialogHeadline>Confirm deletion?</DialogHeadline>
  *   <DialogContent>This action cannot be undone.</DialogContent>
@@ -6337,6 +6340,21 @@ interface DialogHeadlessProps {
      * When `DialogHeadline` is present, `aria-labelledby` is preferred automatically.
      */
     "aria-label"?: string;
+    /**
+     * Optional hero icon rendered centered above the headline per MD3 spec.
+     * When present, sets `data-with-icon` on the panel root so headline and
+     * supporting text center-align via `group-data-[with-icon]/dialog:` selectors.
+     *
+     * Only rendered in the `basic` variant.
+     *
+     * @example
+     * ```tsx
+     * <Dialog icon={<BookmarkIcon />}>
+     *   <DialogHeadline>Save bookmark?</DialogHeadline>
+     * </Dialog>
+     * ```
+     */
+    icon?: ReactNode;
     /**
      * Dialog slot content — typically `DialogHeadline`, `DialogContent`, `DialogActions`.
      */
@@ -6346,13 +6364,28 @@ interface DialogHeadlessProps {
      */
     className?: string;
     /**
-     * Additional CSS classes applied to the scrim overlay element.
+     * Additional CSS classes applied to the centering/positioning wrapper element.
+     * Consumed from `dialogWrapperVariants` by the styled `Dialog` layer.
      */
-    scrimClassName?: string;
+    wrapperClassName?: string;
+    /**
+     * Returns CSS classes for the scrim based on the current animation state.
+     * Called at render time to apply the correct fade-in/out animation.
+     * When `undefined`, falls back to a static base scrim class.
+     *
+     * @example
+     * ```tsx
+     * getScrimClassName={(state) => dialogScrimVariants({ animationState: state })}
+     * ```
+     */
+    getScrimClassName?: (state: DialogAnimationState) => string;
     /**
      * Additional CSS classes injected based on the current animation state.
      * Called at render time to merge CVA animation classes onto the panel.
      *
+     * Returns empty string when `prefers-reduced-motion: reduce` is active
+     * (handled by the styled `Dialog` layer via `useReducedMotion`).
+     *
      * @example
      * ```tsx
      * getAnimationClassName={(state) => dialogAnimationVariants({ animationState: state, variant })}
@@ -6382,6 +6415,16 @@ interface DialogHeadlessProps {
  *   </DialogActions>
  * </Dialog>
  *
+ * // With hero icon
+ * <Dialog icon={<BookmarkIcon />} open={open} onOpenChange={setOpen}>
+ *   <DialogHeadline>Save bookmark?</DialogHeadline>
+ *   <DialogContent>The page will be saved to your bookmarks.</DialogContent>
+ *   <DialogActions>
+ *     <Button variant="text" onPress={() => setOpen(false)}>Cancel</Button>
+ *     <Button variant="filled" onPress={handleSave}>Save</Button>
+ *   </DialogActions>
+ * </Dialog>
+ *
  * // Full-screen dialog (controlled)
  * <Dialog variant="fullscreen" open={open} onOpenChange={setOpen}>
  *   <DialogHeadline
@@ -6419,6 +6462,19 @@ interface DialogProps {
      * Accessible label for the dialog when no `DialogHeadline` is present.
      */
     "aria-label"?: string;
+    /**
+     * Optional hero icon rendered centered above the headline per MD3 spec.
+     * When present, headline and supporting text center-align automatically.
+     * Only rendered in the `basic` variant.
+     *
+     * @example
+     * ```tsx
+     * <Dialog icon={<BookmarkIcon />}>
+     *   <DialogHeadline>Save bookmark?</DialogHeadline>
+     * </Dialog>
+     * ```
+     */
+    icon?: ReactNode;
     /**
      * Dialog slot content — `DialogHeadline`, `DialogContent`, `DialogActions`.
      */
@@ -6477,6 +6533,10 @@ interface DialogHeadlineProps {
  * Renders as a scrollable `<div>` and provides its `id` to `DialogContext`
  * so the parent dialog panel can reference it via `aria-describedby`.
  *
+ * Shows MD3 scroll dividers (`border-outline-variant`) at the top and/or bottom
+ * of the scroll container when content overflows. Dividers are toggled via
+ * `data-scroll-divider-top` and `data-scroll-divider-bottom` attributes.
+ *
  * @example
  * ```tsx
  * <DialogContent>
@@ -6531,17 +6591,24 @@ interface DialogActionsProps {
  * **Basic** (default):
  * - Floating card: `bg-surface-container-high`, `rounded-xl`, `shadow-elevation-3`
  * - Centered in viewport (min 280dp, max 560dp width)
- * - Scale + fade entry animation (`duration-medium4 / ease-emphasized-decelerate`)
- * - Fade exit animation (`duration-short2 / ease-emphasized-accelerate`)
+ * - Scale + fade entry animation (`animate-md-scale-in`, expressive-fast-spatial 350ms)
+ * - Scale + fade exit animation (`animate-md-scale-out`, emphasized-accelerate 200ms)
+ * - Scrim fades in/out (`animate-md-fade-in` / `animate-md-fade-out`)
  * - Closes on scrim click or Escape key
+ * - Optional hero icon above headline (`icon` prop) — centers headline + content text
  *
  * **Full-screen**:
  * - Full viewport coverage — suited for mobile and complex forms
  * - No rounded corners, no elevation shadow
- * - Slide-up entry / slide-down exit animation
+ * - Slide-up entry / slide-down exit animation (`animate-md-slide-in-bottom` / out)
  * - Does NOT close on scrim click per MD3 spec (only via Escape or close button)
  * - Headline replaced by top app bar row (close icon + confirm action)
  *
+ * **Reduced motion**:
+ * - When `prefers-reduced-motion: reduce` is active, all keyframe animations are
+ *   suppressed (no animate-md-* class applied). Dialog appears/disappears instantly.
+ * - `transition-none` is appended so any inherited transitions are also disabled.
+ *
  * Both variants:
  * - `role="dialog"` + `aria-modal="true"` (React Aria `useDialog`)
  * - `aria-labelledby` pointing to `DialogHeadline` id
@@ -6576,6 +6643,16 @@ interface DialogActionsProps {
  *   );
  * }
  *
+ * // With hero icon
+ * <Dialog icon={<BookmarkIcon />} open={open} onOpenChange={setOpen}>
+ *   <DialogHeadline>Save bookmark?</DialogHeadline>
+ *   <DialogContent>The page will be saved to your bookmarks.</DialogContent>
+ *   <DialogActions>
+ *     <Button variant="text" onPress={() => setOpen(false)}>Cancel</Button>
+ *     <Button variant="filled" onPress={handleSave}>Save</Button>
+ *   </DialogActions>
+ * </Dialog>
+ *
  * // Full-screen dialog — mobile form flow
  * function NewEventDialog() {
  *   const [open, setOpen] = useState(false);
@@ -6617,9 +6694,15 @@ declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.Re
  * Renders as an `<h2>` element and registers its `id` with the parent
  * `DialogContext` so the dialog panel can wire `aria-labelledby` correctly.
  *
+ * When the parent dialog has a hero `icon` prop, the panel root carries
+ * `data-with-icon` and `group/dialog`, so the `group-data-[with-icon]/dialog:text-center`
+ * selector in `dialogHeadlineVariants` automatically centers the headline text —
+ * no additional props needed here.
+ *
  * For the `fullscreen` variant, the headline renders as a top app bar row
  * containing optional `closeButton` (leading icon button) and `confirmButton`
- * (trailing text action) per MD3 Full-screen Dialog spec.
+ * (trailing text action) per MD3 Full-screen Dialog spec. The fullscreen app bar
+ * always shows a `border-b border-outline-variant` divider below it.
  *
  * Must be rendered inside a `<Dialog>` or `<DialogHeadless>` component.
  *
@@ -6660,6 +6743,13 @@ declare const DialogHeadline: React$1.ForwardRefExoticComponent<DialogHeadlinePr
  * Styled with `text-body-medium` and `text-on-surface-variant` per MD3 spec.
  * Overflows vertically when content exceeds the available height.
  *
+ * **Scroll dividers**: Shows `border-outline-variant` dividers at the top and/or
+ * bottom edge when content overflows and is not scrolled to the respective edge.
+ * Dividers are toggled by setting `data-scroll-divider-top` / `data-scroll-divider-bottom`
+ * presence attributes on the element. The CVA base class uses
+ * `data-[scroll-divider-top]:border-t` and `data-[scroll-divider-bottom]:border-b`
+ * to apply the borders — no style props needed.
+ *
  * Must be rendered inside a `<Dialog>` or `<DialogHeadless>` component.
  *
  * @example
@@ -6739,7 +6829,12 @@ declare function useDialogContext(): DialogContextValue;
  *   Basic variant is dismissable (Escape + outside click);
  *   Full-screen variant is Escape-dismissable only (no scrim click) per MD3 spec.
  * - **Animation state machine**: `entering → visible → exiting → exited`
- *   mirrors the Snackbar animation pattern.
+ *   Exit advances on `onAnimationEnd` with `e.target === e.currentTarget` guard
+ *   (prevents child animation events from advancing the state machine), plus a
+ *   250ms fallback timer in case the animation event doesn't fire.
+ * - **Scrim animation**: state-driven via `getScrimClassName(animationState)`.
+ * - **Hero icon**: optional `icon` prop renders centered above headline;
+ *   sets `data-with-icon` on panel root for group-data centering of headline/content.
  * - **ARIA wiring**: `DialogContext` provides stable IDs for `aria-labelledby`
  *   and `aria-describedby`, consumed by slot sub-components.
  *
@@ -6757,8 +6852,9 @@ declare function useDialogContext(): DialogContextValue;
  *   variant="basic"
  *   open={open}
  *   onOpenChange={setOpen}
- *   className={cn(dialogWrapperVariants({ variant: 'basic' }), dialogPanelVariants({ variant: 'basic' }))}
- *   scrimClassName={dialogScrimVariants()}
+ *   className={cn(dialogPanelVariants({ variant: 'basic' }))}
+ *   wrapperClassName={dialogWrapperVariants({ variant: 'basic' })}
+ *   getScrimClassName={(state) => dialogScrimVariants({ animationState: state })}
  *   getAnimationClassName={(state) =>
  *     dialogAnimationVariants({ animationState: state, variant: 'basic' })
  *   }

package/dist/index.d.ts

@@ -6249,12 +6249,13 @@ type ChipVariants = VariantProps<typeof chipVariants>;
  * Structural variant of the MD3 Dialog.
  *
  * - `basic` — Floating dialog with headline, body, and action buttons.
- *   Supports scale + fade entry animation. Closes on scrim click or Escape.
- *   Max width 560dp per MD3 spec.
+ *   Supports scale + fade entry animation (MD3 Expressive, `animate-md-scale-in`).
+ *   Closes on scrim click or Escape. Max width 560dp per MD3 spec.
  *
  * - `fullscreen` — Full viewport overlay suited for mobile and complex forms.
  *   Replaces headline with a top app bar row (close icon + confirm action).
- *   Slide-up entry animation. Does NOT close on scrim click per MD3 spec.
+ *   Slide-up entry animation (`animate-md-slide-in-bottom`). Does NOT close on
+ *   scrim click per MD3 spec.
  *
  * @default 'basic'
  */
@@ -6262,10 +6263,12 @@ type DialogVariant = "basic" | "fullscreen";
 /**
  * Internal animation state machine for the Dialog.
  *
- * - `entering` — initial mount state before transition fires
- * - `visible`  — fully shown, entry animation complete
- * - `exiting`  — exit animation in progress
- * - `exited`   — removed from DOM
+ * - `entering` — initial mount state; dialog starts invisible before animation fires
+ * - `visible`  — entry animation active (`animate-md-scale-in` / `animate-md-slide-in-bottom`)
+ * - `exiting`  — exit animation active (`animate-md-scale-out` / `animate-md-slide-out-bottom`)
+ * - `exited`   — animation complete; portal removes element from DOM
+ *
+ * The scrim receives the same state for its own fade-in/out animation.
  */
 type DialogAnimationState = "entering" | "visible" | "exiting" | "exited";
 /**
@@ -6302,7 +6305,7 @@ interface DialogContextValue {
  *   onOpenChange={setOpen}
  *   aria-label="Confirm action"
  *   className="bg-surface-container-high rounded-xl shadow-elevation-3"
- *   scrimClassName="fixed inset-0 z-40 bg-scrim opacity-32"
+ *   scrimClassName="fixed inset-0 z-40 bg-scrim/32"
  * >
  *   <DialogHeadline>Confirm deletion?</DialogHeadline>
  *   <DialogContent>This action cannot be undone.</DialogContent>
@@ -6337,6 +6340,21 @@ interface DialogHeadlessProps {
      * When `DialogHeadline` is present, `aria-labelledby` is preferred automatically.
      */
     "aria-label"?: string;
+    /**
+     * Optional hero icon rendered centered above the headline per MD3 spec.
+     * When present, sets `data-with-icon` on the panel root so headline and
+     * supporting text center-align via `group-data-[with-icon]/dialog:` selectors.
+     *
+     * Only rendered in the `basic` variant.
+     *
+     * @example
+     * ```tsx
+     * <Dialog icon={<BookmarkIcon />}>
+     *   <DialogHeadline>Save bookmark?</DialogHeadline>
+     * </Dialog>
+     * ```
+     */
+    icon?: ReactNode;
     /**
      * Dialog slot content — typically `DialogHeadline`, `DialogContent`, `DialogActions`.
      */
@@ -6346,13 +6364,28 @@ interface DialogHeadlessProps {
      */
     className?: string;
     /**
-     * Additional CSS classes applied to the scrim overlay element.
+     * Additional CSS classes applied to the centering/positioning wrapper element.
+     * Consumed from `dialogWrapperVariants` by the styled `Dialog` layer.
      */
-    scrimClassName?: string;
+    wrapperClassName?: string;
+    /**
+     * Returns CSS classes for the scrim based on the current animation state.
+     * Called at render time to apply the correct fade-in/out animation.
+     * When `undefined`, falls back to a static base scrim class.
+     *
+     * @example
+     * ```tsx
+     * getScrimClassName={(state) => dialogScrimVariants({ animationState: state })}
+     * ```
+     */
+    getScrimClassName?: (state: DialogAnimationState) => string;
     /**
      * Additional CSS classes injected based on the current animation state.
      * Called at render time to merge CVA animation classes onto the panel.
      *
+     * Returns empty string when `prefers-reduced-motion: reduce` is active
+     * (handled by the styled `Dialog` layer via `useReducedMotion`).
+     *
      * @example
      * ```tsx
      * getAnimationClassName={(state) => dialogAnimationVariants({ animationState: state, variant })}
@@ -6382,6 +6415,16 @@ interface DialogHeadlessProps {
  *   </DialogActions>
  * </Dialog>
  *
+ * // With hero icon
+ * <Dialog icon={<BookmarkIcon />} open={open} onOpenChange={setOpen}>
+ *   <DialogHeadline>Save bookmark?</DialogHeadline>
+ *   <DialogContent>The page will be saved to your bookmarks.</DialogContent>
+ *   <DialogActions>
+ *     <Button variant="text" onPress={() => setOpen(false)}>Cancel</Button>
+ *     <Button variant="filled" onPress={handleSave}>Save</Button>
+ *   </DialogActions>
+ * </Dialog>
+ *
  * // Full-screen dialog (controlled)
  * <Dialog variant="fullscreen" open={open} onOpenChange={setOpen}>
  *   <DialogHeadline
@@ -6419,6 +6462,19 @@ interface DialogProps {
      * Accessible label for the dialog when no `DialogHeadline` is present.
      */
     "aria-label"?: string;
+    /**
+     * Optional hero icon rendered centered above the headline per MD3 spec.
+     * When present, headline and supporting text center-align automatically.
+     * Only rendered in the `basic` variant.
+     *
+     * @example
+     * ```tsx
+     * <Dialog icon={<BookmarkIcon />}>
+     *   <DialogHeadline>Save bookmark?</DialogHeadline>
+     * </Dialog>
+     * ```
+     */
+    icon?: ReactNode;
     /**
      * Dialog slot content — `DialogHeadline`, `DialogContent`, `DialogActions`.
      */
@@ -6477,6 +6533,10 @@ interface DialogHeadlineProps {
  * Renders as a scrollable `<div>` and provides its `id` to `DialogContext`
  * so the parent dialog panel can reference it via `aria-describedby`.
  *
+ * Shows MD3 scroll dividers (`border-outline-variant`) at the top and/or bottom
+ * of the scroll container when content overflows. Dividers are toggled via
+ * `data-scroll-divider-top` and `data-scroll-divider-bottom` attributes.
+ *
  * @example
  * ```tsx
  * <DialogContent>
@@ -6531,17 +6591,24 @@ interface DialogActionsProps {
  * **Basic** (default):
  * - Floating card: `bg-surface-container-high`, `rounded-xl`, `shadow-elevation-3`
  * - Centered in viewport (min 280dp, max 560dp width)
- * - Scale + fade entry animation (`duration-medium4 / ease-emphasized-decelerate`)
- * - Fade exit animation (`duration-short2 / ease-emphasized-accelerate`)
+ * - Scale + fade entry animation (`animate-md-scale-in`, expressive-fast-spatial 350ms)
+ * - Scale + fade exit animation (`animate-md-scale-out`, emphasized-accelerate 200ms)
+ * - Scrim fades in/out (`animate-md-fade-in` / `animate-md-fade-out`)
  * - Closes on scrim click or Escape key
+ * - Optional hero icon above headline (`icon` prop) — centers headline + content text
  *
  * **Full-screen**:
  * - Full viewport coverage — suited for mobile and complex forms
  * - No rounded corners, no elevation shadow
- * - Slide-up entry / slide-down exit animation
+ * - Slide-up entry / slide-down exit animation (`animate-md-slide-in-bottom` / out)
  * - Does NOT close on scrim click per MD3 spec (only via Escape or close button)
  * - Headline replaced by top app bar row (close icon + confirm action)
  *
+ * **Reduced motion**:
+ * - When `prefers-reduced-motion: reduce` is active, all keyframe animations are
+ *   suppressed (no animate-md-* class applied). Dialog appears/disappears instantly.
+ * - `transition-none` is appended so any inherited transitions are also disabled.
+ *
  * Both variants:
  * - `role="dialog"` + `aria-modal="true"` (React Aria `useDialog`)
  * - `aria-labelledby` pointing to `DialogHeadline` id
@@ -6576,6 +6643,16 @@ interface DialogActionsProps {
  *   );
  * }
  *
+ * // With hero icon
+ * <Dialog icon={<BookmarkIcon />} open={open} onOpenChange={setOpen}>
+ *   <DialogHeadline>Save bookmark?</DialogHeadline>
+ *   <DialogContent>The page will be saved to your bookmarks.</DialogContent>
+ *   <DialogActions>
+ *     <Button variant="text" onPress={() => setOpen(false)}>Cancel</Button>
+ *     <Button variant="filled" onPress={handleSave}>Save</Button>
+ *   </DialogActions>
+ * </Dialog>
+ *
  * // Full-screen dialog — mobile form flow
  * function NewEventDialog() {
  *   const [open, setOpen] = useState(false);
@@ -6617,9 +6694,15 @@ declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.Re
  * Renders as an `<h2>` element and registers its `id` with the parent
  * `DialogContext` so the dialog panel can wire `aria-labelledby` correctly.
  *
+ * When the parent dialog has a hero `icon` prop, the panel root carries
+ * `data-with-icon` and `group/dialog`, so the `group-data-[with-icon]/dialog:text-center`
+ * selector in `dialogHeadlineVariants` automatically centers the headline text —
+ * no additional props needed here.
+ *
  * For the `fullscreen` variant, the headline renders as a top app bar row
  * containing optional `closeButton` (leading icon button) and `confirmButton`
- * (trailing text action) per MD3 Full-screen Dialog spec.
+ * (trailing text action) per MD3 Full-screen Dialog spec. The fullscreen app bar
+ * always shows a `border-b border-outline-variant` divider below it.
  *
  * Must be rendered inside a `<Dialog>` or `<DialogHeadless>` component.
  *
@@ -6660,6 +6743,13 @@ declare const DialogHeadline: React$1.ForwardRefExoticComponent<DialogHeadlinePr
  * Styled with `text-body-medium` and `text-on-surface-variant` per MD3 spec.
  * Overflows vertically when content exceeds the available height.
  *
+ * **Scroll dividers**: Shows `border-outline-variant` dividers at the top and/or
+ * bottom edge when content overflows and is not scrolled to the respective edge.
+ * Dividers are toggled by setting `data-scroll-divider-top` / `data-scroll-divider-bottom`
+ * presence attributes on the element. The CVA base class uses
+ * `data-[scroll-divider-top]:border-t` and `data-[scroll-divider-bottom]:border-b`
+ * to apply the borders — no style props needed.
+ *
  * Must be rendered inside a `<Dialog>` or `<DialogHeadless>` component.
  *
  * @example
@@ -6739,7 +6829,12 @@ declare function useDialogContext(): DialogContextValue;
  *   Basic variant is dismissable (Escape + outside click);
  *   Full-screen variant is Escape-dismissable only (no scrim click) per MD3 spec.
  * - **Animation state machine**: `entering → visible → exiting → exited`
- *   mirrors the Snackbar animation pattern.
+ *   Exit advances on `onAnimationEnd` with `e.target === e.currentTarget` guard
+ *   (prevents child animation events from advancing the state machine), plus a
+ *   250ms fallback timer in case the animation event doesn't fire.
+ * - **Scrim animation**: state-driven via `getScrimClassName(animationState)`.
+ * - **Hero icon**: optional `icon` prop renders centered above headline;
+ *   sets `data-with-icon` on panel root for group-data centering of headline/content.
  * - **ARIA wiring**: `DialogContext` provides stable IDs for `aria-labelledby`
  *   and `aria-describedby`, consumed by slot sub-components.
  *
@@ -6757,8 +6852,9 @@ declare function useDialogContext(): DialogContextValue;
  *   variant="basic"
  *   open={open}
  *   onOpenChange={setOpen}
- *   className={cn(dialogWrapperVariants({ variant: 'basic' }), dialogPanelVariants({ variant: 'basic' }))}
- *   scrimClassName={dialogScrimVariants()}
+ *   className={cn(dialogPanelVariants({ variant: 'basic' }))}
+ *   wrapperClassName={dialogWrapperVariants({ variant: 'basic' })}
+ *   getScrimClassName={(state) => dialogScrimVariants({ animationState: state })}
  *   getAnimationClassName={(state) =>
  *     dialogAnimationVariants({ animationState: state, variant: 'basic' })
  *   }