Collapsible

1import { Collapsible, CollapsibleTrigger, CollapsibleContent, CollapsibleIndicator } from "@/components/ui/collapsible";
2
3<Collapsible />

1"use client";
2
3import {
4  Collapsible as ArkCollapsible,
5  useCollapsibleContext,
6} from "@ark-ui/react/collapsible";
7import { ChevronDownIcon } from "lucide-react";
8import type React from "react";
9import { cn } from "@/lib/utils";
10
11export const useCollapsible = useCollapsibleContext;
12
13export const Collapsible = (
14  props: React.ComponentProps<typeof ArkCollapsible.Root>
15) => {
16  const {
17    collapsedHeight,
18    lazyMount = true,
19    unmountOnExit = true,
20    className,
21    ...rest
22  } = props;
23
24  return (
25    <ArkCollapsible.Root
26      className={cn("group/collapsible", className)}
27      collapsedHeight={collapsedHeight}
28      data-partial-collapse={collapsedHeight ? "" : undefined}