@opencosmos/ui 1.3.1

package/src/components/forms/ThemeToggle.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import React from 'react';
+import { useTheme } from '../../hooks/useTheme';
+
+export interface ThemeToggleProps {
+  /**
+   * Size of the toggle button
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Whether to show the mode label next to the icon
+   * @default false
+   */
+  showLabel?: boolean;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * ThemeToggle Molecule
+ *
+ * A button that toggles between light and dark modes with smooth icon transitions.
+ *
+ * Features:
+ * - Automatic mode detection from theme context
+ * - Smooth icon transition between sun (light) and moon (dark)
+ * - Three size variants
+ * - Optional text label
+ * - Full keyboard accessibility
+ * - ARIA labels for screen readers
+ * - Theme-aware colors
+ *
+ * Example:
+ * ```tsx
+ * // Simple icon-only toggle
+ * <ThemeToggle />
+ *
+ * // With label
+ * <ThemeToggle showLabel />
+ *
+ * // Large size with label
+ * <ThemeToggle size="lg" showLabel />
+ * ```
+ */
+export const ThemeToggle: React.FC<ThemeToggleProps> = ({
+  size = 'md',
+  showLabel = false,
+  className = '',
+}) => {
+  const { mode, setMode } = useTheme();
+
+  const toggleMode = () => {
+    setMode(mode === 'light' ? 'dark' : 'light');
+  };
+
+  const sizeClasses = {
+    sm: 'p-2',
+    md: 'p-2.5',
+    lg: 'p-3',
+  };
+
+  const iconSizes = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+  };
+
+  const iconSize = iconSizes[size];
+
+  return (
+    <button
+      onClick={toggleMode}
+      className={`
+        ${sizeClasses[size]}
+        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
+        ${showLabel ? 'flex items-center gap-2' : ''}
+        ${className}
+      `}
+      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>
+      )}
+
+      {showLabel && (
+        <span className="text-sm font-medium">
+          {mode === 'light' ? 'Light' : 'Dark'}
+        </span>
+      )}
+    </button>
+  );
+};
+
+ThemeToggle.displayName = 'ThemeToggle';

package/src/components/forms/index.ts

@@ -0,0 +1,19 @@
+export * from './Checkbox';
+export * from './ColorPicker';
+export * from './Combobox';
+export * from './DragDrop';
+export * from './FilterButton';
+export * from './Form';
+export * from './Input';
+export * from './InputOTP';
+export * from './Label';
+export * from './RadioGroup';
+export * from './SearchBar';
+export * from './Select';
+export * from './Slider';
+export * from './Switch';
+export * from './TextField';
+export * from './Textarea';
+export * from './ThemeSwitcher';
+export * from './ThemeToggle';
+export * from './FileUpload';

package/src/components/layout/Accordion.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect } from 'vitest'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion'
+
+describe('Accordion', () => {
+  const renderAccordion = () =>
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Section 1</AccordionTrigger>
+          <AccordionContent>Content for section 1</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Section 2</AccordionTrigger>
+          <AccordionContent>Content for section 2</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Section 3</AccordionTrigger>
+          <AccordionContent>Content for section 3</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    )
+
+  it('renders accordion items', () => {
+    renderAccordion()
+    expect(screen.getByText('Section 1')).toBeInTheDocument()
+    expect(screen.getByText('Section 2')).toBeInTheDocument()
+    expect(screen.getByText('Section 3')).toBeInTheDocument()
+  })
+
+  it('expands item on click', async () => {
+    const user = userEvent.setup()
+    renderAccordion()
+
+    const trigger = screen.getByText('Section 1')
+    await user.click(trigger)
+
+    expect(screen.getByText('Content for section 1')).toBeVisible()
+  })
+
+  it('collapses when another item is clicked (single mode)', async () => {
+    const user = userEvent.setup()
+    renderAccordion()
+
+    await user.click(screen.getByText('Section 1'))
+    expect(screen.getByText('Content for section 1')).toBeVisible()
+
+    await user.click(screen.getByText('Section 2'))
+    expect(screen.getByText('Content for section 2')).toBeVisible()
+
+    // In single mode, the first item's content should be hidden
+    // Radix adds hidden attribute which removes from accessible tree
+    const item1Content = screen.queryByText('Content for section 1')
+    if (item1Content) {
+      expect(item1Content).not.toBeVisible()
+    }
+  })
+
+  it('shows chevron icon', () => {
+    renderAccordion()
+    // The AccordionTrigger renders a ChevronDown SVG icon
+    const svgs = document.querySelectorAll('svg')
+    expect(svgs.length).toBeGreaterThanOrEqual(3) // One chevron per accordion item
+  })
+})

package/src/components/layout/Accordion.tsx

