@opencosmos/ui 1.3.1

package/src/components/cursor/TargetCursor.tsx

@@ -0,0 +1,187 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+
+interface TargetCursorProps {
+    color?: string;
+    outerSize?: number;
+    innerSize?: number;
+    outerAlpha?: number;
+    innerScale?: number;
+    outerScale?: number;
+    clickScale?: number;
+    blendMode?: boolean;
+}
+
+export function TargetCursor({
+    color = '255, 255, 255',
+    outerSize = 40,
+    innerSize = 8,
+    outerAlpha = 0.4,
+    innerScale = 0.7,
+    outerScale = 4,
+    clickScale = 0.7,
+    blendMode = true
+}: TargetCursorProps) {
+    const cursorOuterRef = useRef<HTMLDivElement>(null);
+    const cursorInnerRef = useRef<HTMLDivElement>(null);
+    const requestRef = useRef<number | null>(null);
+    const previousTimeRef = useRef<number | null>(null);
+
+    // Mouse position
+    const endX = useRef(0);
+    const endY = useRef(0);
+    // Current interpolated position for outer circle
+    const _x = useRef(0);
+    const _y = useRef(0);
+
+    const [isActive, setIsActive] = useState(false);
+    const [isActiveClickable, setIsActiveClickable] = useState(false);
+    const [isVisible, setIsVisible] = useState(false);
+
+    // Initial positioning
+    useEffect(() => {
+        const onMouseMove = (e: MouseEvent) => {
+            endX.current = e.clientX;
+            endY.current = e.clientY;
+
+            // Direct DOM update for performance
+            if (cursorInnerRef.current) {
+                cursorInnerRef.current.style.top = `${e.clientY}px`;
+                cursorInnerRef.current.style.left = `${e.clientX}px`;
+            }
+
+            if (!isVisible) {
+                _x.current = e.clientX;
+                _y.current = e.clientY;
+                setIsVisible(true);
+            }
+
+            // Check for clickable targets using DOM traversal (lighter than getComputedStyle)
+            // Note: getComputedStyle causes reflow, so avoid if possible.
+            // Using tagName and common patterns is preferred for performance.
+            const target = e.target as HTMLElement;
+            // Simple heuristics
+            if (
+                target.tagName.toLowerCase() === 'a' ||
+                target.tagName.toLowerCase() === 'button' ||
+                target.closest('a') ||
+                target.closest('button') ||
+                target.onclick ||
+                target.getAttribute('role') === 'button'
+            ) {
+                setIsActiveClickable(true);
+            } else {
+                setIsActiveClickable(false);
+            }
+        };
+
+        const onMouseDown = () => setIsActive(true);
+        const onMouseUp = () => setIsActive(false);
+        const onMouseEnter = () => setIsVisible(true);
+        const onMouseLeave = () => setIsVisible(false);
+
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mousedown', onMouseDown);
+        window.addEventListener('mouseup', onMouseUp);
+        window.addEventListener('mouseenter', onMouseEnter);
+        window.addEventListener('mouseleave', onMouseLeave);
+
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mousedown', onMouseDown);
+            window.removeEventListener('mouseup', onMouseUp);
+            window.removeEventListener('mouseenter', onMouseEnter);
+            window.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [isVisible]);
+
+    // Animation Loop
+    const animateCursor = (time: number) => {
+        if (previousTimeRef.current !== undefined) {
+            _x.current += (endX.current - _x.current) / 8;
+            _y.current += (endY.current - _y.current) / 8;
+
+            if (cursorOuterRef.current) {
+                // translate3d for position, translate(-50%, -50%) for centering
+                cursorOuterRef.current.style.transform = `translate3d(${_x.current}px, ${_y.current}px, 0) translate(-50%, -50%)`;
+            }
+        }
+        previousTimeRef.current = time;
+        requestRef.current = requestAnimationFrame(animateCursor);
+    };
+
+    useEffect(() => {
+        requestRef.current = requestAnimationFrame(animateCursor);
+        return () => cancelAnimationFrame(requestRef.current!);
+    }, []);
+
+    useEffect(() => {
+        if (isVisible) {
+            const style = document.createElement('style');
+            style.innerHTML = `body, a, button, input, [role="button"] { cursor: none !important; }`;
+            document.head.appendChild(style);
+            return () => {
+                if (document.head.contains(style)) {
+                    document.head.removeChild(style);
+                }
+            };
+        }
+    }, [isVisible]);
+
+    // Inline styles for dynamic props
+    const styles = {
+        cursorInner: {
+            width: innerSize,
+            height: innerSize,
+            backgroundColor: `rgba(${color}, 1)`,
+            // transform handles centering and scale
+            transform: `translate(-50%, -50%) scale(${isActive || isActiveClickable ? innerScale : 1})`,
+            transition: 'transform 0.15s ease-out, opacity 0.15s ease-out',
+        },
+        cursorOuter: {
+            width: outerSize,
+            height: outerSize,
+            backgroundColor: `rgba(${color}, ${outerAlpha})`,
+            transition: 'width 0.3s, height 0.3s, background-color 0.3s',
+            ...(isActiveClickable && {
+                width: outerSize * 1.5,
+                height: outerSize * 1.5,
+                backgroundColor: `rgba(${color}, ${outerAlpha - 0.1})`,
+            })
+        }
+    };
+
+    if (!isVisible) return null;
+
+    return (
+        <>
+            <div
+                ref={cursorOuterRef}
+                style={{
+                    position: 'fixed',
+                    borderRadius: '50%',
+                    pointerEvents: 'none',
+                    zIndex: 9999,
+                    left: 0,
+                    top: 0,
+                    willChange: 'transform',
+                    mixBlendMode: blendMode ? 'difference' : 'normal',
+                    ...styles.cursorOuter
+                }}
+            />
+            <div
+                ref={cursorInnerRef}
+                style={{
+                    position: 'fixed',
+                    borderRadius: '50%',
+                    pointerEvents: 'none',
+                    zIndex: 9999,
+                    willChange: 'left, top, transform',
+                    mixBlendMode: blendMode ? 'difference' : 'normal',
+                    ...styles.cursorInner
+                }}
+            />
+            {/* Default cursor hidden via useEffect */}
+        </>
+    );
+}

package/src/components/cursor/index.ts

@@ -0,0 +1,2 @@
+export * from './SplashCursor';
+export * from './TargetCursor';

package/src/components/data-display/AspectImage.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+export interface AspectImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * Aspect ratio (width / height)
+     * @example 16/9, 4/3, 1
+     * @default 16/9
+     */
+    ratio?: number;
+    /**
+     * Image source
+     */
+    src: string;
+    /**
+     * Image alt text
+     */
+    alt: string;
+    /**
+     * Apply border radius
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Apply shadow
+     * @default false
+     */
+    shadow?: boolean;
+    /**
+     * Optional caption
+     */
+    caption?: React.ReactNode;
+}
+
+export const AspectImage = (
+    {
+        ref,
+        ratio = 16 / 9,
+        src,
+        alt,
+        rounded = true,
+        shadow = false,
+        caption,
+        className = '',
+        style,
+        ...props
+    }: AspectImageProps & {
+        ref?: React.Ref<HTMLImageElement>;
+    }
+) => {
+    return (
+        <figure className={`w-full ${className}`}>
+            <div
+                className={`relative overflow-hidden w-full bg-[var(--color-surface)] border border-[var(--color-border)]
+                ${rounded ? 'rounded-xl' : ''}
+                ${shadow ? 'shadow-md' : ''}`}
+                style={{ aspectRatio: ratio }}
+            >
+                <img
+                    ref={ref}
+                    src={src}
+                    alt={alt}
+                    className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
+                    {...props}
+                />
+            </div>
+            {caption && (
+                <figcaption className="mt-2 text-sm text-[var(--color-text-muted)] text-center">
+                    {caption}
+                </figcaption>
+            )}
+        </figure>
+    );
+};

