51: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"] 52: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"] 53:T1af0,"use client"; import type * as React from "react"; import { createContext, useContext, useState } from "react"; import { cn } from "@/lib/utils"; import { useIsMobile } from "@/hooks/use-mobile"; import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer"; const ResponsiveDialogContext = createContext(null); /** * Reads the layout decided by the nearest `ResponsiveDialog`, so every part * renders against the same primitive without calling `useIsMobile` again. */ const useResponsiveDialogLayout = () => { const isMobile = useContext(ResponsiveDialogContext); if (isMobile === null) { throw new Error("ResponsiveDialog parts must be rendered inside ."); } return isMobile; }; export interface ResponsiveDialogProps { /** The dialog parts. */ children?: React.ReactNode; /** Whether the dialog is open on first render, for uncontrolled usage. */ defaultOpen?: boolean; /** Whether the dialog traps focus and locks page scroll while open. */ modal?: boolean | "trap-focus"; /** Called when the dialog opens or closes. */ onOpenChange?: (open: boolean) => void; /** Whether the dialog is open, for controlled usage. */ open?: boolean; } const ResponsiveDialog = ({ children, defaultOpen, onOpenChange, open, ...props }: ResponsiveDialogProps) => { // The layout always tracks the viewport, including while the dialog is open. // Crossing 768px unmounts one tree and mounts the other, so focus and any // uncontrolled input state inside are lost — see the demo, which lifts its // field state above this component. Holding the primitive until close would // avoid that, at the cost of rendering a drawer at desktop widths, where // every `sm:`/`md:` class a caller wrote for the dialog now applies to the // drawer instead. That mismatch is visible on every resize; the state loss // is not, and callers can prevent it. const isMobile = useIsMobile(); const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false); const handleOpenChange = (next: boolean) => { setUncontrolledOpen(next); onOpenChange?.(next); }; // The swapped-in root has no memory of the other tree's open state, so an // uncontrolled dialog has to be told it is open across the boundary. const isOpen = open ?? uncontrolledOpen; const Root = isMobile ? Drawer : Dialog; return ( {children} ); }; export interface ResponsiveDialogTriggerProps extends React.ComponentProps<"button"> { /** Render the single child element as the trigger instead of a button. */ asChild?: boolean; } const ResponsiveDialogTrigger = ({ asChild, ...props }: ResponsiveDialogTriggerProps) => { const isMobile = useResponsiveDialogLayout(); const Trigger = isMobile ? DrawerTrigger : DialogTrigger; return ; }; export interface ResponsiveDialogContentProps extends React.ComponentProps<"div"> { /** Show the corner close button. Desktop only — the drawer closes by swipe. */ showCloseButton?: boolean; } const ResponsiveDialogContent = ({ children, className, showCloseButton = true, ...props }: ResponsiveDialogContentProps) => { const isMobile = useResponsiveDialogLayout(); // `data-layout` is the styling hook, not a breakpoint. Which primitive is // mounted is the thing that varies, and a viewport query only approximates // it: `md:` happens to line up with the 768px swap, `sm:` does not, so // `sm:max-w-*` written for the dialog also clamps the drawer between 640 and // 767px. Style the content root with `data-[layout=dialog]:*` and anything // below it with `group-data-[layout=drawer]/responsive-dialog:*`, and the // condition is the rendered primitive exactly. if (isMobile) { return ( {children} ); } return ( {children} ); }; const ResponsiveDialogHeader = ({ className, ...props }: React.ComponentProps<"div">) => { const isMobile = useResponsiveDialogLayout(); const Header = isMobile ? DrawerHeader : DialogHeader; return

; }; const ResponsiveDialogFooter = ({ className, ...props }: React.ComponentProps<"div">) => { const isMobile = useResponsiveDialogLayout(); if (isMobile) { return ; } return ; }; const ResponsiveDialogTitle = ({ className, ...props }: React.ComponentProps<"h2">) => { const isMobile = useResponsiveDialogLayout(); if (isMobile) { return ( ); } return ; }; const ResponsiveDialogDescription = ({ className, ...props }: React.ComponentProps<"p">) => { const isMobile = useResponsiveDialogLayout(); const Description = isMobile ? DrawerDescription : DialogDescription; return ; }; export interface ResponsiveDialogCloseProps extends React.ComponentProps<"button"> { /** Render the single child element as the close control instead of a button. */ asChild?: boolean; } const ResponsiveDialogClose = ({ asChild, ...props }: ResponsiveDialogCloseProps) => { const isMobile = useResponsiveDialogLayout(); const Close = isMobile ? DrawerClose : DialogClose; return ; }; export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger, }; 50:["$","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,["$","$L51",null,{"namespace":"@blode","registryDependencies":["dialog","drawer","@blode/use-mobile"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/responsive-dialog.tsx","content":"$53","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]