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:T479a,"use client"; import { cx, type VariantProps } from "cva"; import { PanelLeftIcon } from "lucide-react"; import { createContext, use, useCallback, useEffect, useMemo, useState, } from "react"; import { composeRenderProps, Link } from "react-aria-components"; import { useIsMobile } from "~/registry/hooks/use-is-mobile"; import { cn } from "~/registry/lib/cva"; import { Button, RACButton } from "~/registry/ui/button"; import { Input } from "~/registry/ui/input"; import { Separator } from "~/registry/ui/separator"; import { Sheet, SheetDescription, SheetHeader, SheetTitle, } from "~/registry/ui/sheet"; import { Skeleton } from "~/registry/ui/skeleton"; import { Tooltip, type TooltipContent } from "~/registry/ui/tooltip"; import { SidebarStyles } from "./styles"; const SIDEBAR_COOKIE_NAME = "sidebar_state"; const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; const SIDEBAR_WIDTH = "16rem"; const SIDEBAR_WIDTH_MOBILE = "18rem"; const SIDEBAR_WIDTH_ICON = "3rem"; const SIDEBAR_KEYBOARD_SHORTCUT = "b"; interface SidebarContextProps { isMobile: boolean; open: boolean; openMobile: boolean; setOpen: (open: boolean) => void; setOpenMobile: (open: boolean) => void; state: "expanded" | "collapsed"; toggleSidebar: () => void; } const SidebarContext = createContext(null); export function useSidebar() { const context = use(SidebarContext); if (!context) { throw new Error("useSidebar must be used within a SidebarProvider."); } return context; } export interface SidebarProviderProps extends React.ComponentProps<"div"> { defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; open?: boolean; } export function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: SidebarProviderProps) { const isMobile = useIsMobile(); const [openMobile, setOpenMobile] = useState(false); // This is the internal state of the sidebar. // We use openProp and setOpenProp for control from outside the component. const [_open, _setOpen] = useState(defaultOpen); const open = openProp ?? _open; const setOpen = useCallback( (value: boolean | ((value: boolean) => boolean)) => { const openState = typeof value === "function" ? value(open) : value; if (setOpenProp) { setOpenProp(openState); } else { _setOpen(openState); } // This sets the cookie to keep the sidebar state. cookieStore.set({ expires: new Date(Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000).getTime(), name: SIDEBAR_COOKIE_NAME, path: "/", value: openState.toString(), }); }, [setOpenProp, open] ); // Helper to toggle the sidebar. const toggleSidebar = useCallback( () => isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open), [isMobile, setOpen] ); // Adds a keyboard shortcut to toggle the sidebar. useEffect(() => { const controller = new AbortController(); window.addEventListener( "keydown", (e) => { if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) { e.preventDefault(); toggleSidebar(); } }, { signal: controller.signal } ); return () => controller.abort(); }, [toggleSidebar]); // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. const state = open ? "expanded" : "collapsed"; const contextValue = useMemo( () => ({ isMobile, open, openMobile, setOpen, setOpenMobile, state, toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, toggleSidebar] ); return (

{children}

); } export interface SidebarRootProps extends React.ComponentProps<"div"> { collapsible?: "offcanvas" | "icon" | "none"; side?: "left" | "right"; variant?: "sidebar" | "floating" | "inset"; } export function SidebarRoot({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }: SidebarRootProps) { const { isMobile, state, openMobile, setOpenMobile } = useSidebar(); if (collapsible === "none") { return (

{children}

); } if (isMobile) { return ( Sidebar Displays the mobile sidebar.

{children}

); } return (

{/* This is what handles the sidebar gap on desktop */}

); } export interface SidebarTriggerProps extends React.ComponentProps {} export function SidebarTrigger({ className, onPress, ...props }: SidebarTriggerProps) { const { toggleSidebar } = useSidebar(); return ( ); } export interface SidebarRailProps extends React.ComponentProps {} export function SidebarRail({ className, ...props }: SidebarRailProps) { const { toggleSidebar } = useSidebar(); return ( ); } export interface SidebarInsetProps extends React.ComponentProps<"main"> {} export function SidebarInset({ className, ...props }: SidebarInsetProps) { return (

); } export interface SidebarInputProps extends React.ComponentProps {} export function SidebarInput({ className, ...props }: SidebarInputProps) { return ( SidebarStyles.Input({ className }) )} data-sidebar="input" data-slot="sidebar-input" {...props} /> ); } export interface SidebarHeaderProps extends React.ComponentProps<"div"> {} export function SidebarHeader({ className, ...props }: SidebarHeaderProps) { return (

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

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

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

); } export interface SidebarGroupLabelProps extends React.ComponentProps<"div"> {} export function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps) { return (

); } export interface SidebarGroupActionProps extends React.ComponentProps {} export function SidebarGroupAction({ className, ...props }: SidebarGroupActionProps) { return ( SidebarStyles.GroupAction({ className }) )} data-sidebar="group-action" data-slot="sidebar-group-action" {...props} /> ); } export interface SidebarGroupContentProps extends React.ComponentProps<"div"> {} export function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps) { return (

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

); } export interface SidebarMenuButtonProps extends React.ComponentProps
, VariantProps
{ isActive?: boolean; tooltip?: string | React.ComponentProps
; } export function SidebarMenuButton({ isActive = false, variant = "default", size = "default", tooltip, className, ...props }: SidebarMenuButtonProps) { const { isMobile, state } = useSidebar(); const button = (
SidebarStyles.MenuButton({ className, size, variant }) )} data-active={isActive} data-sidebar="menu-button" data-size={size} data-slot="sidebar-menu-button" {...props} /> ); if (!tooltip) { return button; } if (typeof tooltip === "string") { tooltip = { children: tooltip, }; } return ( {button} ); } export interface SidebarMenuLinkProps extends React.ComponentProps, VariantProps { isActive?: boolean; tooltip?: string | React.ComponentProps; } export function SidebarMenuLink({ isActive = false, variant = "default", size = "default", tooltip, className, ...props }: SidebarMenuLinkProps) { const { isMobile, state } = useSidebar(); const link = ( SidebarStyles.MenuButton({ className, size, variant }) )} data-active={isActive} data-sidebar="menu-link" data-size={size} data-slot="sidebar-menu-link" {...props} /> ); if (!tooltip) { return link; } if (typeof tooltip === "string") { tooltip = { children: tooltip, }; } return ( {link} ); } export interface SidebarMenuActionProps extends React.ComponentProps, VariantProps {} export function SidebarMenuAction({ className, showOnHover = false, ...props }: SidebarMenuActionProps) { return ( SidebarStyles.MenuAction({ className, showOnHover, }) )} data-sidebar="menu-action" data-slot="sidebar-menu-action" {...props} /> ); } export interface SidebarMenuBadgeProps extends React.ComponentProps<"div"> {} export function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps) { return (
); } export interface SidebarMenuSkeletonProps extends React.ComponentProps<"div"> { showIcon?: boolean; } export function SidebarMenuSkeleton({ className, showIcon = false, ...props }: SidebarMenuSkeletonProps) { // Random width between 50 to 90%. const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []); return (
{showIcon && ( )}
); } export interface SidebarMenuSubProps extends React.ComponentProps<"ul"> {} export function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) { return (
); } export interface SidebarMenuSubItemProps extends React.ComponentProps<"li"> {} export function SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps) { return (
); } export interface SidebarMenuSubButtonProps extends React.ComponentProps, VariantProps { isActive?: boolean; } export function SidebarMenuSubButton({ size = "md", isActive = false, className, ...props }: SidebarMenuSubButtonProps) { return ( ); } 52:T1c0d,import { cva } from "~/registry/lib/cva"; export const SidebarStyles = { Content: cva({ base: [ "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", ], }), Group: cva({ base: ["relative flex w-full min-w-0 flex-col p-2"], }), GroupAction: cva({ base: [ "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>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", ], }), GroupContent: cva({ base: ["w-full text-sm"], }), Header: cva({ base: ["flex flex-col gap-2 p-2"], }), Inner: cva({ base: [ "flex size-full flex-col bg-sidebar", "group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border", "group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm", ], }), Input: cva({ base: ["h-8 w-full bg-background shadow-none"], }), Inset: cva({ base: [ "relative flex w-full flex-1 flex-col bg-background", "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0", "md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm", ], }), Label: cva({ base: [ "flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", ], }), Menu: cva({ base: ["flex w-full min-w-0 flex-col gap-1"], }), MenuAction: cva({ base: [ "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>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", ], defaultVariants: { showOnHover: false, }, variants: { showOnHover: { true: [ "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0", ], }, }, }), MenuBadge: cva({ base: [ "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "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", ], }), MenuButton: cva({ base: [ "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding,color,background-color] 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 group-has-data-[sidebar=menu-action]/menu-item:pr-8 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 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", ], defaultVariants: { size: "default", variant: "default", }, variants: { size: { default: "h-8 text-sm", lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!", sm: "h-7 text-xs", }, variant: { default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]", }, }, }), MenuItem: cva({ base: ["group/menu-item relative"], }), MenuSubButton: cva({ base: [ "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "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 [&>svg]:text-sidebar-accent-foreground", "active:bg-sidebar-accent active:text-sidebar-accent-foreground", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", "group-data-[collapsible=icon]:hidden", ], defaultVariants: { size: "md", }, variants: { size: { md: "text-sm", sm: "text-xs", }, }, }), Provider: cva({ base: [ "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", ], }), Rail: cva({ base: [ "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4", "after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", ], }), Root: cva({ variants: { collapsible: { none: [ "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", ], }, }, }), Separator: cva({ base: ["mx-2 w-auto bg-sidebar-border"], }), }; 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":[null,["$","$L4f",null,{"namespace":"@kanpeki","registryDependencies":["@kanpeki/use-is-mobile","@kanpeki/button","@kanpeki/input","@kanpeki/separator","@kanpeki/sheet","@kanpeki/skeleton","@kanpeki/tooltip"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/ui/sidebar/index.tsx","content":"export * as Sidebar from \"./namespace\";\nexport * from \"./sidebar\";\nexport * from \"./styles\";\n","type":"registry:ui"},{"path":"src/registry/ui/sidebar/sidebar.tsx","content":"$51","type":"registry:ui"},{"path":"src/registry/ui/sidebar/styles.ts","content":"$52","type":"registry:ui"},{"path":"src/registry/ui/sidebar/namespace.ts","content":"export {\n SidebarContent as Content,\n SidebarFooter as Footer,\n SidebarGroup as Group,\n SidebarGroupAction as GroupAction,\n SidebarGroupContent as GroupContent,\n SidebarGroupLabel as GroupLabel,\n SidebarHeader as Header,\n SidebarInput as Input,\n SidebarInset as Inset,\n SidebarMenu as Menu,\n SidebarMenuAction as MenuAction,\n SidebarMenuBadge as MenuBadge,\n SidebarMenuButton as MenuButton,\n SidebarMenuItem as MenuItem,\n SidebarMenuLink as MenuLink,\n SidebarMenuSkeleton as MenuSkeleton,\n SidebarMenuSub as MenuSub,\n SidebarMenuSubButton as MenuSubButton,\n SidebarMenuSubItem as MenuSubItem,\n SidebarProvider as Provider,\n SidebarRail as Rail,\n SidebarRoot as Root,\n SidebarSeparator as Separator,\n SidebarTrigger as Trigger,\n} from \"./sidebar\";\n","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]