@mesob/ui 0.2.0 → 0.2.2

package/dist/components/shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/breadcrumb.tsx","../../src/components/tooltip.tsx","../../src/components/mesob-context.tsx","../../src/components/app-breadcrumbs.tsx","../../src/components/separator.tsx","../../src/components/button.tsx","../../src/components/input.tsx","../../src/components/sheet.tsx","../../src/components/skeleton.tsx","../../src/hooks/use-mobile.ts","../../src/components/sidebar.tsx","../../src/components/sonner.tsx","../../src/components/shell.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { IconChevronRight, IconDots } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn('inline-flex items-center gap-1.5', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & {\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn('hover:text-foreground transition-colors', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn('text-foreground font-normal', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('[&>svg]:size-3.5', className)}\n      {...props}\n    >\n      {children ?? <IconChevronRight />}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('flex size-9 items-center justify-center', className)}\n      {...props}\n    >\n      <IconDots className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport type * as React from 'react';\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipPrimitive.Root data-slot=\"tooltip\" {...props}>\n      {children}\n    </TooltipPrimitive.Root>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","'use client';\n\nimport { TooltipProvider } from '@mesob/ui/components/tooltip';\nimport {\n  type ComponentType,\n  createContext,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from 'react';\n\nexport type MesobLinkProps = {\n  href: string;\n  children: ReactNode;\n  className?: string;\n  onClick?: () => void;\n};\n\nexport type Router = {\n  push: (href: string) => void;\n  replace: (href: string) => void;\n  back: () => void;\n  forward: () => void;\n  refresh: () => void;\n  prefetch: (href: string) => void;\n};\n\nexport type MesobContextValue = {\n  linkComponent?: ComponentType<MesobLinkProps>;\n  t?: (key: string, params?: Record<string, string | number>) => string;\n  router?: Router;\n};\n\nconst MesobContext = createContext<MesobContextValue | null>(null);\n\nexport type MesobProviderProps = {\n  children: ReactNode;\n  linkComponent?: ComponentType<MesobLinkProps>;\n  /** Hook that returns the app's t function (e.g. from next-intl useTranslations()). */\n  useTranslation?: () => (\n    key: string,\n    params?: Record<string, string | number>,\n  ) => string;\n  /** Hook that returns the app's router (e.g. from next-intl useRouter()). */\n  useRouter?: () => Router;\n};\n\nexport function MesobProvider({\n  children,\n  linkComponent,\n  useTranslation,\n  useRouter,\n}: MesobProviderProps) {\n  const t = useTranslation?.();\n  const router = useRouter?.();\n  const value = useMemo<MesobContextValue>(\n    () => ({ linkComponent, t: t ?? undefined, router: router ?? undefined }),\n    [linkComponent, t, router],\n  );\n  return (\n    <MesobContext.Provider value={value}>\n      <TooltipProvider delayDuration={0}>{children}</TooltipProvider>\n    </MesobContext.Provider>\n  );\n}\n\nexport function useMesob(): MesobContextValue | null {\n  return useContext(MesobContext);\n}\n","'use client';\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@mesob/ui/components/breadcrumb';\nimport { useMesob } from '@mesob/ui/components/mesob-context';\nimport type * as React from 'react';\nimport {\n  createContext,\n  Fragment,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\ntype BreadcrumbItemData = {\n  label: string;\n  href?: string;\n};\n\ntype BreadcrumbContextValue = {\n  items: BreadcrumbItemData[];\n  setItems: (items: BreadcrumbItemData[]) => void;\n  push: (item: BreadcrumbItemData) => void;\n  pop: () => void;\n  clear: () => void;\n};\n\nconst BreadcrumbContext = createContext<BreadcrumbContextValue | null>(null);\n\ntype UseBreadcrumbsOptions = {\n  items?: BreadcrumbItemData[];\n};\n\nexport function useBreadcrumbs(options?: UseBreadcrumbsOptions) {\n  const context = useContext(BreadcrumbContext);\n  if (!context) {\n    throw new Error('useBreadcrumbs must be used within BreadcrumbProvider');\n  }\n\n  const { setItems } = context;\n  const prevItemsStrRef = useRef<string | undefined>(undefined);\n\n  useEffect(() => {\n    const items = options?.items;\n    if (!items) {\n      return;\n    }\n    const itemsStr = JSON.stringify(items);\n    if (prevItemsStrRef.current !== itemsStr) {\n      prevItemsStrRef.current = itemsStr;\n      setItems(items);\n    }\n  }, [options?.items, setItems]);\n\n  return context;\n}\n\ntype BreadcrumbProviderProps = {\n  children: React.ReactNode;\n  defaultItems?: BreadcrumbItemData[];\n};\n\nexport function BreadcrumbProvider({\n  children,\n  defaultItems = [],\n}: BreadcrumbProviderProps) {\n  const [items, setItems] = useState<BreadcrumbItemData[]>(defaultItems);\n\n  const push = useCallback((item: BreadcrumbItemData) => {\n    setItems((prev) => [...prev, item]);\n  }, []);\n\n  const pop = useCallback(() => {\n    setItems((prev) => prev.slice(0, -1));\n  }, []);\n\n  const clear = useCallback(() => {\n    setItems([]);\n  }, []);\n\n  const value = useMemo(\n    () => ({\n      items,\n      setItems,\n      push,\n      pop,\n      clear,\n    }),\n    [items, push, pop, clear],\n  );\n\n  return (\n    <BreadcrumbContext.Provider value={value}>\n      {children}\n    </BreadcrumbContext.Provider>\n  );\n}\n\ntype AppBreadcrumbsProps = {\n  linkComponent?: React.ComponentType<{\n    href: string;\n    children: React.ReactNode;\n    className?: string;\n  }>;\n  className?: string;\n};\n\nexport function AppBreadcrumbs({\n  linkComponent: linkProp,\n  className,\n}: AppBreadcrumbsProps) {\n  const mesob = useMesob();\n  const Link = linkProp ?? mesob?.linkComponent;\n  const { items } = useBreadcrumbs(undefined);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <Breadcrumb className={className}>\n      <BreadcrumbList>\n        {items.map((crumb, index) => {\n          let content: React.ReactNode;\n          if (crumb.href) {\n            if (Link) {\n              content = (\n                <Link href={crumb.href} className=\"hover:underline\">\n                  {crumb.label}\n                </Link>\n              );\n            } else {\n              content = (\n                <a href={crumb.href} className=\"hover:underline\">\n                  {crumb.label}\n                </a>\n              );\n            }\n          } else {\n            content = <BreadcrumbPage>{crumb.label}</BreadcrumbPage>;\n          }\n\n          return (\n            <Fragment key={`${crumb.label}-${crumb.href ?? ''}-${index}`}>\n              {index > 0 && <BreadcrumbSeparator className=\"hidden md:block\" />}\n              <BreadcrumbItem className={index === 0 ? 'hidden md:block' : ''}>\n                {content}\n              </BreadcrumbItem>\n            </Fragment>\n          );\n        })}\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport type * as React from 'react';\n\nfunction Separator({\n  className,\n  orientation = 'horizontal',\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n","import { cn } from '@mesob/ui/lib/utils';\nimport type * as React from 'react';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as SheetPrimitive from '@radix-ui/react-dialog';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n          side === 'right' &&\n            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',\n          side === 'left' &&\n            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',\n          side === 'top' &&\n            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',\n          side === 'bottom' &&\n            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n          <IconX className=\"size-4\" />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n};\n","import { cn } from '@mesob/ui/lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn('bg-accent animate-pulse rounded-md', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Skeleton };\n","import * as React from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener('change', onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener('change', onChange);\n  }, []);\n\n  return !!isMobile;\n}\n","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { Input } from '@mesob/ui/components/input';\nimport { Separator } from '@mesob/ui/components/separator';\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from '@mesob/ui/components/sheet';\nimport { Skeleton } from '@mesob/ui/components/skeleton';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@mesob/ui/components/tooltip';\nimport { useIsMobile } from '@mesob/ui/hooks/use-mobile';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { IconMenu2 } from '@tabler/icons-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_WIDTH_COOKIE = 'sidebar_width';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH_DEFAULT = 256;\nconst SIDEBAR_WIDTH_MIN = 200;\nconst SIDEBAR_WIDTH_MAX = 480;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\nfunction getWidthFromCookie(): number {\n  if (typeof document === 'undefined') {\n    return SIDEBAR_WIDTH_DEFAULT;\n  }\n  const m = document.cookie.match(\n    new RegExp(`(?:^|; )${SIDEBAR_WIDTH_COOKIE}=([^;]*)`),\n  );\n  const n = m ? Number(m[1]) : Number.NaN;\n  return Number.isFinite(n) && n >= SIDEBAR_WIDTH_MIN && n <= SIDEBAR_WIDTH_MAX\n    ? n\n    : SIDEBAR_WIDTH_DEFAULT;\n}\n\nfunction setWidthCookie(width: number) {\n  document.cookie = `${SIDEBAR_WIDTH_COOKIE}=${width}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n}\n\ntype SidebarContextProps = {\n  state: 'expanded' | 'collapsed';\n  open: boolean;\n  setOpen: (open: boolean | ((open: boolean) => boolean)) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n  width: number;\n  setWidth: (w: number) => void;\n  minWidth: number;\n  maxWidth: number;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n\n  return context;\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}) {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = React.useState(false);\n  const [width, setWidthState] = React.useState(getWidthFromCookie);\n\n  const setWidth = React.useCallback((w: number) => {\n    const clamped = Math.max(SIDEBAR_WIDTH_MIN, Math.min(SIDEBAR_WIDTH_MAX, w));\n    setWidthState(clamped);\n    setWidthCookie(clamped);\n  }, []);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === 'function' ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n    },\n    [open, setOpenProp],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile\n      ? setOpenMobile((value) => !value)\n      : setOpen((value) => !value);\n  }, [isMobile, setOpen]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? 'expanded' : 'collapsed';\n\n  const contextValue: SidebarContextProps = {\n    state,\n    open,\n    setOpen,\n    isMobile,\n    openMobile,\n    setOpenMobile,\n    toggleSidebar,\n    width,\n    setWidth,\n    minWidth: SIDEBAR_WIDTH_MIN,\n    maxWidth: SIDEBAR_WIDTH_MAX,\n  };\n\n  const sidebarWidthValue = open ? `${width}px` : SIDEBAR_WIDTH;\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          data-slot=\"sidebar-wrapper\"\n          style={\n            {\n              '--sidebar-width': sidebarWidthValue,\n              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn(\n            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  );\n}\n\nfunction Sidebar({\n  side = 'left',\n  variant = 'sidebar',\n  collapsible = 'offcanvas',\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  side?: 'left' | 'right';\n  variant?: 'sidebar' | 'floating' | 'inset';\n  collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === 'none') {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === 'collapsed' ? collapsible : ''}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n          'group-data-[collapsible=offcanvas]:w-0',\n          'group-data-[side=right]:rotate-180',\n          variant === 'floating' || variant === 'inset'\n            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n          side === 'left'\n            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n          // Adjust the padding for floating and inset variants.\n          variant === 'floating' || variant === 'inset'\n            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'\n            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          className,\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn('size-7', className)}\n      onClick={(event) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <IconMenu2 />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',\n        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\n        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        'bg-background relative flex w-full flex-1 flex-col',\n        '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 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn('bg-background h-8 w-full shadow-none', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn('flex flex-col gap-2 p-2', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn('flex flex-col gap-2 p-2', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn('bg-sidebar-border mx-2 w-auto', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'div'> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'button'> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn('w-full text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn('flex w-full min-w-0 flex-col gap-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn('group/menu-item relative', className)}\n      {...props}\n    />\n  );\n}\n\nconst sidebarMenuButtonVariants = cva(\n  '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] hover:bg-sidebar-active focus-visible:ring-2 active:bg-sidebar-active 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]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:font-medium data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[\"\"] data-[state=open]:hover:bg-sidebar-active group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 min-w-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-active',\n        outline:\n          '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))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = 'default',\n  size = 'default',\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  isActive?: boolean;\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot : 'button';\n  const { isMobile, state } = useSidebar();\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n\n  if (!tooltip) {\n    return button;\n  }\n\n  if (typeof tooltip === 'string') {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== 'collapsed' || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  showOnHover?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          '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',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showIcon?: boolean;\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(\n    () => `${Math.floor(Math.random() * 40) + 50}%`,\n  );\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'border-sidebar-border relative mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn('group/menu-sub-item relative', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = 'md',\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & {\n  asChild?: boolean;\n  size?: 'sm' | 'md';\n  isActive?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-active active:bg-sidebar-active [&>svg]:text-sidebar-primary 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',\n        'data-[active=true]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[\"\"]',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n};\n","'use client';\n\nimport {\n  IconAlertTriangle,\n  IconCircleCheck,\n  IconInfoCircle,\n  IconLoader2,\n  IconX,\n} from '@tabler/icons-react';\nimport { useTheme } from 'next-themes';\nimport { Toaster as Sonner, type ToasterProps } from 'sonner';\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = 'system' } = useTheme();\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps['theme']}\n      className=\"toaster group\"\n      icons={{\n        success: <IconCircleCheck className=\"size-4\" />,\n        info: <IconInfoCircle className=\"size-4\" />,\n        warning: <IconAlertTriangle className=\"size-4\" />,\n        error: <IconX className=\"size-4\" />,\n        loading: <IconLoader2 className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          '--normal-bg': 'var(--popover)',\n          '--normal-text': 'var(--popover-foreground)',\n          '--normal-border': 'var(--border)',\n          '--border-radius': 'var(--radius)',\n        } as React.CSSProperties & Record<string, string>\n      }\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\nexport { toast } from 'sonner';\n","'use client';\n\nimport {\n  AppBreadcrumbs,\n  BreadcrumbProvider,\n} from '@mesob/ui/components/app-breadcrumbs';\nimport { Separator } from '@mesob/ui/components/separator';\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@mesob/ui/components/sidebar';\nimport { Toaster } from '@mesob/ui/components/sonner';\nimport { cn } from '@mesob/ui/lib/utils';\nimport type * as React from 'react';\n\ntype ShellProps = {\n  sidebar: React.ReactNode;\n  headerActions?: React.ReactNode;\n  children: React.ReactNode;\n  showToaster?: boolean;\n  contentClassName?: string;\n};\n\nexport function Shell({\n  sidebar,\n  headerActions,\n  children,\n  showToaster = true,\n  contentClassName,\n}: ShellProps) {\n  return (\n    <BreadcrumbProvider>\n      <SidebarProvider>\n        {sidebar}\n        <SidebarInset>\n          <header className=\"flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4\">\n            <div className=\"flex items-center gap-2\">\n              <SidebarTrigger className=\"-ml-1\" />\n              <div className=\"hidden md:flex md:items-center md:gap-2\">\n                <Separator\n                  orientation=\"vertical\"\n                  className=\"mr-2 data-[orientation=vertical]:h-4\"\n                />\n                <AppBreadcrumbs />\n              </div>\n            </div>\n            {headerActions}\n          </header>\n          <div\n            className={cn(\n              'flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-4',\n              contentClassName,\n            )}\n          >\n            <div className=\"mx-auto w-full max-w-7xl\">{children}</div>\n          </div>\n        </SidebarInset>\n        {showToaster && <Toaster />}\n      </SidebarProvider>\n    </BreadcrumbProvider>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","createContext","useContext","useMemo","jsx","jsxs","jsx","Slot","jsx","jsx","jsx","jsxs","jsx","Slot","cva","React","jsx","jsxs","jsx","jsxs","jsx","jsx","cva","IconX","jsx","jsx","jsxs"]}
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/breadcrumb.tsx","../../src/components/tooltip.tsx","../../src/components/mesob-context.tsx","../../src/components/app-breadcrumbs.tsx","../../src/components/separator.tsx","../../src/components/button.tsx","../../src/components/input.tsx","../../src/components/sheet.tsx","../../src/components/skeleton.tsx","../../src/hooks/use-mobile.ts","../../src/components/sidebar.tsx","../../src/components/sidebar-context.tsx","../../src/components/sonner.tsx","../../src/components/shell.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { IconChevronRight, IconDots } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn('inline-flex items-center gap-1.5', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & {\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn('hover:text-foreground transition-colors', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn('text-foreground font-normal', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('[&>svg]:size-3.5', className)}\n      {...props}\n    >\n      {children ?? <IconChevronRight />}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('flex size-9 items-center justify-center', className)}\n      {...props}\n    >\n      <IconDots className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport type * as React from 'react';\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipPrimitive.Root data-slot=\"tooltip\" {...props}>\n      {children}\n    </TooltipPrimitive.Root>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","'use client';\n\nimport { TooltipProvider } from '@mesob/ui/components/tooltip';\nimport {\n  type ComponentType,\n  createContext,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from 'react';\n\nexport type MesobLinkProps = {\n  href: string;\n  children: ReactNode;\n  className?: string;\n  onClick?: () => void;\n};\n\nexport type Router = {\n  push: (href: string) => void;\n  replace: (href: string) => void;\n  back: () => void;\n  forward: () => void;\n  refresh: () => void;\n  prefetch: (href: string) => void;\n};\n\nexport type MesobContextValue = {\n  linkComponent?: ComponentType<MesobLinkProps>;\n  t?: (key: string, params?: Record<string, string | number>) => string;\n  router?: Router;\n};\n\nconst MesobContext = createContext<MesobContextValue | null>(null);\n\nexport type MesobProviderProps = {\n  children: ReactNode;\n  linkComponent?: ComponentType<MesobLinkProps>;\n  /** Hook that returns the app's t function (e.g. from next-intl useTranslations()). */\n  useTranslation?: () => (\n    key: string,\n    params?: Record<string, string | number>,\n  ) => string;\n  /** Hook that returns the app's router (e.g. from next-intl useRouter()). */\n  useRouter?: () => Router;\n};\n\nexport function MesobProvider({\n  children,\n  linkComponent,\n  useTranslation,\n  useRouter,\n}: MesobProviderProps) {\n  const t = useTranslation?.();\n  const router = useRouter?.();\n  const value = useMemo<MesobContextValue>(\n    () => ({ linkComponent, t: t ?? undefined, router: router ?? undefined }),\n    [linkComponent, t, router],\n  );\n  return (\n    <MesobContext.Provider value={value}>\n      <TooltipProvider delayDuration={0}>{children}</TooltipProvider>\n    </MesobContext.Provider>\n  );\n}\n\nexport function useMesob(): MesobContextValue | null {\n  return useContext(MesobContext);\n}\n","'use client';\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@mesob/ui/components/breadcrumb';\nimport { useMesob } from '@mesob/ui/components/mesob-context';\nimport type * as React from 'react';\nimport {\n  createContext,\n  Fragment,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\ntype BreadcrumbItemData = {\n  label: string;\n  href?: string;\n};\n\ntype BreadcrumbContextValue = {\n  items: BreadcrumbItemData[];\n  setItems: (items: BreadcrumbItemData[]) => void;\n  push: (item: BreadcrumbItemData) => void;\n  pop: () => void;\n  clear: () => void;\n};\n\nconst BreadcrumbContext = createContext<BreadcrumbContextValue | null>(null);\n\ntype UseBreadcrumbsOptions = {\n  items?: BreadcrumbItemData[];\n};\n\nexport function useBreadcrumbs(options?: UseBreadcrumbsOptions) {\n  const context = useContext(BreadcrumbContext);\n  if (!context) {\n    throw new Error('useBreadcrumbs must be used within BreadcrumbProvider');\n  }\n\n  const { setItems } = context;\n  const prevItemsStrRef = useRef<string | undefined>(undefined);\n\n  useEffect(() => {\n    const items = options?.items;\n    if (!items) {\n      return;\n    }\n    const itemsStr = JSON.stringify(items);\n    if (prevItemsStrRef.current !== itemsStr) {\n      prevItemsStrRef.current = itemsStr;\n      setItems(items);\n    }\n  }, [options?.items, setItems]);\n\n  return context;\n}\n\ntype BreadcrumbProviderProps = {\n  children: React.ReactNode;\n  defaultItems?: BreadcrumbItemData[];\n};\n\nexport function BreadcrumbProvider({\n  children,\n  defaultItems = [],\n}: BreadcrumbProviderProps) {\n  const [items, setItems] = useState<BreadcrumbItemData[]>(defaultItems);\n\n  const push = useCallback((item: BreadcrumbItemData) => {\n    setItems((prev) => [...prev, item]);\n  }, []);\n\n  const pop = useCallback(() => {\n    setItems((prev) => prev.slice(0, -1));\n  }, []);\n\n  const clear = useCallback(() => {\n    setItems([]);\n  }, []);\n\n  const value = useMemo(\n    () => ({\n      items,\n      setItems,\n      push,\n      pop,\n      clear,\n    }),\n    [items, push, pop, clear],\n  );\n\n  return (\n    <BreadcrumbContext.Provider value={value}>\n      {children}\n    </BreadcrumbContext.Provider>\n  );\n}\n\ntype AppBreadcrumbsProps = {\n  linkComponent?: React.ComponentType<{\n    href: string;\n    children: React.ReactNode;\n    className?: string;\n  }>;\n  className?: string;\n};\n\nexport function AppBreadcrumbs({\n  linkComponent: linkProp,\n  className,\n}: AppBreadcrumbsProps) {\n  const mesob = useMesob();\n  const Link = linkProp ?? mesob?.linkComponent;\n  const { items } = useBreadcrumbs(undefined);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <Breadcrumb className={className}>\n      <BreadcrumbList>\n        {items.map((crumb, index) => {\n          let content: React.ReactNode;\n          if (crumb.href) {\n            if (Link) {\n              content = (\n                <Link href={crumb.href} className=\"hover:underline\">\n                  {crumb.label}\n                </Link>\n              );\n            } else {\n              content = (\n                <a href={crumb.href} className=\"hover:underline\">\n                  {crumb.label}\n                </a>\n              );\n            }\n          } else {\n            content = <BreadcrumbPage>{crumb.label}</BreadcrumbPage>;\n          }\n\n          return (\n            <Fragment key={`${crumb.label}-${crumb.href ?? ''}-${index}`}>\n              {index > 0 && <BreadcrumbSeparator className=\"hidden md:block\" />}\n              <BreadcrumbItem className={index === 0 ? 'hidden md:block' : ''}>\n                {content}\n              </BreadcrumbItem>\n            </Fragment>\n          );\n        })}\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport type * as React from 'react';\n\nfunction Separator({\n  className,\n  orientation = 'horizontal',\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',\n        outline:\n          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\ntype ButtonProps = React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    leftIcon?: React.ReactNode;\n    rightIcon?: React.ReactNode;\n  };\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  leftIcon,\n  rightIcon,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {leftIcon}\n          {children}\n          {rightIcon}\n        </>\n      )}\n    </Comp>\n  );\n}\n\nexport { Button, buttonVariants };\n","import { cn } from '@mesob/ui/lib/utils';\nimport type * as React from 'react';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as SheetPrimitive from '@radix-ui/react-dialog';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          'bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:opacity-100 fixed z-[51] flex min-w-0 flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n          side === 'right' &&\n            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',\n          side === 'left' &&\n            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',\n          side === 'top' &&\n            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',\n          side === 'bottom' &&\n            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n          <IconX className=\"size-4\" />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n};\n","import { cn } from '@mesob/ui/lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn('bg-accent animate-pulse rounded-md', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Skeleton };\n","import * as React from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener('change', onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener('change', onChange);\n  }, []);\n\n  return !!isMobile;\n}\n","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { Input } from '@mesob/ui/components/input';\nimport { Separator } from '@mesob/ui/components/separator';\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from '@mesob/ui/components/sheet';\nimport { Skeleton } from '@mesob/ui/components/skeleton';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@mesob/ui/components/tooltip';\nimport { useIsMobile } from '@mesob/ui/hooks/use-mobile';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { IconMenu2 } from '@tabler/icons-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\nimport {\n  SidebarContext,\n  type SidebarContextProps,\n  useSidebar,\n} from './sidebar-context';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_WIDTH_COOKIE = 'sidebar_width';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH_DEFAULT = 256;\nconst SIDEBAR_WIDTH_MIN = 200;\nconst SIDEBAR_WIDTH_MAX = 480;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\nfunction getWidthFromCookie(): number {\n  if (typeof document === 'undefined') {\n    return SIDEBAR_WIDTH_DEFAULT;\n  }\n  const m = document.cookie.match(\n    new RegExp(`(?:^|; )${SIDEBAR_WIDTH_COOKIE}=([^;]*)`),\n  );\n  const n = m ? Number(m[1]) : Number.NaN;\n  return Number.isFinite(n) && n >= SIDEBAR_WIDTH_MIN && n <= SIDEBAR_WIDTH_MAX\n    ? n\n    : SIDEBAR_WIDTH_DEFAULT;\n}\n\nfunction setWidthCookie(width: number) {\n  document.cookie = `${SIDEBAR_WIDTH_COOKIE}=${width}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}) {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = React.useState(false);\n  const [width, setWidthState] = React.useState(getWidthFromCookie);\n\n  const setWidth = React.useCallback((w: number) => {\n    const clamped = Math.max(SIDEBAR_WIDTH_MIN, Math.min(SIDEBAR_WIDTH_MAX, w));\n    setWidthState(clamped);\n    setWidthCookie(clamped);\n  }, []);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === 'function' ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n    },\n    [open, setOpenProp],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile\n      ? setOpenMobile((value) => !value)\n      : setOpen((value) => !value);\n  }, [isMobile, setOpen]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? 'expanded' : 'collapsed';\n\n  const contextValue: SidebarContextProps = {\n    state,\n    open,\n    setOpen,\n    isMobile,\n    openMobile,\n    setOpenMobile,\n    toggleSidebar,\n    width,\n    setWidth,\n    minWidth: SIDEBAR_WIDTH_MIN,\n    maxWidth: SIDEBAR_WIDTH_MAX,\n  };\n\n  const sidebarWidthValue = open ? `${width}px` : SIDEBAR_WIDTH;\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          data-slot=\"sidebar-wrapper\"\n          style={\n            {\n              '--sidebar-width': sidebarWidthValue,\n              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn(\n            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  );\n}\n\nfunction Sidebar({\n  side = 'left',\n  variant = 'sidebar',\n  collapsible = 'offcanvas',\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  side?: 'left' | 'right';\n  variant?: 'sidebar' | 'floating' | 'inset';\n  collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === 'none') {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === 'collapsed' ? collapsible : ''}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n          'group-data-[collapsible=offcanvas]:w-0',\n          'group-data-[side=right]:rotate-180',\n          variant === 'floating' || variant === 'inset'\n            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n          side === 'left'\n            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n          // Adjust the padding for floating and inset variants.\n          variant === 'floating' || variant === 'inset'\n            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'\n            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          className,\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn('size-7', className)}\n      onClick={(event) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <IconMenu2 />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',\n        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\n        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        'bg-background relative flex w-full flex-1 flex-col',\n        '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 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn('bg-background h-8 w-full shadow-none', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn('flex flex-col gap-2 p-2', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn('flex flex-col gap-2 p-2', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn('bg-sidebar-border mx-2 w-auto', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'div'> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'button'> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn('w-full text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn('flex w-full min-w-0 flex-col gap-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn('group/menu-item relative', className)}\n      {...props}\n    />\n  );\n}\n\nconst sidebarMenuButtonVariants = cva(\n  '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] hover:bg-sidebar-active focus-visible:ring-2 active:bg-sidebar-active 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]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:font-medium data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[\"\"] data-[state=open]:hover:bg-sidebar-active group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 min-w-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-active',\n        outline:\n          '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))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = 'default',\n  size = 'default',\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  isActive?: boolean;\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot : 'button';\n  const { isMobile, state } = useSidebar();\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n\n  if (!tooltip) {\n    return button;\n  }\n\n  if (typeof tooltip === 'string') {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== 'collapsed' || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  showOnHover?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          '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',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showIcon?: boolean;\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(\n    () => `${Math.floor(Math.random() * 40) + 50}%`,\n  );\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'border-sidebar-border relative mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn('group/menu-sub-item relative', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = 'md',\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & {\n  asChild?: boolean;\n  size?: 'sm' | 'md';\n  isActive?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-active active:bg-sidebar-active [&>svg]:text-sidebar-primary 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',\n        'data-[active=true]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[\"\"]',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { useSidebar } from './sidebar-context';\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n};\n","'use client';\n\nimport * as React from 'react';\n\nexport type SidebarContextProps = {\n  state: 'expanded' | 'collapsed';\n  open: boolean;\n  setOpen: (open: boolean | ((open: boolean) => boolean)) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n  width: number;\n  setWidth: (w: number) => void;\n  minWidth: number;\n  maxWidth: number;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n  return context;\n}\n\nexport { SidebarContext };\n","'use client';\n\nimport {\n  IconAlertTriangle,\n  IconCircleCheck,\n  IconInfoCircle,\n  IconLoader2,\n  IconX,\n} from '@tabler/icons-react';\nimport { useTheme } from 'next-themes';\nimport { Toaster as Sonner, type ToasterProps } from 'sonner';\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = 'system' } = useTheme();\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps['theme']}\n      className=\"toaster group\"\n      icons={{\n        success: <IconCircleCheck className=\"size-4\" />,\n        info: <IconInfoCircle className=\"size-4\" />,\n        warning: <IconAlertTriangle className=\"size-4\" />,\n        error: <IconX className=\"size-4\" />,\n        loading: <IconLoader2 className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          '--normal-bg': 'var(--popover)',\n          '--normal-text': 'var(--popover-foreground)',\n          '--normal-border': 'var(--border)',\n          '--border-radius': 'var(--radius)',\n        } as React.CSSProperties & Record<string, string>\n      }\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\nexport { toast } from 'sonner';\n","'use client';\n\nimport {\n  AppBreadcrumbs,\n  BreadcrumbProvider,\n} from '@mesob/ui/components/app-breadcrumbs';\nimport { Separator } from '@mesob/ui/components/separator';\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@mesob/ui/components/sidebar';\nimport { Toaster } from '@mesob/ui/components/sonner';\nimport { cn } from '@mesob/ui/lib/utils';\nimport type * as React from 'react';\n\ntype ShellProps = {\n  sidebar: React.ReactNode;\n  headerActions?: React.ReactNode;\n  children: React.ReactNode;\n  showToaster?: boolean;\n  contentClassName?: string;\n};\n\nexport function Shell({\n  sidebar,\n  headerActions,\n  children,\n  showToaster = true,\n  contentClassName,\n}: ShellProps) {\n  return (\n    <BreadcrumbProvider>\n      <SidebarProvider>\n        {sidebar}\n        <SidebarInset>\n          <header className=\"flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4\">\n            <div className=\"flex items-center gap-2\">\n              <SidebarTrigger className=\"-ml-1\" />\n              <div className=\"hidden md:flex md:items-center md:gap-2\">\n                <Separator\n                  orientation=\"vertical\"\n                  className=\"mr-2 data-[orientation=vertical]:h-4\"\n                />\n                <AppBreadcrumbs />\n              </div>\n            </div>\n            {headerActions}\n          </header>\n          <div\n            className={cn(\n              'flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-4',\n              contentClassName,\n            )}\n          >\n            <div className=\"mx-auto w-full max-w-7xl\">{children}</div>\n          </div>\n        </SidebarInset>\n        {showToaster && <Toaster />}\n      </SidebarProvider>\n    </BreadcrumbProvider>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","createContext","useContext","useMemo","jsx","jsxs","jsx","Slot","Fragment","jsx","jsxs","jsx","jsx","jsxs","jsx","Slot","cva","React","React","jsx","jsxs","jsx","jsxs","jsx","jsx","cva","IconX","jsx","jsx","jsxs"]}

