"use client"; import * as React from "react"; import { PhoneInput as BasePhoneInput } from "react-international-phone"; import "react-international-phone/style.css"; 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; } export interface PhoneInputProps extends Omit< React.ComponentProps, "inputClassName" | "inputStyle" | "onChange" | "value" > { label?: string; subtitle?: string; error?: string; name?: string; value?: string; onChange?: (value: string) => void; } export interface SelectWithInputProps extends Pick< DropdownProps, | "className" | "disabled" | "error" | "label" | "name" | "placeholder" | "required" > { options?: DropdownOption[] | Record; value?: string; onChange?: (value: string) => void; otherOptionValue?: string; } function FieldShell({ className, disabled, error, floating, focused, label, multiline, labelTargetId, children, }: React.PropsWithChildren<{ className?: string; disabled?: boolean; error?: string; floating: boolean; focused: boolean; label?: string; labelTargetId: string; multiline?: boolean; }>) { 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,
  onFocus,
  onBlur,
  onChange,
  disabled,
  ...props
}: DropdownProps) {
  const [focused, setFocused] = React.useState(false);
  const [currentValue, setCurrentValue] = React.useState(
    (value ?? defaultValue ?? "") as string,
  );
  const normalizedOptions = React.useMemo(() => {
    if (!options) return [];
    return Array.isArray(options)
      ? options
      : Object.entries(options).map(([id, title]) => ({ id, title }));
  }, [options]);
  const hasValue = Boolean(value ?? currentValue);

return (
    <FieldShell
      className={className}
      disabled={disabled}
      error={error}
      floating={true}
      focused={focused}
      label={label}
      labelTargetId={name}
    >
      <div className="relative">
        <select
          id={name}
          name={name}
          value={value}
          defaultValue={defaultValue}
          disabled={disabled}
          data-invalid={error ? "true" : "false"}
          className={cn(
            "circle-field h-[68px] appearance-none pb-[8px] pl-[16px] pr-[40px] pt-[24px]",
            hasValue ? "text-field-foreground" : "text-field-placeholder",
          )}
          onFocus={(event) => {
            setFocused(true);
            onFocus?.(event);
          }}
          onBlur={(event) => {
            setFocused(false);
            setCurrentValue(event.target.value);
            onBlur?.(event);
          }}
          onChange={(event) => {
            setCurrentValue(event.target.value);
            onChange?.(event);
          }}
          {...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-[15px] top-1/2 h-4 w-4 -translate-y-1/2 text-field-chevron" />
      </div>
    </FieldShell>
  );
}

export function PhoneInput({
  className,
  defaultCountry = "de",
  disabled,
  error,
  label,
  name = "phone",
  onChange,
  placeholder,
  subtitle,
  value,
  ...props
}: PhoneInputProps) {
  return (
    <div className={cn("flex w-full flex-col gap-2", className)}>
      {label ? (
        <div className="space-y-0.5">
          <label
            className="block text-sm font-medium leading-6 text-foreground"
            htmlFor={name}
          >
            {label}
          </label>
          {subtitle ? (
            <p className="text-sm leading-5 text-muted-foreground">{subtitle}</p>
          ) : null}
        </div>
      ) : null}
      <BasePhoneInput
        countrySelectorStyleProps={{ style: { height: "68px" } }}
        defaultCountry={defaultCountry}
        disableDialCodeAndPrefix
        disabled={disabled}
        inputClassName={cn(error ? "circle-phone-error" : undefined)}
        inputStyle={{
          background: "var(--field-background)",
          border: `1px solid ${error ? "var(--destructive)" : "var(--field-border)"}`,
          borderRadius: "var(--radius-field)",
          color: "var(--field-foreground)",
          fontSize: "16px",
          lineHeight: "24px",
          minHeight: "68px",
          padding: "20px 16px",
          width: "100%",
        }}
        name={name}
        onChange={(nextValue: string) => onChange?.(nextValue)}
        placeholder={placeholder}
        showDisabledDialCodeAndPrefix
        value={value}
        {...props}
      />
      {error ? (
        <p className="text-[12px] font-medium leading-4 text-destructive">
          {error}
        </p>
      ) : null}
    </div>
  );
}

export function SelectWithInput({
  label,
  onChange,
  options,
  otherOptionValue = "other",
  placeholder,
  value,
  ...props
}: SelectWithInputProps) {
  const [showInput, setShowInput] = React.useState(false);

React.useEffect(() => {
    if (!value) {
      setShowInput(false);
      return;
    }

if (Array.isArray(options)) {
      setShowInput(!options.some((option) => option.id === value));
      return;
    }

setShowInput(!(value in (options ?? {})));
  }, [options, value]);

if (showInput) {
    return (
      <TextBox
        className={props.className}
        disabled={props.disabled}
        error={props.error}
        label={label}
        name={props.name}
        onChange={(event) => onChange?.(event.target.value)}
        placeholder={placeholder}
        required={props.required}
        value={value}
      />
    );
  }

return (
    <Dropdown
      className={props.className}
      disabled={props.disabled}
      error={props.error}
      label={label}
      name={props.name}
      onChange={(event) => {
        const nextValue = event.target.value;
        if (nextValue === otherOptionValue) {
          onChange?.("");
          setShowInput(true);
          return;
        }
        onChange?.(nextValue);
      }}
      options={options}
      placeholder={placeholder}
      required={props.required}
      value={value}
    />
  );
}

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 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>

Installation

About

Usage

Dependencies

Source