3e:T2271,

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"

const Demo = () => (
  <div className="grid w-full max-w-480 gap-12">
    <InputGroup>
      <InputGroupAddon>
        <InputGroupText>https://</InputGroupText>
      </InputGroupAddon>
      <InputGroupInput placeholder="example.com" />
      <InputGroupAddon align="inline-end">
        <InputGroupButton>Copy</InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
    <InputGroup>
      <InputGroupTextarea placeholder="Ask anything" />
      <InputGroupAddon align="block-end">
        <InputGroupText>0 / 500</InputGroupText>
        <InputGroupButton className="ml-auto" variant="primary">
          Send
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </div>
)

export default Demo

3b:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3e"}}],"$L3f"]}] 40:T70c6,

"use client"

import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

const InputGroup = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="input-group"
    role="group"
    className={cn(
      "group/input-group relative flex h-48 w-full min-w-0 items-center rounded-16 bg-glass-background-control shadow-glass-control backdrop-glass-thin outline-none ring-inset has-focus-visible:ring-2 has-focus-visible:ring-text-primary has-disabled:bg-background-disabled has-aria-invalid:ring-2 has-aria-invalid:ring-border-negative has-[>textarea]:h-auto has-[>textarea]:flex-wrap",
      className
    )}
    {...props}
  />
)

const inputGroupAddonVariants = cva(
  "flex cursor-text items-center justify-center gap-8 text-compact text-text-tertiary select-none [&_svg]:size-16",
  {
    variants: {
      align: {
        "inline-start": "order-first pl-16",
        "inline-end": "order-last pr-16",
        "block-start": "order-first w-full justify-start px-16 pt-12",
        "block-end": "order-last w-full justify-start px-16 pb-12",
      },
    },
    defaultVariants: { align: "inline-start" },
  }
)

const InputGroupAddon = ({
  className,
  align = "inline-start",
  ...props
}: React.ComponentProps<"div"> &
  VariantProps<typeof inputGroupAddonVariants>) => (
  <div
    role="group"
    data-slot="input-group-addon"
    data-align={align}
    className={cn(inputGroupAddonVariants({ align }), className)}
    onClick={(e) => {
      if ((e.target as HTMLElement).closest("button")) return
      e.currentTarget.parentElement?.querySelector("input")?.focus()
    }}
    {...props}
  />
)

const InputGroupButton = ({
  className,
  type = "button",
  variant = "ghost",
  size = "sm",
  ...props
}: Omit<React.ComponentProps<typeof Button>, "type"> & {
  type?: "button" | "submit" | "reset"
}) => (
  <Button
    type={type}
    variant={variant}
    size={size}
    className={cn("h-32 px-8", className)}
    {...props}
  />
)

const InputGroupText = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    className={cn(
      "flex items-center gap-4 [&_svg]:pointer-events-none",
      className
    )}
    {...props}
  />
)

const controlClass =
  "h-auto flex-1 rounded-none bg-transparent shadow-none backdrop-filter-none focus:ring-0 disabled:bg-transparent aria-invalid:ring-0 group-has-[>[data-align=inline-start]]/input-group:pl-8 group-has-[>[data-align=inline-end]]/input-group:pr-8"

const InputGroupInput = ({
  className,
  ...props
}: React.ComponentProps<typeof Input>) => (
  <Input
    data-slot="input-group-control"
    className={cn(controlClass, className)}
    {...props}
  />
)

const InputGroupTextarea = ({
  className,
  ...props
}: React.ComponentProps<typeof Textarea>) => (
  <Textarea
    data-slot="input-group-control"
    className={cn(controlClass, "min-h-80 w-full resize-none", className)}
    {...props}
  />
)

export {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
}

3d:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$40"}}],"$L41"]}]

Installation

Usage