package/src/components/data-display/Avatar.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Avatar, AvatarImage, AvatarFallback } from './Avatar'
+
+describe('Avatar', () => {
+  it('renders fallback text', () => {
+    render(
+      <Avatar>
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    )
+    expect(screen.getByText('JD')).toBeInTheDocument()
+  })
+
+  it('shows fallback when image has not loaded', () => {
+    // Radix Avatar only renders <img> after the load event fires,
+    // which never happens in jsdom — so fallback is shown instead
+    render(
+      <Avatar>
+        <AvatarImage src="/avatar.jpg" alt="John Doe" />
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    )
+    expect(screen.getByText('JD')).toBeInTheDocument()
+  })
+
+  it('applies custom className to avatar root', () => {
+    const { container } = render(
+      <Avatar className="custom-avatar">
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>
+    )
+    expect(container.firstChild).toHaveClass('custom-avatar')
+  })
+})

package/src/components/data-display/Avatar.tsx

@@ -0,0 +1,55 @@
+"use client";
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "../../lib/utils"
+
+const Avatar = (
+    {
+        ref,
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
+        ref?: React.Ref<React.ElementRef<typeof AvatarPrimitive.Root>>;
+    }
+) => (<AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+        "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+        className
+    )}
+    {...props}
+/>)
+
+const AvatarImage = (
+    {
+        ref,
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
+        ref?: React.Ref<React.ElementRef<typeof AvatarPrimitive.Image>>;
+    }
+) => (<AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+/>)
+
+const AvatarFallback = (
+    {
+        ref,
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
+        ref?: React.Ref<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
+    }
+) => (<AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground font-medium",
+        className
+    )}
+    {...props}
+/>)
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/data-display/Badge.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Badge } from './Badge'
+
+describe('Badge', () => {
+  it('renders with default variant', () => {
+    render(<Badge>Active</Badge>)
+    expect(screen.getByText('Active')).toBeInTheDocument()
+    expect(screen.getByText('Active')).toHaveClass('bg-primary')
+  })
+
+  it('renders different variants', () => {
+    const { rerender } = render(<Badge variant="secondary">Secondary</Badge>)
+    expect(screen.getByText('Secondary')).toHaveClass('bg-secondary')
+
+    rerender(<Badge variant="destructive">Destructive</Badge>)
+    expect(screen.getByText('Destructive')).toHaveClass('bg-destructive')
+
+    rerender(<Badge variant="outline">Outline</Badge>)
+    expect(screen.getByText('Outline')).toHaveClass('text-foreground')
+
+    rerender(<Badge variant="success">Success</Badge>)
+    expect(screen.getByText('Success')).toHaveClass('bg-success')
+  })
+
+  it('renders dot indicator when dot prop is true', () => {
+    render(<Badge dot>Status</Badge>)
+    const dot = screen.getByText('Status').querySelector('[aria-hidden="true"]')
+    expect(dot).toBeInTheDocument()
+    expect(dot).toHaveClass('animate-pulse')
+  })
+
+  it('does not render dot when dot prop is false', () => {
+    render(<Badge>No Dot</Badge>)
+    const dot = screen.getByText('No Dot').querySelector('[aria-hidden="true"]')
+    expect(dot).not.toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(<Badge className="custom-badge">Styled</Badge>)
+    expect(screen.getByText('Styled')).toHaveClass('custom-badge')
+  })
+})

