@teamsparta/stack-chip/dist/chunk-KLWLLBGX.mjs

stack chip

// src/style.ts
import { css } from "@emotion/react";
import { bodyM, captionM } from "@teamsparta/stack-font";
import { vars } from "@teamsparta/stack-tokens";
import { getVar } from "@teamsparta/stack-utils";
var chipBorderColorVar = "--stack-chip-border-color";
var chipBackgroundColorVar = "--stack-chip-background-color";
var chipHoverBorderColorVar = "--stack-chip-hover-border-color";
var chipHoverBackgroundColorVar = "--stack-chip-hover-background-color";
var chipSelectedBorderColorVar = "--stack-chip-selected-border-color";
var chipSelectedBackgroundColorVar = "--stack-chip-selected-background-color";
var chipFontColorVar = "--stack-chip-font-color";
var chipSelectedFontColorVar = "--stack-chip-selected-font-color";
var chipColorVariant = {
  fill: {
    [chipBorderColorVar]: vars.line.clickable,
    [chipBackgroundColorVar]: vars.fill.default,
    [chipHoverBorderColorVar]: vars.line.clickable,
    [chipHoverBackgroundColorVar]: vars.fill.subtle,
    [chipSelectedBorderColorVar]: vars.line.selected,
    [chipSelectedBackgroundColorVar]: vars.fill.inverse.default,
    [chipFontColorVar]: vars.text.primary,
    [chipSelectedFontColorVar]: vars.text.inverse
  },
  line: {
    [chipBorderColorVar]: vars.line.clickable,
    [chipBackgroundColorVar]: vars.fill.default,
    [chipHoverBorderColorVar]: vars.line.selected,
    [chipHoverBackgroundColorVar]: vars.fill.default,
    [chipSelectedBorderColorVar]: vars.line.selected,
    [chipSelectedBackgroundColorVar]: vars.fill.default,
    [chipFontColorVar]: vars.text.primary,
    [chipSelectedFontColorVar]: vars.text.primary
  }
};
var chipContainerCss = css({
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  borderRadius: "999px",
  transition: "all 0.2s",
  cursor: "pointer",
  whiteSpace: "nowrap",
  maxWidth: "200px",
  borderWidth: "1px",
  borderStyle: "solid",
  borderColor: getVar(chipBorderColorVar),
  backgroundColor: getVar(chipBackgroundColorVar),
  color: getVar(chipFontColorVar),
  userSelect: "none",
  "@media (hover: hover) and (pointer: fine)": {
    "&:hover:not(:disabled)[data-selected=false]": {
      backgroundColor: getVar(chipHoverBackgroundColorVar),
      borderColor: getVar(chipHoverBorderColorVar)
    }
  },
  "&:active:not(:disabled)[data-selected=false]": {
    backgroundColor: getVar(chipHoverBackgroundColorVar),
    borderColor: getVar(chipHoverBorderColorVar)
  },
  "&[data-selected=true]": {
    backgroundColor: getVar(chipSelectedBackgroundColorVar),
    borderColor: getVar(chipSelectedBorderColorVar),
    color: getVar(chipSelectedFontColorVar)
  }
});
var chipSizeVariants = {
  sm: {
    padding: "7px 11px"
  },
  md: {
    padding: "9px 13px"
  },
  lg: {
    padding: "11px 15px"
  }
};
var chipSizeFontVariants = {
  sm: captionM,
  md: captionM,
  lg: bodyM
};
var chipSizeCss = (sizes) => sizes.map(
  ({ breakpoint, size }) => css`
      @media screen and (min-width: ${breakpoint}px) {
        ${chipSizeVariants[size]}
        ${chipSizeFontVariants[size]}
      }
    `
);
var disabledStyle = css({
  opacity: 0.35,
  cursor: "not-allowed"
});
var chipTextCss = css({
  overflow: "hidden",
  textOverflow: "ellipsis",
  whiteSpace: "nowrap"
});
var chipSizeTextPaddingVariants = {
  sm: {
    paddingInline: "2px"
  },
  md: {
    paddingInline: "2px"
  },
  lg: {
    paddingInline: "4px"
  }
};
var chipTextSizeCss = (sizes) => sizes.map(
  ({ breakpoint, size }) => css`
      @media screen and (min-width: ${breakpoint}px) {
        ${chipSizeTextPaddingVariants[size]}
      }
    `
);
var chipAddonCss = css({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  flexShrink: 0
});
var chipLeftAddonCss = css({
  marginRight: "2px"
});
var chipRightAddonCss = css({
  marginLeft: "2px"
});

export {
  chipColorVariant,
  chipContainerCss,
  chipSizeCss,
  disabledStyle,
  chipTextCss,
  chipTextSizeCss,
  chipAddonCss,
  chipLeftAddonCss,
  chipRightAddonCss
};