@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/components/other/button.tsx

@@ -1,739 +1,739 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-import { Edit, Trash2, LogIn, UserPlus, Settings, LogOut, Phone, ArrowUp, ChevronLeft, ChevronRight } from "lucide-react";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500",
-        destructive: "bg-blue-700 text-white hover:bg-blue-800 focus:ring-blue-700",
-        outline: "border border-blue-500 bg-transparent text-blue-500 hover:bg-blue-500/10 hover:text-blue-600 focus:ring-blue-500",
-        secondary: "bg-blue-200 text-blue-900 hover:bg-blue-300 focus:ring-blue-500",
-        ghost: "text-blue-500 hover:bg-blue-500/10 hover:text-blue-600 focus:ring-blue-500",
-        link: "text-blue-500 underline-offset-4 hover:underline focus:ring-blue-500",
-        edit: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 min-w-[80px] text-base min-h-[2.5rem] rounded-lg touch-action-manipulation",
-        "edit-bio": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 min-w-[80px] text-base min-h-[2.5rem] rounded-lg touch-action-manipulation z-10",
-        "edit-about": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 min-w-[80px] text-base min-h-[2.5rem] rounded-lg touch-action-manipulation z-10 mt-4",
-        "edit-icon": "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 rounded-full h-10 w-10 flex items-center justify-center",
-        create: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 min-w-[80px] text-base",
-        upload: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 w-full sm:w-auto text-base sm:text-lg px-4 py-2 sm:px-6 sm:py-3 font-bold",
-        update: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 disabled:bg-gray-600 w-full sm:w-auto min-w-[80px] text-base min-h-[2.5rem] rounded-lg font-semibold",
-        cancel: "bg-gray-600 text-white hover:bg-gray-500 focus:ring-gray-600 w-full sm:w-auto min-w-[80px] text-base min-h-[2.5rem] rounded-lg font-semibold",
-        close: "text-blue-300 hover:text-white hover:bg-blue-600/50 focus:ring-blue-500 h-12 w-12 p-3 rounded-full absolute top-4 right-4 z-50 transition-all duration-200 flex items-center justify-center",
-        "close-form": "text-blue-300 hover:text-white hover:bg-blue-600/50 focus:ring-blue-500 rounded-full p-2 sm:p-3 transition-all duration-300 w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center absolute top-1 right-1 sm:top-1 sm:right-1 z-50",
-        "close-confirm": "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 rounded-full p-2 w-10 h-10 flex items-center justify-center absolute top-2 right-2",
-        toggle: "bg-transparent text-blue-500 hover:bg-blue-500/10 hover:scale-105 focus:ring-blue-500 text-base sm:text-lg px-6 py-3 h-auto font-bold transform transition-all duration-300 ease-in-out",
-        "toggle-bio": "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 text-lg px-8 py-3 rounded-[1.5rem] font-bold",
-        "toggle-keywords": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 text-sm px-4 py-2 rounded-md font-semibold",
-        delete: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-600 disabled:bg-gray-600 w-full sm:w-auto min-w-[80px] text-base min-h-[2.5rem] rounded-lg font-semibold",
-        "delete-icon": "text-blue-500 hover:text-blue-600 focus:ring-blue-500 p-3 min-h-[2rem] min-w-[2rem] text-2xl font-bold transition-colors",
-        trash: "text-[#F47C7C] hover:bg-[#2A3A66]/70 focus:ring-[#F47C7C] mt-2 sm:mt-0 z-10",
-        "trash-icon": "bg-red-600 text-white hover:bg-red-700 focus:ring-red-600 rounded-full h-10 w-10 flex items-center justify-center",
-        action: "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 w-full sm:w-auto text-lg px-6 py-3 rounded-full font-bold",
-        add: "bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white w-full sm:w-auto rounded-lg font-medium py-3",
-        "chat-toggle": "hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 p-2 w-10 h-10 bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 transition-colors",
-        "chat-submit": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 disabled:bg-gray-600 px-4 py-2 rounded-md font-semibold",
-        "external-link": "bg-blue-600 text-white px-3 py-1 sm:px-4 sm:py-2 rounded-lg text-sm sm:text-base hover:bg-blue-700 focus:ring-blue-500",
-        retry: "bg-blue-600 text-white px-3 py-1 rounded-lg hover:bg-blue-700 focus:ring-blue-500",
-        reset: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 rounded-lg",
-        "cancel-outline": "border border-gray-600 text-gray-300 hover:bg-gray-700/50 focus:ring-gray-600 rounded-lg",
-        confirm: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 rounded-lg",
-        submit: "w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium py-3 rounded-lg transition-all duration-300 disabled:cursor-not-allowed",
-        "contact-submit": "w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-4 px-10 rounded-2xl text-lg tracking-wide transition-all duration-300 disabled:bg-gray-400/80 disabled:cursor-not-allowed shadow-lg hover:shadow-xl",
-        "edit-toggle": "bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-lg",
-        "form-submit": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 disabled:bg-gray-600 w-full sm:w-auto min-w-[80px] text-base min-h-[2.5rem] rounded-lg font-semibold",
-        filter: "bg-blue-200 text-blue-900 hover:bg-blue-300 focus:ring-blue-500 px-4 py-2 sm:px-6 sm:py-3 rounded-[1.5rem] text-base sm:text-lg font-medium transition-all duration-300",
-        "filter-active": "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 px-4 py-2 sm:px-6 sm:py-3 rounded-[1.5rem] text-base sm:text-lg font-medium transition-all duration-300",
-        "filter-blue-active": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 px-4 py-2 sm:px-6 sm:py-3 rounded-md text-base sm:text-lg font-medium transition-all duration-300",
-        hero: "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 text-lg px-8 py-3 rounded-lg font-bold shadow-lg hover:shadow-xl transition-all duration-300",
-        readMore: "bg-transparent border-2 border-blue-500 text-blue-500 hover:bg-blue-500/10 focus:ring-blue-500 text-lg px-6 py-2 rounded-lg font-semibold transition-all duration-300",
-        scrollToTop: "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 rounded-full shadow-xl transition-all duration-200 transform hover:scale-105",
-        phone: "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 rounded-full shadow-xl transition-all duration-200 transform hover:scale-105",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 px-4 py-2",
-        lg: "h-11 px-8",
-        icon: "h-10 w-10",
-        close: "h-12 w-12 p-3",
-        hero: "h-12 px-10 py-4",
-        readMore: "h-11 px-6 py-2",
-        bubble: "h-12 w-12 md:h-16 md:w-16 p-4 md:p-6",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Button.displayName = "Button";
-
-const EditIconButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "icon", variant = "edit-icon", children, ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn("absolute top-0 right-14", className)}
-        ref={ref}
-        aria-label="Edit image"
-        {...props}
-      >
-        {children || <Edit className="h-5 w-5" />}
-      </Button>
-    );
-  }
-);
-EditIconButton.displayName = "EditIconButton";
-
-const CreateButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "sm", children = "Create", ...props }, ref) => {
-    return (
-      <Button
-        variant="create"
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Create new item"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-CreateButton.displayName = "CreateButton";
-
-const UploadButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "lg", children = "Upload", ...props }, ref) => {
-    return (
-      <Button
-        variant="upload"
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Upload file"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-UploadButton.displayName = "UploadButton";
-
-const UpdateButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "default", variant = "update", children = "Update", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Update item"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-UpdateButton.displayName = "UpdateButton";
-
-const CancelButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "default", variant = "cancel", children = "Cancel", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Cancel action"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-CancelButton.displayName = "CancelButton";
-
-const CloseButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "close", variant = "close", children, ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Close modal"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-CloseButton.displayName = "CloseButton";
-
-const ToggleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "lg", variant = "toggle", children = "Toggle", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Toggle content visibility"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-ToggleButton.displayName = "ToggleButton";
-
-const DeleteButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "default", variant = "delete", children = "Delete", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Delete item"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-DeleteButton.displayName = "DeleteButton";
-
-const TrashIconButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "icon", variant = "trash-icon", children, ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn("absolute top-0 right-1", className)}
-        ref={ref}
-        aria-label="Delete image"
-        {...props}
-      >
-        {children || <Trash2 className="h-5 w-5" />}
-      </Button>
-    );
-  }
-);
-TrashIconButton.displayName = "TrashIconButton";
-
-const DeleteIconButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "sm", variant = "delete-icon", children = "✕", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn("absolute top-1 right-1", className)}
-        ref={ref}
-        aria-label="Delete item"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-DeleteIconButton.displayName = "DeleteIconButton";
-
-const ActionButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "lg", children = "Action", ...props }, ref) => {
-    return (
-      <Button
-        variant="action"
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Perform action"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-ActionButton.displayName = "ActionButton";
-
-const AddButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "default", children = "Add", ...props }, ref) => {
-    return (
-      <Button
-        variant="add"
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Add new item"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-AddButton.displayName = "AddButton";
-
-const ChatToggleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "icon", variant = "chat-toggle", children, ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Toggle chatbot"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-ChatToggleButton.displayName = "ChatToggleButton";
-
-const ChatSubmitButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "default", variant = "chat-submit", children = "Submit", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Submit chat message"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-ChatSubmitButton.displayName = "ChatSubmitButton";
-
-const RetryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "default", variant = "retry", children = "Retry", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Retry action"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-RetryButton.displayName = "RetryButton";
-
-const ResetButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "sm", variant = "reset", children = "Reset", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Reset credits"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-ResetButton.displayName = "ResetButton";
-
-const ConfirmButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "default", variant = "confirm", children = "Confirm", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Confirm action"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-ConfirmButton.displayName = "ConfirmButton";
-
-const SubmitButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "default", variant = "form-submit", children = "Submit", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Submit form"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-SubmitButton.displayName = "SubmitButton";
-
-const ContactSubmitButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "default", variant = "contact-submit", children = "Send Message", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Submit contact form"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-ContactSubmitButton.displayName = "ContactSubmitButton";
-
-const ExternalLinkButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "default", variant = "external-link", children = "Open Link", asChild = true, ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        asChild={asChild}
-        ref={ref}
-        aria-label="Open external link"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-ExternalLinkButton.displayName = "ExternalLinkButton";
-
-const BackButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "sm", variant = "submit", children = "Back", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn("flex items-center gap-2", className)}
-        ref={ref}
-        aria-label="Navigate back"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-BackButton.displayName = "BackButton";
-
-const EditToggleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "sm", variant = "edit-toggle", children = "Edit", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Toggle edit mode"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-EditToggleButton.displayName = "EditToggleButton";
-
-const NextButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = "update", children = <ChevronRight className="h-6 w-6" />, ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        className={cn(
-          "!w-10 !h-10 !rounded-full !p-0 !min-w-0 absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white flex items-center justify-center z-0",
-          className
-        )}
-        ref={ref}
-        aria-label="Next step"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-NextButton.displayName = "NextButton";
-
-const PrevButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = "update", children = <ChevronLeft className="h-6 w-6" />, ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        className={cn(
-          "!w-10 !h-10 !rounded-full !p-0 !min-w-0 absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white flex items-center justify-center z-0",
-          "flex items-center gap-2",
-          className
-        )}
-        ref={ref}
-        aria-label="Previous step"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-PrevButton.displayName = "PrevButton";
-
-const HeroButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "hero", variant = "hero", children = "Get Started", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Hero section call to action"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-HeroButton.displayName = "HeroButton";
-
-const ReadMoreButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "readMore", variant = "readMore", children = "Read More", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Show more content"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-ReadMoreButton.displayName = "ReadMoreButton";
-
-interface FilterButtonProps extends ButtonProps {
-  isActive?: boolean;
-  useBlueActive?: boolean;
-}
-
-const FilterButton = React.forwardRef<HTMLButtonElement, FilterButtonProps>(
-  ({ className, isActive = false, useBlueActive = false, children, ...props }, ref) => {
-    return (
-      <Button
-        variant={isActive ? (useBlueActive ? "filter-blue-active" : "filter-active") : "filter"}
-        className={cn(className)}
-        ref={ref}
-        aria-label={`Filter by ${children}`}
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-FilterButton.displayName = "FilterButton";
-
-const SignInButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "sm", variant = "action", children = "Login", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn("flex items-center gap-2", className)}
-        ref={ref}
-        aria-label="Login"
-        {...props}
-      >
-        <LogIn className="h-4 w-4 sm:h-5 sm:w-5" />
-        {children}
-      </Button>
-    );
-  }
-);
-SignInButton.displayName = "SignInButton";
-
-const SignUpButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "sm", variant = "action", children = "Sign Up", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn("flex items-center gap-2", className)}
-        ref={ref}
-        aria-label="Sign Up"
-        {...props}
-      >
-        <UserPlus className="h-4 w-4 sm:h-5 sm:w-5" />
-        {children}
-      </Button>
-    );
-  }
-);
-SignUpButton.displayName = "SignUpButton";
-
-const SettingsButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "sm", variant = "action", children, ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn("flex items-center gap-2", className)}
-        ref={ref}
-        aria-label="Admin Menu"
-        {...props}
-      >
-        <Settings className="h-4 w-4 sm:h-5 sm:w-5" />
-        {children}
-      </Button>
-    );
-  }
-);
-SettingsButton.displayName = "SettingsButton";
-
-const SignOutButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "sm", variant = "action", children = "Logout", ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn("flex items-center gap-2", className)}
-        ref={ref}
-        aria-label="Logout"
-        {...props}
-      >
-        <LogOut className="h-4 w-4 sm:h-5 sm:w-5" />
-        {children}
-      </Button>
-    );
-  }
-);
-SignOutButton.displayName = "SignOutButton";
-
-const ScrollToTopButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "bubble", variant = "scrollToTop", children, ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Scroll to top"
-        {...props}
-      >
-        {children || <ArrowUp className="h-6 w-6 stroke-2 md:stroke-[3]" />}
-      </Button>
-    );
-  }
-);
-ScrollToTopButton.displayName = "ScrollToTopButton";
-
-const PhoneButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = "bubble", variant = "phone", children, ...props }, ref) => {
-    return (
-      <Button
-        variant={variant}
-        size={size}
-        className={cn(className)}
-        ref={ref}
-        aria-label="Call us"
-        {...props}
-      >
-        {children || <Phone className="h-6 w-6 stroke-2 md:stroke-[3] rotate-12" />}
-      </Button>
-    );
-  }
-);
-PhoneButton.displayName = "PhoneButton";
-
-export {
-  Button,
-  EditIconButton,
-  CreateButton,
-  UploadButton,
-  UpdateButton,
-  CancelButton,
-  CloseButton,
-  ToggleButton,
-  DeleteButton,
-  TrashIconButton,
-  DeleteIconButton,
-  ActionButton,
-  AddButton,
-  ChatToggleButton,
-  ChatSubmitButton,
-  RetryButton,
-  ResetButton,
-  ConfirmButton,
-  SubmitButton,
-  ContactSubmitButton,
-  ExternalLinkButton,
-  BackButton,
-  EditToggleButton,
-  NextButton,
-  PrevButton,
-  HeroButton,
-  ReadMoreButton,
-  FilterButton,
-  SignInButton,
-  SignUpButton,
-  SettingsButton,
-  SignOutButton,
-  ScrollToTopButton,
-  PhoneButton,
-  buttonVariants,
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { Edit, Trash2, LogIn, UserPlus, Settings, LogOut, Phone, ArrowUp, ChevronLeft, ChevronRight } from "lucide-react";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500",
+        destructive: "bg-blue-700 text-white hover:bg-blue-800 focus:ring-blue-700",
+        outline: "border border-blue-500 bg-transparent text-blue-500 hover:bg-blue-500/10 hover:text-blue-600 focus:ring-blue-500",
+        secondary: "bg-blue-200 text-blue-900 hover:bg-blue-300 focus:ring-blue-500",
+        ghost: "text-blue-500 hover:bg-blue-500/10 hover:text-blue-600 focus:ring-blue-500",
+        link: "text-blue-500 underline-offset-4 hover:underline focus:ring-blue-500",
+        edit: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 min-w-[80px] text-base min-h-[2.5rem] rounded-lg touch-action-manipulation",
+        "edit-bio": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 min-w-[80px] text-base min-h-[2.5rem] rounded-lg touch-action-manipulation z-10",
+        "edit-about": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 min-w-[80px] text-base min-h-[2.5rem] rounded-lg touch-action-manipulation z-10 mt-4",
+        "edit-icon": "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 rounded-full h-10 w-10 flex items-center justify-center",
+        create: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 min-w-[80px] text-base",
+        upload: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 w-full sm:w-auto text-base sm:text-lg px-4 py-2 sm:px-6 sm:py-3 font-bold",
+        update: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 disabled:bg-gray-600 w-full sm:w-auto min-w-[80px] text-base min-h-[2.5rem] rounded-lg font-semibold",
+        cancel: "bg-gray-600 text-white hover:bg-gray-500 focus:ring-gray-600 w-full sm:w-auto min-w-[80px] text-base min-h-[2.5rem] rounded-lg font-semibold",
+        close: "text-blue-300 hover:text-white hover:bg-blue-600/50 focus:ring-blue-500 h-12 w-12 p-3 rounded-full absolute top-4 right-4 z-50 transition-all duration-200 flex items-center justify-center",
+        "close-form": "text-blue-300 hover:text-white hover:bg-blue-600/50 focus:ring-blue-500 rounded-full p-2 sm:p-3 transition-all duration-300 w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center absolute top-1 right-1 sm:top-1 sm:right-1 z-50",
+        "close-confirm": "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 rounded-full p-2 w-10 h-10 flex items-center justify-center absolute top-2 right-2",
+        toggle: "bg-transparent text-blue-500 hover:bg-blue-500/10 hover:scale-105 focus:ring-blue-500 text-base sm:text-lg px-6 py-3 h-auto font-bold transform transition-all duration-300 ease-in-out",
+        "toggle-bio": "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 text-lg px-8 py-3 rounded-[1.5rem] font-bold",
+        "toggle-keywords": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 text-sm px-4 py-2 rounded-md font-semibold",
+        delete: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-600 disabled:bg-gray-600 w-full sm:w-auto min-w-[80px] text-base min-h-[2.5rem] rounded-lg font-semibold",
+        "delete-icon": "text-blue-500 hover:text-blue-600 focus:ring-blue-500 p-3 min-h-[2rem] min-w-[2rem] text-2xl font-bold transition-colors",
+        trash: "text-[#F47C7C] hover:bg-[#2A3A66]/70 focus:ring-[#F47C7C] mt-2 sm:mt-0 z-10",
+        "trash-icon": "bg-red-600 text-white hover:bg-red-700 focus:ring-red-600 rounded-full h-10 w-10 flex items-center justify-center",
+        action: "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 w-full sm:w-auto text-lg px-6 py-3 rounded-full font-bold",
+        add: "bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white w-full sm:w-auto rounded-lg font-medium py-3",
+        "chat-toggle": "hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 p-2 w-10 h-10 bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 transition-colors",
+        "chat-submit": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 disabled:bg-gray-600 px-4 py-2 rounded-md font-semibold",
+        "external-link": "bg-blue-600 text-white px-3 py-1 sm:px-4 sm:py-2 rounded-lg text-sm sm:text-base hover:bg-blue-700 focus:ring-blue-500",
+        retry: "bg-blue-600 text-white px-3 py-1 rounded-lg hover:bg-blue-700 focus:ring-blue-500",
+        reset: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 rounded-lg",
+        "cancel-outline": "border border-gray-600 text-gray-300 hover:bg-gray-700/50 focus:ring-gray-600 rounded-lg",
+        confirm: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 rounded-lg",
+        submit: "w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium py-3 rounded-lg transition-all duration-300 disabled:cursor-not-allowed",
+        "contact-submit": "w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-4 px-10 rounded-2xl text-lg tracking-wide transition-all duration-300 disabled:bg-gray-400/80 disabled:cursor-not-allowed shadow-lg hover:shadow-xl",
+        "edit-toggle": "bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-lg",
+        "form-submit": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 disabled:bg-gray-600 w-full sm:w-auto min-w-[80px] text-base min-h-[2.5rem] rounded-lg font-semibold",
+        filter: "bg-blue-200 text-blue-900 hover:bg-blue-300 focus:ring-blue-500 px-4 py-2 sm:px-6 sm:py-3 rounded-[1.5rem] text-base sm:text-lg font-medium transition-all duration-300",
+        "filter-active": "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 px-4 py-2 sm:px-6 sm:py-3 rounded-[1.5rem] text-base sm:text-lg font-medium transition-all duration-300",
+        "filter-blue-active": "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 px-4 py-2 sm:px-6 sm:py-3 rounded-md text-base sm:text-lg font-medium transition-all duration-300",
+        hero: "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 text-lg px-8 py-3 rounded-lg font-bold shadow-lg hover:shadow-xl transition-all duration-300",
+        readMore: "bg-transparent border-2 border-blue-500 text-blue-500 hover:bg-blue-500/10 focus:ring-blue-500 text-lg px-6 py-2 rounded-lg font-semibold transition-all duration-300",
+        scrollToTop: "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 rounded-full shadow-xl transition-all duration-200 transform hover:scale-105",
+        phone: "bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 focus:ring-blue-500 rounded-full shadow-xl transition-all duration-200 transform hover:scale-105",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-4 py-2",
+        lg: "h-11 px-8",
+        icon: "h-10 w-10",
+        close: "h-12 w-12 p-3",
+        hero: "h-12 px-10 py-4",
+        readMore: "h-11 px-6 py-2",
+        bubble: "h-12 w-12 md:h-16 md:w-16 p-4 md:p-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+const EditIconButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "icon", variant = "edit-icon", children, ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn("absolute top-0 right-14", className)}
+        ref={ref}
+        aria-label="Edit image"
+        {...props}
+      >
+        {children || <Edit className="h-5 w-5" />}
+      </Button>
+    );
+  }
+);
+EditIconButton.displayName = "EditIconButton";
+
+const CreateButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "sm", children = "Create", ...props }, ref) => {
+    return (
+      <Button
+        variant="create"
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Create new item"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+CreateButton.displayName = "CreateButton";
+
+const UploadButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "lg", children = "Upload", ...props }, ref) => {
+    return (
+      <Button
+        variant="upload"
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Upload file"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+UploadButton.displayName = "UploadButton";
+
+const UpdateButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "default", variant = "update", children = "Update", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Update item"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+UpdateButton.displayName = "UpdateButton";
+
+const CancelButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "default", variant = "cancel", children = "Cancel", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Cancel action"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+CancelButton.displayName = "CancelButton";
+
+const CloseButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "close", variant = "close", children, ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Close modal"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+CloseButton.displayName = "CloseButton";
+
+const ToggleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "lg", variant = "toggle", children = "Toggle", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Toggle content visibility"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+
+const DeleteButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "default", variant = "delete", children = "Delete", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Delete item"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+DeleteButton.displayName = "DeleteButton";
+
+const TrashIconButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "icon", variant = "trash-icon", children, ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn("absolute top-0 right-1", className)}
+        ref={ref}
+        aria-label="Delete image"
+        {...props}
+      >
+        {children || <Trash2 className="h-5 w-5" />}
+      </Button>
+    );
+  }
+);
+TrashIconButton.displayName = "TrashIconButton";
+
+const DeleteIconButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "sm", variant = "delete-icon", children = "✕", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn("absolute top-1 right-1", className)}
+        ref={ref}
+        aria-label="Delete item"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+DeleteIconButton.displayName = "DeleteIconButton";
+
+const ActionButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "lg", children = "Action", ...props }, ref) => {
+    return (
+      <Button
+        variant="action"
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Perform action"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+ActionButton.displayName = "ActionButton";
+
+const AddButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "default", children = "Add", ...props }, ref) => {
+    return (
+      <Button
+        variant="add"
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Add new item"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+AddButton.displayName = "AddButton";
+
+const ChatToggleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "icon", variant = "chat-toggle", children, ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Toggle chatbot"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+ChatToggleButton.displayName = "ChatToggleButton";
+
+const ChatSubmitButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "default", variant = "chat-submit", children = "Submit", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Submit chat message"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+ChatSubmitButton.displayName = "ChatSubmitButton";
+
+const RetryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "default", variant = "retry", children = "Retry", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Retry action"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+RetryButton.displayName = "RetryButton";
+
+const ResetButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "sm", variant = "reset", children = "Reset", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Reset credits"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+ResetButton.displayName = "ResetButton";
+
+const ConfirmButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "default", variant = "confirm", children = "Confirm", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Confirm action"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+ConfirmButton.displayName = "ConfirmButton";
+
+const SubmitButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "default", variant = "form-submit", children = "Submit", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Submit form"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+SubmitButton.displayName = "SubmitButton";
+
+const ContactSubmitButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "default", variant = "contact-submit", children = "Send Message", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Submit contact form"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+ContactSubmitButton.displayName = "ContactSubmitButton";
+
+const ExternalLinkButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "default", variant = "external-link", children = "Open Link", asChild = true, ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        asChild={asChild}
+        ref={ref}
+        aria-label="Open external link"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+ExternalLinkButton.displayName = "ExternalLinkButton";
+
+const BackButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "sm", variant = "submit", children = "Back", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn("flex items-center gap-2", className)}
+        ref={ref}
+        aria-label="Navigate back"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+BackButton.displayName = "BackButton";
+
+const EditToggleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "sm", variant = "edit-toggle", children = "Edit", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Toggle edit mode"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+EditToggleButton.displayName = "EditToggleButton";
+
+const NextButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "update", children = <ChevronRight className="h-6 w-6" />, ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        className={cn(
+          "!w-10 !h-10 !rounded-full !p-0 !min-w-0 absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white flex items-center justify-center z-0",
+          className
+        )}
+        ref={ref}
+        aria-label="Next step"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+NextButton.displayName = "NextButton";
+
+const PrevButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "update", children = <ChevronLeft className="h-6 w-6" />, ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        className={cn(
+          "!w-10 !h-10 !rounded-full !p-0 !min-w-0 absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white flex items-center justify-center z-0",
+          "flex items-center gap-2",
+          className
+        )}
+        ref={ref}
+        aria-label="Previous step"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+PrevButton.displayName = "PrevButton";
+
+const HeroButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "hero", variant = "hero", children = "Get Started", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Hero section call to action"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+HeroButton.displayName = "HeroButton";
+
+const ReadMoreButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "readMore", variant = "readMore", children = "Read More", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Show more content"
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+ReadMoreButton.displayName = "ReadMoreButton";
+
+interface FilterButtonProps extends ButtonProps {
+  isActive?: boolean;
+  useBlueActive?: boolean;
+}
+
+const FilterButton = React.forwardRef<HTMLButtonElement, FilterButtonProps>(
+  ({ className, isActive = false, useBlueActive = false, children, ...props }, ref) => {
+    return (
+      <Button
+        variant={isActive ? (useBlueActive ? "filter-blue-active" : "filter-active") : "filter"}
+        className={cn(className)}
+        ref={ref}
+        aria-label={`Filter by ${children}`}
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+FilterButton.displayName = "FilterButton";
+
+const SignInButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "sm", variant = "action", children = "Login", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn("flex items-center gap-2", className)}
+        ref={ref}
+        aria-label="Login"
+        {...props}
+      >
+        <LogIn className="h-4 w-4 sm:h-5 sm:w-5" />
+        {children}
+      </Button>
+    );
+  }
+);
+SignInButton.displayName = "SignInButton";
+
+const SignUpButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "sm", variant = "action", children = "Sign Up", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn("flex items-center gap-2", className)}
+        ref={ref}
+        aria-label="Sign Up"
+        {...props}
+      >
+        <UserPlus className="h-4 w-4 sm:h-5 sm:w-5" />
+        {children}
+      </Button>
+    );
+  }
+);
+SignUpButton.displayName = "SignUpButton";
+
+const SettingsButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "sm", variant = "action", children, ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn("flex items-center gap-2", className)}
+        ref={ref}
+        aria-label="Admin Menu"
+        {...props}
+      >
+        <Settings className="h-4 w-4 sm:h-5 sm:w-5" />
+        {children}
+      </Button>
+    );
+  }
+);
+SettingsButton.displayName = "SettingsButton";
+
+const SignOutButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "sm", variant = "action", children = "Logout", ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn("flex items-center gap-2", className)}
+        ref={ref}
+        aria-label="Logout"
+        {...props}
+      >
+        <LogOut className="h-4 w-4 sm:h-5 sm:w-5" />
+        {children}
+      </Button>
+    );
+  }
+);
+SignOutButton.displayName = "SignOutButton";
+
+const ScrollToTopButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "bubble", variant = "scrollToTop", children, ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Scroll to top"
+        {...props}
+      >
+        {children || <ArrowUp className="h-6 w-6 stroke-2 md:stroke-[3]" />}
+      </Button>
+    );
+  }
+);
+ScrollToTopButton.displayName = "ScrollToTopButton";
+
+const PhoneButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size = "bubble", variant = "phone", children, ...props }, ref) => {
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        className={cn(className)}
+        ref={ref}
+        aria-label="Call us"
+        {...props}
+      >
+        {children || <Phone className="h-6 w-6 stroke-2 md:stroke-[3] rotate-12" />}
+      </Button>
+    );
+  }
+);
+PhoneButton.displayName = "PhoneButton";
+
+export {
+  Button,
+  EditIconButton,
+  CreateButton,
+  UploadButton,
+  UpdateButton,
+  CancelButton,
+  CloseButton,
+  ToggleButton,
+  DeleteButton,
+  TrashIconButton,
+  DeleteIconButton,
+  ActionButton,
+  AddButton,
+  ChatToggleButton,
+  ChatSubmitButton,
+  RetryButton,
+  ResetButton,
+  ConfirmButton,
+  SubmitButton,
+  ContactSubmitButton,
+  ExternalLinkButton,
+  BackButton,
+  EditToggleButton,
+  NextButton,
+  PrevButton,
+  HeroButton,
+  ReadMoreButton,
+  FilterButton,
+  SignInButton,
+  SignUpButton,
+  SettingsButton,
+  SignOutButton,
+  ScrollToTopButton,
+  PhoneButton,
+  buttonVariants,
 };