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:T4ade,"use client"; import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"; import { cva } from "class-variance-authority"; import { cn } from "cn"; import { XIcon } from "lucide-react"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { ScrollArea, ScrollAreaContent } from "@/components/ui/scroll-area"; type SheetSide = "right" | "left" | "top" | "bottom"; type SheetVariant = "default" | "floating"; type SheetFooterVariant = "default" | "inset"; type SheetSurfaceLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; type SheetShadowLevel = number; type SheetFadeEdge = "top" | "bottom" | "left" | "right" | "x" | "y"; type SheetFadeEdges = boolean | SheetFadeEdge | SheetFadeEdge[]; type SheetOverlay = "blur" | "brightness" | "transparent"; type SheetOnOpenChange = NonNullable< DialogPrimitive.Root.Props["onOpenChange"] >; type SheetConfigContextValue = { modal: boolean | "trap-focus"; side: SheetSide | null; overlay: SheetOverlay; }; const SheetConfigContext = React.createContext({ modal: true, side: null, overlay: "blur", }); const sheetShadowClasses: 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 sheetGeneratedShadowClass = "shadow-[var(--sheet-generated-shadow)]"; const sheetShadowDirections: 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: SheetShadowLevel) { 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(2, Math.round(2 + 2 * scale ** 2.2)); const spread = -Math.round(scale ** 1.3); const opacity = Math.min(0.1, 0.05 + 0.05 * scale); const formatShadow = ( shadowDistance: number, shadowBlur: number, shadowSpread: number, shadowOpacity: number ) => `${direction[0] * shadowDistance}px ${direction[1] * shadowDistance}px ${shadowBlur}px ${shadowSpread}px rgb(0 0 0 / ${shadowOpacity.toFixed(3)})`; const primaryShadow = formatShadow(distance, blur, spread, opacity); if (scale === 0) { return primaryShadow; } const ambientBlur = Math.max(2, Math.round(1 + 1.25 * scale ** 1.8)); const ambientSpread = -Math.round(1.2 * scale ** 1.15); const ambientShadow = formatShadow( Math.round(distance / 2), ambientBlur, ambientSpread, opacity ); return `${primaryShadow}, ${ambientShadow}`; } function createDirectionalShadow(side: SheetSide, level: SheetShadowLevel) { return createShadow(sheetShadowDirections[side], level); } function createFloatingShadow(level: SheetShadowLevel) { return createShadow([0, 0], level); } function isSheetSurfaceLevel( level: SheetShadowLevel ): level is SheetSurfaceLevel { return Number.isInteger(level) && level >= 1 && level <= 8; } function getSheetShadowClass( variant: SheetVariant, shadowLevel: SheetShadowLevel ) { if (variant === "floating" && isSheetSurfaceLevel(shadowLevel)) { return sheetShadowClasses[shadowLevel]; } return sheetGeneratedShadowClass; } const sheetBorderClasses: Record = { bottom: "border-t", left: "border-r", right: "border-l", top: "border-b", }; const sheetNestedSurfaceClasses: Record = { bottom: "data-nested-dialog-open:rounded-t-2xl data-nested-dialog-open:border-border/50", left: "data-nested-dialog-open:rounded-e-2xl data-nested-dialog-open:border-border/50", right: "data-nested-dialog-open:rounded-s-2xl data-nested-dialog-open:border-border/50", top: "data-nested-dialog-open:rounded-b-2xl data-nested-dialog-open:border-border/50", }; const sheetContentVariants = cva( [ "pointer-events-auto fixed z-50 flex max-h-full min-h-0 max-w-full min-w-0 flex-col overflow-hidden bg-popover text-popover-foreground outline-hidden will-change-transform", "transition-[translate,scale,box-shadow,border-color,border-radius,opacity] duration-300 ease-out motion-reduce:transition-none motion-reduce:[translate:none] motion-reduce:[scale:1]", "[--inset:0px]", "[--peek:1.5rem] [--stack-step:0.05]", "[--stack-progress:0]", "[--scale-base:calc(max(0,1-(var(--nested-dialogs)*var(--stack-step))))]", "[--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)]", "[--stack-peek-offset:max(0px,calc((var(--nested-dialogs)-var(--stack-progress))*var(--peek)))]", "[--stack-limit:3] [opacity:clamp(0,calc(var(--stack-limit)-var(--nested-dialogs)),1)]", "data-nested-dialog-open:pointer-events-none", "data-ending-style:shadow-transparent data-starting-style:shadow-transparent", "before:pointer-events-none before:absolute before:inset-0 before:z-10 before:hidden before:rounded-[inherit] before:bg-black/15 before:opacity-0 before:transition-[opacity,display] before:duration-300 before:transition-discrete", "data-nested-dialog-open:before:block data-nested-dialog-open:before:opacity-100", "starting:data-nested-dialog-open:before:opacity-0", ], { variants: { variant: { default: "", floating: "[--inset:1rem] max-h-[calc(100%-2rem)] rounded-2xl border border-border", }, side: { top: "w-full", right: "", bottom: "w-full", left: "", }, }, compoundVariants: [ { variant: "floating", side: "right", class: "inset-y-4 end-4 w-3/4 max-w-sm origin-left data-nested-dialog-open:[translate:calc(0px-var(--stack-peek-offset))_0] data-nested-dialog-open:[scale:var(--scale)] data-ending-style:[translate:calc(100%+1rem)_0] data-starting-style:[translate:calc(100%+1rem)_0]", }, { variant: "floating", side: "left", class: "inset-y-4 start-4 w-3/4 max-w-sm origin-right data-nested-dialog-open:[translate:var(--stack-peek-offset)_0] data-nested-dialog-open:[scale:var(--scale)] data-ending-style:[translate:calc(-100%-1rem)_0] data-starting-style:[translate:calc(-100%-1rem)_0]", }, { variant: "floating", side: "top", class: "inset-x-4 top-4 w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] origin-[50%_var(--inset)] data-nested-dialog-open:[translate:0_var(--stack-peek-offset)] data-nested-dialog-open:[scale:var(--scale)] data-ending-style:[translate:0_calc(-100%-1rem)] data-starting-style:[translate:0_calc(-100%-1rem)]", }, { variant: "floating", side: "bottom", class: "inset-x-4 bottom-4 w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] origin-[50%_calc(100%-var(--inset))] data-nested-dialog-open:[translate:0_calc(0px-var(--stack-peek-offset))] data-nested-dialog-open:[scale:var(--scale)] data-ending-style:[translate:0_calc(100%+1rem)] data-starting-style:[translate:0_calc(100%+1rem)]", }, { variant: "default", side: "right", class: "inset-y-0 end-0 w-3/4 origin-left sm:max-w-sm data-nested-dialog-open:[translate:calc(0px-var(--stack-peek-offset))_0] data-nested-dialog-open:[scale:var(--scale)] data-ending-style:[translate:100%_0] data-starting-style:[translate:100%_0]", }, { variant: "default", side: "left", class: "inset-y-0 start-0 w-3/4 origin-right sm:max-w-sm data-nested-dialog-open:[translate:var(--stack-peek-offset)_0] data-nested-dialog-open:[scale:var(--scale)] data-ending-style:[translate:-100%_0] data-starting-style:[translate:-100%_0]", }, { variant: "default", side: "top", class: "inset-x-0 top-0 origin-[50%_var(--inset)] data-nested-dialog-open:[translate:0_var(--stack-peek-offset)] data-nested-dialog-open:[scale:var(--scale)] data-ending-style:[translate:0_-100%] data-starting-style:[translate:0_-100%]", }, { variant: "default", side: "bottom", class: "inset-x-0 bottom-0 origin-[50%_calc(100%-var(--inset))] data-nested-dialog-open:[translate:0_calc(0px-var(--stack-peek-offset))] data-nested-dialog-open:[scale:var(--scale)] data-ending-style:[translate:0_100%] data-starting-style:[translate:0_100%]", }, ], defaultVariants: { variant: "default", side: "right", }, } ); type SheetProps = { dismissible?: boolean; overlay?: SheetOverlay; } & DialogPrimitive.Root.Props; function Sheet({ dismissible = true, modal = true, overlay = "blur", disablePointerDismissal, onOpenChange, ...props }: SheetProps) { const parentConfig = React.useContext(SheetConfigContext); 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; } onOpenChange?.(nextOpen, eventDetails); }, [dismissible, onOpenChange] ); const configValue = React.useMemo(() => { return { modal, side: parentConfig.side, overlay }; }, [modal, overlay, parentConfig.side]); return ( ); } const createSheetHandle = DialogPrimitive.createHandle; function SheetPortal({ ...props }: DialogPrimitive.Portal.Props) { return ; } function SheetTrigger({ ...props }: DialogPrimitive.Trigger.Props) { return ; } function SheetCloseTrigger({ ...props }: DialogPrimitive.Close.Props) { return ; } function SheetBackdrop({ className, overlay = "blur", ...props }: DialogPrimitive.Backdrop.Props & { overlay?: SheetOverlay }) { return ( ); } type SheetViewportProps = DialogPrimitive.Viewport.Props; function SheetViewport({ className, ...props }: DialogPrimitive.Viewport.Props) { return ( ); } type SheetContentProps = { side?: SheetSide; variant?: SheetVariant; footerVariant?: SheetFooterVariant; showCloseButton?: boolean; level?: SheetSurfaceLevel; shadowLevel?: SheetShadowLevel; } & DialogPrimitive.Popup.Props; type SheetContentStyle = DialogPrimitive.Popup.Props["style"]; type SheetContentStyleObject = React.CSSProperties & Record<"--sheet-generated-shadow", string | undefined>; function mergeSheetContentStyle( baseStyle: SheetContentStyleObject, style: SheetContentStyle ): SheetContentStyle { if (typeof style === "function") { return (state: DialogPrimitive.Popup.State) => { return { ...baseStyle, ...style(state), }; }; } return { ...baseStyle, ...style }; } function SheetContent({ className, children, style, side: sideProp, variant = "default", footerVariant = "default", showCloseButton = true, level = 5, shadowLevel = 5, ...props }: SheetContentProps) { const parentConfig = React.useContext(SheetConfigContext); const side = parentConfig.side ?? sideProp ?? "right"; const { modal, overlay } = parentConfig; const isModal = modal === true; const isNested = parentConfig.side !== null; const shadowClass = getSheetShadowClass(variant, shadowLevel); const generatedShadow = React.useMemo(() => { if (shadowClass !== sheetGeneratedShadowClass) { return undefined; } return variant === "floating" ? createFloatingShadow(shadowLevel) : createDirectionalShadow(side, shadowLevel); }, [shadowClass, shadowLevel, side, variant]); const contentConfig = React.useMemo(() => { return { modal, overlay, side }; }, [modal, overlay, side]); return ( {isModal && ( )} {children} {showCloseButton && ( } > )} ); } function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } function getScrollShadow(fadeEdges: SheetFadeEdges) { if (fadeEdges === false) return "none" as const; if (fadeEdges === true) return "both" as const; const edges = Array.isArray(fadeEdges) ? fadeEdges : [fadeEdges]; const hasVertical = edges.some((edge) => ["top", "bottom", "y"].includes(edge) ); const hasHorizontal = edges.some((edge) => ["left", "right", "x"].includes(edge) ); if (hasVertical && hasHorizontal) return "both" as const; if (hasVertical) return "vertical" as const; if (hasHorizontal) return "horizontal" as const; return "none" as const; } type SheetBodyProps = { nativeScroll?: boolean; fadeEdges?: SheetFadeEdges; scrollbarGutter?: boolean; persistScrollbar?: boolean; hideScrollbar?: boolean; } & React.ComponentProps<"div">; function SheetBody({ className, nativeScroll = false, fadeEdges = true, scrollbarGutter = false, persistScrollbar = false, hideScrollbar = false, children, ...props }: SheetBodyProps) { const content = (

{children}

); return (

{nativeScroll ? (

{content}

) : ( {content} )}

); } function SheetFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } function SheetTitle({ className, ...props }: DialogPrimitive.Title.Props) { return ( ); } function SheetDescription({ className, ...props }: DialogPrimitive.Description.Props) { return ( ); } export { Sheet, SheetBackdrop, SheetBody, SheetCloseTrigger, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SheetViewport, createSheetHandle, }; export type { SheetBodyProps, SheetContentProps, SheetFadeEdge, SheetFadeEdges, SheetFooterVariant, SheetSide, SheetVariant, SheetViewportProps, }; 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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","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","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/button.json","https://ui.iandefined.com/r/scroll-area.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/base/sheet.tsx","content":"$52","type":"registry:ui","target":"components/ui/sheet.tsx"}],"className":"h-[70svh] min-h-80"}]]}]