input

1import type * as React from "react";
2import { Pane } from "@/components/ui/pane";
3import { cn } from "@/lib/utils";
4 
5function Input({ className, type, ...props }: React.ComponentProps<"input">) {
6  return (
7    <Pane
8      variant="clear"
9      radius={14}
10      className="h-10 w-full focus-within:ring-2 focus-within:ring-[var(--pane-highlight)] focus-within:ring-offset-0 has-[:disabled]:opacity-50"
11    >
12      <input
13        type={type}
14        data-slot="input"
15        className={cn(
16          "flex h-10 w-full min-w-0 bg-transparent px-3.5 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
17          "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
18          className,
19        )}
20        {...props}
21      />
22    </Pane>
23  );
24}
25 
26export { Input };