Toolbar

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

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