Toolbar

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Toolbar
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import {
14  Bell,
15  CircleUserRound,
16  Edit2,
17  FileDown,
18  Frame,
19  Layers,
20  Lock,
21  type LucideIcon,
22  MousePointer2,
23  Move,
24  Palette,
25  Shapes,
26  Share2,
27  SlidersHorizontal,
28} from "lucide-react";
29import { AnimatePresence, motion } from "motion/react";
30import * as React from "react";
31import { cn } from "@/lib/utils";
32 
33interface ToolbarItem {
34  id: string;
35  title: string;
36  icon: LucideIcon;
37  type?: never;
38}
39 
40interface ToolbarProps {
41  items?: ToolbarItem[];
42  defaultSelected?: string;
43  className?: string;
44  activeColor?: string;
45  onSelect?: (itemId: string) => void;
46}
47 
48const DEFAULT_TOOLBAR_ITEMS: ToolbarItem[] = [
49  { id: "select", title: "Select", icon: MousePointer2 },
50  { id: "move", title: "Move", icon: Move },
51  { id: "shapes", title: "Shapes", icon: Shapes },
52  { id: "layers", title: "Layers", icon: Layers },
53  { id: "frame", title: "Frame", icon: Frame },
54  { id: "properties", title: "Properties", icon: SlidersHorizontal },
55  { id: "export", title: "Export", icon: FileDown },
56  { id: "share", title: "Share", icon: Share2 },
57  { id: "notifications", title: "Notifications", icon: Bell },
58  { id: "profile", title: "Profile", icon: CircleUserRound },
59  { id: "appearance", title: "Appearance", icon: Palette },
60];
61 
62const buttonVariants = {
63  initial: {
64    gap: 0,
65    paddingLeft: ".5rem",
66    paddingRight: ".5rem",
67  },
68  animate: (isSelected: boolean) => ({
69    gap: isSelected ? ".5rem" : 0,
70    paddingLeft: isSelected ? "1rem" : ".5rem",
71    paddingRight: isSelected ? "1rem" : ".5rem",
72  }),
73};
74 
75const spanVariants = {
76  initial: { width: 0, opacity: 0 },
77  animate: { width: "auto", opacity: 1 },
78  exit: { width: 0, opacity: 0 },
79};
80 
81const notificationVariants = {
82  initial: { opacity: 0, y: 10 },
83  animate: { opacity: 1, y: -10 },
84  exit: { opacity: 0, y: -20 },
85};
86 
87const lineVariants = {
88  initial: { scaleX: 0, x: "-50%" },
89  animate: {
90    scaleX: 1,
91    x: "0%",
92    transition: { duration: 0.2, ease: "easeOut" },
93  },
94  exit: {
95    scaleX: 0,
96    x: "50%",
97    transition: { duration: 0.2, ease: "easeIn" },
98  },
99};
100 
101const transition = { type: "spring", bounce: 0, duration: 0.4 };
102 
103export function Toolbar({
104  items = DEFAULT_TOOLBAR_ITEMS,
105  defaultSelected = "select",
106  className,
107  activeColor = "text-primary",
108// … truncated