[fullscreen] Create the Fullscreen component

docs/src/app/(docs)/react/components/fullscreen/demos/detached-trigger/css-modules/index.module.css

@@ -0,0 +1,110 @@
+.Layout {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 18rem;
+}
+
+.Header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0 0.125rem;
+}
+
+.Label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  color: var(--color-gray-700);
+}
+
+.LabelDot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--color-blue);
+}
+
+.Container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.5rem;
+  background-color: var(--color-gray-50);
+  background-image: radial-gradient(circle at 50% 30%, var(--color-gray-100) 0%, transparent 70%);
+  color: var(--color-gray-900);
+  overflow: hidden;
+}
+
+.Container[data-fullscreen] {
+  width: 100vw;
+  height: 100vh;
+  aspect-ratio: auto;
+  border-radius: 0;
+  border-color: transparent;
+}
+
+.Trigger,
+.Close {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2rem;
+  margin: 0;
+  padding: 0 0.625rem;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  color: var(--color-gray-900);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.Trigger[data-fullscreen] {
+  display: none;
+}
+
+.Close {
+  position: absolute;
+  top: 0.625rem;
+  right: 0.625rem;
+}
+
+.Close[data-not-fullscreen] {
+  display: none;
+}

docs/src/app/(docs)/react/components/fullscreen/demos/detached-trigger/css-modules/index.tsx

@@ -0,0 +1,48 @@
+'use client';
+import * as React from 'react';
+import { Fullscreen } from '@base-ui/react/fullscreen';
+import styles from './index.module.css';
+
+const playerFullscreen = Fullscreen.createHandle();
+
+export default function ExampleFullscreenDetached() {
+  return (
+    <div className={styles.Layout}>
+      <header className={styles.Header}>
+        <p className={styles.Label}>
+          <span className={styles.LabelDot} aria-hidden="true" />
+          Camera 01
+        </p>
+        <Fullscreen.Trigger className={styles.Trigger} handle={playerFullscreen}>
+          <ExpandIcon />
+          Enter fullscreen
+        </Fullscreen.Trigger>
+      </header>
+
+      <Fullscreen.Root handle={playerFullscreen}>
+        <Fullscreen.Container className={styles.Container}>
+          <Fullscreen.Close className={styles.Close}>
+            <CloseIcon />
+            Close
+          </Fullscreen.Close>
+        </Fullscreen.Container>
+      </Fullscreen.Root>
+    </div>
+  );
+}
+
+function ExpandIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
+      <path d="M2 5V2H5M10 7V10H7M5 10H2V7M7 2H10V5" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  );
+}
+
+function CloseIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
+      <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  );
+}

docs/src/app/(docs)/react/components/fullscreen/demos/detached-trigger/index.ts

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

docs/src/app/(docs)/react/components/fullscreen/demos/detached-trigger/tailwind/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+import * as React from 'react';
+import { Fullscreen } from '@base-ui/react/fullscreen';
+
+const playerFullscreen = Fullscreen.createHandle();
+
+export default function ExampleFullscreenDetached() {
+  return (
+    <div className="flex w-72 flex-col gap-2">
+      <header className="flex items-center justify-between gap-3 px-0.5">
+        <p className="m-0 inline-flex items-center gap-2 text-[13px] leading-5 font-medium text-gray-700">
+          <span className="size-2 rounded-full bg-blue-800" aria-hidden="true" />
+          Camera 01
+        </p>
+        <Fullscreen.Trigger
+          className="inline-flex h-8 items-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-2.5 text-[13px] font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[fullscreen]:hidden"
+          handle={playerFullscreen}
+        >
+          <ExpandIcon />
+          Enter fullscreen
+        </Fullscreen.Trigger>
+      </header>
+
+      <Fullscreen.Root handle={playerFullscreen}>
+        <Fullscreen.Container className="relative flex aspect-[16/10] w-full items-center justify-center overflow-hidden rounded-lg border border-gray-200 bg-gray-50 bg-[radial-gradient(circle_at_50%_30%,var(--color-gray-100)_0%,transparent_70%)] text-gray-900 data-[fullscreen]:aspect-auto data-[fullscreen]:h-screen data-[fullscreen]:w-screen data-[fullscreen]:rounded-none data-[fullscreen]:border-transparent">
+          <span className="flex items-center gap-2 text-sm leading-5 text-gray-600">
+            Live broadcast
+          </span>
+          <Fullscreen.Close className="absolute top-2.5 right-2.5 inline-flex h-8 items-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-2.5 text-[13px] font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[not-fullscreen]:hidden">
+            <CloseIcon />
+            Close
+          </Fullscreen.Close>
+        </Fullscreen.Container>
+      </Fullscreen.Root>
+    </div>
+  );
+}
+
+function ExpandIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
+      <path d="M2 5V2H5M10 7V10H7M5 10H2V7M7 2H10V5" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  );
+}
+
+function CloseIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
+      <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  );
+}

