@opencosmos/ui 1.3.1

package/src/components/forms/SearchBar.tsx

@@ -0,0 +1,215 @@
+'use client';;
+import React, { useState, useCallback, useEffect } from 'react';
+import { TextField, type TextFieldProps } from './TextField';
+
+export interface SearchBarProps extends Omit<TextFieldProps, 'variant'> {
+  /**
+   * Callback fired when search value changes (after debounce)
+   */
+  onSearch?: (value: string) => void;
+
+  /**
+   * Debounce delay in milliseconds
+   * @default 300
+   */
+  debounceMs?: number;
+
+  /**
+   * Show clear button when input has value
+   * @default true
+   */
+  showClearButton?: boolean;
+
+  /**
+   * Callback fired when clear button is clicked
+   */
+  onClear?: () => void;
+
+  /**
+   * Keyboard shortcut to display when empty (e.g. "⌘K")
+   * @default "⌘K"
+   */
+  shortcut?: React.ReactNode;
+}
+
+/**
+ * SearchBar Component
+ *
+ * A specialized text field for search functionality with built-in
+ * search icon, optional clear button, shortcut badge, and debounced onChange.
+ *
+ * **Note:** SearchBar always uses the `outlined` variant and does not
+ * accept a variant prop. This ensures consistent search field styling.
+ *
+ * Features:
+ * - Search icon on the left
+ * - Optional clear button (X) on the right
+ * - Shortcut badge (⌘K) when empty
+ * - Debounced search callback to reduce API calls
+ * - All TextField features (sizes, error states, etc.)
+ * - Theme-aware colors
+ * - Keyboard accessible (Escape to clear)
+ *
+ * Example:
+ * ```tsx
+ * <SearchBar
+ *   placeholder="Search products..."
+ *   onSearch={(query) => fetchResults(query)}
+ *   debounceMs={500}
+ * />
+ * ```
+ */
+export const SearchBar = (
+  {
+    ref,
+    onSearch,
+    debounceMs = 300,
+    showClearButton = true,
+    onClear,
+    value: controlledValue,
+    onChange,
+    placeholder = 'Search',
+    className = '',
+    shortcut = '⌘K',
+    ...props
+  }: SearchBarProps & {
+    ref?: React.Ref<HTMLInputElement>;
+  }
+) => {
+  const [internalValue, setInternalValue] = useState(controlledValue || '');
+
+  // Update internal value when controlled value changes
+  useEffect(() => {
+    if (controlledValue !== undefined) {
+      setInternalValue(controlledValue);
+    }
+  }, [controlledValue]);
+
+  // Debounced search callback
+  useEffect(() => {
+    if (!onSearch) return;
+
+    const timer = setTimeout(() => {
+      onSearch(String(internalValue));
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [internalValue, debounceMs, onSearch]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setInternalValue(newValue);
+      onChange?.(e);
+    },
+    [onChange]
+  );
+
+  const handleClear = useCallback(() => {
+    setInternalValue('');
+    onClear?.();
+    // Create synthetic event for controlled components
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: '' },
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange(syntheticEvent);
+    }
+  }, [onChange, onClear]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Escape' && internalValue) {
+        handleClear();
+      }
+      props.onKeyDown?.(e);
+    },
+    [internalValue, handleClear, props]
+  );
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const showClear = showClearButton && value;
+  const showShortcut = !value && shortcut;
+
+  return (
+    <div className={`relative w-full ${className}`}>
+      {/* Search Icon */}
+      <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-[var(--color-text-muted)]"
+          aria-hidden="true"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.35-4.35" />
+        </svg>
+      </div>
+
+      <TextField
+        ref={ref}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        variant="outlined"
+        className="pl-10 bg-[var(--color-surface)]! border! border-[var(--color-border)]!"
+        style={{ paddingRight: (showClear || showShortcut) ? '3rem' : undefined }}
+        {...props}
+      />
+
+      {/* Shortcut Badge */}
+      {showShortcut && (
+        <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+          <kbd className="px-2 py-0.5 text-xs font-mono text-[var(--color-text-primary)] bg-[var(--color-background)] border border-[var(--color-border)] rounded shadow-xs">
+            {shortcut}
+          </kbd>
+        </div>
+      )}
+
+      {/* Clear Button */}
+      {showClear && (
+        <button
+          type="button"
+          onClick={handleClear}
+          className="
+            absolute right-3 top-1/2 -translate-y-1/2
+            p-1 rounded-full
+            text-[var(--color-text-muted)]
+            hover:text-[var(--color-text-primary)]
+            hover:bg-[var(--color-hover)]
+            transition-colors
+            focus:outline-none
+            focus:ring-2
+            focus:ring-[var(--color-focus)]
+            focus:ring-opacity-50
+          "
+          aria-label="Clear search"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,118 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect } from 'vitest'
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from './Select'
+
+function renderSelect() {
+  return render(
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Pick" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="a">Option A</SelectItem>
+        <SelectItem value="b">Option B</SelectItem>
+        <SelectItem value="c">Option C</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
+
+describe('Select', () => {
+  it('renders the select trigger with placeholder', () => {
+    renderSelect()
+    const trigger = screen.getByRole('combobox')
+    expect(trigger).toBeInTheDocument()
+    expect(trigger).toHaveTextContent('Pick')
+  })
+
+  it('opens dropdown on click and shows options', async () => {
+    const user = userEvent.setup()
+    renderSelect()
+
+    const trigger = screen.getByRole('combobox')
+
+    // Focus then use keyboard to open (more reliable than click in jsdom for Radix Select)
+    await user.click(trigger)
+
+    // Radix Select renders options in a portal
+    const optionA = await screen.findByRole('option', { name: 'Option A' })
+    const optionB = await screen.findByRole('option', { name: 'Option B' })
+    const optionC = await screen.findByRole('option', { name: 'Option C' })
+
+    expect(optionA).toBeInTheDocument()
+    expect(optionB).toBeInTheDocument()
+    expect(optionC).toBeInTheDocument()
+  })
+
+  it('selects an option when clicked', async () => {
+    const user = userEvent.setup()
+    renderSelect()
+
+    const trigger = screen.getByRole('combobox')
+    await user.click(trigger)
+
+    const optionA = await screen.findByRole('option', { name: 'Option A' })
+    await user.click(optionA)
+
+    // After selection, the trigger should display the selected value
+    expect(trigger).toHaveTextContent('Option A')
+  })
+
+  it('applies custom className to trigger', () => {
+    render(
+      <Select>
+        <SelectTrigger className="custom-trigger">
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Option A</SelectItem>
+        </SelectContent>
+      </Select>
+    )
+
+    const trigger = screen.getByRole('combobox')
+    expect(trigger).toHaveClass('custom-trigger')
+  })
+
+  it('renders with a default value', () => {
+    render(
+      <Select defaultValue="b">
+        <SelectTrigger>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Option A</SelectItem>
+          <SelectItem value="b">Option B</SelectItem>
+        </SelectContent>
+      </Select>
+    )
+
+    const trigger = screen.getByRole('combobox')
+    expect(trigger).toHaveTextContent('Option B')
+  })
+
+  it('opens with the open prop', () => {
+    render(
+      <Select open>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Option A</SelectItem>
+          <SelectItem value="b">Option B</SelectItem>
+        </SelectContent>
+      </Select>
+    )
+
+    // When open prop is true, options should be visible
+    expect(screen.getByRole('option', { name: 'Option A' })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: 'Option B' })).toBeInTheDocument()
+  })
+})

package/src/components/forms/Select.tsx

@@ -0,0 +1,274 @@
+"use client";
+import * as React from "react"
+import type {
+    ComponentPropsWithoutRef,
+    ElementRef,
+} from "react"
+import {
+    Root,
+    Group,
+    Value,
+    Trigger,
+    Content,
+    Label,
+    Item,
+    ItemText,
+    ItemIndicator,
+    Separator as SelectSeparator,
+    ScrollUpButton,
+    ScrollDownButton,
+    Viewport,
+    Portal,
+    Icon as SelectIcon,
+} from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { Label as FormLabel } from "./Label"
+
+const Select = Root
+
+const SelectGroup = Group
+
+const SelectValue = Value
+
+const SelectTrigger = (
+    {
+        ref,
+        className,
+        children,
+        style,
+        label,
+        labelClassName,
+        ...props
+    }: ComponentPropsWithoutRef<typeof Trigger> & {
+        ref?: React.Ref<ElementRef<typeof Trigger>>;
+        /** Optional text label rendered above the trigger. */
+        label?: string;
+        /** Override classes on the label. */
+        labelClassName?: string;
+    }
+) => {
+    const trigger = (
+        <Trigger
+            ref={ref}
+            className={cn(
+                "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+                className
+            )}
+            style={{
+                height: '2.25rem',
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                border: '1px solid var(--color-input, #DFDFDF)',
+                borderRadius: 'var(--radius-md, 0.375rem)',
+                padding: '0.5rem 0.75rem',
+                fontSize: 'var(--text-sm, 0.875rem)',
+                backgroundColor: 'transparent',
+                boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+                outline: 'none',
+                ...style,
+            }}
+            {...props}
+        >
+            {children}
+            <SelectIcon asChild>
+                <ChevronDown className="h-4 w-4 opacity-50" />
+            </SelectIcon>
+        </Trigger>
+    )
+
+    if (!label) return trigger
+
+    return (
+        <div>
+            <FormLabel className={cn("text-xs font-medium text-muted-foreground", labelClassName)}>
+                {label}
+            </FormLabel>
+            {trigger}
+        </div>
+    )
+}
+
+const SelectScrollUpButton = (
+    {
+        ref,
+        className,
+        ...props
+    }: ComponentPropsWithoutRef<typeof ScrollUpButton> & {
+        ref?: React.Ref<ElementRef<typeof ScrollUpButton>>;
+    }
+) => (<ScrollUpButton
+    ref={ref}
+    className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+    )}
+    {...props}
+>
+    <ChevronUp className="h-4 w-4" />
+</ScrollUpButton>)
+
+const SelectScrollDownButton = (
+    {
+        ref,
+        className,
+        ...props
+    }: ComponentPropsWithoutRef<typeof ScrollDownButton> & {
+        ref?: React.Ref<ElementRef<typeof ScrollDownButton>>;
+    }
+) => (<ScrollDownButton
+    ref={ref}
+    className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+    )}
+    {...props}
+>
+    <ChevronDown className="h-4 w-4" />
+</ScrollDownButton>)
+
+const SelectContent = (
+    {
+        ref,
+        className,
+        children,
+        position = "popper",
+        style,
+        ...props
+    }: ComponentPropsWithoutRef<typeof Content> & {
+        ref?: React.Ref<ElementRef<typeof Content>>;
+    }
+) => (<Portal>
+    <Content
+        ref={ref}
+        className={cn(
+            "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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",
+            position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+            className
+        )}
+        style={style}
+        position={position}
+        {...props}
+    >
+        <div
+            style={{
+                backgroundColor: 'var(--color-popover, #ffffff)',
+                color: 'var(--color-popover-foreground, #0a0a0a)',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: '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)',
+                overflow: 'hidden',
+            }}
+        >
+            <SelectScrollUpButton />
+            <Viewport
+                className={cn(
+                    "p-1",
+                    position === "popper" &&
+                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+                )}
+                style={{
+                    padding: '0.25rem',
+                }}
+            >
+                {children}
+            </Viewport>
+            <SelectScrollDownButton />
+        </div>
+    </Content>
+</Portal>)
+
+const SelectLabel = (
+    {
+        ref,
+        className,
+        ...props
+    }: ComponentPropsWithoutRef<typeof Label> & {
+        ref?: React.Ref<ElementRef<typeof Label>>;
+    }
+) => (<Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+/>)
+
+const SelectItem = (
+    {
+        ref,
+        className,
+        children,
+        ...props
+    }: ComponentPropsWithoutRef<typeof Item> & {
+        ref?: React.Ref<ElementRef<typeof Item>>;
+    }
+) => (<Item
+    ref={ref}
+    className={cn(
+        "relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+    )}
+    style={{
+        position: 'relative',
+        display: 'flex',
+        width: '100%',
+        cursor: 'default',
+        userSelect: 'none',
+        alignItems: 'center',
+        borderRadius: 'var(--radius-sm, 0.125rem)',
+        padding: '0.375rem 2rem 0.375rem 0.5rem',
+        fontSize: 'var(--text-sm, 0.875rem)',
+        outline: 'none',
+    }}
+    {...props}
+>
+    <span
+        className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center"
+        style={{
+            position: 'absolute',
+            right: '0.5rem',
+            display: 'flex',
+            height: '0.875rem',
+            width: '0.875rem',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}
+    >
+        <ItemIndicator>
+            <Check className="h-4 w-4" style={{ height: '1rem', width: '1rem' }} />
+        </ItemIndicator>
+    </span>
+    <ItemText>{children}</ItemText>
+</Item>)
+
+const SelectSeparatorComp = (
+    {
+        ref,
+        className,
+        ...props
+    }: ComponentPropsWithoutRef<typeof SelectSeparator> & {
+        ref?: React.Ref<ElementRef<typeof SelectSeparator>>;
+    }
+) => (<SelectSeparator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+/>)
+
+export {
+    Select,
+    SelectGroup,
+    SelectValue,
+    SelectTrigger,
+    SelectContent,
+    SelectLabel,
+    SelectItem,
+    SelectSeparatorComp as SelectSeparator,
+    SelectScrollUpButton,
+    SelectScrollDownButton,
+}

package/src/components/forms/Slider.tsx

@@ -0,0 +1,29 @@
+"use client";
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "../../lib/utils"
+
+const Slider = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof SliderPrimitive.Root>>;
+  }
+) => (<SliderPrimitive.Root
+  ref={ref}
+  className={cn(
+    "relative flex w-full touch-none select-none items-center",
+    className
+  )}
+  {...props}
+>
+  <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+    <SliderPrimitive.Range className="absolute h-full bg-primary" />
+  </SliderPrimitive.Track>
+  <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+</SliderPrimitive.Root>)
+
+export { Slider }