{"version":3,"file":"Tab.cjs","sources":["../../common/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { TabClassesKey, TabProps } from \"./types\";\n\nconst {\n  variant = \"underline\",\n  active = false,\n  borderRightRadius = false,\n  borderLeftRadius = false,\n  disabled = false,\n  id = \"\",\n  classes = {} as Partial<Record<TabClassesKey, string>>,\n  href = \"\",\n  component = \"div\",\n} = defineProps<TabProps>();\n\nconst element = computed(() => {\n  return href ? \"a\" : component;\n});\n\nconst emits = defineEmits<{\n  (e: \"onClick\"): void;\n}>();\n</script>\n\n<template>\n  <li\n    :id=\"id\"\n    role=\"tab\"\n    :aria-selected=\"active\"\n    :aria-controls=\"id\"\n    :class=\"['tab-container', { 'tab-underline-border': variant === 'underline' }, classes?.container]\"\n  >\n    <component\n      :is=\"element\"\n      :href=\"!disabled ? href : ''\"\n      :class=\"[\n        'flex items-center justify-center text-sm font-medium',\n        active ? classes?.active || `tab-active-${variant}` : classes?.inactive || `tab-inactive-${variant}`,\n        { 'rounded-r-lg': variant === 'full-width' && borderRightRadius, 'rounded-l-lg': variant === 'full-width' && borderLeftRadius },\n        classes?.component,\n        { 'tab-disabled': disabled },\n      ]\"\n      @click=\"!href && !disabled && emits('onClick')\"\n    >\n      <slot />\n    </component>\n    <div v-if=\"variant === 'underline' && active\" :class=\"['bg-app-primary-600 absolute -bottom-px h-px w-10/12', classes?.underlineActive]\" />\n  </li>\n</template>\n\n<style scoped>\n@reference \"../../styles/main.css\";\n\n.tab-container {\n  @apply relative list-none w-fit flex items-center justify-center cursor-pointer;\n}\n.tab-active-button {\n  @apply px-4 py-3 text-app-white bg-app-primary-600 rounded-md;\n}\n.tab-active-pills {\n  @apply px-4 py-3 text-app-white bg-app-primary-600 rounded-full;\n}\n.tab-active-underline {\n  @apply py-2 px-4 border-b-2 border-transparent rounded-t-lg dark:hover:text-app-gray-300;\n}\n.tab-active-full-width {\n  @apply py-4 px-12 bg-app-gray-50 border border-app-gray-300 text-app-gray-900\n  dark:bg-app-gray-700 dark:border-app-gray-600 dark:text-app-white;\n}\n.tab-inactive-button {\n  @apply px-4 py-3 text-app-gray-500 bg-transparent rounded-md dark:text-app-gray-400;\n}\n.tab-inactive-pills {\n  @apply px-4 py-3 text-app-gray-500 bg-transparent rounded-md dark:text-app-gray-400;\n}\n.tab-inactive-underline {\n  @apply py-2 px-4 bg-transparent text-app-gray-500 dark:text-app-gray-400;\n}\n.tab-inactive-full-width {\n  @apply py-4 px-12 bg-app-white border border-app-gray-300 text-app-gray-500\n  dark:bg-app-gray-800 dark:border-app-gray-600 dark:text-app-gray-400;\n}\n.tab-underline-border {\n  @apply border-b border-app-gray-200 dark:border-app-gray-700;\n}\n.tab-disabled {\n  @apply text-app-gray-400! cursor-not-allowed! dark:text-app-gray-500! bg-transparent!;\n}\n</style>\n"],"names":["element","computed","__props","emits","__emit","_createElementBlock","_normalizeClass","_openBlock","_createBlock","_resolveDynamicComponent","_cache","$event","_renderSlot","_ctx"],"mappings":"keAiBA,MAAMA,EAAUC,EAAAA,SAAS,IAChBC,EAAA,KAAO,IAAMA,EAAA,SACrB,EAEKC,EAAQC,8BAMZC,EAAAA,mBAsBK,KAAA,CArBF,GAAIH,EAAA,GACL,KAAK,MACJ,gBAAeA,EAAA,OACf,gBAAeA,EAAA,GACf,MAAKI,EAAAA,eAAA,CAAA,gBAAA,CAAA,uBAA8CJ,EAAA,UAAO,WAAA,EAAoBA,EAAA,SAAS,SAAS,CAAA,CAAA,IAEjGK,EAAAA,YAAAC,EAAAA,YAaYC,EAAAA,wBAZLT,EAAA,KAAO,EAAA,CACX,KAAOE,EAAA,SAAe,GAAJA,EAAA,KAClB,MAAKI,EAAAA,eAAA,wDAA4EJ,EAAA,OAASA,EAAA,SAAS,QAAM,cAAkBA,EAAA,OAAO,GAAKA,EAAA,SAAS,UAAQ,gBAAoBA,EAAA,OAAO,GAA8B,CAAA,eAAAA,EAAA,UAAO,cAAqBA,EAAA,kBAAiB,eAAkBA,EAAA,wBAA4BA,EAAA,gBAAA,EAA4BA,EAAA,SAAS,0BAAqCA,EAAA,QAAA,CAAQ,GAO9X,QAAKQ,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAA,CAAGT,EAAA,MAAI,CAAKA,EAAA,UAAYC,EAAK,SAAA,EAAA,qBAEnC,IAAQ,CAARS,EAAAA,WAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,6BAECX,EAAA,uBAA2BA,EAAA,sBAAtCG,EAAAA,mBAA2I,MAAA,OAA5F,MAAKC,EAAAA,eAAA,CAAA,sDAA0DJ,EAAA,SAAS,eAAe,CAAA,CAAA"}