@otfdashkit/ui 0.1.0

package/src/forms/combobox.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import React from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../primitives/command'
+import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { cn } from '../utils/cn'
+
+export interface ComboboxOption {
+  value: string
+  label: string
+  /** Optional supporting text rendered below the label */
+  description?: string
+  /** Disabled options are rendered but not selectable */
+  disabled?: boolean
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[]
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyMessage?: string
+  disabled?: boolean
+  className?: string
+  /** Width of the popover content. Defaults to match the trigger. */
+  contentWidth?: 'trigger' | 'auto'
+}
+
+export function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder = 'Select…',
+  searchPlaceholder = 'Search…',
+  emptyMessage = 'No results.',
+  disabled,
+  className,
+  contentWidth = 'trigger',
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false)
+  const selected = options.find((o) => o.value === value)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          data-slot="combobox"
+          className={cn(
+            'flex items-center justify-between w-full h-9 px-3 text-sm rounded-md',
+            'border border-input bg-background text-foreground',
+            'hover:bg-accent/50',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'disabled:opacity-50 disabled:cursor-not-allowed',
+            className
+          )}
+        >
+          <span className={cn('truncate', !selected && 'text-muted-foreground')}>
+            {selected?.label ?? placeholder}
+          </span>
+          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 ml-2" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        style={contentWidth === 'trigger' ? { width: 'var(--radix-popover-trigger-width)' } : undefined}
+        align="start"
+      >
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+            <CommandGroup>
+              {options.map((opt) => (
+                <CommandItem
+                  key={opt.value}
+                  value={opt.label}
+                  disabled={opt.disabled}
+                  onSelect={() => {
+                    onChange?.(opt.value)
+                    setOpen(false)
+                  }}
+                >
+                  <Check
+                    className={cn('mr-2 h-4 w-4', value === opt.value ? 'opacity-100' : 'opacity-0')}
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div className="truncate">{opt.label}</div>
+                    {opt.description && (
+                      <div className="text-xs text-muted-foreground truncate">{opt.description}</div>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/forms/date-picker.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react'
+import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react'
+import { Button } from '../primitives/button'
+import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { cn } from '../utils/cn'
+
+const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+
+export interface DatePickerProps {
+  value?: Date
+  onChange?: (date: Date) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+}
+
+function isSameDay(a: Date, b: Date) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+
+function getDaysInMonth(year: number, month: number) {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+function getFirstDayOfWeek(year: number, month: number) {
+  return new Date(year, month, 1).getDay()
+}
+
+function CalendarGrid({ year, month, selected, onSelect }: {
+  year: number; month: number; selected?: Date; onSelect: (d: Date) => void
+}) {
+  const today = new Date()
+  const daysInMonth = getDaysInMonth(year, month)
+  const firstDay = getFirstDayOfWeek(year, month)
+  const cells = Array.from({ length: firstDay + daysInMonth }, (_, i) => i < firstDay ? null : i - firstDay + 1)
+
+  return (
+    <div className="grid grid-cols-7 gap-0.5">
+      {DAYS.map(d => <div key={d} className="py-1 text-center text-xs font-medium text-[hsl(var(--muted-foreground))]">{d}</div>)}
+      {cells.map((day, i) => {
+        if (!day) return <div key={i} />
+        const date = new Date(year, month, day)
+        const isToday = isSameDay(date, today)
+        const isSelected = selected && isSameDay(date, selected)
+        return (
+          <button
+            key={i}
+            type="button"
+            onClick={() => onSelect(date)}
+            className={cn(
+              'flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors',
+              isSelected && 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]',
+              !isSelected && isToday && 'border border-[hsl(var(--primary))] text-[hsl(var(--primary))]',
+              !isSelected && !isToday && 'hover:bg-[hsl(var(--accent))]'
+            )}
+          >
+            {day}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export function DatePicker({ value, onChange, placeholder = 'Pick a date', disabled, className }: DatePickerProps) {
+  const [open, setOpen] = useState(false)
+  const now = value ?? new Date()
+  const [view, setView] = useState({ year: now.getFullYear(), month: now.getMonth() })
+
+  function navigate(delta: number) {
+    setView(v => {
+      const date = new Date(v.year, v.month + delta)
+      return { year: date.getFullYear(), month: date.getMonth() }
+    })
+  }
+
+  function handleSelect(date: Date) {
+    onChange?.(date)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          disabled={disabled}
+          className={cn('w-full justify-start font-normal', !value && 'text-[hsl(var(--muted-foreground))]', className)}
+        >
+          <Calendar className="mr-2 h-4 w-4 shrink-0" />
+          {value ? value.toLocaleDateString() : placeholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-3" align="start">
+        <div className="flex items-center justify-between mb-2">
+          <button type="button" onClick={() => navigate(-1)} className="rounded p-1 hover:bg-[hsl(var(--accent))]">
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          <span className="text-sm font-medium">{MONTHS[view.month]} {view.year}</span>
+          <button type="button" onClick={() => navigate(1)} className="rounded p-1 hover:bg-[hsl(var(--accent))]">
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+        <CalendarGrid year={view.year} month={view.month} selected={value} onSelect={handleSelect} />
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/forms/field.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export interface FieldProps {
+  label?: string
+  description?: string
+  error?: string
+  required?: boolean
+  children: React.ReactNode
+  className?: string
+}
+
+export function Field({ label, description, error, required, children, className }: FieldProps) {
+  return (
+    <div className={cn('flex flex-col gap-1.5', className)}>
+      {label && <FieldLabel required={required}>{label}</FieldLabel>}
+      {children}
+      {description && !error && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </div>
+  )
+}
+
+export interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  required?: boolean
+}
+
+export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
+  ({ className, required, children, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn('text-sm font-medium leading-none text-[hsl(var(--foreground))]', className)}
+      {...props}
+    >
+      {children}
+      {required && <span className="ml-1 text-[hsl(var(--destructive))]">*</span>}
+    </label>
+  )
+)
+FieldLabel.displayName = 'FieldLabel'
+
+export const FieldDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-xs text-[hsl(var(--muted-foreground))]', className)}
+      {...props}
+    />
+  )
+)
+FieldDescription.displayName = 'FieldDescription'
+
+export const FieldError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-xs text-[hsl(var(--destructive))]', className)}
+      {...props}
+    />
+  )
+)
+FieldError.displayName = 'FieldError'

package/src/forms/file-upload.tsx

@@ -0,0 +1,101 @@
+import React, { useRef, useState } from 'react'
+import { Upload, X } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+export interface FileUploadProps {
+  accept?: string
+  multiple?: boolean
+  maxSize?: number
+  onFiles?: (files: File[]) => void
+  className?: string
+  disabled?: boolean
+}
+
+function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+function filterBySize(files: File[], maxSize?: number) {
+  return maxSize ? files.filter(f => f.size <= maxSize) : files
+}
+
+export function FileUpload({ accept, multiple, maxSize, onFiles, className, disabled }: FileUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [dragging, setDragging] = useState(false)
+
+  function handleFiles(raw: FileList | null) {
+    if (!raw) return
+    const files = filterBySize(Array.from(raw), maxSize)
+    onFiles?.(files)
+  }
+
+  function handleDrop(e: React.DragEvent) {
+    e.preventDefault()
+    setDragging(false)
+    if (!disabled) handleFiles(e.dataTransfer.files)
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      onClick={() => !disabled && inputRef.current?.click()}
+      onKeyDown={e => e.key === 'Enter' && !disabled && inputRef.current?.click()}
+      onDragOver={e => { e.preventDefault(); if (!disabled) setDragging(true) }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={handleDrop}
+      className={cn(
+        'flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-[hsl(var(--border))] p-8 text-center transition-colors cursor-pointer',
+        dragging && 'border-[hsl(var(--primary))] bg-[hsl(var(--accent))]',
+        disabled && 'cursor-not-allowed opacity-50',
+        className
+      )}
+    >
+      <Upload className="h-8 w-8 text-[hsl(var(--muted-foreground))]" />
+      <div>
+        <p className="text-sm font-medium">Drag files here or click to upload</p>
+        {maxSize && <p className="text-xs text-[hsl(var(--muted-foreground))]">Max size: {formatBytes(maxSize)}</p>}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        className="hidden"
+        onChange={e => handleFiles(e.target.files)}
+        disabled={disabled}
+      />
+    </div>
+  )
+}
+
+export interface FileUploadPreviewProps {
+  files: File[]
+  onRemove: (index: number) => void
+  className?: string
+}
+
+export function FileUploadPreview({ files, onRemove, className }: FileUploadPreviewProps) {
+  if (!files.length) return null
+  return (
+    <ul className={cn('flex flex-col gap-1', className)}>
+      {files.map((file, i) => (
+        <li key={i} className="flex items-center justify-between rounded-md border border-[hsl(var(--border))] px-3 py-2 text-sm">
+          <span className="min-w-0 truncate text-[hsl(var(--foreground))]">{file.name}</span>
+          <div className="ml-2 flex shrink-0 items-center gap-2">
+            <span className="text-xs text-[hsl(var(--muted-foreground))]">{formatBytes(file.size)}</span>
+            <button
+              type="button"
+              onClick={() => onRemove(i)}
+              className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--destructive))] transition-colors"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/forms/form.tsx

@@ -0,0 +1,57 @@
+import React, { useId } from 'react'
+import { FormProvider, Controller, useFormContext, type FieldValues, type ControllerProps, type FieldPath } from 'react-hook-form'
+import { cn } from '../utils/cn'
+
+export { FormProvider as Form }
+
+export function FormField<T extends FieldValues, N extends FieldPath<T>>(
+  props: ControllerProps<T, N>
+) {
+  return <Controller {...props} />
+}
+
+export function FormItem({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col gap-1.5', className)} {...props} />
+}
+
+interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  error?: boolean
+}
+
+export const FormLabel = React.forwardRef<HTMLLabelElement, FormLabelProps>(
+  ({ className, error, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        'text-sm font-medium leading-none',
+        error ? 'text-[hsl(var(--destructive))]' : 'text-[hsl(var(--foreground))]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+FormLabel.displayName = 'FormLabel'
+
+export const FormControl = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ ...props }, ref) => {
+    const id = useId()
+    return <div ref={ref} id={id} {...props} />
+  }
+)
+FormControl.displayName = 'FormControl'
+
+export function FormDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn('text-xs text-[hsl(var(--muted-foreground))]', className)} {...props} />
+}
+
+export function FormMessage({ className, children, name }: React.HTMLAttributes<HTMLParagraphElement> & { name?: string }) {
+  const { formState } = useFormContext()
+  const error = name ? formState.errors[name] : undefined
+  const message = error?.message ? String(error.message) : children
+
+  if (!message) return null
+  return (
+    <p className={cn('text-xs text-[hsl(var(--destructive))]', className)}>{message}</p>
+  )
+}

package/src/forms/object-field.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+export interface ObjectFieldProps {
+  title: string
+  description?: string
+  collapsible?: boolean
+  defaultOpen?: boolean
+  children: React.ReactNode
+  className?: string
+}
+
+export function ObjectField({
+  title,
+  description,
+  collapsible = false,
+  defaultOpen = true,
+  children,
+  className,
+}: ObjectFieldProps) {
+  const [open, setOpen] = useState(defaultOpen)
+
+  return (
+    <div className={cn('rounded-md border border-[hsl(var(--border))] overflow-hidden', className)}>
+      <div
+        className={cn(
+          'flex items-center justify-between px-4 py-3 bg-[hsl(var(--muted)/0.4)]',
+          collapsible && 'cursor-pointer hover:bg-[hsl(var(--accent))] transition-colors'
+        )}
+        onClick={() => collapsible && setOpen(o => !o)}
+        role={collapsible ? 'button' : undefined}
+        tabIndex={collapsible ? 0 : undefined}
+        onKeyDown={e => collapsible && e.key === 'Enter' && setOpen(o => !o)}
+      >
+        <div>
+          <h4 className="text-sm font-semibold text-[hsl(var(--foreground))]">{title}</h4>
+          {description && <p className="text-xs text-[hsl(var(--muted-foreground))]">{description}</p>}
+        </div>
+        {collapsible && (
+          open
+            ? <ChevronDown className="h-4 w-4 text-[hsl(var(--muted-foreground))]" />
+            : <ChevronRight className="h-4 w-4 text-[hsl(var(--muted-foreground))]" />
+        )}
+      </div>
+      {(!collapsible || open) && (
+        <div className="p-4 flex flex-col gap-4">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/forms/password-input.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
+import { Input, type InputProps } from '../primitives/input'
+import { cn } from '../utils/cn'
+
+export interface PasswordInputProps extends InputProps {
+  strength?: boolean
+}
+
+function getStrength(value: string): { level: 'weak' | 'medium' | 'strong'; width: string; color: string } {
+  const has = (re: RegExp) => re.test(value)
+  const score = [value.length >= 8, has(/[A-Z]/), has(/[0-9]/), has(/[^A-Za-z0-9]/)].filter(Boolean).length
+  if (score <= 1) return { level: 'weak', width: 'w-1/3', color: 'bg-[hsl(var(--destructive))]' }
+  if (score <= 3) return { level: 'medium', width: 'w-2/3', color: 'bg-yellow-500' }
+  return { level: 'strong', width: 'w-full', color: 'bg-green-500' }
+}
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ className, strength, ...props }, ref) => {
+    const [show, setShow] = useState(false)
+    const value = String(props.value ?? '')
+    const str = getStrength(value)
+
+    return (
+      <div className="flex flex-col gap-1.5">
+        <div className="relative">
+          <Input
+            ref={ref}
+            type={show ? 'text' : 'password'}
+            className={cn('pr-9', className)}
+            {...props}
+          />
+          <button
+            type="button"
+            onClick={() => setShow(s => !s)}
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors"
+            tabIndex={-1}
+          >
+            {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+          </button>
+        </div>
+        {strength && value.length > 0 && (
+          <div className="space-y-1">
+            <div className="h-1 w-full rounded-full bg-[hsl(var(--muted))]">
+              <div className={cn('h-full rounded-full transition-all', str.width, str.color)} />
+            </div>
+            <p className="text-xs text-[hsl(var(--muted-foreground))] capitalize">{str.level}</p>
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+PasswordInput.displayName = 'PasswordInput'

package/src/forms/search-input.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import { Search, X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { type InputProps } from '../primitives/input'
+
+export interface SearchInputProps extends Omit<InputProps, 'onChange'> {
+  shortcut?: string
+  onClear?: () => void
+  onChange?: (value: string) => void
+}
+
+export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ className, shortcut, onClear, onChange, value: valueProp, defaultValue, ...props }, ref) => {
+    const [internalValue, setInternalValue] = useState(defaultValue ?? '')
+    const isControlled = valueProp !== undefined
+    const value = isControlled ? String(valueProp) : String(internalValue)
+
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+      if (!isControlled) setInternalValue(e.target.value)
+      onChange?.(e.target.value)
+    }
+
+    function handleClear() {
+      if (!isControlled) setInternalValue('')
+      onChange?.('')
+      onClear?.()
+    }
+
+    return (
+      <div className="relative flex items-center">
+        <Search className="pointer-events-none absolute left-2.5 h-4 w-4 text-[hsl(var(--muted-foreground))]" />
+        <input
+          ref={ref}
+          value={value}
+          onChange={handleChange}
+          className={cn(
+            'flex h-9 w-full rounded-md border border-[hsl(var(--input))] bg-transparent pl-8 pr-8 text-sm shadow-sm transition-colors',
+            'placeholder:text-[hsl(var(--muted-foreground))]',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          {...props}
+        />
+        <div className="absolute right-2.5 flex items-center">
+          {value ? (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          ) : shortcut ? (
+            <kbd className="pointer-events-none rounded border border-[hsl(var(--border))] px-1.5 py-0.5 text-[10px] text-[hsl(var(--muted-foreground))]">
+              {shortcut}
+            </kbd>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+)
+SearchInput.displayName = 'SearchInput'