{"version":3,"file":"joko-ui.umd.cjs","sources":["../src/components/JButton.vue","../src/components/JAlert.vue","../src/components/JBadge.vue"],"sourcesContent":["<template>\n  <button :class=\"buttonClasses\" :disabled=\"disabled || loading\" :type=\"type\" @click=\"handleClick\">\n    <span v-if=\"loading\" class=\"j-button__spinner\"></span>\n    <slot v-else />\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nexport interface JButtonProps {\n  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link'\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  disabled?: boolean\n  loading?: boolean\n  fullWidth?: boolean\n  type?: 'button' | 'submit' | 'reset'\n}\n\nconst props = withDefaults(defineProps<JButtonProps>(), {\n  variant: 'primary',\n  size: 'md',\n  disabled: false,\n  loading: false,\n  fullWidth: false,\n  type: 'button',\n})\n\nconst emit = defineEmits<{\n  click: [event: MouseEvent]\n}>()\n\nconst buttonClasses = computed(() => [\n  'j-button',\n  `j-button--${props.variant}`,\n  `j-button--${props.size}`,\n  {\n    'j-button--disabled': props.disabled,\n    'j-button--loading': props.loading,\n    'j-button--full-width': props.fullWidth,\n  },\n])\n\nconst handleClick = (event: MouseEvent) => {\n  if (!props.disabled && !props.loading) {\n    emit('click', event)\n  }\n}\n</script>\n\n<style scoped>\n.j-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--joko-space-2);\n  font-family: var(--joko-font-sans);\n  font-weight: var(--joko-font-medium);\n  border: none;\n  cursor: pointer;\n  transition: all var(--joko-transition-base) var(--joko-ease-out);\n  white-space: nowrap;\n  user-select: none;\n}\n\n.j-button:focus-visible {\n  outline: 2px solid var(--joko-blue-500);\n  outline-offset: 2px;\n}\n\n/* ========================================\n * VARIANTS\n * ======================================== */\n\n/* Primary - Jokowi Red */\n.j-button--primary {\n  background-color: var(--joko-red-600);\n  color: var(--joko-white);\n}\n\n.j-button--primary:hover:not(:disabled) {\n  background-color: var(--joko-red-700);\n  transform: scale(1.02);\n}\n\n.j-button--primary:active:not(:disabled) {\n  background-color: var(--joko-red-800);\n  transform: scale(0.98);\n}\n\n/* Secondary - Development Blue */\n.j-button--secondary {\n  background-color: var(--joko-blue-600);\n  color: var(--joko-white);\n}\n\n.j-button--secondary:hover:not(:disabled) {\n  background-color: var(--joko-blue-700);\n  transform: scale(1.02);\n}\n\n.j-button--secondary:active:not(:disabled) {\n  background-color: var(--joko-blue-800);\n  transform: scale(0.98);\n}\n\n/* Outline */\n.j-button--outline {\n  background-color: transparent;\n  color: var(--joko-red-600);\n  border: 2px solid var(--joko-red-600);\n}\n\n.j-button--outline:hover:not(:disabled) {\n  background-color: var(--joko-red-50);\n}\n\n.j-button--outline:active:not(:disabled) {\n  background-color: var(--joko-red-100);\n}\n\n/* Ghost */\n.j-button--ghost {\n  background-color: transparent;\n  color: var(--joko-neutral-700);\n}\n\n.j-button--ghost:hover:not(:disabled) {\n  background-color: var(--joko-neutral-100);\n}\n\n.j-button--ghost:active:not(:disabled) {\n  background-color: var(--joko-neutral-200);\n}\n\n/* Link */\n.j-button--link {\n  background-color: transparent;\n  color: var(--joko-blue-600);\n  text-decoration: none;\n}\n\n.j-button--link:hover:not(:disabled) {\n  text-decoration: underline;\n  color: var(--joko-blue-700);\n}\n\n/* ========================================\n * SIZES\n * ======================================== */\n\n.j-button--xs {\n  padding: calc(var(--joko-space-1) * 1.5) var(--joko-space-3);\n  font-size: var(--joko-text-xs);\n  border-radius: var(--joko-rounded-md);\n}\n\n.j-button--sm {\n  padding: var(--joko-space-2) var(--joko-space-4);\n  font-size: var(--joko-text-sm);\n  border-radius: var(--joko-rounded-md);\n}\n\n.j-button--md {\n  padding: var(--joko-space-3) var(--joko-space-6);\n  font-size: var(--joko-text-base);\n  border-radius: var(--joko-rounded-lg);\n}\n\n.j-button--lg {\n  padding: var(--joko-space-4) var(--joko-space-8);\n  font-size: var(--joko-text-lg);\n  border-radius: var(--joko-rounded-lg);\n}\n\n.j-button--xl {\n  padding: var(--joko-space-5) var(--joko-space-10);\n  font-size: var(--joko-text-xl);\n  border-radius: var(--joko-rounded-xl);\n}\n\n/* ========================================\n * STATES\n * ======================================== */\n\n.j-button--disabled,\n.j-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  transform: none !important;\n}\n\n.j-button--loading {\n  cursor: wait;\n}\n\n.j-button--full-width {\n  width: 100%;\n}\n\n/* ========================================\n * LOADING SPINNER\n * ======================================== */\n\n.j-button__spinner {\n  width: 1em;\n  height: 1em;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: j-button-spin 1s linear infinite;\n}\n\n@keyframes j-button-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ========================================\n * ACCESSIBILITY\n * ======================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .j-button {\n    transition: none;\n  }\n\n  .j-button:hover:not(:disabled) {\n    transform: none;\n  }\n\n  .j-button:active:not(:disabled) {\n    transform: none;\n  }\n\n  .j-button__spinner {\n    animation-duration: 2s;\n  }\n}\n</style>\n","<template>\n  <div :class=\"alertClasses\" role=\"alert\">\n    <div class=\"j-alert__icon\">\n      <slot name=\"icon\">\n        <component :is=\"iconComponent\" :size=\"24\" />\n      </slot>\n    </div>\n\n    <div class=\"j-alert__content\">\n      <h4 v-if=\"title\" class=\"j-alert__title\">{{ title }}</h4>\n      <div class=\"j-alert__description\">\n        <slot />\n      </div>\n    </div>\n\n    <button\n      v-if=\"dismissible\"\n      class=\"j-alert__close\"\n      @click=\"handleDismiss\"\n      aria-label=\"Close alert\"\n    >\n      <X :size=\"20\" />\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CheckCircle, AlertTriangle, XCircle, Info, X } from 'lucide-vue-next'\n\nexport interface JAlertProps {\n  variant?: 'success' | 'warning' | 'error' | 'info'\n  title?: string\n  dismissible?: boolean\n}\n\nconst props = withDefaults(defineProps<JAlertProps>(), {\n  variant: 'info',\n  dismissible: false,\n})\n\nconst emit = defineEmits<{\n  dismiss: []\n}>()\n\nconst alertClasses = computed(() => ['j-alert', `j-alert--${props.variant}`])\n\nconst iconComponent = computed(() => {\n  const icons = {\n    success: CheckCircle,\n    warning: AlertTriangle,\n    error: XCircle,\n    info: Info,\n  }\n  return icons[props.variant]\n})\n\nconst handleDismiss = () => {\n  emit('dismiss')\n}\n</script>\n\n<style scoped>\n.j-alert {\n  position: relative;\n  display: flex;\n  gap: var(--joko-space-4);\n  padding: var(--joko-space-4);\n  border-radius: var(--joko-rounded-lg);\n  border-left-width: 4px;\n  border-left-style: solid;\n}\n\n/* ========================================\n * VARIANTS\n * ======================================== */\n\n/* Success */\n.j-alert--success {\n  background-color: var(--joko-success-50);\n  border-left-color: var(--joko-success-600);\n}\n\n.j-alert--success .j-alert__icon {\n  color: var(--joko-success-600);\n}\n\n.j-alert--success .j-alert__title {\n  color: var(--joko-success-900);\n}\n\n.j-alert--success .j-alert__description {\n  color: var(--joko-success-900);\n}\n\n/* Warning */\n.j-alert--warning {\n  background-color: var(--joko-warning-50);\n  border-left-color: var(--joko-warning-600);\n}\n\n.j-alert--warning .j-alert__icon {\n  color: var(--joko-warning-600);\n}\n\n.j-alert--warning .j-alert__title {\n  color: var(--joko-warning-900);\n}\n\n.j-alert--warning .j-alert__description {\n  color: var(--joko-warning-900);\n}\n\n/* Error */\n.j-alert--error {\n  background-color: var(--joko-error-50);\n  border-left-color: var(--joko-error-600);\n}\n\n.j-alert--error .j-alert__icon {\n  color: var(--joko-error-600);\n}\n\n.j-alert--error .j-alert__title {\n  color: var(--joko-error-900);\n}\n\n.j-alert--error .j-alert__description {\n  color: var(--joko-error-900);\n}\n\n/* Info */\n.j-alert--info {\n  background-color: var(--joko-info-50);\n  border-left-color: var(--joko-info-600);\n}\n\n.j-alert--info .j-alert__icon {\n  color: var(--joko-info-600);\n}\n\n.j-alert--info .j-alert__title {\n  color: var(--joko-info-900);\n}\n\n.j-alert--info .j-alert__description {\n  color: var(--joko-info-900);\n}\n\n/* ========================================\n * ALERT ELEMENTS\n * ======================================== */\n\n.j-alert__icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: flex-start;\n}\n\n.j-alert__content {\n  flex: 1;\n  min-width: 0;\n}\n\n.j-alert__title {\n  font-size: var(--joko-text-base);\n  font-weight: var(--joko-font-semibold);\n  margin: 0 0 var(--joko-space-2) 0;\n  line-height: var(--joko-leading-snug);\n}\n\n.j-alert__description {\n  font-size: var(--joko-text-sm);\n  line-height: var(--joko-leading-normal);\n}\n\n.j-alert__close {\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: currentColor;\n  opacity: 0.6;\n  transition: opacity var(--joko-transition-base) var(--joko-ease-out);\n  display: flex;\n  align-items: flex-start;\n}\n\n.j-alert__close:hover {\n  opacity: 1;\n}\n\n.j-alert__close:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  border-radius: var(--joko-rounded-sm);\n}\n</style>\n","<template>\n  <span :class=\"badgeClasses\">\n    <slot />\n  </span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nexport interface JBadgeProps {\n  variant?: 'primary' | 'success' | 'warning' | 'error' | 'neutral'\n  size?: 'sm' | 'md' | 'lg'\n  rounded?: boolean\n}\n\nconst props = withDefaults(defineProps<JBadgeProps>(), {\n  variant: 'neutral',\n  size: 'md',\n  rounded: true,\n})\n\nconst badgeClasses = computed(() => [\n  'j-badge',\n  `j-badge--${props.variant}`,\n  `j-badge--${props.size}`,\n  {\n    'j-badge--rounded': props.rounded,\n  },\n])\n</script>\n\n<style scoped>\n.j-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--joko-font-sans);\n  font-weight: var(--joko-font-medium);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  white-space: nowrap;\n  line-height: 1;\n}\n\n/* ========================================\n * VARIANTS\n * ======================================== */\n\n/* Primary */\n.j-badge--primary {\n  background-color: var(--joko-red-100);\n  color: var(--joko-red-800);\n}\n\n/* Success */\n.j-badge--success {\n  background-color: var(--joko-success-100);\n  color: var(--joko-success-800);\n}\n\n/* Warning */\n.j-badge--warning {\n  background-color: var(--joko-warning-100);\n  color: var(--joko-warning-800);\n}\n\n/* Error */\n.j-badge--error {\n  background-color: var(--joko-error-100);\n  color: var(--joko-error-800);\n}\n\n/* Neutral */\n.j-badge--neutral {\n  background-color: var(--joko-neutral-100);\n  color: var(--joko-neutral-800);\n}\n\n/* ========================================\n * SIZES\n * ======================================== */\n\n.j-badge--sm {\n  padding: var(--joko-space-1) var(--joko-space-2);\n  font-size: var(--joko-text-xs);\n}\n\n.j-badge--md {\n  padding: var(--joko-space-1) var(--joko-space-3);\n  font-size: var(--joko-text-xs);\n}\n\n.j-badge--lg {\n  padding: var(--joko-space-2) var(--joko-space-4);\n  font-size: var(--joko-text-sm);\n}\n\n/* ========================================\n * ROUNDED\n * ======================================== */\n\n.j-badge--rounded {\n  border-radius: var(--joko-rounded-full);\n}\n\n.j-badge:not(.j-badge--rounded) {\n  border-radius: var(--joko-rounded-md);\n}\n</style>\n"],"names":["props","__props","emit","__emit","buttonClasses","computed","handleClick","event","_createElementBlock","_openBlock","_hoisted_2","_renderSlot","_ctx","alertClasses","iconComponent","CheckCircle","AlertTriangle","XCircle","Info","handleDismiss","_createElementVNode","_hoisted_1","_createBlock","_resolveDynamicComponent","_hoisted_3","_toDisplayString","_hoisted_4","_createVNode","_unref","X","badgeClasses"],"mappings":"4nBAmBA,MAAMA,EAAQC,EASRC,EAAOC,EAIPC,EAAgBC,EAAAA,SAAS,IAAM,CACnC,WACA,aAAaL,EAAM,OAAO,GAC1B,aAAaA,EAAM,IAAI,GACvB,CACE,qBAAsBA,EAAM,SAC5B,oBAAqBA,EAAM,QAC3B,uBAAwBA,EAAM,SAAA,CAChC,CACD,EAEKM,EAAeC,GAAsB,CACrC,CAACP,EAAM,UAAY,CAACA,EAAM,SAC5BE,EAAK,QAASK,CAAK,CAEvB,8BA9CEC,EAAAA,mBAGS,SAAA,CAHA,uBAAOJ,EAAA,KAAa,EAAG,SAAUH,EAAA,UAAYA,EAAA,QAAU,KAAMA,EAAA,KAAO,QAAOK,CAAA,GACtEL,EAAA,SAAZQ,EAAAA,UAAA,EAAAD,EAAAA,mBAAsD,OAAtDE,CAAsD,GACtDC,EAAAA,WAAeC,EAAA,OAAA,UAAA,CAAA,IAAA,CAAA,EAAA,OAAA,EAAA,CAAA,8YCiCnB,MAAMZ,EAAQC,EAKRC,EAAOC,EAIPU,EAAeR,WAAS,IAAM,CAAC,UAAW,YAAYL,EAAM,OAAO,EAAE,CAAC,EAEtEc,EAAgBT,EAAAA,SAAS,KACf,CACZ,QAASU,EAAAA,YACT,QAASC,EAAAA,cACT,MAAOC,EAAAA,QACP,KAAMC,EAAAA,IAAA,GAEKlB,EAAM,OAAO,CAC3B,EAEKmB,EAAgB,IAAM,CAC1BjB,EAAK,SAAS,CAChB,8BA1DEM,EAAAA,mBAsBM,MAAA,CAtBA,uBAAOK,EAAA,KAAY,EAAE,KAAK,OAAA,GAC9BO,EAAAA,mBAIM,MAJNC,EAIM,CAHJV,EAAAA,WAEOC,mBAFP,IAEO,EADLH,YAAA,EAAAa,EAAAA,YAA4CC,0BAA5BT,EAAA,KAAa,EAAA,CAAG,KAAM,GAAE,EAAA,QAI5CM,EAAAA,mBAKM,MALNV,EAKM,CAJMT,EAAA,qBAAVO,EAAAA,mBAAwD,KAAxDgB,EAAwDC,EAAAA,gBAAbxB,EAAA,KAAK,EAAA,CAAA,+BAChDmB,EAAAA,mBAEM,MAFNM,EAEM,CADJf,EAAAA,WAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,KAKJX,EAAA,2BADRO,EAAAA,mBAOS,SAAA,OALP,MAAM,iBACL,QAAOW,EACR,aAAW,aAAA,GAEXQ,EAAAA,YAAgBC,EAAAA,MAAAC,EAAAA,CAAA,EAAA,CAAZ,KAAM,GAAE,CAAA,qNCNlB,MAAM7B,EAAQC,EAMR6B,EAAezB,EAAAA,SAAS,IAAM,CAClC,UACA,YAAYL,EAAM,OAAO,GACzB,YAAYA,EAAM,IAAI,GACtB,CACE,mBAAoBA,EAAM,OAAA,CAC5B,CACD,8BA3BCQ,EAAAA,mBAEO,OAAA,CAFA,uBAAOsB,EAAA,KAAY,CAAA,GACxBnB,EAAAA,WAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA"}