@@ -0,0 +1,64 @@
+"use client";
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & {
+    ref?: React.Ref<React.ElementRef<typeof AccordionPrimitive.Item>>;
+  }
+) => (<AccordionPrimitive.Item
+  ref={ref}
+  className={cn("border-b last:border-b-0", className)}
+  {...props}
+/>)
+
+const AccordionTrigger = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    ref?: React.Ref<React.ElementRef<typeof AccordionPrimitive.Trigger>>;
+  }
+) => (<AccordionPrimitive.Header className="flex">
+  <AccordionPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium hover:underline outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronDown className="pointer-events-none h-4 w-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
+  </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>)
+
+const AccordionContent = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof AccordionPrimitive.Content>>;
+  }
+) => (<AccordionPrimitive.Content
+  ref={ref}
+  className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  {...props}
+>
+  <div className={cn("pb-4 pt-0", className)}>{children}</div>
+</AccordionPrimitive.Content>)
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/layout/AspectRatio.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }

package/src/components/layout/Carousel.tsx

@@ -0,0 +1,277 @@
+"use client";
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { Button } from "../actions/Button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = (
+  {
+    ref,
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & CarouselProps & {
+    ref?: React.Ref<HTMLDivElement>;
+  }
+) => {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) {
+      return
+    }
+
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) {
+      return
+    }
+
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        ref={ref}
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+const CarouselContent = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+  }
+) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+const CarouselItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+  }
+) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const CarouselPrevious = (
+  {
+    ref,
+    className,
+    variant = "outline",
+    size = "icon",
+    ...props
+  }: React.ComponentProps<typeof Button> & {
+    ref?: React.Ref<HTMLButtonElement>;
+  }
+) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+const CarouselNext = (
+  {
+    ref,
+    className,
+    variant = "outline",
+    size = "icon",
+    ...props
+  }: React.ComponentProps<typeof Button> & {
+    ref?: React.Ref<HTMLButtonElement>;
+  }
+) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

package/src/components/layout/Collapsible.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect } from 'vitest'
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible'
+
+describe('Collapsible', () => {
+  it('renders trigger', () => {
+    render(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Hidden content</CollapsibleContent>
+      </Collapsible>
+    )
+    expect(screen.getByRole('button', { name: /toggle/i })).toBeInTheDocument()
+  })
+
+  it('shows content when opened', async () => {
+    const user = userEvent.setup()
+    render(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Hidden content</CollapsibleContent>
+      </Collapsible>
+    )
+
+    expect(screen.queryByText('Hidden content')).not.toBeInTheDocument()
+    await user.click(screen.getByRole('button'))
+    expect(screen.getByText('Hidden content')).toBeVisible()
+  })
+
+  it('renders open by default when open prop is true', () => {
+    render(
+      <Collapsible open>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Visible content</CollapsibleContent>
+      </Collapsible>
+    )
+    expect(screen.getByText('Visible content')).toBeVisible()
+  })
+})

package/src/components/layout/Collapsible.tsx

@@ -0,0 +1,31 @@
+"use client";
+import * as React from "react"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+import { cn } from "../../lib/utils"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent> & {
+    ref?: React.Ref<React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>>;
+  }
+) => (<CollapsiblePrimitive.CollapsibleContent
+  ref={ref}
+  className={cn(
+    "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+    className
+  )}
+  {...props}
+>
+  {children}
+</CollapsiblePrimitive.CollapsibleContent>)
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/components/layout/Container.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Container } from './Container'
+
+describe('Container', () => {
+  it('renders children', () => {
+    render(<Container>Content here</Container>)
+    expect(screen.getByText('Content here')).toBeInTheDocument()
+  })
+
+  it('defaults to standard max-width', () => {
+    const { container } = render(<Container>Content</Container>)
+    expect(container.firstChild).toHaveClass('max-w-7xl')
+  })
+
+  it('renders wide variant', () => {
+    const { container } = render(<Container variant="wide">Content</Container>)
+    expect(container.firstChild).toHaveClass('max-w-[1440px]')
+  })
+
+  it('renders narrow variant', () => {
+    const { container } = render(<Container variant="narrow">Content</Container>)
+    expect(container.firstChild).toHaveClass('max-w-4xl')
+  })
+
+  it('includes padding by default', () => {
+    const { container } = render(<Container>Content</Container>)
+    expect(container.firstChild).toHaveClass('px-4')
+  })
+
+  it('removes padding when padding=false', () => {
+    const { container } = render(<Container padding={false}>Content</Container>)
+    expect(container.firstChild).not.toHaveClass('px-4')
+  })
+
+  it('renders as different HTML elements', () => {
+    render(<Container as="main">Main content</Container>)
+    expect(screen.getByText('Main content').tagName).toBe('MAIN')
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Container className="custom-container">Content</Container>)
+    expect(container.firstChild).toHaveClass('custom-container')
+  })
+})