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

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

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

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

); } function SidebarGroupLabel({ className, asChild = false, ...props }: React.ComponentProps<"div"> & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "div"; return ( svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className, )} {...props} /> ); } function SidebarGroupAction({ className, asChild = false, children, ...props }: React.ComponentProps<"button"> & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "button"; return ( svg]:size-4 [&>svg]:shrink-0", // Increases the hit area of the button on mobile. "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", className, )} {...props} > {children} ); } function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) { return (

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

); } const sidebarMenuButtonVariants = cva( "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", { variants: { variant: { default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]", }, size: { default: "h-8 text-sm", sm: "h-7 text-xs", lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!", }, }, defaultVariants: { variant: "default", size: "default", }, }, ); function SidebarMenuButton({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, children, ...props }: React.ComponentProps<"button"> & { asChild?: boolean; isActive?: boolean; tooltip?: string | React.ComponentProps
; } & VariantProps
) { const Comp = asChild ? Slot.Root : "button"; const { isMobile, state } = useSidebar(); const button = ( {children} ); if (!tooltip) { return button; } if (typeof tooltip === "string") { tooltip = { children: tooltip, }; } return ( {button} ); } function SidebarMenuAction({ className, asChild = false, showOnHover = false, children, ...props }: React.ComponentProps<"button"> & { asChild?: boolean; showOnHover?: boolean; }) { const Comp = asChild ? Slot.Root : "button"; return ( svg]:size-4 [&>svg]:shrink-0", // Increases the hit area of the button on mobile. "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0", className, )} {...props} > {children} ); } function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) { return (
); } function SidebarMenuSkeleton({ className, showIcon = false, ...props }: React.ComponentProps<"div"> & { showIcon?: boolean; }) { // Random width between 50 to 90%. const width = React.useMemo(() => { return `${Math.floor(Math.random() * 40) + 50}%`; }, []); return (
{showIcon && ( )}
); } function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) { return (
- ); } function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, children, ...props }: React.ComponentProps<"a"> & { asChild?: boolean; size?: "sm" | "md"; isActive?: boolean; }) { const Comp = asChild ? Slot.Root : "a"; return ( svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className, )} {...props} > {children} ); } export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, }; 53:Taf6,"use client"; import { useCallback, useSyncExternalStore } from "react"; const BREAKPOINTS = { "2xl": 1536, "3xl": 1600, "4xl": 2000, lg: 1024, md: 800, sm: 640, xl: 1280, } as const; type Breakpoint = keyof typeof BREAKPOINTS; type BreakpointQuery = | Breakpoint | `max-${Breakpoint}` | `${Breakpoint}:max-${Breakpoint}`; function resolveMin(value: Breakpoint | number): string { const px = typeof value === "number" ? value : BREAKPOINTS[value]; return `(min-width: ${px}px)`; } function resolveMax(value: Breakpoint | number): string { const px = typeof value === "number" ? value : BREAKPOINTS[value]; return `(max-width: ${px - 1}px)`; } function parseQuery( query: BreakpointQuery | MediaQueryInput | (string & {}), ): string { if (typeof query !== "string") { const parts: string[] = []; if (query.min != null) parts.push(resolveMin(query.min)); if (query.max != null) parts.push(resolveMax(query.max)); if (query.pointer === "coarse") parts.push("(pointer: coarse)"); if (query.pointer === "fine") parts.push("(pointer: fine)"); if (parts.length === 0) return "(min-width: 0px)"; return parts.join(" and "); } if (query.startsWith("(")) return query; const parts: string[] = []; for (const segment of query.split(":")) { if (segment.startsWith("max-")) { const bp = segment.slice(4); if (bp in BREAKPOINTS) parts.push(resolveMax(bp as Breakpoint)); } else if (segment in BREAKPOINTS) { parts.push(resolveMin(segment as Breakpoint)); } } return parts.length > 0 ? parts.join(" and ") : query; } function getServerSnapshot(): boolean { return false; } export type MediaQueryInput = { min?: Breakpoint | number; max?: Breakpoint | number; /** Touch-like input (finger). Use "fine" for mouse/trackpad. */ pointer?: "coarse" | "fine"; }; export function useMediaQuery( query: BreakpointQuery | MediaQueryInput | (string & {}), ): boolean { const mediaQuery = parseQuery(query); const subscribe = useCallback( (callback: () => void) => { if ( typeof window === "undefined" || typeof window.matchMedia !== "function" ) { return () => {}; } const mql = window.matchMedia(mediaQuery); mql.addEventListener("change", callback); return () => mql.removeEventListener("change", callback); }, [mediaQuery], ); const getSnapshot = useCallback(() => { if ( typeof window === "undefined" || typeof window.matchMedia !== "function" ) { return false; } return window.matchMedia(mediaQuery).matches; }, [mediaQuery]); return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); } export function useIsMobile(): boolean { return useMediaQuery("max-md"); } 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@^1.4.1",{"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@^1.4.1"}]]}]}],["$","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","class-variance-authority@^0.7.1",{"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@^0.7.1"}]]}]}],["$","li","radix-ui@^1.5.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui@^1.5.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@retab","registryDependencies":["button","@retab/input","@retab/scroll-area","separator","@retab/sidebar-row","@retab/skeleton","@retab/use-mobile","@retab/utils","sheet","tooltip","@retab/effect-key","@retab/use-keyed-mount-effect"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york-v4/ui/sidebar.tsx","content":"$52","type":"registry:ui","target":"@ui/sidebar.tsx"},{"path":"hooks/use-media-query.ts","content":"$53","type":"registry:hook","target":"@hooks/use-media-query.ts"}],"className":"h-[70svh] min-h-80"}]]}]