@opencosmos/ui 1.3.1

package/src/components/forms/FilterButton.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+export interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+    count?: number;
+    children: React.ReactNode;
+    /**
+     * Shape of the button
+     * @default 'pill'
+     */
+    shape?: 'pill' | 'rounded';
+}
+
+export const FilterButton = (
+    {
+        ref,
+        active = false,
+        count,
+        children,
+        shape = 'pill',
+        className = '',
+        ...props
+    }: FilterButtonProps & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }
+) => {
+    const shapes = {
+        pill: "rounded-full",
+        rounded: "rounded-lg"
+    };
+
+    return (
+        <button
+            ref={ref}
+            className={`
+      flex items-center gap-2 px-4 py-2 ${shapes[shape]} text-sm font-medium transition-all duration-200
+      border
+      ${active
+                    ? 'bg-[var(--color-primary)] border-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-[var(--effect-shadow-sm)]'
+                    : 'bg-[var(--color-surface)] border-[var(--color-border)] text-[var(--color-text-secondary)] hover:border-[var(--color-primary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background)]'
+                }
+      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus)] focus-visible:ring-offset-2
+      disabled:opacity-50 disabled:cursor-not-allowed
+      ${className}
+    `}
+            aria-pressed={active}
+            {...props}
+        >
+            <span>{children}</span>
+            {count !== undefined && (
+                <span
+                    className={`
+          flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 rounded-full text-xs font-bold
+          ${active
+                            ? 'bg-[var(--color-background)] text-[var(--color-primary)]'
+                            : 'bg-[var(--color-border)] text-[var(--color-text-secondary)]'
+                        }
+        `}
+                >
+                    {count}
+                </span>
+            )}
+        </button>
+    );
+};

package/src/components/forms/Form.tsx

@@ -0,0 +1,197 @@
+"use client";
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "../../lib/utils"
+import { Label } from "./Label"
+
+const Form: typeof FormProvider = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+  }
+) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+}
+
+const FormLabel = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof LabelPrimitive.Root>>;
+  }
+) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+const FormControl = (
+  {
+    ref,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof Slot> & {
+    ref?: React.Ref<React.ElementRef<typeof Slot>>;
+  }
+) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+const FormDescription = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+  }
+) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+const FormMessage = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+  }
+) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

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

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect } from 'vitest'
+import { createRef } from 'react'
+import { Input } from './Input'
+
+describe('Input', () => {
+  it('renders input element', () => {
+    render(<Input placeholder="Enter text" />)
+    const input = screen.getByPlaceholderText('Enter text')
+    expect(input).toBeInTheDocument()
+    expect(input.tagName).toBe('INPUT')
+  })
+
+  it('applies custom className', () => {
+    render(<Input className="custom-input" placeholder="styled" />)
+    const input = screen.getByPlaceholderText('styled')
+    expect(input).toHaveClass('custom-input')
+  })
+
+  it('forwards ref', () => {
+    const ref = createRef<HTMLInputElement>()
+    render(<Input ref={ref} placeholder="ref test" />)
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+  })
+
+  it('handles controlled input', async () => {
+    const user = userEvent.setup()
+    render(<Input placeholder="type here" />)
+    const input = screen.getByPlaceholderText('type here')
+
+    await user.type(input, 'Hello World')
+    expect(input).toHaveValue('Hello World')
+  })
+
+  it('handles different types', () => {
+    const { rerender } = render(<Input type="password" placeholder="password" />)
+    expect(screen.getByPlaceholderText('password')).toHaveAttribute('type', 'password')
+
+    rerender(<Input type="email" placeholder="email" />)
+    expect(screen.getByPlaceholderText('email')).toHaveAttribute('type', 'email')
+
+    rerender(<Input type="number" placeholder="number" />)
+    expect(screen.getByPlaceholderText('number')).toHaveAttribute('type', 'number')
+  })
+})

package/src/components/forms/Input.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> { }
+
+const Input = (
+    {
+        ref,
+        className,
+        type,
+        style,
+        ...props
+    }: InputProps & {
+        ref?: React.Ref<HTMLInputElement>;
+    }
+) => {
+    return (
+        <input
+            type={type}
+            className={cn(
+                "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+            style={{
+                height: '2.25rem',
+                width: '100%',
+                border: '1px solid var(--color-input, #DFDFDF)',
+                borderRadius: 'var(--radius-md, 0.375rem)',
+                padding: '0.25rem 0.75rem',
+                fontSize: 'var(--text-sm, 0.875rem)',
+                backgroundColor: 'transparent',
+                boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+                outline: 'none',
+                ...style,
+            }}
+            ref={ref}
+            {...props}
+        />
+    )
+}
+
+export { Input }

package/src/components/forms/InputOTP.tsx

@@ -0,0 +1,81 @@
+"use client";
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const InputOTP = (
+  {
+    ref,
+    className,
+    containerClassName,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof OTPInput> & {
+    ref?: React.Ref<React.ElementRef<typeof OTPInput>>;
+  }
+) => (<OTPInput
+  ref={ref}
+  containerClassName={cn(
+    "flex items-center gap-2 has-[:disabled]:opacity-50",
+    containerClassName
+  )}
+  className={cn("disabled:cursor-not-allowed", className)}
+  {...props}
+/>)
+
+const InputOTPGroup = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"div"> & {
+    ref?: React.Ref<HTMLDivElement>;
+  }
+) => (<div ref={ref} className={cn("flex items-center", className)} {...props} />)
+
+const InputOTPSlot = (
+  {
+    ref,
+    index,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"div"> & { index: number } & {
+    ref?: React.Ref<HTMLDivElement>;
+  }
+) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+const InputOTPSeparator = (
+  {
+    ref,
+    ...props
+  }: React.ComponentPropsWithoutRef<"div"> & {
+    ref?: React.Ref<HTMLDivElement>;
+  }
+) => (<div ref={ref} role="separator" {...props}>
+  <Dot />
+</div>)
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

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

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Label } from './Label'
+
+describe('Label', () => {
+  it('renders a label element', () => {
+    render(<Label>Name</Label>)
+    expect(screen.getByText('Name')).toBeInTheDocument()
+  })
+
+  it('associates with input via htmlFor', () => {
+    render(<Label htmlFor="name-input">Name</Label>)
+    expect(screen.getByText('Name')).toHaveAttribute('for', 'name-input')
+  })
+
+  it('applies custom className', () => {
+    render(<Label className="custom-label">Email</Label>)
+    expect(screen.getByText('Email')).toHaveClass('custom-label')
+  })
+})

package/src/components/forms/Label.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cn } from "../../lib/utils"
+
+const labelVariants = cva(
+    "block mb-1.5 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = (
+    {
+        ref,
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants> & {
+        ref?: React.Ref<React.ElementRef<typeof LabelPrimitive.Root>>;
+    }
+) => (<LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+/>)
+
+export { Label, labelVariants }

package/src/components/forms/RadioGroup.tsx

@@ -0,0 +1,51 @@
+"use client";
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const RadioGroup = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
+  }
+) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+}
+
+const RadioGroupItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    ref?: React.Ref<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
+  }
+) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }