@teamsparta/stack-chip/dist/style.js

stack chip

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/style.ts
var style_exports = {};
__export(style_exports, {
  chipAddonCss: () => chipAddonCss,
  chipColorVariant: () => chipColorVariant,
  chipContainerCss: () => chipContainerCss,
  chipLeftAddonCss: () => chipLeftAddonCss,
  chipRightAddonCss: () => chipRightAddonCss,
  chipSizeCss: () => chipSizeCss,
  chipTextCss: () => chipTextCss,
  chipTextSizeCss: () => chipTextSizeCss,
  disabledStyle: () => disabledStyle
});
module.exports = __toCommonJS(style_exports);
var import_react = require("@emotion/react");
var import_stack_font = require("@teamsparta/stack-font");
var import_stack_tokens = require("@teamsparta/stack-tokens");
var import_stack_utils = require("@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]: import_stack_tokens.vars.line.clickable,
    [chipBackgroundColorVar]: import_stack_tokens.vars.fill.default,
    [chipHoverBorderColorVar]: import_stack_tokens.vars.line.clickable,
    [chipHoverBackgroundColorVar]: import_stack_tokens.vars.fill.subtle,
    [chipSelectedBorderColorVar]: import_stack_tokens.vars.line.selected,
    [chipSelectedBackgroundColorVar]: import_stack_tokens.vars.fill.inverse.default,
    [chipFontColorVar]: import_stack_tokens.vars.text.primary,
    [chipSelectedFontColorVar]: import_stack_tokens.vars.text.inverse
  },
  line: {
    [chipBorderColorVar]: import_stack_tokens.vars.line.clickable,
    [chipBackgroundColorVar]: import_stack_tokens.vars.fill.default,
    [chipHoverBorderColorVar]: import_stack_tokens.vars.line.selected,
    [chipHoverBackgroundColorVar]: import_stack_tokens.vars.fill.default,
    [chipSelectedBorderColorVar]: import_stack_tokens.vars.line.selected,
    [chipSelectedBackgroundColorVar]: import_stack_tokens.vars.fill.default,
    [chipFontColorVar]: import_stack_tokens.vars.text.primary,
    [chipSelectedFontColorVar]: import_stack_tokens.vars.text.primary
  }
};
var chipContainerCss = (0, import_react.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: (0, import_stack_utils.getVar)(chipBorderColorVar),
  backgroundColor: (0, import_stack_utils.getVar)(chipBackgroundColorVar),
  color: (0, import_stack_utils.getVar)(chipFontColorVar),
  userSelect: "none",
  "@media (hover: hover) and (pointer: fine)": {
    "&:hover:not(:disabled)[data-selected=false]": {
      backgroundColor: (0, import_stack_utils.getVar)(chipHoverBackgroundColorVar),
      borderColor: (0, import_stack_utils.getVar)(chipHoverBorderColorVar)
    }
  },
  "&:active:not(:disabled)[data-selected=false]": {
    backgroundColor: (0, import_stack_utils.getVar)(chipHoverBackgroundColorVar),
    borderColor: (0, import_stack_utils.getVar)(chipHoverBorderColorVar)
  },
  "&[data-selected=true]": {
    backgroundColor: (0, import_stack_utils.getVar)(chipSelectedBackgroundColorVar),
    borderColor: (0, import_stack_utils.getVar)(chipSelectedBorderColorVar),
    color: (0, import_stack_utils.getVar)(chipSelectedFontColorVar)
  }
});
var chipSizeVariants = {
  sm: {
    padding: "7px 11px"
  },
  md: {
    padding: "9px 13px"
  },
  lg: {
    padding: "11px 15px"
  }
};
var chipSizeFontVariants = {
  sm: import_stack_font.captionM,
  md: import_stack_font.captionM,
  lg: import_stack_font.bodyM
};
var chipSizeCss = (sizes) => sizes.map(
  ({ breakpoint, size }) => import_react.css`
      @media screen and (min-width: ${breakpoint}px) {
        ${chipSizeVariants[size]}
        ${chipSizeFontVariants[size]}
      }
    `
);
var disabledStyle = (0, import_react.css)({
  opacity: 0.35,
  cursor: "not-allowed"
});
var chipTextCss = (0, import_react.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 }) => import_react.css`
      @media screen and (min-width: ${breakpoint}px) {
        ${chipSizeTextPaddingVariants[size]}
      }
    `
);
var chipAddonCss = (0, import_react.css)({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  flexShrink: 0
});
var chipLeftAddonCss = (0, import_react.css)({
  marginRight: "2px"
});
var chipRightAddonCss = (0, import_react.css)({
  marginLeft: "2px"
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  chipAddonCss,
  chipColorVariant,
  chipContainerCss,
  chipLeftAddonCss,
  chipRightAddonCss,
  chipSizeCss,
  chipTextCss,
  chipTextSizeCss,
  disabledStyle
});