ui-kit/src/components/input.tsx

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../lib/cn";

const inputVariants = cva(
  "flex w-full rounded border border-border bg-bg/40 text-text placeholder:text-muted " +
    "transition-shadow duration-base ease-out focus-visible:outline-none focus-visible:ring-2 " +
    "focus-visible:ring-ring/60 focus-visible:border-brand/60 disabled:cursor-not-allowed disabled:opacity-50",
  {
    variants: { size: { sm: "h-8 px-2.5 py-1 text-sm", md: "h-10 px-3 py-2 text-sm" } },
    defaultVariants: { size: "md" },
  }
);

export interface InputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
    VariantProps<typeof inputVariants> {}

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, size, type, ...props }, ref) => (
    <input type={type} ref={ref} className={cn(inputVariants({ size }), className)} {...props} />
  )
);
Input.displayName = "Input";
export { inputVariants };