52: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"] 53: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"] 54: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, } 55:Tad9,"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)` } /** * @internal exported for unit tests; not part of the public API. */ export 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") } 51:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@persianlabsui","registryDependencies":["utils","@persianlabsui/dialog","@persianlabsui/drawer"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/base/ui/responsive-dialog.tsx","content":"$54","type":"registry:ui"},{"path":"registry/base/hooks/use-media-query.ts","content":"$55","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]