Accordion

1import type { JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import * as AccordionPrimitive from "@kobalte/core/accordion"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8 
9const Accordion = AccordionPrimitive.Root
10 
11type AccordionItemProps<T extends ValidComponent = "div"> =
12  AccordionPrimitive.AccordionItemProps<T> & {
13    class?: string | undefined
14  }
15 
16const AccordionItem = <T extends ValidComponent = "div">(
17  props: PolymorphicProps<T, AccordionItemProps<T>>
18) => {
19  const [local, others] = splitProps(props as AccordionItemProps, ["class"])
20  return <AccordionPrimitive.Item class={cn("border-b", local.class)} {...others} />
21}
22 
23type AccordionTriggerProps<T extends ValidComponent = "button"> =
24  AccordionPrimitive.AccordionTriggerProps<T> & {
25    class?: string | undefined
26    children?: JSX.Element
27  }
28 
29const AccordionTrigger = <T extends ValidComponent = "button">(
30  props: PolymorphicProps<T, AccordionTriggerProps<T>>
31) => {
32  const [local, others] = splitProps(props as AccordionTriggerProps, ["class", "children"])
33  return (
34    <AccordionPrimitive.Header class="flex">
35      <AccordionPrimitive.Trigger
36        class={cn(
37          "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-expanded]>svg]:rotate-180",
38          local.class
39        )}
40        {...others}
41      >
42        {local.children}
43        <svg
44          xmlns="http://www.w3.org/2000/svg"
45          viewBox="0 0 24 24"
46          fill="none"
47          stroke="currentColor"
48          stroke-width="2"
49          stroke-linecap="round"
50          stroke-linejoin="round"
51          class="size-4 shrink-0 transition-transform duration-200"
52        >
53          <path d="M6 9l6 6l6 -6" />
54        </svg>
55      </AccordionPrimitive.Trigger>
56    </AccordionPrimitive.Header>
57  )
58}
59 
60type AccordionContentProps<T extends ValidComponent = "div"> =
61  AccordionPrimitive.AccordionContentProps<T> & {
62    class?: string | undefined
63    children?: JSX.Element
64  }
65 
66const AccordionContent = <T extends ValidComponent = "div">(
67  props: PolymorphicProps<T, AccordionContentProps<T>>
68) => {
69  const [local, others] = splitProps(props as AccordionContentProps, ["class", "children"])
70  return (
71    <AccordionPrimitive.Content
72      class={cn(
73        "animate-accordion-up overflow-hidden text-sm transition-all data-[expanded]:animate-accordion-down",
74        local.class
75      )}
76      {...others}
77// … truncated