package/dist/components/sidebar-context.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+type SidebarContextProps = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean | ((open: boolean) => boolean)) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+    width: number;
+    setWidth: (w: number) => void;
+    minWidth: number;
+    maxWidth: number;
+};
+declare const SidebarContext: React.Context<SidebarContextProps | null>;
+declare function useSidebar(): SidebarContextProps;
+
+export { SidebarContext, type SidebarContextProps, useSidebar };

package/dist/components/sidebar-context.js

@@ -0,0 +1,17 @@
+"use client";
+
+// src/components/sidebar-context.tsx
+import * as React from "react";
+var SidebarContext = React.createContext(null);
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+export {
+  SidebarContext,
+  useSidebar
+};
+//# sourceMappingURL=sidebar-context.js.map

package/dist/components/sidebar-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/sidebar-context.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport type SidebarContextProps = {\n  state: 'expanded' | 'collapsed';\n  open: boolean;\n  setOpen: (open: boolean | ((open: boolean) => boolean)) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n  width: number;\n  setWidth: (w: number) => void;\n  minWidth: number;\n  maxWidth: number;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n  return context;\n}\n\nexport { SidebarContext };\n"],"mappings":";;;AAEA,YAAY,WAAW;AAgBvB,IAAM,iBAAuB,oBAA0C,IAAI;AAEpE,SAAS,aAAa;AAC3B,QAAM,UAAgB,iBAAW,cAAc;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,mDAAmD;AAAA,EACrE;AACA,SAAO;AACT;","names":[]}

