{"version":3,"file":"Radio.cjs","sources":["../../common/Radio/Radio.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { VNode } from \"vue\";\n\nimport { IRadioProps, RadioClassesKey } from \"./types\";\n\nconst {\n  checked = false,\n  disabled = false,\n  labelPlacement = \"right\",\n  label = \"\",\n  description = \"\",\n  classes = {} as Partial<Record<RadioClassesKey, string>>,\n  id = \"\",\n  value = \"\",\n} = defineProps<IRadioProps>();\n\ndefineSlots<{\n  radioLabel(): VNode;\n}>();\n\nconst emits = defineEmits<{\n  (e: \"onChange\", checkedValue: string, event?: Event): void;\n  (e: \"update:value\", checkedValue: string): void;\n}>();\n\nconst handleRadioChange = (event: Event) => {\n  const checkedValue = (event?.target as HTMLInputElement)?.value;\n  emits(\"onChange\", checkedValue, event);\n  emits(\"update:value\", checkedValue);\n};\n</script>\n\n<template>\n  <div :class=\"['mb-4 flex w-fit items-center gap-2', `radio-label-${labelPlacement}`, $attrs.class, classes?.container]\">\n    <input\n      :id=\"id\"\n      :value=\"value\"\n      type=\"radio\"\n      class=\"radio\"\n      :disabled=\"disabled\"\n      :checked=\"checked\"\n      v-bind=\"{ ...$attrs, class: '', style: {} }\"\n      @change=\"handleRadioChange\"\n    />\n    <label\n      v-if=\"label && !$slots?.radioLabel\"\n      aria-hidden\n      :for=\"id\"\n      :class=\"['radio-label flex flex-col', { '!text-app-gray-400 !cursor-not-allowed': disabled }, classes?.label, disabled && classes?.disabled]\"\n    >\n      <span>{{ label }}</span>\n      <span v-if=\"description\" class=\"text-app-gray-500 dark:text-app-gray-400 text-xs\">{{ description }}</span>\n    </label>\n    <label v-if=\"$slots?.radioLabel\" :for=\"id\">\n      <slot name=\"radioLabel\" />\n    </label>\n  </div>\n</template>\n\n<style scoped>\n@reference \"../../styles/main.css\";\n\n.radio {\n  @apply w-4 h-4 appearance-none border border-app-gray-300 rounded-full bg-app-gray-50 hover:ring-offset-0 hover:ring-1 hover:ring-app-primary-200 dark:bg-app-gray-700 dark:border-app-primary-500 dark:hover:ring-app-primary-600;\n  border-radius: 100%;\n}\n\n.radio:checked {\n  box-shadow:\n    0 0 0 3px var(--app-primary-500) inset,\n    0 0 0 3px var(--app-primary-500) inset !important;\n}\n\n.radio:disabled {\n  @apply opacity-100! hover:ring-0! border-app-gray-400! dark:border-app-gray-400!;\n}\n\n.radio:checked:disabled {\n  box-shadow:\n    0 0 0 3px var(--app-gray-400) inset,\n    0 0 0 3px var(--app-gray-400) inset !important;\n}\n\n.radio-label {\n  @apply text-sm font-normal text-app-gray-900 dark:text-app-white cursor-pointer;\n}\n\n.radio-label-left {\n  @apply flex-row-reverse;\n}\n\n.radio-label-right {\n  @apply flex-row;\n}\n\n.radio-label-top {\n  @apply flex-col-reverse;\n}\n\n.radio-label-bottom {\n  @apply flex-col;\n}\n</style>\n"],"names":["emits","__emit","handleRadioChange","event","checkedValue","_createElementBlock","_normalizeClass","__props","$attrs","_createElementVNode","_mergeProps","_hoisted_1","$slots","_hoisted_3","_toDisplayString","_renderSlot","_ctx"],"mappings":"wgBAoBA,MAAMA,EAAQC,EAKRC,EAAqBC,GAAiB,CAC1C,MAAMC,EAAgBD,GAAO,QAA6B,MAC1DH,EAAM,WAAYI,EAAcD,CAAK,EACrCH,EAAM,eAAgBI,CAAY,CACpC,8BAIEC,EAAAA,mBAuBM,MAAA,CAvBA,MAAKC,EAAAA,eAAA,CAAA,qCAAA,eAAwDC,gBAAc,GAAIC,EAAAA,OAAO,MAAOD,EAAA,SAAS,SAAS,CAAA,CAAA,GACnHE,EAAAA,mBASE,QATFC,aASE,CARC,GAAIH,EAAA,GACJ,MAAOA,EAAA,MACR,KAAK,QACL,MAAM,QACL,SAAUA,EAAA,SACV,QAASA,EAAA,OAAA,MACGC,EAAAA,OAAM,MAAA,GAAA,MAAA,CAAA,CAAA,EAAA,CAClB,SAAQN,CAAA,CAAiB,EAAA,KAAA,GAAAS,CAAA,EAGpBJ,EAAA,OAAK,CAAKK,EAAAA,QAAQ,0BAD1BP,EAAAA,mBAQQ,QAAA,OANN,cAAA,GACC,IAAKE,EAAA,GACL,MAAKD,EAAAA,eAAA,CAAA,4BAAA,CAAA,yCAA4EC,EAAA,QAAA,EAAYA,EAAA,SAAS,MAAOA,EAAA,UAAYA,EAAA,SAAS,QAAQ,CAAA,CAAA,GAE3IE,EAAAA,mBAAwB,8BAAfF,EAAA,KAAK,EAAA,CAAA,EACFA,EAAA,2BAAZF,EAAAA,mBAA0G,OAA1GQ,EAA0GC,EAAAA,gBAArBP,EAAA,WAAW,EAAA,CAAA,mEAErFK,EAAAA,QAAQ,0BAArBP,EAAAA,mBAEQ,QAAA,OAF0B,IAAKE,EAAA,EAAA,GACrCQ,EAAAA,WAA0BC,EAAA,OAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA"}