Collapsible

1import { Collapsible as KobalteCollapsible } from "@kobalte/core/collapsible";
2import type { Component, ComponentProps } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6const Collapsible = KobalteCollapsible;
7const CollapsibleTrigger = KobalteCollapsible.Trigger;
8 
9const CollapsibleContent: Component<ComponentProps<typeof KobalteCollapsible.Content>> = (
10  props,
11) => {
12  const [local, rest] = splitProps(props, ["class"]);
13  return (
14    <KobalteCollapsible.Content
15      class={cn(
16        "overflow-hidden transition-all",
17        "data-[expanded]:animate-collapsible-down data-[closed]:animate-collapsible-up",
18        local.class,
19      )}
20      {...rest}
21    />
22  );
23};
24 
25export { Collapsible, CollapsibleTrigger, CollapsibleContent };