@opencosmos/ui 1.3.1

package/src/components/feedback/Toast/Toast.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { useMotionPreference } from '../../../hooks/useMotionPreference';
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+export interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+interface ToastContextValue {
+  toasts: Toast[];
+  addToast: (message: string, type?: ToastType, duration?: number) => void;
+  removeToast: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+
+export interface ToastProviderProps {
+  children: React.ReactNode;
+  /**
+   * Maximum number of toasts to show at once
+   * @default 3
+   */
+  maxToasts?: number;
+  /**
+   * Default duration in milliseconds
+   * @default 5000
+   */
+  defaultDuration?: number;
+  /**
+   * Position of toast container
+   * @default 'bottom-right'
+   */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+}
+
+/**
+ * ToastProvider Component
+ *
+ * Provides toast notification functionality to the app.
+ * Wrap your app with this provider to enable toast notifications.
+ *
+ * Example:
+ * ```tsx
+ * <ToastProvider position="bottom-right" maxToasts={3}>
+ *   <App />
+ * </ToastProvider>
+ * ```
+ */
+export const ToastProvider: React.FC<ToastProviderProps> = ({
+  children,
+  maxToasts = 3,
+  defaultDuration = 5000,
+  position = 'bottom-right',
+}) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const { shouldAnimate } = useMotionPreference();
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  // Inject animation styles
+  useEffect(() => {
+    if (typeof document !== 'undefined' && !document.getElementById('sds-toast-animations')) {
+      const style = document.createElement('style');
+      style.id = 'sds-toast-animations';
+      style.textContent = `
+        @keyframes slide-in-right {
+          from {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+        .animate-slide-in-right {
+          animation: slide-in-right 0.3s ease-out;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }, []);
+
+  const addToast = useCallback(
+    (message: string, type: ToastType = 'info', duration = defaultDuration) => {
+      const id = Math.random().toString(36).substring(2, 9);
+      const newToast: Toast = { id, message, type, duration };
+
+      setToasts((prev) => {
+        const updated = [...prev, newToast];
+        return updated.slice(-maxToasts);
+      });
+
+      if (duration > 0) {
+        setTimeout(() => removeToast(id), duration);
+      }
+    },
+    [defaultDuration, maxToasts, removeToast]
+  );
+
+  const positionClasses = {
+    'top-left': 'top-4 left-4',
+    'top-right': 'top-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-right': 'bottom-4 right-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+  };
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
+      {children}
+      <div
+        className={`fixed ${positionClasses[position]} z-[9999] flex flex-col gap-2 pointer-events-none`}
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        {toasts.map((toast) => (
+          <ToastItem
+            key={toast.id}
+            toast={toast}
+            onClose={() => removeToast(toast.id)}
+            shouldAnimate={shouldAnimate}
+          />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+};
+
+interface ToastItemProps {
+  toast: Toast;
+  onClose: () => void;
+  shouldAnimate: boolean;
+}
+
+const ToastItem: React.FC<ToastItemProps> = ({ toast, onClose, shouldAnimate }) => {
+  const typeStyles = {
+    success: 'bg-[var(--color-success)] text-[var(--color-success-foreground)] border-[var(--color-success)]',
+    error: 'bg-[var(--color-error)] text-[var(--color-error-foreground)] border-[var(--color-error)]',
+    warning: 'bg-[var(--color-warning)] text-[var(--color-warning-foreground)] border-[var(--color-warning)]',
+    info: 'bg-[var(--color-info)] text-[var(--color-info-foreground)] border-[var(--color-info)]',
+  };
+
+  const icons = {
+    success: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+        <polyline points="22 4 12 14.01 9 11.01" />
+      </svg>
+    ),
+    error: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="15" y1="9" x2="9" y2="15" />
+        <line x1="9" y1="9" x2="15" y2="15" />
+      </svg>
+    ),
+    warning: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+        <line x1="12" y1="9" x2="12" y2="13" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+      </svg>
+    ),
+    info: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" y1="16" x2="12" y2="12" />
+        <line x1="12" y1="8" x2="12.01" y2="8" />
+      </svg>
+    ),
+  };
+
+  return (
+    <div
+      className={`
+        ${typeStyles[toast.type]}
+        flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg border-2
+        min-w-[300px] max-w-[400px] pointer-events-auto
+        ${shouldAnimate ? 'animate-slide-in-right' : ''}
+      `}
+      role="alert"
+    >
+      <div className="flex-shrink-0" aria-hidden="true">
+        {icons[toast.type]}
+      </div>
+      <p className="flex-1 text-sm font-medium">{toast.message}</p>
+      <button
+        onClick={onClose}
+        className="flex-shrink-0 text-current hover:opacity-70 transition-opacity"
+        aria-label="Close notification"
+      >
+        <svg width="16" height="16" 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>
+  );
+};
+
+/**
+ * useToast Hook
+ *
+ * Hook to trigger toast notifications from anywhere in your app.
+ *
+ * Example:
+ * ```tsx
+ * function MyComponent() {
+ *   const { toast } = useToast();
+ *
+ *   const handleClick = () => {
+ *     toast('Settings saved!', 'success');
+ *   };
+ *
+ *   return <button onClick={handleClick}>Save</button>;
+ * }
+ * ```
+ */
+export const useToast = () => {
+  const context = useContext(ToastContext);
+
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+
+  return {
+    toast: context.addToast,
+    removeToast: context.removeToast,
+    toasts: context.toasts,
+  };
+};
+
+

package/src/components/feedback/Toast/index.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast } from './Toast';
+export type { Toast, ToastType, ToastProviderProps } from './Toast';

package/src/components/feedback/index.ts

@@ -0,0 +1,9 @@
+export * from './Alert';
+export * from './Progress';
+export * from './ProgressBar';
+export * from './Skeleton';
+export * from './Sonner';
+export * from './Spinner';
+export * from './Toast';
+export * from './EmptyState';
+export * from './Stepper';

package/src/components/forms/Checkbox.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 { Checkbox } from './Checkbox'
+
+describe('Checkbox', () => {
+  it('renders as a checkbox', () => {
+    render(<Checkbox aria-label="Accept terms" />)
+    expect(screen.getByRole('checkbox')).toBeInTheDocument()
+  })
+
+  it('handles checked state', async () => {
+    const user = userEvent.setup()
+    const onCheckedChange = vi.fn()
+    render(<Checkbox onCheckedChange={onCheckedChange} aria-label="Accept" />)
+
+    await user.click(screen.getByRole('checkbox'))
+    expect(onCheckedChange).toHaveBeenCalledWith(true)
+  })
+
+  it('renders checked state', () => {
+    render(<Checkbox checked aria-label="Accept" />)
+    expect(screen.getByRole('checkbox')).toHaveAttribute('data-state', 'checked')
+  })
+
+  it('renders unchecked state', () => {
+    render(<Checkbox checked={false} aria-label="Accept" />)
+    expect(screen.getByRole('checkbox')).toHaveAttribute('data-state', 'unchecked')
+  })
+
+  it('can be disabled', () => {
+    render(<Checkbox disabled aria-label="Accept" />)
+    expect(screen.getByRole('checkbox')).toBeDisabled()
+  })
+
+  it('applies custom className', () => {
+    render(<Checkbox className="custom-check" aria-label="Accept" />)
+    expect(screen.getByRole('checkbox')).toHaveClass('custom-check')
+  })
+})

package/src/components/forms/Checkbox.tsx

@@ -0,0 +1,31 @@
+"use client";
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Checkbox = (
+    {
+        ref,
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+        ref?: React.Ref<React.ElementRef<typeof CheckboxPrimitive.Root>>;
+    }
+) => (<CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+        "peer h-4 w-4 shrink-0 rounded-xs border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        className
+    )}
+    {...props}
+>
+    <CheckboxPrimitive.Indicator
+        className={cn("flex items-center justify-center text-current")}
+    >
+        <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>)
+
+export { Checkbox }

package/src/components/forms/ColorPicker.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+/**
+ * ColorPicker Component
+ * Combined visual color picker and hex input for selecting colors
+ */
+
+import { useState, useEffect } from 'react';
+import { Label } from './Label';
+import { Input } from './Input';
+
+export interface ColorPickerProps {
+  label?: string;
+  description?: string;
+  value: string;  // Hex color value
+  onChange: (hex: string) => void;
+  optional?: boolean;
+  disabled?: boolean;
+}
+
+export function ColorPicker({
+  label,
+  description,
+  value,
+  onChange,
+  optional = false,
+  disabled = false,
+}: ColorPickerProps) {
+  const [hexInput, setHexInput] = useState(value);
+  const [isValid, setIsValid] = useState(true);
+
+  // Sync hex input with value prop
+  useEffect(() => {
+    setHexInput(value);
+  }, [value]);
+
+  // Validate hex color format
+  const validateHex = (hex: string): boolean => {
+    return /^#[0-9A-Fa-f]{6}$/.test(hex);
+  };
+
+  const handleHexChange = (newHex: string) => {
+    setHexInput(newHex);
+
+    if (validateHex(newHex)) {
+      setIsValid(true);
+      onChange(newHex);
+    } else {
+      setIsValid(false);
+    }
+  };
+
+  const handleColorPickerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newColor = e.target.value;
+    setHexInput(newColor);
+    setIsValid(true);
+    onChange(newColor);
+  };
+
+  return (
+    <div className="space-y-2">
+      {label && (
+        <div className="flex items-baseline justify-between">
+          <Label className="text-sm font-medium mb-0">
+            {label}
+            {optional && <span className="text-xs text-muted-foreground ml-1">(optional)</span>}
+          </Label>
+        </div>
+      )}
+
+      {description && (
+        <p className="text-xs text-muted-foreground">
+          {description}
+        </p>
+      )}
+
+      <div className="flex gap-3 items-center">
+        {/* Visual Color Picker */}
+        <div className="relative">
+          <input
+            type="color"
+            value={hexInput}
+            onChange={handleColorPickerChange}
+            disabled={disabled}
+            className="
+              w-16 h-16
+              rounded-lg
+              cursor-pointer
+              border-2 border-border
+              disabled:opacity-50 disabled:cursor-not-allowed
+              transition-all
+              hover:scale-105
+            "
+            title="Pick a color"
+          />
+        </div>
+
+        {/* Hex Input */}
+        <div className="flex-1">
+          <Input
+            type="text"
+            value={hexInput}
+            onChange={(e) => handleHexChange(e.target.value)}
+            placeholder="#000000"
+            disabled={disabled}
+            className={`font-mono ${!isValid ? 'border-error' : ''}`}
+            aria-invalid={!isValid}
+          />
+          {!isValid && (
+            <p className="text-xs text-error mt-1">
+              Invalid hex format (use #RRGGBB)
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/forms/Combobox.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { Button } from "../actions/Button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../navigation/Command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../overlays/Popover"
+
+export interface ComboboxOption {
+  value: string
+  label: string
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[]
+  value?: string
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyMessage?: string
+  className?: string
+  disabled?: boolean
+}
+
+export function Combobox({
+  options = [],
+  value,
+  onValueChange,
+  placeholder = "Select option...",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No option found.",
+  className,
+  disabled = false,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn("w-full justify-between", className)}
+          disabled={disabled}
+        >
+          {value
+            ? options.find((option) => option.value === value)?.label
+            : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onValueChange?.(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}