'use client'; import * as React from 'react'; import * as ToolbarPrimitive from '@radix-ui/react-toolbar'; import { cn, withCn, withRef, withVariants } from '@udecode/cn'; import { type VariantProps, cva } from 'class-variance-authority'; import { ChevronDown } from 'lucide-react'; import { Separator } from './separator'; import { withTooltip } from './tooltip'; export const Toolbar = withCn( ToolbarPrimitive.Root, 'relative flex select-none items-center' ); export const ToolbarToggleGroup = withCn( ToolbarPrimitive.ToolbarToggleGroup, 'flex items-center' ); export const ToolbarLink = withCn( ToolbarPrimitive.Link, 'font-medium underline underline-offset-4' ); export const ToolbarSeparator = withCn( ToolbarPrimitive.Separator, 'mx-2 my-1 w-px shrink-0 bg-border' ); const toolbarButtonVariants = cva( cn( 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4' ), { defaultVariants: { size: 'sm', variant: 'default', }, variants: { size: { default: 'h-10 px-3', lg: 'h-11 px-5', sm: 'h-7 px-2', }, variant: { default: 'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground', outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground', }, }, } ); const dropdownArrowVariants = cva( cn( 'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50' ), { defaultVariants: { size: 'sm', variant: 'default', }, variants: { size: { default: 'h-10 w-6', lg: 'h-11 w-8', sm: 'h-7 w-4', }, variant: { default: 'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground', outline: 'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground', }, }, } ); const ToolbarButton = withTooltip( // eslint-disable-next-line react/display-name React.forwardRef< React.ElementRef, { isDropdown?: boolean; pressed?: boolean; } & Omit< React.ComponentPropsWithoutRef, 'asChild' | 'value' > & VariantProps >( ( { children, className, isDropdown, pressed, size, variant, ...props }, ref ) => { return typeof pressed === 'boolean' ? ( {isDropdown ? ( <>

{children}

) : ( children )} ) : ( {children} ); } ) ); ToolbarButton.displayName = 'ToolbarButton'; export { ToolbarButton }; export const ToolbarSplitButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ children, className, ...props }, ref) => { return ( {children} ); }); export const ToolbarSplitButtonPrimary = React.forwardRef< React.ElementRef, Omit, 'value'> >(({ children, className, size, variant, ...props }, ref) => { return ( {children} ); }); export const ToolbarSplitButtonSecondary = React.forwardRef< HTMLButtonElement, React.ComponentPropsWithoutRef<'span'> & VariantProps >(({ className, size, variant, ...props }, ref) => { return ( e.stopPropagation()} role="button" {...props} > ); }); ToolbarSplitButton.displayName = 'ToolbarButton'; export const ToolbarToggleItem = withVariants( ToolbarPrimitive.ToggleItem, toolbarButtonVariants, ['variant', 'size'] ); export const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => { return ( ); });

Toggle Toolbar Button

Installation

Examples

Toggle