From f201c63b54e204723642eb84de7a9954619a7c0d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 09:03:12 +0530
Subject: [PATCH 01/10] dev: animated counter added to propel

---
 .../src/animated-counter/animated-counter.tsx | 95 +++++++++++++++++++
 packages/propel/src/animated-counter/index.ts |  2 +
 2 files changed, 97 insertions(+)
 create mode 100644 packages/propel/src/animated-counter/animated-counter.tsx
 create mode 100644 packages/propel/src/animated-counter/index.ts

diff --git a/packages/propel/src/animated-counter/animated-counter.tsx b/packages/propel/src/animated-counter/animated-counter.tsx
new file mode 100644
index 00000000000..d5a9042bca3
--- /dev/null
+++ b/packages/propel/src/animated-counter/animated-counter.tsx
@@ -0,0 +1,95 @@
+import { useState, useEffect } from "react";
+import { cn } from "../utils";
+
+export interface AnimatedCounterProps {
+  count: number;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeClasses = {
+  sm: "text-xs h-4 w-4",
+  md: "text-sm h-5 w-5",
+  lg: "text-base h-6 w-6",
+};
+
+export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({ count, className, size = "md" }) => {
+  // states
+  const [displayCount, setDisplayCount] = useState(count);
+  const [prevCount, setPrevCount] = useState(count);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [direction, setDirection] = useState<"up" | "down" | null>(null);
+  const [animationKey, setAnimationKey] = useState(0);
+
+  useEffect(() => {
+    if (count !== prevCount) {
+      setDirection(count > prevCount ? "up" : "down");
+      setIsAnimating(true);
+      setAnimationKey((prev) => prev + 1);
+
+      // Update the display count immediately, animation will show the transition
+      setDisplayCount(count);
+
+      // End animation after CSS transition
+      const timer = setTimeout(() => {
+        setIsAnimating(false);
+        setDirection(null);
+        setPrevCount(count);
+      }, 250);
+
+      return () => clearTimeout(timer);
+    }
+  }, [count, prevCount]);
+
+  const sizeClass = sizeClasses[size];
+
+  return (
+    <div className={cn("relative inline-flex items-center justify-center overflow-hidden", sizeClass)}>
+      {/* Previous number sliding out */}
+      {isAnimating && (
+        <span
+          key={`prev-${animationKey}`}
+          className={cn(
+            "absolute inset-0 flex items-center justify-center font-medium",
+            "animate-[slideOut_0.25s_ease-out_forwards]",
+            direction === "up" && "[--slide-out-dir:-100%]",
+            direction === "down" && "[--slide-out-dir:100%]",
+            sizeClass,
+          )}
+          style={{
+            animation:
+              direction === "up"
+                ? "slideOut 0.25s ease-out forwards, fadeOut 0.25s ease-out forwards"
+                : "slideOutDown 0.25s ease-out forwards, fadeOut 0.25s ease-out forwards",
+          }}
+        >
+          {prevCount}
+        </span>
+      )}
+
+      {/* New number sliding in */}
+      <span
+        key={`current-${animationKey}`}
+        className={cn(
+          "flex items-center justify-center font-medium",
+          isAnimating && "animate-[slideIn_0.25s_ease-out_forwards]",
+          !isAnimating && "opacity-100",
+          sizeClass,
+          className
+        )}
+        style={
+          isAnimating
+            ? {
+                animation:
+                  direction === "up"
+                    ? "slideInFromBottom 0.25s ease-out forwards"
+                    : "slideInFromTop 0.25s ease-out forwards",
+              }
+            : undefined
+        }
+      >
+        {displayCount}
+      </span>
+    </div>
+  );
+};
diff --git a/packages/propel/src/animated-counter/index.ts b/packages/propel/src/animated-counter/index.ts
new file mode 100644
index 00000000000..32442f627cf
--- /dev/null
+++ b/packages/propel/src/animated-counter/index.ts
@@ -0,0 +1,2 @@
+export { AnimatedCounter } from "./animated-counter";
+export type { AnimatedCounterProps } from "./animated-counter";
\ No newline at end of file

From 26c1ab604b426870bbbdd6538c2b2c8994192ba8 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 09:05:25 +0530
Subject: [PATCH 02/10] chore: animated counter story added

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

diff --git a/packages/propel/src/animated-counter/animated-counter.stories.tsx b/packages/propel/src/animated-counter/animated-counter.stories.tsx
new file mode 100644
index 00000000000..fd93fe32595
--- /dev/null
+++ b/packages/propel/src/animated-counter/animated-counter.stories.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AnimatedCounter } from "./animated-counter";
+
+const meta: Meta<typeof AnimatedCounter> = {
+  title: "AnimatedCounter",
+  component: AnimatedCounter,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AnimatedCounter>;
+
+const AnimatedCounterDemo = (args: React.ComponentProps<typeof AnimatedCounter>) => {
+  const [count, setCount] = useState(args.count || 0);
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="flex items-center justify-center gap-6">
+        <button
+          className="px-4 py-2 bg-red-500 text-white font-medium rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 transition-colors shadow-md"
+          onClick={() => setCount((prev) => Math.max(0, prev - 1))}
+        >
+          -1
+        </button>
+        <div className="flex items-center justify-center min-w-[60px] h-12 bg-gray-50 border border-gray-200 rounded-lg">
+          <AnimatedCounter {...args} count={count} />
+        </div>
+        <button
+          className="px-4 py-2 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors shadow-md"
+          onClick={() => setCount((prev) => prev + 1)}
+        >
+          +1
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <AnimatedCounterDemo {...args} />,
+  args: {
+    count: 5,
+    size: "md",
+  },
+};

From 60b9a0ce99d681d7f3c353b17bd670b6b8b8ca4f Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 09:09:51 +0530
Subject: [PATCH 03/10] 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..78d38174554 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -17,6 +17,7 @@
   },
   "exports": {
     "./accordion": "./dist/accordion/index.js",
+    "./animated-counter": "./dist/animated-counter/index.js",
     "./avatar": "./dist/avatar/index.js",
     "./card": "./dist/card/index.js",
     "./charts/*": "./dist/charts/*/index.js",
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
index 8f23c301cb8..e0698f8d1a3 100644
--- a/packages/propel/tsdown.config.ts
+++ b/packages/propel/tsdown.config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from "tsdown";
 export default defineConfig({
   entry: [
     "src/accordion/index.ts",
+    "src/animated-counter/index.ts",
     "src/avatar/index.ts",
     "src/card/index.ts",
     "src/charts/*/index.ts",

From e38e76475d3791085f21020a67849b1211d0da4c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 09:14:58 +0530
Subject: [PATCH 04/10] chore: code refactor

---
 packages/propel/src/animated-counter/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/propel/src/animated-counter/index.ts b/packages/propel/src/animated-counter/index.ts
index 32442f627cf..86b4c39b8a4 100644
--- a/packages/propel/src/animated-counter/index.ts
+++ b/packages/propel/src/animated-counter/index.ts
@@ -1,2 +1,2 @@
 export { AnimatedCounter } from "./animated-counter";
-export type { AnimatedCounterProps } from "./animated-counter";
\ No newline at end of file
+export type { AnimatedCounterProps } from "./animated-counter";

From 6d3f9345daa3d2ddecec8fe2e49e58ee3a09a5a0 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 09:42:29 +0530
Subject: [PATCH 05/10] dev: emoji reaction and renderer component added to
 propel

---
 .../emoji-reaction/emoji-reaction-picker.tsx  |  84 ++++++++
 .../src/emoji-reaction/emoji-reaction.tsx     | 182 ++++++++++++++++++
 packages/propel/src/emoji-reaction/index.ts   |  10 +
 3 files changed, 276 insertions(+)
 create mode 100644 packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
 create mode 100644 packages/propel/src/emoji-reaction/emoji-reaction.tsx
 create mode 100644 packages/propel/src/emoji-reaction/index.ts

diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
new file mode 100644
index 00000000000..092a388ac60
--- /dev/null
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
@@ -0,0 +1,84 @@
+import React, { useMemo, useCallback } from "react";
+import { EmojiRoot } from "../emoji-icon-picker/emoji/emoji";
+import { emojiToString } from "../emoji-icon-picker/helper";
+import { Popover } from "../popover";
+import { cn } from "../utils/classname";
+import { convertPlacementToSideAndAlign, type TPlacement, type TSide, type TAlign } from "../utils/placement";
+
+export interface EmojiReactionPickerProps {
+  isOpen: boolean;
+  handleToggle: (value: boolean) => void;
+  buttonClassName?: string;
+  closeOnSelect?: boolean;
+  disabled?: boolean;
+  dropdownClassName?: string;
+  label: React.ReactNode;
+  onChange: (emoji: string) => void;
+  placement?: TPlacement;
+  searchDisabled?: boolean;
+  searchPlaceholder?: string;
+  side?: TSide;
+  align?: TAlign;
+}
+
+export const EmojiReactionPicker: React.FC<EmojiReactionPickerProps> = (props) => {
+  const {
+    isOpen,
+    handleToggle,
+    buttonClassName,
+    closeOnSelect = true,
+    disabled = false,
+    dropdownClassName,
+    label,
+    onChange,
+    placement = "bottom-start",
+    searchDisabled = false,
+    searchPlaceholder = "Search",
+    side = "bottom",
+    align = "start",
+  } = props;
+
+  // side and align calculations
+  const { finalSide, finalAlign } = useMemo(() => {
+    if (placement) {
+      const converted = convertPlacementToSideAndAlign(placement);
+      return { finalSide: converted.side, finalAlign: converted.align };
+    }
+    return { finalSide: side, finalAlign: align };
+  }, [placement, side, align]);
+
+  const handleEmojiChange = useCallback(
+    (value: string) => {
+      const emoji = emojiToString(value);
+      onChange(emoji);
+      if (closeOnSelect) handleToggle(false);
+    },
+    [onChange, closeOnSelect, handleToggle]
+  );
+
+  return (
+    <Popover open={isOpen} onOpenChange={handleToggle}>
+      <Popover.Button className={cn("outline-none", buttonClassName)} disabled={disabled}>
+        {label}
+      </Popover.Button>
+      <Popover.Panel
+        positionerClassName="z-50"
+        className={cn(
+          "w-80 bg-custom-background-100 rounded-md border-[0.5px] border-custom-border-300 overflow-hidden",
+          dropdownClassName
+        )}
+        side={finalSide}
+        align={finalAlign}
+        sideOffset={8}
+      >
+        <div className="h-80 overflow-hidden overflow-y-auto">
+          <EmojiRoot
+            onChange={handleEmojiChange}
+            searchPlaceholder={searchPlaceholder}
+            searchDisabled={searchDisabled}
+          />
+        </div>
+      </Popover.Panel>
+    </Popover>
+  );
+};
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
new file mode 100644
index 00000000000..cad773364f7
--- /dev/null
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
@@ -0,0 +1,182 @@
+import * as React from "react";
+import { Plus } from "lucide-react";
+import { AnimatedCounter } from "../animated-counter";
+import { stringToEmoji } from "../emoji-icon-picker";
+import { Tooltip } from "../tooltip";
+import { cn } from "../utils";
+
+export interface EmojiReactionType {
+  emoji: string;
+  count: number;
+  reacted?: boolean;
+  users?: string[];
+}
+
+export interface EmojiReactionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  emoji: string;
+  count: number;
+  reacted?: boolean;
+  users?: string[];
+  onReactionClick?: (emoji: string) => void;
+  className?: string;
+  showCount?: boolean;
+  size?: "sm" | "md" | "lg";
+}
+
+export interface EmojiReactionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  reactions: EmojiReactionType[];
+  onReactionClick?: (emoji: string) => void;
+  onAddReaction?: () => void;
+  className?: string;
+  showAddButton?: boolean;
+  maxDisplayUsers?: number;
+  size?: "sm" | "md" | "lg";
+}
+
+export interface EmojiReactionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  onAddReaction?: () => void;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeClasses = {
+  sm: {
+    button: "px-2 py-1 text-xs gap-1",
+    emoji: "text-sm",
+    count: "text-xs",
+    addButton: "h-6 w-6",
+    addIcon: "h-3 w-3",
+  },
+  md: {
+    button: "px-2.5 py-1.5 text-sm gap-1.5",
+    emoji: "text-base",
+    count: "text-sm",
+    addButton: "h-7 w-7",
+    addIcon: "h-3.5 w-3.5",
+  },
+  lg: {
+    button: "px-3 py-2 text-base gap-2",
+    emoji: "text-lg",
+    count: "text-base",
+    addButton: "h-8 w-8",
+    addIcon: "h-4 w-4",
+  },
+};
+
+const EmojiReaction = React.forwardRef<HTMLButtonElement, EmojiReactionProps>(
+  (
+    { emoji, count, reacted = false, users = [], onReactionClick, className, showCount = true, size = "md", ...props },
+    ref
+  ) => {
+    const sizeClass = sizeClasses[size];
+
+    const handleClick = () => {
+      onReactionClick?.(emoji);
+    };
+
+    const tooltipContent = React.useMemo(() => {
+      if (!users.length) return null;
+
+      const displayUsers = users.slice(0, 5);
+      const remainingCount = users.length - displayUsers.length;
+
+      return (
+        <div className="text-xs">
+          <div className="font-medium mb-1">{stringToEmoji(emoji)}</div>
+          <div>
+            {displayUsers.join(", ")}
+            {remainingCount > 0 && ` and ${remainingCount} more`}
+          </div>
+        </div>
+      );
+    }, [emoji, users]);
+
+    const button = (
+      <button
+        ref={ref}
+        onClick={handleClick}
+        className={cn(
+          "inline-flex items-center rounded-full border transition-all duration-200 hover:scale-105",
+          "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-1",
+          sizeClass.button,
+          reacted
+            ? "bg-custom-primary-100/10 border-custom-primary-100 text-custom-primary-100"
+            : "bg-custom-background-100 border-custom-border-200 text-custom-text-300 hover:border-custom-border-300 hover:bg-custom-background-90",
+          className
+        )}
+        {...props}
+      >
+        <span className={sizeClass.emoji}>{emoji}</span>
+        {showCount && count > 0 && <AnimatedCounter count={count} size={size} className={sizeClass.count} />}
+      </button>
+    );
+
+    if (tooltipContent && users.length > 0) {
+      return <Tooltip tooltipContent={tooltipContent}>{button}</Tooltip>;
+    }
+
+    return button;
+  }
+);
+
+const EmojiReactionButton = React.forwardRef<HTMLButtonElement, EmojiReactionButtonProps>(
+  ({ onAddReaction, className, size = "md", ...props }, ref) => {
+    const sizeClass = sizeClasses[size];
+
+    return (
+      <button
+        ref={ref}
+        onClick={onAddReaction}
+        className={cn(
+          "inline-flex items-center justify-center rounded-full border border-dashed border-custom-border-300",
+          "bg-custom-background-100 text-custom-text-400 transition-all duration-200",
+          "hover:border-custom-primary-100 hover:text-custom-primary-100 hover:bg-custom-primary-100/5",
+          "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-1",
+          sizeClass.addButton,
+          className
+        )}
+        title="Add reaction"
+        {...props}
+      >
+        <Plus className={sizeClass.addIcon} />
+      </button>
+    );
+  }
+);
+
+const EmojiReactionGroup = React.forwardRef<HTMLDivElement, EmojiReactionGroupProps>(
+  (
+    {
+      reactions,
+      onReactionClick,
+      onAddReaction,
+      className,
+      showAddButton = true,
+      maxDisplayUsers = 5,
+      size = "md",
+      ...props
+    },
+    ref
+  ) => (
+    <div ref={ref} className={cn("flex flex-wrap items-center gap-2", className)} {...props}>
+      {reactions.map((reaction, index) => (
+        <EmojiReaction
+          key={`${reaction.emoji}-${index}`}
+          emoji={reaction.emoji}
+          count={reaction.count}
+          reacted={reaction.reacted}
+          users={reaction.users?.slice(0, maxDisplayUsers)}
+          onReactionClick={onReactionClick}
+          size={size}
+        />
+      ))}
+      {showAddButton && <EmojiReactionButton onAddReaction={onAddReaction} size={size} />}
+    </div>
+  )
+);
+
+EmojiReaction.displayName = "EmojiReaction";
+EmojiReactionButton.displayName = "EmojiReactionButton";
+EmojiReactionGroup.displayName = "EmojiReactionGroup";
+
+export { EmojiReaction, EmojiReactionButton, EmojiReactionGroup };
diff --git a/packages/propel/src/emoji-reaction/index.ts b/packages/propel/src/emoji-reaction/index.ts
new file mode 100644
index 00000000000..151af7bb271
--- /dev/null
+++ b/packages/propel/src/emoji-reaction/index.ts
@@ -0,0 +1,10 @@
+export { EmojiReaction, EmojiReactionGroup, EmojiReactionButton } from "./emoji-reaction";
+export type {
+  EmojiReactionProps,
+  EmojiReactionGroupProps,
+  EmojiReactionButtonProps,
+  EmojiReactionType,
+} from "./emoji-reaction";
+
+export { EmojiReactionPicker } from "./emoji-reaction-picker";
+export type { EmojiReactionPickerProps } from "./emoji-reaction-picker";

From 722b026fee4a1b67db15639c4e8dcd3b1f74e515 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 09:42:58 +0530
Subject: [PATCH 06/10] dev: emoji reaction story added

---
 .../emoji-reaction-picker.stories.tsx         | 49 ++++++++++++++
 .../emoji-reaction/emoji-reaction.stories.tsx | 65 +++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
 create mode 100644 packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx

diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
new file mode 100644
index 00000000000..558190fdf5b
--- /dev/null
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
@@ -0,0 +1,49 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SmilePlus } from "lucide-react";
+import { stringToEmoji } from "../emoji-icon-picker";
+import { EmojiReactionPicker } from "./emoji-reaction-picker";
+
+const meta: Meta<typeof EmojiReactionPicker> = {
+  title: "EmojiReactionPicker",
+  component: EmojiReactionPicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof EmojiReactionPicker>;
+
+const EmojiPickerDemo = (args: React.ComponentProps<typeof EmojiReactionPicker>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
+
+  return (
+    <div className="space-y-4 p-4">
+      <EmojiReactionPicker
+        {...args}
+        isOpen={isOpen}
+        handleToggle={setIsOpen}
+        onChange={(emoji) => {
+          setSelectedEmoji(emoji);
+          console.log("Selected emoji:", emoji);
+        }}
+        label={
+          <span className={`flex items-center justify-center rounded-md px-2 size-8 text-xl`}>
+            {selectedEmoji ? stringToEmoji(selectedEmoji) : <SmilePlus className="h-6 text-custom-text-100" />}
+          </span>
+        }
+      />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <EmojiPickerDemo {...args} />,
+  args: {
+    closeOnSelect: true,
+    searchPlaceholder: "Search emojis...",
+  },
+};
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
new file mode 100644
index 00000000000..4d7f2a2c522
--- /dev/null
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
@@ -0,0 +1,65 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EmojiReaction, EmojiReactionGroup, EmojiReactionType } from "./emoji-reaction";
+
+const meta: Meta<typeof EmojiReaction> = {
+  title: "EmojiReaction",
+  component: EmojiReaction,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof EmojiReaction>;
+
+export const Single: Story = {
+  args: {
+    emoji: "👍",
+    count: 5,
+    reacted: false,
+    users: ["User 1", "User 2", "User 3"],
+  },
+};
+
+export const Reacted: Story = {
+  args: {
+    emoji: "❤️",
+    count: 12,
+    reacted: true,
+    users: ["User 1", "User 2", "User 3", "User 4", "User 5", "User 6"],
+  },
+};
+
+const EmojiReactionGroupDemo = () => {
+  const [reactions, setReactions] = useState<EmojiReactionType[]>([]);
+
+  const handleReaction = (emoji: string) => {
+    setReactions((prev) =>
+      prev.map((reaction) =>
+        reaction.emoji === emoji
+          ? {
+              ...reaction,
+              count: reaction.reacted ? reaction.count - 1 : reaction.count + 1,
+              reacted: !reaction.reacted,
+            }
+          : reaction
+      )
+    );
+  };
+
+  return (
+    <div className="p-4">
+      <EmojiReactionGroup
+        reactions={reactions}
+        onReactionClick={handleReaction}
+        onAddReaction={() => console.log("Add reaction clicked")}
+      />
+    </div>
+  );
+};
+
+export const Group: Story = {
+  render: () => <EmojiReactionGroupDemo />,
+};

From d4cdb1fd7115e16f646975cef746b403dce72a5d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 09:46:25 +0530
Subject: [PATCH 07/10] chore: propel config updated

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

diff --git a/packages/propel/package.json b/packages/propel/package.json
index 78d38174554..37f5e1e1b12 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -25,6 +25,8 @@
     "./command": "./dist/command/index.js",
     "./dialog": "./dist/dialog/index.js",
     "./emoji-icon-picker": "./dist/emoji-icon-picker/index.js",
+    "./emoji-reaction": "./dist/emoji-reaction/index.js",
+    "./emoji-reaction-picker": "./dist/emoji-reaction-picker/index.js",
     "./icons": "./dist/icons/index.js",
     "./menu": "./dist/menu/index.js",
     "./popover": "./dist/popover/index.js",
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
index e0698f8d1a3..c7c45f5d0cc 100644
--- a/packages/propel/tsdown.config.ts
+++ b/packages/propel/tsdown.config.ts
@@ -11,6 +11,8 @@ export default defineConfig({
     "src/command/index.ts",
     "src/dialog/index.ts",
     "src/emoji-icon-picker/index.ts",
+    "src/emoji-reaction/index.ts",
+    "src/emoji-reaction-picker/index.ts",
     "src/icons/index.ts",
     "src/menu/index.ts",
     "src/popover/index.ts",

From 2887cb15a685a9122672cf62c36537fbaed591d0 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 09:57:37 +0530
Subject: [PATCH 08/10] chore: code refactor

---
 .../emoji-reaction/emoji-reaction.stories.tsx | 32 -------------------
 1 file changed, 32 deletions(-)

diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
index 4d7f2a2c522..4bdedf53c93 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
@@ -31,35 +31,3 @@ export const Reacted: Story = {
     users: ["User 1", "User 2", "User 3", "User 4", "User 5", "User 6"],
   },
 };
-
-const EmojiReactionGroupDemo = () => {
-  const [reactions, setReactions] = useState<EmojiReactionType[]>([]);
-
-  const handleReaction = (emoji: string) => {
-    setReactions((prev) =>
-      prev.map((reaction) =>
-        reaction.emoji === emoji
-          ? {
-              ...reaction,
-              count: reaction.reacted ? reaction.count - 1 : reaction.count + 1,
-              reacted: !reaction.reacted,
-            }
-          : reaction
-      )
-    );
-  };
-
-  return (
-    <div className="p-4">
-      <EmojiReactionGroup
-        reactions={reactions}
-        onReactionClick={handleReaction}
-        onAddReaction={() => console.log("Add reaction clicked")}
-      />
-    </div>
-  );
-};
-
-export const Group: Story = {
-  render: () => <EmojiReactionGroupDemo />,
-};

From 5a883edc8c199f44d55c348fd64472ab037a3bda Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 12:47:53 +0530
Subject: [PATCH 09/10] fix: format error

---
 packages/propel/src/animated-counter/animated-counter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/propel/src/animated-counter/animated-counter.tsx b/packages/propel/src/animated-counter/animated-counter.tsx
index d5a9042bca3..09432358a2c 100644
--- a/packages/propel/src/animated-counter/animated-counter.tsx
+++ b/packages/propel/src/animated-counter/animated-counter.tsx
@@ -54,7 +54,7 @@ export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({ count, classNa
             "animate-[slideOut_0.25s_ease-out_forwards]",
             direction === "up" && "[--slide-out-dir:-100%]",
             direction === "down" && "[--slide-out-dir:100%]",
-            sizeClass,
+            sizeClass
           )}
           style={{
             animation:

From fe570f2b5f92d3e660cb1ec8c89abc30aac501b8 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Wed, 10 Sep 2025 00:42:41 +0530
Subject: [PATCH 10/10] chore: lint error resolved

---
 packages/i18n/src/locales/ru/translations.json                | 2 +-
 packages/propel/src/command/command.tsx                       | 4 ++--
 packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/i18n/src/locales/ru/translations.json b/packages/i18n/src/locales/ru/translations.json
index c6c84ed8ee2..ac1db05017c 100644
--- a/packages/i18n/src/locales/ru/translations.json
+++ b/packages/i18n/src/locales/ru/translations.json
@@ -2532,4 +2532,4 @@
     "close_button": "Закрыть панель навигации",
     "outline_floating_button": "Открыть структуру"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/propel/src/command/command.tsx b/packages/propel/src/command/command.tsx
index 25c977c3e98..e462a7f2d79 100644
--- a/packages/propel/src/command/command.tsx
+++ b/packages/propel/src/command/command.tsx
@@ -19,7 +19,7 @@ function CommandInput({ className, ...props }: React.ComponentProps<typeof Comma
   );
 }
 
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+function CommandList({ ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return <CommandPrimitive.List data-slot="command-list" {...props} />;
 }
 
@@ -27,7 +27,7 @@ function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive
   return <CommandPrimitive.Empty data-slot="command-empty" {...props} />;
 }
 
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+function CommandItem({ ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return <CommandPrimitive.Item data-slot="command-item" {...props} />;
 }
 
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
index 4bdedf53c93..55a4aa3b517 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
@@ -1,6 +1,5 @@
-import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { EmojiReaction, EmojiReactionGroup, EmojiReactionType } from "./emoji-reaction";
+import { EmojiReaction } from "./emoji-reaction";
 
 const meta: Meta<typeof EmojiReaction> = {
   title: "EmojiReaction",