Input

1'use client'
2 
3import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from 'react'
4import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
5import { cn } from '@/lib/utils'
6import { playHoverSound } from '@/lib/sound'
7import { springs } from '@/lib/motion-tokens'
8 
9const sizeClasses = {
10  sm: 'h-9 text-xs',
11  md: 'h-11 text-sm',
12} as const
13 
14export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
15  size?: 'sm' | 'md'
16  startAdornment?: ReactNode
17  endAdornment?: ReactNode
18  label?: string
19  error?: string
20  containerClassName?: string
21}
22 
23export const Input = forwardRef<HTMLInputElement, InputProps>(
24  (
25    {
26      size = 'md',
27      startAdornment,
28      endAdornment,
29      label,
30      error,
31      containerClassName,
32      className,
33      id: idProp,
34      disabled,
35      required,
36      'aria-invalid': ariaInvalid,
37      'aria-describedby': ariaDescribedBy,
38      ...props
39    },
40    ref,
41  ) => {
42    const reactId = useId()
43    const id = idProp ?? reactId
44    const errorId = error ? `${id}-error` : undefined
45    const reduceMotion = useReducedMotion()
46 
47    return (
48      <div className={cn('flex flex-col gap-1.5', containerClassName)}>
49        {label && (
50          <label htmlFor={id} className="text-sm font-medium text-(--color-fg)">
51            {label}
52            {required && <span className="ms-1 text-(--color-error)">*</span>}
53          </label>
54        )}
55        <div
56          onMouseEnter={() => !disabled && playHoverSound()}
57          className={cn(
58            'relative flex items-center gap-1.5 rounded-lg squircle-corners border bg-(--color-bg) px-3.5',
59            'transition-[border-color,box-shadow] duration-(--motion-dur-fast) ease-(--motion-ease-out) motion-reduce:transition-none',
60            sizeClasses[size],
61            error
62              ? 'border-(--color-error) ring-1 ring-(--color-error)/20'
63              : 'border-(--color-border) hover:border-(--color-border-strong) focus-within:border-(--color-accent) focus-within:ring-2 focus-within:ring-(--color-accent)/20',
64            disabled && 'cursor-not-allowed opacity-50',
65          )}
66        >
67          {startAdornment && (
68            <span className="shrink-0 text-(--color-muted)" aria-hidden="true">
69              {startAdornment}
70            </span>
71          )}
72          <input
73            ref={ref}
74            id={id}
75            disabled={disabled}
76            required={required}
77// … truncated