{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-sidebar",
  "title": "Glass Sidebar",
  "description": "Glass Sidebar with five variants: clear, frosted, subtle, liquid, and liquid-refract",
  "registryDependencies": [
    "@glasscn/utils",
    "@glasscn/input",
    "@glasscn/sheet",
    "@glasscn/sidebar",
    "@glasscn/glass-variants",
    "@glasscn/glass-separator",
    "@glasscn/liquid-glass"
  ],
  "files": [
    {
      "path": "components/ui/glasscn/glass-sidebar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { type FrostGlassVariant, type FrostGlassVariantProp, glassVariantStyles } from \"@/lib/glass-variants\";\nimport { cn } from \"@/lib/utils\";\n\nimport { Input } from \"../input\";\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from \"../sheet\";\nimport { Sidebar, SidebarInset, SidebarMenuButton, SidebarMenuSubButton, SidebarTrigger, useSidebar } from \"../sidebar\";\nimport { GlassSeparator } from \"./glass-separator\";\nimport { LiquidGlass } from \"./liquid-glass\";\n\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\n\nconst GlassSidebarVariantContext = React.createContext<FrostGlassVariant>(\"clear\");\n\nconst glassSidebarVariableStyles: Record<FrostGlassVariant, string> = {\n  clear: [\n    \"[--sidebar:rgba(255,255,255,0.18)]\",\n    \"[--sidebar-foreground:oklch(0.145_0_0)]\",\n    \"[--sidebar-accent:rgba(255,255,255,0.48)]\",\n    \"[--sidebar-accent-foreground:oklch(0.145_0_0)]\",\n    \"[--sidebar-border:rgba(255,255,255,0.34)]\",\n    \"[--sidebar-ring:rgba(255,255,255,0.38)]\",\n    \"dark:[--sidebar:rgba(0,0,0,0.28)]\",\n    \"dark:[--sidebar-foreground:oklch(0.985_0_0)]\",\n    \"dark:[--sidebar-accent:rgba(255,255,255,0.1)]\",\n    \"dark:[--sidebar-accent-foreground:oklch(0.985_0_0)]\",\n    \"dark:[--sidebar-border:rgba(255,255,255,0.12)]\",\n    \"dark:[--sidebar-ring:rgba(255,255,255,0.16)]\",\n  ].join(\" \"),\n  frosted: [\n    \"[--sidebar:rgba(255,255,255,0.4)]\",\n    \"[--sidebar-foreground:oklch(0.145_0_0)]\",\n    \"[--sidebar-accent:rgba(255,255,255,0.62)]\",\n    \"[--sidebar-accent-foreground:oklch(0.145_0_0)]\",\n    \"[--sidebar-border:rgba(255,255,255,0.3)]\",\n    \"[--sidebar-ring:rgba(255,255,255,0.32)]\",\n    \"dark:[--sidebar:rgba(0,0,0,0.38)]\",\n    \"dark:[--sidebar-foreground:oklch(0.985_0_0)]\",\n    \"dark:[--sidebar-accent:rgba(255,255,255,0.14)]\",\n    \"dark:[--sidebar-accent-foreground:oklch(0.985_0_0)]\",\n    \"dark:[--sidebar-border:rgba(255,255,255,0.1)]\",\n    \"dark:[--sidebar-ring:rgba(255,255,255,0.14)]\",\n  ].join(\" \"),\n  subtle: [\n    \"[--sidebar:rgba(255,255,255,0.14)]\",\n    \"[--sidebar-foreground:oklch(0.145_0_0)]\",\n    \"[--sidebar-accent:rgba(255,255,255,0.28)]\",\n    \"[--sidebar-accent-foreground:oklch(0.145_0_0)]\",\n    \"[--sidebar-border:rgba(0,0,0,0.05)]\",\n    \"[--sidebar-ring:rgba(255,255,255,0.28)]\",\n    \"dark:[--sidebar:rgba(255,255,255,0.05)]\",\n    \"dark:[--sidebar-foreground:oklch(0.985_0_0)]\",\n    \"dark:[--sidebar-accent:rgba(255,255,255,0.08)]\",\n    \"dark:[--sidebar-accent-foreground:oklch(0.985_0_0)]\",\n    \"dark:[--sidebar-border:rgba(255,255,255,0.08)]\",\n    \"dark:[--sidebar-ring:rgba(255,255,255,0.12)]\",\n  ].join(\" \"),\n  liquid: [\n    \"[--sidebar:rgba(255,255,255,0.22)]\",\n    \"[--sidebar-foreground:oklch(0.145_0_0)]\",\n    \"[--sidebar-accent:rgba(255,255,255,0.55)]\",\n    \"[--sidebar-accent-foreground:oklch(0.145_0_0)]\",\n    \"[--sidebar-border:rgba(255,255,255,0.42)]\",\n    \"[--sidebar-ring:rgba(255,255,255,0.45)]\",\n    \"dark:[--sidebar:rgba(255,255,255,0.06)]\",\n    \"dark:[--sidebar-foreground:oklch(0.985_0_0)]\",\n    \"dark:[--sidebar-accent:rgba(255,255,255,0.12)]\",\n    \"dark:[--sidebar-accent-foreground:oklch(0.985_0_0)]\",\n    \"dark:[--sidebar-border:rgba(255,255,255,0.16)]\",\n    \"dark:[--sidebar-ring:rgba(255,255,255,0.20)]\",\n  ].join(\" \"),\n  \"liquid-refract\": [\n    \"[--sidebar:rgba(255,255,255,0.18)]\",\n    \"[--sidebar-foreground:oklch(0.145_0_0)]\",\n    \"[--sidebar-accent:rgba(255,255,255,0.48)]\",\n    \"[--sidebar-accent-foreground:oklch(0.145_0_0)]\",\n    \"[--sidebar-border:rgba(255,255,255,0.34)]\",\n    \"[--sidebar-ring:rgba(255,255,255,0.38)]\",\n    \"dark:[--sidebar-foreground:oklch(0.985_0_0)]\",\n    \"dark:[--sidebar-accent:rgba(255,255,255,0.12)]\",\n    \"dark:[--sidebar-accent-foreground:oklch(0.985_0_0)]\",\n    \"dark:[--sidebar-border:rgba(255,255,255,0.15)]\",\n    \"dark:[--sidebar-ring:rgba(255,255,255,0.18)]\",\n  ].join(\" \"),\n};\n\nconst glassSidebarInnerSurfaceStyles: Record<FrostGlassVariant, string> = {\n  clear: [\n    \"[&>[data-slot=sidebar-inner]]:backdrop-blur-[2px]\",\n    \"[&>[data-slot=sidebar-inner]]:backdrop-saturate-[1.9]\",\n    \"[&>[data-slot=sidebar-inner]]:shadow-[0_24px_80px_rgba(15,23,42,0.08)]\",\n    \"dark:[&>[data-slot=sidebar-inner]]:shadow-[0_24px_80px_rgba(0,0,0,0.28)]\",\n  ].join(\" \"),\n  frosted: [\n    \"[&>[data-slot=sidebar-inner]]:backdrop-blur-[16px]\",\n    \"[&>[data-slot=sidebar-inner]]:backdrop-saturate-[1.6]\",\n    \"[&>[data-slot=sidebar-inner]]:shadow-[0_24px_80px_rgba(15,23,42,0.08)]\",\n    \"dark:[&>[data-slot=sidebar-inner]]:shadow-[0_24px_80px_rgba(0,0,0,0.28)]\",\n  ].join(\" \"),\n  subtle: [\n    \"[&>[data-slot=sidebar-inner]]:backdrop-blur-[4px]\",\n    \"[&>[data-slot=sidebar-inner]]:backdrop-saturate-[1.5]\",\n    \"[&>[data-slot=sidebar-inner]]:shadow-[0_24px_80px_rgba(15,23,42,0.08)]\",\n    \"dark:[&>[data-slot=sidebar-inner]]:shadow-[0_24px_80px_rgba(0,0,0,0.28)]\",\n  ].join(\" \"),\n  liquid: [\n    \"[&>[data-slot=sidebar-inner]]:backdrop-blur-[12px]\",\n    \"[&>[data-slot=sidebar-inner]]:backdrop-saturate-[1.8]\",\n    \"[&>[data-slot=sidebar-inner]]:backdrop-brightness-[1.05]\",\n    \"dark:[&>[data-slot=sidebar-inner]]:backdrop-brightness-[0.95]\",\n    \"[&>[data-slot=sidebar-inner]]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.55),inset_0_-14px_28px_-10px_rgba(255,255,255,0.40),0_28px_80px_-12px_rgba(15,23,42,0.18)]\",\n    \"dark:[&>[data-slot=sidebar-inner]]:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.22),inset_0_-14px_28px_-10px_rgba(180,210,255,0.16),0_32px_90px_-10px_rgba(0,0,0,0.55)]\",\n  ].join(\" \"),\n  \"liquid-refract\": [\n    \"[&>[data-slot=sidebar-inner]]:backdrop-blur-[1px]\",\n    \"[&>[data-slot=sidebar-inner]]:backdrop-saturate-[1.28]\",\n    \"[&>[data-slot=sidebar-inner]]:shadow-[0_18px_60px_rgba(0,0,0,0.36),inset_0_0_0_1px_rgba(255,255,255,0.035),inset_-9px_-7px_18px_rgba(0,0,0,0.48)]\",\n    \"dark:[&>[data-slot=sidebar-inner]]:shadow-[0_18px_60px_rgba(0,0,0,0.36),inset_0_0_0_1px_rgba(255,255,255,0.035),inset_-9px_-7px_18px_rgba(0,0,0,0.48)]\",\n  ].join(\" \"),\n};\n\nconst glassSidebarFloatingInnerStyles = [\n  \"[&>[data-slot=sidebar-inner]]:group-data-[variant=floating]:rounded-[1.25rem]\",\n  \"[&>[data-slot=sidebar-inner]]:group-data-[variant=floating]:ring-1\",\n  \"[&>[data-slot=sidebar-inner]]:group-data-[variant=floating]:ring-white/25\",\n  \"dark:[&>[data-slot=sidebar-inner]]:group-data-[variant=floating]:ring-white/10\",\n].join(\" \");\n\nfunction useGlassSidebarVariant(glassVariant?: FrostGlassVariant) {\n  const inheritedVariant = React.useContext(GlassSidebarVariantContext);\n\n  return glassVariant ?? inheritedVariant;\n}\n\ntype GlassSidebarProps = React.ComponentProps<typeof Sidebar> & FrostGlassVariantProp;\n\nfunction GlassSidebarVariantProvider({\n  glassVariant,\n  children,\n}: React.PropsWithChildren<{ glassVariant: FrostGlassVariant }>) {\n  return <GlassSidebarVariantContext.Provider value={glassVariant}>{children}</GlassSidebarVariantContext.Provider>;\n}\n\nfunction getGlassSidebarRootClasses({\n  glassVariant,\n  variant,\n}: {\n  glassVariant: FrostGlassVariant;\n  variant: GlassSidebarProps[\"variant\"];\n}) {\n  return cn(\n    glassSidebarVariableStyles[glassVariant],\n    glassSidebarInnerSurfaceStyles[glassVariant],\n    variant === \"floating\" && glassSidebarFloatingInnerStyles,\n  );\n}\n\nfunction getGlassSidebarStandaloneClasses(glassVariant: FrostGlassVariant) {\n  return cn(\n    glassVariantStyles[glassVariant],\n    glassSidebarVariableStyles[glassVariant],\n    \"overflow-hidden\",\n    \"shadow-[0_24px_80px_rgba(15,23,42,0.08)] dark:shadow-[0_24px_80px_rgba(0,0,0,0.28)]\",\n  );\n}\n\nfunction GlassSidebar({\n  collapsible = \"offcanvas\",\n  variant = \"sidebar\",\n  glassVariant = \"liquid-refract\",\n  className,\n  dir,\n  side = \"left\",\n  children,\n  ...props\n}: GlassSidebarProps) {\n  const { isMobile, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible !== \"none\" && isMobile) {\n    return (\n      <GlassSidebarVariantProvider glassVariant={glassVariant}>\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            dir={dir}\n            data-sidebar=\"sidebar\"\n            data-slot=\"glass-sidebar\"\n            data-mobile=\"true\"\n            className={cn(\n              \"w-(--sidebar-width) p-0 text-sidebar-foreground [&>button]:hidden\",\n              getGlassSidebarStandaloneClasses(glassVariant),\n            )}\n            style={{ \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE } as React.CSSProperties}\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      </GlassSidebarVariantProvider>\n    );\n  }\n\n  const sidebar = (\n    <GlassSidebarVariantProvider glassVariant={glassVariant}>\n      <Sidebar\n        side={side}\n        variant={variant}\n        collapsible={collapsible}\n        className={cn(\n          collapsible === \"none\"\n            ? getGlassSidebarStandaloneClasses(glassVariant)\n            : getGlassSidebarRootClasses({ glassVariant, variant }),\n          glassVariant === \"liquid-refract\" && \"bg-transparent border-0 shadow-none\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Sidebar>\n    </GlassSidebarVariantProvider>\n  );\n\n  if (glassVariant === \"liquid-refract\" && collapsible === \"none\") {\n    return <LiquidGlass className={cn(\"rounded-[1.75rem]\", className)}>{sidebar}</LiquidGlass>;\n  }\n\n  return sidebar;\n}\n\nfunction GlassSidebarTrigger({\n  className,\n  glassVariant,\n  ...props\n}: React.ComponentProps<typeof SidebarTrigger> & FrostGlassVariantProp) {\n  const resolvedVariant = useGlassSidebarVariant(glassVariant);\n\n  return (\n    <SidebarTrigger\n      data-slot=\"glass-sidebar-trigger\"\n      className={cn(\n        glassSidebarVariableStyles[resolvedVariant],\n        glassVariantStyles[resolvedVariant],\n        \"border-sidebar-border bg-sidebar text-sidebar-foreground hover:bg-sidebar-accent\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction GlassSidebarInset({ className, ...props }: React.ComponentProps<typeof SidebarInset>) {\n  return (\n    <SidebarInset\n      data-slot=\"glass-sidebar-inset\"\n      className={cn(\n        \"md:peer-data-[variant=inset]:bg-white/10 md:peer-data-[variant=inset]:ring-1 md:peer-data-[variant=inset]:ring-white/20 md:peer-data-[variant=inset]:backdrop-blur-xl dark:md:peer-data-[variant=inset]:bg-black/20 dark:md:peer-data-[variant=inset]:ring-white/10\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction GlassSidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"glass-sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full placeholder:text-foreground/75\",\n        \"border-sidebar-border bg-sidebar text-sidebar-foreground shadow-[0_8px_30px_rgba(255,255,255,0.08)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst GlassSidebarSeparator = GlassSeparator;\n\nfunction GlassSidebarMenuButton({ className, ...props }: React.ComponentProps<typeof SidebarMenuButton>) {\n  return (\n    <SidebarMenuButton\n      data-slot=\"glass-sidebar-menu-button\"\n      className={cn(\n        \"border border-transparent hover:border-sidebar-border hover:bg-sidebar-accent/60 data-active:border-sidebar-border data-active:bg-sidebar-accent data-active:shadow-[0_14px_40px_rgba(255,255,255,0.12)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction GlassSidebarMenuSubButton({ className, ...props }: React.ComponentProps<typeof SidebarMenuSubButton>) {\n  return (\n    <SidebarMenuSubButton\n      data-slot=\"glass-sidebar-menu-sub-button\"\n      className={cn(\n        \"rounded-lg border border-transparent hover:border-sidebar-border hover:bg-sidebar-accent/60 data-active:border-sidebar-border data-active:bg-sidebar-accent data-active:shadow-[0_14px_40px_rgba(255,255,255,0.12)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  GlassSidebar,\n  GlassSidebarInput,\n  GlassSidebarInset,\n  GlassSidebarMenuButton,\n  GlassSidebarMenuSubButton,\n  GlassSidebarSeparator,\n  GlassSidebarTrigger,\n  glassSidebarVariableStyles,\n};\nexport type { FrostGlassVariant } from \"@/lib/glass-variants\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}