50: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/1o6_421saitt-.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"] 51: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/1o6_421saitt-.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"] 52:Taea7,"use client"; import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { cn } from "cn"; import { ChevronRightIcon } from "lucide-react"; import { animate, useReducedMotion } from "motion/react"; import * as React from "react"; import { ScrollArea, ScrollAreaContent } from "@/components/ui/scroll-area"; type DrawerPosition = "right" | "left" | "top" | "bottom"; type DrawerVariant = "default" | "floating"; type DrawerOverlay = "blur" | "brightness" | "transparent"; type DrawerSurfaceLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; type DrawerShadowLevel = number; type DrawerOnOpenChange = NonNullable< DrawerPrimitive.Root.Props["onOpenChange"] >; type DrawerOnOpenChangeComplete = NonNullable< DrawerPrimitive.Root.Props["onOpenChangeComplete"] >; type DrawerSnapPoint = number | string; type DrawerContextValue = { drawerId?: string; isNested?: boolean; position: DrawerPosition; dismissible: boolean; overlay: DrawerOverlay; snapPoints?: DrawerSnapPoint[]; currentSnapPoint?: DrawerSnapPoint | null; lastVisibleSnapPoint?: DrawerSnapPoint | null; expandToNextSnapPoint?: () => void; collapseToPrevSnapPoint?: () => void; closeDrawer?: () => void; isAtFullSnap?: boolean; keepMounted?: boolean; }; const DrawerContext = React.createContext({ dismissible: true, position: "bottom", overlay: "blur", isAtFullSnap: true, }); type DrawerPopupContextValue = { position: DrawerPosition; variant: DrawerVariant; }; const DrawerPopupContext = React.createContext( null ); const directionMap: Record< DrawerPosition, DrawerPrimitive.Root.Props["swipeDirection"] > = { bottom: "down", left: "left", right: "right", top: "up", }; const drawerShadowClasses: Record = { 1: "shadow-xs", 2: "shadow-sm", 3: "shadow", 4: "shadow-md", 5: "shadow-lg", 6: "shadow-xl", 7: "shadow-2xl", 8: "shadow-2xl", }; const drawerGeneratedShadowClass = "shadow-[var(--drawer-generated-shadow)]"; const drawerShadowDirections: Record = { bottom: [0, -1], left: [1, 0], right: [-1, 0], top: [0, 1], }; // Logarithmic scaling keeps the generator finite for every positive level while // the superlinear dimensions preserve a subtle low-elevation curve. function createShadow( direction: [number, number], level: DrawerShadowLevel, includeAmbientShadow = true ) { const normalizedLevel = Number.isFinite(level) ? Math.max(1, level) : 1; const scale = Math.log2(normalizedLevel); const distance = Math.round(1.5 * scale ** 2.2); const blur = Math.max(4, Math.round(4 + 3 * scale ** 2)); const opacity = Math.min(0.08, 0.03 + 0.02 * scale); const isDirectional = direction[0] !== 0 || direction[1] !== 0; const spread = isDirectional ? -blur : 0; const directionalShadow = `${direction[0] * distance}px ${direction[1] * distance}px ${blur}px ${spread}px rgb(0 0 0 / ${opacity.toFixed(3)})`; if (!includeAmbientShadow) { return directionalShadow; } const ambientBlur = Math.max(4, Math.round(2 + 4 * scale ** 1.8)); const ambientShadow = `0px 0px ${ambientBlur}px 0px rgb(0 0 0 / ${(opacity * 0.75).toFixed(3)})`; return `${directionalShadow}, ${ambientShadow}`; } function createDirectionalShadow( position: DrawerPosition, level: DrawerShadowLevel ) { return createShadow(drawerShadowDirections[position], level, false); } function createFloatingShadow(level: DrawerShadowLevel) { return createShadow([0, 0], level); } function isDrawerSurfaceLevel( level: DrawerShadowLevel ): level is DrawerSurfaceLevel { return Number.isInteger(level) && level >= 1 && level <= 8; } function getDrawerShadowClass( variant: DrawerVariant, shadowLevel: DrawerShadowLevel ) { if (variant === "floating" && isDrawerSurfaceLevel(shadowLevel)) { return drawerShadowClasses[shadowLevel]; } return drawerGeneratedShadowClass; } const drawerInnerBorderClasses: Record = { bottom: "border-t", top: "border-b", left: "border-r", right: "border-l", }; const drawerIndentTransition = { duration: 0.3, ease: "easeOut" as const, }; function useDrawerIndentMotion( elementRef: React.RefObject, getAnimation: (active: boolean) => Record ) { const shouldReduceMotion = useReducedMotion(); React.useEffect(() => { const element = elementRef.current; if (!element) { return; } let controls: ReturnType | undefined; const syncAnimation = () => { controls?.stop(); controls = animate( element, getAnimation(element.hasAttribute("data-active")), { ...drawerIndentTransition, duration: shouldReduceMotion ? 0 : drawerIndentTransition.duration, } ); }; const observer = new MutationObserver(syncAnimation); observer.observe(element, { attributeFilter: ["data-active"], attributes: true, }); syncAnimation(); return () => { observer.disconnect(); controls?.stop(); }; }, [elementRef, getAnimation, shouldReduceMotion]); } const getIndentAnimation = (active: boolean) => { return { scale: active ? 0.96 : 1, }; }; const getIndentBackgroundAnimation = (active: boolean) => { return { opacity: active ? 1 : 0, }; }; const createDrawerHandle: typeof DrawerPrimitive.createHandle = DrawerPrimitive.createHandle; type DrawerProps = { dismissible?: boolean; overlay?: DrawerOverlay; position?: DrawerPosition; } & DrawerPrimitive.Root.Props; type DrawerOnSnapPointChange = NonNullable< DrawerPrimitive.Root.Props["onSnapPointChange"] >; type DrawerSnapPointChangeEventDetails = Parameters[1]; function createImperativeSnapPointChangeDetails(): DrawerSnapPointChangeEventDetails { return { reason: "imperative-action", event: new Event("drawer-snap-point-change"), cancel: () => undefined, allowPropagation: () => undefined, isCanceled: false, isPropagationAllowed: true, trigger: undefined, }; } function findSnapIndex( points: DrawerSnapPoint[], current: DrawerSnapPoint | null | undefined ): number { if (!points || points.length === 0) return -1; if (current == null) return 0; const exactIndex = points.findIndex((p) => p === current); if (exactIndex !== -1) return exactIndex; if (typeof current === "number") { let closestIndex = 0; let minDiff = Infinity; points.forEach((p, i) => { if (typeof p === "number") { const diff = Math.abs(p - current); if (diff < minDiff) { minDiff = diff; closestIndex = i; } } }); return closestIndex; } return 0; } const floatingDrawerMaxHeight = "calc(100dvh - 4rem)"; function getFloatingDrawerSnapOffset( snapPoint: DrawerSnapPoint | null | undefined ) { let snapHeight: string; if (typeof snapPoint === "number") { if (!Number.isFinite(snapPoint)) return "0px"; snapHeight = snapPoint <= 1 ? `${Math.min(Math.max(snapPoint, 0), 1) * 100}dvh` : `${Math.max(snapPoint, 0)}px`; } else if (typeof snapPoint === "string") { const value = Number.parseFloat(snapPoint); const unit = snapPoint.trim().endsWith("rem") ? "rem" : snapPoint.trim().endsWith("px") ? "px" : null; if (!Number.isFinite(value) || !unit) return "0px"; snapHeight = `${Math.max(value, 0)}${unit}`; } else { return "0px"; } return `clamp(0px, calc(${floatingDrawerMaxHeight} - ${snapHeight}), ${floatingDrawerMaxHeight})`; } function Drawer({ dismissible = true, disablePointerDismissal = false, onOpenChange, onOpenChangeComplete, swipeDirection, position = "bottom", overlay = "blur", snapPoints, snapPoint, defaultSnapPoint, onSnapPointChange, actionsRef, ...props }: DrawerProps) { const parentContext = React.useContext(DrawerContext); const drawerId = React.useId(); const isNested = parentContext.drawerId !== undefined; const [keepMounted, setKeepMounted] = React.useState(false); const internalActionsRef = React.useRef( null ); React.useImperativeHandle(actionsRef, () => { return { close: () => internalActionsRef.current?.close(), unmount: () => internalActionsRef.current?.unmount(), }; }, []); const closeDrawer = React.useCallback(() => { if (dismissible) { internalActionsRef.current?.close(); } }, [dismissible]); const [uncontrolledSnapPoint, setUncontrolledSnapPoint] = React.useState( () => snapPoint ?? defaultSnapPoint ?? snapPoints?.[0] ?? null ); const isControlled = snapPoint !== undefined; const currentSnapPoint = isControlled ? snapPoint : uncontrolledSnapPoint; const [lastVisibleSnapPoint, setLastVisibleSnapPoint] = React.useState( () => snapPoint ?? defaultSnapPoint ?? snapPoints?.[0] ?? null ); const updateSnapPoint = React.useCallback( (nextPoint: DrawerSnapPoint | null) => { if (!isControlled) { setUncontrolledSnapPoint(nextPoint); } if (nextPoint != null) { setLastVisibleSnapPoint(nextPoint); } }, [isControlled] ); const handleSnapPointChange = React.useCallback( (nextPoint, details) => { updateSnapPoint(nextPoint); onSnapPointChange?.(nextPoint, details); }, [onSnapPointChange, updateSnapPoint] ); const expandToNextSnapPoint = React.useCallback(() => { if (!snapPoints || snapPoints.length === 0) return; const currentIndex = findSnapIndex(snapPoints, currentSnapPoint); if (currentIndex < snapPoints.length - 1) { const nextPoint = snapPoints[currentIndex + 1]; updateSnapPoint(nextPoint); onSnapPointChange?.(nextPoint, createImperativeSnapPointChangeDetails()); } }, [snapPoints, currentSnapPoint, onSnapPointChange, updateSnapPoint]); const collapseToPrevSnapPoint = React.useCallback(() => { if (!snapPoints || snapPoints.length === 0) return; const currentIndex = findSnapIndex(snapPoints, currentSnapPoint); if (currentIndex > 0) { const prevPoint = snapPoints[currentIndex - 1]; updateSnapPoint(prevPoint); onSnapPointChange?.(prevPoint, createImperativeSnapPointChangeDetails()); } }, [snapPoints, currentSnapPoint, onSnapPointChange, updateSnapPoint]); const isAtFullSnap = Boolean( !snapPoints || snapPoints.length === 0 || findSnapIndex(snapPoints, currentSnapPoint) >= snapPoints.length - 1 ); const handleOpenChange = React.useCallback( (nextOpen, eventDetails) => { const target = eventDetails.event?.target; if ( !nextOpen && target instanceof Element && target.closest("[data-slot=lightbox-portal]") ) { eventDetails.cancel(); return; } if (!dismissible && !nextOpen && eventDetails.reason !== "close-press") { eventDetails.cancel(); return; } if (nextOpen && !isControlled && defaultSnapPoint !== undefined) { updateSnapPoint(defaultSnapPoint); } onOpenChange?.(nextOpen, eventDetails); }, [dismissible, isControlled, defaultSnapPoint, onOpenChange, updateSnapPoint] ); const handleOpenChangeComplete = React.useCallback( (nextOpen) => { if (nextOpen) { setKeepMounted(true); } onOpenChangeComplete?.(nextOpen); }, [onOpenChangeComplete] ); const contextValue = React.useMemo(() => { return { drawerId, isNested, dismissible, overlay, position, snapPoints, currentSnapPoint, lastVisibleSnapPoint, expandToNextSnapPoint, collapseToPrevSnapPoint, closeDrawer, isAtFullSnap, keepMounted, }; }, [ drawerId, isNested, dismissible, overlay, position, snapPoints, currentSnapPoint, lastVisibleSnapPoint, expandToNextSnapPoint, collapseToPrevSnapPoint, closeDrawer, isAtFullSnap, keepMounted, ]); return ( ); } function DrawerPortal(props: DrawerPrimitive.Portal.Props) { return ; } function DrawerTrigger( props: DrawerPrimitive.Trigger.Props ): React.ReactElement { return ; } function DrawerCloseTrigger( props: DrawerPrimitive.Close.Props ): React.ReactElement { return ; } function DrawerContent(props: DrawerPrimitive.Content.Props) { return ; } function DrawerProvider(props: DrawerPrimitive.Provider.Props) { return ; } function DrawerIndent({ className, ...props }: DrawerPrimitive.Indent.Props) { const elementRef = React.useRef(null); useDrawerIndentMotion(elementRef, getIndentAnimation); return ( ); } function DrawerIndentBackground({ className, ...props }: DrawerPrimitive.IndentBackground.Props) { const elementRef = React.useRef(null); useDrawerIndentMotion(elementRef, getIndentBackgroundAnimation); return ( ); } function DrawerSwipeArea({ className, position: positionProp, ...props }: DrawerPrimitive.SwipeArea.Props & { position?: DrawerPosition; }) { const { position: contextPosition } = React.useContext(DrawerContext); const position = positionProp ?? contextPosition; return ( ); } let lastGlobalDrawerWheelTime = 0; function useOutsideDrawerWheel( onWheel?: React.WheelEventHandler ) { const { drawerId, dismissible, snapPoints, currentSnapPoint, expandToNextSnapPoint, collapseToPrevSnapPoint, closeDrawer, isAtFullSnap, } = React.useContext(DrawerContext); return React.useCallback( (event: React.WheelEvent) => { onWheel?.(event); if (event.defaultPrevented) return; const target = event.target as HTMLElement | null; if (target?.closest?.("[data-slot=lightbox-portal]")) { return; } if (target?.closest?.("[data-slot=drawer-popup]")) { return; } event.stopPropagation(); if (event.cancelable) { event.preventDefault(); } const allPopups = Array.from( document.querySelectorAll("[data-slot=drawer-popup]") ).filter((p) => !p.hidden && !p.hasAttribute("hidden")); if (allPopups.length === 0) return; if (allPopups.some((p) => p.hasAttribute("data-ending-style"))) { return; } const myPopup = drawerId ? allPopups.find((p) => p.getAttribute("data-drawer-id") === drawerId) : null; if (drawerId && !myPopup) { return; } if (myPopup?.hasAttribute("data-nested-drawer-open")) { return; } const frontmostPopup = allPopups.at(-1); if (myPopup && frontmostPopup && myPopup !== frontmostPopup) { return; } const now = Date.now(); if (now - lastGlobalDrawerWheelTime < 500) return; if (event.deltaY > 15) { if (snapPoints && snapPoints.length > 0 && !isAtFullSnap) { lastGlobalDrawerWheelTime = now; expandToNextSnapPoint?.(); } } else if (event.deltaY < -15) { lastGlobalDrawerWheelTime = now; if (snapPoints && snapPoints.length > 0) { const currentIndex = findSnapIndex(snapPoints, currentSnapPoint); if (currentIndex > 0) { collapseToPrevSnapPoint?.(); } else if (dismissible) { closeDrawer?.(); } } else if (dismissible) { closeDrawer?.(); } } }, [ onWheel, drawerId, snapPoints, currentSnapPoint, isAtFullSnap, dismissible, expandToNextSnapPoint, collapseToPrevSnapPoint, closeDrawer, ] ); } function DrawerBackdrop({ className, forceRender, onWheel, ...props }: DrawerPrimitive.Backdrop.Props) { const { overlay, drawerId, isNested, snapPoints, keepMounted } = React.useContext(DrawerContext); const handleWheel = useOutsideDrawerWheel(onWheel); const hasSnapPoints = Boolean(snapPoints?.length); const resolvedOverlay = isNested ? "transparent" : overlay; return ( ); } type DrawerViewportProps = { position?: DrawerPosition; variant?: DrawerVariant; } & DrawerPrimitive.Viewport.Props; function DrawerViewport({ className, position, variant = "default", onWheel, ...props }: DrawerViewportProps) { const { dismissible, drawerId, keepMounted } = React.useContext(DrawerContext); const handleWheel = useOutsideDrawerWheel(onWheel); return ( ); } type DrawerPopupProps = { position?: DrawerPosition; variant?: DrawerVariant; showBar?: boolean; level?: DrawerSurfaceLevel; shadowLevel?: DrawerShadowLevel; } & DrawerPrimitive.Popup.Props; type DrawerPopupStyle = DrawerPrimitive.Popup.Props["style"]; type DrawerPopupStyleObject = React.CSSProperties & Record< | "--drawer-generated-shadow" | "--drawer-floating-snap-offset" | "--drawer-snap-offset" | "--drawer-swipe-offset-y", string >; function mergeDrawerPopupStyle( baseStyle: DrawerPopupStyleObject, style: DrawerPopupStyle ): DrawerPopupStyle { if (typeof style === "function") { return (state: DrawerPrimitive.Popup.State) => { return { ...baseStyle, ...style(state), }; }; } return { ...baseStyle, ...style }; } function DrawerPopup({ className, children, style, position: positionProp, variant = "default", showBar = false, level = 5, shadowLevel = 5, ...props }: DrawerPopupProps) { const { dismissible, position: contextPosition, drawerId, snapPoints, currentSnapPoint, lastVisibleSnapPoint, keepMounted, } = React.useContext(DrawerContext); const position = positionProp ?? contextPosition; const usesFloatingSnapPoints = variant === "floating" && position === "bottom" && Boolean(snapPoints?.length); const popupContextValue = React.useMemo(() => { return { position, variant }; }, [position, variant]); const floatingSnapOffset = usesFloatingSnapPoints ? getFloatingDrawerSnapOffset(currentSnapPoint ?? lastVisibleSnapPoint) : "0px"; const popupStyle = mergeDrawerPopupStyle( { "--drawer-generated-shadow": variant === "floating" ? createFloatingShadow(shadowLevel) : createDirectionalShadow(position, shadowLevel), "--drawer-floating-snap-offset": floatingSnapOffset, paddingTop: usesFloatingSnapPoints ? "var(--drawer-floating-snap-offset, 0px)" : undefined, ...(usesFloatingSnapPoints ? {} : { "--drawer-snap-offset": "var(--drawer-snap-point-offset, 0px)", "--drawer-swipe-offset-y": "var(--drawer-swipe-movement-y, 0px)", }), } as DrawerPopupStyleObject, style ); const popupChildren = ( <> {children} {showBar && dismissible && } ); return ( {usesFloatingSnapPoints ? (

