accordion

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { JSX, ValidComponent } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import * as AccordionPrimitive from "@kobalte/core/accordion";
6
import ChevronDownIcon from "lucide-solid/icons/chevron-down";
7

8
import { cn } from "~/lib/utils";
9

10
const Accordion = <T extends ValidComponent = "div">(
11
  props: PolymorphicProps<T, AccordionPrimitive.AccordionRootProps<T>>,
12
) => {
13
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
14
};
15

16
type AccordionItemProps<T extends ValidComponent = "div"> =
17
  AccordionPrimitive.AccordionItemProps<T> & {
18
    class?: string | undefined;
19
  };
20

21
const AccordionItem = <T extends ValidComponent = "div">(
22
  props: PolymorphicProps<T, AccordionItemProps<T>>,
23
) => {
24
  const [local, others] = splitProps(props as AccordionItemProps, ["class"]);
25
  return (
26
    <AccordionPrimitive.Item
27
      data-slot="accordion-item"
28
      class={cn(
29
        "overflow-hidden rounded-base border-2 border-b border-border shadow-shadow",
30
        local.class,
31
      )}
32
      {...others}
33
    />
34
  );
35
};
36

37
type AccordionTriggerProps<T extends ValidComponent = "button"> =
38
  AccordionPrimitive.AccordionTriggerProps<T> & {
39
    class?: string | undefined;
40
    children?: JSX.Element;
41
  };
42

43
const AccordionTrigger = <T extends ValidComponent = "button">(
44
  props: PolymorphicProps<T, AccordionTriggerProps<T>>,
45
) => {
46
  const [local, others] = splitProps(props as AccordionTriggerProps, [
47
    "class",
48
    "children",
49
  ]);
50
  return (
51
    <AccordionPrimitive.Header data-slot="accordion-header" class="flex">
52
      <AccordionPrimitive.Trigger
53
        data-slot="accordion-trigger"
54
        class={cn(
55
          "ui flex flex-1 items-center justify-between border-border bg-primary p-4 text-left text-base font-heading text-primary-foreground transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 ui-expanded:rounded-b-none ui-expanded:border-b-2 ui-expanded:[&_svg]:rotate-180",
56
          local.class,
57
        )}
58
        {...others}
59
      >
60
        {local.children}
61
        <ChevronDownIcon class="pointer-events-none size-5 shrink-0 transition-transform duration-200" />
62
      </AccordionPrimitive.Trigger>
63
    </AccordionPrimitive.Header>
64
  );
65
};
66

67
type AccordionContentProps<T extends ValidComponent = "div"> =
68
  AccordionPrimitive.AccordionContentProps<T> & {
69
    class?: string | undefined;
70
    children?: JSX.Element;
71
  };
72

73
const AccordionContent = <T extends ValidComponent = "div">(
74
  props: PolymorphicProps<T, AccordionContentProps<T>>,
75
) => {
76
  const [local, others] = splitProps(props as AccordionContentProps, [
77
    "class",
78
    "children",
79
  ]);
80
  return (
81
    <AccordionPrimitive.Content
82
      data-slot="accordion-content"
83
      class={cn(
84
        "overflow-hidden rounded-b-base bg-secondary-background text-sm font-base transition-all ui-expanded:animate-accordion-down ui-closed:animate-accordion-up",
85
        local.class,
86
      )}
87
      {...others}
88
    >
89
      <div class="p-4">{local.children}</div>
90
    </AccordionPrimitive.Content>
91
  );
92
};
93

94
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };