registry/ui/input.tsx
import type { FC, JSX } from "hono/jsx";
import { cn } from "@/lib/utils";
const inputVariants = {
variant: {
default: "border-input border bg-card",
ghost:
"border border-transparent bg-transparent shadow-none hover:bg-secondary focus-visible:bg-background focus-visible:border-ring",
},
size: {
default: "h-9",
sm: "h-8",
},
};
type InputProps = Omit<JSX.IntrinsicElements["input"], "size"> & {
variant?: keyof typeof inputVariants.variant;
size?: keyof typeof inputVariants.size;
};
export const Input: FC<InputProps> = ({
type,
variant = "default",
size = "default",
class: className,
...props
}) => {
const isDateInput = type === "date";
return (
<input
type={type}
data-slot="input"
class={cn(
"file:text-foreground placeholder:text-foreground-soft selection:bg-primary selection:text-primary-foreground",
"flex w-full min-w-0 rounded-lg px-3 py-1 text-base",
"transition-[color,box-shadow,background-color] outline-none",
"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
"[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
"md:text-sm",
inputVariants.variant[variant],
inputVariants.size[size],
isDateInput &&
"relative pr-10 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-3 [&::-webkit-calendar-picker-indicator]:m-0 [&::-webkit-calendar-picker-indicator]:h-4 [&::-webkit-calendar-picker-indicator]:w-4 [&::-webkit-calendar-picker-indicator]:cursor-pointer",
className,
)}
{...props}
/>
);
};
Installation
1
Initialize your project
First time only. Sets up config and installs base dependencies.
npx @kiwa-ui/cli init2
Add the component
This will install the component and any dependencies it needs.
npx @kiwa-ui/cli add input1
Add the source file
Add this file to your project.
registry/ui/input.tsx
import type { FC, JSX } from "hono/jsx";
import { cn } from "@/lib/utils";
const inputVariants = {
variant: {
default: "border-input border bg-card",
ghost:
"border border-transparent bg-transparent shadow-none hover:bg-secondary focus-visible:bg-background focus-visible:border-ring",
},
size: {
default: "h-9",
sm: "h-8",
},
};
type InputProps = Omit<JSX.IntrinsicElements["input"], "size"> & {
variant?: keyof typeof inputVariants.variant;
size?: keyof typeof inputVariants.size;
};
export const Input: FC<InputProps> = ({
type,
variant = "default",
size = "default",
class: className,
...props
}) => {
const isDateInput = type === "date";
return (
<input
type={type}
data-slot="input"
class={cn(
"file:text-foreground placeholder:text-foreground-soft selection:bg-primary selection:text-primary-foreground",
"flex w-full min-w-0 rounded-lg px-3 py-1 text-base",
"transition-[color,box-shadow,background-color] outline-none",
"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
"[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
"md:text-sm",
inputVariants.variant[variant],
inputVariants.size[size],
isDateInput &&
"relative pr-10 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-3 [&::-webkit-calendar-picker-indicator]:m-0 [&::-webkit-calendar-picker-indicator]:h-4 [&::-webkit-calendar-picker-indicator]:w-4 [&::-webkit-calendar-picker-indicator]:cursor-pointer",
className,
)}
{...props}
/>
);
};
Usage
import { Input } from '@/components/ui/input'
<Input type='email' placeholder='you@example.com' />