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:T7063,"use client"; import * as React from "react"; 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 { cn } from "@/lib/utils"; import { Button } from "@/registry/default/button/button"; import { INNER_EDGE_FROM_ATTACH_SIDE, elevatedSurface, flushSurface, type SurfaceLevel, } from "@/registry/default/lib/elevated"; import { ScrollArea } from "@/registry/default/scroll-area/scroll-area"; import { SwitchVisual, type SwitchVisualProps, } from "@/registry/default/switch/switch"; import { HugeiconsIcon } from "@hugeicons/react"; import { Cancel01Icon, CheckIcon, ChevronRightIcon, } from "@hugeicons/core-free-icons"; // The check draws itself in. `pathLength` restates the path as 1 unit // long, so the dash values are fractions of the stroke and survive a HugeIcons // reshape. Deriving the icon array is the only way to reach the path. const checkIcon = CheckIcon.map(([tag, attrs]) => [ tag, { ...attrs, pathLength: 1 }, ]) as typeof CheckIcon; const checkmarkClasses = "[&_path]:ease-out-expo [&_path]:transition-[stroke-dashoffset] [&_path]:duration-150 [&_path]:[stroke-dasharray:1] in-data-checked:[&_path]:[stroke-dashoffset:0] in-data-unchecked:[&_path]:[stroke-dashoffset:1] motion-reduce:[&_path]:transition-none"; type DrawerPosition = "right" | "left" | "top" | "bottom"; const DrawerContext = React.createContext<{ position: DrawerPosition }>({ position: "bottom", }); const directionMap: Record< DrawerPosition, DrawerPrimitive.Root.Props["swipeDirection"] > = { bottom: "down", left: "left", right: "right", top: "up", }; const createBaseDrawerHandle: typeof DrawerPrimitive.createHandle = DrawerPrimitive.createHandle; function BaseDrawer({ swipeDirection, position = "bottom", ...props }: DrawerPrimitive.Root.Props & { position?: DrawerPosition; }) { return ( ); } const BaseDrawerPortal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal; function BaseDrawerTrigger( props: DrawerPrimitive.Trigger.Props, ): React.ReactElement { return ; } function BaseDrawerClose( props: DrawerPrimitive.Close.Props, ): React.ReactElement { return ; } const BaseDrawerContent: typeof DrawerPrimitive.Content = DrawerPrimitive.Content; function BaseDrawerProvider({ ...props }: DrawerPrimitive.Provider.Props) { return ; } function BaseDrawerIndent({ className, ...props }: DrawerPrimitive.Indent.Props) { return ( ); } function BaseDrawerIndentBackground({ className, ...props }: DrawerPrimitive.IndentBackground.Props) { return ( ); } function BaseDrawerSwipeArea({ className, position: positionProp, ...props }: DrawerPrimitive.SwipeArea.Props & { position?: DrawerPosition; }) { const { position: contextPosition } = React.useContext(DrawerContext); const position = positionProp ?? contextPosition; return ( ); } function BaseDrawerBackdrop({ className, ...props }: DrawerPrimitive.Backdrop.Props) { return ( ); } function BaseDrawerViewport({ className, position, variant = "default", ...props }: DrawerPrimitive.Viewport.Props & { position?: DrawerPosition; variant?: "default" | "floating"; }) { return ( ); } function BaseDrawerPopup({ className, children, showCloseButton = false, position: positionProp, variant = "default", showBar = false, level = 5, shadowLevel = 5, ...props }: DrawerPrimitive.Popup.Props & { showCloseButton?: boolean; position?: DrawerPosition; variant?: "default" | "floating"; showBar?: boolean; /** Surface elevation level (1-8). Defaults to 5 — the dialog/sheet/drawer tier. */ level?: SurfaceLevel; /** Shadow weight (1-8). Pinned to 5 by default. */ shadowLevel?: SurfaceLevel; }) { const { position: contextPosition } = React.useContext(DrawerContext); const position = positionProp ?? contextPosition; const portal = ( {children} {showCloseButton && ( } > )} {showBar && } ); // Bottom sheets scroll focused fields clear of the software keyboard and // expose --drawer-keyboard-inset while it's open. if (position !== "bottom") return portal; return ( {portal} ); } function BaseDrawerHeader({ className, allowSelection = false, render, ...props }: useRender.ComponentProps<"div"> & { allowSelection?: boolean; }) { const defaultProps = { className: cn( "flex flex-col gap-2 p-6 in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-panel])]:pb-3 max-sm:pb-4", !allowSelection && "cursor-default", className, ), "data-slot": "base-drawer-header", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render: allowSelection ? : render, }); } function BaseDrawerFooter({ className, variant = "default", allowSelection = true, render, ...props }: useRender.ComponentProps<"div"> & { variant?: "default" | "inset"; allowSelection?: boolean; }) { const defaultProps = { className: cn( "mt-auto flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end", // Bottom inset under the footer content. While a field in the footer has // the software keyboard open, it becomes the keyboard inset: the // (auto-height) popup grows so the footer sits above the keyboard, and // the panel scrolls once the popup hits max height. "[--footer-bottom:var(--safe-bottom,0px)]", "focus-within:[--footer-bottom:max(var(--safe-bottom,0px),var(--drawer-keyboard-inset,0px))]", "transition-[padding] duration-260 ease-[cubic-bezier(.32,.72,0,1)] motion-reduce:transition-none", !allowSelection && "cursor-default", variant === "default" && "in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-panel])]:pt-3 pt-4 pb-[calc(var(--footer-bottom)+1.5rem)]", variant === "inset" && "border-t bg-muted pt-4 pb-[calc(var(--footer-bottom)+1rem)]", className, ), "data-slot": "base-drawer-footer", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render: allowSelection ? : render, }); } function BaseDrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) { return ( ); } function BaseDrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) { return ( ); } function BaseDrawerPanel({ className, scrollFade = false, scrollable = true, allowSelection = true, render, ...props }: useRender.ComponentProps<"div"> & { scrollFade?: boolean; scrollable?: boolean; allowSelection?: boolean; }) { const defaultProps = { className: cn( "p-6 in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-header])]:pt-1 in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-footer]:not(.border-t))]:pb-1", !allowSelection && "cursor-default", className, ), "data-slot": "base-drawer-panel", }; const content = useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render: allowSelection ? : render, }); if (scrollable) { return ( {content} ); } return content; } function BaseDrawerBar({ className, position: positionProp, render, ...props }: useRender.ComponentProps<"div"> & { position?: DrawerPosition; }) { 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 flex touch-none items-center justify-center p-3 before:rounded-full before:bg-muted-foreground/30", 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": "base-drawer-bar", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } function BaseDrawerMenu({ className, render, ...props }: useRender.ComponentProps<"nav">) { const defaultProps = { className: cn("-m-2 flex flex-col", className), "data-slot": "base-drawer-menu", }; return useRender({ defaultTagName: "nav", props: mergeProps<"nav">(defaultProps, props), render, }); } function BaseDrawerMenuItem({ className, variant = "default", render, disabled, ...props }: useRender.ComponentProps<"button"> & { variant?: "default" | "destructive"; }) { 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 focus-visible:outline-ring/50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid hover:bg-surface-hover hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-60 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": "base-drawer-menu-item", "data-variant": variant, disabled, type: "button" as const, }; return useRender({ defaultTagName: "button", props: mergeProps<"button">(defaultProps, props), render, }); } function BaseDrawerMenuSeparator({ className, render, ...props }: useRender.ComponentProps<"div">) { const defaultProps = { className: cn("mx-2 my-1 h-px bg-border", className), "data-slot": "base-drawer-menu-separator", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } function BaseDrawerMenuGroup({ className, render, ...props }: useRender.ComponentProps<"div">) { const defaultProps = { className: cn("flex flex-col", className), "data-slot": "base-drawer-menu-group", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } function BaseDrawerMenuGroupLabel({ 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": "base-drawer-menu-group-label", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } function BaseDrawerMenuTrigger({ className, children, ...props }: DrawerPrimitive.Trigger.Props) { return ( {children} ); } function BaseDrawerMenuCheckboxItem({ className, children, checked, defaultChecked, onCheckedChange, indicator = "check", switchColor = "primary", switchShape = "circle", switchSize = "sm", switchMotion = "default", disabled, render, ...props }: CheckboxPrimitive.Root.Props & { /** Which indicator sits in the right-hand column. `"switch"` is visual only. */ indicator?: "check" | "switch"; /** Checked track colour, when `indicator="switch"`. */ switchColor?: SwitchVisualProps["color"]; /** Thumb silhouette, when `indicator="switch"`. */ switchShape?: SwitchVisualProps["shape"]; /** Thumb size, when `indicator="switch"`. Defaults to `sm` for the drawer's taller touch rows. */ switchSize?: SwitchVisualProps["size"]; /** How the thumb travels, when `indicator="switch"`. */ switchMotion?: SwitchVisualProps["motion"]; render?: React.ReactElement; }) { return ( {children} {indicator === "switch" ? ( } /> ) : ( )} ); } function BaseDrawerMenuRadioGroup({ className, ...props }: RadioGroupPrimitive.Props) { return ( ); } function BaseDrawerMenuRadioItem({ className, children, value, disabled, render, ...props }: RadioPrimitive.Root.Props & { value: string; render?: React.ReactElement; }) { return ( {children} {/* Radio.Indicator, like Checkbox.Indicator, leaves aria-hidden to us. */} ); } export { BaseDrawer, BaseDrawerBackdrop, BaseDrawerBar, BaseDrawerClose, BaseDrawerContent, BaseDrawerDescription, BaseDrawerFooter, BaseDrawerHeader, BaseDrawerIndent, BaseDrawerIndentBackground, BaseDrawerMenu, BaseDrawerMenuCheckboxItem, BaseDrawerMenuItem, BaseDrawerMenuGroup, BaseDrawerMenuGroupLabel, BaseDrawerMenuRadioGroup, BaseDrawerMenuRadioItem, BaseDrawerMenuSeparator, BaseDrawerMenuTrigger, BaseDrawerPanel, BaseDrawerPopup, BaseDrawerPortal, BaseDrawerProvider, BaseDrawerSwipeArea, BaseDrawerTitle, BaseDrawerTrigger, BaseDrawerViewport, createBaseDrawerHandle, DrawerPrimitive, }; export type { DrawerPosition }; 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","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%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":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L51",null,{"namespace":"@cubby-ui","registryDependencies":["@cubby-ui/button","@cubby-ui/scroll-area","@cubby-ui/switch","@cubby-ui/elevated"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/base-drawer/base-drawer.tsx","content":"$53","type":"registry:ui","target":"components/ui/cubby-ui/base-drawer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]