{"version":3,"file":"Button.a28a7b09.js","sources":["../../../app/javascript/components/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from \"vue\";\nimport Icon from \"@components/Icon.vue\";\nimport { type IconType } from \"@modules/icons\";\n\nexport type ButtonProps = {\n  as?: string;\n  label?: string;\n  icon?: IconType;\n  rightIcon?: IconType;\n  primary?: boolean;\n  disabled?: boolean;\n  spinner?: boolean;\n  transparency?: boolean;\n  isGenerating?: boolean;\n};\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: \"button\",\n  label: \"\",\n  primary: false,\n  disabled: false,\n  spinner: false,\n  transparency: false,\n  isGenerating: false,\n});\n\nconst slots = useSlots();\n\nconst animateLeftIcon = computed(\n  () => props.isGenerating && (props.icon === \"sparkle\" || props.icon === \"sparkles\"),\n);\n\nconst animateRightIcon = computed(\n  () => props.isGenerating && (props.rightIcon === \"sparkle\" || props.rightIcon === \"sparkles\"),\n);\n</script>\n\n<template>\n  <component\n    :is=\"props.as\"\n    class=\"flex h-7 cursor-default appearance-none items-center justify-center gap-1.5 rounded-md border py-1 pl-2 text-center text-white outline-none\"\n    :class=\"[\n      slots.default || label ? 'pr-3' : 'pr-2',\n      isGenerating\n        ? 'animate-waving-horizontally border-white/10 bg-[length:300%_300%]'\n        : primary\n          ? 'border-accent-300 bg-gradient-to-b from-accent-400 to-accent-550'\n          : transparency\n            ? 'border-white/10 bg-white/[11%]'\n            : 'border-white/10 bg-neutral-500/30',\n\n      disabled ? 'opacity-40' : '',\n    ]\"\n    :disabled=\"disabled\"\n    :style=\"\n      isGenerating\n        ? 'background: linear-gradient(110deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82); background-size: 300% 300%;'\n        : ''\n    \"\n    :data-chromatic=\"isGenerating ? 'ignore' : ''\"\n  >\n    <Icon\n      v-if=\"spinner\"\n      icon=\"spinner\"\n      class=\"h-3.5 w-3.5 shrink-0 justify-self-start\"\n      data-chromatic=\"ignore\"\n    />\n    <Icon\n      v-else-if=\"icon\"\n      :icon=\"icon\"\n      class=\"h-3.5 w-3.5 shrink-0\"\n      :class=\"animateLeftIcon ? 'animate-ping' : ''\"\n      :data-chromatic=\"animateLeftIcon ? 'ignore' : ''\"\n    />\n    <div v-if=\"label\" class=\"flex grow items-center gap-2\" :class=\"label ? '' : 'shrink-0'\">\n      <div v-if=\"label\" class=\"grow text-center\">{{ label }}</div>\n    </div>\n    <div v-else-if=\"slots.default\" class=\"flex shrink grow items-center justify-center\">\n      <slot />\n    </div>\n    <Icon\n      v-if=\"rightIcon\"\n      :icon=\"rightIcon\"\n      class=\"h-3.5 w-3.5 shrink-0\"\n      :class=\"animateRightIcon ? 'animate-ping' : ''\"\n      :data-chromatic=\"animateRightIcon ? 'ignore' : ''\"\n    />\n  </component>\n</template>\n"],"names":["slots","useSlots","animateLeftIcon","computed","props","animateRightIcon"],"mappings":"sjBA2BMA,EAAQC,IAERC,EAAkBC,EACtB,IAAMC,EAAM,eAAiBA,EAAM,OAAS,WAAaA,EAAM,OAAS,WAAA,EAGpEC,EAAmBF,EACvB,IAAMC,EAAM,eAAiBA,EAAM,YAAc,WAAaA,EAAM,YAAc,WAAA"}