@opencosmos/ui 1.3.1

package/src/components/forms/Switch.test.tsx

@@ -0,0 +1,76 @@
+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 { Switch } from './Switch'
+
+describe('Switch', () => {
+  it('renders the switch', () => {
+    render(<Switch />)
+    const switchEl = screen.getByRole('switch')
+    expect(switchEl).toBeInTheDocument()
+  })
+
+  it('is unchecked by default', () => {
+    render(<Switch />)
+    const switchEl = screen.getByRole('switch')
+    expect(switchEl).toHaveAttribute('data-state', 'unchecked')
+  })
+
+  it('toggles on click', async () => {
+    const user = userEvent.setup()
+    render(<Switch />)
+
+    const switchEl = screen.getByRole('switch')
+    expect(switchEl).toHaveAttribute('data-state', 'unchecked')
+
+    await user.click(switchEl)
+    expect(switchEl).toHaveAttribute('data-state', 'checked')
+
+    await user.click(switchEl)
+    expect(switchEl).toHaveAttribute('data-state', 'unchecked')
+  })
+
+  it('calls onCheckedChange when toggled', async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+    render(<Switch onCheckedChange={handleChange} />)
+
+    const switchEl = screen.getByRole('switch')
+    await user.click(switchEl)
+
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(handleChange).toHaveBeenCalledWith(true)
+  })
+
+  it('can be disabled', async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+    render(<Switch disabled onCheckedChange={handleChange} />)
+
+    const switchEl = screen.getByRole('switch')
+    expect(switchEl).toBeDisabled()
+
+    await user.click(switchEl)
+    expect(handleChange).not.toHaveBeenCalled()
+    expect(switchEl).toHaveAttribute('data-state', 'unchecked')
+  })
+
+  it('can be initially checked', () => {
+    render(<Switch defaultChecked />)
+    const switchEl = screen.getByRole('switch')
+    expect(switchEl).toHaveAttribute('data-state', 'checked')
+  })
+
+  it('forwards ref', () => {
+    const ref = createRef<HTMLButtonElement>()
+    render(<Switch ref={ref} />)
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+  })
+
+  it('applies custom className', () => {
+    render(<Switch className="custom-switch" />)
+    const switchEl = screen.getByRole('switch')
+    expect(switchEl).toHaveClass('custom-switch')
+  })
+})

package/src/components/forms/Switch.tsx

