@opencosmos/ui 1.3.1

package/src/components/overlays/Dialog.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect } from 'vitest'
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from './Dialog'
+
+describe('Dialog', () => {
+  it('renders trigger and opens on click', async () => {
+    const user = userEvent.setup()
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogDescription>Dialog description text</DialogDescription>
+        </DialogContent>
+      </Dialog>
+    )
+
+    expect(screen.getByRole('button', { name: /open dialog/i })).toBeInTheDocument()
+    expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: /open dialog/i }))
+    expect(screen.getByText('Dialog Title')).toBeInTheDocument()
+  })
+
+  it('renders content when open', () => {
+    render(
+      <Dialog open>
+        <DialogContent>
+          <DialogTitle>Visible Title</DialogTitle>
+          <DialogDescription>Visible description</DialogDescription>
+        </DialogContent>
+      </Dialog>
+    )
+
+    expect(screen.getByText('Visible Title')).toBeInTheDocument()
+    expect(screen.getByText('Visible description')).toBeInTheDocument()
+  })
+
+  it('closes on close button click', async () => {
+    const user = userEvent.setup()
+    render(
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Title</DialogTitle>
+          <DialogClose>Close Dialog</DialogClose>
+        </DialogContent>
+      </Dialog>
+    )
+
+    await user.click(screen.getByRole('button', { name: /open/i }))
+    expect(screen.getByText('Title')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: /close dialog/i }))
+    expect(screen.queryByText('Title')).not.toBeInTheDocument()
+  })
+
+  it('renders title and description', () => {
+    render(
+      <Dialog open>
+        <DialogContent>
+          <DialogTitle>My Title</DialogTitle>
+          <DialogDescription>My Description</DialogDescription>
+        </DialogContent>
+      </Dialog>
+    )
+
+    expect(screen.getByText('My Title')).toBeInTheDocument()
+    expect(screen.getByText('My Description')).toBeInTheDocument()
+  })
+})

package/src/components/overlays/Dialog.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  style,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-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",
+        className
+      )}
+      style={{
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 50,
+        ...style,
+      }}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  style,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        style={{
+          backgroundColor: 'var(--color-background, #ffffff)',
+          border: '1px solid var(--color-border, #d4d4d4)',
+          borderRadius: '0.75rem',
+          boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+          zIndex: 50,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <X />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/src/components/overlays/Drawer.tsx

@@ -0,0 +1,128 @@
+"use client";
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "../../lib/utils"
+
+const Drawer: typeof DrawerPrimitive.Root = DrawerPrimitive.Root
+
+const DrawerTrigger: typeof DrawerPrimitive.Trigger = DrawerPrimitive.Trigger
+
+const DrawerPortal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal
+
+const DrawerClose: typeof DrawerPrimitive.Close = DrawerPrimitive.Close
+
+const DrawerOverlay = (
+  {
+    ref,
+    className,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
+    ref?: React.Ref<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
+  }
+) => (<DrawerPrimitive.Overlay
+  ref={ref}
+  className={cn("fixed inset-0 z-50 bg-black/80", className)}
+  style={{
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    zIndex: 50,
+    ...style,
+  }}
+  {...props}
+/>)
+
+const DrawerContent = (
+  {
+    ref,
+    className,
+    children,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof DrawerPrimitive.Content>>;
+  }
+) => (<DrawerPortal>
+  <DrawerOverlay />
+  <DrawerPrimitive.Content
+    ref={ref}
+    className={cn(
+      "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+      className
+    )}
+    style={{
+      backgroundColor: 'var(--color-background, #ffffff)',
+      border: '1px solid var(--color-border, #d4d4d4)',
+      borderRadius: '10px 10px 0 0',
+      zIndex: 50,
+      ...style,
+    }}
+    {...props}
+  >
+    <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+    {children}
+  </DrawerPrimitive.Content>
+</DrawerPortal>)
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
+    ref?: React.Ref<React.ElementRef<typeof DrawerPrimitive.Title>>;
+  }
+) => (<DrawerPrimitive.Title
+  ref={ref}
+  className={cn(
+    "text-lg font-semibold leading-none tracking-tight",
+    className
+  )}
+  {...props}
+/>)
+
+const DrawerDescription = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
+    ref?: React.Ref<React.ElementRef<typeof DrawerPrimitive.Description>>;
+  }
+) => (<DrawerPrimitive.Description
+  ref={ref}
+  className={cn("text-sm text-muted-foreground", className)}
+  {...props}
+/>)
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

