4f: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"] 50: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"] 51:T609a,"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 { ChevronRightIcon, XIcon } from "lucide-react"; import type React from "react"; import { createContext, useContext } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Button } from "@/registry/default/ui/button"; import { ScrollArea } from "@/registry/default/ui/scroll-area"; type DrawerPosition = "right" | "left" | "top" | "bottom"; const DrawerContext: React.Context<{ position: DrawerPosition }> = createContext<{ position: DrawerPosition }>({ position: "bottom", }); const directionMap: Record< DrawerPosition, DrawerPrimitive.Root.Props["swipeDirection"] > = { bottom: "down", left: "left", right: "right", top: "up", }; export const DrawerCreateHandle: typeof DrawerPrimitive.createHandle = DrawerPrimitive.createHandle; export function Drawer({ swipeDirection, position = "bottom", ...props }: DrawerPrimitive.Root.Props & { position?: DrawerPosition; }): React.ReactElement { return ( ); } export const DrawerPortal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal; export function DrawerTrigger( props: DrawerPrimitive.Trigger.Props, ): React.ReactElement { return ; } export function DrawerClose( props: DrawerPrimitive.Close.Props, ): React.ReactElement { return ; } export function DrawerSwipeArea({ className, position: positionProp, ...props }: DrawerPrimitive.SwipeArea.Props & { position?: DrawerPosition; }): React.ReactElement { const { position: contextPosition } = useContext(DrawerContext); const position = positionProp ?? contextPosition; return ( ); } export function DrawerBackdrop({ className, ...props }: DrawerPrimitive.Backdrop.Props): React.ReactElement { return ( ); } export function DrawerViewport({ className, position, variant = "default", ...props }: DrawerPrimitive.Viewport.Props & { position?: DrawerPosition; variant?: "default" | "straight" | "inset"; }): React.ReactElement { return ( ); } export function DrawerPopup({ className, children, showCloseButton = false, position: positionProp, variant = "default", showBar = false, portalProps, ...props }: DrawerPrimitive.Popup.Props & { showCloseButton?: boolean; position?: DrawerPosition; variant?: "default" | "straight" | "inset"; showBar?: boolean; portalProps?: DrawerPrimitive.Portal.Props; }): React.ReactElement { const { position: contextPosition } = useContext(DrawerContext); const position = positionProp ?? contextPosition; const popup = ( {children} {showCloseButton && ( } > )} {showBar && } ); return position === "bottom" ? ( {popup} ) : ( popup ); } export function DrawerHeader({ className, allowSelection = false, render, ...props }: useRender.ComponentProps<"div"> & { allowSelection?: boolean; }): React.ReactElement { 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, }); } export function DrawerFooter({ className, variant = "default", allowSelection = true, render, ...props }: useRender.ComponentProps<"div"> & { variant?: "default" | "bare"; allowSelection?: boolean; }): React.ReactElement { 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" && "border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]", variant === "bare" && "in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]", className, ), "data-slot": "drawer-footer", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render: allowSelection ? : render, }); } export function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): React.ReactElement { return ( ); } export function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): React.ReactElement { return ( ); } export function DrawerPanel({ className, scrollFade = true, scrollable = true, allowSelection = true, render, ...props }: useRender.ComponentProps<"div"> & { scrollFade?: boolean; scrollable?: boolean; allowSelection?: boolean; }): React.ReactElement { const defaultProps = { className: cn( "p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1", !allowSelection && "cursor-default", className, ), "data-slot": "drawer-panel", }; const content = useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render: allowSelection ? : render, }); if (scrollable) { // The popup reserves keyboard space; extra viewport padding would overflow the panel. return ( {content} ); } return content; } export function DrawerBar({ className, position: positionProp, render, ...props }: useRender.ComponentProps<"div"> & { position?: DrawerPosition; }): React.ReactElement { const { position: contextPosition } = useContext(DrawerContext); const position = positionProp ?? contextPosition; 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, }); } export const DrawerContent: typeof DrawerPrimitive.Content = DrawerPrimitive.Content; export function DrawerMenu({ className, render, ...props }: useRender.ComponentProps<"nav">): React.ReactElement { const defaultProps = { className: cn("-m-2 flex flex-col", className), "data-slot": "drawer-menu", }; return useRender({ defaultTagName: "nav", props: mergeProps<"nav">(defaultProps, props), render, }); } export function DrawerMenuItem({ className, variant = "default", render, disabled, ...props }: useRender.ComponentProps<"button"> & { variant?: "default" | "destructive"; }): React.ReactElement { const defaultProps = { className: cn( "flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0", className, ), "data-slot": "drawer-menu-item", "data-variant": variant, disabled, type: "button" as const, }; return useRender({ defaultTagName: "button", props: mergeProps<"button">(defaultProps, props), render, }); } export function DrawerMenuSeparator({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { 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, }); } export function DrawerMenuGroup({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { className: cn("flex flex-col", className), "data-slot": "drawer-menu-group", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function DrawerMenuGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { className: cn( "px-2 py-1.5 font-medium text-muted-foreground text-xs", className, ), "data-slot": "drawer-menu-group-label", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function DrawerMenuTrigger({ className, children, ...props }: DrawerPrimitive.Trigger.Props): React.ReactElement { return ( {children} ); } export function DrawerMenuCheckboxItem({ className, children, checked, defaultChecked, onCheckedChange, variant = "default", disabled, render, ...props }: CheckboxPrimitive.Root.Props & { variant?: "default" | "switch"; render?: React.ReactElement; }): React.ReactElement { return ( {variant === "switch" ? ( <> {children} ) : ( <> {children} )} ); } export function DrawerMenuRadioGroup({ className, ...props }: RadioGroupPrimitive.Props): React.ReactElement { return ( ); } export function DrawerMenuRadioItem({ className, children, value, disabled, render, ...props }: RadioPrimitive.Root.Props & { value: string; render?: React.ReactElement; }): React.ReactElement { return ( {children} ); } export { DrawerPrimitive }; 4e:["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@coss","registryDependencies":["@coss/button","@coss/scroll-area"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/default/ui/drawer.tsx","content":"$51","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]