{"version":3,"file":"FormButton-CL0zIs3F.js","sources":["../../../resources/js/components/FormButton.vue"],"sourcesContent":["<template>\n  <Component\n    ref=\"buttonEl\"\n    :is=\"componentType\"\n    :type=\"buttonType\"\n    :href=\"href\"\n    :target=\"target\"\n    :class=\"classes\"\n    :tabindex=\"tabindex\"\n    :aria-disabled=\"disabled || loading\"\n    :style=\"loadingStyles\"\n  >\n    <div v-if=\"loading\" aria-label=\"Loading\"\n         class=\"absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center z-[1]\">\n      <div class=\"dot\"/>\n      <div class=\"dot\"/>\n      <div class=\"dot\"/>\n    </div>\n    <div :class=\"contentClasses\">\n      <slot/>\n    </div>\n  </Component>\n</template>\n\n<script setup>\nimport {computed, onMounted, ref} from \"vue\";\nimport {twMerge} from \"tailwind-merge\";\n\nconst props = defineProps({\n  color: {\n    type: String,\n    required: true,\n    default: \"secondary\",\n    validator: value => [\"primary\", \"secondary\", \"outline\", \"outline-white\", \"outline-orange\", \"outline-green\", \"amber\",\n      \"outline-blue\", \"gradient\", \"danger\", \"warning\", \"white\", \"green\", \"outline-primary\", \"red\", \"secondary-dark\",\n      \"white-translucent\", \"outline-secondary\", \"hex\", \"transparent\", \"black\", \"transparent-slate\", \"match\", \"none\",\n      \"blue\", \"connect\", \"hire\"\n    ].includes(value),\n  },\n  size: {\n    type: String,\n    default: \"md\",\n    validator: value => [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"lg-wide\", \"tall\", \"full\", \"icon\"].includes(value),\n  },\n  type: {\n    type: String,\n    default: \"button\",\n  },\n  href: {\n    type: String,\n    default: undefined,\n  },\n  target: {\n    type: String,\n    default: undefined,\n  },\n  loading: {\n    type: Boolean,\n    default: false,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  useDiv: {\n    type: Boolean,\n    default: false,\n  },\n  useSpan: {\n    type: Boolean,\n    default: false,\n  },\n  useRawLink: {\n    type: Boolean,\n    default: false,\n  },\n  flex: {\n    type: Boolean,\n    default: false,\n  },\n  justifyStart: {\n    type: Boolean,\n    default: false,\n  },\n  bold: {\n    type: Boolean,\n    default: false,\n  },\n  medium: {\n    type: Boolean,\n    default: false,\n  },\n  hexForeground: {\n    type: String,\n    default: \"\",\n  },\n  hexBackground: {\n    type: String,\n    default: \"\",\n  },\n  overrideClasses: {\n    type: String,\n    default: \"\",\n  },\n  useRouterLink: {\n    type: Boolean,\n    default: false,\n  },\n  focusOnMount: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst componentType = computed(() => {\n  if (props.useDiv) return \"div\";\n  if (props.useSpan) return \"span\";\n  if (props.useRouterLink) return \"router-link\";\n  if (props.useRawLink) return \"a\";\n  return \"button\";\n});\nconst buttonType = computed(() => (props.useDiv ? undefined : props.type || \"button\"));\nconst tabindex = computed(() => (props.disabled ? -1 : 0));\nconst buttonEl = ref(null);\n\nconst classes = computed(() => {\n  const classes = {\n    \"relative rounded-lg transition-all block css-vars text-center\": true,\n    \"text-white bg-primary-600 hover:bg-primary-700 hover:shadow-md active:shadow-lg\": props.color === \"primary\",\n    \"text-white bg-green-600 hover:bg-green-700 hover:shadow-md active:shadow-lg\": props.color === \"green\",\n    \"text-slate-600 bg-slate-200 hover:brightness-95 active:bg-slate-300\": props.color === \"secondary\",\n    \"text-white bg-[#343a40] hover:bg-black\": props.color === \"secondary-dark\",\n    \"text-white bg-bdBlue-600 hover:bg-bdBlue-700 focus:outline-none outline-none\": props.color === \"blue\",\n    \"border border-slate-900 text-slate-900\": props.color === \"outline\",\n    \"border border-white text-white opacity-90 hover:opacity-100 focus:outline-none\": props.color === \"outline-white\",\n    \"bg-transparent text-slate-600 hover:text-slate-700\": props.color === \"transparent\",\n    \"bg-white text-white bg-opacity-20\": props.color === \"white-translucent\",\n    \"text-white bg-black opacity-90 hover:opacity-100 hover:shadow-lg\": props.color === \"black\",\n    \"bg-transparent text-slate-600 hover:bg-slate-50 hover:text-slate-700\": props.color === \"transparent-slate\",\n    \"bg-hex text-hex hover:brightness-95\": props.color === \"hex\",\n    \"border border-slate-200 bg-white hover:bg-slate-100 hover:border-slate-300 text-slate-600 hover:text-slate-700\": props.color === \"outline-secondary\",\n    \"border border-bdOrange-600 text-bdOrange-600 hover:border-bdOrange-700 active:border-bdOrange-800 hover:text-bdOrange-700 active:text-bdOrange-600 focus:outline-none\": props.color === \"outline-orange\",\n    \"border border-bdBlue-600 text-bdBlue-600 hover:border-bdBlue-700 active:border-bdBlue-800 hover:text-bdBlue-700 active:text-bdBlue-600 focus:outline-none\": props.color === \"outline-blue\",\n    \"border border-green-600 text-green-600 hover:border-green-700 active:border-green-800 hover:text-green-700 active:text-green-600 focus:outline-none\": props.color === \"outline-green\",\n    \"border border-primary-600 text-primary-600 hover:border-primary-700 active:border-primary-800 hover:text-primary-700 active:text-primary-600 focus:outline-none\": props.color === \"outline-primary\",\n    \"text-white bg-gradient glint font-medium hover:shadow-lg hover:brightness-95 active:brightness-90 focus:outline-none focus:ring-2 focus:ring-gradient ring-offset-2\": props.color === \"gradient\",\n    \"text-white bg-match glint font-medium hover:shadow-lg hover:brightness-95 active:shadow-md active:brightness-90\": props.color === \"match\",\n    \"text-white bg-connect glint font-medium hover:shadow-lg hover:brightness-95 active:shadow-md active:brightness-90\": props.color === \"connect\",\n    \"text-white bg-hire glint font-medium hover:shadow-lg hover:brightness-95 active:shadow-md active:brightness-90\": props.color === \"hire\",\n    \"text-red-600 bg-red-100 font-medium hover:text-red-800 hover:shadow-sm active:shadow-md hover:bg-red-200\": props.color === \"danger\",\n    \"text-white bg-red-600 font-medium hover:bg-red-700 hover:shadow-sm active:shadow-md\": props.color === \"red\",\n    \"text-white bg-amber-600 font-medium hover:bg-amber-700 hover:shadow-sm active:shadow-md\": props.color === \"amber\",\n    \"text-amber-600 bg-amber-100 font-medium hover:text-amber-800 hover:shadow-sm active:shadow-md hover:bg-amber-200\": props.color === \"warning\",\n    \"text-slate-900 bg-slate-100 hover:brightness-95 active:bg-slate-200 focus:outline-none focus:ring ring-white/50\": props.color === \"white\",\n    \"px-1.5 sm:px-3 py-1.5 text-sm\": props.size === \"xs\",\n    \"px-1.5 py-1 text-sm\": props.size === \"xxs\",\n    \"px-2 sm:px-4 py-1.5\": props.size === \"sm\",\n    \"px-4 sm:px-6 py-2\": props.size === \"md\",\n    \"px-6 sm:px-8 py-2\": props.size === \"lg\",\n    \"px-8 sm:px-10 py-3 text-\": props.size === \"xl\",\n    \"px-4 py-3\": props.size === \"tall\",\n    \"px-12 py-2.5\": props.size === \"lg-wide\",\n    \"w-full py-2\": props.size === \"full\",\n    \"p-2.5\": props.size === \"icon\",\n    \"opacity-70 cursor-not-allowed\": props.disabled,\n    \"font-bold\": props.bold,\n    \"font-medium\": props.medium,\n    \"cursor-pointer\": !props.disabled,\n  };\n\n  const classesString = Object.keys(classes).filter(key => classes[key]).join(\" \");\n  return twMerge(classesString, props.overrideClasses);\n});\n\nconst loadingStyles = computed(() => {\n  const colors = {\n    \"outline\": \"#94a3b8\",\n    \"outline-white\": \"#fff\",\n    \"outline-orange\": \"#fff\",\n    \"outline-blue\": \"#94a3b8\",\n    \"outline-green\": \"#16a34a\",\n    \"outline-primary\": \"#2c67f6\",\n    \"gradient\": \"#fff\",\n    \"danger\": \"#f87171\",\n    \"secondary\": \"#475569\",\n    \"warning\": \"#fbbf24\",\n    \"white\": \"#94a3b8\",\n    \"green\": \"#10b981\",\n    \"red\": \"#ef4444\",\n    \"black\": \"#fff\",\n    \"match\": \"#fff\",\n    \"connect\": \"#fff\",\n    \"hire\": \"#fff\",\n    \"transparent-slate\": \"#475569\",\n    \"hex\": props.hexForeground || \"#475569\",\n  };\n  return `--loading-color:${colors[props.color]};--hex-foreground:${props.hexForeground || \"#475569\"};--hex-background:${props.hexBackground || \"#e2e8f0\"}`;\n});\n\nconst contentClasses = computed(() => ({\n  \"opacity-0\": props.loading,\n  \"flex items-center gap-2\": props.flex,\n  \"justify-start\": props.justifyStart,\n  \"justify-center\": !props.justifyStart,\n}));\n\nonMounted(() => props.focusOnMount && buttonEl.value && buttonEl.value.focus());\n</script>\n\n<style scoped>\n.css-vars {\n  --loading-color: #fff;\n  --hex-foreground: #475569;\n  --hex-background: #e2e8f0;\n}\n\n.text-hex {\n  color: var(--hex-foreground);\n}\n\n.bg-hex {\n  background-color: var(--hex-background);\n}\n\n.dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  margin: 0 5px;\n  animation: bounce 0.6s infinite;\n}\n\n@keyframes bounce {\n  0%, 50% {\n    transform: translateY(0);\n  }\n  25% {\n    transform: translateY(-6px);\n  }\n}\n\n.dot:nth-of-type(1) {\n  background-color: var(--loading-color);\n  animation-delay: 0s;\n}\n\n.dot:nth-of-type(2) {\n  background-color: var(--loading-color);\n  animation-delay: 0.08s;\n}\n\n.dot:nth-of-type(3) {\n  background-color: var(--loading-color);\n  animation-delay: 0.16s;\n}\n</style>\n"],"names":["props","__props","componentType","computed","buttonType","tabindex","buttonEl","ref","classes","classesString","key","twMerge","loadingStyles","contentClasses","onMounted"],"mappings":"otDA4BA,MAAMA,EAAQC,EAsFRC,EAAgBC,EAAS,IACzBH,EAAM,OAAe,MACrBA,EAAM,QAAgB,OACtBA,EAAM,cAAsB,cAC5BA,EAAM,WAAmB,IACtB,QACR,EACKI,EAAaD,EAAS,IAAOH,EAAM,OAAS,OAAYA,EAAM,MAAQ,QAAS,EAC/EK,EAAWF,EAAS,IAAOH,EAAM,SAAW,GAAK,CAAE,EACnDM,EAAWC,EAAI,IAAI,EAEnBC,EAAUL,EAAS,IAAM,CAC7B,MAAMK,EAAU,CACd,gEAAiE,GACjE,kFAAmFR,EAAM,QAAU,UACnG,8EAA+EA,EAAM,QAAU,QAC/F,sEAAuEA,EAAM,QAAU,YACvF,yCAA0CA,EAAM,QAAU,iBAC1D,+EAAgFA,EAAM,QAAU,OAChG,yCAA0CA,EAAM,QAAU,UAC1D,iFAAkFA,EAAM,QAAU,gBAClG,qDAAsDA,EAAM,QAAU,cACtE,oCAAqCA,EAAM,QAAU,oBACrD,mEAAoEA,EAAM,QAAU,QACpF,uEAAwEA,EAAM,QAAU,oBACxF,sCAAuCA,EAAM,QAAU,MACvD,iHAAkHA,EAAM,QAAU,oBAClI,wKAAyKA,EAAM,QAAU,iBACzL,4JAA6JA,EAAM,QAAU,eAC7K,sJAAuJA,EAAM,QAAU,gBACvK,kKAAmKA,EAAM,QAAU,kBACnL,sKAAuKA,EAAM,QAAU,WACvL,kHAAmHA,EAAM,QAAU,QACnI,oHAAqHA,EAAM,QAAU,UACrI,iHAAkHA,EAAM,QAAU,OAClI,2GAA4GA,EAAM,QAAU,SAC5H,sFAAuFA,EAAM,QAAU,MACvG,0FAA2FA,EAAM,QAAU,QAC3G,mHAAoHA,EAAM,QAAU,UACpI,kHAAmHA,EAAM,QAAU,QACnI,gCAAiCA,EAAM,OAAS,KAChD,sBAAuBA,EAAM,OAAS,MACtC,sBAAuBA,EAAM,OAAS,KACtC,oBAAqBA,EAAM,OAAS,KACpC,oBAAqBA,EAAM,OAAS,KACpC,2BAA4BA,EAAM,OAAS,KAC3C,YAAaA,EAAM,OAAS,OAC5B,eAAgBA,EAAM,OAAS,UAC/B,cAAeA,EAAM,OAAS,OAC9B,QAASA,EAAM,OAAS,OACxB,gCAAiCA,EAAM,SACvC,YAAaA,EAAM,KACnB,cAAeA,EAAM,OACrB,iBAAkB,CAACA,EAAM,QAC1B,EAEKS,EAAgB,OAAO,KAAKD,CAAO,EAAE,OAAOE,GAAOF,EAAQE,CAAG,CAAC,EAAE,KAAK,GAAG,EAC/E,OAAOC,EAAQF,EAAeT,EAAM,eAAe,CACrD,CAAC,EAEKY,EAAgBT,EAAS,IAsBtB,mBArBQ,CACb,QAAW,UACX,gBAAiB,OACjB,iBAAkB,OAClB,eAAgB,UAChB,gBAAiB,UACjB,kBAAmB,UACnB,SAAY,OACZ,OAAU,UACV,UAAa,UACb,QAAW,UACX,MAAS,UACT,MAAS,UACT,IAAO,UACP,MAAS,OACT,MAAS,OACT,QAAW,OACX,KAAQ,OACR,oBAAqB,UACrB,IAAOH,EAAM,eAAiB,SAC/B,EACgCA,EAAM,KAAK,CAAC,qBAAqBA,EAAM,eAAiB,SAAS,qBAAqBA,EAAM,eAAiB,SAAS,EACxJ,EAEKa,EAAiBV,EAAS,KAAO,CACrC,YAAaH,EAAM,QACnB,0BAA2BA,EAAM,KACjC,gBAAiBA,EAAM,aACvB,iBAAkB,CAACA,EAAM,YAC3B,EAAE,EAEF,OAAAc,EAAU,IAAMd,EAAM,cAAgBM,EAAS,OAASA,EAAS,MAAM,OAAO"}