From 0fb0ec1638de333635d45f82ef0d14670c679fd4 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Wed, 12 Mar 2025 18:07:00 +0530
Subject: [PATCH 1/4] chore: button-migration

---
 src/App.tsx                            |  7 +--
 src/examples/buttons.tsx               |  4 +-
 src/lib/button/ButtonIcon.tsx          | 25 +++++++++
 src/lib/button/ButtonText.tsx          | 24 +++++++++
 src/lib/button/KlerosSymbol.tsx        | 27 ++++++++++
 src/lib/button/base.tsx                | 69 -------------------------
 src/lib/button/index.tsx               | 70 ++++++++++++++++++++------
 src/lib/button/primary.tsx             | 39 --------------
 src/lib/button/secondary.tsx           | 43 ----------------
 src/lib/button/tertiary.tsx            | 24 ---------
 src/lib/dropdown/cascader/selector.tsx |  2 +-
 src/styles/global.css                  | 53 ++++++++++++-------
 12 files changed, 171 insertions(+), 216 deletions(-)
 create mode 100644 src/lib/button/ButtonIcon.tsx
 create mode 100644 src/lib/button/ButtonText.tsx
 create mode 100644 src/lib/button/KlerosSymbol.tsx
 delete mode 100644 src/lib/button/base.tsx
 delete mode 100644 src/lib/button/primary.tsx
 delete mode 100644 src/lib/button/secondary.tsx
 delete mode 100644 src/lib/button/tertiary.tsx

diff --git a/src/App.tsx b/src/App.tsx
index db459dd..05f077b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -57,10 +57,6 @@ const StyledTabs = styled(Tabs)`
   width: 995px;
 `;
 
