select

1---
2import type { HTMLAttributes } from "astro/types"
3import type { Align, Position, Side } from "@data-slot/select"
4 
5import { cn } from "@/lib/utils"
6 
7type Props = HTMLAttributes<"div"> & {
8  defaultValue?: string
9  placeholder?: string
10  disabled?: boolean
11  required?: boolean
12  name?: string
13  position?: Position
14  side?: Side
15  align?: Align
16  sideOffset?: number
17  alignOffset?: number
18  avoidCollisions?: boolean
19  collisionPadding?: number
20  highlightItemOnHover?: boolean
21}
22 
23const {
24  class: className,
25  defaultValue,
26  placeholder,
27  disabled,
28  required,
29  name,
30  position,
31  side,
32  align,
33  sideOffset,
34  alignOffset,
35  avoidCollisions,
36  collisionPadding,
37  highlightItemOnHover,
38  ...props
39} = Astro.props
40---
41 
42<div
43  data-slot="select"
44  data-default-value={defaultValue}
45  data-placeholder={placeholder}
46  data-disabled={disabled}
47  data-required={required}
48  data-name={name}
49  data-position={position}
50  data-side={side}
51  data-align={align}
52  data-side-offset={sideOffset}
53  data-align-offset={alignOffset}
54  data-avoid-collisions={avoidCollisions}
55  data-collision-padding={collisionPadding}
56  data-highlight-item-on-hover={highlightItemOnHover}
57  class={cn(
58    "group/select relative inline-flex w-fit flex-col gap-1.5",
59    className
60  )}
61  {...props}
62>
63  <slot />
64</div>
65 
66<script>
67  import { create } from "@data-slot/select"
68 
69  const initSelect = () => {
70    create()
71  }
72 
73  initSelect()
74 
75  document.addEventListener("astro:page-load", initSelect)
76</script>