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

---
 packages/propel/src/pill/index.ts |  2 +
 packages/propel/src/pill/pill.tsx | 72 +++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 packages/propel/src/pill/index.ts
 create mode 100644 packages/propel/src/pill/pill.tsx

diff --git a/packages/propel/src/pill/index.ts b/packages/propel/src/pill/index.ts
new file mode 100644
index 00000000000..9b9f4c84ea4
--- /dev/null
+++ b/packages/propel/src/pill/index.ts
@@ -0,0 +1,2 @@
+export { Pill } from "./pill";
+export type { PillProps } from "./pill";
diff --git a/packages/propel/src/pill/pill.tsx b/packages/propel/src/pill/pill.tsx
new file mode 100644
index 00000000000..dbbf60d8d01
--- /dev/null
+++ b/packages/propel/src/pill/pill.tsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+import { cn } from "../utils";
+
+export enum EPillVariant {
+  DEFAULT = "default",
+  PRIMARY = "primary",
+  SUCCESS = "success",
+  WARNING = "warning",
+  ERROR = "error",
+  INFO = "info",
+}
+
+export enum EPillSize {
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+}
+
+export type TPillVariant =
+  | EPillVariant.DEFAULT
+  | EPillVariant.PRIMARY
+  | EPillVariant.SUCCESS
+  | EPillVariant.WARNING
+  | EPillVariant.ERROR
+  | EPillVariant.INFO;
+export type TPillSize = EPillSize.SM | EPillSize.MD | EPillSize.LG;
+
+export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: TPillVariant;
+  size?: TPillSize;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const pillVariants = {
+  [EPillVariant.DEFAULT]: "bg-custom-background-90 text-custom-text-200 border border-custom-border-200",
+  [EPillVariant.PRIMARY]: "bg-custom-primary-100/10 text-custom-primary-100 border border-custom-primary-100/20",
+  [EPillVariant.SUCCESS]: "bg-green-50 text-green-700 border border-green-200",
+  [EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
+  [EPillVariant.ERROR]: "bg-red-50 text-red-700 border border-red-200",
+  [EPillVariant.INFO]: "bg-blue-50 text-blue-700 border border-blue-200",
+};
+
+const pillSizes = {
+  [EPillSize.SM]: "px-2 py-0.5 text-xs",
+  [EPillSize.MD]: "px-2.5 py-1 text-sm",
+  [EPillSize.LG]: "px-3 py-1.5 text-base",
+};
+
+const Pill = React.forwardRef<HTMLSpanElement, PillProps>(
+  ({ variant = EPillVariant.DEFAULT, size = EPillSize.MD, className, children, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(
+        // Base styles
+        "inline-flex items-center justify-center rounded-full font-medium whitespace-nowrap",
+        // Variant styles
+        pillVariants[variant],
+        // Size styles
+        pillSizes[size],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+);
+
+Pill.displayName = "Pill";
+
+export { Pill };

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

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

diff --git a/packages/propel/src/pill/pill.stories.tsx b/packages/propel/src/pill/pill.stories.tsx
new file mode 100644
index 00000000000..7072bdb727e
--- /dev/null
+++ b/packages/propel/src/pill/pill.stories.tsx
@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Pill, EPillVariant, EPillSize } from "./pill";
+
+const meta: Meta<typeof Pill> = {
+  title: "Components/Pill",
+  component: Pill,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: Object.values(EPillVariant),
+    },
+    size: {
+      control: "select",
+      options: Object.values(EPillSize),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Pill>;
+
+export const Default: Story = {
+  args: {
+    children: "Default",
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    variant: EPillVariant.PRIMARY,
+    children: "Primary",
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: EPillVariant.SUCCESS,
+    children: "Success",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: EPillVariant.WARNING,
+    children: "Warning",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: EPillVariant.ERROR,
+    children: "Error",
+  },
+};
+
+export const Info: Story = {
+  args: {
+    variant: EPillVariant.INFO,
+    children: "Info",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: EPillSize.SM,
+    children: "Small",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: EPillSize.MD,
+    children: "Medium",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: EPillSize.LG,
+    children: "Large",
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        <Pill variant={EPillVariant.DEFAULT}>Default</Pill>
+        <Pill variant={EPillVariant.PRIMARY}>Primary</Pill>
+        <Pill variant={EPillVariant.SUCCESS}>Success</Pill>
+        <Pill variant={EPillVariant.WARNING}>Warning</Pill>
+        <Pill variant={EPillVariant.ERROR}>Error</Pill>
+        <Pill variant={EPillVariant.INFO}>Info</Pill>
+      </div>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <Pill size={EPillSize.SM}>Small</Pill>
+        <Pill size={EPillSize.MD}>Medium</Pill>
+        <Pill size={EPillSize.LG}>Large</Pill>
+      </div>
+    </div>
+  ),
+};
+
+export const WithNumbers: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        <Pill variant={EPillVariant.PRIMARY}>3</Pill>
+        <Pill variant={EPillVariant.SUCCESS}>12</Pill>
+        <Pill variant={EPillVariant.WARNING}>99+</Pill>
+        <Pill variant={EPillVariant.ERROR}>!</Pill>
+      </div>
+    </div>
+  ),
+};
+
+export const StatusExamples: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Task Status</h3>
+        <div className="flex flex-wrap gap-2">
+          <Pill variant={EPillVariant.DEFAULT}>Draft</Pill>
+          <Pill variant={EPillVariant.WARNING}>In Progress</Pill>
+          <Pill variant={EPillVariant.INFO}>In Review</Pill>
+          <Pill variant={EPillVariant.SUCCESS}>Completed</Pill>
+          <Pill variant={EPillVariant.ERROR}>Blocked</Pill>
+        </div>
+      </div>
+    </div>
+  ),
+};

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

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

diff --git a/packages/propel/package.json b/packages/propel/package.json
index 15933f2af5a..e226f10a47f 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -26,6 +26,7 @@
     "./emoji-icon-picker": "./dist/emoji-icon-picker/index.js",
     "./icons": "./dist/icons/index.js",
     "./menu": "./dist/menu/index.js",
+    "./pill": "./dist/pill/index.js",
     "./popover": "./dist/popover/index.js",
     "./skeleton": "./dist/skeleton/index.js",
     "./styles/fonts": "./dist/styles/fonts/index.css",
@@ -66,4 +67,4 @@
     "tsdown": "catalog:",
     "typescript": "catalog:"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
index 8f23c301cb8..f878d7dc323 100644
--- a/packages/propel/tsdown.config.ts
+++ b/packages/propel/tsdown.config.ts
@@ -12,6 +12,7 @@ export default defineConfig({
     "src/emoji-icon-picker/index.ts",
     "src/icons/index.ts",
     "src/menu/index.ts",
+    "src/pill/index.ts",
     "src/popover/index.ts",
     "src/skeleton/index.ts",
     "src/switch/index.ts",

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

---
 packages/propel/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/propel/package.json b/packages/propel/package.json
index e226f10a47f..4597a27ecd2 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -67,4 +67,4 @@
     "tsdown": "catalog:",
     "typescript": "catalog:"
   }
-}
\ No newline at end of file
+}