@@ -0,0 +1,30 @@
+"use client";
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "../../lib/utils"
+
+const Switch = (
+    {
+        ref,
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
+        ref?: React.Ref<React.ElementRef<typeof SwitchPrimitives.Root>>;
+    }
+) => (<SwitchPrimitives.Root
+    className={cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        className
+    )}
+    {...props}
+    ref={ref}
+>
+    <SwitchPrimitives.Thumb
+        className={cn(
+            "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )}
+    />
+</SwitchPrimitives.Root>)
+
+export { Switch }

package/src/components/forms/TextField.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+
+export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * Visual variant of the text field
+   * @default 'outlined'
+   */
+  variant?: 'outlined' | 'filled';
+
+  /**
+   * Size of the text field
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Error state
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Helper text displayed below the input
+   */
+  helperText?: string;
+
+  /**
+   * Label for the input
+   */
+  label?: string;
+
+  /**
+   * Whether the field is required
+   * @default false
+   */
+  required?: boolean;
+}
+
+/**
+ * TextField Component
+ *
+ * A text input field with support for outlined and filled variants,
+ * multiple sizes, error states, and helper text.
+ *
+ * Features:
+ * - Two visual variants (outlined, filled)
+ * - Three size options (sm, md, lg)
+ * - Error state with red border
+ * - Optional label and helper text
+ * - Theme-aware colors using CSS variables
+ * - Full keyboard accessibility
+ * - Ref forwarding support
+ */
+export const TextField = (
+  {
+    ref,
+    variant = 'outlined',
+    size = 'md',
+    error = false,
+    helperText,
+    label,
+    required = false,
+    className = '',
+    id,
+    ...props
+  }: TextFieldProps & {
+    ref?: React.Ref<HTMLInputElement>;
+  }
+) => {
+  // Generate unique ID if not provided
+  const inputId = id || `textfield-${Math.random().toString(36).substr(2, 9)}`;
+  const helperTextId = helperText ? `${inputId}-helper` : undefined;
+
+  // Size classes
+  const sizeClasses = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2 text-base',
+    lg: 'px-5 py-3 text-lg',
+  };
+
+  // Variant classes
+  const variantClasses = {
+    outlined: `
+      bg-[var(--color-surface)]
+      border-2
+      ${error ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}
+      focus:border-[var(--color-primary)]
+    `,
+    filled: `
+      bg-[var(--color-surface)]
+      border-2 border-transparent
+      ${error ? 'border-[var(--color-error)]' : ''}
+      focus:border-[var(--color-primary)]
+    `,
+  };
+
+  const baseClasses = `
+    w-full
+    rounded-lg
+    text-[var(--color-text-primary)]
+    placeholder:text-[var(--color-text-muted)]
+    transition-colors
+    duration-200
+    focus:outline-none
+    focus:ring-2
+    focus:ring-[var(--color-focus)]
+    focus:ring-opacity-50
+    disabled:opacity-50
+    disabled:cursor-not-allowed
+  `;
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="block mb-2 text-sm font-medium text-[var(--color-text-primary)]"
+        >
+          {label}
+          {required && <span className="text-[var(--color-error)] ml-1">*</span>}
+        </label>
+      )}
+
+      <input
+        ref={ref}
+        id={inputId}
+        aria-describedby={helperTextId}
+        aria-invalid={error}
+        aria-required={required}
+        className={`
+          ${baseClasses}
+          ${sizeClasses[size]}
+          ${variantClasses[variant]}
+          ${className}
+        `}
+        {...props}
+      />
+
+      {helperText && (
+        <p
+          id={helperTextId}
+          className={`
+            mt-2 text-sm
+            ${error ? 'text-[var(--color-error)]' : 'text-[var(--color-text-secondary)]'}
+          `}
+        >
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/forms/Textarea.test.tsx

@@ -0,0 +1,41 @@
+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 { Textarea } from './Textarea'
+
+describe('Textarea', () => {
+  it('renders a textarea', () => {
+    render(<Textarea aria-label="Message" />)
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+  })
+
+  it('accepts placeholder text', () => {
+    render(<Textarea placeholder="Write here..." />)
+    expect(screen.getByPlaceholderText('Write here...')).toBeInTheDocument()
+  })
+
+  it('handles user input', async () => {
+    const user = userEvent.setup()
+    render(<Textarea aria-label="Message" />)
+
+    await user.type(screen.getByRole('textbox'), 'Hello world')
+    expect(screen.getByRole('textbox')).toHaveValue('Hello world')
+  })
+
+  it('can be disabled', () => {
+    render(<Textarea disabled aria-label="Message" />)
+    expect(screen.getByRole('textbox')).toBeDisabled()
+  })
+
+  it('applies custom className', () => {
+    render(<Textarea className="custom-textarea" aria-label="Message" />)
+    expect(screen.getByRole('textbox')).toHaveClass('custom-textarea')
+  })
+
+  it('forwards ref', () => {
+    const ref = createRef<HTMLTextAreaElement>()
+    render(<Textarea ref={ref} aria-label="Message" />)
+    expect(ref.current).toBeInstanceOf(HTMLTextAreaElement)
+  })
+})

package/src/components/forms/Textarea.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface TextareaProps
+    extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
+
+const Textarea = (
+    {
+        ref,
+        className,
+        ...props
+    }: TextareaProps & {
+        ref?: React.Ref<HTMLTextAreaElement>;
+    }
+) => {
+    return (
+        <textarea
+            className={cn(
+                "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+            ref={ref}
+            {...props}
+        />
+    )
+}
+
+export { Textarea }

package/src/components/forms/ThemeSwitcher.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useTheme } from '../../hooks/useTheme';
+import { Switch } from '../forms/Switch';
+
+export interface ThemeSwitcherProps {
+  /**
+   * Size of the switcher
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Initial expanded state
+   * @default false
+   */
+  defaultExpanded?: boolean;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * ThemeSwitcher Molecule
+ *
+ * An enhanced theme control panel with expandable options for comprehensive theme management.
+ *
+ * Features:
+ * - Quick toggle between light and dark modes
+ * - Expandable panel with additional controls
+ * - System/Auto mode preference
+ * - Visual preview of current mode
+ * - Smooth animations and transitions
+ * - Full keyboard accessibility
+ * - Theme-aware colors
+ *
+ * Example:
+ * ```tsx
+ * // Basic usage
+ * <ThemeSwitcher />
+ *
+ * // Expanded by default
+ * <ThemeSwitcher defaultExpanded />
+ *
+ * // Large size
+ * <ThemeSwitcher size="lg" />
+ * ```
+ */
+export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({
+  size = 'md',
+  defaultExpanded = false,
+  className = '',
+}) => {
+  const { mode, setMode } = useTheme();
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [useSystemTheme, setUseSystemTheme] = useState(false);
+
+  const toggleMode = () => {
+    setMode(mode === 'light' ? 'dark' : 'light');
+  };
+
+  const sizeClasses = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+  };
+
+  const iconSizes = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+  };
+
+  const iconSize = iconSizes[size];
+
+  return (
+    <div className={`relative ${className}`}>
+      {/* Main Toggle Button */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={toggleMode}
+          className={`
+            p-2.5
+            rounded-lg
+            bg-[var(--color-surface)]
+            border border-[var(--color-border)]
+            text-[var(--color-text-primary)]
+            hover:bg-[var(--color-hover)]
+            active:bg-[var(--color-active)]
+            transition-all duration-200
+            focus-visible:outline-none
+            focus-visible:ring-2
+            focus-visible:ring-[var(--color-focus)]
+            focus-visible:ring-offset-2
+          `}
+          aria-label={`Switch to ${mode === 'light' ? 'dark' : 'light'} mode`}
+          title={`Switch to ${mode === 'light' ? 'dark' : 'light'} mode`}
+        >
+          {/* Sun Icon (Light Mode) */}
+          {mode === 'light' && (
+            <svg
+              width={iconSize}
+              height={iconSize}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="transition-transform duration-200"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="5" />
+              <line x1="12" y1="1" x2="12" y2="3" />
+              <line x1="12" y1="21" x2="12" y2="23" />
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+              <line x1="1" y1="12" x2="3" y2="12" />
+              <line x1="21" y1="12" x2="23" y2="12" />
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+            </svg>
+          )}
+
+          {/* Moon Icon (Dark Mode) */}
+          {mode === 'dark' && (
+            <svg
+              width={iconSize}
+              height={iconSize}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="transition-transform duration-200"
+              aria-hidden="true"
+            >
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+            </svg>
+          )}
+        </button>
+
+        {/* Expand Toggle Button */}
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className={`
+            p-2.5
+            rounded-lg
+            bg-[var(--color-surface)]
+            border border-[var(--color-border)]
+            text-[var(--color-text-primary)]
+            hover:bg-[var(--color-hover)]
+            active:bg-[var(--color-active)]
+            transition-all duration-200
+            focus-visible:outline-none
+            focus-visible:ring-2
+            focus-visible:ring-[var(--color-focus)]
+            focus-visible:ring-offset-2
+          `}
+          aria-label={isExpanded ? 'Hide theme options' : 'Show theme options'}
+          aria-expanded={isExpanded}
+        >
+          <svg
+            width={iconSize}
+            height={iconSize}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={`transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+            aria-hidden="true"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Expandable Options Panel */}
+      {isExpanded && (
+        <div
+          className={`
+            absolute bottom-full right-0 mb-2
+            min-w-[280px]
+            max-h-[80vh]
+            overflow-y-auto
+            p-4
+            rounded-lg
+            bg-[var(--color-surface)]
+            border border-[var(--color-border)]
+            shadow-lg
+            animate-in fade-in slide-in-from-bottom-2
+            duration-200
+            z-50
+            ${sizeClasses[size]}
+          `}
+        >
+          <div className="space-y-4">
+            {/* Header */}
+            <div className="pb-3 border-b border-[var(--color-border)]">
+              <h3 className="font-semibold text-[var(--color-text-primary)]">
+                Theme Settings
+              </h3>
+              <p className="text-[var(--color-text-muted)] mt-1">
+                Customize your viewing experience
+              </p>
+            </div>
+
+            {/* Current Mode Display */}
+            <div className="space-y-2">
+              <label className="text-[var(--color-text-secondary)] font-medium">
+                Current Mode
+              </label>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setMode('light')}
+                  className={`
+                    flex-1 py-2 px-3 rounded-md
+                    transition-all duration-200
+                    ${mode === 'light'
+                      ? 'bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-xs'
+                      : 'bg-[var(--color-background)] border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-hover)]'
+                    }
+                  `}
+                >
+                  Light
+                </button>
+                <button
+                  onClick={() => setMode('dark')}
+                  className={`
+                    flex-1 py-2 px-3 rounded-md
+                    transition-all duration-200
+                    ${mode === 'dark'
+                      ? 'bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-xs'
+                      : 'bg-[var(--color-background)] border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-hover)]'
+                    }
+                  `}
+                >
+                  Dark
+                </button>
+              </div>
+            </div>
+
+            {/* System Theme Option */}
+            <div className="space-y-2">
+              <label className="flex items-center justify-between">
+                <span className="text-[var(--color-text-secondary)] font-medium">
+                  Use System Theme
+                </span>
+                <Switch
+                  checked={useSystemTheme}
+                  onCheckedChange={setUseSystemTheme}
+                />
+              </label>
+              <p className="text-[var(--color-text-muted)]">
+                Automatically match your system's theme preference
+              </p>
+            </div>
+
+            {/* Preview */}
+            <div className="space-y-2">
+              <label className="text-[var(--color-text-secondary)] font-medium">
+                Preview
+              </label>
+              <div className={`
+                p-3 rounded-md border border-[var(--color-border)]
+                bg-[var(--color-background)]
+              `}>
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 rounded bg-[var(--color-primary)]" />
+                  <div className="flex-1 space-y-1">
+                    <div className="h-2 bg-[var(--color-text-primary)] rounded w-3/4 opacity-70" />
+                    <div className="h-2 bg-[var(--color-text-secondary)] rounded w-1/2 opacity-50" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+ThemeSwitcher.displayName = 'ThemeSwitcher';