Initial commit

docs/menu-tool-layouts/toolbar.md

@@ -0,0 +1,197 @@
+1. Home
+2. Menu Tool Layouts
+3. Toolbar
+
+# Toolbar
+
+Simple, composable toolbar components for organizing buttons and actions.
+
+## Complex Example
+
+Add ```jsx
+const [selectedTool, setSelectedTool] = useState("select");
+
+  return (
+    <Toolbar size="md">
+      <ToolbarGroup>
+        <ToggleButtons value={selectedTool} onValueChange={setSelectedTool} padding={false} variant="primary">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <ToggleButton icon value="select" >
+                <MouseCursorAltIcon strokWidth={0.5} size="md"/>
+              </ToggleButton>
+            </TooltipTrigger>
+            <TooltipContent>Select tool</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <ToggleButton value="edit" icon >
+                <MouseCursorIcon strokWidth={0.5}/>
+              </ToggleButton>
+            </TooltipTrigger>
+            <TooltipContent>Edit tool</TooltipContent>
+          </Tooltip>
+        </ToggleButtons>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button icon variant="ghost">
+              <Scissors className="size-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Cut</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button icon variant="ghost">
+              <Hand className="size-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Hand tool</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              icon
+              size="md"
+            >
+              <Hash/>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Hash tool</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              icon
+              size="md"
+              onClick={() => toast("Type tool selected")}
+            >
+              <Type/>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Type tool</TooltipContent>
+        </Tooltip>
+      </ToolbarGroup>
+      <ToolbarSeparator />
+      <ToolbarGroup>
+        <Button
+          variant="primary"
+          size="md"
+          onClick={() => toast("Add item clicked")}
+        >
+          <Plus/> Add
+        </Button>
+      </ToolbarGroup>
+    </Toolbar>
+  )
+```
+
+## Examples
+
+Add ```jsx
+<Toolbar>
+  <ToolbarGroup>
+    <Button variant="ghost" icon>
+      <Hash/>
+    </Button>
+    <Button variant="ghost" icon>
+      <Type/>
+    </Button>
+    <Button variant="ghost" icon>
+      <Image/>
+    </Button>
+  </ToolbarGroup>
+  <ToolbarSeparator />
+  <ToolbarGroup>
+    <Button variant="primary">
+      <Plus/> Add
+    </Button>
+  </ToolbarGroup>
+</Toolbar>
+```
+
+## Components
+
+- Toolbar - Main container with variant support (default | floating)
+- ToolbarGroup - Groups related buttons with gap spacing
+- Button - Button component with toolbar-specific styling
+- ToolbarSeparator - Short rounded visual separator
+
+## Floating Variant
+
+Add ```jsx
+<Toolbar variant="floating">
+  <ToolbarGroup>
+    <Button variant="ghost" icon>
+      <Hash />
+    </Button>
+    <Button variant="ghost" icon>
+      <Type />
+    </Button>
+  </ToolbarGroup>
+  <ToolbarSeparator />
+  <ToolbarGroup>
+    <Button variant="primary">
+      <Plus /> Add
+    </Button>
+  </ToolbarGroup>
+</Toolbar>
+```
+
+## Sizes
+
+```jsx
+{/* Small toolbar - compact padding */}
+<Toolbar size="sm">
+  <ToolbarGroup>
+    <Button variant="ghost" icon size="sm"><Hash /></Button>
+    <Button variant="ghost" icon size="sm"><Type /></Button>
+  </ToolbarGroup>
+</Toolbar>
+
+{/* Medium toolbar - default */}
+<Toolbar size="md">
+  <ToolbarGroup>
+    <Button variant="ghost" icon size="md"><Hash /></Button>
+    <Button variant="ghost" icon size="md"><Type /></Button>
+  </ToolbarGroup>
+</Toolbar>
+
+{/* Large toolbar - spacious padding */}
+<Toolbar size="lg">
+  <ToolbarGroup>
+    <Button variant="ghost" icon size="lg"><Hash /></Button>
+    <Button variant="ghost" icon size="lg"><Type /></Button>
+  </ToolbarGroup>
+</Toolbar>
+```
+
+## API Reference
+
+### Toolbar
+
+```tsx
+interface ToolbarProps {
+  className?: string
+  children?: React.ReactNode
+  variant?: "default" | "floating"
+  size?: "sm" | "md" | "lg"
+}
+```
+
+### Button
+
+```tsx
+interface ButtonProps {
+  variant?: "primary" | "secondary" | "destructive" | "ghost" | "link"
+  size?: "sm" | "md" | "lg"
+  icon?: boolean
+  className?: string
+  children: React.ReactNode
+  onClick?: () => void
+  disabled?: boolean
+  tooltip?: string
+}
+```