Tabs

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 };

import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
import type * as React from 'react';

/**
 * Groups the tabs and the corresponding panels.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Tabs](https://caprice-ui.com/docs/components/tabs)
 *
 * API Reference: [Base UI Tabs](https://base-ui.com/react/components/tabs#root)
 */
export namespace Root {
  export type Props = React.ComponentProps<typeof TabsPrimitive.Root>;
  export type State = TabsPrimitive.Root.State;
  export type Orientation = TabsPrimitive.Root.Orientation;
  export type ChangeEventDetails = TabsPrimitive.Root.ChangeEventDetails;
  export type ChangeEventReason = TabsPrimitive.Root.ChangeEventReason;
}

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

/**
 * Groups the individual tab buttons.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Tabs](https://caprice-ui.com/docs/components/tabs)
 *
 * API Reference: [Base UI Tabs](https://base-ui.com/react/components/tabs#list)
 */
export namespace List {
  export type State = TabsPrimitive.List.State;
  export type Props = React.ComponentProps<typeof TabsPrimitive.List>;
}

export function List({ ...props }: List.Props) {
  return <TabsPrimitive.List data-slot="tabs-list" {...props} />;
}

/**
 * An individual interactive tab button that toggles the corresponding panel.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Tabs](https://caprice-ui.com/docs/components/tabs)
 *
 * API Reference: [Base UI Tabs](https://base-ui.com/react/components/tabs#tab)
 */
export namespace Tab {
  export type Props = React.ComponentProps<typeof TabsPrimitive.Tab>;
  export type State = TabsPrimitive.Tab.State;
  export type Metadata = TabsPrimitive.Tab.Metadata;
  export type Position = TabsPrimitive.Tab.Position;
  export type Size = TabsPrimitive.Tab.Size;
  export type ActivationDirection = TabsPrimitive.Tab.ActivationDirection;
  export type Value = TabsPrimitive.Tab.Value;
}

export function Tab({ ...props }: Tab.Props) {
  return <TabsPrimitive.Tab data-slot="tabs-tab" {...props} />;
}

/**
 * A visual indicator that can be styled to match the position of the currently active tab.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Tabs](https://caprice-ui.com/docs/components/tabs)
 * API Reference: [Base UI Tabs](https://base-ui.com/react/components/tabs#indicator)
 */
export namespace Indicator {
  export type Props = React.ComponentProps<typeof TabsPrimitive.Indicator>;
  export type State = TabsPrimitive.Indicator.State;
}

export function Indicator({ ...props }: Indicator.Props) {
  return <TabsPrimitive.Indicator data-slot="tabs-indicator" {...props} />;
}

/**
 * A panel displayed when the corresponding tab is active.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Tabs](https://caprice-ui.com/docs/components/tabs)
 *
 * API Reference: [Base UI Tabs](https://base-ui.com/react/components/tabs#panel)
 */
export namespace Panel {
  export type Props = React.ComponentProps<typeof TabsPrimitive.Panel>;
  export type State = TabsPrimitive.Panel.State;
  export type Metadata = TabsPrimitive.Panel.Metadata;
}

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

/**
 * @deprecated Use {@link Panel} instead
 * @see {@link https://caprice-ui.com/docs/components/tabs}
 */
export const Content = Panel;