@opensaas/stack-ui 0.1.0

package/src/primitives/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import { cn } from '../lib/utils.js'
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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 md:text-sm',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Input.displayName = 'Input'
+
+export { Input }

package/src/primitives/label.tsx

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

package/src/primitives/popover.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '../lib/utils.js'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-card p-4 text-card-foreground shadow-lg outline-none 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',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

package/src/primitives/select.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+
+import { cn } from '../lib/utils.js'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <svg className="h-4 w-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+      </svg>
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+    </svg>
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-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,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

package/src/primitives/table.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+
+import { cn } from '../lib/utils.js'
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  ),
+)
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+))
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+))
+TableBody.displayName = 'TableBody'
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+    {...props}
+  />
+))
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+))
+TableCell.displayName = 'TableCell'
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+))
+TableCaption.displayName = 'TableCaption'
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

package/src/primitives/time-picker.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils.js'
+import { Input } from './input.js'
+
+export interface TimePickerProps {
+  value?: Date
+  onChange?: (date: Date) => void
+  disabled?: boolean
+  className?: string
+}
+
+export function TimePicker({ value, onChange, disabled, className }: TimePickerProps) {
+  const hours = value ? value.getHours() : 12
+  const minutes = value ? value.getMinutes() : 30
+
+  const handleHourChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newHours = parseInt(e.target.value) || 0
+    const clampedHours = Math.max(0, Math.min(23, newHours))
+
+    if (onChange) {
+      const newDate = value ? new Date(value) : new Date()
+      newDate.setHours(clampedHours)
+      onChange(newDate)
+    }
+  }
+
+  const handleMinuteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newMinutes = parseInt(e.target.value) || 0
+    const clampedMinutes = Math.max(0, Math.min(59, newMinutes))
+
+    if (onChange) {
+      const newDate = value ? new Date(value) : new Date()
+      newDate.setMinutes(clampedMinutes)
+      onChange(newDate)
+    }
+  }
+
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <div className="flex items-center">
+        <Input
+          type="number"
+          min={0}
+          max={23}
+          value={hours.toString().padStart(2, '0')}
+          onChange={handleHourChange}
+          disabled={disabled}
+          className="w-14 text-center"
+        />
+        <span className="mx-1 text-lg">:</span>
+        <Input
+          type="number"
+          min={0}
+          max={59}
+          value={minutes.toString().padStart(2, '0')}
+          onChange={handleMinuteChange}
+          disabled={disabled}
+          className="w-14 text-center"
+        />
+      </div>
+    </div>
+  )
+}

package/src/server/index.ts

@@ -0,0 +1,3 @@
+// Server utilities for OpenSaas UI
+
+export type { ServerActionInput, ActionResult } from './types.js'

package/src/server/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Input for the generic server action
+ * Re-exported from @opensaas/stack-core for convenience
+ */
+export type { ServerActionProps as ServerActionInput } from '@opensaas/stack-core'
+
+/**
+ * Result of a server action
+ */
+export interface ActionResult<T = Record<string, unknown>> {
+  success: boolean
+  data?: T
+  error?: string
+  fieldErrors?: Record<string, string>
+}

package/src/styles/globals.css

