Input

1"use client";
2 
3import { CircleXFilledIcon } from "blode-icons-react";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
9  clearable?: boolean;
10  clearClassName?: string;
11  hasError?: boolean;
12  leftAddon?: React.ReactNode | null;
13  leftControl?: React.ReactNode | null;
14  onClear?: () => void;
15  rightAddon?: React.ReactNode | null;
16  rightControl?: React.ReactNode | null;
17}
18 
19const Input = ({
20  className,
21  clearClassName,
22  hasError,
23  clearable,
24  onClear,
25  leftAddon,
26  rightAddon,
27  leftControl,
28  rightControl,
29  ref,
30  ...props
31}: InputProps & { ref?: React.Ref<HTMLInputElement> }) => (
32  <label
33    className={cn("relative w-full", {
34      "input-group": !!leftAddon || !!rightAddon,
35    })}
36  >
37    {leftAddon && <span className="shrink-0 cursor-pointer">{leftAddon}</span>}
38 
39    {leftControl && (
40      <div className="absolute top-0 left-0 flex h-full flex-row place-items-center items-center justify-center">
41        {leftControl}
42      </div>
43    )}
44 
45    <div className="w-full">
46      <input
47        aria-invalid={hasError || undefined}
48        className={cn(
49          "input flex h-[var(--field-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-normal font-sans text-base text-foreground leading-snug shadow-input transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
50          {
51            "border-destructive-foreground": hasError,
52            "hover:border-input! focus:border-input!": props.readOnly,
53            "pr-12": clearable && !!props.value && rightControl,
54            "pr-9": clearable && !!props.value,
55          },
56          className,
57        )}
58        ref={ref}
59        {...props}
60      />
61 
62      {clearable && !!props.value && (
63        <div className="absolute top-0 right-0 flex flex-row gap-1 pr-3">
64          <button
65            aria-label="clear input"
66            className={cn(
67              "flex h-[var(--field-height)] cursor-pointer items-center justify-center p-0! text-muted-foreground",
68              clearClassName,
69            )}
70            onClick={() => onClear?.()}
71            tabIndex={-1}
72            type="button"
73          >
74// … truncated