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:T829a,"use client" import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox" import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer" import { mergeProps } from "@base-ui/react/merge-props" import { Radio as RadioPrimitive } from "@base-ui/react/radio" import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group" import { useRender } from "@base-ui/react/use-render" import { CheckIcon, ChevronRightIcon, XIcon } from "lucide-react" import * as React from "react" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { cn } from "@/lib/utils" const DrawerCreateHandle: typeof DrawerPrimitive.createHandle = DrawerPrimitive.createHandle type DrawerPosition = "right" | "left" | "top" | "bottom" | "start" | "end" type PhysicalDrawerPosition = "right" | "left" | "top" | "bottom" /** * DrawerPopup renders through a Portal, so it doesn't inherit `dir` from a * nearby wrapper (only from document.documentElement). DrawerTrigger * measures the ambient direction where it's actually rendered and pushes it * here so a logical position="start"/"end" resolves to the correct physical * edge, and so the portaled content picks up the right text direction. */ const DrawerDirContext = React.createContext<{ dir: "ltr" | "rtl" setDir: (dir: "ltr" | "rtl") => void }>({ dir: "ltr", setDir: () => {} }) const DrawerPositionContext = React.createContext<{ position: DrawerPosition }>( { position: "bottom" } ) const DrawerPopupVariantContext = React.createContext< "default" | "straight" | "inset" | "force-inset" >("default") function resolvePosition( position: DrawerPosition, dir: "ltr" | "rtl" ): PhysicalDrawerPosition { if (position === "start") return dir === "rtl" ? "right" : "left" if (position === "end") return dir === "rtl" ? "left" : "right" return position } function useResolvedDrawerPosition( positionProp?: DrawerPosition ): PhysicalDrawerPosition { const { position: contextPosition } = React.useContext(DrawerPositionContext) const { dir } = React.useContext(DrawerDirContext) return resolvePosition(positionProp ?? contextPosition, dir) } const directionMap: Record< PhysicalDrawerPosition, DrawerPrimitive.Root.Props["swipeDirection"] > = { bottom: "down", left: "left", right: "right", top: "up", } function now(): number { return typeof performance !== "undefined" ? performance.now() : Date.now() } function Drawer({ swipeDirection, position = "bottom", onOpenChange, open, ...props }: DrawerPrimitive.Root.Props & { position?: DrawerPosition }) { const [dir, setDir] = React.useState<"ltr" | "rtl">("ltr") const dirContextValue = React.useMemo(() => ({ dir, setDir }), [dir]) const positionContextValue = React.useMemo(() => ({ position }), [position]) const resolvedPosition = resolvePosition(position, dir) // Guard against a spurious "open then instantly dismiss" that appears as the // drawer flashing with no animation. In re-render-heavy apps, the // interaction that opens the drawer can produce a follow-up click that Base // UI catches as an outside-press and closes it in the same tick. Detected // by timing: a real outside-press happens well after opening, so any // outside-press within a short window of opening is treated as the bogus // self-close and cancelled. Later outside-presses still dismiss normally. const openedAtRef = React.useRef(0) React.useEffect(() => { if (open) openedAtRef.current = now() }, [open]) return ( { if (open) { openedAtRef.current = now() } else if (details?.reason === "outside-press") { if (now() - openedAtRef.current < 200) { details.cancel?.() return } } onOpenChange?.(open, details) }} {...props} /> ) } const DrawerPortal = DrawerPrimitive.Portal function DrawerTrigger({ className, ...props }: DrawerPrimitive.Trigger.Props) { const ref = React.useRef(null) const { setDir } = React.useContext(DrawerDirContext) React.useEffect(() => { function update() { if (!ref.current) return setDir(getComputedStyle(ref.current).direction === "rtl" ? "rtl" : "ltr") } update() const observer = new MutationObserver(update) observer.observe(document.documentElement, { attributes: true, attributeFilter: ["dir"], subtree: true, }) return () => observer.disconnect() }, [setDir]) return ( ) } function DrawerClose(props: DrawerPrimitive.Close.Props) { return } function DrawerSwipeArea({ className, position: positionProp, ...props }: DrawerPrimitive.SwipeArea.Props & { position?: DrawerPosition }) { const position = useResolvedDrawerPosition(positionProp) return ( ) } function DrawerBackdrop({ className, ...props }: DrawerPrimitive.Backdrop.Props) { return ( ) } function DrawerViewport({ className, position: positionProp, variant = "default", ...props }: DrawerPrimitive.Viewport.Props & { position?: DrawerPosition variant?: "default" | "straight" | "inset" | "force-inset" }) { const { dir } = React.useContext(DrawerDirContext) const position = useResolvedDrawerPosition(positionProp) return ( ) } function DrawerPopup({ className, children, position: positionProp, variant = "default", showCloseButton = false, showBar = false, portalProps, ...props }: DrawerPrimitive.Popup.Props & { position?: DrawerPosition variant?: "default" | "straight" | "inset" | "force-inset" showCloseButton?: boolean showBar?: boolean portalProps?: DrawerPrimitive.Portal.Props }) { const position = useResolvedDrawerPosition(positionProp) return ( {children} {showCloseButton && ( } > )} {showBar && } ) } function DrawerHeader({ className, allowSelection = false, render, ...props }: useRender.ComponentProps<"div"> & { allowSelection?: boolean }) { const defaultProps = { className: cn( "flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4", !allowSelection && "cursor-default", className ), "data-slot": "drawer-header", } return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render: allowSelection ? : render, }) } function DrawerFooter({ className, variant = "default", allowSelection = true, position: positionProp, render, ...props }: useRender.ComponentProps<"div"> & { variant?: "default" | "bare" allowSelection?: boolean position?: DrawerPosition }) { const position = useResolvedDrawerPosition(positionProp) const popupVariant = React.useContext(DrawerPopupVariantContext) const defaultProps = { className: cn( "flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end", !allowSelection && "cursor-default", variant === "default" && // The footer is always the last item in the popup's column, so // dragging/overscrolling exposes the area past its bottom edge. // That area is otherwise filled by DrawerPopup's own bleed // (bg-popover), which doesn't match the footer's muted background — // paint a matching bleed here so the footer's color and border // appear to continue instead of cutting to a different shade. // // after:z-10 is load-bearing: DrawerPopup has its own after: bleed // (bg-popover) covering the same region, and since that bleed is // *generated content of the popup itself* — which has a transform // and so establishes its own stacking context — it paints as if it // were the popup's last child, i.e. after and on top of this // footer (an earlier child) and this pseudo-element, even though // this is declared later in the DOM. Without an explicit z-index // this fix is invisible: the popup's own solid bleed just paints // over it. // // On a TOP drawer this bleed hangs below the popup into the page, // where a bottom drawer's is off-screen — so only there it fades // with the drag via the popup's inherited --drawer-swipe-progress // (0 at rest). Every other position keeps it always painted. "relative border-t border-border bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))] after:pointer-events-none after:absolute after:z-10 after:bg-muted/72", // Bottom and top drawers leave space below the footer, so their bleed // continues downward. variant === "default" && position !== "right" && position !== "left" && "after:inset-x-0 after:top-full after:h-[200px]", // Only the top drawer must hide its bleed while idle (see above). variant === "default" && position === "top" && "after:opacity-[clamp(0,var(--drawer-swipe-progress,0),1)]", // Side drawers stretch sideways. Continue the footer into the gap on // the outer edge, including its top border, so the muted footer color // does not cut back to the popup color while dragging. Offset by the // footer border so the bleed's border-box matches its rendered height // as the footer content changes. variant === "default" && position === "right" && popupVariant === "default" && "after:-top-px after:bottom-0 after:left-full after:w-[200px] after:border-t after:border-border", variant === "default" && position === "left" && popupVariant === "default" && "after:-top-px after:right-full after:bottom-0 after:w-[200px] after:border-t after:border-border", variant === "bare" && "pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))] in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3", // DrawerPopup reserves space for the drag bar via padding on itself // (e.g. pr-2 for a left drawer), which insets every child equally — // including the footer's own background. Cancel that inset here with // a matching negative margin, only when a bar sibling is actually // present, so the footer's background still reaches the handle edge. position === "left" && "has-[~[data-slot=drawer-bar]]:-mr-2", position === "right" && "has-[~[data-slot=drawer-bar]]:-ml-2", position === "top" && "has-[~[data-slot=drawer-bar]]:-mb-2", className ), "data-slot": "drawer-footer", } return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render: allowSelection ? : render, }) } function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) { return ( ) } function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) { return ( ) } function DrawerPanel({ className, scrollable = true, allowSelection = true, render, ...props }: useRender.ComponentProps<"div"> & { scrollable?: boolean allowSelection?: boolean }) { const defaultProps = { className: cn( "p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1", !allowSelection && "cursor-default", className ), "data-slot": "drawer-panel", } const content = useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render: allowSelection ? : render, }) if (scrollable) { // ScrollArea's own root has no intrinsic height — as a flex item inside // DrawerPopup's column it needs min-h-0 too, not just flex-1, or it // refuses to shrink below its content's natural height (the default // `min-height: auto` on flex items) and the popup grows to fit // everything instead of scrolling internally. return ( {content} ) } return content } function DrawerBar({ className, position: positionProp, render, ...props }: useRender.ComponentProps<"div"> & { position?: DrawerPosition }) { const position = useResolvedDrawerPosition(positionProp) const horizontal = position === "left" || position === "right" const defaultProps = { "aria-hidden": true as const, className: cn( "absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input", horizontal ? "inset-y-0 before:h-12 before:w-1" : "inset-x-0 before:h-1 before:w-12", position === "top" && "bottom-0", position === "bottom" && "top-0", position === "left" && "right-0", position === "right" && "left-0", className ), "data-slot": "drawer-bar", } return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }) } const DrawerContent = DrawerPrimitive.Content function DrawerMenu({ className, render, ...props }: useRender.ComponentProps<"nav">) { const defaultProps = { className: cn("-m-2 flex flex-col", className), "data-slot": "drawer-menu", } return useRender({ defaultTagName: "nav", props: mergeProps<"nav">(defaultProps, props), render, }) } function DrawerMenuItem({ className, variant = "default", render, disabled, ...props }: useRender.ComponentProps<"button"> & { variant?: "default" | "destructive" }) { const defaultProps = { className: cn( "flex min-h-9 w-full cursor-default items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none select-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[variant=destructive]:text-destructive sm:min-h-8 sm:text-sm [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4", className ), "data-slot": "drawer-menu-item", "data-variant": variant, disabled, type: "button" as const, } return useRender({ defaultTagName: "button", props: mergeProps<"button">(defaultProps, props), render, }) } function DrawerMenuSeparator({ className, render, ...props }: useRender.ComponentProps<"div">) { const defaultProps = { className: cn("mx-2 my-1 h-px bg-border", className), "data-slot": "drawer-menu-separator", } return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }) } function DrawerMenuGroup({ className, render, ...props }: useRender.ComponentProps<"div">) { const defaultProps = { className: cn("flex flex-col", className), "data-slot": "drawer-menu-group", } return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }) } function DrawerMenuGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div">) { const defaultProps = { className: cn( "px-2 py-1.5 text-xs font-medium text-muted-foreground", className ), "data-slot": "drawer-menu-group-label", } return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }) } function DrawerMenuTrigger({ className, children, ...props }: DrawerPrimitive.Trigger.Props) { return ( {children} ) } function DrawerMenuCheckboxItem({ className, children, checked, defaultChecked, onCheckedChange, variant = "default", disabled, render, ...props }: CheckboxPrimitive.Root.Props & { variant?: "default" | "switch" render?: React.ReactElement }) { return ( {variant === "switch" ? ( <> {children} ) : ( <> {children} )} ) } function DrawerMenuRadioGroup({ className, ...props }: RadioGroupPrimitive.Props) { return ( ) } function DrawerMenuRadioItem({ className, children, value, disabled, render, ...props }: RadioPrimitive.Root.Props & { value: string render?: React.ReactElement }) { return ( {children} ) } export { Drawer, DrawerBackdrop, DrawerBar, DrawerClose, DrawerContent, DrawerCreateHandle, DrawerDescription, DrawerFooter, DrawerHeader, DrawerMenu, DrawerMenuCheckboxItem, DrawerMenuGroup, DrawerMenuGroupLabel, DrawerMenuItem, DrawerMenuRadioGroup, DrawerMenuRadioItem, DrawerMenuSeparator, DrawerMenuTrigger, DrawerPanel, DrawerPopup, DrawerPortal, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, } 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":[["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@persianlabsui","registryDependencies":["utils","@persianlabsui/scroll-area"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/base/ui/drawer.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]