{"version":3,"file":"p3aQmWl9.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/chip/Chip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChipSize, ChipWeight } from './types'\n\ntype Props = {\n  size?: ChipSize\n  weight?: ChipWeight\n  color?: string\n  active?: boolean\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  color: '',\n  size: 'md',\n  weight: 'extra-bold',\n})\n\nconst emit = defineEmits(['click'])\n\nconst componentClasses = computed(() => {\n  const classes = [\n    'app-chip',\n    `app-chip--size-${props.size}`,\n    `app-chip--weight-${props.weight}`,\n  ]\n\n  if (props.disabled) classes.push('app-chip--disabled')\n\n  if (props.active) classes.push('app-chip--active')\n\n  return classes\n})\n\nconst activeStyles = computed(() => {\n  const styles: Partial<Record<string, string>> = {}\n\n  if (props.color) styles['--backgroundColor'] = props.color\n\n  return styles\n})\n\nconst handleClick = (event: MouseEvent) => {\n  if (!props.disabled) emit('click', event)\n}\n\nconst handleKeydown = (event: KeyboardEvent) => {\n  if (props.disabled || (event.key !== 'Enter' && event.key !== ' ')) {\n    return\n  }\n\n  event.preventDefault()\n  emit('click', event)\n}\n</script>\n\n<template>\n  <span\n    v-bind=\"$attrs\"\n    :class=\"componentClasses\"\n    :style=\"activeStyles\"\n    role=\"button\"\n    tabindex=\"0\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-chip {\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n  color: var(--ui-text-primary);\n  user-select: none;\n  background-color: var(--ui-grey);\n  border-radius: 100px;\n  transition-timing-function: ease;\n  transition-duration: 0.3s;\n  transition-property: background-color, color;\n\n  &:hover {\n    background-color: var(--ui-grey--hover);\n  }\n\n  @media (hover: none) {\n    &:hover {\n      background-color: var(--ui-grey);\n    }\n  }\n\n  &--disabled {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  &--active {\n    color: var(--ui-white);\n    pointer-events: auto;\n    cursor: pointer;\n    background-color: var(--backgroundColor, #ff5044);\n\n    &:hover {\n      background-color: var(--backgroundColor, #ff5044);\n    }\n  }\n\n  /* Size */\n  &--size-sm {\n    height: 32px;\n    font-size: 12px;\n    line-height: 16px;\n  }\n\n  &--size-md {\n    height: 40px;\n    font-size: 14px;\n    line-height: 18px;\n  }\n\n  /* Weight */\n  &--weight-semi-bold {\n    font-weight: 600;\n  }\n\n  &--weight-extra-bold {\n    font-weight: 800;\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","componentClasses","computed","classes","activeStyles","styles","handleClick","event","handleKeydown"],"mappings":";;8jBAWA,MAAMA,EAAQC,EAMRC,EAAOC,EAEPC,EAAmBC,EAAS,IAAM,CACtC,MAAMC,EAAU,CACd,WACA,kBAAkBN,EAAM,IAAI,GAC5B,oBAAoBA,EAAM,MAAM,EAAA,EAGlC,OAAIA,EAAM,UAAkBM,EAAA,KAAK,oBAAoB,EAEjDN,EAAM,QAAgBM,EAAA,KAAK,kBAAkB,EAE1CA,CAAA,CACR,EAEKC,EAAeF,EAAS,IAAM,CAClC,MAAMG,EAA0C,CAAA,EAEhD,OAAIR,EAAM,QAAcQ,EAAA,mBAAmB,EAAIR,EAAM,OAE9CQ,CAAA,CACR,EAEKC,EAAeC,GAAsB,CACpCV,EAAM,UAAUE,EAAK,QAASQ,CAAK,CAAA,EAGpCC,EAAiBD,GAAyB,CAC1CV,EAAM,UAAaU,EAAM,MAAQ,SAAWA,EAAM,MAAQ,MAI9DA,EAAM,eAAe,EACrBR,EAAK,QAASQ,CAAK,EAAA","debug_id":"5d0bcc6f-6c19-50f4-a088-c77e5055447c"}