package/src/components/data-display/Badge.tsx

@@ -0,0 +1,84 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+                secondary:
+                    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                destructive:
+                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+                outline: "text-foreground",
+                // Semantic variants from original design system
+                success: "border-transparent bg-success text-success-foreground hover:bg-success/80",
+                warning: "border-transparent bg-warning text-warning-foreground hover:bg-warning/80",
+                error: "border-transparent bg-error text-error-foreground hover:bg-error/80",
+                info: "border-transparent bg-info text-info-foreground hover:bg-info/80",
+            },
+            size: {
+                sm: "px-2 py-0.5 text-xs",
+                md: "px-2.5 py-1 text-sm",
+                lg: "px-3 py-1.5 text-base",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "md",
+        },
+    }
+)
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {
+    dot?: boolean;
+}
+
+function Badge({ className, variant, size, dot, children, style, ...props }: BadgeProps & { style?: React.CSSProperties }) {
+    const sizeStyles: Record<string, React.CSSProperties> = {
+        sm: { padding: '0.125rem 0.5rem', fontSize: 'var(--text-xs, 0.75rem)' },
+        md: { padding: '0.25rem 0.625rem', fontSize: 'var(--text-sm, 0.875rem)' },
+        lg: { padding: '0.375rem 0.75rem', fontSize: '1rem' },
+    };
+    const variantStyles: Record<string, React.CSSProperties> = {
+        default: { backgroundColor: 'var(--color-primary, #346BEA)', color: 'var(--color-primary-foreground, #ffffff)', borderColor: 'transparent' },
+        secondary: { backgroundColor: 'var(--color-secondary, #EBF0FD)', color: 'var(--color-secondary-foreground, #1E49AA)', borderColor: 'transparent' },
+        destructive: { backgroundColor: 'var(--color-destructive, #C62828)', color: 'var(--color-destructive-foreground, #ffffff)', borderColor: 'transparent' },
+        outline: { color: 'var(--color-foreground, #212121)' },
+        success: { backgroundColor: 'var(--color-success, #2E7D32)', color: 'var(--color-success-foreground, #ffffff)', borderColor: 'transparent' },
+        warning: { backgroundColor: 'var(--color-warning, #E65100)', color: 'var(--color-warning-foreground, #ffffff)', borderColor: 'transparent' },
+        error: { backgroundColor: 'var(--color-error, #C62828)', color: 'var(--color-error-foreground, #ffffff)', borderColor: 'transparent' },
+        info: { backgroundColor: 'var(--color-info, #346BEA)', color: 'var(--color-info-foreground, #ffffff)', borderColor: 'transparent' },
+    };
+    return (
+        <div
+            className={cn(badgeVariants({ variant, size }), className)}
+            style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                borderRadius: '9999px',
+                fontWeight: 600,
+                ...sizeStyles[size || 'md'],
+                ...variantStyles[variant || 'default'],
+                ...style,
+            }}
+            {...props}
+        >
+            {dot && (
+                <span className={cn(
+                    "mr-1.5 rounded-full bg-current animate-pulse",
+                    size === 'sm' ? "w-1.5 h-1.5" :
+                        size === 'lg' ? "w-2.5 h-2.5" : "w-2 h-2"
+                )} aria-hidden="true" />
+            )}
+            {children}
+        </div>
+    )
+}
+
+export { Badge, badgeVariants }

