From d1d16691e7529147383532116d707022b30d8a0c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 10:10:45 +0530
Subject: [PATCH 1/4] dev: toolbar component added to propel

---
 packages/propel/src/toolbar/index.ts    |   2 +
 packages/propel/src/toolbar/toolbar.tsx | 159 ++++++++++++++++++++++++
 2 files changed, 161 insertions(+)
 create mode 100644 packages/propel/src/toolbar/index.ts
 create mode 100644 packages/propel/src/toolbar/toolbar.tsx

diff --git a/packages/propel/src/toolbar/index.ts b/packages/propel/src/toolbar/index.ts
new file mode 100644
index 00000000000..0ff7414bc0a
--- /dev/null
+++ b/packages/propel/src/toolbar/index.ts
@@ -0,0 +1,2 @@
+export { Toolbar, ToolbarGroup, ToolbarItem, ToolbarSeparator, ToolbarSubmitButton } from "./toolbar";
+export type { ToolbarProps, ToolbarGroupProps, ToolbarItemProps, ToolbarSeparatorProps, ToolbarSubmitButtonProps } from "./toolbar";
\ No newline at end of file
diff --git a/packages/propel/src/toolbar/toolbar.tsx b/packages/propel/src/toolbar/toolbar.tsx
new file mode 100644
index 00000000000..b1dda9e9719
--- /dev/null
+++ b/packages/propel/src/toolbar/toolbar.tsx
@@ -0,0 +1,159 @@
+import * as React from "react";
+import { LucideIcon } from "lucide-react";
+import { Tooltip } from "../tooltip";
+import { cn } from "../utils";
+
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  className?: string;
+  isFirst?: boolean;
+}
+
+export interface ToolbarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: LucideIcon;
+  isActive?: boolean;
+  tooltip?: string;
+  shortcut?: string[];
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface ToolbarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export interface ToolbarSubmitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  loading?: boolean;
+  variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
+  className?: string;
+  children: React.ReactNode;
+}
+
+const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>(({ className, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex h-9 w-full items-stretch gap-1.5 bg-custom-background-90 overflow-x-scroll", className)}
+    {...props}
+  >
+    {children}
+  </div>
+));
+
+const ToolbarGroup = React.forwardRef<HTMLDivElement, ToolbarGroupProps>(
+  ({ className, children, isFirst = false, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5",
+        {
+          "pl-0": isFirst,
+        },
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+
+const ToolbarItem = React.forwardRef<HTMLButtonElement, ToolbarItemProps>(
+  ({ icon: Icon, isActive = false, tooltip, shortcut, className, children, ...props }, ref) => {
+    const button = (
+      <button
+        ref={ref}
+        type="button"
+        className={cn(
+          "grid place-items-center aspect-square rounded-sm p-0.5 text-custom-text-400 hover:bg-custom-background-80 transition-colors",
+          {
+            "bg-custom-background-80 text-custom-text-100": isActive,
+          },
+          className
+        )}
+        {...props}
+      >
+        <Icon
+          className={cn("h-3.5 w-3.5", {
+            "text-custom-text-100": isActive,
+          })}
+          strokeWidth={2.5}
+        />
+        {children}
+      </button>
+    );
+
+    if (tooltip) {
+      return (
+        <Tooltip
+          tooltipContent={
+            <div className="flex flex-col gap-1 text-center text-xs">
+              <span className="font-medium">{tooltip}</span>
+              {shortcut && <kbd className="text-custom-text-400">{shortcut.join(" + ")}</kbd>}
+            </div>
+          }
+        >
+          {button}
+        </Tooltip>
+      );
+    }
+
+    return button;
+  }
+);
+
+const ToolbarSeparator = React.forwardRef<HTMLDivElement, ToolbarSeparatorProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("h-full w-px bg-custom-border-200 mx-1", className)} {...props} />
+));
+
+const buttonVariants = {
+  primary: "bg-custom-primary-100 text-white hover:bg-custom-primary-200 focus:bg-custom-primary-200",
+  secondary:
+    "bg-custom-background-100 text-custom-text-200 border border-custom-border-200 hover:bg-custom-background-90 focus:bg-custom-background-90",
+  outline:
+    "border border-custom-primary-100 text-custom-primary-100 bg-transparent hover:bg-custom-primary-100/10 focus:bg-custom-primary-100/20",
+  ghost: "text-custom-text-200 hover:bg-custom-background-90 focus:bg-custom-background-90",
+  destructive: "bg-red-500 text-white hover:bg-red-600 focus:bg-red-600",
+};
+
+const ToolbarSubmitButton = React.forwardRef<HTMLButtonElement, ToolbarSubmitButtonProps>(
+  ({ loading = false, variant = "primary", className, children, disabled, ...props }, ref) => (
+    <div className="sticky right-1">
+      <button
+        ref={ref}
+        className={cn(
+          "inline-flex items-center justify-center gap-2 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors duration-200",
+          "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-2",
+          "disabled:opacity-50 disabled:pointer-events-none",
+          buttonVariants[variant],
+          className
+        )}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && <div className="h-3 w-3 animate-spin rounded-full border border-current border-t-transparent" />}
+        {children}
+      </button>
+    </div>
+  )
+);
+
+ToolbarRoot.displayName = "ToolbarRoot";
+ToolbarGroup.displayName = "ToolbarGroup";
+ToolbarItem.displayName = "ToolbarItem";
+ToolbarSeparator.displayName = "ToolbarSeparator";
+ToolbarSubmitButton.displayName = "ToolbarSubmitButton";
+
+// compound components
+const Toolbar = Object.assign(ToolbarRoot, {
+  Group: ToolbarGroup,
+  Item: ToolbarItem,
+  Separator: ToolbarSeparator,
+  SubmitButton: ToolbarSubmitButton,
+});
+
+export { Toolbar };

