import {
  Icon
} from "./chunk-OLJIJYB5.js";
import {
  typographyMixin,
  typographyTypes
} from "./chunk-UXT2H3FM.js";
import {
  colors
} from "./chunk-JF3P66JF.js";

// src/components/button/constants.ts
var BUTTON_VARIANT = {
  SOLID: "solid",
  OUTLINE: "outline",
  GHOST: "ghost"
};
var BUTTON_SIZE = {
  XS: "xs",
  S: "s",
  M: "m"
};
var BUTTON_INTENT = {
  PRIMARY: "primary",
  ERROR: "error"
};
var ICON_POSITION = {
  LEADING: "leading",
  TRAILING: "trailing"
};

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

// src/components/button/button-styles.ts
import styled, { css } from "styled-components";
var intentColors = {
  [BUTTON_INTENT.PRIMARY]: {
    base: colors["brown-100"],
    hover: colors["brown-90"],
    disabledBg: colors["brown-20"],
    disabledText: colors["brown-50"],
    subtleHover: colors["brown-20"],
    border: colors["brown-40"],
    disabledBorder: colors["brown-20"]
  },
  [BUTTON_INTENT.ERROR]: {
    base: colors["red-500"],
    hover: colors["red-600"],
    disabledBg: colors["red-100"],
    disabledText: colors["red-200"],
    subtleHover: colors["red-50"],
    border: colors["red-200"],
    disabledBorder: colors["red-100"]
  }
};
var sizeValues = {
  [BUTTON_SIZE.XS]: { padding: "6px 10px", borderRadius: "8px", gap: "4px" },
  [BUTTON_SIZE.S]: { padding: "8px 12px", borderRadius: "10px", gap: "6px" },
  [BUTTON_SIZE.M]: { padding: "10px 14px", borderRadius: "10px", gap: "6px" }
};
function sizeMixin({ $size }) {
  const s = sizeValues[$size];
  return css`
    padding: ${s.padding};
    border-radius: ${s.borderRadius};
    gap: ${s.gap};
  `;
}
var variantColorMap = {
  [BUTTON_VARIANT.SOLID]: (c) => ({
    background: c.base,
    color: colors.white,
    border: "none",
    hoverBg: c.hover,
    disabledBg: c.disabledBg,
    disabledColor: c.disabledText
  }),
  [BUTTON_VARIANT.OUTLINE]: (c) => ({
    background: colors.white,
    color: c.base,
    border: `1px solid ${c.border}`,
    hoverBg: c.subtleHover,
    disabledColor: c.disabledText,
    disabledBorder: c.disabledBorder
  }),
  [BUTTON_VARIANT.GHOST]: (c) => ({
    background: "transparent",
    color: c.base,
    border: "none",
    hoverBg: c.subtleHover,
    disabledColor: c.disabledText
  })
};
function variantMixin({
  $variant,
  $intent
}) {
  const v = variantColorMap[$variant](intentColors[$intent]);
  return css`
    background: ${v.background};
    color: ${v.color};
    border: ${v.border};

    &:hover:not(:disabled) {
      background: ${v.hoverBg};
    }

    &:disabled {
      color: ${v.disabledColor};
      ${v.disabledBg ? `background: ${v.disabledBg};` : ""}
      ${v.disabledBorder ? `border-color: ${v.disabledBorder};` : ""}
    }
  `;
}
var StyledButton = styled.button`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;

  &:disabled {
    cursor: not-allowed;
  }

  ${sizeMixin}
  ${variantMixin}
`;

// src/components/button/button.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var Button = forwardRef(function Button2({
  children,
  variant = BUTTON_VARIANT.SOLID,
  intent = BUTTON_INTENT.PRIMARY,
  size = BUTTON_SIZE.M,
  icon,
  iconPosition = ICON_POSITION.LEADING,
  disabled = false,
  onClick,
  className,
  "aria-label": ariaLabel
}, ref) {
  const iconElement = icon ? /* @__PURE__ */ jsx(Icon, { icon, size: 16 }) : null;
  return /* @__PURE__ */ jsxs(
    StyledButton,
    {
      ref,
      type: "button",
      $variant: variant,
      $intent: intent,
      $size: size,
      disabled,
      onClick: disabled ? void 0 : onClick,
      className,
      "aria-label": ariaLabel,
      children: [
        iconPosition === ICON_POSITION.LEADING && iconElement,
        /* @__PURE__ */ jsx("span", { children }),
        iconPosition === ICON_POSITION.TRAILING && iconElement
      ]
    }
  );
});

export {
  BUTTON_VARIANT,
  BUTTON_SIZE,
  BUTTON_INTENT,
  ICON_POSITION,
  Button
};
//# sourceMappingURL=chunk-B4U37WIH.js.map