input-group

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = HTMLAttributes<"div">
7 
8const { class: className, ...props } = Astro.props
9---
10 
11<div
12  data-slot="input-group"
13  role="group"
14  class={cn(
15    "group/input-group border-input has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-9 w-full min-w-0 items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-1.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-1.5 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
16    className
17  )}
18  {...props}
19>
20  <slot />
21</div>
22 
23<script>
24  if (!document.documentElement.dataset.inputGroupBound) {
25    document.documentElement.dataset.inputGroupBound = "true"
26 
27    document.addEventListener("click", (event) => {
28      const target = event.target
29 
30      if (!(target instanceof Element)) return
31 
32      const addon = target.closest('[data-slot="input-group-addon"]')
33      if (!(addon instanceof HTMLElement)) return
34 
35      if (
36        target.closest(
37          "a, button, input, textarea, select, option, summary, [role='button']"
38        )
39      ) {
40        return
41      }
42 
43      const group = addon.closest('[data-slot="input-group"]')
44      const control = group?.querySelector('[data-slot="input-group-control"]')
45 
46      if (control instanceof HTMLElement) {
47        control.focus()
48      }
49    })
50  }
51</script>