-const StyledButton = styled(Button)`
-  margin-top: 64px;
-`;
-
 const App = () => {
   const [theme, setTheme] = useState(lightTheme);
   const [tailwindTheme, setTailwindTheme] = useState("light");
@@ -118,8 +114,9 @@ const App = () => {
             {example === "tooltip" && <Tooltips />}
             {example === "copiable" && <Copiable />}
           </StyledCard>
-          <StyledButton
+          <Button
             variant="primary"
+            className="mt-16"
             text={"Change theme"}
             onClick={changeTheme}
           />
diff --git a/src/examples/buttons.tsx b/src/examples/buttons.tsx
index 59071bc..f9521b8 100644
--- a/src/examples/buttons.tsx
+++ b/src/examples/buttons.tsx
@@ -6,9 +6,9 @@ const Buttons = () => (
   <>
     <Button text="Primary Button" />
     <Button small text="Get help" Icon={Telegram} />
-    <Button disabled isLoading text="Hello" />
+    <Button isDisabled isLoading text="Hello" />
     <Button variant="secondary" text="Hello" />
-    <Button variant="secondary" isLoading disabled text="Hello" />
+    <Button variant="secondary" isLoading isDisabled text="Hello" />
     <Button variant="tertiary" small text="Hello" />
   </>
 );
diff --git a/src/lib/button/ButtonIcon.tsx b/src/lib/button/ButtonIcon.tsx
new file mode 100644
index 0000000..82fc6e7
--- /dev/null
+++ b/src/lib/button/ButtonIcon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { cn } from "../../utils";
+import { ButtonProps } from ".";
+
+const ButtonIcon: React.FC<
+  Pick<ButtonProps, "Icon" | "icon" | "isDisabled" | "isLoading" | "variant">
+> = ({ Icon, icon, isDisabled, isLoading, variant }) => {
+  const isSecondary = variant === "secondary";
+  return (
+    icon ??
+    (Icon && (
+      <Icon
+        className={cn(
+          "button-svg",
+          "mr-2 h-4 w-4",
+          "fill-klerosUIComponentsWhiteBackground",
+          isLoading && ["invisible"],
+          isSecondary && ["fill-klerosUIComponentsPrimaryBlue"],
+          isDisabled && ["fill-klerosUIComponentsStroke"],
+        )}
+      />
+    ))
+  );
+};
+export default ButtonIcon;
diff --git a/src/lib/button/ButtonText.tsx b/src/lib/button/ButtonText.tsx
new file mode 100644
index 0000000..d5c0f56
--- /dev/null
+++ b/src/lib/button/ButtonText.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { ButtonProps } from ".";
+import { cn } from "../../utils";
+
+const ButtonText: React.FC<
+  Pick<ButtonProps, "text" | "isDisabled" | "isLoading" | "variant">
+> = ({ text, isDisabled, isLoading, variant }) => {
+  const isSecondary = variant === "secondary";
+  return (
+    <p
+      className={cn(
+        "button-text",
+        "text-klerosUIComponentsWhiteBackground text-center leading-[22px] font-semibold whitespace-pre",
+        isLoading && ["invisible"],
+        isSecondary && ["text-klerosUIComponentsPrimaryBlue"],
+        isDisabled && ["text-klerosUIComponentsStroke"],
+      )}
+    >
+      {text}
+    </p>
+  );
+};
+
+export default ButtonText;
diff --git a/src/lib/button/KlerosSymbol.tsx b/src/lib/button/KlerosSymbol.tsx
new file mode 100644
index 0000000..7a63cc3
--- /dev/null
+++ b/src/lib/button/KlerosSymbol.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { ButtonProps } from ".";
+import KlerosIcon from "../../assets/svgs/kleros.svg";
+import { cn } from "../../utils";
+
+const KlerosSymbol: React.FC<Pick<ButtonProps, "isDisabled" | "variant">> = ({
+  isDisabled,
+  variant,
+}) => {
+  const isPrimary = variant === "primary" || variant === undefined;
+  const isSecondary = variant === "secondary";
+  const isTertiary = variant === "tertiary";
+  return (
+    <KlerosIcon
+      className={cn(
+        "button-loading",
+        "absolute h-[22px]",
+        "fill-klerosUIComponentsStroke animate-breathing",
+        (isPrimary || isTertiary) && ["fill-klerosUIComponentsWhiteBackground"],
+        isSecondary && ["fill-klerosUIComponentsPrimaryBlue"],
+        isDisabled && ["fill-klerosUIComponentsStroke"],
+      )}
+    />
+  );
+};
+
+export default KlerosSymbol;
diff --git a/src/lib/button/base.tsx b/src/lib/button/base.tsx
deleted file mode 100644
index 10ec9a5..0000000
--- a/src/lib/button/base.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import styled, { keyframes } from "styled-components";
-import { borderBox, button, p, svg } from "../../styles/common-style";
-
-const breathing = keyframes`
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.3);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-`;
-
-export interface BaseButtonProps {
-  variant?: "primary" | "secondary" | "tertiary";
-  small?: boolean;
-  isLoading?: boolean;
-}
-
-const BaseButton = styled.button<BaseButtonProps>`
-  ${borderBox}
-  ${button}
-  position: relative;
-  width: fit-content;
-  height: fit-content;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: ${(props) => {
-    if (props.small)
-      return props.variant === "secondary" ? "5px 23px" : "6px 24px";
-    return props.variant === "secondary" ? "10.5px 31px" : "11.5px 32px";
-  }};
-  border-radius: 3px;
-  border: none;
-
-  transition: background ease
-    ${(props) => props.theme.klerosUIComponentsTransitionSpeed};
-
-  .button-text {
-    ${p}
-    ${({ isLoading }) => isLoading && "visibility: hidden;"}
-    font-weight: 600;
-    text-align: center;
-    white-space: pre;
-  }
-
-  .button-svg {
-    ${svg}
-    ${({ isLoading }) => isLoading && "visibility: hidden;"}
-    height: 16px;
-    width: 16px;
-    margin-right: 8px;
-  }
-
-  .button-loading {
-    position: absolute;
-    height: 22px;
-    fill: ${({ theme }) => theme.klerosUIComponentsStroke};
-    animation: ${breathing} 2s ease-out infinite normal;
-  }
-`;
-
-export default BaseButton;
diff --git a/src/lib/button/index.tsx b/src/lib/button/index.tsx
index 2e8a174..7172559 100644
--- a/src/lib/button/index.tsx
+++ b/src/lib/button/index.tsx
@@ -1,16 +1,27 @@
 import React from "react";
-import { BaseButtonProps } from "./base";
-import PrimaryButton from "./primary";
-import SecondaryButton from "./secondary";
-import TertiaryButton from "./tertiary";
-import KlerosSymbol from "../../assets/svgs/kleros.svg";
+import { cn } from "../../utils";
+import {
+  Button as AriaButton,
+  type ButtonProps as AriaButtonProps,
+} from "react-aria-components";
+import ButtonText from "./ButtonText";
+import KlerosSymbol from "./KlerosSymbol";
+import ButtonIcon from "./ButtonIcon";
 
-interface ButtonProps extends Omit<BaseButtonProps, "$loading"> {
-  disabled?: boolean;
+export interface BaseButtonProps {
+  variant?: "primary" | "secondary" | "tertiary";
+  small?: boolean;
+  isLoading?: boolean;
+}
+
+export interface ButtonProps
+  extends AriaButtonProps,
+    Omit<BaseButtonProps, "$loading"> {
   text: string;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
   icon?: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
 }
 
 const Button: React.FC<ButtonProps> = ({
@@ -20,18 +31,45 @@ const Button: React.FC<ButtonProps> = ({
   icon,
   onClick,
   isLoading,
+  className,
+  isDisabled,
   ...props
 }) => {
-  let ButtonType = PrimaryButton;
-  if (variant === "secondary") ButtonType = SecondaryButton;
-  if (variant === "tertiary") ButtonType = TertiaryButton;
-
+  const isPrimary = variant === "primary" || variant === undefined;
+  const isSecondary = variant === "secondary";
+  const isTertiary = variant === "tertiary";
   return (
-    <ButtonType {...{ variant, onClick, isLoading, ...props }}>
-      {isLoading && <KlerosSymbol className="button-loading" />}
-      {icon ?? (Icon && <Icon className="button-svg" />)}
-      <p className="button-text">{text}</p>
-    </ButtonType>
+    <AriaButton
+      className={cn(
+        "relative box-border h-fit w-fit",
+        "flex flex-row items-center justify-center",
+        "rounded-base hover:cursor-pointer",
+        "ease-ease transition-[background] duration-(--klerosUIComponentsTransitionSpeed)",
+
+        props.small ? "px-6 py-1.5" : "px-8 py-[11.5px]",
+        isPrimary && [
+          "bg-klerosUIComponentsPrimaryBlue hover:bg-klerosUIComponentsSecondaryBlue",
+        ],
+        isSecondary && [
+          "bg-klerosUIComponentsWhiteBackground hover:bg-klerosUIComponentsMediumBlue",
+          "border-klerosUIComponentsPrimaryBlue border",
+          props.small ? "px-[23px] py-[5px]" : "px-[31px] py-[10.5px]",
+        ],
+        isTertiary && [
+          "bg-klerosUIComponentsSecondaryPurple hover:bg-klerosUIComponentsPrimaryPurple",
+        ],
+        isDisabled && [
+          "bg-klerosUIComponentsLightGrey hover:bg-klerosUIComponentsLightGrey hover:cursor-not-allowed",
+          isSecondary && "border-klerosUIComponentsStroke border",
+        ],
+        className,
+      )}
+      {...{ variant, onClick, isLoading, isDisabled, ...props }}
+    >
+      {isLoading && <KlerosSymbol {...{ isDisabled, variant }} />}
+      <ButtonIcon {...{ icon, Icon, isDisabled, isLoading, variant }} />
+      <ButtonText {...{ isLoading, isDisabled, variant, text }} />
+    </AriaButton>
   );
 };
 
diff --git a/src/lib/button/primary.tsx b/src/lib/button/primary.tsx
deleted file mode 100644
index 14ca85a..0000000
--- a/src/lib/button/primary.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import styled from "styled-components";
-import BaseButton from "./base";
-
-const PrimaryButton = styled(BaseButton)`
-  background: ${(props) =>
-    props.disabled
-      ? props.theme.klerosUIComponentsLightGrey
-      : props.theme.klerosUIComponentsPrimaryBlue};
-
-  .button-text {
-    color: ${(props) =>
-      props.disabled
-        ? props.theme.klerosUIComponentsStroke
-        : props.theme.klerosUIComponentsWhiteBackground};
-  }
-
-  .button-svg {
-    fill: ${(props) =>
-      props.disabled
-        ? props.theme.klerosUIComponentsStroke
-        : props.theme.klerosUIComponentsWhiteBackground};
-  }
-
-  .button-loading {
-    fill: ${(props) =>
-      props.disabled
-        ? props.theme.klerosUIComponentsStroke
-        : props.theme.klerosUIComponentsWhiteBackground};
-  }
-
-  :hover {
-    background: ${(props) =>
-      props.disabled
-        ? props.theme.klerosUIComponentsLightGrey
-        : props.theme.klerosUIComponentsSecondaryBlue};
-  }
-`;
-
-export default PrimaryButton;
diff --git a/src/lib/button/secondary.tsx b/src/lib/button/secondary.tsx
deleted file mode 100644
index 7ac3ef0..0000000
--- a/src/lib/button/secondary.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import styled from "styled-components";
-import BaseButton from "./base";
-
-const SecondaryButton = styled(BaseButton)`
-  background: ${(props) =>
-    props.disabled
-      ? props.theme.klerosUIComponentsLightGrey
-      : props.theme.klerosUIComponentsWhiteBackground};
-  border: ${(props) =>
-    props.disabled
-      ? `1px solid ${props.theme.klerosUIComponentsStroke}`
-      : `1px solid ${props.theme.klerosUIComponentsPrimaryBlue}`};
-
-  .button-text {
-    color: ${(props) =>
-      props.disabled
-        ? props.theme.klerosUIComponentsStroke
-        : props.theme.klerosUIComponentsPrimaryBlue};
-  }
-
-  .button-svg {
-    fill: ${(props) =>
-      props.disabled
-        ? props.theme.klerosUIComponentsStroke
-        : props.theme.klerosUIComponentsPrimaryBlue};
-  }
-
-  .button-loading {
-    fill: ${(props) =>
-      props.disabled
-        ? props.theme.klerosUIComponentsStroke
-        : props.theme.klerosUIComponentsPrimaryBlue};
-  }
-
-  :hover {
-    background: ${(props) =>
-      props.disabled
-        ? props.theme.klerosUIComponentsLightGrey
-        : props.theme.klerosUIComponentsMediumBlue};
-  }
-`;
-
-export default SecondaryButton;
diff --git a/src/lib/button/tertiary.tsx b/src/lib/button/tertiary.tsx
deleted file mode 100644
index f0669a3..0000000
--- a/src/lib/button/tertiary.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from "styled-components";
-import BaseButton from "./base";
-
-const TertiaryButton = styled(BaseButton)`
-  background: ${(props) => props.theme.klerosUIComponentsSecondaryPurple};
-
-  .button-text {
-    color: ${(props) => props.theme.klerosUIComponentsWhiteBackground};
-  }
-
-  .button-svg {
-    fill: ${(props) => props.theme.klerosUIComponentsWhiteBackground};
-  }
-
-  .button-loading {
-    fill: ${(props) => props.theme.klerosUIComponentsWhiteBackground};
-  }
-
-  :hover {
-    background: ${(props) => props.theme.klerosUIComponentsPrimaryPurple};
-  }
-`;
-
-export default TertiaryButton;
diff --git a/src/lib/dropdown/cascader/selector.tsx b/src/lib/dropdown/cascader/selector.tsx
index 9c44ad8..5fbb7f1 100644
--- a/src/lib/dropdown/cascader/selector.tsx
+++ b/src/lib/dropdown/cascader/selector.tsx
@@ -33,7 +33,7 @@ const Selector: React.FC<ISelector> = ({
     <Button
       onClick={() => onSelect()}
       text={currentSelection ? `Select\n${currentSelection}` : "No Selection"}
-      disabled={!currentSelection}
+      isDisabled={!currentSelection}
     />
   </Wrapper>
 );
diff --git a/src/styles/global.css b/src/styles/global.css
index ecf99b0..8c9eb77 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -32,6 +32,8 @@
     --klerosUIComponentsTintPurple: #f4f0fa;
 
     --klerosUIComponentsTransitionSpeed: 0.25s;
+
+    --klerosUIComponentsBaseRadius: 3px;
   }
 
   :root[class="dark"] {
@@ -87,23 +89,6 @@
 }
 
 @layer components {
-  /* Animations */
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 0.5;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .fade-in {
-    animation: fadeIn 0.3s ease-in-out;
-  }
-
   /* Transitions */
   .hover-short-transition {
     transition: 0.1s;
@@ -169,4 +154,38 @@
   --color-klerosUIComponentsTransitionSpeed: var(
     --klerosUIComponentsTransitionSpeed
   );
+
+  --radius-base: var(--klerosUIComponentsBaseRadius);
+
+  /* Animations */
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  --animate-fade-in: fadeIn 0.3s ease-in-out;
+
+  @keyframes breathe {
+    0% {
+      transform: scale(1);
+    }
+
+    50% {
+      transform: scale(1.3);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+  --animate-breathing: breathe 2s ease-out infinite normal;
+
+  --ease-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
 }

From 269e5d788284cfe9d4ee45d4d71e731d47e9308f Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Wed, 12 Mar 2025 20:51:11 +0530
Subject: [PATCH 2/4] chore: button-stories

---
 .storybook/main.ts             | 22 ++++++++++
 src/lib/button/index.tsx       | 17 ++++++--
 src/stories/button.stories.tsx | 75 ++++++++++++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 src/stories/button.stories.tsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 44f6c0d..0a9643d 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -14,6 +14,28 @@ const config: StorybookConfig = {
   },
   typescript: {
     reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => {
+        if (prop.parent) {
+          const fileName = prop.parent.fileName;
+          // Include props from our own code (not in node_modules)
+          if (!fileName.includes("node_modules")) {
+            return true;
+          }
+          // Include props from react-aria-components and react-aria
+          if (
+            fileName.includes("react-aria-components") ||
+            fileName.includes("react-aria") ||
+            fileName.includes("node_modules/@react-types")
+          ) {
+            return true;
+          }
+          // Exclude all other props from node_modules
+          return false;
+        }
+        return true;
+      },
+    },
   },
 };
 export default config;
diff --git a/src/lib/button/index.tsx b/src/lib/button/index.tsx
index 7172559..8b2ab1e 100644
--- a/src/lib/button/index.tsx
+++ b/src/lib/button/index.tsx
@@ -9,8 +9,17 @@ import KlerosSymbol from "./KlerosSymbol";
 import ButtonIcon from "./ButtonIcon";
 
 export interface BaseButtonProps {
+  /** @default primary */
   variant?: "primary" | "secondary" | "tertiary";
+  /**
+   * Reduce the paddings on button
+   * @default false
+   */
   small?: boolean;
+  /**
+   * Indicate if button is in loading state
+   * @default false
+   */
   isLoading?: boolean;
 }
 
@@ -18,13 +27,15 @@ export interface ButtonProps
   extends AriaButtonProps,
     Omit<BaseButtonProps, "$loading"> {
   text: string;
+  /** A React svg element to show as icon on button */
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
+  /** A React node element to show as is on button */
   icon?: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   className?: string;
 }
 
-const Button: React.FC<ButtonProps> = ({
+function Button({
   text,
   variant,
   Icon,
@@ -34,7 +45,7 @@ const Button: React.FC<ButtonProps> = ({
   className,
   isDisabled,
   ...props
-}) => {
+}: ButtonProps): React.ReactElement {
   const isPrimary = variant === "primary" || variant === undefined;
   const isSecondary = variant === "secondary";
   const isTertiary = variant === "tertiary";
@@ -71,6 +82,6 @@ const Button: React.FC<ButtonProps> = ({
       <ButtonText {...{ isLoading, isDisabled, variant, text }} />
     </AriaButton>
   );
-};
+}
 
 export default Button;
diff --git a/src/stories/button.stories.tsx b/src/stories/button.stories.tsx
new file mode 100644
index 0000000..481ba5e
--- /dev/null
+++ b/src/stories/button.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IPreviewArgs } from "./utils";
+
+import Button from "../lib/button/index";
+import Telegram from "../assets/svgs/telegram.svg";
+
+const meta = {
+  component: Button,
+  title: "Button",
+  tags: ["autodocs"],
+  argTypes: {
+    // by default storybook generates an inputType,
+    // https://storybook.js.org/docs/essentials/controls#choosing-the-control-type
+    variant: {
+      options: ["primary", "secondary", "tertiary"],
+      control: { type: "radio" },
+    },
+    isDisabled: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta> & IPreviewArgs;
+
+export const PrimaryButton: Story = {
+  args: {
+    variant: "primary",
+    text: "Primary",
+    themeUI: "dark",
+    backgroundUI: "light",
+  },
+};
+
+export const SecondaryButton: Story = {
+  args: {
+    variant: "secondary",
+    text: "Secondary",
+    themeUI: "dark",
+    backgroundUI: "light",
+  },
+};
+
+export const TertiaryButton: Story = {
+  args: {
+    variant: "tertiary",
+    text: "Tertiary",
+    themeUI: "dark",
+    backgroundUI: "light",
+  },
+};
+
+export const IconButton: Story = {
+  args: {
+    variant: "primary",
+    text: "Telegram",
+    Icon: Telegram,
+    themeUI: "dark",
+    backgroundUI: "light",
+  },
+};
+
+export const LoadingButton: Story = {
+  args: {
+    variant: "primary",
+    text: "Loading",
+    isLoading: true,
+    isDisabled: true,
+    themeUI: "dark",
+    backgroundUI: "light",
+  },
+};

From 54cf95ccf684615cab51cb39c080e73e9f67db72 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Wed, 12 Mar 2025 21:00:50 +0530
Subject: [PATCH 3/4] refactor: mark-props-as-read-only

---
 src/lib/button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/button/index.tsx b/src/lib/button/index.tsx
index 8b2ab1e..027c65c 100644
--- a/src/lib/button/index.tsx
+++ b/src/lib/button/index.tsx
@@ -45,7 +45,7 @@ function Button({
   className,
   isDisabled,
   ...props
-}: ButtonProps): React.ReactElement {
+}: Readonly<ButtonProps>): React.ReactElement {
   const isPrimary = variant === "primary" || variant === undefined;
   const isSecondary = variant === "secondary";
   const isTertiary = variant === "tertiary";

From cff2b83a0a89f7792f529a3f5577355cf53d6315 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Wed, 12 Mar 2025 21:26:48 +0530
Subject: [PATCH 4/4] chore: remove-on-click-handler-in-favor-of-on-press

---
 src/App.tsx                            | 2 +-
 src/lib/button/index.tsx               | 4 +---
 src/lib/dropdown/cascader/selector.tsx | 2 +-
 src/lib/form/datepicker/dropdown.tsx   | 2 +-
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 05f077b..dc3fb29 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -118,7 +118,7 @@ const App = () => {
             variant="primary"
             className="mt-16"
             text={"Change theme"}
-            onClick={changeTheme}
+            onPress={changeTheme}
           />
         </StyledDiv>
       </ThemeProvider>
diff --git a/src/lib/button/index.tsx b/src/lib/button/index.tsx
index 027c65c..ae81e11 100644
--- a/src/lib/button/index.tsx
+++ b/src/lib/button/index.tsx
@@ -31,7 +31,6 @@ export interface ButtonProps
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
   /** A React node element to show as is on button */
   icon?: React.ReactNode;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
   className?: string;
 }
 
@@ -40,7 +39,6 @@ function Button({
   variant,
   Icon,
   icon,
-  onClick,
   isLoading,
   className,
   isDisabled,
@@ -75,7 +73,7 @@ function Button({
         ],
         className,
       )}
-      {...{ variant, onClick, isLoading, isDisabled, ...props }}
+      {...{ variant, isLoading, isDisabled, ...props }}
     >
       {isLoading && <KlerosSymbol {...{ isDisabled, variant }} />}
       <ButtonIcon {...{ icon, Icon, isDisabled, isLoading, variant }} />
diff --git a/src/lib/dropdown/cascader/selector.tsx b/src/lib/dropdown/cascader/selector.tsx
index 5fbb7f1..8ef9419 100644
--- a/src/lib/dropdown/cascader/selector.tsx
+++ b/src/lib/dropdown/cascader/selector.tsx
@@ -31,7 +31,7 @@ const Selector: React.FC<ISelector> = ({
 }) => (
   <Wrapper {...props}>
     <Button
-      onClick={() => onSelect()}
+      onPress={() => onSelect()}
       text={currentSelection ? `Select\n${currentSelection}` : "No Selection"}
       isDisabled={!currentSelection}
     />
diff --git a/src/lib/form/datepicker/dropdown.tsx b/src/lib/form/datepicker/dropdown.tsx
index 74d3c11..a2c9264 100644
--- a/src/lib/form/datepicker/dropdown.tsx
+++ b/src/lib/form/datepicker/dropdown.tsx
@@ -85,7 +85,7 @@ const Dropdown: React.FC<IDropdown> = ({
       )}
     </Selectors>
     <ButtonContainer>
-      <Button small variant={"primary"} text={"Select"} onClick={onSelect} />
+      <Button small variant={"primary"} text={"Select"} onPress={onSelect} />
     </ButtonContainer>
   </Container>
 );