Input

1"use client";
2 
3import "./input.css";
4import { Input as BaseInput } from "@base-ui/react/input";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { InputContext } from "./input.context";
9import { inputVariants, type InputVariants } from "./input.variants";
10 
11export type InputProps = InputVariants & Omit<React.ComponentPropsWithoutRef<"input">, "size">;
12 
13export const InputRoot = ({ className, size, variant, ...props }: InputProps) => {
14  const slots = inputVariants({ size, variant });
15 
16  return (
17    <InputContext.Provider value={{ slots }}>
18      <BaseInput className={cn(slots.root(), className)} {...props} />
19    </InputContext.Provider>
20  );
21};
22 
23export const Input = InputRoot;