shelving/ui/transition/Transition.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
/// <reference types="react/canary" />
import { ViewTransition } from "react";
import { getClass } from "../util/css.js";
import "./Transition.css";
/**
 * Create a View Transition for children of this component.
 *
 * - Allows known view transition types in `TransitionClasses` to be set to override.
 *   - These must correspond to a `::view-transition(.className)` that is set in CSS.
 *
 * - Supports variant classes, e.g. `<Transition overlay>` applies `::view-transition(.overlay)` from `Transition.css`
 */
export function Transition({ children, default: d, forward = d, back = d, ...variants }) {
    const classes = {
        default: getClass(d, variants),
        forward: getClass(forward, variants),
        back: getClass(back, variants),
    };
    return _jsx(ViewTransition, { default: classes, children: children });
}