@@ -0,0 +1,123 @@
+@import 'tailwindcss';
+
+@theme inline {
+  /* Light mode colors */
+  --color-background-light: oklch(0.97 0.01 264);
+  --color-foreground-light: oklch(0.2 0.02 264);
+  --color-card-light: oklch(1 0 0);
+  --color-card-foreground-light: oklch(0.2 0.02 264);
+  --color-popover-light: oklch(1 0 0);
+  --color-popover-foreground-light: oklch(0.2 0.02 264);
+
+  --color-primary-light: oklch(0.68 0.19 210);
+  --color-primary-foreground-light: oklch(0.2 0.02 264);
+
+  --color-secondary-light: oklch(0.95 0.01 264);
+  --color-secondary-foreground-light: oklch(0.2 0.02 264);
+  --color-muted-light: oklch(0.95 0.01 264);
+  --color-muted-foreground-light: oklch(0.5 0.01 264);
+  --color-accent-light: oklch(0.7 0.21 320);
+  --color-accent-foreground-light: oklch(1 0 0);
+
+  --color-destructive-light: oklch(0.65 0.23 25);
+  --color-destructive-foreground-light: oklch(1 0 0);
+  --color-border-light: oklch(0.9 0.01 264);
+  --color-input-light: oklch(0.9 0.01 264);
+  --color-ring-light: oklch(0.68 0.19 210);
+
+  /* Dark mode colors */
+  --color-background-dark: oklch(0.15 0.02 264);
+  --color-foreground-dark: oklch(0.95 0.01 264);
+  --color-card-dark: oklch(0.18 0.02 264);
+  --color-card-foreground-dark: oklch(0.95 0.01 264);
+  --color-popover-dark: oklch(0.18 0.02 264);
+  --color-popover-foreground-dark: oklch(0.95 0.01 264);
+
+  --color-primary-dark: oklch(0.72 0.2 210);
+  --color-primary-foreground-dark: oklch(0.2 0.02 264);
+
+  --color-secondary-dark: oklch(0.25 0.02 264);
+  --color-secondary-foreground-dark: oklch(0.95 0.01 264);
+  --color-muted-dark: oklch(0.25 0.02 264);
+  --color-muted-foreground-dark: oklch(0.6 0.01 264);
+  --color-accent-dark: oklch(0.75 0.22 320);
+  --color-accent-foreground-dark: oklch(0.2 0.02 264);
+
+  --color-destructive-dark: oklch(0.68 0.24 25);
+  --color-destructive-foreground-dark: oklch(1 0 0);
+  --color-border-dark: oklch(0.3 0.02 264);
+  --color-input-dark: oklch(0.3 0.02 264);
+  --color-ring-dark: oklch(0.72 0.2 210);
+
+  /* Semantic tokens using light-dark() */
+  --color-background: light-dark(var(--color-background-light), var(--color-background-dark));
+  --color-foreground: light-dark(var(--color-foreground-light), var(--color-foreground-dark));
+  --color-card: light-dark(var(--color-card-light), var(--color-card-dark));
+  --color-card-foreground: light-dark(
+    var(--color-card-foreground-light),
+    var(--color-card-foreground-dark)
+  );
+  --color-popover: light-dark(var(--color-popover-light), var(--color-popover-dark));
+  --color-popover-foreground: light-dark(
+    var(--color-popover-foreground-light),
+    var(--color-popover-foreground-dark)
+  );
+
+  --color-primary: light-dark(var(--color-primary-light), var(--color-primary-dark));
+  --color-primary-foreground: light-dark(
+    var(--color-primary-foreground-light),
+    var(--color-primary-foreground-dark)
+  );
+
+  --color-secondary: light-dark(var(--color-secondary-light), var(--color-secondary-dark));
+  --color-secondary-foreground: light-dark(
+    var(--color-secondary-foreground-light),
+    var(--color-secondary-foreground-dark)
+  );
+  --color-muted: light-dark(var(--color-muted-light), var(--color-muted-dark));
+  --color-muted-foreground: light-dark(
+    var(--color-muted-foreground-light),
+    var(--color-muted-foreground-dark)
+  );
+  --color-accent: light-dark(var(--color-accent-light), var(--color-accent-dark));
+  --color-accent-foreground: light-dark(
+    var(--color-accent-foreground-light),
+    var(--color-accent-foreground-dark)
+  );
+
+  --color-destructive: light-dark(var(--color-destructive-light), var(--color-destructive-dark));
+  --color-destructive-foreground: light-dark(
+    var(--color-destructive-foreground-light),
+    var(--color-destructive-foreground-dark)
+  );
+  --color-border: light-dark(var(--color-border-light), var(--color-border-dark));
+  --color-input: light-dark(var(--color-input-light), var(--color-input-dark));
+  --color-ring: light-dark(var(--color-ring-light), var(--color-ring-dark));
+
+  --radius: 0.75rem;
+
+  /* Gradient colors for modern effects */
+  --gradient-from-light: oklch(0.68 0.19 210);
+  --gradient-to-light: oklch(0.7 0.21 320);
+  --gradient-from-dark: oklch(0.72 0.2 210);
+  --gradient-to-dark: oklch(0.75 0.22 320);
+  --gradient-from: light-dark(var(--gradient-from-light), var(--gradient-from-dark));
+  --gradient-to: light-dark(var(--gradient-to-light), var(--gradient-to-dark));
+}
+
+:root {
+  color-scheme: light dark;
+}
+
+* {
+  border-color: var(--color-border);
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+}

package/tailwind.config.ts

@@ -0,0 +1,3 @@
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+}

package/tests/components/TextField.test.tsx

@@ -0,0 +1,94 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TextField } from '../../src/components/fields/TextField.js'
+
+describe('TextField', () => {
+  describe('edit mode', () => {
+    it('should render text input with label', () => {
+      render(<TextField name="username" value="" onChange={vi.fn()} label="Username" />)
+
+      expect(screen.getByLabelText('Username')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should display current value', () => {
+      render(<TextField name="username" value="john" onChange={vi.fn()} label="Username" />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveValue('john')
+    })
+
+    it('should call onChange when user types', async () => {
+      const onChange = vi.fn()
+      const user = userEvent.setup()
+
+      render(<TextField name="username" value="" onChange={onChange} label="Username" />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, 't')
+
+      expect(onChange).toHaveBeenCalled()
+      expect(onChange).toHaveBeenCalledWith('t')
+    })
+
+    it('should show required indicator when required', () => {
+      render(<TextField name="username" value="" onChange={vi.fn()} label="Username" required />)
+
+      expect(screen.getByText('*')).toBeInTheDocument()
+    })
+
+    it('should display error message', () => {
+      render(
+        <TextField
+          name="username"
+          value=""
+          onChange={vi.fn()}
+          label="Username"
+          error="Username is required"
+        />,
+      )
+
+      expect(screen.getByText('Username is required')).toBeInTheDocument()
+    })
+
+    it('should be disabled when disabled prop is true', () => {
+      render(<TextField name="username" value="" onChange={vi.fn()} label="Username" disabled />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toBeDisabled()
+    })
+
+    it('should show placeholder text', () => {
+      render(
+        <TextField
+          name="username"
+          value=""
+          onChange={vi.fn()}
+          label="Username"
+          placeholder="Enter your username"
+        />,
+      )
+
+      expect(screen.getByPlaceholderText('Enter your username')).toBeInTheDocument()
+    })
+  })
+
+  describe('read mode', () => {
+    it('should render value as text', () => {
+      render(
+        <TextField name="username" value="john" onChange={vi.fn()} label="Username" mode="read" />,
+      )
+
+      expect(screen.getByText('Username')).toBeInTheDocument()
+      expect(screen.getByText('john')).toBeInTheDocument()
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    })
+
+    it('should show dash when value is empty', () => {
+      render(<TextField name="username" value="" onChange={vi.fn()} label="Username" mode="read" />)
+
+      expect(screen.getByText('-')).toBeInTheDocument()
+    })
+  })
+})

package/tests/setup.ts

@@ -0,0 +1,11 @@
+import { expect, afterEach } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import * as matchers from '@testing-library/jest-dom/matchers'
+
+// Extend Vitest matchers with jest-dom
+expect.extend(matchers)
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup()
+})

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": false,
+    "isolatedModules": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "tests"]
+}