@noxlovette/material 0.4.8 → 0.5.0

package/dist/animation/TransitionPatterns.stories.svelte

@@ -0,0 +1,357 @@
+<!--
+  The six M3 transition patterns, each on its own M3 shape, driven by `src/lib/animation/`.
+  https://m3.material.io/styles/motion/transitions/transition-patterns
+
+  Every demo loops by default; "Replay" retriggers it on demand. The Overview plays the six in
+  turn rather than all at once: container transform, forward/backward, lateral and top level run
+  on the View Transition API, which allows one transition per document at a time.
+
+  Excluded from autodocs — the docs page renders every story into one document, which would
+  duplicate the `data-demo` targets these transitions resolve.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    title: 'Motion/Transition patterns',
+    tags: ['!autodocs'],
+    parameters: { layout: 'fullscreen' }
+  });
+</script>
+
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { Attachment } from 'svelte/attachments';
+  import Button from '../components/buttons/Button.svelte';
+  import Title from '../components/typography/title/Title.svelte';
+  import Body from '../components/typography/body/Body.svelte';
+  import {
+    containerTransform,
+    enterExit,
+    fadeThrough,
+    lateral,
+    Presence,
+    sharedAxis,
+    skeleton,
+    type NavigationDirection
+  } from './transition.js';
+  import {
+    pathFourLeafClover,
+    pathFourSidedCookie,
+    pathGem,
+    pathPentagon,
+    pathSoftBurst,
+    pathSunny
+  } from './shapes.js';
+
+  const LOOP_MS = 2200;
+  const OVERVIEW_STEP_MS = 1400;
+
+  let looping = $state(true);
+
+  /* Container transform — a cookie card expands into a detail surface and back. */
+  let expanded = $state(false);
+  const runContainer = () => {
+    const [from, to] = expanded
+      ? ['[data-demo="ct-detail"]', '[data-demo="ct-card"]']
+      : ['[data-demo="ct-card"]', '[data-demo="ct-detail"]'];
+    return containerTransform(
+      async () => {
+        expanded = !expanded;
+        await tick();
+      },
+      { from, to }
+    );
+  };
+
+  /* Forward and backward — Inbox → Thread → Message and back up the hierarchy. */
+  const levels = ['Inbox', 'Thread', 'Message'];
+  let level = $state(0);
+  let descending = true;
+  const runAxis = () => {
+    if (level === levels.length - 1) descending = false;
+    if (level === 0) descending = true;
+    const direction: NavigationDirection = descending ? 'forward' : 'backward';
+    return sharedAxis(
+      async () => {
+        level += descending ? 1 : -1;
+        await tick();
+      },
+      { target: '[data-demo="axis"]', axis: 'x', direction }
+    );
+  };
+
+  /* Lateral — peer tabs, wrapping back to the first. */
+  const tabs = ['Photos', 'Albums', 'Search'];
+  let tab = $state(0);
+  const runLateral = () => {
+    const next = (tab + 1) % tabs.length;
+    const direction: NavigationDirection = next > tab ? 'forward' : 'backward';
+    return lateral(
+      async () => {
+        tab = next;
+        await tick();
+      },
+      { target: '[data-demo="lateral"]', direction }
+    );
+  };
+
+  /* Top level — unrelated destinations, as from a navigation bar. */
+  const destinations = [
+    { label: 'Home', color: 'bg-md-sys-color-primary-container text-md-sys-color-primary' },
+    { label: 'Library', color: 'bg-md-sys-color-secondary-container text-md-sys-color-secondary' },
+    { label: 'Profile', color: 'bg-md-sys-color-tertiary-container text-md-sys-color-tertiary' }
+  ];
+  let destination = $state(0);
+  const runTopLevel = () =>
+    fadeThrough(
+      async () => {
+        destination = (destination + 1) % destinations.length;
+        await tick();
+      },
+      { target: '[data-demo="top"]' }
+    );
+
+  /* Enter and exit — a surface appears and leaves within the same screen. */
+  let popped = $state(true);
+  const pop = new Presence(() => popped);
+  const runEnterExit = () => (popped = !popped);
+
+  /* Skeleton loader — a pulsing placeholder, then the content fades in. */
+  let loaded = $state(false);
+  const content = new Presence(() => loaded);
+  const runSkeleton = () => (loaded = !loaded);
+
+  type Pattern = { id: string; title: string; summary: string; anchor: string; run: () => unknown };
+
+  const patterns = {
+    container: {
+      id: 'container',
+      title: 'Container transform',
+      summary: 'A container morphs into another, crossfading its content.',
+      anchor: 'container-transform',
+      run: runContainer
+    },
+    axis: {
+      id: 'axis',
+      title: 'Forward and backward',
+      summary: 'Content moves along a shared axis between hierarchy levels.',
+      anchor: 'forward-and-backward',
+      run: runAxis
+    },
+    lateral: {
+      id: 'lateral',
+      title: 'Lateral',
+      summary: 'Peer screens slide past each other edge to edge.',
+      anchor: 'lateral',
+      run: runLateral
+    },
+    top: {
+      id: 'top',
+      title: 'Top level',
+      summary: 'Unrelated destinations fade through each other.',
+      anchor: 'top-level',
+      run: runTopLevel
+    },
+    enterExit: {
+      id: 'enter-exit',
+      title: 'Enter and exit',
+      summary: 'Surfaces appear and leave within the current screen.',
+      anchor: 'enter-and-exit',
+      run: runEnterExit
+    },
+    skeleton: {
+      id: 'skeleton',
+      title: 'Skeleton loaders',
+      summary: 'A placeholder pulses until real content fades in.',
+      anchor: 'skeleton-loaders',
+      run: runSkeleton
+    }
+  } satisfies Record<string, Pattern>;
+
+  const all = Object.values(patterns);
+
+  /** Loops `run` while `looping` is on; toggling the loop restarts the interval. */
+  const loop =
+    (run: () => unknown, every = LOOP_MS): Attachment =>
+    () => {
+      if (!looping) return;
+      const id = setInterval(run, every);
+      return () => clearInterval(id);
+    };
+
+  /** Overview: one pattern per tick, round-robin, so view transitions never overlap. */
+  const roundRobin: Attachment = () => {
+    if (!looping) return;
+    let i = 0;
+    const id = setInterval(() => all[i++ % all.length].run(), OVERVIEW_STEP_MS);
+    return () => clearInterval(id);
+  };
+</script>
+
+{#snippet shape(path: string, cls: string)}
+  <svg viewBox="0 0 380 380" class={cls} aria-hidden="true">
+    <path d={path} fill="currentColor" />
+  </svg>
+{/snippet}
+
+{#snippet stage(pattern: Pattern)}
+  {#if pattern.id === 'container'}
+    {#if !expanded}
+      <button
+        type="button"
+        data-demo="ct-card"
+        class="bg-md-sys-color-primary-container text-md-sys-color-on-primary-container absolute top-4 left-4 flex items-center gap-3 rounded-lg p-3"
+        onclick={runContainer}
+      >
+        {@render shape(pathFourSidedCookie, 'size-10 text-md-sys-color-primary')}
+        <span class="md-sys-typescale-label-large">Open</span>
+      </button>
+    {:else}
+      <div
+        data-demo="ct-detail"
+        class="bg-md-sys-color-surface-container-highest text-md-sys-color-on-surface absolute inset-3 flex flex-col items-center justify-center gap-3 rounded-xl"
+      >
+        {@render shape(pathFourSidedCookie, 'size-24 text-md-sys-color-primary')}
+        <span class="md-sys-typescale-title-medium">Detail</span>
+      </div>
+    {/if}
+  {:else if pattern.id === 'axis'}
+    <div data-demo="axis" class="absolute inset-0 flex flex-col items-center justify-center gap-3">
+      {@render shape(
+        pathPentagon,
+        [
+          'size-16 text-md-sys-color-primary',
+          'size-20 text-md-sys-color-secondary',
+          'size-24 text-md-sys-color-tertiary'
+        ][level]
+      )}
+      <span class="md-sys-typescale-title-medium text-md-sys-color-on-surface">
+        {levels.slice(0, level + 1).join(' › ')}
+      </span>
+    </div>
+  {:else if pattern.id === 'lateral'}
+    <div class="absolute inset-x-0 top-0 flex justify-center gap-6 pt-3">
+      {#each tabs as name, i (name)}
+        <span
+          class={[
+            'md-sys-typescale-label-large',
+            i === tab ? 'text-md-sys-color-primary' : 'text-md-sys-color-on-surface-variant'
+          ]}>{name}</span
+        >
+      {/each}
+    </div>
+    <div
+      data-demo="lateral"
+      class="bg-md-sys-color-surface-container absolute inset-x-3 top-11 bottom-3 flex items-center justify-center rounded-lg"
+    >
+      {@render shape(pathFourLeafClover, 'size-24 text-md-sys-color-primary')}
+      <span
+        class="md-sys-typescale-display-small text-md-sys-color-on-primary absolute"
+        aria-hidden="true">{tab + 1}</span
+      >
+    </div>
+  {:else if pattern.id === 'top'}
+    <div
+      data-demo="top"
+      class={[
+        'absolute inset-3 flex flex-col items-center justify-center gap-3 rounded-lg',
+        destinations[destination].color
+      ]}
+    >
+      {@render shape(pathSunny, 'size-24')}
+      <span class="md-sys-typescale-title-medium">{destinations[destination].label}</span>
+    </div>
+  {:else if pattern.id === 'enter-exit'}
+    {#if pop.mounted}
+      <div
+        class="bg-md-sys-color-surface-container-high shadow-elevation-3 absolute inset-x-8 inset-y-6 flex items-center justify-center rounded-xl"
+        {@attach pop.attach(enterExit.scale)}
+      >
+        {@render shape(pathSoftBurst, 'size-24 text-md-sys-color-tertiary')}
+      </div>
+    {/if}
+  {:else if pattern.id === 'skeleton'}
+    <div class="absolute inset-3 grid [&>*]:[grid-area:1/1]">
+      {#if !loaded}
+        <div class="flex flex-col items-center justify-center gap-3" {@attach skeleton}>
+          <div class="bg-md-sys-color-surface-container-highest size-24 rounded-full"></div>
+          <div class="bg-md-sys-color-surface-container-highest h-4 w-28 rounded-full"></div>
+        </div>
+      {/if}
+      {#if content.mounted}
+        <div
+          class="flex flex-col items-center justify-center gap-3"
+          {@attach content.attach(enterExit.fade)}
+        >
+          {@render shape(pathGem, 'size-24 text-md-sys-color-secondary')}
+          <span class="md-sys-typescale-title-medium text-md-sys-color-on-surface">Loaded</span>
+        </div>
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet demo(pattern: Pattern, tall = false)}
+  <section
+    class="bg-md-sys-color-surface-container-low text-md-sys-color-on-surface flex flex-col gap-3 rounded-xl p-4"
+  >
+    <header class="flex items-start justify-between gap-3">
+      <div class="flex flex-col gap-1">
+        <Title size="medium">{pattern.title}</Title>
+        <Body size="small" class="text-md-sys-color-on-surface-variant">{pattern.summary}</Body>
+      </div>
+      <Button variant="tonal" size="sm" onclick={pattern.run}>Replay</Button>
+    </header>
+    <div
+      class={['bg-md-sys-color-surface relative overflow-clip rounded-lg', tall ? 'h-96' : 'h-60']}
+    >
+      {@render stage(pattern)}
+    </div>
+    <a
+      class="text-link md-sys-typescale-label-small self-start"
+      href="https://m3.material.io/styles/motion/transitions/transition-patterns#{pattern.anchor}"
+      target="_blank"
+      rel="noreferrer">M3 spec</a
+    >
+  </section>
+{/snippet}
+
+{#snippet toolbar()}
+  <div class="flex items-center justify-between gap-4">
+    <Title size="large">M3 transition patterns</Title>
+    <Button variant={looping ? 'filled' : 'outlined'} onclick={() => (looping = !looping)}>
+      {looping ? 'Pause loop' : 'Loop'}
+    </Button>
+  </div>
+{/snippet}
+
+<Story name="Overview" asChild>
+  <div class="bg-md-sys-color-surface flex min-h-dvh flex-col gap-6 p-6" {@attach roundRobin}>
+    {@render toolbar()}
+    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+      {#each all as pattern (pattern.id)}
+        {@render demo(pattern)}
+      {/each}
+    </div>
+  </div>
+</Story>
+
+{#snippet single(pattern: Pattern)}
+  <div
+    class="bg-md-sys-color-surface flex min-h-dvh flex-col gap-6 p-6"
+    {@attach loop(pattern.run)}
+  >
+    {@render toolbar()}
+    <div class="mx-auto w-full max-w-xl">
+      {@render demo(pattern, true)}
+    </div>
+  </div>
+{/snippet}
+
+<Story name="Container transform" asChild>{@render single(patterns.container)}</Story>
+<Story name="Forward and backward" asChild>{@render single(patterns.axis)}</Story>
+<Story name="Lateral" asChild>{@render single(patterns.lateral)}</Story>
+<Story name="Top level" asChild>{@render single(patterns.top)}</Story>
+<Story name="Enter and exit" asChild>{@render single(patterns.enterExit)}</Story>
+<Story name="Skeleton loaders" asChild>{@render single(patterns.skeleton)}</Story>

package/dist/animation/TransitionPatterns.stories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TransitionPatterns: import("svelte").Component<Record<string, never>, {}, "">;
+type TransitionPatterns = ReturnType<typeof TransitionPatterns>;
+export default TransitionPatterns;

package/dist/animation/containerTransform.d.ts

@@ -1,13 +1,27 @@
-import type { TransitionConfig } from 'svelte/transition';
-import type { TransitionOptions } from './transitionTypes.js';
-interface ContainerOptions {
-    fallback?: (node: Element, params: TransitionOptions & ContainerOptions & ContainerParamOptions, intro: boolean) => TransitionConfig;
-    bgContainerZ?: number;
-    fgContainerZ?: number;
+import { type ViewTransitionTargetDefinition } from 'motion';
+import { type SpringToken } from './spring.js';
+export interface ContainerTransformOptions {
+    /** The container before the update (e.g. a card). */
+    from: ViewTransitionTargetDefinition;
+    /** The container after the update (e.g. the detail view). Pass a selector if it isn't mounted yet. */
+    to: ViewTransitionTargetDefinition;
+    /** Spring for the bounds/shape morph. `slowSpatial` suits full-screen expansions. */
+    spring?: SpringToken;
 }
-interface ContainerParamOptions {
-    key: string;
-}
-export declare const containerTransform: ({ fallback, ...defaults }: TransitionOptions & ContainerOptions) => ((node: Element, params: TransitionOptions & ContainerOptions & ContainerParamOptions) => () => TransitionConfig)[];
-export declare const parseSize: (size: string) => number;
-export {};
+/**
+ * M3 container transform: one container morphs its bounds, shape and color into another while
+ * the outgoing content fades out and the incoming content fades in on top.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#container-transform
+ *
+ * Built on Motion's `animateView()` (View Transition API), so `from` and `to` never have to be in
+ * the DOM at the same time — `update` swaps one for the other. Browsers without the API just run
+ * `update`. A second call while one is running is queued, not interrupted.
+ *
+ * ```ts
+ * containerTransform(
+ *   async () => { expanded = true; await tick(); },
+ *   { from: cardEl, to: '[data-detail]' }
+ * );
+ * ```
+ */
+export declare const containerTransform: (update: () => void | Promise<void>, { from, to, spring }: ContainerTransformOptions) => import("motion-dom").ViewTransitionBuilder;

package/dist/animation/containerTransform.js

@@ -1,138 +1,22 @@
-import { easeEmphasized } from './easing.js';
-const getBackgroundColor = (node, defaultColor) => {
-    if (!defaultColor) {
-        const tmp = document.createElement('div');
-        document.body.appendChild(tmp);
-        defaultColor = getComputedStyle(tmp).backgroundColor;
-        tmp.remove();
-    }
-    const color = getComputedStyle(node).backgroundColor;
-    if (color != defaultColor)
-        return color;
-    if (node.parentElement)
-        return getBackgroundColor(node.parentElement, defaultColor);
-    return defaultColor;
-};
-const parseColor = (color) => {
-    const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
-    if (match) {
-        const [r, g, b, opacity = 1.0] = match.slice(1, 5).map((val) => val && parseFloat(val));
-        if (typeof r != 'number' ||
-            typeof g != 'number' ||
-            typeof b != 'number' ||
-            typeof opacity != 'number') {
-            throw new Error('something went down in the color parser, see previous info');
-        }
-        return [r, g, b, opacity];
-    }
-    return [0, 0, 0, 0];
-};
-export const containerTransform = ({ fallback, ...defaults }) => {
-    /* This code is based on the crossfade function from Svelte. Svelte is under the MIT license.
-    https://github.com/sveltejs/svelte/blob/master/src/runtime/transition/index.ts
-    If you have an idea for cleaning up this mess of code, please make a PR. */
-    const to_receive = new Map();
-    const to_send = new Map();
-    function calcTransition(from, fromNode, node, params) {
-        const to = node.getBoundingClientRect();
-        const isEntering = from.width * from.height < to.width * to.height;
-        const dx = from.left + from.width / 2 - (to.left + to.width / 2);
-        const dy = from.top - to.top;
-        const style = getComputedStyle(node);
-        const transform = style.transform == 'none' ? '' : style.transform;
-        const opacity = +style.opacity;
-        const bgContainerZ = params.bgContainerZ ?? defaults.bgContainerZ ?? 4;
-        const fgContainerZ = params.fgContainerZ ?? defaults.fgContainerZ ?? 5;
-        let container = {
-            fromColor: parseColor(getBackgroundColor(node)),
-            fromRadius: parseSize(style.borderRadius),
-            fromBorderWidth: parseSize(style.borderLeftWidth),
-            fromBorderColor: parseColor(style.borderLeftColor),
-            toColor: parseColor(getBackgroundColor(fromNode)),
-            toRadius: parseSize(getComputedStyle(fromNode).borderRadius),
-            toBorderWidth: parseSize(getComputedStyle(fromNode).borderLeftWidth),
-            toBorderColor: parseColor(getComputedStyle(fromNode).borderLeftColor)
-        };
-        return {
-            delay: params.delay ?? defaults.delay ?? 0,
-            duration: params.duration ?? defaults.duration ?? 500,
-            easing: params.easing ?? defaults.easing ?? easeEmphasized,
-            css: (t, u) => {
-                const dw = t + u * (from.width / to.width);
-                const dh = t + u * (from.height / to.height);
-                const tOpacity = (isEntering ? (10 * t - 3) / 7 : (-10 / 3) * u + 1) * opacity;
-                const tScale = isEntering ? Math.max(dw, dh) : Math.min(dw, dh);
-                const horizontalTrim = ((tScale - dw) * to.width) / tScale / 2;
-                const verticalTrim = ((tScale - dh) * to.height) / tScale;
-                return `
-					opacity: ${tOpacity};
-					transform-origin: top center;
-					transform: ${transform} translate(${u * dx}px, ${u * dy}px) scale(${tScale});
-					clip-path: inset(0 ${horizontalTrim}px ${verticalTrim}px ${horizontalTrim}px);
-					z-index: ${fgContainerZ};
-					${t < 0.98 ? 'background-color: transparent;' : ''}
-					border-color: transparent;
-					pointer-events: none;
-				`;
-            },
-            tick: (t, u) => {
-                if (!isEntering || !container)
-                    return;
-                if (container.backwards == null)
-                    container.backwards = Boolean(t);
-                if (!container.e) {
-                    container.e = document.createElement('div');
-                    container.e.style.position = 'fixed';
-                    container.e.style.zIndex = bgContainerZ.toString();
-                    container.e.style.boxSizing = 'border-box';
-                    container.e.style.borderStyle = 'solid';
-                    document.body.appendChild(container.e);
-                }
-                else if (t == (container.backwards ? 0 : 1)) {
-                    document.body.removeChild(container.e);
-                    container = null;
-                    return;
-                }
-                if (!container?.e)
-                    return;
-                container.e.style.top = (u * from.top + t * to.top).toFixed(1) + 'px';
-                container.e.style.left = (u * from.left + t * to.left).toFixed(1) + 'px';
-                container.e.style.width = (u * from.width + t * to.width).toFixed(1) + 'px';
-                container.e.style.height = (u * from.height + t * to.height).toFixed(1) + 'px';
-                const { fromColor, fromRadius, fromBorderWidth, fromBorderColor, toColor, toRadius, toBorderWidth, toBorderColor } = container;
-                const interpColor = [0, 0, 0, 0].map((_, i) => Math.trunc(t * fromColor[i] + u * toColor[i]));
-                container.e.style.backgroundColor = `rgba(${interpColor.join(',')})`;
-                container.e.style.borderRadius = (t * fromRadius + u * toRadius).toFixed(1) + 'px';
-                container.e.style.borderWidth = (t * fromBorderWidth + u * toBorderWidth).toFixed(1) + 'px';
-                const interpBorder = [0, 0, 0, 0].map((_, i) => Math.trunc(t * fromBorderColor[i] + u * toBorderColor[i]));
-                container.e.style.borderColor = `rgba(${interpBorder.join(',')})`;
-            }
-        };
-    }
-    function makeTransition(items, counterparts, intro) {
-        return (node, params) => {
-            items.set(params.key, {
-                rect: node.getBoundingClientRect(),
-                node
-            });
-            return () => {
-                const counterpart = counterparts.get(params.key);
-                if (counterpart) {
-                    counterparts.delete(params.key);
-                    return calcTransition(counterpart.rect, counterpart.node, node, params);
-                }
-                // if the node is disappearing altogether
-                // (i.e. wasn't claimed by the other list)
-                // then we need to supply an outro
-                items.delete(params.key);
-                return fallback ? fallback(node, params, intro) : {};
-            };
-        };
-    }
-    return [makeTransition(to_send, to_receive, false), makeTransition(to_receive, to_send, true)];
-};
-export const parseSize = (size) => (size.endsWith('px')
-    ? +size.slice(0, -2)
-    : size.endsWith('rem')
-        ? +size.slice(0, -3) * 16
-        : null) || 0;
+import { animateView } from 'motion';
+import { springTokens, springTransition } from './spring.js';
+/**
+ * M3 container transform: one container morphs its bounds, shape and color into another while
+ * the outgoing content fades out and the incoming content fades in on top.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#container-transform
+ *
+ * Built on Motion's `animateView()` (View Transition API), so `from` and `to` never have to be in
+ * the DOM at the same time — `update` swaps one for the other. Browsers without the API just run
+ * `update`. A second call while one is running is queued, not interrupted.
+ *
+ * ```ts
+ * containerTransform(
+ *   async () => { expanded = true; await tick(); },
+ *   { from: cardEl, to: '[data-detail]' }
+ * );
+ * ```
+ */
+export const containerTransform = (update, { from, to, spring = springTokens.spatial }) => animateView(update, springTransition(spring))
+    .add(from, to)
+    .old({ opacity: [1, 0] }, springTransition(springTokens.fastEffects))
+    .new({ opacity: [0, 1] }, { ...springTransition(springTokens.effects), delay: 0.05 });

package/dist/animation/enterExit.d.ts

@@ -1,3 +1,21 @@
-import type { TransitionConfig } from 'svelte/transition';
-import type { TransitionOptions } from './transitionTypes.js';
-export declare const enterExit: (node: Element, options?: TransitionOptions) => TransitionConfig;
+import type { AnimationOptions, DOMKeyframesDefinition } from 'motion';
+/**
+ * An M3 enter/exit transition for {@link presence} / `Presence`. Keep keyframes to `transform`
+ * and `opacity` so Motion runs them on WAAPI (compositor), which is also what bits-ui's presence
+ * layer detects to delay unmounting.
+ *
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#enter-and-exit
+ */
+export interface PresenceTransition {
+    /** Where the enter animation starts. */
+    hidden: DOMKeyframesDefinition;
+    shown: DOMKeyframesDefinition;
+    /** Where the exit animation ends. Defaults to `hidden`. */
+    exited?: DOMKeyframesDefinition;
+    /** `transform-origin` applied while mounted. */
+    origin?: string;
+    enter: AnimationOptions;
+    exit: AnimationOptions;
+}
+export type EnterExitPreset = 'fade' | 'scale' | 'slideUp' | 'dialog' | 'sideSheet' | 'bottomSheet';
+export declare const enterExit: Record<EnterExitPreset, PresenceTransition>;