package/dist/components/sidebar.d.ts

@@ -6,23 +6,10 @@ import { Separator } from './separator.js';
 import { TooltipContent } from './tooltip.js';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
+export { useSidebar } from './sidebar-context.js';
 import '@radix-ui/react-separator';
 import '@radix-ui/react-tooltip';
 
-type SidebarContextProps = {
-    state: 'expanded' | 'collapsed';
-    open: boolean;
-    setOpen: (open: boolean | ((open: boolean) => boolean)) => void;
-    openMobile: boolean;
-    setOpenMobile: (open: boolean) => void;
-    isMobile: boolean;
-    toggleSidebar: () => void;
-    width: number;
-    setWidth: (w: number) => void;
-    minWidth: number;
-    maxWidth: number;
-};
-declare function useSidebar(): SidebarContextProps;
 declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<'div'> & {
     defaultOpen?: boolean;
     open?: boolean;
@@ -76,4 +63,4 @@ declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...p
     isActive?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-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 };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger };

package/dist/components/sidebar.js

@@ -10,18 +10,18 @@ function cn(...inputs) {
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -43,6 +43,9 @@ function Button({
   variant,
   size,
   asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
@@ -51,7 +54,12 @@ function Button({
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        leftIcon,
+        children,
+        rightIcon
+      ] })
     }
   );
 }