From 2e6d0302ce745e88a2522068a3f0794be60c9fc7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 10:11:17 +0530
Subject: [PATCH 2/4] dev: toolbar story added

---
 .../propel/src/toolbar/toolbar.stories.tsx    | 123 ++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 packages/propel/src/toolbar/toolbar.stories.tsx

diff --git a/packages/propel/src/toolbar/toolbar.stories.tsx b/packages/propel/src/toolbar/toolbar.stories.tsx
new file mode 100644
index 00000000000..f7e7dbbc7c9
--- /dev/null
+++ b/packages/propel/src/toolbar/toolbar.stories.tsx
@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  Code,
+  Link,
+  List,
+  ListOrdered,
+  Quote,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Undo,
+  Redo,
+  Globe2,
+  Lock,
+} from "lucide-react";
+import { Toolbar } from "./toolbar";
+
+const meta: Meta<typeof Toolbar> = {
+  title: "Components/Toolbar",
+  component: Toolbar,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Toolbar>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-4 space-y-4">
+      <div className="w-96 border rounded">
+        <Toolbar>
+          <Toolbar.Group isFirst>
+            <Toolbar.Item icon={Undo} tooltip="Undo" />
+            <Toolbar.Item icon={Redo} tooltip="Redo" />
+          </Toolbar.Group>
+          <Toolbar.Group>
+            <Toolbar.Item icon={Bold} tooltip="Bold" />
+            <Toolbar.Item icon={Italic} tooltip="Italic" />
+            <Toolbar.Item icon={Underline} tooltip="Underline" />
+            <Toolbar.Item icon={Strikethrough} tooltip="Strikethrough" />
+          </Toolbar.Group>
+          <Toolbar.Group>
+            <Toolbar.Item icon={List} tooltip="Bullet List" />
+            <Toolbar.Item icon={ListOrdered} tooltip="Numbered List" />
+            <Toolbar.Item icon={Quote} tooltip="Quote" />
+          </Toolbar.Group>
+          <Toolbar.Group>
+            <Toolbar.Item icon={AlignLeft} tooltip="Align Left" />
+            <Toolbar.Item icon={AlignCenter} tooltip="Align Center" />
+            <Toolbar.Item icon={AlignRight} tooltip="Align Right" />
+          </Toolbar.Group>
+          <Toolbar.Group>
+            <Toolbar.Item icon={Link} tooltip="Link" />
+            <Toolbar.Item icon={Code} tooltip="Code" />
+          </Toolbar.Group>
+        </Toolbar>
+      </div>
+    </div>
+  ),
+};
+
+export const WithActiveStates: Story = {
+  render: () => (
+    <div className="p-4">
+      <Toolbar>
+        <Toolbar.Group isFirst>
+          <Toolbar.Item icon={Bold} tooltip="Bold" shortcut={["Cmd", "B"]} isActive />
+          <Toolbar.Item icon={Italic} tooltip="Italic" shortcut={["Cmd", "I"]} />
+          <Toolbar.Item icon={Underline} tooltip="Underline" shortcut={["Cmd", "U"]} isActive />
+        </Toolbar.Group>
+        <Toolbar.Group>
+          <Toolbar.Item icon={List} tooltip="Bullet List" />
+          <Toolbar.Item icon={ListOrdered} tooltip="Numbered List" isActive />
+          <Toolbar.Item icon={Quote} tooltip="Quote" />
+        </Toolbar.Group>
+        <Toolbar.Group>
+          <Toolbar.Item icon={AlignLeft} tooltip="Align Left" />
+          <Toolbar.Item icon={AlignCenter} tooltip="Align Center" isActive />
+          <Toolbar.Item icon={AlignRight} tooltip="Align Right" />
+        </Toolbar.Group>
+      </Toolbar>
+    </div>
+  ),
+};
+
+export const CommentToolbar: Story = {
+  render: () => (
+    <div className="p-4 space-y-4">
+      <h3 className="text-sm font-medium">Comment Toolbar with Access Control</h3>
+      <div className="rounded border-[0.5px] border-custom-border-200 p-1">
+        <Toolbar>
+          {/* Access Specifier */}
+          <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
+            <Toolbar.Item icon={Lock} tooltip="Private" isActive />
+            <Toolbar.Item icon={Globe2} tooltip="Public" />
+          </div>
+
+          <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-custom-border-200 p-1">
+            <div className="flex items-stretch">
+              <Toolbar.Group isFirst>
+                <Toolbar.Item icon={Bold} tooltip="Bold" shortcut={["Cmd", "B"]} />
+                <Toolbar.Item icon={Italic} tooltip="Italic" shortcut={["Cmd", "I"]} />
+                <Toolbar.Item icon={Code} tooltip="Code" shortcut={["Cmd", "`"]} />
+              </Toolbar.Group>
+              <Toolbar.Group>
+                <Toolbar.Item icon={List} tooltip="Bullet List" />
+                <Toolbar.Item icon={ListOrdered} tooltip="Numbered List" />
+              </Toolbar.Group>
+            </div>
+            <Toolbar.SubmitButton>Comment</Toolbar.SubmitButton>
+          </div>
+        </Toolbar>
+      </div>
+    </div>
+  ),
+};