package/src/components/overlays/Dropdown.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useMotionPreference } from '../../hooks';
+
+export interface DropdownItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  divider?: boolean;
+}
+
+export interface DropdownProps {
+  /**
+   * Trigger element (button, link, etc.)
+   */
+  trigger: React.ReactNode;
+
+  /**
+   * Dropdown menu items
+   */
+  items: DropdownItem[];
+
+  /**
+   * Callback when an item is selected
+   */
+  onSelect?: (value: string) => void;
+
+  /**
+   * Dropdown alignment relative to trigger
+   * @default 'left'
+   */
+  align?: 'left' | 'right' | 'center';
+
+  /**
+   * Additional CSS classes for the dropdown menu
+   */
+  className?: string;
+}
+
+/**
+ * Dropdown Component
+ *
+ * A menu that appears when clicking a trigger element.
+ *
+ * Features:
+ * - Click outside to close
+ * - Keyboard navigation (Arrow keys, Enter, Escape)
+ * - Flexible trigger element
+ * - Optional icons
+ * - Dividers between items
+ * - Theme-aware styling
+ * - Smooth animations
+ *
+ * Example:
+ * ```tsx
+ * <Dropdown
+ *   trigger={<Button>Actions</Button>}
+ *   items={[
+ *     { label: 'Edit', value: 'edit', icon: <EditIcon /> },
+ *     { label: 'Delete', value: 'delete', icon: <DeleteIcon /> },
+ *     { label: 'Divider', value: 'div', divider: true },
+ *     { label: 'Archive', value: 'archive' },
+ *   ]}
+ *   onSelect={(value) => handleAction(value)}
+ * />
+ * ```
+ */
+export const Dropdown: React.FC<DropdownProps> = ({
+  trigger,
+  items,
+  onSelect,
+  align = 'left',
+  className = '',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const { shouldAnimate, scale } = useMotionPreference();
+
+  const animationDuration = shouldAnimate && scale > 0 ? `${0.15 * (5 / scale)}s` : '0s';
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const selectableItems = items.filter((item) => !item.disabled && !item.divider);
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setFocusedIndex((prev) => {
+            const next = prev + 1;
+            return next >= selectableItems.length ? 0 : next;
+          });
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setFocusedIndex((prev) => {
+            const next = prev - 1;
+            return next < 0 ? selectableItems.length - 1 : next;
+          });
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < selectableItems.length) {
+            const item = selectableItems[focusedIndex];
+            onSelect?.(item.value);
+            setIsOpen(false);
+            setFocusedIndex(-1);
+          }
+          break;
+        case 'Escape':
+          e.preventDefault();
+          setIsOpen(false);
+          setFocusedIndex(-1);
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, focusedIndex, items, onSelect]);
+
+  const handleItemClick = (item: DropdownItem) => {
+    if (item.disabled || item.divider) return;
+    onSelect?.(item.value);
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
+
+  const alignClasses = {
+    left: 'left-0',
+    right: 'right-0',
+    center: 'left-1/2 -translate-x-1/2',
+  };
+
+  return (
+    <div ref={dropdownRef} className="relative inline-block">
+      <div onClick={() => setIsOpen(!isOpen)} role="button" tabIndex={0}>
+        {trigger}
+      </div>
+
+      {isOpen && (
+        <div
+          className={`
+            absolute top-full mt-2 ${alignClasses[align]}
+            min-w-[200px]
+            bg-[var(--color-background)]/80
+            backdrop-blur-md
+            border border-[var(--color-border)]
+            rounded-lg
+            shadow-lg
+            py-2
+            z-50
+            ${shouldAnimate ? 'animate-dropdown-in' : ''}
+            ${className}
+          `}
+          style={{ animationDuration }}
+          role="menu"
+          aria-orientation="vertical"
+        >
+          {items.map((item, index) => {
+            if (item.divider) {
+              return (
+                <div
+                  key={`divider-${index}`}
+                  className="my-2 border-t border-[var(--color-border)]"
+                  role="separator"
+                />
+              );
+            }
+
+            const selectableItems = items.filter((i) => !i.disabled && !i.divider);
+            const selectableIndex = selectableItems.indexOf(item);
+            const isFocused = selectableIndex === focusedIndex;
+
+            return (
+              <button
+                key={item.value}
+                onClick={() => handleItemClick(item)}
+                disabled={item.disabled}
+                className={`
+                  w-full flex items-center gap-3 px-4 py-2 text-sm
+                  text-left transition-colors
+                  ${item.disabled
+                    ? 'opacity-50 cursor-not-allowed'
+                    : `
+                        text-[var(--color-text-primary)]
+                        hover:bg-[var(--color-hover)]
+                        ${isFocused ? 'bg-[var(--color-hover)]' : ''}
+                      `
+                  }
+                `}
+                role="menuitem"
+                tabIndex={-1}
+              >
+                {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
+                <span className="flex-1">{item.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Dropdown.displayName = 'Dropdown';
+
+// Add animation keyframes
+if (typeof document !== 'undefined') {
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes dropdown-in {
+      from {
+        opacity: 0;
+        transform: translateY(-8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .animate-dropdown-in {
+      animation: dropdown-in 0.15s ease-out;
+    }
+  `;
+  if (!document.querySelector('style[data-dropdown-animations]')) {
+    style.setAttribute('data-dropdown-animations', 'true');
+    document.head.appendChild(style);
+  }
+}