Dashboard/ui/components/InputOtp/InputOtp.tsx

"use client";
/*
 * Documentation:
 * Input OTP — https://app.subframe.com/f023064a5ca0/library?component=Input+OTP_1a223fbe-dca0-4e44-a383-44bbc7db975d
 */

import React from "react";
import * as SubframeUtils from "../../utils";

export interface InputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "placeholder"> {
  placeholder?: React.ReactNode;
  className?: string;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
  { placeholder, className, ...otherProps }: InputProps,
  ref
) {
  return (
    <input
      className={SubframeUtils.twClassNames(
        "h-full w-full text-body-large-0 font-body-large-0 text-text-neutral-primary outline-none placeholder:text-text-neutral-subtle text-center",
        className
      )}
      placeholder={placeholder as string}
      value=""
      ref={ref}
      type="text"
      {...otherProps}
    />
  );
});

export interface OtpInputItemProps
  extends React.HTMLAttributes<HTMLDivElement> {
  success?: boolean;
  error?: boolean;
  disabled?: boolean;
  children?: React.ReactNode;
  className?: string;
}

const OtpInputItem = React.forwardRef<HTMLDivElement, OtpInputItemProps>(
  function OtpInputItem(
    {
      success = false,
      error = false,
      disabled = false,
      children,
      className,
      ...otherProps
    }: OtpInputItemProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/7a2f2337 flex h-14 w-12 cursor-pointer items-center justify-center gap-2 rounded-md border border-solid border-border-default bg-surface-neutral-primary px-2 py-2 hover:border hover:border-solid hover:border-border-strong focus-within:shadow-focus",
          {
            "border-none bg-surface-neutral-disabled hover:border-none focus-within:shadow-none":
              disabled,
            "border border-solid border-border-negative-solid hover:border hover:border-solid hover:border-border-negative-solid":
              error,
            "border-none bg-surface-feedback-subtle-positive hover:border-none":
              success,
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {children ? (
          <div className="flex grow shrink-0 basis-0 items-center justify-center self-stretch">
            {children}
          </div>
        ) : null}
      </div>
    );
  }
);

export interface InputOtpRootProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  state?: "default" | "error" | "disabled";
  title?: React.ReactNode;
  helperText?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

const InputOtpRoot = React.forwardRef<HTMLDivElement, InputOtpRootProps>(
  function InputOtpRoot(
    {
      state = "default",
      title,
      helperText,
      children,
      className,
      ...otherProps
    }: InputOtpRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/1a223fbe flex flex-col items-center gap-4",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {title ? (
          <span className="text-body-large-0 font-body-large-0 text-text-neutral-primary">
            {title}
          </span>
        ) : null}
        {children ? (
          <div className="flex items-center gap-2">{children}</div>
        ) : null}
        {helperText ? (
          <span
            className={SubframeUtils.twClassNames(
              "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary",
              { "text-text-feedback-negative": state === "error" }
            )}
          >
            {helperText}
          </span>
        ) : null}
      </div>
    );
  }
);

export const InputOtp = Object.assign(InputOtpRoot, {
  Input,
  OtpInputItem,
});