input

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import "./input.css"
6 
7/* ------------------------------------------------------------------ */
8/*  CVA                                                                */
9/* ------------------------------------------------------------------ */
10 
11const inputVariants = cva(
12  "input-base flex items-center overflow-hidden w-full",
13  {
14    variants: {
15      variant: {
16        default: "",
17        destructive: "input-destructive",
18      },
19      size: {
20        sm: "h-[var(--layout-size-lg)] gap-[var(--layout-gap-sm)] px-[var(--layout-padding-md)] rounded-[var(--layout-radius-lg)] text-content-note [&_svg]:h-[var(--layout-size-xs)] [&_svg]:w-[var(--layout-size-xs)]",
21        md: "h-[var(--layout-size-xl)] gap-[var(--layout-gap-sm)] px-[var(--layout-padding-md)] rounded-[var(--layout-radius-lg)] text-content-note [&_svg]:h-[var(--layout-size-xs)] [&_svg]:w-[var(--layout-size-xs)]",
22        lg: "h-[var(--layout-size-2xl)] gap-[var(--layout-gap-md)] px-[var(--layout-padding-lg)] rounded-[var(--layout-radius-xl)] text-content-body [&_svg]:h-[var(--layout-size-sm)] [&_svg]:w-[var(--layout-size-sm)]",
23      },
24    },
25    defaultVariants: {
26      variant: "default",
27      size: "md",
28    },
29  }
30)
31 
32const inputHintVariants = cva("input-hint text-content-note", {
33  variants: {
34    variant: {
35      default: "",
36      destructive: "input-hint-destructive",
37    },
38  },
39  defaultVariants: {
40    variant: "default",
41  },
42})
43 
44/* ------------------------------------------------------------------ */
45/*  Input                                                              */
46/* ------------------------------------------------------------------ */
47 
48function Input({
49  className,
50  variant,
51  size,
52  leading,
53  trailing,
54  disabled,
55  ref,
56  ...props
57}: Omit<React.ComponentProps<"input">, "size"> &
58  VariantProps<typeof inputVariants> & {
59    leading?: React.ReactNode
60    trailing?: React.ReactNode
61  }) {
62  return (
63    <div
64      data-slot="input"
65      data-disabled={disabled || undefined}
66      className={cn(inputVariants({ variant, size, className }))}
67    >
68      {leading && (
69        <span
70          data-slot="input-leading"
71          className="input-leading shrink-0 flex items-center"
72        >
73          {leading}
74        </span>
75      )}
76      <input
77        ref={ref}
78        disabled={disabled}
79// … truncated