@teamsparta/stack-button/dist/chunk-5O7ZDSYD.mjs

stack button

import {
  bgColorVar,
  borderColorVar,
  hoverBgColorVar,
  textColorVar
} from "./chunk-BXHYNIUD.mjs";

// src/IconButton/IconButton.style.ts
import { css } from "@emotion/react";
import { vars } from "@teamsparta/stack-tokens";
import { getVar } from "@teamsparta/stack-utils";
var iconButtonSizeVariants = {
  xs: {
    width: "36px",
    height: "36px",
    padding: "10px"
  },
  sm: {
    width: "40px",
    height: "40px",
    padding: "12px"
  },
  md: {
    width: "48px",
    height: "48px",
    padding: "14px"
  },
  lg: {
    width: "52px",
    height: "52px",
    padding: "16px"
  },
  xl: {
    width: "56px",
    height: "56px",
    padding: "16px"
  }
};
var iconButtonRadiusVariants = {
  xs: { borderRadius: "6px" },
  sm: { borderRadius: "6px" },
  md: { borderRadius: "8px" },
  lg: { borderRadius: "8px" },
  xl: { borderRadius: "8px" }
};
var iconButtonIconVariants = {
  xs: {
    svg: {
      width: "16px",
      height: "16px"
    }
  },
  sm: {
    svg: {
      width: "16px",
      height: "16px"
    }
  },
  md: {
    svg: {
      width: "20px",
      height: "20px"
    }
  },
  lg: {
    svg: {
      width: "20px",
      height: "20px"
    }
  },
  xl: {
    svg: {
      width: "24px",
      height: "24px"
    }
  }
};
var iconButtonVariants = {
  "solid-primary": {
    [bgColorVar]: vars.button.solidPrimary.background,
    [hoverBgColorVar]: vars.button.solidPrimary.backgroundHover,
    [textColorVar]: vars.button.solidPrimary.text
  },
  "solid-secondary": {
    [bgColorVar]: vars.button.solidSecondary.background,
    [hoverBgColorVar]: vars.button.solidSecondary.backgroundHover,
    [textColorVar]: vars.button.solidSecondary.text
  },
  "solid-tertiary": {
    [bgColorVar]: vars.button.solidTertiary.background,
    [hoverBgColorVar]: vars.button.solidTertiary.backgroundHover,
    [textColorVar]: vars.button.solidTertiary.text
  },
  "outline-primary": {
    [bgColorVar]: vars.button.outlinePrimary.background,
    [hoverBgColorVar]: vars.button.outlinePrimary.backgroundHover,
    [borderColorVar]: vars.button.outlinePrimary.border,
    [textColorVar]: vars.button.outlinePrimary.text
  },
  "outline-secondary": {
    [bgColorVar]: vars.button.outlineSecondary.background,
    [hoverBgColorVar]: vars.button.outlineSecondary.backgroundHover,
    [borderColorVar]: vars.button.outlineSecondary.border,
    [textColorVar]: vars.button.outlineSecondary.text
  },
  // NOTE: outline-tertiary 미사용
  "outline-tertiary": {}
};
var buttonBaseCss = css({
  position: "relative",
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  cursor: "pointer",
  outline: "none",
  transition: "background-color 0.08s ease-in-out",
  backgroundColor: getVar(bgColorVar),
  border: `1px solid ${getVar(borderColorVar)}`,
  userSelect: "none",
  "@media (hover: hover) and (pointer: fine)": {
    "&:hover:not(:disabled)": {
      backgroundColor: getVar(hoverBgColorVar)
    }
  },
  "&:active:not(:disabled)": {
    backgroundColor: getVar(hoverBgColorVar)
  },
  "&:focus": {
    outline: "revert"
  }
});
var buttonIconSizeCss = (sizes) => sizes.map(
  ({ breakpoint, size }) => css`
      @media screen and (min-width: ${breakpoint}px) {
        ${iconButtonIconVariants[size]}
      }
    `
);
var buttonSizeCss = (sizes) => sizes.map(
  ({ breakpoint, size }) => css`
      @media screen and (min-width: ${breakpoint}px) {
        ${iconButtonSizeVariants[size]}
      }
    `
);
var buttonRadiusCss = (sizes) => sizes.map(
  ({ breakpoint, size }) => css`
      @media screen and (min-width: ${breakpoint}px) {
        ${iconButtonRadiusVariants[size]}
      }
    `
);
var buttonRoundedCss = css({
  borderRadius: "999px"
});
var adjustTouchableCss = css({
  display: "block",
  position: "absolute",
  minWidth: "48px",
  minHeight: "48px",
  width: "100%",
  height: "100%"
});
var disabledCss = css({
  opacity: "0.35",
  cursor: "not-allowed"
});

export {
  iconButtonVariants,
  buttonBaseCss,
  buttonIconSizeCss,
  buttonSizeCss,
  buttonRadiusCss,
  buttonRoundedCss,
  adjustTouchableCss,
  disabledCss
};