docs/src/app/(docs)/react/components/fullscreen/demos/hero/css-modules/index.module.css

@@ -0,0 +1,115 @@
+.Container {
+  position: relative;
+  display: flex;
+  width: 18rem;
+  aspect-ratio: 16 / 10;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.5rem;
+  background-color: var(--color-gray-50);
+  background-image: radial-gradient(circle at 50% 30%, var(--color-gray-100) 0%, transparent 70%);
+  color: var(--color-gray-900);
+  overflow: hidden;
+}
+
+.Container[data-fullscreen] {
+  width: 100vw;
+  height: 100vh;
+  aspect-ratio: auto;
+  border-radius: 0;
+  border-color: transparent;
+}
+
+.Caption {
+  position: absolute;
+  top: 0.625rem;
+  left: 0.75rem;
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--color-gray-500);
+}
+
+.Caption[data-fullscreen] {
+  display: none;
+}
+
+.Content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.9375rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+}
+
+.ContentDot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--color-blue);
+}
+
+.Trigger,
+.Close {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2rem;
+  margin: 0;
+  padding: 0 0.625rem;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  color: var(--color-gray-900);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.Trigger {
+  position: absolute;
+  bottom: 0.625rem;
+  right: 0.625rem;
+}
+
+.Trigger[data-fullscreen] {
+  display: none;
+}
+
+.Close {
+  position: absolute;
+  top: 0.625rem;
+  right: 0.625rem;
+}
+
+.Close[data-not-fullscreen] {
+  display: none;
+}

docs/src/app/(docs)/react/components/fullscreen/demos/hero/css-modules/index.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Fullscreen } from '@base-ui/react/fullscreen';
+import styles from './index.module.css';
+
+export default function ExampleFullscreen() {
+  return (
+    <Fullscreen.Root>
+      <Fullscreen.Container className={styles.Container}>
+        <p className={styles.Caption}>Preview</p>
+        <span className={styles.Content}>
+          <span className={styles.ContentDot} aria-hidden="true" />
+          Live broadcast
+        </span>
+
+        <Fullscreen.Trigger className={styles.Trigger}>
+          <ExpandIcon />
+          Enter fullscreen
+        </Fullscreen.Trigger>
+        <Fullscreen.Close className={styles.Close}>
+          <CloseIcon />
+          Close
+        </Fullscreen.Close>
+      </Fullscreen.Container>
+    </Fullscreen.Root>
+  );
+}
+
+function ExpandIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
+      <path d="M2 5V2H5M10 7V10H7M5 10H2V7M7 2H10V5" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  );
+}
+
+function CloseIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
+      <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  );
+}

docs/src/app/(docs)/react/components/fullscreen/demos/hero/index.ts

@@ -0,0 +1,9 @@
+import { createDemoWithVariants } from 'docs/src/utils/createDemo';
+import CssModules from './css-modules';
+import Tailwind from './tailwind';
+
+export const DemoFullscreenHero = createDemoWithVariants(
+  import.meta.url,
+  { CssModules, Tailwind },
+  { highlightAfter: 'init', enhanceAfter: 'init' },
+);