@opencosmos/ui 1.3.1

package/src/components/navigation/Command.tsx

@@ -0,0 +1,159 @@
+"use client";
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { Dialog, DialogContent } from "../overlays/Dialog"
+
+const Command = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive>>;
+  }
+) => (<CommandPrimitive
+  ref={ref}
+  className={cn(
+    "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+    className
+  )}
+  {...props}
+/>)
+
+const CommandDialog = ({ children, ...props }: React.ComponentProps<typeof Dialog>) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.Input>>;
+  }
+) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <CommandPrimitive.Input
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+</div>)
+
+const CommandList = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.List>>;
+  }
+) => (<CommandPrimitive.List
+  ref={ref}
+  className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+  {...props}
+/>)
+
+const CommandEmpty = (
+  {
+    ref,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.Empty>>;
+  }
+) => (<CommandPrimitive.Empty
+  ref={ref}
+  className="py-6 text-center text-sm"
+  {...props}
+/>)
+
+const CommandGroup = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.Group>>;
+  }
+) => (<CommandPrimitive.Group
+  ref={ref}
+  className={cn(
+    "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+    className
+  )}
+  {...props}
+/>)
+
+const CommandSeparator = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.Separator>>;
+  }
+) => (<CommandPrimitive.Separator
+  ref={ref}
+  className={cn("-mx-1 h-px bg-border", className)}
+  {...props}
+/>)
+
+const CommandItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.Item>>;
+  }
+) => (<CommandPrimitive.Item
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[disabled=true]:opacity-50",
+    className
+  )}
+  {...props}
+/>)
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandShortcut,
+}

package/src/components/navigation/Menubar.tsx

@@ -0,0 +1,115 @@
+"use client";
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu
+const MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group
+const MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal
+const MenubarSub: typeof MenubarPrimitive.Sub = MenubarPrimitive.Sub
+const MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof MenubarPrimitive.Root>>;
+  }
+) => (<MenubarPrimitive.Root
+  ref={ref}
+  className={cn("flex h-9 items-center space-x-1 rounded-md border bg-background p-1", className)}
+  {...props}
+/>)
+
+const MenubarTrigger = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> & {
+    ref?: React.Ref<React.ElementRef<typeof MenubarPrimitive.Trigger>>;
+  }
+) => (<MenubarPrimitive.Trigger
+  ref={ref}
+  className={cn("flex cursor-default select-none items-center rounded-xs px-3 py-1 text-sm font-medium outline-none focus:bg-accent data-[state=open]:bg-accent", className)}
+  {...props}
+/>)
+
+const MenubarContent = (
+  {
+    ref,
+    className,
+    align = "start",
+    alignOffset = -4,
+    sideOffset = 8,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof MenubarPrimitive.Content>>;
+  }
+) => (<MenubarPrimitive.Portal>
+  <MenubarPrimitive.Content
+    ref={ref}
+    align={align}
+    alignOffset={alignOffset}
+    sideOffset={sideOffset}
+    className={cn("z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", className)}
+    style={{
+      backgroundColor: 'var(--color-popover, #ffffff)',
+      color: 'var(--color-popover-foreground, #0a0a0a)',
+      border: '1px solid var(--color-border, #d4d4d4)',
+      borderRadius: 'var(--radius, 0.5rem)',
+      boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      zIndex: 50,
+      overflow: 'hidden',
+      ...style,
+    }}
+    {...props}
+  />
+</MenubarPrimitive.Portal>)
+
+const MenubarItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    ref?: React.Ref<React.ElementRef<typeof MenubarPrimitive.Item>>;
+  }
+) => (<MenubarPrimitive.Item
+  ref={ref}
+  className={cn("relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)}
+  {...props}
+/>)
+
+const MenubarSeparator = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> & {
+    ref?: React.Ref<React.ElementRef<typeof MenubarPrimitive.Separator>>;
+  }
+) => (<MenubarPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />)
+
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
+}
+MenubarShortcut.displayName = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarGroup,
+  MenubarPortal,
+  MenubarSub,
+  MenubarRadioGroup,
+}

package/src/components/navigation/NavLink.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+export interface NavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    active?: boolean;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    variant?: 'pill' | 'minimal';
+}
+
+export const NavLink = (
+    {
+        ref,
+        active = false,
+        children,
+        icon,
+        variant = 'pill',
+        className = '',
+        ...props
+    }: NavLinkProps & {
+        ref?: React.Ref<HTMLAnchorElement>;
+    }
+) => {
+    const variants = {
+        pill: `px-3 py-2 rounded-lg
+         ${active
+                ? 'bg-[var(--color-primary)]/10 text-[var(--color-primary)]'
+                : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-hover)] hover:text-[var(--color-text-primary)]'}`,
+        minimal: `relative pb-1 rounded-xs
+           ${active
+                ? 'text-[var(--color-text-primary)] font-medium after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-[var(--color-primary)] after:rounded-full'
+                : 'text-[var(--color-text-secondary)] hover:text-[var(--color-primary)]'}`
+    };
+
+    return (
+        <a
+            ref={ref}
+            className={`
+      group flex items-center gap-2 text-sm font-medium transition-all duration-200
+      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus)]
+      cursor-pointer
+      ${variants[variant]}
+      ${className}
+    `}
+            aria-current={active ? 'page' : undefined}
+            {...props}
+        >
+            {icon && (
+                <span className={`w-4 h-4 transition-colors ${active ? 'text-[var(--color-primary)]' : 'text-[var(--color-text-muted)] group-hover:text-[var(--color-text-primary)]'}`}>
+                    {icon}
+                </span>
+            )}
+            {children}
+        </a>
+    );
+};

