{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "title": "Sidebar",
  "author": "Poyraz Avsever",
  "description": "Poyraz Soft Glass Sidebar with container-responsive layout and semantic tokens.",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "lucide-react@^0.574.0"
  ],
  "registryDependencies": [
    "@poyraz/poyraz-utils",
    "@poyraz/poyraz-theme",
    "@poyraz/sidebar-provider"
  ],
  "files": [
    {
      "path": "registry/poyraz/ui/phase8/sidebar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { ChevronDown, PanelLeftClose, PanelLeftOpen, Search, X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  SidebarProvider,\n  useSidebar,\n  type SidebarContextValue,\n} from \"@/components/ui/organisms/sidebar-provider\";\n\n/* ================================================================== */\n/*  CONTEXT                                                            */\n/* ================================================================== */\n\n/* ================================================================== */\n/*  HELPER: check dark variant                                         */\n/* ================================================================== */\n\nfunction isDarkVariant(v: SidebarContextValue[\"variant\"]) {\n  return v === \"dark\";\n}\n\n/* ================================================================== */\n/*  SIDEBAR ROOT                                                       */\n/* ================================================================== */\n\nconst sidebarVariants = cva(\n  [\n    \"flex flex-col font-sans\",\n    \"transition-[width,transform,opacity] duration-[var(--poyraz-motion-duration-slow)] ease-[var(--poyraz-motion-ease-out)]\",\n    \"h-full\",\n  ].join(\" \"),\n  {\n    variants: {\n      variant: {\n        default: \"w-56 bg-background text-foreground border-r border-border\",\n        collapsible: \"bg-background text-foreground border-r border-border\",\n        floating:\n          \"fixed inset-y-0 left-0 z-50 w-64 bg-glass text-foreground border-r border-glass-border-outer backdrop-blur-glass shadow-[var(--poyraz-glass-shadow)]\",\n        mini: \"w-16 bg-background text-foreground border-r border-border\",\n        dark: \"w-56 bg-inverted text-inverted-foreground border-r border-border-strong\",\n        bordered: \"w-56 bg-background text-foreground border border-border-strong\",\n        inset: \"w-56 bg-muted/80 text-foreground border border-border rounded-lg shadow-sm\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\nexport interface SidebarProps\n  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sidebarVariants> {\n  /** Start in collapsed state (for collapsible variant) */\n  defaultCollapsed?: boolean;\n}\n\nconst Sidebar = React.forwardRef<HTMLElement, SidebarProps>(\n  ({ className, variant = \"default\", defaultCollapsed = false, children, ...props }, ref) => (\n    <SidebarProvider variant={variant ?? \"default\"} defaultCollapsed={defaultCollapsed}>\n      <SidebarPanel ref={ref} className={className} {...props}>\n        {children}\n      </SidebarPanel>\n    </SidebarProvider>\n  ),\n);\nSidebar.displayName = \"Sidebar\";\n\nconst SidebarPanel = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { collapsed, mobileOpen, setMobileOpen, variant } = useSidebar();\n    const collapsibleWidth = variant === \"collapsible\" ? (collapsed ? \"w-16\" : \"w-56\") : \"\";\n\n    if (variant === \"floating\" && !mobileOpen)\n      return (\n        <aside ref={ref} data-slot=\"sidebar\" className=\"hidden\" {...props}>\n          {children}\n        </aside>\n      );\n\n    return (\n      <>\n        {variant === \"floating\" && mobileOpen && (\n          <div\n            data-slot=\"sidebar-overlay\"\n            className=\"fixed inset-0 z-40 bg-overlay backdrop-blur-[1px] animate-poyraz-fade-in motion-reduce:animate-none\"\n            onClick={() => setMobileOpen(false)}\n          />\n        )}\n        <aside\n          ref={ref}\n          data-slot=\"sidebar\"\n          data-variant={variant}\n          data-collapsed={collapsed ? \"\" : undefined}\n          data-mobile-open={mobileOpen ? \"\" : undefined}\n          className={cn(\n            \"@container/sidebar min-w-0 motion-reduce:transition-none\",\n            sidebarVariants({ variant }),\n            collapsibleWidth,\n            variant === \"floating\" &&\n              \"shadow-[var(--poyraz-glass-shadow)] animate-poyraz-slide-in-from-left will-change-transform motion-reduce:animate-none\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </aside>\n      </>\n    );\n  },\n);\nSidebarPanel.displayName = \"SidebarPanel\";\n\n/* ================================================================== */\n/*  SIDEBAR HEADER                                                     */\n/* ================================================================== */\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { collapsed, variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sidebar-header\"\n        className={cn(\n          \"flex items-center gap-3 shrink-0\",\n          \"px-4 py-4\",\n          \"border-b\",\n          dark ? \"border-border-strong\" : \"border-border\",\n          collapsed &&\n            variant !== \"default\" &&\n            variant !== \"dark\" &&\n            variant !== \"bordered\" &&\n            \"justify-center px-2\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nSidebarHeader.displayName = \"SidebarHeader\";\n\n/* ================================================================== */\n/*  SIDEBAR BRANDING                                                   */\n/* ================================================================== */\n\nexport interface SidebarBrandingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Logo / icon element */\n  logo?: React.ReactNode;\n  /** Application title */\n  title: string;\n  /** Subtitle / tagline */\n  subtitle?: string;\n}\n\nconst SidebarBranding = React.forwardRef<HTMLDivElement, SidebarBrandingProps>(\n  ({ className, logo, title, subtitle, ...props }, ref) => {\n    const { collapsed, variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sidebar-branding\"\n        className={cn(\"flex items-center gap-3\", collapsed && \"justify-center\", className)}\n        {...props}\n      >\n        {logo && (\n          <span\n            className={cn(\n              \"shrink-0 w-8 h-8 flex items-center justify-center\",\n              \"border rounded-sm\",\n              dark ? \"border-border-strong bg-surface-raised\" : \"border-border bg-muted\",\n            )}\n          >\n            {logo}\n          </span>\n        )}\n        {!collapsed && (\n          <div className=\"flex-1 min-w-0\">\n            <div\n              className={cn(\n                \"text-sm font-bold truncate\",\n                dark ? \"text-inverted-foreground\" : \"text-foreground\",\n              )}\n            >\n              {title}\n            </div>\n            {subtitle && (\n              <div\n                className={cn(\n                  \"text-[10px] truncate\",\n                  dark ? \"text-muted-foreground\" : \"text-placeholder\",\n                )}\n              >\n                {subtitle}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nSidebarBranding.displayName = \"SidebarBranding\";\n\n/* ================================================================== */\n/*  SIDEBAR CONTENT                                                    */\n/* ================================================================== */\n\nconst SidebarContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & {\n    scrollMode?: \"auto\" | \"hidden\" | \"fade\";\n  }\n>(({ className, children, scrollMode = \"auto\", ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"sidebar-content\"\n    data-scroll-mode={scrollMode}\n    className={cn(\n      \"min-h-0 flex-1 overflow-x-hidden px-3\",\n      scrollMode === \"auto\" && \"overflow-y-auto py-4 [scrollbar-gutter:stable]\",\n      scrollMode === \"hidden\" &&\n        \"overflow-y-auto py-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n      scrollMode === \"fade\" &&\n        \"overflow-y-auto py-7 [scrollbar-width:none] [mask-image:linear-gradient(to_bottom,transparent,black_1.5rem,black_calc(100%-1.5rem),transparent)] [&::-webkit-scrollbar]:hidden\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n));\nSidebarContent.displayName = \"SidebarContent\";\n\n/* ================================================================== */\n/*  SIDEBAR GROUP                                                      */\n/* ================================================================== */\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} data-slot=\"sidebar-group\" className={cn(\"mb-4\", className)} {...props}>\n      {children}\n    </div>\n  ),\n);\nSidebarGroup.displayName = \"SidebarGroup\";\n\n/* ================================================================== */\n/*  SIDEBAR GROUP LABEL                                                */\n/* ================================================================== */\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { collapsed, variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    if (collapsed) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sidebar-group-label\"\n        className={cn(\n          \"px-3 mb-2\",\n          \"text-[10px] font-bold uppercase tracking-[0.15em]\",\n          dark ? \"text-muted-foreground\" : \"text-placeholder\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\";\n\n/* ================================================================== */\n/*  SIDEBAR SECTION (collapsible group with title)                     */\n/* ================================================================== */\n\nexport interface SidebarSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Section title */\n  title: string;\n  /** Whether the section can be collapsed */\n  collapsible?: boolean;\n  /** Start open (when collapsible) */\n  defaultOpen?: boolean;\n}\n\nconst SidebarSection = React.forwardRef<HTMLDivElement, SidebarSectionProps>(\n  ({ className, title, collapsible = true, defaultOpen = true, children, ...props }, ref) => {\n    const [open, setOpen] = React.useState(defaultOpen);\n    const { collapsed, variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    if (collapsed) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sidebar-section\"\n        data-state={open ? \"open\" : \"closed\"}\n        className={cn(\"mb-4\", className)}\n        {...props}\n      >\n        {collapsible ? (\n          <button\n            type=\"button\"\n            onClick={() => setOpen((p) => !p)}\n            className={cn(\n              \"w-full flex items-center justify-between\",\n              \"px-3 mb-2\",\n              \"text-[10px] font-bold uppercase tracking-[0.15em]\",\n              dark\n                ? \"text-muted-foreground hover:text-foreground\"\n                : \"text-placeholder hover:text-muted-foreground\",\n              \"cursor-pointer transition-[color,background-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n            )}\n          >\n            {title}\n            <ChevronDown\n              className={cn(\n                \"h-3 w-3 transition-transform duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n                open && \"rotate-180\",\n              )}\n            />\n          </button>\n        ) : (\n          <div\n            className={cn(\n              \"px-3 mb-2\",\n              \"text-[10px] font-bold uppercase tracking-[0.15em]\",\n              dark ? \"text-muted-foreground\" : \"text-placeholder\",\n            )}\n          >\n            {title}\n          </div>\n        )}\n        <div\n          className={cn(\n            \"grid overflow-hidden transition-[grid-template-rows,opacity] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n            open ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n          )}\n        >\n          <div className=\"min-h-0 overflow-hidden\">{children}</div>\n        </div>\n      </div>\n    );\n  },\n);\nSidebarSection.displayName = \"SidebarSection\";\n\n/* ================================================================== */\n/*  SIDEBAR MENU                                                       */\n/* ================================================================== */\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\n  ({ className, children, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-slot=\"sidebar-menu\"\n      className={cn(\"flex flex-col gap-0.5\", className)}\n      {...props}\n    >\n      {children}\n    </ul>\n  ),\n);\nSidebarMenu.displayName = \"SidebarMenu\";\n\n/* ================================================================== */\n/*  SIDEBAR MENU ITEM                                                  */\n/* ================================================================== */\n\nexport interface SidebarMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /** Whether this item is the active/current page */\n  active?: boolean;\n  /** Icon component */\n  icon?: React.ReactNode;\n  /** Badge content (e.g. notification count) */\n  badge?: React.ReactNode;\n  /** Action element shown on hover (e.g. SidebarMenuAction) */\n  action?: React.ReactNode;\n  /** Link href */\n  href?: string;\n}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n  ({ className, active, icon, badge, action, href, children, ...props }, ref) => {\n    const { collapsed, variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    const content = (\n      <li\n        ref={ref}\n        data-slot=\"sidebar-menu-item\"\n        data-active={active ? \"\" : undefined}\n        tabIndex={href ? undefined : 0}\n        className={cn(\n          \"group relative flex items-center gap-3\",\n          \"px-2.5 py-2\",\n          \"text-sm font-medium\",\n          \"rounded-sm transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n          \"cursor-pointer\",\n          // Active state\n          active\n            ? [\n                dark\n                  ? \"bg-primary-muted text-primary-muted-foreground font-semibold\"\n                  : \"bg-primary-muted text-primary-muted-foreground font-semibold\",\n                \"border-l-[3px] border-solid border-primary\",\n                \"pl-[calc(0.75rem-3px)]\",\n              ].join(\" \")\n            : [\n                dark\n                  ? \"text-muted-foreground hover:bg-surface-raised hover:text-foreground\"\n                  : \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n                \"border-l-[3px] border-solid border-transparent\",\n                \"pl-[calc(0.75rem-3px)]\",\n              ].join(\" \"),\n          collapsed && \"justify-center px-0 pl-0 border-l-0\",\n          className,\n        )}\n        {...props}\n      >\n        {/* Icon */}\n        {icon && (\n          <span\n            role=\"tooltip\"\n            data-slot=\"sidebar-menu-tooltip\"\n            className={cn(\n              \"shrink-0 w-5 h-5 flex items-center justify-center\",\n              active\n                ? \"text-primary\"\n                : dark\n                  ? \"text-muted-foreground group-hover:text-foreground\"\n                  : \"text-placeholder group-hover:text-muted-foreground\",\n            )}\n          >\n            {icon}\n          </span>\n        )}\n\n        {/* Label */}\n        {!collapsed && <span className=\"flex-1 truncate\">{children}</span>}\n\n        {/* Badge */}\n        {!collapsed && badge && (\n          <span\n            data-slot=\"sidebar-menu-badge\"\n            className=\"ml-auto inline-flex shrink-0 items-center justify-center\"\n          >\n            {badge}\n          </span>\n        )}\n\n        {/* Action */}\n        {!collapsed && action}\n\n        {/* Collapsed tooltip hint */}\n        {collapsed && (\n          <span\n            className={cn(\n              \"absolute left-full ml-2 z-50\",\n              \"px-2 py-1\",\n              \"text-xs font-medium whitespace-nowrap\",\n              \"bg-inverted text-inverted-foreground\",\n              \"border border-border-strong\",\n              \"opacity-0 pointer-events-none\",\n              \"group-hover:opacity-100 group-focus-within:opacity-100\",\n              \"transition-[opacity,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n            )}\n          >\n            {children}\n          </span>\n        )}\n      </li>\n    );\n\n    if (href) {\n      return (\n        <a href={href} aria-current={active ? \"page\" : undefined} className=\"no-underline\">\n          {content}\n        </a>\n      );\n    }\n\n    return content;\n  },\n);\nSidebarMenuItem.displayName = \"SidebarMenuItem\";\n\n/* ================================================================== */\n/*  SIDEBAR MENU ACTION                                                */\n/* ================================================================== */\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, children, ...props }, ref) => {\n  const { variant } = useSidebar();\n  const dark = isDarkVariant(variant);\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-slot=\"sidebar-menu-action\"\n      className={cn(\n        \"ml-auto shrink-0\",\n        \"inline-flex items-center justify-center\",\n        \"h-6 w-6\",\n        \"rounded-sm\",\n        \"opacity-0 group-hover:opacity-100\",\n        \"transition-[color,background-color,opacity,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n        \"cursor-pointer\",\n        dark\n          ? \"text-muted-foreground hover:text-foreground hover:bg-surface-raised\"\n          : \"text-placeholder hover:text-muted-foreground hover:bg-accent\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n});\nSidebarMenuAction.displayName = \"SidebarMenuAction\";\n\n/* ================================================================== */\n/*  SIDEBAR SEPARATOR                                                  */\n/* ================================================================== */\n\nconst SidebarSeparator = React.forwardRef<HTMLHRElement, React.HTMLAttributes<HTMLHRElement>>(\n  ({ className, ...props }, ref) => {\n    const { variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    return (\n      <hr\n        ref={ref}\n        data-slot=\"sidebar-separator\"\n        className={cn(\n          \"border-t\",\n          dark ? \"border-border-strong\" : \"border-border\",\n          \"my-3 mx-3\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSidebarSeparator.displayName = \"SidebarSeparator\";\n\n/* ================================================================== */\n/*  SIDEBAR BADGE                                                      */\n/* ================================================================== */\n\nexport interface SidebarBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Badge style variant */\n  variant?: \"default\" | \"dot\" | \"outline\";\n}\n\nconst SidebarBadge = React.forwardRef<HTMLSpanElement, SidebarBadgeProps>(\n  ({ className, variant: badgeVariant = \"default\", children, ...props }, ref) => {\n    if (badgeVariant === \"dot\") {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"sidebar-badge\"\n          className={cn(\"inline-block size-1.5 shrink-0 rounded-full\", \"bg-primary\", className)}\n          {...props}\n        />\n      );\n    }\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"sidebar-badge\"\n        className={cn(\n          \"inline-flex items-center justify-center\",\n          \"h-5 min-w-5 px-1.5\",\n          \"text-[10px] font-semibold leading-none\",\n          \"rounded-full\",\n          badgeVariant === \"outline\"\n            ? \"border border-border-strong bg-transparent text-muted-foreground\"\n            : \"border border-transparent bg-primary-muted text-primary-muted-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  },\n);\nSidebarBadge.displayName = \"SidebarBadge\";\n\n/* ================================================================== */\n/*  SIDEBAR FOOTER                                                     */\n/* ================================================================== */\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { collapsed, variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sidebar-footer\"\n        className={cn(\n          \"shrink-0\",\n          \"px-4 py-3\",\n          \"border-t\",\n          dark ? \"border-border-strong\" : \"border-border\",\n          collapsed && \"px-2 flex justify-center\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nSidebarFooter.displayName = \"SidebarFooter\";\n\n/* ================================================================== */\n/*  SIDEBAR TRIGGER                                                    */\n/* ================================================================== */\n\nexport interface SidebarTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Which action: toggle collapse or toggle mobile */\n  action?: \"collapse\" | \"mobile\";\n}\n\nconst SidebarTrigger = React.forwardRef<HTMLButtonElement, SidebarTriggerProps>(\n  ({ className, action = \"collapse\", ...props }, ref) => {\n    const { collapsed, setCollapsed, mobileOpen, setMobileOpen, variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    const handleClick = () => {\n      if (action === \"mobile\" || variant === \"floating\") {\n        setMobileOpen((prev) => !prev);\n      } else {\n        setCollapsed((prev) => !prev);\n      }\n    };\n\n    const isOpen = action === \"mobile\" ? mobileOpen : !collapsed;\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-slot=\"sidebar-trigger\"\n        aria-expanded={isOpen}\n        aria-label={isOpen ? \"Collapse sidebar\" : \"Expand sidebar\"}\n        onClick={handleClick}\n        className={cn(\n          \"inline-flex items-center justify-center\",\n          \"h-8 w-8\",\n          \"border rounded-sm\",\n          dark\n            ? \"border-border-strong hover:bg-surface-raised hover:border-input text-muted-foreground\"\n            : \"border-border-strong hover:bg-accent hover:border-input\",\n          \"transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)] active:scale-95\",\n          \"cursor-pointer\",\n          className,\n        )}\n        {...props}\n      >\n        {isOpen ? (\n          variant === \"floating\" || action === \"mobile\" ? (\n            <X className=\"h-4 w-4\" />\n          ) : (\n            <PanelLeftClose className=\"h-4 w-4\" />\n          )\n        ) : (\n          <PanelLeftOpen className=\"h-4 w-4\" />\n        )}\n      </button>\n    );\n  },\n);\nSidebarTrigger.displayName = \"SidebarTrigger\";\n\nconst SidebarRail = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, ...props }, ref) => {\n  const { collapsed, setCollapsed } = useSidebar();\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-slot=\"sidebar-rail\"\n      aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n      aria-expanded={!collapsed}\n      onClick={() => setCollapsed((value) => !value)}\n      className={cn(\n        \"absolute inset-y-0 right-0 z-20 hidden w-1 translate-x-1/2 cursor-col-resize transition-colors hover:bg-primary/40 focus-visible:bg-primary/40 focus-visible:outline-none @lg/sidebar:block\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSidebarRail.displayName = \"SidebarRail\";\n\n/* ================================================================== */\n/*  SIDEBAR SEARCH                                                     */\n/* ================================================================== */\n\ninterface SidebarSearchProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  onSearch?: (value: string) => void;\n}\n\nconst SidebarSearch = React.forwardRef<HTMLInputElement, SidebarSearchProps>(\n  ({ className, placeholder = \"Search…\", onSearch, ...props }, ref) => {\n    const { collapsed, variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    if (collapsed) return null;\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\" && onSearch) {\n        onSearch(e.currentTarget.value);\n      }\n    };\n\n    return (\n      <div data-slot=\"sidebar-search\" className=\"px-3 mb-3\">\n        <div className=\"relative flex items-center\">\n          <Search\n            className={cn(\n              \"absolute left-2.5 h-3.5 w-3.5\",\n              dark ? \"text-muted-foreground\" : \"text-placeholder\",\n            )}\n          />\n          <input\n            ref={ref}\n            type=\"text\"\n            placeholder={placeholder}\n            onKeyDown={handleKeyDown}\n            className={cn(\n              \"w-full h-7 pl-8 pr-3\",\n              \"text-xs font-medium\",\n              \"border rounded-sm\",\n              \"transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n              \"focus:outline-none focus:ring-2 focus:ring-ring\",\n              dark\n                ? \"bg-surface-raised border-border-strong text-foreground placeholder:text-muted-foreground\"\n                : \"bg-background border-border-strong text-foreground placeholder:text-placeholder\",\n              className,\n            )}\n            {...props}\n          />\n        </div>\n      </div>\n    );\n  },\n);\nSidebarSearch.displayName = \"SidebarSearch\";\n\n/* ================================================================== */\n/*  SIDEBAR SUB MENU (nested expandable)                               */\n/* ================================================================== */\n\ninterface SidebarSubMenuProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Label shown as the trigger */\n  label: string;\n  /** Icon component */\n  icon?: React.ReactNode;\n  /** Start open */\n  defaultOpen?: boolean;\n}\n\nconst SidebarSubMenu = React.forwardRef<HTMLDivElement, SidebarSubMenuProps>(\n  ({ className, label, icon, defaultOpen = false, children, ...props }, ref) => {\n    const [open, setOpen] = React.useState(defaultOpen);\n    const { collapsed, variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    if (collapsed) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sidebar-submenu\"\n        data-state={open ? \"open\" : \"closed\"}\n        className={cn(\"\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          data-slot=\"sidebar-submenu-trigger\"\n          aria-expanded={open}\n          onClick={() => setOpen((p) => !p)}\n          className={cn(\n            \"w-full flex items-center gap-3\",\n            \"px-2.5 py-2\",\n            \"text-sm font-medium\",\n            \"rounded-sm transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n            \"cursor-pointer\",\n            dark\n              ? \"text-muted-foreground hover:bg-surface-raised hover:text-foreground\"\n              : \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n            \"border-l-[3px] border-solid border-transparent\",\n            \"pl-[calc(0.75rem-3px)]\",\n          )}\n        >\n          {icon && (\n            <span\n              className={cn(\n                \"shrink-0 w-5 h-5 flex items-center justify-center\",\n                dark ? \"text-muted-foreground\" : \"text-placeholder\",\n              )}\n            >\n              {icon}\n            </span>\n          )}\n          <span className=\"flex-1 truncate text-left\">{label}</span>\n          <ChevronDown\n            className={cn(\n              \"h-3.5 w-3.5 transition-transform duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n              open && \"rotate-180\",\n              dark ? \"text-muted-foreground\" : \"text-placeholder\",\n            )}\n          />\n        </button>\n        <div\n          className={cn(\n            \"grid overflow-hidden transition-[grid-template-rows,opacity] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n            open ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n          )}\n        >\n          <div\n            className={cn(\n              \"min-h-0 overflow-hidden ml-5 pl-3\",\n              \"border-l\",\n              dark ? \"border-border-strong\" : \"border-border\",\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\nSidebarSubMenu.displayName = \"SidebarSubMenu\";\n\n/* ================================================================== */\n/*  SIDEBAR SUB MENU ITEM                                              */\n/* ================================================================== */\n\ninterface SidebarSubMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  active?: boolean;\n  href?: string;\n}\n\nconst SidebarSubMenuItem = React.forwardRef<HTMLDivElement, SidebarSubMenuItemProps>(\n  ({ className, active, href, children, ...props }, ref) => {\n    const { variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    const inner = (\n      <div\n        ref={ref}\n        data-slot=\"sidebar-submenu-item\"\n        className={cn(\n          \"px-3 py-2\",\n          \"text-sm\",\n          \"rounded-sm transition-[color,background-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n          \"cursor-pointer\",\n          active\n            ? dark\n              ? \"text-primary-muted-foreground font-semibold\"\n              : \"text-primary-muted-foreground font-semibold\"\n            : dark\n              ? \"text-muted-foreground hover:text-foreground\"\n              : \"text-muted-foreground hover:text-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n\n    if (href) {\n      return (\n        <a href={href} className=\"no-underline\">\n          {inner}\n        </a>\n      );\n    }\n    return inner;\n  },\n);\nSidebarSubMenuItem.displayName = \"SidebarSubMenuItem\";\n\n/* ================================================================== */\n/*  SIDEBAR USER PROFILE                                               */\n/* ================================================================== */\n\ninterface SidebarUserProfileProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** User display name */\n  name: string;\n  /** User role / subtitle */\n  role?: string;\n  /** Avatar URL */\n  avatarUrl?: string;\n  /** Fallback initials when no avatar URL */\n  initials?: string;\n}\n\nconst SidebarUserProfile = React.forwardRef<HTMLDivElement, SidebarUserProfileProps>(\n  ({ className, name, role, avatarUrl, initials, children, ...props }, ref) => {\n    const { collapsed, variant } = useSidebar();\n    const dark = isDarkVariant(variant);\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sidebar-user-profile\"\n        className={cn(\"flex items-center gap-3\", collapsed && \"justify-center\", className)}\n        {...props}\n      >\n        {/* Avatar */}\n        <div\n          className={cn(\n            \"shrink-0 w-8 h-8 flex items-center justify-center\",\n            \"border rounded-sm overflow-hidden\",\n            \"text-xs font-bold\",\n            dark\n              ? \"border-border-strong bg-surface-raised text-foreground\"\n              : \"border-border-strong bg-accent text-muted-foreground\",\n          )}\n        >\n          {avatarUrl ? (\n            <img src={avatarUrl} alt={name} className=\"w-full h-full object-cover\" />\n          ) : (\n            (initials ?? name.charAt(0).toUpperCase())\n          )}\n        </div>\n\n        {/* Text */}\n        {!collapsed && (\n          <div className=\"flex-1 min-w-0\">\n            <div\n              className={cn(\n                \"text-sm font-semibold truncate\",\n                dark ? \"text-inverted-foreground\" : \"text-foreground\",\n              )}\n            >\n              {name}\n            </div>\n            {role && (\n              <div\n                className={cn(\n                  \"text-xs truncate\",\n                  dark ? \"text-muted-foreground\" : \"text-placeholder\",\n                )}\n              >\n                {role}\n              </div>\n            )}\n          </div>\n        )}\n\n        {children}\n      </div>\n    );\n  },\n);\nSidebarUserProfile.displayName = \"SidebarUserProfile\";\n\n/* ================================================================== */\n/*  EXPORTS                                                            */\n/* ================================================================== */\n\nexport {\n  Sidebar,\n  SidebarProvider,\n  SidebarPanel,\n  SidebarHeader,\n  SidebarBranding,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarSection,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuAction,\n  SidebarSeparator,\n  SidebarBadge,\n  SidebarFooter,\n  SidebarTrigger,\n  SidebarRail,\n  SidebarSearch,\n  SidebarSubMenu,\n  SidebarSubMenuItem,\n  SidebarUserProfile,\n  useSidebar,\n  sidebarVariants,\n};\n",
      "type": "registry:ui",
      "target": "@ui/organisms/sidebar.tsx"
    }
  ],
  "meta": {
    "category": "phase-8-organism",
    "phase": "beta",
    "responsive": "container",
    "accessibilityReviewed": true
  },
  "type": "registry:ui"
}