4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T145e,"use client" import * as React from "react" import { Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPopup, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Drawer, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPanel, DrawerPopup, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer" import { useIsMobile } from "@/hooks/use-media-query" type ResponsiveDialogContextValue = { isDesktop: boolean } const ResponsiveDialogContext = React.createContext(null) function useResponsiveDialogContext() { const context = React.useContext(ResponsiveDialogContext) if (!context) { throw new Error( "ResponsiveDialog components must be used within " ) } return context } type ResponsiveDialogProps = { open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void children: React.ReactNode /** Which edge the drawer slides in from on mobile. @defaultValue "bottom" */ drawerPosition?: "right" | "left" | "top" | "bottom" | "start" | "end" } function ResponsiveDialog({ open, defaultOpen, onOpenChange, children, drawerPosition = "bottom", }: ResponsiveDialogProps) { const isMobile = useIsMobile() const isDesktop = !isMobile const contextValue = React.useMemo(() => ({ isDesktop }), [isDesktop]) return ( {isDesktop ? ( ) : ( {children} )} ) } function ResponsiveDialogTrigger( props: React.ComponentProps ) { const { isDesktop } = useResponsiveDialogContext() return isDesktop ? ( ) : ( )} /> ) } function ResponsiveDialogClose( props: React.ComponentProps ) { const { isDesktop } = useResponsiveDialogContext() return isDesktop ? ( ) : ( )} /> ) } function ResponsiveDialogPopup( props: React.ComponentProps ) { const { isDesktop } = useResponsiveDialogContext() return isDesktop ? ( ) : ( )} /> ) } function ResponsiveDialogPanel( props: React.ComponentProps ) { const { isDesktop } = useResponsiveDialogContext() return isDesktop ? ( ) : ( )} /> ) } function ResponsiveDialogHeader( props: React.ComponentProps ) { const { isDesktop } = useResponsiveDialogContext() return isDesktop ? ( ) : ( )} /> ) } function ResponsiveDialogFooter( props: React.ComponentProps ) { const { isDesktop } = useResponsiveDialogContext() return isDesktop ? ( ) : ( )} /> ) } function ResponsiveDialogTitle( props: React.ComponentProps ) { const { isDesktop } = useResponsiveDialogContext() return isDesktop ? ( ) : ( )} /> ) } function ResponsiveDialogDescription( props: React.ComponentProps ) { const { isDesktop } = useResponsiveDialogContext() return isDesktop ? ( ) : ( )} /> ) } /** * Renders children on desktop only. On mobile the dialog is a bottom drawer * users dismiss by swiping down, so a Cancel button is redundant there. * * Convention: wrap every Cancel/انصراف action in this so it shows on desktop * only; keep the confirm/primary action outside so it stays on both. The * footer is flex, so the lone primary button fills the width on mobile. */ function ResponsiveDialogDesktopOnly({ children, }: { children: React.ReactNode }) { const { isDesktop } = useResponsiveDialogContext() if (!isDesktop) return null return <>{children} } export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogDescription, ResponsiveDialogDesktopOnly, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogPanel, ResponsiveDialogPopup, ResponsiveDialogPopup as ResponsiveDialogContent, ResponsiveDialogTitle, ResponsiveDialogTrigger, } 53:Ta88,"use client" import { useCallback, useSyncExternalStore } from "react" const BREAKPOINTS = { "2xl": 1536, "3xl": 1600, "4xl": 2000, lg: 1024, md: 800, sm: 640, xl: 1280, } as const type Breakpoint = keyof typeof BREAKPOINTS type BreakpointQuery = Breakpoint | `max-${Breakpoint}` | `${Breakpoint}:max-${Breakpoint}` function resolveMin(value: Breakpoint | number): string { const px = typeof value === "number" ? value : BREAKPOINTS[value] return `(min-width: ${px}px)` } function resolveMax(value: Breakpoint | number): string { const px = typeof value === "number" ? value : BREAKPOINTS[value] return `(max-width: ${px - 1}px)` } function parseQuery( query: BreakpointQuery | MediaQueryInput | (string & {}) ): string { if (typeof query !== "string") { const parts: string[] = [] if (query.min != null) parts.push(resolveMin(query.min)) if (query.max != null) parts.push(resolveMax(query.max)) if (query.pointer === "coarse") parts.push("(pointer: coarse)") if (query.pointer === "fine") parts.push("(pointer: fine)") if (parts.length === 0) return "(min-width: 0px)" return parts.join(" and ") } if (query.startsWith("(")) return query const parts: string[] = [] for (const segment of query.split(":")) { if (segment.startsWith("max-")) { const bp = segment.slice(4) if (bp in BREAKPOINTS) parts.push(resolveMax(bp as Breakpoint)) } else if (segment in BREAKPOINTS) { parts.push(resolveMin(segment as Breakpoint)) } } return parts.length > 0 ? parts.join(" and ") : query } function getServerSnapshot(): boolean { return false } export type MediaQueryInput = { min?: Breakpoint | number max?: Breakpoint | number /** Touch-like input (finger). Use "fine" for mouse/trackpad. */ pointer?: "coarse" | "fine" } /** Tracks a CSS media query with Tailwind-like breakpoint syntax. Returns `false` during SSR. */ export function useMediaQuery( query: BreakpointQuery | MediaQueryInput | (string & {}) ): boolean { const mediaQuery = parseQuery(query) const subscribe = useCallback( (callback: () => void) => { if (typeof window === "undefined") return () => {} const mql = window.matchMedia(mediaQuery) mql.addEventListener("change", callback) return () => mql.removeEventListener("change", callback) }, [mediaQuery] ) const getSnapshot = useCallback(() => { if (typeof window === "undefined") return false return window.matchMedia(mediaQuery).matches }, [mediaQuery]) return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) } export function useIsMobile(): boolean { return useMediaQuery("max-md") } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@base-ui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["utils","https://ui.persian-labs.ir/r/dialog.json","https://ui.persian-labs.ir/r/drawer.json"]}]]}],["$","$L50",null,{"sourceUrl":"https://ui.persian-labs.ir/r/responsive-dialog.json","proxyUrl":"https://shadcnregistry.com/r/persianlabsui/responsive-dialog","itemId":"@persianlabsui/responsive-dialog"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/base/ui/responsive-dialog.tsx","content":"$52","type":"registry:ui"},{"path":"registry/base/hooks/use-media-query.ts","content":"$53","type":"registry:hook"}]}]]}],"$L54"]}]

Responsive Dialog

Installation

Files

components

hooks

Styles