50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2f8a,"use client"; import { forwardRef, useState } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { Portal } from "../../internals/Portal"; import { useDismissable } from "../../internals/dismissable"; import { useFocusTrap } from "../../internals/focus-trap"; import { useScrollLock } from "../../internals/scroll-lock"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useElementRef } from "../../internals/dom/use-element-ref"; import { useFancyId } from "../../internals/use-id"; import { anchored, prefersReducedMotion } from "../../internals/motion/anchored"; import { DURATIONS, JS_EASINGS } from "../../internals/motion/tokens"; import { usePresence } from "../../internals/motion/presence"; import { useSoundCue } from "../../sound/use-sound"; import type { TransitionSpec } from "../../internals/motion/transitions"; export type SheetSide = "left" | "right" | "top" | "bottom"; export type SheetSize = "sm" | "md" | "lg"; export interface SheetProps { /** Whether the sheet is open. Controlled when given; the component keeps its own copy either way. */ open?: boolean; /** Called with the new value whenever the sheet opens or closes. */ onOpenChange?: (open: boolean) => void; /** Edge of the viewport the panel slides in from. */ side?: SheetSide; /** Heading rendered in the header and wired to `aria-labelledby`. */ title?: string; /** Supporting text under the title, wired to `aria-describedby`. */ description?: string; /** Whether Escape, the scrim and the close button can close the sheet. */ dismissible?: boolean; /** Panel width (left/right sides) or height (top/bottom sides). */ size?: SheetSize; /** Panel body content. */ children?: ReactNode; /** Content pinned below the body, e.g. actions. */ footer?: ReactNode; /** * The panel's `id`. A trigger the caller renders outside the component * points its `aria-controls` at it while the panel is open. */ id?: string; /** Additional CSS classes merged onto the panel. */ className?: string; /** * Accessible name for the panel when there is no `title`. A modal dialog * must be named, and `aria-labelledby` can only point at a rendered * heading — pass this when the header is built from `children` instead. * Ignored once `title` is set, since `aria-labelledby` already supplies * the name. */ ariaLabel?: string; /** * Plays the `close` cue through the sound controller when the sheet is * dismissed. Off by default; only audible once the user has enabled * sound. */ sound?: boolean; } // The one place this component owns motion. Not `anchored`: that helper is // scale+opacity by design and deliberately carries no translate term, and a // sheet's whole gesture is travel. Not a pixel-distance preset either — a // sheet has to clear its own edge whatever its size, which only `%` // expresses. // // The exit does NOT halve its travel the way the scale rung does. A sheet // that slid half-way off the viewport and then vanished would read worse // than one that simply leaves; it is a named exception to the half-delta // exit rule rather than an oversight. function edgeSlide( _node: Element, params?: { side: SheetSide; entering: boolean } ): TransitionSpec { const reduced = prefersReducedMotion(); const entering = params?.entering ?? false; const side = params?.side ?? "right"; const axis = side === "left" || side === "right" ? "X" : "Y"; const sign = side === "left" || side === "top" ? -1 : 1; return { delay: 0, // Reduced motion collapses this to 0, which makes `runTransition` // finish synchronously and never touch `element.animate()` — so the // close is exactly as synchronous as it was before the sheet animated // out at all. duration: reduced ? 0 : entering ? DURATIONS.base : DURATIONS.exit, easing: entering ? JS_EASINGS.out : JS_EASINGS.in, // `u = 1 - t`: fully out at t=0, resting at t=1. No opacity term — a // sheet leaves by travelling, and fading it as well reads as two // gestures fighting. css: (_t, u) => `transform: translate${axis}(${sign * 100 * u}%)`, }; } const POSITION_CLASSES: Record = { left: "inset-y-0 left-0 border-r border-border", right: "inset-y-0 right-0 border-l border-border", top: "inset-x-0 top-0 border-b border-border", bottom: "inset-x-0 bottom-0 border-t border-border", }; // Literal Tailwind class strings (not template-built at runtime) so the // Tailwind v4 source scanner — which reads this file as text, not as // evaluated JS — can see every candidate class it needs to generate. const WIDTH_CLASSES: Record = { sm: "w-[20rem] max-w-[90vw] h-dvh", md: "w-[24rem] max-w-[90vw] h-dvh", lg: "w-[32rem] max-w-[90vw] h-dvh", }; const HEIGHT_CLASSES: Record = { sm: "h-[14rem] max-h-[85vh] w-full", md: "h-[18rem] max-h-[85vh] w-full", lg: "h-[24rem] max-h-[85vh] w-full", }; export const Sheet = forwardRef(function Sheet( { open: openProp, onOpenChange, side = "right", title, description, dismissible = true, size = "md", children, footer, id, className, ariaLabel, sound = false, }, forwardedRef ) { // The React shape of the source's `open = $bindable(false)`: an internal // copy seeded from the prop, re-synced during render whenever the CALLER // changes the prop, and free to move on its own in between. Re-synced in // the render path, not an effect: an effect would paint one frame of the // stale value first. const [open, setOpenState] = useState(openProp ?? false); const [lastOpenProp, setLastOpenProp] = useState(openProp); if (lastOpenProp !== openProp) { setLastOpenProp(openProp); setOpenState(openProp ?? false); } // A no-op while `sound` is false, so the call site below stays unguarded. const playCue = useSoundCue(sound); function close() { // The same guard keeps the cue honest: every dismissal — Escape, the // scrim, the close button — funnels through here, while a parent // writing `open` to false never does, and a second Escape landing // during the exit is already gone by the time it arrives. if (!open) return; setOpenState(false); playCue("close"); onOpenChange?.(false); } // One seed per instance, suffixed for title/description — SSR-stable, // same approach the source settled on with `$props.id()`. const uid = useFancyId(); const titleId = title ? `${uid}-title` : undefined; const descriptionId = description ? `${uid}-description` : undefined; // Convention C-1: the NODE, not a ref. The panel is created by // `presence.mounted`, so a `useRef` + `[]`-deps effect would still be // holding `null` when the trap's effect fires and the trap would never // arm — silently. const [panel, setPanelNode] = useElementRef(); // Returns the two functions the source hands out through `onActivate`: // the eager return, and the re-arm. const trap = useFocusTrap(panel); const presence = usePresence(open, { // The two halves of the focus handshake, at the two moments the // source puts them: `onintrostart` → rearm, `onoutrostart` → // returnFocusNow. // // `returnFocusNow` at the dismiss instant is the whole point: it is // called on EVERY close path (Escape, the scrim, the close button, a // caller's own `open` write). Waiting for the trap's own destroy // would leave a keyboard user on `` for the whole length of the // slide-out, because the closing panel is made inert the instant the // exit starts. // // `rearm` is the other half. A sheet reopened DURING its exit // reverses instead of remounting, so the trap is never re-created: // without this the panel would come back `aria-modal` and interactive // with focus left on the trigger behind it, and the eager return // already spent for the life of the instance. onEnterStart: () => trap.rearm(), onExitStart: () => trap.returnFocusNow(), }); // Release timing: keyed on `presence.mounted`, not `open`, so the page // stays locked until the panel has actually finished sliding out instead // of unlocking the instant `open` flips and leaving the page scrollable // under a scrim still on screen — the same reason the source reached for // `use:scrollLock` (outro-delayed destroy) over an `$effect`. useScrollLock(presence.mounted); // `active: open` — a plain boolean where the source needed `() => open`. // The layer stays ON the stack for its whole exit and stops being TOP of // it the instant `open` flips, so a second Escape during the slide-out // changes nothing. useDismissable(panel, { onDismiss: close, escape: dismissible, outsideClick: dismissible, active: open, keepFocus: true, }); // Convention C-2: composed ABOVE the conditional below. `side` rides in // through the params factory, read at the instant a leg starts. const panelRef = useComposedRefs( setPanelNode, forwardedRef, presence.register("panel", edgeSlide, (entering) => ({ side, entering })) ); // The scrim fades on opacity alone (`scale: false`) while the panel // travels, and both run the same clock, so they leave together and the // unmount is a tie rather than a straggler. const scrimRef = presence.register("scrim", anchored, (entering) => ({ entering, scale: false, duration: DURATIONS.base, exitDuration: DURATIONS.exit, })); const isHorizontal = side === "left" || side === "right"; const dimensionClasses = isHorizontal ? WIDTH_CLASSES[size] : HEIGHT_CLASSES[size]; const panelClasses = cn( "ft-sheet-panel bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 p-4 shadow-2xl", POSITION_CLASSES[side], dimensionClasses, className ); // No portal-before-focus-trap ordering ceremony here (divergence D-10): // `createPortal` commits children into the container before any effect // runs and refs populate before layout effects, so the node the trap // focuses is always connected. // // The `Portal` stays mounted and its CHILDREN are what `presence.mounted` // gates — `usePortalTarget` resolves its container in a layout effect, so // a `Portal` mounting in the same commit as the surface would skip the // entrance outright. // // `data-state` is an ordinary attribute (divergence D-2) carrying // `surfaceState`'s TWO values (convention C-5); `inert` is not written by // hand, because `usePresence` sets it on every registered node for the // whole exit. `data-side` drives POSITION_CLASSES semantics for // consumers, not just the keyframes the source once selected with it. return ( {presence.mounted ? ( <>

) : null} ); }); Sheet.displayName = "Sheet"; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/internals-motion.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/sheet/Sheet.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/sheet/Sheet.tsx"},{"path":"react/src/components/sheet/index.ts","content":"\"use client\";\n\nexport { Sheet } from \"./Sheet\";\nexport type { SheetProps, SheetSide, SheetSize } from \"./Sheet\";\n","type":"registry:ui","target":"@ui/fancy/components/sheet/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]