"use client"; import * as React from "react"; import { cn } from "@/registry/berlin/lib/utils"; type FieldElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement; export interface FormRenderProps { values: Record; errors: Record; handleChange: (event: React.ChangeEvent) => void; handleBlur: (event: React.FocusEvent) => void; validateValues: () => Record; submitForm: () => boolean; } export interface FormProps { children: (formProps: FormRenderProps) => React.ReactNode; onSubmit?: (data: Record) => void; initialValues?: Record; validate?: (values: Record) => Record; className?: string; } type BaseFieldProps = { className?: string; disabled?: boolean; error?: string; label?: string; name: string; onBlur?: React.FocusEventHandler; onChange?: React.ChangeEventHandler; placeholder?: string; value?: string; defaultValue?: string; }; export interface TextBoxProps extends Omit< React.InputHTMLAttributes, "className" | "defaultValue" | "disabled" | "name" | "onBlur" | "onChange" | "placeholder" | "size" | "value" >, BaseFieldProps {} export interface TextAreaProps extends Omit< React.TextareaHTMLAttributes, "className" | "defaultValue" | "disabled" | "name" | "onBlur" | "onChange" | "placeholder" | "value" >, BaseFieldProps { resize?: "none" | "both" | "horizontal" | "vertical"; } export interface DropdownOption { id: string; title: string; } export interface DropdownProps extends Omit< React.SelectHTMLAttributes, "className" | "defaultValue" | "disabled" | "name" | "onBlur" | "onChange" | "placeholder" | "value" >, BaseFieldProps { options?: DropdownOption[] | Record; } function FieldShell({ className, error, floating, label, labelTargetId, children }: React.PropsWithChildren<{ className?: string; error?: string; floating: boolean; label?: string; labelTargetId: string }>) { return (

{children} {label ? ( {label} ) : null}

{error ?

{error}

: null}

); } export function TextBox({ name, label, error, className, value, defaultValue, placeholder, onFocus, onBlur, onChange, disabled, ...props }: TextBoxProps) { const [focused, setFocused] = React.useState(false); const [currentValue, setCurrentValue] = React.useState((value ?? defaultValue ?? "") as string); const floating = focused || Boolean(value ?? currentValue); return ( { setFocused(true); onFocus?.(event); }} onBlur={(event) => { setFocused(false); setCurrentValue(event.target.value); onBlur?.(event); }} onChange={(event) => { setCurrentValue(event.target.value); onChange?.(event); }} {...props} /> ); } export function TextArea({ name, label, error, className, value, defaultValue, placeholder, onFocus, onBlur, onChange, resize = "vertical", rows = 4, disabled, ...props }: TextAreaProps) { const [focused, setFocused] = React.useState(false); const [currentValue, setCurrentValue] = React.useState((value ?? defaultValue ?? "") as string); const floating = focused || Boolean(value ?? currentValue); return (

{
          setFocused(true);
          onFocus?.(event);
        }}
        onBlur={(event) => {
          setFocused(false);
          setCurrentValue(event.target.value);
          onBlur?.(event);
        }}
        onChange={(event) => {
          setCurrentValue(event.target.value);
          onChange?.(event);
        }}
        {...props}
      />
    </FieldShell>
  );
}

function ChevronIcon({ className }: { className?: string }) {
  return (
    <svg className={className} width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="m3 6 5 5 5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function Dropdown({
  name,
  label,
  error,
  className,
  options,
  placeholder = "Select an option",
  value,
  defaultValue,
  onChange,
  disabled,
  ...props
}: DropdownProps) {
  const normalizedOptions = React.useMemo(() => {
    if (!options) return [];
    return Array.isArray(options) ? options : Object.entries(options).map(([id, title]) => ({ id, title }));
  }, [options]);

return (
    <FieldShell className={className} error={error} floating={true} label={label} labelTargetId={name}>
      <div className="relative">
        <select
          id={name}
          name={name}
          value={value}
          defaultValue={defaultValue}
          disabled={disabled}
          className="h-[68px] w-full appearance-none rounded-lg bg-transparent px-4 pb-2 pt-6 text-base leading-6 tracking-[-0.01em] text-foreground outline-none disabled:text-foreground/50"
          onChange={onChange}
          {...props}
        >
          <option value="" disabled>
            {placeholder}
          </option>
          {normalizedOptions.map((option) => (
            <option key={option.id} value={option.id}>
              {option.title}
            </option>
          ))}
        </select>
        <ChevronIcon className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground" />
      </div>
    </FieldShell>
  );
}

export function Form({
  children,
  onSubmit = () => undefined,
  initialValues = {},
  validate = () => ({}),
  className
}: FormProps) {
  const [values, setValues] = React.useState<Record<string, string>>(initialValues);
  const [errors, setErrors] = React.useState<Record<string, string>>({});

const handleChange = React.useCallback((event: React.ChangeEvent<FieldElement>) => {
    const { name, value } = event.target;
    setValues((current) => ({ ...current, [name]: value }));
  }, []);

const handleBlur = React.useCallback((_event: React.FocusEvent<FieldElement>) => undefined, []);

const validateValues = React.useCallback(() => {
    const nextErrors = validate(values);
    setErrors(nextErrors);
    return nextErrors;
  }, [validate, values]);

const submitForm = React.useCallback(() => {
    const nextErrors = validateValues();
    const isValid = Object.keys(nextErrors).length === 0;
    if (isValid) onSubmit(values);
    return isValid;
  }, [onSubmit, validateValues, values]);

return (
    <form
      className={className}
      onSubmit={(event) => {
        event.preventDefault();
        submitForm();
      }}
    >
      {children({ values, errors, handleChange, handleBlur, validateValues, submitForm })}
    </form>
  );
}
</article></body></html>

Form

Installation

Component