All files / react-base/src/components/ui input-group.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ui } from "@/config/theme";
import { cn } from "@/lib/utils";
 
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="input-group"
      className={cn(ui("inputGroup"), className)}
      {...props}
    />
  );
}
 
const inputGroupAddonVariants = cva(
  "flex shrink-0 items-center justify-center text-sm text-muted-foreground [&>svg]:size-4",
  {
    variants: {
      align: {
        "inline-start": "order-first pl-3 has-[~[data-slot=input-group-control]]:pr-0",
        "inline-end": "order-last pr-3 has-[~[data-slot=input-group-control]]:pl-0",
        "block-start": "order-first w-full justify-start border-b px-3 py-2",
        "block-end": "order-last w-full justify-start border-t px-3 py-2",
      },
    },
    defaultVariants: {
      align: "inline-start",
    },
  },
);
 
function InputGroupAddon({
  className,
  align = "inline-start",
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
  return (
    <div
      role="group"
      data-slot="input-group-addon"
      data-align={align}
      className={cn(inputGroupAddonVariants({ align }), className)}
      {...props}
    />
  );
}
 
function InputGroupButton({
  className,
  type = "button",
  variant = "outline",
  size = "sm",
  ...props
}: React.ComponentProps<typeof Button>) {
  return (
    <Button
      type={type}
      data-size={size}
      variant={variant}
      size={size}
      className={cn(
        "h-8 shrink-0 rounded-none border-0 bg-transparent shadow-none hover:bg-accent",
        className,
      )}
      {...props}
    />
  );
}
 
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="input-group-text"
      className={cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:size-4", className)}
      {...props}
    />
  );
}
 
const InputGroupInput = React.forwardRef<HTMLInputElement, React.ComponentProps<typeof Input>>(
  ({ className, ...props }, ref) => (
    <Input
      ref={ref}
      data-slot="input-group-control"
      className={cn(
        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
        className,
      )}
      {...props}
    />
  ),
);
InputGroupInput.displayName = "InputGroupInput";
 
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText };