@passui/react 0.1.17 → 0.1.20

package/src/lib/date.ts

@@ -37,10 +37,7 @@ export type DatePreset = keyof typeof PRESETS
 
 const formatters = new Map<string, Intl.DateTimeFormat>()
 
-function formatter(
-    key: string,
-    options: Intl.DateTimeFormatOptions
-) {
+function formatter(key: string, options: Intl.DateTimeFormatOptions) {
     let cached = formatters.get(key)
     if (!cached) {
         cached = new Intl.DateTimeFormat(LOCALE, options)
@@ -50,10 +47,7 @@ function formatter(
 }
 
 /** A stored UTC timestamp shown as its UTC wall-clock time, whatever the viewer's timezone. */
-export function formatUtc(
-    date: Date | string | number,
-    preset: DatePreset
-) {
+export function formatUtc(date: Date | string | number, preset: DatePreset) {
     return formatter(`utc:${preset}`, {
         ...PRESETS[preset],
         timeZone: "UTC",
@@ -83,14 +77,9 @@ export function fromNow(date: Date | string | number) {
     relative ??= new Intl.RelativeTimeFormat(LOCALE, {
         numeric: "auto",
     })
-    const seconds =
-        (new Date(date).getTime() - Date.now()) / 1000
+    const seconds = (new Date(date).getTime() - Date.now()) / 1000
     for (const [unit, size] of UNITS) {
-        if (Math.abs(seconds) >= size)
-            return relative.format(
-                Math.round(seconds / size),
-                unit
-            )
+        if (Math.abs(seconds) >= size) return relative.format(Math.round(seconds / size), unit)
     }
     return relative.format(0, "second")
 }

package/src/lib/floating-layers.ts

@@ -3,18 +3,12 @@ export const FLOATING_LAYER = "data-floating-layer"
 const anchors = new WeakMap<Element, Element>()
 
 /** Portals retain the ownership of the control that opened them. */
-export function registerFloatingLayer(
-    layer: Element,
-    anchor: Element
-): () => void {
+export function registerFloatingLayer(layer: Element, anchor: Element): () => void {
     anchors.set(layer, anchor)
     return () => anchors.delete(layer)
 }
 
-export function ownsFloatingLayer(
-    container: Element,
-    target: Element | null
-): boolean {
+export function ownsFloatingLayer(container: Element, target: Element | null): boolean {
     let layer = target?.closest(`[${FLOATING_LAYER}]`)
     const visited = new Set<Element>()
     while (layer && !visited.has(layer)) {
@@ -26,3 +20,19 @@ export function ownsFloatingLayer(
     }
     return false
 }
+
+/** An element belongs to a surface either directly or through a portaled child layer. */
+export function belongsToFloatingSurface(surface: Element, target: Element | null): boolean {
+    return Boolean(target && (surface.contains(target) || ownsFloatingLayer(surface, target)))
+}
+
+/** Whether a pointer target is outside both an anchored surface and its nested portals. */
+export function isOutsideFloatingSurface(
+    surface: Element | null,
+    anchor: Element,
+    target: EventTarget | null
+): boolean {
+    if (!target || !("closest" in target) || !("contains" in target)) return false
+    const element = target as Element
+    return !anchor.contains(element) && (!surface || !belongsToFloatingSurface(surface, element))
+}

package/src/lib/haptics.ts

@@ -14,9 +14,7 @@ let player: (kind: HapticKind) => void = () => {}
  * Components only ask for feedback; the app decides how it plays on this
  * device (system haptics, a vibration, or nothing) and whether it's on.
  */
-export function setHapticPlayer(
-    next: (kind: HapticKind) => void
-): void {
+export function setHapticPlayer(next: (kind: HapticKind) => void): void {
     player = next
 }
 

package/src/lib/language.ts

@@ -3,16 +3,11 @@ export function getNativeLanguageName(tag: string) {
     const name = new Intl.DisplayNames([tag], {
         type: "language",
     }).of(tag)
-    return name
-        ? name.charAt(0).toUpperCase() + name.slice(1)
-        : tag
+    return name ? name.charAt(0).toUpperCase() + name.slice(1) : tag
 }
 
 /** A language's name as read in `displayLocale`: "French" in English. */
-export function getLocalizedLanguageName(
-    tag: string,
-    displayLocale: string
-) {
+export function getLocalizedLanguageName(tag: string, displayLocale: string) {
     return (
         new Intl.DisplayNames([displayLocale], {
             type: "language",

package/src/lib/range-value.ts

@@ -0,0 +1,32 @@
+/** Keep controlled numeric inputs within finite bounds without floating-point drift. */
+export function clampRange(value: number, min: number, max: number): number {
+    if (!Number.isFinite(value)) return min
+    return Math.min(max, Math.max(min, value))
+}
+
+/** The nearest reachable step from min, optionally allowing an exact maximum. */
+export function stepRange(
+    value: number,
+    direction: -1 | 1,
+    min: number,
+    max: number,
+    step: number
+): number {
+    const precision = Math.min(12, Math.max(0, ...[min, max, step].map(decimalPlaces)))
+    const factor = 10 ** precision
+    const low = Math.round(min * factor)
+    const high = Math.round(max * factor)
+    const increment = Math.max(1, Math.round(step * factor))
+    const current = Math.round(clampRange(value, min, max) * factor)
+    const next =
+        direction > 0
+            ? low + (Math.floor((current - low) / increment) + 1) * increment
+            : low + (Math.ceil((current - low) / increment) - 1) * increment
+    return clampRange(Math.min(high, Math.max(low, next)) / factor, min, max)
+}
+
+function decimalPlaces(value: number): number {
+    const text = String(value)
+    const [mantissa, exponent] = text.toLowerCase().split("e")
+    return Math.max(0, (mantissa?.split(".")[1]?.length ?? 0) - Number(exponent ?? 0))
+}

package/src/lib/screen-edges.ts

@@ -14,10 +14,7 @@ let probe: HTMLDivElement | undefined
  */
 export function screenEdges(): ScreenEdges {
     const margin =
-        typeof window !== "undefined" &&
-        window.matchMedia("(pointer: coarse)").matches
-            ? 12
-            : 8
+        typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches ? 12 : 8
     if (typeof document === "undefined") {
         return {
             top: margin,
@@ -38,8 +35,7 @@ export function screenEdges(): ScreenEdges {
     return {
         top: Number.parseFloat(style.paddingTop) + margin,
         right: Number.parseFloat(style.paddingRight) + margin,
-        bottom:
-            Number.parseFloat(style.paddingBottom) + margin,
+        bottom: Number.parseFloat(style.paddingBottom) + margin,
         left: Number.parseFloat(style.paddingLeft) + margin,
     }
 }

package/src/lib/shapes.ts

@@ -13,10 +13,7 @@ export const shapes = [
 export type Shape = (typeof shapes)[number]
 
 /** Lobe count and wave depth (as a fraction of the radius) for each wavy shape. */
-const waves: Record<
-    Exclude<Shape, "circle">,
-    { lobes: number; depth: number }
-> = {
+const waves: Record<Exclude<Shape, "circle">, { lobes: number; depth: number }> = {
     cookie4: { lobes: 4, depth: 0.08 },
     cookie6: { lobes: 6, depth: 0.07 },
     cookie9: { lobes: 9, depth: 0.055 },
@@ -33,12 +30,7 @@ const STEPS = 144
  * "clover", and "sunny" outlines. The wave is normalised so every shape fills
  * the same `r`, keeping icons optically the same size.
  */
-export function shapePath(
-    shape: Shape,
-    cx: number,
-    cy: number,
-    r: number
-) {
+export function shapePath(shape: Shape, cx: number, cy: number, r: number) {
     if (shape === "circle") {
         return `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0 Z`
     }
@@ -48,16 +40,10 @@ export function shapePath(
     const points: string[] = []
     for (let i = 0; i < STEPS; i++) {
         const theta = (i / STEPS) * Math.PI * 2 - Math.PI / 2
-        const radius =
-            base *
-            (1 +
-                depth *
-                    Math.cos(lobes * (theta + Math.PI / 2)))
+        const radius = base * (1 + depth * Math.cos(lobes * (theta + Math.PI / 2)))
         const x = cx + radius * Math.cos(theta)
         const y = cy + radius * Math.sin(theta)
-        points.push(
-            `${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`
-        )
+        points.push(`${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`)
     }
     return `${points.join(" ")} Z`
 }
@@ -66,5 +52,4 @@ export function shapePath(
  * The app wide `dualTone` rule dims every svg path for two tone icons; a
  * drawn shape or illustration opts out with this so its colors stay true.
  */
-export const plainSvg =
-    "cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none"
+export const plainSvg = "cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none"

package/src/motion/transitions.ts

@@ -8,18 +8,24 @@ export const spring = {
     bouncy: { type: "spring", ...springs.bouncy },
 } as const satisfies Record<keyof typeof springs, Transition>
 
-/** Menus, popovers and floating toolbars: grow from their anchor. */
-export const popoverMotion = {
-    initial: { opacity: 0, scale: 0.94, y: -6 },
-    animate: { opacity: 1, scale: 1, y: 0 },
-    exit: {
-        opacity: 0,
-        scale: 0.97,
-        y: -4,
-        transition: spring.snappy,
-    },
-    transition: spring.snappy,
-} as const
+export type FloatingPanelSide = "above" | "below"
+
+/** Anchored panels settle toward their source without shrinking their text. */
+export function floatingPanelMotion(side: FloatingPanelSide = "below") {
+    const direction = side === "above" ? 1 : -1
+    return {
+        initial: { opacity: 0, scale: 1, y: direction * 6 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 1, y: direction * 4 },
+        transition: {
+            ...spring.smooth,
+            opacity: { duration: 0.16 },
+        },
+    } as const
+}
+
+/** Default below-anchor presentation, retained for existing consumers. */
+export const popoverMotion = floatingPanelMotion()
 
 /** Floating bars that rise from the bottom edge. */
 export const riseMotion = {

package/src/styles/code-block.css

@@ -0,0 +1,33 @@
+@layer components {
+    .passui-code-block pre {
+        margin: 0;
+        padding-block: 1rem;
+        padding-inline-end: 1.5rem;
+        overflow-x: auto;
+        font-family: var(--font-mono);
+        font-size: var(--text-footnote);
+        line-height: 1.75;
+        color: var(--color-label);
+        background: transparent !important;
+        counter-reset: code-line;
+        tab-size: 4;
+    }
+    .passui-code-block .line { display: inline-block; min-width: 100%; }
+    .passui-code-block[data-line-numbers] .line::before {
+        counter-increment: code-line;
+        content: counter(code-line);
+        display: inline-block;
+        width: 3rem;
+        margin-inline-end: 1.25rem;
+        color: var(--color-label-tertiary);
+        text-align: end;
+        user-select: none;
+    }
+    .passui-code-block:not([data-line-numbers]) pre { padding-inline-start: 1rem; }
+    .passui-code-block .shiki, .passui-code-block .shiki span { color: var(--shiki-light); background: transparent !important; }
+    @media (prefers-color-scheme: dark) {
+        .passui-code-block .shiki, .passui-code-block .shiki span { color: var(--shiki-dark); }
+    }
+    [data-theme="light"] .passui-code-block .shiki, [data-theme="light"] .passui-code-block .shiki span { color: var(--shiki-light); }
+    [data-theme="dark"] .passui-code-block .shiki, [data-theme="dark"] .passui-code-block .shiki span { color: var(--shiki-dark); }
+}

package/src/styles/motion-controls.css

@@ -0,0 +1,189 @@
+/* Slosh and Wake adapted from Bencho; see THIRD_PARTY_NOTICES.md.
+   Bencho ink/fill-on map to label; board/fill-slab to elevated; bg to
+   background; pane-edge to separator; font-ui to font-sans. Color mixes
+   replace rgba RGB triples, so no Bencho variables or new globals leak. */
+@layer components {
+    .passui-search-pill { transition: scale 90ms ease; }
+    .passui-search-pill:active { scale: 0.98; }
+    /* The outline stays whole; its legend opens a real gap under the label.
+       No painted background patch needs to match the field's surroundings. */
+    .passui-field-outline {
+        position: absolute;
+        inset: -0.45em 0 0;
+        min-width: 0;
+        margin: 0;
+        padding: 0 0.5rem;
+        border: 1px solid var(--color-separator);
+        border-radius: inherit;
+        pointer-events: none;
+        transition: border-color 200ms ease;
+    }
+    .passui-field-outline legend {
+        max-width: 0;
+        overflow: hidden;
+        padding: 0;
+        font-size: var(--text-footnote);
+        white-space: nowrap;
+        visibility: hidden;
+        transition: max-width 320ms ease, padding 320ms ease;
+    }
+    .passui-floating-label {
+        position: absolute;
+        inset-inline-start: 0.75rem;
+        top: 50%;
+        z-index: 1;
+        max-width: calc(100% - 1.5rem);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--color-label-secondary);
+        font-size: var(--text-body);
+        transform: translateY(-50%);
+        transform-origin: left center;
+        transition: top 320ms ease, transform 320ms ease, color 200ms ease;
+        pointer-events: none;
+    }
+    .passui-floating-label:dir(rtl) { transform-origin: right center; }
+    .passui-floating-label-with-icon { inset-inline-start: 2.5rem; }
+    .passui-floating-field input::placeholder { opacity: 0; }
+    .passui-floating-field:focus-within input::placeholder { opacity: 1; }
+    .passui-floating-field:focus-within .passui-field-outline { border-color: var(--color-label); }
+    .passui-floating-field:has(input[aria-invalid="true"]) .passui-field-outline { border-color: var(--color-danger); }
+    .passui-floating-field:is(:focus-within, :has(input:not(:placeholder-shown))) .passui-floating-label {
+        top: 0;
+        inset-inline-start: 0.75rem;
+        transform: translateY(-50%) scale(0.78);
+        color: var(--color-label);
+    }
+    .passui-floating-field:is(:focus-within, :has(input:not(:placeholder-shown))) legend {
+        max-width: 100%;
+        padding-inline: 0.25rem;
+    }
+    .passui-one-time-code { width: 100%; max-width: calc(var(--otp-length) * 2.5rem + (var(--otp-length) - 1) * 0.5rem); }
+    .passui-otp-row { position: relative; height: 3rem; }
+    .passui-otp-materials, .passui-otp-digits { display: flex; position: absolute; inset: 0; gap: 0.5rem; pointer-events: none; }
+    .passui-otp-cell, .passui-otp-digit { flex: 1; min-width: 0; border-radius: var(--radius-xl); }
+    .passui-otp-cell {
+        background: var(--color-fill);
+        transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms;
+    }
+    .passui-otp-digit { display: grid; place-items: center; font-size: var(--text-title3); color: var(--color-label); font-variant-numeric: tabular-nums; }
+    .passui-otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: text; }
+    .passui-one-time-code:focus-within .passui-otp-digit[data-active] { box-shadow: inset 0 0 0 2px var(--color-accent-text); }
+    .passui-otp-glyph { animation: passui-otp-in 200ms ease-out both; }
+    @keyframes passui-otp-in { from { transform: translateY(45%) scale(0.86); opacity: 0; filter: blur(3px); } }
+    .passui-otp-capsule { position: absolute; inset-block: 0; left: 50%; width: 60%; border-radius: var(--radius-full); background: var(--color-accent); transform: translateX(-50%) scaleX(0); opacity: 0; transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms; }
+    .passui-one-time-code:is([data-status="verifying"], [data-status="success"]) .passui-otp-cell { transform: translateX(calc((var(--otp-middle) - var(--otp-index)) * (100% + 0.5rem))); background: var(--color-accent); }
+    .passui-one-time-code:is([data-status="verifying"], [data-status="success"]) .passui-otp-capsule { opacity: 1; transform: translateX(-50%) scaleX(1); }
+    .passui-one-time-code:is([data-status="verifying"], [data-status="success"]) .passui-otp-digits { opacity: 0; }
+    .passui-otp-check { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--color-on-accent); opacity: 0; pointer-events: none; }
+    .passui-one-time-code[data-status="success"] .passui-otp-check { opacity: 1; transition: opacity 160ms 240ms; }
+    /* A wrong code shivers, then drains right to left. Selecting the single
+       input afterward lets the next keystroke replace it without a trap. */
+    .passui-one-time-code[data-status="error"] .passui-otp-digit { animation: passui-otp-shiver 380ms ease-out; }
+    .passui-one-time-code[data-status="error"] .passui-otp-glyph { animation: passui-otp-drain 220ms calc(380ms + (var(--otp-length) - var(--otp-index)) * 35ms) both; }
+    @keyframes passui-otp-shiver { 20% { transform: translateX(4px); } 40% { transform: translateX(-3px); } 60% { transform: translateX(2px); } 80% { transform: translateX(-1px); } }
+    @keyframes passui-otp-drain { to { transform: translateY(65%); opacity: 0; filter: blur(3px); } }
+    .passui-progress-fill {
+        clip-path: polygon(0 0, calc(100% + var(--progress-lean, 0px)) 0,
+            calc(100% - var(--progress-lean, 0px)) 100%, 0 100%);
+    }
+    .passui-slosh-slider {
+        width: 100%;
+        min-width: 0;
+        font-family: var(--font-sans);
+        color: var(--color-label);
+    }
+
+    /* No transitions: every geometry value is written by the loop, and
+       a transition on top of a spring is two opinions about one number. */
+    .passui-slosh-track {
+        position: relative;
+        height: 2.5rem;
+        border-radius: var(--slosh-radius, var(--radius-full));
+        /* Opaque, mixed from the surface's own pair. A translucent wash
+           changes with the stage behind it and can disappear in dark mode. */
+        background: color-mix(in srgb, var(--color-label) 11%, var(--color-elevated));
+        overflow: hidden;
+        cursor: ew-resize;
+        touch-action: pan-y;
+    }
+    .passui-slosh-track[aria-disabled="true"],
+    .passui-wake-track[aria-disabled="true"] { cursor: not-allowed; }
+    .passui-slosh-track:focus-visible,
+    .passui-wake-track:focus-visible {
+        outline: 2px solid var(--color-accent-text);
+        outline-offset: 4px;
+    }
+    .passui-slosh-fill {
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 0;
+        background: light-dark(var(--color-elevated), color-mix(in srgb, var(--color-label) 15%, var(--color-elevated)));
+        /* Clipped, never skewed: a skew lifts the whole body off the floor;
+           a meniscus leans only the moving edge. The track clips end stops. */
+        clip-path: polygon(0 0, calc(100% + var(--slosh-lean, 0px)) 0,
+            calc(100% - var(--slosh-lean, 0px)) 100%, 0 100%);
+    }
+    .passui-slosh-track:dir(rtl) .passui-slosh-fill { transform: scaleX(-1); }
+    .passui-slosh-knob {
+        position: absolute;
+        top: 6px;
+        bottom: 6px;
+        width: 3px;
+        margin-inline-start: -1.5px;
+        border-radius: var(--radius-full);
+        background: var(--color-label);
+        pointer-events: none;
+    }
+    /* Each bar holds energy. Its height is written directly, while React
+       owns the value and lit marks. No standing animation runs at rest. */
+    .passui-wake-slider {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        width: 100%;
+        min-width: 0;
+        color: var(--color-label);
+    }
+    .passui-wake-track {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        align-items: center;
+        justify-content: space-between;
+        gap: min(4px, calc(25% / var(--wake-bars, 36)));
+        cursor: ew-resize;
+        touch-action: pan-y;
+        user-select: none;
+        -webkit-user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        border-radius: var(--radius-sm);
+    }
+    .passui-wake-bar {
+        flex: 1 1 3px;
+        max-width: 3px;
+        min-width: 0;
+        border-radius: var(--radius-full);
+        background: color-mix(in srgb, var(--color-label) 24%, var(--color-elevated));
+        transform-origin: 50% 50%;
+        transition: background-color 160ms ease;
+    }
+    .passui-wake-bar[data-on] { background: var(--color-label); }
+    .passui-wake-value {
+        min-width: 3ch;
+        font-family: var(--font-sans);
+        font-size: var(--text-footnote);
+        font-weight: 500;
+        font-variant-numeric: tabular-nums;
+        color: var(--color-label-secondary);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .passui-wake-bar, .passui-search-pill { transition: none; }
+        .passui-search-pill:active { scale: 1; }
+        .passui-floating-label, .passui-field-outline, .passui-field-outline legend,
+        .passui-otp-cell, .passui-otp-capsule, .passui-otp-check { transition: none; }
+        .passui-otp-glyph, .passui-otp-digit { animation: none !important; }
+        .passui-otp-materials { filter: none !important; }
+    }
+}

package/src/styles/styles.css

@@ -1,3 +1,6 @@
 @import "@passui/tokens/styles.css";
 
 @source "../";
+@import "./code-block.css";
+
+@import "./motion-controls.css";

package/src/components/ambient/ambient.docs.tsx

@@ -1,68 +0,0 @@
-import { AmbientNowPlaying } from "./examples/ambient-now-playing"
-import { Ambient } from "./ambient"
-import { defineDocs } from "../../docs/types"
-import { AmbientImages } from "./examples/ambient-images"
-import { AmbientShowcase } from "./examples/ambient-showcase"
-import { AmbientUsage } from "./examples/ambient-usage"
-
-// src is any image URL; the playground offers the three sample images.
-type DemoProps = {
-    image: "aiko" | "kenji" | "mira" | "none"
-}
-
-export const ambientDocs = defineDocs<DemoProps>()({
-    slug: "ambient",
-    name: "Ambient",
-    importPath: "@passui/react/ambient",
-    controls: {
-        image: {
-            kind: "select",
-            options: {
-                aiko: true,
-                kenji: true,
-                mira: true,
-                none: true,
-            },
-            default: "aiko",
-        },
-    },
-    render: ({ image }) => (
-        <Ambient
-            key={image}
-            src={
-                image === "none"
-                    ? undefined
-                    : `/avatars/${image}.svg`
-            }
-            className="flex w-72 flex-col items-center gap-3 py-12 text-center"
-        >
-            <img
-                src={
-                    image === "none"
-                        ? "/avatars/aiko.svg"
-                        : `/avatars/${image}.svg`
-                }
-                alt=""
-                className="size-24 rounded-3xl shadow-sm"
-            />
-            <p className="text-headline font-semibold text-label">
-                Now playing
-            </p>
-        </Ambient>
-    ),
-    childrenSnippet: ({ image }) => ({
-        imports: [],
-        omit: ["image"],
-        extraProps:
-            image === "none"
-                ? undefined
-                : { src: `/avatars/${image}.svg` },
-        children: `\n    <img src="/avatars/${image === "none" ? "aiko" : image}.svg" alt="" />\n`,
-    }),
-    usage: AmbientUsage,
-    showcase: AmbientShowcase,
-    examples: [
-        { id: "images", component: AmbientImages },
-        { id: "now-playing", component: AmbientNowPlaying },
-    ],
-})

package/src/components/ambient/examples/ambient-images.tsx

@@ -1,30 +0,0 @@
-import { Ambient } from "@passui/react/ambient"
-
-const people = [
-    { name: "Aiko", src: "/avatars/aiko.svg" },
-    { name: "Kenji", src: "/avatars/kenji.svg" },
-    { name: "Mira", src: "/avatars/mira.svg" },
-]
-
-export function AmbientImages() {
-    return (
-        <div className="grid w-full max-w-xl grid-cols-3 gap-2">
-            {people.map((person) => (
-                <Ambient
-                    key={person.name}
-                    src={person.src}
-                    className="flex flex-col items-center gap-2 py-8"
-                >
-                    <img
-                        src={person.src}
-                        alt=""
-                        className="size-14 rounded-full"
-                    />
-                    <span className="text-subheadline font-medium text-label">
-                        {person.name}
-                    </span>
-                </Ambient>
-            ))}
-        </div>
-    )
-}

package/src/components/ambient/examples/ambient-now-playing.tsx

@@ -1,55 +0,0 @@
-import {
-    PauseIcon,
-    NextIcon,
-    PreviousIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { Ambient } from "@passui/react/ambient"
-import { IconButton } from "@passui/react/icon-button"
-
-export function AmbientNowPlaying() {
-    return (
-        <Ambient
-            src="/avatars/kenji.svg"
-            className="flex w-full max-w-xs flex-col items-center gap-4 py-10 text-center"
-        >
-            <img
-                src="/avatars/kenji.svg"
-                alt=""
-                className="size-40 rounded-4xl shadow-sm"
-            />
-            <div className="flex flex-col">
-                <span className="text-headline font-semibold text-label">
-                    Morning Light
-                </span>
-                <span className="text-footnote text-label-secondary">
-                    Kenji Mori
-                </span>
-            </div>
-            <div className="flex items-center gap-2">
-                <IconButton label="Previous" variant="ghost">
-                    <HugeiconsIcon
-                        icon={PreviousIcon}
-                        size={22}
-                    />
-                </IconButton>
-                <IconButton
-                    label="Pause"
-                    variant="secondary"
-                    size="icon-lg"
-                >
-                    <HugeiconsIcon
-                        icon={PauseIcon}
-                        size={24}
-                    />
-                </IconButton>
-                <IconButton label="Next" variant="ghost">
-                    <HugeiconsIcon
-                        icon={NextIcon}
-                        size={22}
-                    />
-                </IconButton>
-            </div>
-        </Ambient>
-    )
-}