@opencosmos/ui 1.3.1

package/src/components/actions/Button.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { createRef } from 'react'
+import { Button } from './Button'
+
+describe('Button', () => {
+  it('renders with default variant', () => {
+    render(<Button>Click me</Button>)
+    const button = screen.getByRole('button', { name: /click me/i })
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveClass('bg-primary')
+  })
+
+  it('renders different variants', () => {
+    const { rerender } = render(<Button variant="destructive">Delete</Button>)
+    expect(screen.getByRole('button')).toHaveClass('bg-destructive')
+
+    rerender(<Button variant="outline">Outline</Button>)
+    expect(screen.getByRole('button')).toHaveClass('border')
+
+    rerender(<Button variant="ghost">Ghost</Button>)
+    expect(screen.getByRole('button')).toHaveClass('hover:text-accent-foreground')
+
+    rerender(<Button variant="link">Link</Button>)
+    expect(screen.getByRole('button')).toHaveClass('underline-offset-4')
+  })
+
+  it('handles click events', async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn()
+    render(<Button onClick={handleClick}>Click me</Button>)
+
+    await user.click(screen.getByRole('button'))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders as child when asChild is true', () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>
+    )
+    const link = screen.getByRole('link', { name: /link button/i })
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', '/test')
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('forwards ref', () => {
+    const ref = createRef<HTMLButtonElement>()
+    render(<Button ref={ref}>Ref Button</Button>)
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+  })
+
+  it('applies custom className', () => {
+    render(<Button className="custom-class">Styled</Button>)
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('custom-class')
+  })
+})

package/src/components/actions/Button.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { Slot } from '@radix-ui/react-slot';
+
+const buttonVariants = cva(
+    'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1',
+    {
+        variants: {
+            variant: {
+                default: 'bg-primary text-primary-foreground shadow-sm',
+                primary: 'bg-primary text-primary-foreground shadow-sm', // Alias for default
+                destructive: 'bg-destructive text-destructive-foreground shadow-xs',
+                outline: 'border border-input bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground hover:border-primary',
+                secondary: 'bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-xs hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground',
+                ghost: 'hover:text-accent-foreground',
+                link: 'text-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-9 px-4 py-2',
+                sm: 'h-8 rounded-md px-3 text-xs',
+                lg: 'h-10 rounded-md px-8',
+                icon: 'h-9 w-9',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    }
+);
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+const Button = (
+    {
+        ref,
+        className,
+        variant,
+        size,
+        asChild = false,
+        children,
+        ...props
+    }: ButtonProps & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }
+) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+        <Comp
+            className={cn(buttonVariants({ variant, size, className }))}
+            ref={ref}
+            {...props}
+        >
+            {asChild ? (
+                children
+            ) : (
+                <span className="relative z-20 flex items-center justify-center gap-2">
+                    {children}
+                </span>
+            )}
+        </Comp>
+    )
+}
+
+export { Button, buttonVariants };

package/src/components/actions/Link.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: React.ReactNode;
+    /**
+     * Visual style variant for the link
+     * @default 'default'
+     */
+    variant?: 'default' | 'inline';
+    /**
+     * Whether to apply hover effect (only for 'default' variant).
+     * @default true
+     */
+    hoverEffect?: boolean;
+}
+
+/**
+ * Link Component
+ *
+ * A theme-aware link with multiple style variants.
+ *
+ * Variants:
+ * - **default**: Background highlight on hover, good for standalone links
+ * - **inline**: Underlined text link, good for inline links within paragraphs
+ *
+ * Features:
+ * - Theme-aware colors using CSS variables
+ * - Smooth transition respecting motion preferences
+ * - Accessible focus states
+ * - Works with Next.js Link or standard anchor tags
+ *
+ * Usage:
+ * ```tsx
+ * <Link href="/about">About</Link>
+ * <Link variant="inline" href="/contact">Contact</Link>
+ * <Link href="https://example.com" target="_blank">External</Link>
+ * ```
+ */
+export const Link = (
+    {
+        ref,
+        children,
+        className = '',
+        variant = 'default',
+        hoverEffect = true,
+        ...props
+    }: LinkProps & {
+        ref?: React.Ref<HTMLAnchorElement>;
+    }
+) => {
+    const variantStyles = {
+        default: `
+            px-2 py-1 -mx-2 -my-1 rounded
+            text-[var(--color-text-primary)]
+            ${hoverEffect ? 'hover:bg-[var(--color-link-hover)] hover:text-[var(--color-link-hover-foreground)]' : ''}
+        `,
+        inline: `
+            text-[var(--color-primary)]
+            underline decoration-[var(--color-primary)]/40 decoration-1 underline-offset-2
+            hover:decoration-[var(--color-primary)] hover:decoration-2
+        `,
+    };
+
+    return (
+        <a
+            ref={ref}
+            className={`
+                transition-all duration-200
+                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus)] focus-visible:ring-offset-2
+                ${variantStyles[variant]}
+                ${className}
+            `}
+            {...props}
+        >
+            {children}
+        </a>
+    );
+};