package/src/components/data-display/Brand.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+export interface BrandProps {
+  /**
+   * Brand name or logo element
+   */
+  children: React.ReactNode;
+
+  /**
+   * Size variant
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Optional href for link behavior
+   * When provided, renders as an anchor tag
+   */
+  href?: string;
+
+  /**
+   * Additional className for customization
+   */
+  className?: string;
+
+  /**
+   * Click handler (used when href is provided)
+   */
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+/**
+ * Brand Component
+ *
+ * A theme-aware brand/logo component that automatically handles:
+ * - Dark mode support via design system tokens
+ * - Consistent typography and sizing
+ * - Optional link behavior
+ * - Focus states and accessibility
+ *
+ * This component encapsulates the proper styling so you never need to
+ * manually apply `text-[var(--color-text-primary)]` to logos.
+ *
+ * Features:
+ * - Automatic theme-aware text color
+ * - Three size variants (sm, md, lg)
+ * - Works standalone or as a link
+ * - Compatible with Next.js Link wrapper
+ * - Proper focus states
+ *
+ * Usage:
+ * ```tsx
+ * // Standalone brand text
+ * <Brand>Company Name</Brand>
+ *
+ * // As a link (use with Next.js Link)
+ * <Brand href="/">Company Name</Brand>
+ *
+ * // With Next.js Link wrapper
+ * <Brand>
+ *   <NextLink href="/">Company Name</NextLink>
+ * </Brand>
+ *
+ * // Different sizes
+ * <Brand size="sm">Brand</Brand>
+ * <Brand size="lg">Brand</Brand>
+ * ```
+ */
+export const Brand = (
+  {
+    ref,
+    children,
+    size = 'md',
+    href,
+    className = '',
+    onClick
+  }: BrandProps & {
+    ref?: React.Ref<HTMLElement>;
+  }
+) => {
+  // Size mappings following Swiss Grid typography scale
+  const sizeStyles = {
+    sm: 'text-base',      // 16px
+    md: 'text-lg',        // 18px
+    lg: 'text-2xl',       // 24px
+  };
+
+  // Base styles with design system tokens
+  const baseStyles = `
+    font-bold
+    text-[var(--color-text-primary)]
+    transition-colors duration-200
+    focus-visible:outline-none
+    focus-visible:ring-2
+    focus-visible:ring-[var(--color-focus)]
+    focus-visible:ring-offset-2
+    ${sizeStyles[size]}
+  `;
+
+  // If href is provided, render as link
+  if (href) {
+    return (
+      <a
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        href={href}
+        onClick={onClick}
+        className={`${baseStyles} hover:opacity-80 ${className}`}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  // Otherwise render as span
+  return (
+    <span
+      ref={ref as React.Ref<HTMLSpanElement>}
+      className={`${baseStyles} ${className}`}
+    >
+      {children}
+    </span>
+  );
+};

package/src/components/data-display/Calendar.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "../../lib/utils"
+import { buttonVariants } from "../actions/Button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ ...props }) => {
+          if (props.orientation === "left") {
+            return <ChevronLeft className="h-4 w-4" />
+          }
+          return <ChevronRight className="h-4 w-4" />
+        },
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }