Input

1import type { Component, ComponentProps } from "solid-js";
2import { splitProps } from "solid-js";
3import { cn } from "~/lib/utils";
4 
5export type InputProps = ComponentProps<"input"> & {
6  class?: string;
7};
8 
9export const Input: Component<InputProps> = (props) => {
10  const [local, rest] = splitProps(props, ["class", "type"]);
11  return (
12    <input
13      type={local.type ?? "text"}
14      class={cn(
15        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
16        "ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium",
17        "placeholder:text-muted-foreground",
18        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
19        "disabled:cursor-not-allowed disabled:opacity-50",
20        local.class,
21      )}
22      {...rest}
23    />
24  );
25};