accordion

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = HTMLAttributes<"div"> & {
7  multiple?: boolean
8  defaultValue?: string | string[]
9  disabled?: boolean
10  orientation?: "horizontal" | "vertical"
11  loopFocus?: boolean
12  hiddenUntilFound?: boolean
13  collapsible?: boolean
14}
15 
16const {
17  class: className,
18  multiple,
19  defaultValue,
20  disabled,
21  orientation = "vertical",
22  loopFocus,
23  hiddenUntilFound,
24  collapsible,
25  ...props
26} = Astro.props
27 
28const serializedDefaultValue = Array.isArray(defaultValue)
29  ? JSON.stringify(defaultValue)
30  : defaultValue
31---
32 
33<div
34  data-slot="accordion"
35  data-multiple={multiple}
36  data-default-value={serializedDefaultValue}
37  data-disabled={disabled}
38  data-orientation={orientation}
39  data-loop-focus={loopFocus}
40  data-hidden-until-found={hiddenUntilFound}
41  data-collapsible={collapsible}
42  class={cn("flex w-full flex-col", className)}
43  {...props}
44>
45  <slot />
46</div>
47 
48<script>
49  import { create } from "@data-slot/accordion"
50 
51  create()
52</script>