From 5fccc18f4b690927f3c4a0d15be9ffdc19cd4d72 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 10:15:08 +0530
Subject: [PATCH 3/4] chore: propel config updated

---
 packages/propel/package.json     | 1 +
 packages/propel/tsdown.config.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/propel/package.json b/packages/propel/package.json
index 15933f2af5a..ca3875bcad5 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -32,6 +32,7 @@
     "./switch": "./dist/switch/index.js",
     "./table": "./dist/table/index.js",
     "./tabs": "./dist/tabs/index.js",
+    "./toolbar": "./dist/toolbar/index.js",
     "./tooltip": "./dist/tooltip/index.js",
     "./utils": "./dist/utils/index.js"
   },
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
index 8f23c301cb8..14fe52ef31d 100644
--- a/packages/propel/tsdown.config.ts
+++ b/packages/propel/tsdown.config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
     "src/switch/index.ts",
     "src/table/index.ts",
     "src/tabs/index.ts",
+    "src/toolbar/index.ts",
     "src/tooltip/index.ts",
     "src/utils/index.ts",
   ],

From 469b949d277ce3895795ef67d576f7b57cf19859 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 10:17:36 +0530
Subject: [PATCH 4/4] chore: code refactor

---
 packages/propel/src/toolbar/index.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/propel/src/toolbar/index.ts b/packages/propel/src/toolbar/index.ts
index 0ff7414bc0a..da2a48965eb 100644
--- a/packages/propel/src/toolbar/index.ts
+++ b/packages/propel/src/toolbar/index.ts
@@ -1,2 +1,8 @@
-export { Toolbar, ToolbarGroup, ToolbarItem, ToolbarSeparator, ToolbarSubmitButton } from "./toolbar";
-export type { ToolbarProps, ToolbarGroupProps, ToolbarItemProps, ToolbarSeparatorProps, ToolbarSubmitButtonProps } from "./toolbar";
\ No newline at end of file
+export { Toolbar } from "./toolbar";
+export type {
+  ToolbarProps,
+  ToolbarGroupProps,
+  ToolbarItemProps,
+  ToolbarSeparatorProps,
+  ToolbarSubmitButtonProps,
+} from "./toolbar";