@opencosmos/ui 1.3.1

package/src/components/overlays/DropdownMenu.tsx

@@ -0,0 +1,242 @@
+"use client";
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = (
+  {
+    ref,
+    className,
+    inset,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  } & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>>;
+  }
+) => (<DropdownMenuPrimitive.SubTrigger
+  ref={ref}
+  className={cn(
+    "flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none focus:bg-primary focus:text-primary-foreground data-[state=open]:bg-primary data-[state=open]:text-primary-foreground",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+>
+  {children}
+  <ChevronRight className="ml-auto h-4 w-4" />
+</DropdownMenuPrimitive.SubTrigger>)
+
+const DropdownMenuSubContent = (
+  {
+    ref,
+    className,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
+  }
+) => (<DropdownMenuPrimitive.SubContent
+  ref={ref}
+  className={cn(
+    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    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 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    zIndex: 50,
+    overflow: 'hidden',
+    ...style,
+  }}
+  {...props}
+/>)
+
+const DropdownMenuContent = (
+  {
+    ref,
+    className,
+    sideOffset = 4,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
+  }
+) => (<DropdownMenuPrimitive.Portal>
+  <DropdownMenuPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      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}
+  />
+</DropdownMenuPrimitive.Portal>)
+
+const DropdownMenuItem = (
+  {
+    ref,
+    className,
+    inset,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  } & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Item>>;
+  }
+) => (<DropdownMenuPrimitive.Item
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+/>)
+
+const DropdownMenuCheckboxItem = (
+  {
+    ref,
+    className,
+    children,
+    checked,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
+  }
+) => (<DropdownMenuPrimitive.CheckboxItem
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    className
+  )}
+  checked={checked}
+  {...props}
+>
+  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <DropdownMenuPrimitive.ItemIndicator>
+      <Check className="h-4 w-4" />
+    </DropdownMenuPrimitive.ItemIndicator>
+  </span>
+  {children}
+</DropdownMenuPrimitive.CheckboxItem>)
+
+const DropdownMenuRadioItem = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
+  }
+) => (<DropdownMenuPrimitive.RadioItem
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    className
+  )}
+  {...props}
+>
+  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <DropdownMenuPrimitive.ItemIndicator>
+      <Circle className="h-2 w-2 fill-current" />
+    </DropdownMenuPrimitive.ItemIndicator>
+  </span>
+  {children}
+</DropdownMenuPrimitive.RadioItem>)
+
+const DropdownMenuLabel = (
+  {
+    ref,
+    className,
+    inset,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  } & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Label>>;
+  }
+) => (<DropdownMenuPrimitive.Label
+  ref={ref}
+  className={cn(
+    "px-2 py-1.5 text-sm font-semibold",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+/>)
+
+const DropdownMenuSeparator = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
+  }
+) => (<DropdownMenuPrimitive.Separator
+  ref={ref}
+  className={cn("-mx-1 my-1 h-px bg-muted", className)}
+  {...props}
+/>)
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/src/components/overlays/HoverCard.tsx

@@ -0,0 +1,32 @@
+"use client";
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "../../lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = (
+  {
+    ref,
+    className,
+    align = "center",
+    sideOffset = 4,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof HoverCardPrimitive.Content>>;
+  }
+) => (<HoverCardPrimitive.Content
+  ref={ref}
+  align={align}
+  sideOffset={sideOffset}
+  className={cn(
+    "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    className
+  )}
+  {...props}
+/>)
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/src/components/overlays/Modal.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { useMotionPreference } from '../../hooks';
+
+export interface ModalProps {
+  /**
+   * Whether the modal is open
+   */
+  isOpen: boolean;
+
+  /**
+   * Callback fired when the modal should close
+   */
+  onClose: () => void;
+
+  /**
+   * Modal title (optional)
+   */
+  title?: string;
+
+  /**
+   * Modal content
+   */
+  children: React.ReactNode;
+
+  /**
+   * Footer content (typically buttons)
+   */
+  footer?: React.ReactNode;
+
+  /**
+   * Size of the modal
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+  /**
+   * Whether clicking the overlay closes the modal
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+
+  /**
+   * Whether pressing Escape closes the modal
+   * @default true
+   */
+  closeOnEscape?: boolean;
+
+  /**
+   * Additional CSS classes for the modal content
+   */
+  className?: string;
+}
+
+/**
+ * Modal Component
+ *
+ * A dialog overlay for focused user interactions.
+ *
+ * Features:
+ * - Keyboard accessible (Escape to close, focus trap)
+ * - Click outside to close (optional)
+ * - Multiple size variants
+ * - Smooth animations
+ * - Blocks body scroll when open
+ * - Theme-aware styling
+ *
+ * Example:
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ *   footer={
+ *     <>
+ *       <Button variant="ghost" onClick={() => setIsOpen(false)}>Cancel</Button>
+ *       <Button onClick={handleConfirm}>Confirm</Button>
+ *     </>
+ *   }
+ * >
+ *   <p>Are you sure you want to continue?</p>
+ * </Modal>
+ * ```
+ */
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  size = 'md',
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  className = '',
+}) => {
+  const { shouldAnimate, scale } = useMotionPreference();
+
+  const animationDuration = shouldAnimate && scale > 0 ? `${0.2 * (5 / scale)}s` : '0s';
+
+  // Lock body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  // Handle escape key
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, closeOnEscape, onClose]);
+
+  if (!isOpen) return null;
+
+  const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+    full: 'max-w-[95vw] max-h-[95vh]',
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (closeOnOverlayClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className={`
+        fixed inset-0 z-[9999] flex items-center justify-center p-4
+        bg-black/50 backdrop-blur-xs
+        ${shouldAnimate ? 'animate-fade-in' : ''}
+      `}
+      style={{ animationDuration }}
+      onClick={handleOverlayClick}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? 'modal-title' : undefined}
+    >
+      <div
+        className={`
+          ${sizeClasses[size]}
+          w-full
+          bg-[var(--color-surface)]
+          rounded-2xl
+          shadow-2xl
+          border border-[var(--color-border)]
+          flex flex-col
+          max-h-[90vh]
+          ${shouldAnimate ? 'animate-scale-in' : ''}
+          ${className}
+        `}
+        style={{ animationDuration }}
+      >
+        {/* Header */}
+        {title && (
+          <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--color-border)]">
+            <h2
+              id="modal-title"
+              className="text-xl font-semibold text-[var(--color-text-primary)]"
+            >
+              {title}
+            </h2>
+            <button
+              onClick={onClose}
+              className="
+                p-2 rounded-lg
+                text-[var(--color-text-primary)]
+                hover:bg-[var(--color-hover)]
+                transition-colors
+                focus-visible:outline-none
+                focus-visible:ring-2
+                focus-visible:ring-[var(--color-focus)]
+              "
+              aria-label="Close modal"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-[var(--color-border)]">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Modal.displayName = 'Modal';
+
+// Add animation keyframes
+if (typeof document !== 'undefined') {
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes scale-in {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    .animate-fade-in {
+      animation: fade-in 0.2s ease-out;
+    }
+    .animate-scale-in {
+      animation: scale-in 0.2s ease-out;
+    }
+  `;
+  if (!document.querySelector('style[data-modal-animations]')) {
+    style.setAttribute('data-modal-animations', 'true');
+    document.head.appendChild(style);
+  }
+}