Toolbar

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

'use client';

import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
import type * as React from 'react';

/**
 * A container for grouping a set of controls, such as buttons, toggle groups, or menus.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Toolbar](https://caprice-ui.com/docs/components/toolbar)
 *
 * API Reference: [Base UI Toolbar](https://base-ui.com/react/components/toolbar#root)
 */
export namespace Root {
  export type Orientation = ToolbarPrimitive.Root.Orientation;
  export type State = ToolbarPrimitive.Root.State;
  export type Props = React.ComponentProps<typeof ToolbarPrimitive.Root>;
  export type ItemMetadata = ToolbarPrimitive.Root.ItemMetadata;
}

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

/**
 * A button that can be used as-is or as a trigger for other components.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Toolbar](https://caprice-ui.com/docs/components/toolbar)
 *
 * API Reference: [Base UI Toolbar](https://base-ui.com/react/components/toolbar#button)
 */
export namespace Button {
  export type State = ToolbarPrimitive.Button.State;
  export type Props = React.ComponentProps<typeof ToolbarPrimitive.Button>;
}

export function Button({ ...props }: Button.Props) {
  return <ToolbarPrimitive.Button data-slot="toolbar-button" {...props} />;
}

/**
 * A link component.
 * Renders an `<a>` element.
 *
 * Documentation: [Caprice UI Toolbar](https://caprice-ui.com/docs/components/toolbar)
 *
 * API Reference: [Base UI Toolbar](https://base-ui.com/react/components/toolbar#link)
 */
export namespace Link {
  export type State = ToolbarPrimitive.Link.State;
  export type Props = React.ComponentProps<typeof ToolbarPrimitive.Link>;
}

export function Link({ ...props }: Link.Props) {
  return <ToolbarPrimitive.Link data-slot="toolbar-link" {...props} />;
}

/**
 * A native input element that integrates with Toolbar keyboard navigation.
 * Renders an `<input>` element.
 *
 * Documentation: [Caprice UI Toolbar](https://caprice-ui.com/docs/components/toolbar)
 *
 * API Reference: [Base UI Toolbar](https://base-ui.com/react/components/toolbar#input)
 */
export namespace Input {
  export type State = ToolbarPrimitive.Input.State;
  export type Props = React.ComponentProps<typeof ToolbarPrimitive.Input>;
}

export function Input({ ...props }: Input.Props) {
  return <ToolbarPrimitive.Input data-slot="toolbar-input" {...props} />;
}

/**
 * Groups several toolbar items or toggles.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Toolbar](https://caprice-ui.com/docs/components/toolbar)
 *
 * API Reference: [Base UI Toolbar](https://base-ui.com/react/components/toolbar#group)
 */
export namespace Group {
  export type Props = React.ComponentProps<typeof ToolbarPrimitive.Group>;
}

export function Group({ ...props }: Group.Props) {
  return <ToolbarPrimitive.Group data-slot="toolbar-group" {...props} />;
}

/**
 * A separator element accessible to screen readers.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Toolbar](https://caprice-ui.com/docs/components/toolbar)
 *
 * API Reference: [Base UI Toolbar](https://base-ui.com/react/components/toolbar#separator)
 */
export namespace Separator {
  export type Props = React.ComponentProps<typeof ToolbarPrimitive.Separator>;
}

export function Separator({ ...props }: Separator.Props) {
  return <ToolbarPrimitive.Separator data-slot="toolbar-separator" {...props} />;
}