{popupChildren}

) : ( popupChildren )} ); } type DrawerHeaderProps = { allowSelection?: boolean; } & useRender.ComponentProps<"div">; function DrawerHeader({ className, allowSelection = false, render, ...props }: DrawerHeaderProps) { const defaultProps = { className: cn( "w-full 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, }); } type DrawerFooterProps = { variant?: "default" | "inset"; sticky?: boolean; allowSelection?: boolean; } & useRender.ComponentProps<"div">; function DrawerFooter({ className, variant = "default", sticky = false, allowSelection = false, render, ...props }: DrawerFooterProps) { const { position: rootPosition, snapPoints } = React.useContext(DrawerContext); const popupContext = React.useContext(DrawerPopupContext); const position = popupContext?.position ?? rootPosition; const isFloating = popupContext?.variant === "floating"; const isFloatingBottom = isFloating && position === "bottom"; const isViewportPinned = sticky && position === "bottom" && !isFloatingBottom; const followsSnapPoint = !sticky && position === "bottom" && !isFloatingBottom && Boolean(snapPoints?.length); const defaultProps = { className: cn( "w-full relative z-10 mt-auto flex flex-col-reverse gap-2 bg-popover px-6 pb-[env(safe-area-inset-bottom,0px)] sm:flex-row sm:justify-end", !sticky && "in-[[data-slot=drawer-panel]]:px-0", (isViewportPinned || followsSnapPoint) && "will-change-transform transition-transform duration-300 ease-out motion-reduce:transition-none motion-reduce:transform-none in-[[data-slot=drawer-popup][data-swiping]]:!transition-none in-[[data-slot=drawer-popup][data-swiping]]:!duration-0 in-[[data-swiping]]:!transition-none in-[[data-swiping]]:!duration-0", isViewportPinned && "transform-[translateY(calc(-1px-var(--drawer-snap-offset,var(--drawer-snap-point-offset,0px))-var(--drawer-swipe-offset-y,var(--drawer-swipe-movement-y,0px))))]", followsSnapPoint && "transform-[translateY(calc(0px-var(--drawer-snap-offset,var(--drawer-snap-point-offset,0px))))]", !allowSelection && "cursor-default", variant === "default" && "rounded-b-xl pt-6 pb-[calc(env(safe-area-inset-bottom,0px)+1.5rem)]", variant === "inset" && "border-t bg-muted pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+1rem)]", isFloating && "rounded-b-2xl!", className ), "data-position": position, "data-sticky": sticky ? "" : undefined, "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 ( ); } type DrawerPanelProps = { scrollFade?: boolean; scrollable?: boolean; allowSelection?: boolean; } & useRender.ComponentProps<"div">; function DrawerPanel({ className, scrollFade = false, scrollable = true, allowSelection = true, render, ...props }: DrawerPanelProps) { const { position, snapPoints } = React.useContext(DrawerContext); const popupContext = React.useContext(DrawerPopupContext); const resolvedPosition = popupContext?.position ?? position; const isBottom = resolvedPosition === "bottom"; const usesFloatingSnapHeight = popupContext?.variant === "floating" && isBottom; const hasSnapPoints = Boolean(snapPoints?.length); const contentRef = React.useRef(null); const scrollAreaRef = React.useRef(null); React.useEffect(() => { if (!scrollable || !isBottom || !hasSnapPoints || usesFloatingSnapHeight) { return; } const contentElement = contentRef.current; const scrollAreaElement = scrollAreaRef.current; if (!contentElement || !scrollAreaElement) return; let animationFrame: number | null = null; const observer = new ResizeObserver(([entry]) => { const height = Math.round( entry.borderBoxSize[0]?.blockSize ?? entry.contentRect.height ); if (height <= 0) return; if (animationFrame !== null) { cancelAnimationFrame(animationFrame); } animationFrame = requestAnimationFrame(() => { const maxHeight = `calc(${height}px - var(--drawer-snap-offset, var(--drawer-snap-point-offset, 0px)) - var(--drawer-swipe-offset-y, var(--drawer-swipe-movement-y, 0px)))`; if (scrollAreaElement.style.maxHeight !== maxHeight) { scrollAreaElement.style.maxHeight = maxHeight; } animationFrame = null; }); }); observer.observe(contentElement); return () => { observer.disconnect(); if (animationFrame !== null) { cancelAnimationFrame(animationFrame); } scrollAreaElement.style.removeProperty("max-height"); }; }, [hasSnapPoints, isBottom, scrollable, usesFloatingSnapHeight]); const defaultProps = { className: cn( "w-full 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) { return (

{content}

); } return content; } type DrawerBarProps = { position?: DrawerPosition; } & useRender.ComponentProps<"div">; function DrawerBar({ className, position: positionProp, render, ...props }: DrawerBarProps) { const { position: contextPosition } = React.useContext(DrawerContext); const position = positionProp ?? contextPosition; const horizontal = position === "left" || position === "right"; const defaultProps = { "aria-hidden": true as const, className: cn( "absolute z-20 flex touch-none items-center justify-center p-3", "cursor-grab active:cursor-grabbing", "after:absolute after:-inset-2 after:pointer-events-auto after:content-['']", horizontal ? "inset-y-0 before:hidden" : "inset-x-0 before:h-1 before:w-12 before:rounded-full before:bg-muted-foreground/25 before:transition-colors before:duration-150 hover:before:bg-muted-foreground/50", 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, }); } function DrawerMenu({ className, render, ...props }: useRender.ComponentProps<"nav">) { const defaultProps = { className: cn("flex flex-col", className), "data-slot": "drawer-menu", }; return useRender({ defaultTagName: "nav", props: mergeProps<"nav">(defaultProps, props), render, }); } function DrawerMenuRow({ className, render, ...props }: useRender.ComponentProps<"div">) { const defaultProps = { className: cn( "flex min-h-11 w-full items-center gap-3 rounded-md px-2 py-1 text-base text-foreground sm:min-h-9 sm:text-sm", className ), "data-slot": "drawer-menu-row", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } function DrawerMenuItem({ className, variant = "default", render, disabled, ...props }: useRender.ComponentProps<"button"> & { variant?: "default" | "destructive"; }) { const defaultProps = { className: cn( "flex min-h-11 w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1 text-base text-foreground outline-none hover:bg-muted hover:text-accent-foreground focus-visible:outline-ring/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid disabled:pointer-events-none disabled:opacity-60 data-[variant=destructive]:text-destructive sm:min-h-9 sm:text-sm motion-reduce:transition-none [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>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, }); } function DrawerMenuSeparator({ className, render, ...props }: useRender.ComponentProps<"div">) { const defaultProps = { className: cn("mx-2 my-2 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 font-medium text-muted-foreground text-xs", 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} ); } export { Drawer, DrawerBackdrop, DrawerBar, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerMenu, DrawerMenuItem, DrawerMenuGroup, DrawerMenuGroupLabel, DrawerMenuRow, DrawerMenuSeparator, DrawerMenuTrigger, DrawerPanel, DrawerPopup, DrawerPortal, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, createDrawerHandle, DrawerPrimitive, }; export type { DrawerFooterProps, DrawerHeaderProps, DrawerPanelProps, DrawerPopupProps, DrawerProps, DrawerViewportProps, DrawerPosition, }; 4f:["$","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"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@iandefined","registryDependencies":["https://ui.iandefined.com/r/scroll-area.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/base/drawer.tsx","content":"$52","type":"registry:ui","target":"components/ui/drawer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]