@teamsparta/stack-button/dist/chunk-BXHYNIUD.mjs

stack button

// src/Button/Button.style.ts
import { css } from "@emotion/react";
import { bodyB, captionSb, subTitle3 } from "@teamsparta/stack-font";
import { vars } from "@teamsparta/stack-tokens";
import { getVar } from "@teamsparta/stack-utils";
var bgColorVar = "--stack-button-bg-color";
var hoverBgColorVar = "--stack-button-hover-bg-color";
var textColorVar = "--stack-button-text-color";
var borderColorVar = "--stack-button-border-color";
var buttonSizeVariants = {
  xs: {
    minWidth: "52px",
    height: "36px",
    paddingInline: "12px",
    gap: "2px"
  },
  sm: {
    minWidth: "56px",
    height: "40px",
    paddingInline: "12px"
  },
  md: {
    minWidth: "70px",
    height: "48px",
    paddingInline: "14px"
  },
  lg: {
    minWidth: "100px",
    height: "52px",
    gap: "2px",
    paddingInline: "16px"
  },
  xl: {
    minWidth: "154px",
    height: "56px",
    gap: "4px",
    paddingInline: "16px"
  }
};
var buttonTextVariants = {
  xs: { padding: "0 2px" },
  sm: { padding: "0 4px" },
  md: { padding: "0 4px" },
  lg: { padding: "0 4px" },
  xl: { padding: "0 4px" }
};
var buttonTextFontVariants = {
  xs: captionSb,
  sm: captionSb,
  md: bodyB,
  lg: subTitle3,
  xl: subTitle3
};
var buttonRadiusVariants = {
  xs: { borderRadius: "6px" },
  sm: { borderRadius: "6px" },
  md: { borderRadius: "8px" },
  lg: { borderRadius: "8px" },
  xl: { borderRadius: "8px" }
};
var buttonIconVariants = {
  xs: {
    svg: {
      width: "16px",
      height: "16px"
    }
  },
  sm: {
    svg: {
      width: "16px",
      height: "16px"
    }
  },
  md: {
    svg: {
      width: "16px",
      height: "16px"
    }
  },
  lg: {
    svg: {
      width: "20px",
      height: "20px"
    }
  },
  xl: {
    svg: {
      width: "20px",
      height: "20px"
    }
  }
};
var buttonVariants = {
  // todo
  "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
  },
  "solid-error": {
    [bgColorVar]: vars.button.solidError.background,
    [hoverBgColorVar]: vars.button.solidError.backgroundHover,
    [textColorVar]: vars.button.solidError.text
  },
  // done
  "outline-primary": {
    [bgColorVar]: vars.button.outlinePrimary.background,
    [hoverBgColorVar]: vars.button.outlinePrimary.backgroundHover,
    [textColorVar]: vars.button.outlinePrimary.text,
    [borderColorVar]: vars.button.outlinePrimary.border
  },
  "outline-secondary": {
    [bgColorVar]: vars.button.outlineSecondary.background,
    [hoverBgColorVar]: vars.button.outlineSecondary.backgroundHover,
    [textColorVar]: vars.button.outlineSecondary.text,
    [borderColorVar]: vars.button.outlineSecondary.border
  },
  "outline-tertiary": {},
  "outline-error": {}
};
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)}`,
  color: getVar(textColorVar),
  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) {
        ${buttonIconVariants[size]}
      }
    `
);
var buttonSizeCss = (sizes) => sizes.map(
  ({ breakpoint, size }) => css`
      @media screen and (min-width: ${breakpoint}px) {
        ${buttonSizeVariants[size]}
      }
    `
);
var buttonWidthCss = (sizes) => sizes.map(
  ({ breakpoint, value }) => value && css`
        @media screen and (min-width: ${breakpoint}px) {
          width: 100%;
        }
      `
);
var buttonTextCss = (sizes) => sizes.map(
  ({ breakpoint, size }) => css`
      @media screen and (min-width: ${breakpoint}px) {
        ${buttonTextVariants[size]}
        ${buttonTextFontVariants[size]}
      }
      &&& {
        color: inherit;
      }
    `
);
var buttonRadiusCss = (sizes) => sizes.map(
  ({ breakpoint, size }) => css`
      @media screen and (min-width: ${breakpoint}px) {
        ${buttonRadiusVariants[size]}
      }
    `
);
var buttonChildrenCss = css({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  whiteSpace: "nowrap",
  "&[data-loading='true']": {
    opacity: 0
  }
});
var buttonRoundedCss = css({
  borderRadius: "999px"
});
var addonCss = css({
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  "& > svg": {
    color: `${getVar(textColorVar)} !important`
  },
  "&[data-loading='true']": {
    opacity: 0
  }
});
var loadingContainerCss = css({
  cursor: "not-allowed"
});
var spinnerContainerCss = css({
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  display: "flex",
  alignItems: "center",
  justifyContent: "center"
});
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 {
  bgColorVar,
  hoverBgColorVar,
  textColorVar,
  borderColorVar,
  buttonVariants,
  buttonBaseCss,
  buttonIconSizeCss,
  buttonSizeCss,
  buttonWidthCss,
  buttonTextCss,
  buttonRadiusCss,
  buttonChildrenCss,
  buttonRoundedCss,
  addonCss,
  loadingContainerCss,
  spinnerContainerCss,
  adjustTouchableCss,
  disabledCss
};