@eggspot/ui 0.0.2 → 0.0.3

package/src/components/DashboardLayout/SidebarNav.tsx

@@ -1,509 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@eggspot/ui/components/Button"
-import { SearchInput } from "@eggspot/ui/components/Input"
-import { Tooltip, TooltipTrigger } from "@eggspot/ui/components/Tooltip"
-import { cn } from "@eggspot/ui/lib/utils"
-import { ChevronDown, ChevronLeft, ChevronRight, Search } from "lucide-react"
-import { Focusable } from "react-aria-components"
-import * as ReactDOM from "react-dom"
-
-import { useDashboard } from "./DashboardLayout"
-
-// Flyout panel for collapsed sidebar sections
-interface SidebarFlyoutProps {
-  title: string
-  icon?: React.ReactNode
-  children: React.ReactNode
-  onClose: () => void
-}
-
-function SidebarFlyout({ title, icon, children, onClose }: SidebarFlyoutProps) {
-  const { activePath, closeFlyout, sidebarRect } = useDashboard()
-  const flyoutRef = React.useRef<HTMLDivElement>(null)
-  const flyoutWidth = 220
-
-  const sidebarRight = sidebarRect?.right ?? 0
-
-  const prevActivePath = React.useRef(activePath)
-  React.useEffect(() => {
-    if (prevActivePath.current !== activePath) {
-      closeFlyout()
-    }
-    prevActivePath.current = activePath
-  }, [activePath, closeFlyout])
-
-  React.useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose()
-      }
-    }
-    document.addEventListener("keydown", handleKeyDown)
-    return () => document.removeEventListener("keydown", handleKeyDown)
-  }, [onClose])
-
-  React.useEffect(() => {
-    const originalOverflow = document.body.style.overflow
-    document.body.style.overflow = "hidden"
-
-    flyoutRef.current?.focus()
-
-    return () => {
-      document.body.style.overflow = originalOverflow
-    }
-  }, [])
-
-  const sidebarTop = sidebarRect?.top ?? 0
-  const sidebarHeight = sidebarRect?.height ?? 0
-  const maxAvailableHeight =
-    typeof window !== "undefined"
-      ? window.innerHeight - sidebarTop
-      : sidebarHeight
-  const flyoutHeight = Math.min(sidebarHeight, maxAvailableHeight)
-
-  const flyoutContent = (
-    <>
-      <div
-        className="fixed inset-0 z-40"
-        style={{ left: sidebarRight + flyoutWidth }}
-        onClick={onClose}
-        aria-hidden="true"
-      />
-
-      <div
-        ref={flyoutRef}
-        tabIndex={-1}
-        className={cn(
-          "fixed z-50 overflow-hidden",
-          "from-gray-2 to-gray-1 bg-linear-to-b",
-          "border-gray-6 border-r",
-          "rounded-r-2xl shadow-xl",
-          "animate-in slide-in-from-left-2 duration-200",
-          "focus:outline-none"
-        )}
-        style={{
-          left: sidebarRight + 1,
-          top: sidebarTop,
-          width: flyoutWidth,
-          height: flyoutHeight,
-        }}
-      >
-        <div className="flex h-full flex-col overflow-hidden p-4">
-          <div className="mb-4 flex shrink-0 items-center gap-3">
-            <span className="text-accent-11 [&>svg]:size-5">{icon}</span>
-            <h3 className="text-gray-12 text-sm font-semibold">{title}</h3>
-          </div>
-
-          <div className="flex-1 overflow-y-auto">
-            <div className="space-y-1.5">
-              {React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                  return React.cloneElement(
-                    child as React.ReactElement<{
-                      nested?: boolean
-                      inFlyout?: boolean
-                    }>,
-                    {
-                      nested: true,
-                      inFlyout: true,
-                    }
-                  )
-                }
-                return child
-              })}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-
-  if (typeof window === "undefined") return null
-  return ReactDOM.createPortal(flyoutContent, document.body)
-}
-
-export interface SidebarToggleProps {
-  className?: string
-}
-
-export function SidebarToggle({ className }: SidebarToggleProps) {
-  const { sidebarState, toggleSidebar } = useDashboard()
-  const isCollapsed = sidebarState === "collapsed"
-
-  return (
-    <Button
-      mode="icon"
-      aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-      variant="ghost"
-      tooltip={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-      tooltipPlacement="right"
-      onClick={toggleSidebar}
-      className={cn(
-        "rounded-2xl",
-        "text-gray-11 hover:bg-gray-4/50 hover:text-gray-12",
-        isCollapsed && "h-12 w-full",
-        className
-      )}
-    >
-      {isCollapsed ? (
-        <ChevronRight className="size-[18px]" />
-      ) : (
-        <ChevronLeft className="size-[18px]" />
-      )}
-    </Button>
-  )
-}
-
-// Nav Section (collapsible group)
-export interface SidebarNavSectionProps {
-  title: string
-  icon?: React.ReactNode
-  children: React.ReactNode
-  defaultOpen?: boolean
-  className?: string
-}
-
-export function SidebarNavSection({
-  title,
-  icon,
-  children,
-  defaultOpen = false,
-  className,
-}: SidebarNavSectionProps) {
-  const {
-    sidebarState,
-    expandedGroups,
-    toggleGroup,
-    activePath,
-    flyoutGroup,
-    setFlyoutGroup,
-  } = useDashboard()
-  const isCollapsed = sidebarState === "collapsed"
-
-  const isOpen = expandedGroups.includes(title)
-  const isFlyoutOpen = flyoutGroup === title
-
-  const childrenArray = React.Children.toArray(children)
-  const hasActiveChild = childrenArray.some((child) => {
-    if (React.isValidElement<{ href?: string }>(child) && child.props.href) {
-      return activePath === child.props.href
-    }
-    return false
-  })
-
-  // Collapsed mode - show flyout on click
-  if (isCollapsed) {
-    return (
-      <>
-        <Button
-          mode="icon"
-          variant="ghost"
-          tooltip={isFlyoutOpen ? undefined : title}
-          tooltipPlacement="right"
-          onClick={() => setFlyoutGroup(isFlyoutOpen ? null : title)}
-          className={cn(
-            "relative flex h-12 w-full items-center justify-center rounded-2xl",
-            "text-gray-11 hover:bg-gray-4/50 hover:text-gray-12",
-            isFlyoutOpen && "bg-gray-4/50 text-gray-12",
-            hasActiveChild && "text-gray-12",
-            className
-          )}
-        >
-          {/* Active indicator */}
-          {hasActiveChild && (
-            <div className="bg-accent-9 absolute top-1/2 left-0 h-5 w-[3px] -translate-y-1/2 rounded-full" />
-          )}
-          <span
-            className={cn(
-              "[&>svg]:size-[18px]",
-              hasActiveChild && "text-accent-11"
-            )}
-          >
-            {icon}
-          </span>
-        </Button>
-
-        {/* Flyout panel */}
-        {isFlyoutOpen && (
-          <SidebarFlyout
-            title={title}
-            icon={icon}
-            onClose={() => setFlyoutGroup(null)}
-          >
-            {children}
-          </SidebarFlyout>
-        )}
-      </>
-    )
-  }
-
-  return (
-    <div className={cn("mb-1", className)}>
-      <button
-        onClick={() => toggleGroup(title)}
-        className={cn(
-          "group flex h-11 w-full min-w-0 items-center gap-3 rounded-2xl px-4",
-          "text-gray-11 text-sm transition-all duration-150",
-          "hover:bg-gray-4/50 hover:text-gray-12",
-          "focus-visible:ring-accent-9 focus:outline-none focus-visible:ring-2",
-          hasActiveChild && "text-gray-12"
-        )}
-      >
-        <span
-          className={cn(
-            "transition-colors",
-            hasActiveChild
-              ? "text-accent-11"
-              : "text-gray-11 group-hover:text-gray-12"
-          )}
-        >
-          {icon}
-        </span>
-        <span className="min-w-0 flex-1 truncate text-left text-xs font-semibold tracking-wider uppercase">
-          {title}
-        </span>
-        <ChevronDown
-          className={cn(
-            "text-gray-11 group-hover:text-gray-12 size-4 transition-transform duration-200",
-            isOpen && "rotate-180"
-          )}
-        />
-      </button>
-
-      {isOpen && (
-        <div className="animate-in slide-in-from-top-1 relative mt-2 ml-5 space-y-1 pl-4 duration-200">
-          {/* Guide line */}
-          <div className="bg-gray-6/50 absolute top-0 bottom-0 left-[4px] w-[2px] rounded-full" />
-          {children}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// Nav Group (static header, no collapse)
-export interface SidebarNavGroupProps {
-  title: string
-  className?: string
-}
-
-export function SidebarNavGroup({ title, className }: SidebarNavGroupProps) {
-  const { sidebarState } = useDashboard()
-  const isCollapsed = sidebarState === "collapsed"
-
-  if (isCollapsed) {
-    return <div className="bg-gray-6/30 mx-auto my-1.5 h-px w-8" />
-  }
-
-  return (
-    <div
-      className={cn(
-        "text-gray-11 px-4 pt-4 pb-1 text-xs font-semibold tracking-wider uppercase",
-        className
-      )}
-    >
-      {title}
-    </div>
-  )
-}
-
-// Nav Item
-export interface SidebarNavItemProps {
-  href?: string
-  icon?: React.ReactNode
-  children: React.ReactNode
-  isActive?: boolean
-  badge?: React.ReactNode
-  onClick?: () => void
-  className?: string
-  /** Whether this is a nested item inside a section */
-  nested?: boolean
-  /** Whether this item is rendered inside a flyout panel (forces expanded styling) */
-  inFlyout?: boolean
-}
-
-export function SidebarNavItem({
-  href,
-  icon,
-  children,
-  isActive = false,
-  badge,
-  onClick,
-  className,
-  nested = false,
-  inFlyout = false,
-}: SidebarNavItemProps) {
-  const { sidebarState, activePath, closeFlyout } = useDashboard()
-  const isCollapsed = sidebarState === "collapsed" && !inFlyout
-
-  const active = isActive || (href ? activePath === href : false)
-
-  const handleClick = React.useCallback(() => {
-    onClick?.()
-    if (inFlyout || href) {
-      closeFlyout()
-    }
-  }, [onClick, inFlyout, href, closeFlyout])
-
-  const baseStyles = cn(
-    "group relative flex min-w-0 items-center gap-3 rounded-2xl transition-all duration-150",
-    "focus-visible:ring-accent-9 focus:outline-none focus-visible:ring-2",
-    active
-      ? "bg-accent-4/50 text-accent-11 font-medium"
-      : "text-gray-11/70 hover:bg-gray-4/50 hover:text-gray-12",
-    isCollapsed ? "h-12 w-full justify-center" : "h-11 px-4",
-    className
-  )
-
-  const content = (
-    <>
-      {/* Active indicator */}
-      {active && (
-        <div
-          className={cn(
-            "bg-accent-9 absolute rounded-full transition-all",
-            isCollapsed
-              ? "bottom-1 left-1/2 h-1.5 w-1.5 -translate-x-1/2"
-              : "top-1/2 left-0 h-5 w-[3px] -translate-y-1/2"
-          )}
-        />
-      )}
-
-      {icon && (
-        <span
-          className={cn(
-            "shrink-0 transition-colors duration-150",
-            isCollapsed || nested ? "[&>svg]:size-[18px]" : "[&>svg]:size-4",
-            active ? "text-accent-11" : "group-hover:text-gray-12"
-          )}
-        >
-          {icon}
-        </span>
-      )}
-
-      {!isCollapsed && (
-        <>
-          <span
-            className={cn(
-              "flex-1 truncate text-left text-xs uppercase",
-              nested && "text-xs capitalize"
-            )}
-          >
-            {children}
-          </span>
-          {badge}
-        </>
-      )}
-    </>
-  )
-
-  // Collapsed mode with tooltip
-  if (isCollapsed) {
-    const tooltipText = typeof children === "string" ? children : undefined
-
-    if (href) {
-      return (
-        <TooltipTrigger delay={0}>
-          <Focusable>
-            <a href={href} onClick={handleClick} className={baseStyles}>
-              {content}
-            </a>
-          </Focusable>
-          <Tooltip placement="right">{children}</Tooltip>
-        </TooltipTrigger>
-      )
-    }
-
-    return (
-      <Button
-        variant="ghost"
-        tooltipPlacement="right"
-        tooltip={tooltipText}
-        onClick={handleClick}
-        className={cn(baseStyles, "w-full")}
-      >
-        {content}
-      </Button>
-    )
-  }
-
-  // Normal mode
-  if (href) {
-    return (
-      <a href={href} onClick={handleClick} className={baseStyles}>
-        {content}
-      </a>
-    )
-  }
-
-  return (
-    <button onClick={handleClick} className={cn(baseStyles, "w-full")}>
-      {content}
-    </button>
-  )
-}
-
-// Sidebar Divider
-export function SidebarSeparator({ className }: { className?: string }) {
-  const { sidebarState } = useDashboard()
-  const isCollapsed = sidebarState === "collapsed"
-
-  return (
-    <div
-      className={cn(
-        "bg-gray-6/50",
-        isCollapsed ? "mx-auto my-1.5 h-px w-8" : "my-2 h-px",
-        className
-      )}
-    />
-  )
-}
-
-// Search box for sidebar
-export interface SidebarSearchProps {
-  placeholder?: string
-  shortcut?: string
-  onSearch?: (value: string) => void
-  className?: string
-}
-
-export function SidebarSearch({
-  placeholder = "Search",
-  shortcut = "⌘K",
-  onSearch,
-  className,
-}: SidebarSearchProps) {
-  const { sidebarState } = useDashboard()
-  const isCollapsed = sidebarState === "collapsed"
-
-  if (isCollapsed) {
-    return (
-      <div className="px-3 py-2">
-        <Button
-          mode="icon"
-          variant="ghost"
-          tooltip={`Search (${shortcut})`}
-          className={cn(
-            "flex h-12 w-full items-center justify-center rounded-2xl",
-            "text-gray-11 hover:bg-gray-4/50 hover:text-gray-12",
-            className
-          )}
-        >
-          <Search className="size-5" />
-        </Button>
-      </div>
-    )
-  }
-
-  return (
-    <div className={cn("px-3 py-2", className)}>
-      <SearchInput
-        placeholder={placeholder}
-        onChange={(value) => onSearch?.(value)}
-        className="h-12 w-full rounded-2xl"
-      />
-    </div>
-  )
-}

package/src/components/DashboardLayout/index.ts

@@ -1,33 +0,0 @@
-export {
-  DashboardContent,
-  DashboardHeader,
-  DashboardLayout,
-  DashboardMain,
-  Sidebar,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarNav,
-  useDashboard,
-  type DashboardContentProps,
-  type DashboardHeaderProps,
-  type DashboardLayoutProps,
-  type DashboardMainProps,
-  type SidebarFooterProps,
-  type SidebarHeaderProps,
-  type SidebarNavProps,
-  type SidebarProps,
-} from "./DashboardLayout"
-
-export {
-  SidebarNavGroup,
-  SidebarNavItem,
-  SidebarNavSection,
-  SidebarSearch,
-  SidebarSeparator,
-  SidebarToggle,
-  type SidebarNavGroupProps,
-  type SidebarNavItemProps,
-  type SidebarNavSectionProps,
-  type SidebarSearchProps,
-  type SidebarToggleProps,
-} from "./SidebarNav"