Tabs

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

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;