Dashboard/ui/components/NumberInput/NumberInput.tsx

"use client";
/*
 * Documentation:
 * Number Input — https://app.subframe.com/f023064a5ca0/library?component=Number+Input_06ebc0c5-994e-4eac-b855-f3c6d7f1bbbf
 */

import React from "react";
import { FeatherChevronDown } from "@subframe/core";
import { FeatherChevronUp } from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
  down?: boolean;
  disabled?: boolean;
  className?: string;
}

const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(function Stepper(
  { down = false, disabled = false, className, ...otherProps }: StepperProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/de954ebd flex h-full w-9 cursor-pointer items-center justify-center overflow-hidden rounded-tr-md border-b border-solid border-white-0 px-3 pt-0.5 hover:bg-surface-feedback-subtle-neutral-hover active:bg-surface-feedback-subtle-neutral-active focus-within:border-b focus-within:border-x-0 focus-within:border-t-0 focus-within:border-solid focus-within:border-surface-feedback-solid-information focus-within:bg-surface-feedback-subtle-neutral-hover",
        {
          "hover:bg-transparent active:bg-transparent": disabled,
          "rounded-none pt-0 pb-0.5 focus-within:border-t focus-within:border-x-0 focus-within:border-b-0 focus-within:border-solid focus-within:border-surface-feedback-solid-information":
            down,
        },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {down ? (
        <FeatherChevronDown
          className={SubframeUtils.twClassNames(
            "text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-icon-neutral-secondary",
            { "text-icon-neutral-disabled": disabled }
          )}
        />
      ) : (
        <FeatherChevronUp
          className={SubframeUtils.twClassNames(
            "text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-icon-neutral-secondary",
            { "text-icon-neutral-disabled": disabled }
          )}
        />
      )}
    </div>
  );
});

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 px-3 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]",
        className
      )}
      placeholder={placeholder as string}
      value=""
      ref={ref}
      type="number"
      {...otherProps}
    />
  );
});

export interface NumberInputRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  disabled?: boolean;
  error?: boolean;
  variant?: "outline" | "filled";
  borderless?: boolean;
  noPadding?: boolean;
  size?: "small" | "medium" | "large";
  fillContainer?: boolean;
  showLabel?: boolean;
  label?: React.ReactNode;
  description?: React.ReactNode;
  message?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

const NumberInputRoot = React.forwardRef<HTMLDivElement, NumberInputRootProps>(
  function NumberInputRoot(
    {
      disabled = false,
      error = false,
      variant = "outline",
      borderless = false,
      noPadding = false,
      size = "medium",
      fillContainer = false,
      showLabel = false,
      label,
      description,
      message,
      children,
      className,
      ...otherProps
    }: NumberInputRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/06ebc0c5 flex h-9 w-full min-w-[192px] max-w-[192px] cursor-pointer flex-col items-start gap-4 group/numberinput",
          {
            "h-auto gap-0": showLabel,
            "min-w-[96px] max-w-none": fillContainer,
            "h-12": size === "large",
            "h-8": size === "small",
            "h-auto": noPadding,
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "hidden flex-col items-start gap-2",
            { flex: showLabel }
          )}
        >
          {label ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary",
                {
                  "text-text-feedback-negative": error,
                  "text-text-neutral-disabled": disabled,
                }
              )}
            >
              {label}
            </span>
          ) : null}
          {description ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
                {
                  "text-text-feedback-negative": error,
                  "text-text-neutral-disabled": disabled,
                }
              )}
            >
              {description}
            </span>
          ) : null}
        </div>
        <div
          className={SubframeUtils.twClassNames(
            "flex w-full grow shrink-0 basis-0 flex-col items-start gap-4",
            { "gap-1": showLabel }
          )}
        >
          <div
            className={SubframeUtils.twClassNames(
              "flex w-full grow shrink-0 basis-0 rounded-sm border border-solid border-border-strong bg-surface-neutral-primary items-stretch group-hover/06ebc0c5:bg-surface-neutral-secondary group-hover/06ebc0c5:border-brand-brand-border-solid-hover group-focus-within/06ebc0c5:bg-surface-neutral-secondary group-focus-within/06ebc0c5:shadow-focus",
              {
                "h-9 flex-none border border-solid border-border-default mt-1.5":
                  showLabel,
                "h-12 flex-none": size === "large",
                "h-8 flex-none": size === "small",
                "h-9 flex-none [&_input]:px-0": noPadding,
                "[&]:border-none group-hover/06ebc0c5:border-none group-focus-within/06ebc0c5:shadow-none group-focus-within/06ebc0c5:border-none":
                  borderless,
                "bg-surface-neutral-secondary": variant === "filled",
                "border border-solid border-border-negative-solid group-hover/06ebc0c5:border-border-negative-solid group-focus-within/06ebc0c5:shadow-none group-focus-within/06ebc0c5:border-border-negative-solid":
                  error,
                "border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/06ebc0c5:bg-surface-neutral-disabled group-hover/06ebc0c5:border-border-disabled group-focus-within/06ebc0c5:bg-surface-neutral-disabled group-focus-within/06ebc0c5:shadow-none":
                  disabled,
              }
            )}
          >
            {children ? (
              <div
                className={SubframeUtils.twClassNames(
                  "flex grow shrink-0 basis-0 flex-col items-start justify-center self-stretch",
                  { "[&_input]:px-2.5": size === "small" }
                )}
              >
                {children}
              </div>
            ) : null}
            <div className="flex w-9 flex-none flex-col self-stretch overflow-hidden rounded-r-md border-l border-solid border-border-default items-stretch justify-center">
              <Stepper className="rounded-none" />
              <div className="flex h-px w-full flex-none flex-col items-center gap-2 bg-border-default" />
              <Stepper className="rounded-none" down={true} />
            </div>
          </div>
          <div
            className={SubframeUtils.twClassNames(
              "hidden flex-col items-start gap-1",
              { flex: showLabel }
            )}
          >
            {message ? (
              <span
                className={SubframeUtils.twClassNames(
                  "hidden text-body-extra-small-regular-0 font-body-extra-small-regular-0 text-text-neutral-secondary",
                  {
                    inline: showLabel,
                    "text-text-feedback-negative": error,
                    "text-text-neutral-disabled": disabled,
                  }
                )}
              >
                {message}
              </span>
            ) : null}
          </div>
        </div>
      </div>
    );
  }
);

export const NumberInput = Object.assign(NumberInputRoot, {
  Stepper,
  Input,
});