@otfdashkit/ui 0.1.1 → 0.1.3

package/src/forms/auto-form.tsx

@@ -1,133 +1 @@
-import React from 'react'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
-import { Input } from '../primitives/input'
-import { Checkbox } from '../primitives/checkbox'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
-import { Button } from '../primitives/button'
-import { DatePicker } from './date-picker'
-import { Field } from './field'
-
-export interface AutoFormProps {
-  schema: z.ZodObject<z.ZodRawShape>
-  onSubmit: (data: Record<string, unknown>) => void
-  defaultValues?: Record<string, unknown>
-  submitLabel?: string
-}
-
-function toLabel(key: string) {
-  return key.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase())
-}
-
-function getInputType(field: z.ZodTypeAny): string {
-  if (field instanceof z.ZodEmail) return 'email'
-  if (field instanceof z.ZodURL) return 'url'
-  return 'text'
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function unwrapOptional(field: z.ZodTypeAny): any {
-  if (field instanceof z.ZodOptional || field instanceof z.ZodNullable) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return unwrapOptional((field as any).unwrap())
-  }
-  return field
-}
-
-interface FieldRendererProps {
-  name: string
-  field: z.ZodTypeAny
-  register: ReturnType<typeof useForm>['register']
-  setValue: ReturnType<typeof useForm>['setValue']
-  watch: ReturnType<typeof useForm>['watch']
-  error?: string
-}
-
-function FieldRenderer({ name, field, register, setValue, watch, error }: FieldRendererProps) {
-  const inner = unwrapOptional(field)
-  const label = toLabel(name)
-  const isOptional = field instanceof z.ZodOptional
-
-  if (inner instanceof z.ZodBoolean) {
-    const checked = Boolean(watch(name))
-    return (
-      <Field label={label} error={error}>
-        <div className="flex items-center gap-2">
-          <Checkbox
-            id={name}
-            checked={checked}
-            onCheckedChange={v => setValue(name, v)}
-          />
-          <label htmlFor={name} className="text-sm text-[hsl(var(--foreground))]">{label}</label>
-        </div>
-      </Field>
-    )
-  }
-
-  if (inner instanceof z.ZodEnum) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const options = ((inner as any).options ?? []) as string[]
-    const value = watch(name) as string | undefined
-    return (
-      <Field label={label} required={!isOptional} error={error}>
-        <Select value={value} onValueChange={v => setValue(name, v)}>
-          <SelectTrigger><SelectValue placeholder={`Select ${label.toLowerCase()}`} /></SelectTrigger>
-          <SelectContent>
-            {options.map(opt => <SelectItem key={opt} value={opt}>{opt}</SelectItem>)}
-          </SelectContent>
-        </Select>
-      </Field>
-    )
-  }
-
-  if (inner instanceof z.ZodDate) {
-    const value = watch(name) as Date | undefined
-    return (
-      <Field label={label} required={!isOptional} error={error}>
-        <DatePicker value={value} onChange={d => setValue(name, d)} placeholder={`Select ${label.toLowerCase()}`} />
-      </Field>
-    )
-  }
-
-  if (inner instanceof z.ZodNumber) {
-    return (
-      <Field label={label} required={!isOptional} error={error}>
-        <Input type="number" {...register(name, { valueAsNumber: true })} />
-      </Field>
-    )
-  }
-
-  const inputType = getInputType(inner)
-  return (
-    <Field label={label} required={!isOptional} error={error}>
-      <Input type={inputType} {...register(name)} />
-    </Field>
-  )
-}
-
-export function AutoForm({ schema, onSubmit, defaultValues, submitLabel = 'Submit' }: AutoFormProps) {
-  const { register, handleSubmit, setValue, watch, formState } = useForm({
-    resolver: zodResolver(schema),
-    defaultValues: defaultValues as Record<string, unknown>,
-  })
-
-  const shape = schema.shape
-
-  return (
-    <form onSubmit={handleSubmit(d => onSubmit(d as Record<string, unknown>))} className="flex flex-col gap-4">
-      {Object.entries(shape).map(([name, field]) => (
-        <FieldRenderer
-          key={name}
-          name={name}
-          field={field as z.ZodTypeAny}
-          register={register}
-          setValue={setValue}
-          watch={watch}
-          error={formState.errors[name]?.message as string | undefined}
-        />
-      ))}
-      <Button type="submit">{submitLabel}</Button>
-    </form>
-  )
-}
+export * from './AutoForm'

package/src/forms/date-picker.tsx

@@ -1,109 +1 @@
-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>
-  )
-}
+export * from './DatePicker'

package/src/forms/field.tsx

@@ -1,62 +1 @@
-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'
+export * from './Field/index'

package/src/forms/file-upload.tsx

@@ -1,101 +1 @@
-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>
-  )
-}
+export * from './FileUpload'

package/src/forms/floating-label-input.tsx

@@ -0,0 +1 @@
+export * from './FloatingLabelInput'

package/src/forms/form.tsx

@@ -1,57 +1 @@
-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>
-  )
-}
+export * from './Form/index'

package/src/forms/object-field.tsx

@@ -1,53 +1 @@
-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>
-  )
-}
+export * from './ObjectField'

package/src/forms/password-input.tsx

@@ -1,54 +1 @@
-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'
+export * from './PasswordInput'

package/src/forms/search-input.tsx

@@ -1,64 +1 @@
-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'
+export * from './SearchInput'