Shadcn Collapsible for React and Tailwind

"use client";

import {
  Collapsible as ArkCollapsible,
  useCollapsible as useArkCollapsible,
  useCollapsibleContext as useArkCollapsibleContext,
} from "@ark-ui/react/collapsible";
import { ChevronDownIcon } from "lucide-react";
import type React from "react";
import { cn } from "@/lib/utils";

export const useCollapsible = useArkCollapsible;
export const useCollapsibleContext = useArkCollapsibleContext;
export const CollapsibleContext = ArkCollapsible.Context;

const collapsibleRootClassName = "group/collapsible";

const splitCollapsedMount = (props: {
  collapsedHeight?: React.ComponentProps<
    typeof ArkCollapsible.Root
  >["collapsedHeight"];
  lazyMount?: boolean;
  unmountOnExit?: boolean;
}) => {
  const { collapsedHeight, lazyMount = true, unmountOnExit = true } = props;
  const hasCollapsedHeight =
    collapsedHeight !== undefined && collapsedHeight !== null;

  return {
    collapsedHeight,
    "data-partial-collapse": hasCollapsedHeight ? "" : undefined,
    lazyMount: hasCollapsedHeight ? false : lazyMount,
    unmountOnExit: hasCollapsedHeight ? false : unmountOnExit,
  };
};

export const Collapsible = (
  props: React.ComponentProps<typeof ArkCollapsible.Root>
) => {
  const { collapsedHeight, lazyMount, unmountOnExit, className, ...rest } =
    props;
  const mount = splitCollapsedMount({
    collapsedHeight,
    lazyMount,
    unmountOnExit,
  });

  return (
    <ArkCollapsible.Root
      className={cn(collapsibleRootClassName, className)}
      data-slot="collapsible"
      {...mount}
      {...rest}
    />
  );
};

export const CollapsibleRootProvider = (
  props: React.ComponentProps<typeof ArkCollapsible.RootProvider>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCollapsible.RootProvider
      className={cn(collapsibleRootClassName, className)}
      data-slot="collapsible"
      {...rest}
    />
  );
};

export const CollapsibleTrigger = (
  props: React.ComponentProps<typeof ArkCollapsible.Trigger>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCollapsible.Trigger
      className={cn(
        "cursor-pointer",
        "data-disabled:pointer-events-none data-disabled:opacity-64",
        "has-data-[slot=collapsible-indicator]:[button]:justify-between",
        className
      )}
      data-slot="collapsible-trigger"
      {...rest}
    />
  );
};

export const CollapsibleContent = (
  props: React.ComponentProps<typeof ArkCollapsible.Content>
) => {
  const { className, children, ...rest } = props;

  return (
    <ArkCollapsible.Content
      className={cn(
        "h-(--collapsed-height)",
        "group-data-partial-collapse/collapsible:h-full",
        "transition-[height] duration-200",
        "overflow-hidden",
        "data-[state=open]:animate-expand",
        "data-[state=closed]:animate-collapse",
        "motion-reduce:animate-none! motion-reduce:transition-none!"
      )}
      data-slot="collapsible-content"
      {...rest}
    >
      <div className={className}>{children}</div>
    </ArkCollapsible.Content>
  );
};

export const CollapsibleIndicator = (
  props: React.ComponentProps<typeof ArkCollapsible.Indicator>
) => {
  const { className, children, ...rest } = props;

  return (
    <ArkCollapsible.Indicator
      className={cn("data-[state=open]:[&_svg]:rotate-180", className)}
      data-slot="collapsible-indicator"
      {...rest}
    >
      {children ?? (
        <ChevronDownIcon
          aria-hidden="true"
          className="transition-transform duration-200 motion-reduce:transition-none!"
        />
      )}
    </ArkCollapsible.Indicator>
  );
};