Input Group

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import type * as React from "react";
5 
6import { type HoverEffect, hoverEffects } from "@/lib/hover-effects";
7import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
8import { cn } from "@/lib/utils";
9import { Button } from "./button";
10import { Input } from "./input";
11import { Textarea } from "./textarea";
12 
13interface InputGroupProps extends React.ComponentProps<"div">, MaterialAxisProps {
14  variant?: "default" | "glass";
15  /** Hover effect (folded from the glass wrapper). */
16  effect?: HoverEffect;
17}
18 
19/* Role: bordered adaptive glass. */
20const ROLE = {
21  border: true,
22};
23 
24function InputGroup({ className, variant = "glass", effect, ...props }: InputGroupProps) {
25  const [axes, rest] = splitAxisProps(props);
26  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
27  const getVariantClass = () => (variant === "default" ? "border border-input shadow-xs dark:bg-input/30" : "");
28 
29  const m = materialSurface(variant === "default" ? null : ROLE, axes);
30 
31  return (
32    <div
33      data-slot="input-group"
34      role="group"
35      data-material={m?.["data-material"]}
36      className={cn(
37        m?.className,
38        "group/input-group relative flex w-full items-center rounded-md transition-[color,box-shadow] outline-none",
39        "h-9 min-w-0 has-[>textarea]:h-auto",
40        // Variants based on alignment.
41        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
42        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
43        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
44        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
45        // Focus state.
46        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
47        // Error state.
48        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
49        getVariantClass(),
50        effect &&
51          hoverEffects({
52            hover: effect,
53          }),
54        className,
55      )}
56      {...rest}
57    />
58  );
59}
60 
61const inputGroupAddonVariants = cva(
62// … truncated