Collapsible

import { cn as merge } from 'cn';
import type { VariantProps } from 'cva';
import { defineConfig } from 'cva/config';
import { getSchema } from 'cva/tools';

export const { cva, cx: cn } = defineConfig({
  cx: merge,
});

export type { VariantProps };
export { getSchema };

'use client';

import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';

/**
 * Groups all parts of the collapsible.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Collapsible](https://caprice-ui.com/docs/components/collapsible)
 *
 * API Reference: [Base UI Collapsible](https://base-ui.com/react/components/collapsible#root)
 */
export namespace Root {
  export type State = CollapsiblePrimitive.Root.State;
  export type Props = React.ComponentProps<typeof CollapsiblePrimitive.Root>;
  export type ChangeEventDetails = CollapsiblePrimitive.Root.ChangeEventDetails;
  export type ChangeEventReason = CollapsiblePrimitive.Root.ChangeEventReason;
}

export function Root({ ...props }: Root.Props) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}

/**
 * A button that opens and closes the collapsible panel.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Collapsible](https://caprice-ui.com/docs/components/collapsible)
 *
 * API Reference: [Base UI Collapsible](https://base-ui.com/react/components/collapsible#trigger)
 */
export namespace Trigger {
  export type Props = React.ComponentProps<typeof CollapsiblePrimitive.Trigger>;
}

export function Trigger({ ...props }: Trigger.Props) {
  return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;
}

/**
 * A panel with the collapsible contents.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Collapsible](https://caprice-ui.com/docs/components/collapsible)
 *
 * API Reference: [Base UI Collapsible](https://base-ui.com/react/components/collapsible#panel)
 */
export namespace Panel {
  export type State = CollapsiblePrimitive.Panel.State;
  export type Props = React.ComponentProps<typeof CollapsiblePrimitive.Panel>;
}

export function Panel({ ...props }: Panel.Props) {
  return <CollapsiblePrimitive.Panel data-slot="collapsible-panel" {...props} />;
}