import {
  Icon
} from "./chunk-OLJIJYB5.js";
import {
  colors
} from "./chunk-JF3P66JF.js";

// src/components/icon-button/icon-button.tsx
import { forwardRef } from "react";

// src/components/icon-button/icon-button-styles.ts
import styled, { css } from "styled-components";
var PADDING = {
  short: {
    small: "4px",
    medium: "6px"
  },
  long: {
    small: "4px 6px",
    medium: "6px 10px"
  }
};
var BORDER_RADIUS = {
  small: 6,
  medium: 10
};
var intentStyles = {
  secondary: ({ $isSelected }) => css`
    background: ${$isSelected ? colors["brown-40"] : "transparent"};
    color: ${colors["brown-100"]};

    &:hover:not(:disabled) {
      background: ${$isSelected ? colors["brown-40"] : colors["brown-20"]};
    }

    &:active:not(:disabled) {
      background: ${colors["brown-40"]};
    }

    &:disabled {
      color: ${colors["brown-50"]};
      background: transparent;
    }
  `,
  primary: () => css`
    background: ${colors["brown-100"]};
    color: ${colors.white};

    &:hover:not(:disabled) {
      background: ${colors["brown-90"]};
    }

    &:active:not(:disabled) {
      background: ${colors["brown-90"]};
    }

    &:disabled {
      color: ${colors["brown-50"]};
      background: ${colors["brown-20"]};
    }
  `,
  error: () => css`
    background: ${colors["red-500"]};
    color: ${colors.white};

    &:hover:not(:disabled) {
      background: ${colors["red-600"]};
    }

    &:active:not(:disabled) {
      background: ${colors["red-600"]};
    }

    &:disabled {
      color: ${colors["red-200"]};
      background: ${colors["red-100"]};
    }
  `
};
var Button = styled.button`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: ${({ $size, $variant }) => PADDING[$variant][$size]};
  border: none;
  border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;
  cursor: pointer;
  transition: background-color 100ms ease;

  ${({ $intent, $isSelected }) => intentStyles[$intent]({ $isSelected })}

  &:disabled {
    cursor: not-allowed;
  }
`;

// src/components/icon-button/icon-button.tsx
import { jsx } from "react/jsx-runtime";
var ICON_SIZE_BY_BUTTON_SIZE = {
  small: 16,
  medium: 20
};
var IconButton = forwardRef(function IconButton2({
  icon,
  size = "small",
  variant = "short",
  intent = "secondary",
  isSelected = false,
  disabled = false,
  onClick,
  className,
  id,
  as,
  "aria-label": ariaLabel,
  ...rest
}, ref) {
  const isNativeButton = as === void 0 || as === "button";
  return /* @__PURE__ */ jsx(
    Button,
    {
      ref,
      className,
      id,
      as,
      $size: size,
      $variant: variant,
      $intent: intent,
      $isSelected: isSelected,
      disabled,
      onClick: disabled ? void 0 : onClick,
      "aria-label": ariaLabel,
      ...isNativeButton ? { type: "button" } : {},
      ...rest,
      children: /* @__PURE__ */ jsx(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
    }
  );
});

export {
  IconButton
};
//# sourceMappingURL=chunk-PYDVANWI.js.map