accordion

1import * as AccordionPrimitive from "@kobalte/core/accordion";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import IconChevronDown from "~icons/lucide/chevron-down";
6import IconChevronUp from "~icons/lucide/chevron-up";
7import type { JSX, ValidComponent } from "solid-js";
8 
9import { splitProps } from "solid-js";
10 
11type AccordionProps<T extends ValidComponent = "div"> =
12  & AccordionPrimitive.AccordionRootProps<T>
13  & {
14    class?: string | undefined;
15  };
16 
17const Accordion = <T extends ValidComponent = "div">(
18  props: PolymorphicProps<T, AccordionProps<T>>,
19) => {
20  const [local, others] = splitProps(props as AccordionProps, ["class"]);
21  return (
22    <AccordionPrimitive.Root
23      data-slot="accordion"
24      class={cn("flex w-full flex-col", local.class)}
25      {...others}
26    />
27  );
28};
29 
30type AccordionItemProps<T extends ValidComponent = "div"> =
31  & AccordionPrimitive.AccordionItemProps<T>
32  & {
33    class?: string | undefined;
34  };
35 
36const AccordionItem = <T extends ValidComponent = "div">(
37  props: PolymorphicProps<T, AccordionItemProps<T>>,
38) => {
39  const [local, others] = splitProps(props as AccordionItemProps, ["class"]);
40  return (
41    <AccordionPrimitive.Item
42      data-slot="accordion-item"
43      class={cn("not-last:border-b", local.class)}
44      {...others}
45    />
46  );
47};
48 
49type AccordionTriggerProps<T extends ValidComponent = "button"> =
50  & AccordionPrimitive.AccordionTriggerProps<T>
51  & {
52    class?: string | undefined;
53    children?: JSX.Element;
54  };
55 
56const AccordionTrigger = <T extends ValidComponent = "button">(
57  props: PolymorphicProps<T, AccordionTriggerProps<T>>,
58) => {
59  const [local, others] = splitProps(props as AccordionTriggerProps, [
60    "class",
61    "children",
62  ]);
63  return (
64    <AccordionPrimitive.Header class="flex">
65      <AccordionPrimitive.Trigger
66        data-slot="accordion-trigger"
67        class={cn(
68          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent outline-none transition-all disabled:pointer-events-none disabled:opacity-50",
69          local.class,
70        )}
71        {...others}
72      >
73// … truncated