Button

import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  cn(
    //* base *//
    "relative flex min-h-[44px] min-w-[44px] items-center justify-center",
    "text-[17px] leading-[22px] font-medium",
    "rounded-md ring-offset-white *:pointer-events-none",
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
    "[font-feature-settings:'liga'_off,_'clig'_off]",
    //* icon *//
    "[&_[data-slot='icon']]:stroke-[2.25px]",
    "[&_[data-slot='icon']]:transition-opacity [&_[data-slot='icon']]:duration-300",
    "[&_[data-slot='icon']]:disabled:text-[color-mix(in_sRGB,white_10%,#5E5E5E_45%)]",
    //* disabled *//
    "disabled:pointer-events-none disabled:text-[color-mix(in_sRGB,white_10%,#5E5E5E_45%)]",
    //* before *//
    "before:[filter:blur(0.25px)] before:absolute before:inset-0 before:z-0 before:rounded-md",
    "before:disabled:[linear-gradient(0deg,rgba(94,94,94,0.07)_0%,rgba(94,94,94,0.07)_100%),rgba(255,255,255,0.04)]",
    "before:[transform:translateX(var(--btn-bg-translate-x))_translateY(var(--btn-bg-translate-y))]",
    "before:[background-blend-mode:color-dodge,lighten] before:transition-opacity before:duration-300",
    "before:[background:linear-gradient(0deg,rgba(94,94,94,0.24)_0%,rgba(94,94,94,0.24)_100%),rgba(255,255,255,0.12)]",
    "before:opacity-0"
  ),
  {
    variants: {
      /**
       * @default "default"
       */
      variant: {
        default: cn(
          "text-foreground/90",
          //* icon *//
          "[&_[data-slot='icon']]:text-foreground",
          "[&_[data-slot='icon']]:opacity-[0.96]",
          //* before *//
          "before:opacity-75 before:hover:opacity-[0.96]"
        ),
        secondary: cn(
          "text-foreground/50 hover:text-foreground/90 transition-colors",
          //* icon *//
          "[&_[data-slot='icon']]:text-foreground",
          "[&_[data-slot='icon']]:opacity-60",
          "[&_[data-slot='icon']]:hover:opacity-[0.96]",
          //* before *//
          "before:hover:opacity-50 before:opacity-0",
          "before:hover:[background:linear-gradient(0deg,rgba(94,94,94,0.24)_0%,rgba(94,94,94,0.24)_100%),rgba(255,255,255,0.12)]",
          //* before[data-active]
          "[&[data-active=true]]:before:opacity-40",
          "[&[data-active=true]]:before:hover:[background:linear-gradient(0deg,rgba(94,94,94,0.24)_0%,rgba(94,94,94,0.24)_100%),rgba(255,255,255,0.12)]"
        ),
        /* bg-destructive text-destructive-foreground */
        destructive: cn(
          "before:bg-destructive text-destructive-foreground/90",
          //* icon *//
          "[&_[data-slot='icon']]:text-destructive",
          "[&_[data-slot='icon']]:opacity-70",
          "[&_[data-slot='icon']]:hover:opacity-[0.96]",
          //* before *//
          "before:hover:opacity-50 before:opacity-0",
          "before:hover:[background:linear-gradient(0deg,rgba(94,94,94,0.24)_0%,rgba(94,94,94,0.24)_100%),rgba(255,255,255,0.12)]"
        ),
        selected: cn(
          "text-background/[0.96]",
          //* icon *//
          "[&_[data-slot='icon']]:text-background [&_[data-slot='icon']]:z-[1]",
          "before:[background:hsla(var(--foreground)/0.96)] before:text-background/90",
          "before:hover:opacity-100 before:opacity-100"
        ),
        link: cn(
          "text-[#5ac8f5]",
          //* icon *//
          "[&_[data-slot='icon']]:text-[#5ac8f5]",
          "[&_[data-slot='icon']]:opacity-70",
          "[&_[data-slot='icon']]:hover:opacity-[0.96]",
          //* before *//
          "before:hover:opacity-50 before:opacity-0",
          "before:hover:[background:linear-gradient(0deg,rgba(94,94,94,0.24)_0%,rgba(94,94,94,0.24)_100%),rgba(255,255,255,0.12)]"
        ),
      },
      /**
       * @default "default"
       */
      size: {
        default: "h-[2.75rem] px-[20px]",
        list: "h-[60px] px-[20px]",
        icon: "h-[2.75rem] w-[2.75rem]",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

type ButtonVariant = VariantProps<typeof buttonVariants>;

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariant {
  asChild?: boolean;
}

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
  }) {
  const Comp = asChild ? Slot : "button";

  return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  );
}

function ButtonGroup({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "flex items-center justify-center gap-2 p-3",
        "*:rounded-full [&_button:before]:rounded-full",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export { Button, buttonVariants, ButtonGroup };
export type { ButtonVariant, ButtonProps };

import { Ellipsis, PenBox, Share } from "lucide-react";
import { Button, ButtonGroup } from "@/components/core/button";
import { Window } from "@/components/core/window";

export const ButtonExample = () => {
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <ButtonGroup>
        <Button>Action</Button>
        <Button disabled>Action</Button>
        <Button variant="secondary">Action</Button>
      </ButtonGroup>

      <Window thickness="thinner">
        <ButtonGroup>
          <Button variant="selected" className="rounded-full" size="icon">
            <Share data-slot="icon" />
          </Button>
          <Button className="rounded-full" size="icon">
            <Ellipsis data-slot="icon" />
          </Button>
          <Button className="rounded-full" size="icon" disabled>
            <PenBox data-slot="icon" />
          </Button>
        </ButtonGroup>
      </Window>
    </div>
  );
};