Dashboard/ui/components/IconButton/IconButton.tsx

"use client";
/*
 * Documentation:
 * Icon Button — https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6
 */

import React from "react";
import { FeatherPlus } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface IconButtonRootProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  disabled?: boolean;
  loading?: boolean;
  variant?:
    | "primary"
    | "secondary"
    | "tertiary"
    | "ghost"
    | "neutral"
    | "destructive"
    | "success"
    | "warning"
    | "information";
  size?: "large" | "medium" | "small" | "extra-small" | "2-x-small";
  square?: boolean;
  icon?: React.ReactNode;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  className?: string;
}

const IconButtonRoot = React.forwardRef<HTMLButtonElement, IconButtonRootProps>(
  function IconButtonRoot(
    {
      disabled = false,
      loading = false,
      variant = "primary",
      size = "medium",
      square = false,
      icon = <FeatherPlus />,
      className,
      type = "button",
      ...otherProps
    }: IconButtonRootProps,
    ref
  ) {
    return (
      <button
        className={SubframeUtils.twClassNames(
          "group/af9405b1 flex h-9 w-9 cursor-pointer items-center justify-center gap-2 rounded-round border-none bg-brand-brand-surface-solid-default text-left hover:bg-brand-brand-surface-solid-hover active:bg-brand-brand-surface-solid-active focus-within:shadow-focus disabled:cursor-default disabled:bg-surface-neutral-disabled disabled:pointer-events-none hover:disabled:cursor-default hover:disabled:bg-surface-neutral-disabled active:disabled:cursor-default active:disabled:bg-surface-neutral-disabled",
          {
            "rounded-md": square,
            "h-4 w-4": size === "2-x-small",
            "h-6 w-6": size === "extra-small",
            "h-8 w-8": size === "small",
            "h-12 w-12": size === "large",
            "bg-surface-feedback-solid-information hover:bg-surface-feedback-solid-information-hover active:bg-surface-feedback-solid-information-active":
              variant === "information",
            "bg-surface-feedback-solid-warning hover:bg-surface-feedback-solid-warning-hover active:bg-surface-feedback-solid-warning-active":
              variant === "warning",
            "bg-surface-feedback-solid-positive-default hover:bg-surface-feedback-solid-positive-hover active:bg-surface-feedback-solid-positive-active":
              variant === "success",
            "bg-surface-feedback-solid-negative-default hover:bg-surface-feedback-solid-negative-hover active:bg-surface-feedback-solid-negative-active":
              variant === "destructive",
            "bg-surface-feedback-solid-neutral hover:bg-surface-feedback-solid-neutral-hover active:bg-surface-feedback-solid-neutral-active":
              variant === "neutral",
            "bg-transparent hover:bg-surface-neutral-tertiary active:bg-surface-neutral-tertiary":
              variant === "ghost",
            "border border-solid border-border-default bg-surface-neutral-primary hover:border hover:border-solid hover:border-border-strong hover:bg-surface-neutral-secondary active:bg-surface-neutral-tertiary":
              variant === "tertiary",
            "bg-brand-brand-secondary-surface-subtle-default hover:bg-brand-brand-secondary-surface-subtle-hover active:bg-brand-brand-secondary-surface-subtle-active":
              variant === "secondary",
          },
          className
        )}
        ref={ref}
        type={type}
        disabled={disabled}
        {...otherProps}
      >
        {icon ? (
          <SubframeCore.IconWrapper
            className={SubframeUtils.twClassNames(
              "text-body-large-0 font-body-large-0 text-icon-neutral-on-solid group-disabled/af9405b1:text-icon-neutral-disabled",
              {
                "text-body-small-semibold-0 font-body-small-semibold-0":
                  size === "2-x-small",
                "text-body-default-semibold-0 font-body-default-semibold-0":
                  size === "extra-small",
                "text-heading-0 font-heading-0": size === "large",
                "text-icon-neutral-secondary": variant === "ghost",
                "text-icon-neutral-on-subtle": variant === "tertiary",
                "text-icon-neutral-primary": variant === "secondary",
                hidden: loading,
              }
            )}
          >
            {icon}
          </SubframeCore.IconWrapper>
        ) : null}
        <div
          className={SubframeUtils.twClassNames(
            "hidden h-4 w-4 flex-none items-center justify-center gap-2",
            { "h-5 w-5": size === "large", flex: loading }
          )}
        >
          <SubframeCore.Loader
            className={SubframeUtils.twClassNames(
              "text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-icon-neutral-on-solid group-disabled/af9405b1:text-icon-neutral-disabled group-hover/af9405b1:group-disabled/af9405b1:text-icon-neutral-on-solid group-active/af9405b1:group-disabled/af9405b1:text-icon-neutral-disabled",
              {
                "text-icon-neutral-secondary": variant === "ghost",
                "text-icon-neutral-on-subtle": variant === "tertiary",
                "text-icon-neutral-primary": variant === "secondary",
              }
            )}
          />
        </div>
      </button>
    );
  }
);

export const IconButton = IconButtonRoot;