@@ -102,7 +110,7 @@ function Separator({
 // src/components/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx4(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -120,7 +128,7 @@ function SheetOverlay({
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]",
         className
       ),
       ...props
@@ -133,14 +141,14 @@ function SheetContent({
   side = "right",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+  return /* @__PURE__ */ jsxs2(SheetPortal, { children: [
     /* @__PURE__ */ jsx4(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:opacity-100 fixed z-[51] flex min-w-0 flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
           side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
@@ -150,7 +158,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsxs2(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
             /* @__PURE__ */ jsx4(IconX, { className: "size-4" }),
             /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Close" })
           ] })
@@ -211,7 +219,7 @@ function Skeleton({ className, ...props }) {
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -242,7 +250,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx6(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -283,8 +291,21 @@ function useIsMobile() {
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { IconMenu2 } from "@tabler/icons-react";
 import { cva as cva2 } from "class-variance-authority";
+import * as React3 from "react";
+
+// src/components/sidebar-context.tsx
 import * as React2 from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var SidebarContext = React2.createContext(null);
+function useSidebar() {
+  const context = React2.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+
+// src/components/sidebar.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_WIDTH_COOKIE = "sidebar_width";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -308,14 +329,6 @@ function getWidthFromCookie() {
 function setWidthCookie(width) {
   document.cookie = `${SIDEBAR_WIDTH_COOKIE}=${width}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 }
-var SidebarContext = React2.createContext(null);
-function useSidebar() {
-  const context = React2.useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.");
-  }
-  return context;
-}
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -326,16 +339,16 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React2.useState(false);
-  const [width, setWidthState] = React2.useState(getWidthFromCookie);
-  const setWidth = React2.useCallback((w) => {
+  const [openMobile, setOpenMobile] = React3.useState(false);
+  const [width, setWidthState] = React3.useState(getWidthFromCookie);
+  const setWidth = React3.useCallback((w) => {
     const clamped = Math.max(SIDEBAR_WIDTH_MIN, Math.min(SIDEBAR_WIDTH_MAX, w));
     setWidthState(clamped);
     setWidthCookie(clamped);
   }, []);
-  const [_open, _setOpen] = React2.useState(defaultOpen);
+  const [_open, _setOpen] = React3.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React2.useCallback(
+  const setOpen = React3.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -347,10 +360,10 @@ function SidebarProvider({
     },
     [open, setOpenProp]
   );
-  const toggleSidebar = React2.useCallback(() => {
+  const toggleSidebar = React3.useCallback(() => {
     return isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);
   }, [isMobile, setOpen]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -417,7 +430,7 @@ function Sidebar({
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ jsx7(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsx7(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs4(
       SheetContent,
       {
         "data-sidebar": "sidebar",
@@ -429,7 +442,7 @@ function Sidebar({
         },
         side,
         children: [
-          /* @__PURE__ */ jsxs3(SheetHeader, { className: "sr-only", children: [
+          /* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
             /* @__PURE__ */ jsx7(SheetTitle, { children: "Sidebar" }),
             /* @__PURE__ */ jsx7(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
@@ -438,7 +451,7 @@ function Sidebar({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "group peer text-sidebar-foreground hidden md:block",
@@ -493,7 +506,7 @@ function SidebarTrigger({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     Button,
     {
       "data-sidebar": "trigger",
@@ -754,7 +767,7 @@ function SidebarMenuButton({
       children: tooltip
     };
   }
-  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs4(Tooltip, { children: [
     /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: button }),
     /* @__PURE__ */ jsx7(
       TooltipContent,
@@ -821,10 +834,10 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const [width] = React2.useState(
+  const [width] = React3.useState(
     () => `${Math.floor(Math.random() * 40) + 50}%`
   );
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       "data-slot": "sidebar-menu-skeleton",