Aurora Input Group

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5import { Input } from "./input"
6import { Textarea } from "./textarea"
7 
8type InputGroupAddonAlign = "inline-start" | "inline-end"
9 
10function InputGroup({ ref, className, style, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
11  return (
12    <div
13      ref={ref}
14      data-slot="input-group"
15      className={cn(
16        "flex min-h-9 w-full items-center overflow-hidden rounded-[8px] border",
17        "transition-[border-color,box-shadow] duration-150 ease-out",
18        "focus-within:[box-shadow:0_0_0_3px_color-mix(in_srgb,var(--aurora-accent-primary)_22%,transparent),0_0_0_1px_color-mix(in_srgb,var(--aurora-accent-primary)_45%,transparent)]",
19        className
20      )}
21      style={{
22        background: "var(--aurora-control-surface)",
23        borderColor: "var(--aurora-border-strong)",
24        ...style,
25      }}
26      {...props}
27    />
28  )
29}
30 
31function InputGroupAddon({
32  ref,
33  className,
34  style,
35  align = "inline-start",
36  ...props
37}: React.HTMLAttributes<HTMLDivElement> & {
38  align?: InputGroupAddonAlign
39  ref?: React.Ref<HTMLDivElement>
40}) {
41  return (
42    <div
43      ref={ref}
44      data-slot="input-group-addon"
45      className={cn(
46        "inline-flex h-full shrink-0 items-center px-3 aurora-text-control",
47        align === "inline-start" ? "border-r" : "border-l",
48        className
49      )}
50      style={{
51        borderColor: "var(--aurora-border-default)",
52        color: "var(--aurora-text-muted)",
53        order: align === "inline-end" ? 2 : 0,
54        ...style,
55      }}
56      {...props}
57    />
58  )
59}
60 
61function InputGroupInput({
62  className,
63  style,
64  ...props
65}: React.ComponentProps<typeof Input>) {
66  return (
67    <Input
68      unstyled
69      className={cn(
70        "h-full min-w-0 flex-1 bg-transparent px-3",
71        "font-[var(--aurora-font-sans)] text-[var(--aurora-text-primary)]",
72        "placeholder:text-[var(--aurora-text-muted)]",
73        "focus:outline-none disabled:cursor-not-allowed",
74        className
75      )}
76      style={{
77        fontSize: "var(--aurora-type-body-sm)",
78        fontWeight: "var(--aurora-weight-body)",
79        letterSpacing: "var(--aurora-letter-ui)",
80        lineHeight: "var(--aurora-line-ui)",
81        ...style,
82      }}
83      {...props}
84    />
85  )
86}
87 
88function InputGroupTextarea({
89  className,
90  style,
91  rows = 3,
92  ...props
93}: React.ComponentProps<typeof Textarea>) {
94  return (
95    <Textarea
96// … truncated