package/src/components/actions/Magnetic.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
+import React, { useRef } from 'react';
+import { cn } from '../../lib/utils';
+
+export interface MagneticProps {
+    children: React.ReactNode;
+    /**
+     * The strength of the magnetic pull. Higher numbers = strong pull.
+     * @default 0.2
+     */
+    strength?: number;
+    /**
+     * The active area padding around the element in pixels.
+     * @default 100
+     */
+    range?: number;
+    className?: string;
+}
+
+/**
+ * Wraps an element to give it a magnetic attraction to the cursor.
+ */
+import { useMotionPreference } from '../../hooks/useMotionPreference';
+
+export function Magnetic({ children, strength = 0.2, range = 100, className }: MagneticProps) {
+    const { shouldAnimate, scale } = useMotionPreference();
+    const ref = useRef<HTMLDivElement>(null);
+    const position = { x: useMotionValue(0), y: useMotionValue(0) };
+
+    const springOptions = { damping: 15, stiffness: 150, mass: 0.1 };
+    const smoothX = useSpring(position.x, springOptions);
+    const smoothY = useSpring(position.y, springOptions);
+
+    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!shouldAnimate) return;
+
+        const { clientX, clientY } = e;
+        const { height, width, left, top } = ref.current?.getBoundingClientRect() || { height: 0, width: 0, left: 0, top: 0 };
+
+        const middleX = clientX - (left + width / 2);
+        const middleY = clientY - (top + height / 2);
+
+        // Scale strength based on motion intensity (baseline 5)
+        const effectiveStrength = strength * (scale / 5);
+
+        position.x.set(middleX * effectiveStrength);
+        position.y.set(middleY * effectiveStrength);
+    };
+
+    const handleMouseLeave = () => {
+        position.x.set(0);
+        position.y.set(0);
+    };
+
+    return (
+        <motion.div
+            ref={ref}
+            onMouseMove={handleMouseMove}
+            onMouseLeave={handleMouseLeave}
+            style={{ x: smoothX, y: smoothY }}
+            className={cn("inline-block", className)}
+        >
+            {children}
+        </motion.div>
+    );
+}

package/src/components/actions/Toggle.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { Toggle } from './Toggle'
+
+describe('Toggle', () => {
+  it('renders with default variant', () => {
+    render(<Toggle aria-label="Bold">B</Toggle>)
+    expect(screen.getByRole('button', { name: /bold/i })).toBeInTheDocument()
+  })
+
+  it('handles pressed state changes', async () => {
+    const user = userEvent.setup()
+    const onPressedChange = vi.fn()
+    render(<Toggle onPressedChange={onPressedChange} aria-label="Bold">B</Toggle>)
+
+    await user.click(screen.getByRole('button'))
+    expect(onPressedChange).toHaveBeenCalledWith(true)
+  })
+
+  it('renders pressed state', () => {
+    render(<Toggle pressed aria-label="Bold">B</Toggle>)
+    expect(screen.getByRole('button')).toHaveAttribute('data-state', 'on')
+  })
+
+  it('renders unpressed state', () => {
+    render(<Toggle pressed={false} aria-label="Bold">B</Toggle>)
+    expect(screen.getByRole('button')).toHaveAttribute('data-state', 'off')
+  })
+
+  it('applies custom className', () => {
+    render(<Toggle className="custom-toggle" aria-label="Bold">B</Toggle>)
+    expect(screen.getByRole('button')).toHaveClass('custom-toggle')
+  })
+
+  it('can be disabled', () => {
+    render(<Toggle disabled aria-label="Bold">B</Toggle>)
+    expect(screen.getByRole('button')).toBeDisabled()
+  })
+})

package/src/components/actions/Toggle.tsx

@@ -0,0 +1,47 @@
+"use client";
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-3",
+        sm: "h-8 px-2",
+        lg: "h-10 px-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = (
+  {
+    ref,
+    className,
+    variant,
+    size,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    ref?: React.Ref<React.ElementRef<typeof TogglePrimitive.Root>>;
+  }
+) => (<TogglePrimitive.Root
+  ref={ref}
+  className={cn(toggleVariants({ variant, size, className }))}
+  {...props}
+/>)
+
+export { Toggle, toggleVariants }

package/src/components/actions/ToggleGroup.tsx

@@ -0,0 +1,70 @@
+"use client";
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+import { toggleVariants } from "./Toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = (
+  {
+    ref,
+    className,
+    variant,
+    size,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants> & {
+    ref?: React.Ref<React.ElementRef<typeof ToggleGroupPrimitive.Root>>;
+  }
+) => (<ToggleGroupPrimitive.Root
+  ref={ref}
+  className={cn("flex items-center justify-center gap-1", className)}
+  {...props}
+>
+  <ToggleGroupContext.Provider value={{ variant, size }}>
+    {children}
+  </ToggleGroupContext.Provider>
+</ToggleGroupPrimitive.Root>)
+
+const ToggleGroupItem = (
+  {
+    ref,
+    className,
+    children,
+    variant,
+    size,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants> & {
+    ref?: React.Ref<React.ElementRef<typeof ToggleGroupPrimitive.Item>>;
+  }
+) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/actions/index.ts

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './Link';
+export * from './Toggle';
+export * from './ToggleGroup';
+export * from './Magnetic';