[docs] Add ViewTransition demos in the animation guide

docs/package.json

@@ -43,8 +43,8 @@
     "postcss-custom-media": "^12.0.1",
     "postcss-import": "^17.0.0",
     "radix-ui": "^1.6.7",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "react-error-boundary": "6.1.5",
     "react-hook-form": "^7.87.0",
     "remark-gfm": "^4.0.1",
@@ -61,8 +61,8 @@
     "@types/gtag.js": "0.0.20",
     "@types/hast": "3.0.5",
     "@types/node": "22.20.1",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.7",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
     "@types/unist": "3.0.3",
     "cross-env": "10.1.0",
     "mdast-util-mdx-jsx": "3.2.0",

docs/src/app/(docs)/react/handbook/animation/demos/view-transition-list/css-modules/index.css

@@ -0,0 +1,12 @@
+::view-transition-group(*) {
+  animation-duration: 250ms;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none;
+  }
+}

docs/src/app/(docs)/react/handbook/animation/demos/view-transition-list/css-modules/index.module.css

@@ -0,0 +1,142 @@
+.Container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  width: 100%;
+  max-width: 20rem;
+}
+
+.Panel {
+  display: flex;
+  gap: 1px;
+  padding: 1px;
+  border: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+  }
+}
+
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  color: oklch(14.5% 0 0deg);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  -webkit-user-select: none;
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled], [data-pressed]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-pressed] {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
+  }
+
+  @media (hover: hover) {
+    &[data-pressed]:hover:not([data-disabled]) {
+      background-color: oklch(14.5% 0 0deg);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: oklch(14.5% 0 0deg);
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 1px;
+    position: relative;
+    z-index: 1;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
+
+.List {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+  }
+}
+
+.Item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.5rem 0.75rem;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  & + & {
+    border-top: 1px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      border-top: 1px solid white;
+    }
+  }
+}
+
+.Size {
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
+}

docs/src/app/(docs)/react/handbook/animation/demos/view-transition-list/css-modules/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+import * as React from 'react';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import styles from './index.module.css';
+import './index.css';
+
+const files = [
+  { id: 'readme', name: 'README.md', size: 4 },
+  { id: 'package', name: 'package.json', size: 2 },
+  { id: 'index', name: 'index.tsx', size: 12 },
+  { id: 'styles', name: 'styles.css', size: 7 },
+  { id: 'logo', name: 'logo.svg', size: 30 },
+];
+
+type SortKey = 'name' | 'size';
+
+export default function ViewTransitionList() {
+  const [sortKey, setSortKey] = React.useState<SortKey>('name');
+
+  const sortedFiles = [...files].sort((a, b) =>
+    sortKey === 'name' ? a.name.localeCompare(b.name) : a.size - b.size,
+  );
+
+  return (
+    <div className={styles.Container}>
+      <ToggleGroup
+        aria-label="Sort files by"
+        className={styles.Panel}
+        value={[sortKey]}
+        onValueChange={(groupValue: SortKey[]) => {
+          const nextSortKey = groupValue[0];
+          if (nextSortKey) {
+            React.startTransition(() => {
+              setSortKey(nextSortKey);
+            });
+          }
+        }}
+      >
+        <Toggle value="name" className={styles.Button}>
+          Name
+        </Toggle>
+        <Toggle value="size" className={styles.Button}>
+          Size
+        </Toggle>
+      </ToggleGroup>
+      <ul className={styles.List}>
+        {sortedFiles.map((file) => (
+          <React.ViewTransition key={file.id}>
+            <li className={styles.Item}>
+              {file.name}
+              <span className={styles.Size}>{file.size} KB</span>
+            </li>
+          </React.ViewTransition>
+        ))}
+      </ul>
+    </div>
+  );
+}

docs/src/app/(docs)/react/handbook/animation/demos/view-transition-list/index.ts

@@ -0,0 +1,6 @@
+import { createDemoWithVariants } from 'docs/src/utils/createDemo';
+import CssModules from './css-modules';
+
+export const DemoViewTransitionList = createDemoWithVariants(import.meta.url, {
+  CssModules,
+});

docs/src/app/(docs)/react/handbook/animation/demos/view-transition-tabs/css-modules/index.css

@@ -0,0 +1,59 @@
+::view-transition-old(.slide-to-left),
+::view-transition-old(.slide-to-right),
+::view-transition-new(.slide-from-left),
+::view-transition-new(.slide-from-right) {
+  animation-duration: 250ms;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+::view-transition-new(.slide-from-right) {
+  animation-name: slideFromRight;
+}
+
+::view-transition-new(.slide-from-left) {
+  animation-name: slideFromLeft;
+}
+
+::view-transition-old(.slide-to-left) {
+  animation-name: slideToLeft;
+}
+
+::view-transition-old(.slide-to-right) {
+  animation-name: slideToRight;
+}
+
+@keyframes slideFromRight {
+  from {
+    opacity: 0;
+    transform: translateX(1.5rem);
+  }
+}
+
+@keyframes slideFromLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-1.5rem);
+  }
+}
+
+@keyframes slideToLeft {
+  to {
+    opacity: 0;
+    transform: translateX(-1.5rem);
+  }
+}
+
+@keyframes slideToRight {
+  to {
+    opacity: 0;
+    transform: translateX(1.5rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none;
+  }
+}