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:Td43,import { useEffect, useId, useRef, type KeyboardEvent, type ReactNode } from 'react' import { cx } from './direction' import { Icon } from './icons' import { useSwipeDismiss } from './useSwipeDismiss' export type SheetProps = { open: boolean onClose: () => void title: ReactNode children: ReactNode footer?: ReactNode /** The close button's name for screen readers, in the page language. */ closeLabel?: string className?: string } const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' /** * A modal side sheet. It opens from the inline end (right in English, left in Arabic), * keeps focus inside, closes on Escape, the scrim or a swipe back towards its edge, * and gives focus back to whatever opened it. It renders in place, so it keeps the * dir and lang of the subtree it sits in. */ export function Sheet({ open, onClose, title, children, footer, closeLabel = 'Close', className }: SheetProps) { const panel = useRef(null) const titleId = useId() const swipe = useSwipeDismiss(onClose) useEffect(() => { if (!open) return const opener = document.activeElement as HTMLElement | null const overflow = document.body.style.overflow document.body.style.overflow = 'hidden' panel.current?.querySelector(FOCUSABLE)?.focus() return () => { document.body.style.overflow = overflow opener?.focus?.() } }, [open]) if (!open) return null const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') { e.stopPropagation() onClose() return } if (e.key !== 'Tab' || !panel.current) return const items = [...panel.current.querySelectorAll(FOCUSABLE)] const first = items[0], last = items[items.length - 1] if (!first || !last) return if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus() } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus() } } return (

) } /** A label and value on one line. Identifiers such as an IBAN go in mono and stay left to right. */ export function SheetRow({ label, value, mono = false }: { label: ReactNode; value: ReactNode; mono?: boolean }) { return (

{label} {mono ? {value} : {value}}

) } 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":"@dualkit","registryDependencies":["https://dualkit.dev/r/base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/Sheet.tsx","content":"$52","type":"registry:ui","target":"components/dualkit/Sheet.tsx"}],"className":"h-[70svh] min-h-80"}]]}]