Input

import * as React from "react";import { cn } from "@/lib/utils";interface InputProps extends React.ComponentProps<"input"> {  /** The type of input */  type?: React.HTMLInputTypeAttribute;  /** The placeholder text */  placeholder?: string;  /** Whether the input is disabled */  disabled?: boolean;  /** The heading text */  heading?: string;  /** The description text */  description?: string;  /** The class name for the input */  inputClassName?: string;}const Input = React.forwardRef<HTMLInputElement, InputProps>(  (    { className, type, heading, description, inputClassName, ...props },    ref,  ) => {    return (      <div className={cn("flex w-full min-w-0 flex-col gap-1", className)}>        {heading && (          <span className="text-input-heading text-sm font-medium leading-none my-0">            {heading}          </span>        )}        {description && (          <span className="text-input-description text-xs my-0">            {description}          </span>        )}        <input          type={type}          ref={ref}          data-slot="input"          className={cn(            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",            "focus-visible:ring-ring/50 focus-visible:ring-[3px]",            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",            inputClassName,          )}          {...props}        />      </div>    );  },);Input.displayName = "Input";export { Input };