Toolbar

1'use client';
2 
3import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
4import { cva } from 'class-variance-authority';
5import * as React from 'react';
6 
7import { buttonVariants } from '@/components/ui/button';
8import { cn } from '@/lib/utils';
9 
10type ToolbarSize = 'sm' | 'reg' | 'lg';
11type ToolbarShape = 'square' | 'circle';
12 
13interface ToolbarContextValue {
14  size: ToolbarSize;
15  shape: ToolbarShape;
16  boxed: boolean;
17  orientation: 'horizontal' | 'vertical';
18}
19 
20const ToolbarContext = React.createContext<ToolbarContextValue>({
21  size: 'reg',
22  shape: 'circle',
23  boxed: false,
24  orientation: 'horizontal',
25});
26 
27type ToolbarGapClass = 'gap-1' | 'gap-2' | 'gap-3';
28 
29function toolbarGapClass({
30  boxed,
31  shape,
32  size,
33}: Pick<ToolbarContextValue, 'boxed' | 'shape' | 'size'>): ToolbarGapClass {
34  if (size === 'lg') return 'gap-3';
35  if (size === 'reg' && shape === 'circle' && !boxed) return 'gap-1';
36  return 'gap-2';
37}
38 
39// Negative margin cancels the flex gap before the separator (Figma spacer-on-prior-item).
40// Only use between two items — first/last overflows the container. Keys must match
41// every class `toolbarGapClass` can return.
42const toolbarSeparatorGapOffset: Record<
43  ToolbarGapClass,
44  { horizontal: string; vertical: string }
45> = {
46  'gap-1': { horizontal: '-ms-1', vertical: '-mt-1' },
47  'gap-2': { horizontal: '-ms-2', vertical: '-mt-2' },
48  'gap-3': { horizontal: '-ms-3', vertical: '-mt-3' },
49};
50 
51function toolbarSeparatorOffsetClass(context: ToolbarContextValue) {
52  const offset = toolbarSeparatorGapOffset[toolbarGapClass(context)];
53  return context.orientation === 'horizontal'
54    ? offset.horizontal
55    : offset.vertical;
56}
57 
58const toolbarIconSizeMap: Record<ToolbarSize, 'icon-sm' | 'icon' | 'icon-lg'> =
59  {
60    sm: 'icon-sm',
61    reg: 'icon',
62    lg: 'icon-lg',
63  };
64 
65const toolbarIconShellSizeMap: Record<ToolbarSize, 'sm' | 'default' | 'lg'> = {
66  sm: 'sm',
67  reg: 'sm',
68  lg: 'default',
69};
70 
71const toolbarSeparatorLengthMap: Record<ToolbarSize, string> = {
72  sm: 'h-5',
73  reg: 'h-7',
74  lg: 'h-8',
75};
76 
77const toolbarSeparatorWidthMap: Record<ToolbarSize, string> = {
78  sm: 'w-2',
79  reg: 'w-2',
80  lg: 'w-3',
81};
82 
83const toolbarSeparatorHeightMap: Record<ToolbarSize, string> = {
84  sm: 'h-2',
85  reg: 'h-2',
86  lg: 'h-3',
87};
88 
89const toolbarSeparatorCrossSpanMap: Record<ToolbarSize, string> = {
90  sm: 'w-6',
91  reg: 'w-7',
92  lg: 'w-8',
93};
94 
95const toolbarVariants = cva('inline-flex w-fit items-center', {
96  variants: {
97    boxed: {
98// … truncated