package/src/components/navigation/NavigationMenu.tsx

@@ -0,0 +1,125 @@
+"use client";
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+const NavigationMenu = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.Root>>;
+  }
+) => (<NavigationMenuPrimitive.Root
+  ref={ref}
+  className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+  {...props}
+>
+  {children}
+  <NavigationMenuViewport />
+</NavigationMenuPrimitive.Root>)
+
+const NavigationMenuList = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.List>>;
+  }
+) => (<NavigationMenuPrimitive.List
+  ref={ref}
+  className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
+  {...props}
+/>)
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.Trigger>>;
+  }
+) => (<NavigationMenuPrimitive.Trigger
+  ref={ref}
+  className={cn(navigationMenuTriggerStyle(), "group", className)}
+  {...props}
+>
+  {children}{" "}
+  <ChevronDown
+    className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+    aria-hidden="true"
+  />
+</NavigationMenuPrimitive.Trigger>)
+
+const NavigationMenuContent = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.Content>>;
+  }
+) => (<NavigationMenuPrimitive.Content
+  ref={ref}
+  className={cn("left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto", className)}
+  {...props}
+/>)
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.Viewport>>;
+  }
+) => (<div className={cn("absolute left-0 top-full flex justify-center")}>
+  <NavigationMenuPrimitive.Viewport
+    className={cn("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", className)}
+    ref={ref}
+    {...props}
+  />
+</div>)
+
+const NavigationMenuIndicator = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.Indicator>>;
+  }
+) => (<NavigationMenuPrimitive.Indicator
+  ref={ref}
+  className={cn("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in", className)}
+  {...props}
+>
+  <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+</NavigationMenuPrimitive.Indicator>)
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

package/src/components/navigation/Pagination.tsx

@@ -0,0 +1,121 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { ButtonProps, buttonVariants } from "../actions/Button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentProps<"ul"> & {
+    ref?: React.Ref<HTMLUListElement>;
+  }
+) => (<ul
+  ref={ref}
+  className={cn("flex flex-row items-center gap-1", className)}
+  {...props}
+/>)
+
+const PaginationItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentProps<"li"> & {
+    ref?: React.Ref<HTMLLIElement>;
+  }
+) => (<li ref={ref} className={cn("", className)} {...props} />)
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

package/src/components/navigation/SecondaryNav.tsx

@@ -0,0 +1,100 @@
+'use client';;
+import React from 'react';
+import { Button } from '../actions/Button';
+
+export interface SecondaryNavItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+
+export interface SecondaryNavProps {
+    /**
+     * Array of navigation items
+     */
+    items: SecondaryNavItem[];
+    /**
+     * Currently active item ID
+     */
+    activeId: string;
+    /**
+     * Callback when an item is selected
+     */
+    onItemChange: (id: string) => void;
+    /**
+     * Maximum width for content container (should match page variant)
+     * @default 'max-w-7xl'
+     */
+    maxWidth?: 'max-w-7xl' | 'max-w-[1440px]' | 'max-w-4xl';
+    /**
+     * Additional className for customization
+     */
+    className?: string;
+    /**
+     * Sticky behavior mode
+     * - 'stacked': Positions automatically below Header (default)
+     * - 'standalone': Sticks to top of viewport (0px)
+     * @default 'stacked'
+     */
+    mode?: 'stacked' | 'standalone';
+    /**
+     * Top offset for sticky positioning.
+     * Overrides 'mode' if provided.
+     */
+    top?: string;
+}
+
+/**
+ * Secondary Navigation Component
+ * ... (keep existing comment block) ...
+ */
+export const SecondaryNav = (
+    {
+        ref,
+        items,
+        activeId,
+        onItemChange,
+        maxWidth = 'max-w-7xl',
+        mode = 'stacked',
+        top,
+        className = ''
+    }: SecondaryNavProps & {
+        ref?: React.Ref<HTMLElement>;
+    }
+) => {
+    // Determine sticky position based on mode, unless manually overridden
+    const stickyClass = top || (mode === 'stacked' ? 'top-16 lg:top-20' : 'top-0');
+
+    return (
+        <nav
+            ref={ref}
+            className={`
+                sticky ${stickyClass} z-40
+                bg-[var(--color-surface)]/60 backdrop-blur-md
+                border-b border-[var(--color-border)]
+                -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8
+                ${className}
+            `}
+            aria-label="Secondary navigation"
+        >
+            <div className={`${maxWidth} mx-auto px-4 sm:px-6 lg:px-8`}>
+                <div className="flex items-center gap-1 overflow-x-auto py-3 scrollbar-hide">
+                    {items.map((item) => (
+                        <Button
+                            key={item.id}
+                            onClick={() => onItemChange(item.id)}
+                            variant={activeId === item.id ? 'default' : 'ghost'}
+                            size="sm"
+                            className={`whitespace-nowrap ${activeId !== item.id ? 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]' : ''
+                                }`}
+                            aria-current={activeId === item.id ? 'page' : undefined}
+                        >
+                            {item.icon && <span className="mr-2 flex items-center">{item.icon}</span>}
+                            {item.label}
+                        </Button>
+                    ))}
+                </div>
+            </div>
+        </nav>
+    );
+};