Input Group

1import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText } from "@/components/ui/input-group";
2
3<InputGroup />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type React from "react";
5import { tv, type VariantProps } from "tailwind-variants";
6import { cn } from "@/lib/utils";
7import { Button } from "@/registry/react/components/button";
8import { Input } from "@/registry/react/components/input";
9import { Textarea } from "@/registry/react/components/textarea";
10
11const inpuGroupVariants = tv({
12  base: [
13    "group/input-group",
14    "relative",
15    "w-full min-w-0",
16    "flex items-center",
17    "bg-background dark:bg-input/30",
18    "rounded-lg border border-input shadow-xs/5",
19    "transition-[color,box-shadow]",
20    "has-[>textarea]:h-auto",
21    "has-[>[data-align=inline-start]]:[&>input]:ps-2",
22    "has-[>[data-align=inline-end]]:[&>input]:pe-2",
23    "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
24    "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
25    "outline-none focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring/32",
26    "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/24",
27    "dark:has-[[data-slot][aria-invalid=true]]:border-destructive-foreground dark:has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/40",
28    "motion-reduce:transition-none!",