feat: added the button component

Author: Aarif5435

apps/docs/stories/button.stories.tsx

@@ -8,11 +8,11 @@ const meta: Meta<typeof Button> = {
   argTypes: {
     variant: {
       control: { type: "select" },
-      options: ["primary", "danger", "warning", "default", "ghost", "link"],
+      options: ["primary", "danger", "warning", "secondary", "ghost", "link", "solid", "dashed"],
     },
     size: {
       control: { type: "select" },
-      options: ["default", "sm", "lg", "icon"],
+      options: ["xs", "sm", "md", "lg"],
     },
     theme: {
       control: { type: "select" },
@@ -45,9 +45,9 @@ type Story = StoryObj<typeof Button>;
 export const Primary: Story = {
   render: (args) => <Button {...args} />,
   args: {
-    children: "Button",
+    children: "Big Button 1",
     variant: "primary",
-    size: "default",
+    size: "xs",
     theme: "light",
     asChild: false,
     onClick: () => {
@@ -56,38 +56,65 @@ export const Primary: Story = {
   },
 };
 
-export const Default: Story = {
+export const Secondary: Story = {
   render: (args) => <Button {...args} />,
   args: {
     ...Primary.args,
-    children: "Default",
-    variant: "default",
+    children: "Big Button 1",
+    variant: "secondary",
   },
 };
 
-export const Large: Story = {
+export const Warning: Story = {
   render: (args) => <Button {...args} />,
   args: {
     ...Primary.args,
-    children: "Large",
-    size: "lg",
+    children: "Big Button 1",
+    variant: "warning",
   },
 };
 
-export const Small: Story = {
+export const Danger: Story = {
   render: (args) => <Button {...args} />,
   args: {
     ...Primary.args,
-    children: "Small",
-    size: "sm",
+    children: "Big Button 1",
+    variant: "danger",
   },
 };
 
-export const Dark: Story = {
+export const Link: Story = {
   render: (args) => <Button {...args} />,
   args: {
     ...Primary.args,
-    children: "Dark Theme",
-    theme: "dark",
+    children: "Big Button 1",
+    variant: "link",
   },
 };
+
+export const Ghost: Story = {
+  render: (args) => <Button {...args} />,
+  args: {
+    ...Primary.args,
+    children: "Big Button 1",
+    variant: "ghost",
+  },
+};
+
+export const Solid: Story = {
+  render: (args) => <Button {...args} />,
+  args: {
+    ...Primary.args,
+    children: "Big Button 1",
+    variant: "solid",
+  },
+};
+
+export const Dashed: Story = {
+  render: (args) => <Button {...args} />,
+  args: {
+    ...Primary.args,
+    children: "Big Button 1",
+    variant: "dashed",
+  },
+};

packages/button/src/button-variants.tsx

@@ -10,32 +10,34 @@ const buttonVariants = cva(
         danger:
           "bg-cherry-500 text-destructive-foreground shadow-sm hover:bg-cherry-500/90",
         warning:
-          "bg-amber-500 text-primary-foreground shadow hover:bg-amber-500/90",
-        default:
+          "bg-amber-500 text-black shadow hover:bg-amber-500/90",
+          secondary:
           "bg-slate-400 text-vanilla-100 shadow-sm hover:bg-slate-400/80",
         ghost: "text-primary-foreground ",
-        link: "text-slate-100 underline-offset-4 hover:underline",
+        link: "text-robin-500 underline-offset-4",
+        solid: "outline text-primary-foreground outline-[#1D2023] rounded-sm hover:bg-[#24272B]",
+        dashed: "outline-dashed text-primary-foreground outline-[#1D2023] hover:bg-[#24272B]"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        xs: "h-6 rounded-sm py-1 text-[10px]",
+        sm: "h-8 rounded-sm py-2 text-xs",
+        md: "h-9 rounded-sm py-2 text-xs",
+        lg: "h-12 rounded-sm py-3.5 text-base",
       },
       theme: {
         light: "",
         dark: "dark",
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: "primary",
+      size: "sm",
       theme: "light",
     },
     compoundVariants: [
       {
         theme: "dark",
-        variant: "default",
+        variant: "primary",
         className:
           "bg-robin-500 text-primary-foreground-dark shadow hover:bg-robin-500/90",
       },

packages/button/src/button.tsx

@@ -5,6 +5,7 @@ import { type VariantProps } from "class-variance-authority";
 import buttonVariants from "./button-variants";
 
 import { cn } from "./lib/utils";
+import React from "react";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -13,18 +14,78 @@ export interface ButtonProps
   theme?: "light" | "dark";
 }
 
+interface ArrowIconProps {
+	stroke: string;
+	className: string;
+}
+
+const svgLeftVariants = ({ size }: { size?: "xs" | "sm" | "md" | "lg" | null | undefined  }) => {
+  return cn({
+    "w-2.5 ml-2 mr-1.5": size === "xs",
+    "w-4 ml-4 mr-2":     size === "sm",
+    "w-4 ml-4 mr-2 h-4": size === "md",
+    "w-5 h-5 ml-6 mr-2": size === "lg",
+  });
+};
+
+const svgRighttVariants = ({ size }: { size?: "xs" | "sm" | "md" | "lg" | null | undefined }) => {
+  return cn({
+    "w-2.5 ml-1.5 mr-2": size === "xs",
+    "w-4 ml-2 mr-4":     size === "sm",
+    "w-4 ml-2 mr-4 h-4": size === "md",
+    "w-5 h-5 ml-2 mr-6": size === "lg",
+  });
+};
+
+
+const ArrowIcon = ({ stroke, className }: ArrowIconProps) => (
+	<svg
+		className={className}
+		viewBox="0 0 28 28"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M18.7776 20.7145L25.4919 14.0002L18.7776 7.28595"
+			stroke={stroke}
+			stroke-width="2.51786"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M9.82513 7.28595L3.11084 14.0002L9.82513 20.7145"
+			stroke={stroke}
+			stroke-width="2.51786"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+);
+
+
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
-    { className, variant, size, theme = "light", asChild = false, ...props },
+    { className, variant, size, children, theme = "light", asChild = false, ...props },
     ref
   ) => {
     const Comp = asChild ? Slot : "button";
+    const stroke = variant === 'warning' ? 'black' : variant === 'link' ? '#4E74F8' : 'white';
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, theme, className }))}
         ref={ref}
         {...props}
-      />
+      >
+        <ArrowIcon
+          stroke={stroke}
+          className={cn(svgLeftVariants({ size }))}
+        />
+        {children}
+        <ArrowIcon
+          stroke={stroke}
+          className={cn(svgRighttVariants({ size }))}
+        />
+      </Comp>
     );
   }
 );