@stachelock/ui 0.3.1 → 0.5.0

package/dist/{ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-Cri9BiBy.js.map → ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-DkABeWJt.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-Cri9BiBy.js","sources":["../src/components/layouts/ProfileHeaderAvatar.vue"],"sourcesContent":["<!--\n  @component ProfileHeaderAvatar\n  @description User avatar with dropdown menu for profile actions.\n  \n  A flexible user avatar component that displays a profile image (via Cloudinary)\n  or initials fallback, with an expandable dropdown menu showing user info and actions.\n  \n  @props\n  - userName (string): Display name of the user\n  - userEmail (string): Email address of the user\n  - imagePublicId (string, optional): Cloudinary public_id for profile image\n  - imageUrl (string, optional): Direct URL for profile image (fallback if no publicId)\n  - showLogout (boolean): Show logout button in dropdown (default: true)\n  - logoutLabel (string): Label for logout button (default: 'Log Out')\n  - size (number): Avatar size in pixels (default: 40)\n  - ringColor (string): Tailwind ring color class for hover/active state\n  - menuPosition (object): Position overrides for dropdown menu\n  \n  @emits\n  - logout: Emitted when logout button is clicked\n  - menu-toggle: Emitted when menu is opened/closed with boolean state\n  \n  @slots\n  - menu-header: Custom header content in dropdown (replaces default name/email)\n  - menu-items: Additional menu items between user info and logout\n  - avatar: Custom avatar content (replaces default image/initials)\n  \n  @example\n  <ProfileHeaderAvatar\n    user-name=\"John Doe\"\n    user-email=\"john@example.com\"\n    image-public-id=\"users/john-doe-avatar\"\n    @logout=\"handleLogout\"\n  />\n-->\n<template>\n  <div class=\"sl-relative sl-flex sl-items-center sl-gap-3\">\n    <!-- User Avatar Button -->\n    <button \n      ref=\"avatarButton\"\n      type=\"button\"\n      @click=\"toggleMenu\"\n      class=\"sl-relative sl-inline-flex sl-items-center sl-justify-center sl-rounded-full sl-overflow-hidden sl-transition-all sl-flex-shrink-0 focus:sl-outline-none\"\n      :class=\"[\n        ringClasses,\n        { [activeRingClass]: isMenuOpen }\n      ]\"\n      :style=\"{ width: `${size}px`, height: `${size}px` }\"\n      :aria-expanded=\"isMenuOpen\"\n      aria-haspopup=\"true\"\n    >\n      <slot name=\"avatar\">\n        <!-- Cloudinary image if public_id available -->\n        <CloudinaryImage \n          v-if=\"imagePublicId\" \n          :public-id=\"imagePublicId\" \n          :alt=\"userName\" \n          :width=\"size\"\n          :height=\"size\" \n          :custom-classes=\"{ image: { 'sl-w-full sl-h-full sl-object-cover sl-object-center': true } }\" \n          skeleton=\"user\" \n        />\n        <!-- Direct image URL fallback -->\n        <img \n          v-else-if=\"imageUrl\" \n          :src=\"imageUrl\" \n          :alt=\"userName\"\n          class=\"sl-w-full sl-h-full sl-object-cover sl-object-center\"\n        />\n        <!-- Initials fallback -->\n        <div \n          v-else \n          class=\"sl-w-full sl-h-full sl-inline-flex sl-items-center sl-justify-center sl-bg-stachelock-200 dark:sl-bg-stachelock-700\"\n        >\n          <span \n            class=\"sl-font-semibold sl-text-stachelock-700 dark:sl-text-stachelock-200\"\n            :class=\"initialsTextSize\"\n          >\n            {{ computedInitials }}\n          </span>\n        </div>\n      </slot>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <Transition\n      enter-active-class=\"sl-transition sl-ease-out sl-duration-100\"\n      enter-from-class=\"sl-transform sl-opacity-0 sl-scale-95\"\n      enter-to-class=\"sl-transform sl-opacity-100 sl-scale-100\"\n      leave-active-class=\"sl-transition sl-ease-in sl-duration-75\"\n      leave-from-class=\"sl-transform sl-opacity-100 sl-scale-100\"\n      leave-to-class=\"sl-transform sl-opacity-0 sl-scale-95\"\n    >\n      <div \n        v-if=\"isMenuOpen\"\n        ref=\"menuRef\"\n        class=\"sl-absolute sl-bg-white dark:sl-bg-slate-800 sl-rounded-lg sl-shadow-lg sl-border sl-border-gray-200 dark:sl-border-slate-700 sl-z-50 sl-min-w-max sl-overflow-hidden\"\n        :style=\"menuStyles\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n      >\n        <!-- Header with user info -->\n        <div class=\"sl-p-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700\">\n          <slot name=\"menu-header\">\n            <p class=\"sl-text-sm sl-font-medium sl-text-gray-900 dark:sl-text-white\">{{ userName }}</p>\n            <p class=\"sl-text-xs sl-text-gray-500 dark:sl-text-slate-400\">{{ userEmail }}</p>\n          </slot>\n        </div>\n        \n        <!-- Custom menu items slot -->\n        <div v-if=\"$slots['menu-items']\" class=\"sl-py-1\">\n          <slot name=\"menu-items\" />\n        </div>\n        \n        <!-- Logout button -->\n        <button \n          v-if=\"showLogout\"\n          type=\"button\"\n          @click=\"handleLogout\"\n          class=\"sl-w-full sl-text-left sl-px-4 sl-py-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400 hover:sl-bg-red-50 dark:hover:sl-bg-red-900/20 sl-transition-colors\"\n          role=\"menuitem\"\n        >\n          {{ logoutLabel }}\n        </button>\n      </div>\n    </Transition>\n\n    <!-- Backdrop for closing menu -->\n    <div \n      v-if=\"isMenuOpen\" \n      class=\"sl-fixed sl-inset-0 sl-z-40\" \n      @click=\"closeMenu\" \n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * ProfileHeaderAvatar - User avatar with dropdown menu\n * \n * @module components/layouts/ProfileHeaderAvatar\n */\nimport { ref, computed, onMounted, onBeforeUnmount, type CSSProperties } from 'vue';\nimport CloudinaryImage from '../CloudinaryImage.vue';\n\ninterface Props {\n  /** Display name of the user */\n  userName: string;\n  /** Email address of the user */\n  userEmail?: string;\n  /** Cloudinary public_id for profile image */\n  imagePublicId?: string;\n  /** Direct URL for profile image (fallback if no publicId) */\n  imageUrl?: string;\n  /** Show logout button in dropdown */\n  showLogout?: boolean;\n  /** Label for logout button */\n  logoutLabel?: string;\n  /** Avatar size in pixels */\n  size?: number;\n  /** Custom ring color class for hover/active state */\n  ringColorClass?: string;\n  /** Menu position from top */\n  menuTop?: string;\n  /** Menu position from right */\n  menuRight?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  userEmail: '',\n  showLogout: true,\n  logoutLabel: 'Log Out',\n  size: 40,\n  ringColorClass: 'sl-ring-stachelock-400',\n  menuTop: '3rem',\n  menuRight: '0',\n});\n\nconst emit = defineEmits<{\n  /** Emitted when logout button is clicked */\n  logout: [];\n  /** Emitted when menu is opened/closed */\n  'menu-toggle': [isOpen: boolean];\n}>();\n\nconst isMenuOpen = ref(false);\nconst avatarButton = ref<HTMLButtonElement | null>(null);\nconst menuRef = ref<HTMLDivElement | null>(null);\n\n// Computed initials from user name\nconst computedInitials = computed(() => {\n  if (!props.userName) return 'U';\n  return props.userName\n    .split(' ')\n    .map((n: string) => n[0])\n    .join('')\n    .toUpperCase()\n    .slice(0, 2);\n});\n\n// Ring classes for hover and active states\nconst ringClasses = computed(() => {\n  return `hover:sl-ring-2 hover:${props.ringColorClass}`;\n});\n\nconst activeRingClass = computed(() => {\n  return `sl-ring-2 ${props.ringColorClass}`;\n});\n\n// Text size based on avatar size\nconst initialsTextSize = computed(() => {\n  if (props.size < 32) return 'sl-text-xs';\n  if (props.size < 48) return 'sl-text-sm';\n  return 'sl-text-base';\n});\n\n// Menu positioning styles\nconst menuStyles = computed((): CSSProperties => ({\n  top: props.menuTop,\n  right: props.menuRight,\n}));\n\n// Toggle menu open/close\nconst toggleMenu = () => {\n  isMenuOpen.value = !isMenuOpen.value;\n  emit('menu-toggle', isMenuOpen.value);\n};\n\n// Close menu\nconst closeMenu = () => {\n  if (isMenuOpen.value) {\n    isMenuOpen.value = false;\n    emit('menu-toggle', false);\n  }\n};\n\n// Handle logout click\nconst handleLogout = () => {\n  closeMenu();\n  emit('logout');\n};\n\n// Handle escape key to close menu\nconst handleEscapeKey = (event: KeyboardEvent) => {\n  if (event.key === 'Escape') {\n    closeMenu();\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('keydown', handleEscapeKey);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', handleEscapeKey);\n});\n\n// Expose methods for parent components\ndefineExpose({\n  toggleMenu,\n  closeMenu,\n  isMenuOpen,\n});\n</script>\n"],"names":["props","__props","emit","__emit","isMenuOpen","ref","avatarButton","menuRef","computedInitials","computed","n","ringClasses","activeRingClass","initialsTextSize","menuStyles","toggleMenu","closeMenu","handleLogout","handleEscapeKey","event","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeStyle","size","_renderSlot","_ctx","imagePublicId","_createBlock","CloudinaryImage","userName","imageUrl","_hoisted_4","_normalizeClass","_createVNode","_Transition","_hoisted_5","_hoisted_6","_toDisplayString","_hoisted_7","userEmail","$slots","_hoisted_8","showLogout","logoutLabel"],"mappings":"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"}
+{"version":3,"file":"ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-DkABeWJt.js","sources":["../src/components/layouts/ProfileHeaderAvatar.vue"],"sourcesContent":["<!--\n  @component ProfileHeaderAvatar\n  @description User avatar with dropdown menu for profile actions.\n  \n  A flexible user avatar component that displays a profile image (via Cloudinary)\n  or initials fallback, with an expandable dropdown menu showing user info and actions.\n  \n  @props\n  - userName (string): Display name of the user\n  - userEmail (string): Email address of the user\n  - imagePublicId (string, optional): Cloudinary public_id for profile image\n  - imageUrl (string, optional): Direct URL for profile image (fallback if no publicId)\n  - showLogout (boolean): Show logout button in dropdown (default: true)\n  - logoutLabel (string): Label for logout button (default: 'Log Out')\n  - size (number): Avatar size in pixels (default: 40)\n  - ringColor (string): Tailwind ring color class for hover/active state\n  - menuPosition (object): Position overrides for dropdown menu\n  \n  @emits\n  - logout: Emitted when logout button is clicked\n  - menu-toggle: Emitted when menu is opened/closed with boolean state\n  \n  @slots\n  - menu-header: Custom header content in dropdown (replaces default name/email)\n  - menu-items: Additional menu items between user info and logout\n  - avatar: Custom avatar content (replaces default image/initials)\n  \n  @example\n  <ProfileHeaderAvatar\n    user-name=\"John Doe\"\n    user-email=\"john@example.com\"\n    image-public-id=\"users/john-doe-avatar\"\n    @logout=\"handleLogout\"\n  />\n-->\n<template>\n  <div class=\"sl-relative sl-flex sl-items-center sl-gap-3\">\n    <!-- User Avatar Button -->\n    <button \n      ref=\"avatarButton\"\n      type=\"button\"\n      @click=\"toggleMenu\"\n      class=\"sl-relative sl-inline-flex sl-items-center sl-justify-center sl-rounded-full sl-overflow-hidden sl-transition-all sl-flex-shrink-0 focus:sl-outline-none\"\n      :class=\"[\n        ringClasses,\n        { [activeRingClass]: isMenuOpen }\n      ]\"\n      :style=\"{ width: `${size}px`, height: `${size}px` }\"\n      :aria-expanded=\"isMenuOpen\"\n      aria-haspopup=\"true\"\n    >\n      <slot name=\"avatar\">\n        <!-- Cloudinary image if public_id available -->\n        <CloudinaryImage \n          v-if=\"imagePublicId\" \n          :public-id=\"imagePublicId\" \n          :alt=\"userName\" \n          :width=\"size\"\n          :height=\"size\" \n          :custom-classes=\"{ image: { 'sl-w-full sl-h-full sl-object-cover sl-object-center': true } }\" \n          skeleton=\"user\" \n        />\n        <!-- Direct image URL fallback -->\n        <img \n          v-else-if=\"imageUrl\" \n          :src=\"imageUrl\" \n          :alt=\"userName\"\n          class=\"sl-w-full sl-h-full sl-object-cover sl-object-center\"\n        />\n        <!-- Initials fallback -->\n        <div \n          v-else \n          class=\"sl-w-full sl-h-full sl-inline-flex sl-items-center sl-justify-center sl-bg-stachelock-200 dark:sl-bg-stachelock-700\"\n        >\n          <span \n            class=\"sl-font-semibold sl-text-stachelock-700 dark:sl-text-stachelock-200\"\n            :class=\"initialsTextSize\"\n          >\n            {{ computedInitials }}\n          </span>\n        </div>\n      </slot>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <Transition\n      enter-active-class=\"sl-transition sl-ease-out sl-duration-100\"\n      enter-from-class=\"sl-transform sl-opacity-0 sl-scale-95\"\n      enter-to-class=\"sl-transform sl-opacity-100 sl-scale-100\"\n      leave-active-class=\"sl-transition sl-ease-in sl-duration-75\"\n      leave-from-class=\"sl-transform sl-opacity-100 sl-scale-100\"\n      leave-to-class=\"sl-transform sl-opacity-0 sl-scale-95\"\n    >\n      <div \n        v-if=\"isMenuOpen\"\n        ref=\"menuRef\"\n        class=\"sl-absolute sl-bg-white dark:sl-bg-slate-800 sl-rounded-lg sl-shadow-lg sl-border sl-border-gray-200 dark:sl-border-slate-700 sl-z-50 sl-min-w-max sl-overflow-hidden\"\n        :style=\"menuStyles\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n      >\n        <!-- Header with user info -->\n        <div class=\"sl-p-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700\">\n          <slot name=\"menu-header\">\n            <p class=\"sl-text-sm sl-font-medium sl-text-gray-900 dark:sl-text-white\">{{ userName }}</p>\n            <p class=\"sl-text-xs sl-text-gray-500 dark:sl-text-slate-400\">{{ userEmail }}</p>\n          </slot>\n        </div>\n        \n        <!-- Custom menu items slot -->\n        <div v-if=\"$slots['menu-items']\" class=\"sl-py-1\">\n          <slot name=\"menu-items\" />\n        </div>\n        \n        <!-- Logout button -->\n        <button \n          v-if=\"showLogout\"\n          type=\"button\"\n          @click=\"handleLogout\"\n          class=\"sl-w-full sl-text-left sl-px-4 sl-py-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400 hover:sl-bg-red-50 dark:hover:sl-bg-red-900/20 sl-transition-colors\"\n          role=\"menuitem\"\n        >\n          {{ logoutLabel }}\n        </button>\n      </div>\n    </Transition>\n\n    <!-- Backdrop for closing menu -->\n    <div \n      v-if=\"isMenuOpen\" \n      class=\"sl-fixed sl-inset-0 sl-z-40\" \n      @click=\"closeMenu\" \n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * ProfileHeaderAvatar - User avatar with dropdown menu\n * \n * @module components/layouts/ProfileHeaderAvatar\n */\nimport { ref, computed, onMounted, onBeforeUnmount, type CSSProperties } from 'vue';\nimport CloudinaryImage from '../CloudinaryImage.vue';\n\ninterface Props {\n  /** Display name of the user */\n  userName: string;\n  /** Email address of the user */\n  userEmail?: string;\n  /** Cloudinary public_id for profile image */\n  imagePublicId?: string;\n  /** Direct URL for profile image (fallback if no publicId) */\n  imageUrl?: string;\n  /** Show logout button in dropdown */\n  showLogout?: boolean;\n  /** Label for logout button */\n  logoutLabel?: string;\n  /** Avatar size in pixels */\n  size?: number;\n  /** Custom ring color class for hover/active state */\n  ringColorClass?: string;\n  /** Menu position from top */\n  menuTop?: string;\n  /** Menu position from right */\n  menuRight?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  userEmail: '',\n  showLogout: true,\n  logoutLabel: 'Log Out',\n  size: 40,\n  ringColorClass: 'sl-ring-stachelock-400',\n  menuTop: '3rem',\n  menuRight: '0',\n});\n\nconst emit = defineEmits<{\n  /** Emitted when logout button is clicked */\n  logout: [];\n  /** Emitted when menu is opened/closed */\n  'menu-toggle': [isOpen: boolean];\n}>();\n\nconst isMenuOpen = ref(false);\nconst avatarButton = ref<HTMLButtonElement | null>(null);\nconst menuRef = ref<HTMLDivElement | null>(null);\n\n// Computed initials from user name\nconst computedInitials = computed(() => {\n  if (!props.userName) return 'U';\n  return props.userName\n    .split(' ')\n    .map((n: string) => n[0])\n    .join('')\n    .toUpperCase()\n    .slice(0, 2);\n});\n\n// Ring classes for hover and active states\nconst ringClasses = computed(() => {\n  return `hover:sl-ring-2 hover:${props.ringColorClass}`;\n});\n\nconst activeRingClass = computed(() => {\n  return `sl-ring-2 ${props.ringColorClass}`;\n});\n\n// Text size based on avatar size\nconst initialsTextSize = computed(() => {\n  if (props.size < 32) return 'sl-text-xs';\n  if (props.size < 48) return 'sl-text-sm';\n  return 'sl-text-base';\n});\n\n// Menu positioning styles\nconst menuStyles = computed((): CSSProperties => ({\n  top: props.menuTop,\n  right: props.menuRight,\n}));\n\n// Toggle menu open/close\nconst toggleMenu = () => {\n  isMenuOpen.value = !isMenuOpen.value;\n  emit('menu-toggle', isMenuOpen.value);\n};\n\n// Close menu\nconst closeMenu = () => {\n  if (isMenuOpen.value) {\n    isMenuOpen.value = false;\n    emit('menu-toggle', false);\n  }\n};\n\n// Handle logout click\nconst handleLogout = () => {\n  closeMenu();\n  emit('logout');\n};\n\n// Handle escape key to close menu\nconst handleEscapeKey = (event: KeyboardEvent) => {\n  if (event.key === 'Escape') {\n    closeMenu();\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('keydown', handleEscapeKey);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', handleEscapeKey);\n});\n\n// Expose methods for parent components\ndefineExpose({\n  toggleMenu,\n  closeMenu,\n  isMenuOpen,\n});\n</script>\n"],"names":["props","__props","emit","__emit","isMenuOpen","ref","avatarButton","menuRef","computedInitials","computed","n","ringClasses","activeRingClass","initialsTextSize","menuStyles","toggleMenu","closeMenu","handleLogout","handleEscapeKey","event","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeStyle","_renderSlot","_ctx","_createBlock","CloudinaryImage","_hoisted_4","_normalizeClass","_createVNode","_Transition","_hoisted_5","_hoisted_6","_toDisplayString","_hoisted_7","$slots","_hoisted_8"],"mappings":"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"}

package/dist/{ProjectLogo.vue_vue_type_script_setup_true_lang-CtroDq7L.js → ProjectLogo.vue_vue_type_script_setup_true_lang-DYjp-RNh.js}

@@ -1,5 +1,5 @@
-import { defineComponent as k, computed as n, createElementBlock as s, openBlock as t, normalizeStyle as a, createBlock as f, renderSlot as m, normalizeClass as d, createCommentVNode as g, createElementVNode as o, toDisplayString as p } from "vue";
-import y from "./components/CloudinaryImage.js";
+import { defineComponent as k, computed as r, createElementBlock as s, openBlock as t, normalizeStyle as o, createBlock as f, renderSlot as m, normalizeClass as d, createCommentVNode as g, createElementVNode as a, toDisplayString as y } from "vue";
+import x from "./components/CloudinaryImage.js";
 const b = ["src", "alt"], w = ["width", "height"], C = /* @__PURE__ */ k({
   __name: "ProjectLogo",
   props: {
@@ -12,19 +12,19 @@ const b = ["src", "alt"], w = ["width", "height"], C = /* @__PURE__ */ k({
     fallbackText: { default: "" },
     rounded: { type: Boolean, default: !1 }
   },
-  setup(c) {
-    const l = c, u = n(() => ({
+  setup(e) {
+    const l = e, u = r(() => ({
       width: `${l.width}px`,
       height: `${l.height}px`
-    })), i = n(() => ({
+    })), c = r(() => ({
       width: `${l.width}px`,
       height: `${l.height}px`
-    })), h = n(() => l.fallbackText ? l.fallbackText.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2) : "?");
-    return (e, r) => (t(), s("div", {
+    })), h = r(() => l.fallbackText ? l.fallbackText.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?");
+    return (n, i) => (t(), s("div", {
       class: "sl-flex sl-items-center sl-justify-center",
-      style: a(u.value)
+      style: o(u.value)
     }, [
-      e.publicId ? (t(), f(y, {
+      e.publicId ? (t(), f(x, {
         key: 0,
         "public-id": e.publicId,
         alt: e.alt,
@@ -40,20 +40,20 @@ const b = ["src", "alt"], w = ["width", "height"], C = /* @__PURE__ */ k({
         key: 1,
         src: e.logoUrl,
         alt: e.alt,
-        style: a(i.value),
+        style: o(c.value),
         class: d([
           "sl-object-contain",
           { "sl-rounded-full": e.rounded }
         ])
-      }, null, 14, b)) : m(e.$slots, "fallback", { key: 2 }, () => [
+      }, null, 14, b)) : m(n.$slots, "fallback", { key: 2 }, () => [
         e.fallbackType === "rings" ? (t(), s("svg", {
           key: 0,
           width: e.width,
           height: e.height,
           viewBox: "0 0 100 100",
           class: "sl-text-stachelock-500 dark:sl-text-stachelock-400"
-        }, r[0] || (r[0] = [
-          o("circle", {
+        }, [...i[0] || (i[0] = [
+          a("circle", {
             cx: "50",
             cy: "50",
             r: "45",
@@ -61,7 +61,7 @@ const b = ["src", "alt"], w = ["width", "height"], C = /* @__PURE__ */ k({
             stroke: "currentColor",
             "stroke-width": "4"
           }, null, -1),
-          o("circle", {
+          a("circle", {
             cx: "50",
             cy: "50",
             r: "30",
@@ -69,35 +69,35 @@ const b = ["src", "alt"], w = ["width", "height"], C = /* @__PURE__ */ k({
             stroke: "currentColor",
             "stroke-width": "4"
           }, null, -1),
-          o("circle", {
+          a("circle", {
             cx: "50",
             cy: "50",
             r: "15",
             fill: "currentColor"
           }, null, -1)
-        ]), 8, w)) : e.fallbackType === "initials" ? (t(), s("div", {
+        ])], 8, w)) : e.fallbackType === "initials" ? (t(), s("div", {
           key: 1,
           class: d(["sl-flex sl-items-center sl-justify-center sl-bg-stachelock-100 dark:sl-bg-stachelock-800 sl-text-stachelock-700 dark:sl-text-stachelock-200 sl-font-bold", { "sl-rounded-full": e.rounded }]),
-          style: a(i.value)
-        }, p(h.value), 7)) : e.fallbackType === "icon" ? (t(), s("div", {
+          style: o(c.value)
+        }, y(h.value), 7)) : e.fallbackType === "icon" ? (t(), s("div", {
           key: 2,
           class: d(["sl-flex sl-items-center sl-justify-center sl-bg-gray-100 dark:sl-bg-gray-700", { "sl-rounded-full": e.rounded }]),
-          style: a(i.value)
-        }, r[1] || (r[1] = [
-          o("svg", {
+          style: o(c.value)
+        }, [...i[1] || (i[1] = [
+          a("svg", {
             class: "sl-w-1/2 sl-h-1/2 sl-text-gray-400 dark:sl-text-gray-500",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24"
           }, [
-            o("path", {
+            a("path", {
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               "stroke-width": "1.5",
               d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
             })
           ], -1)
-        ]), 6)) : g("", !0)
+        ])], 6)) : g("", !0)
       ])
     ], 4));
   }
@@ -105,4 +105,4 @@ const b = ["src", "alt"], w = ["width", "height"], C = /* @__PURE__ */ k({
 export {
   C as _
 };
-//# sourceMappingURL=ProjectLogo.vue_vue_type_script_setup_true_lang-CtroDq7L.js.map
+//# sourceMappingURL=ProjectLogo.vue_vue_type_script_setup_true_lang-DYjp-RNh.js.map

package/dist/{ProjectLogo.vue_vue_type_script_setup_true_lang-CtroDq7L.js.map → ProjectLogo.vue_vue_type_script_setup_true_lang-DYjp-RNh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ProjectLogo.vue_vue_type_script_setup_true_lang-CtroDq7L.js","sources":["../src/components/layouts/ProjectLogo.vue"],"sourcesContent":["<!--\n  @component ProjectLogo\n  @description Display a project or organization logo with fallback.\n  \n  A flexible logo display component that shows either a provided logo image\n  or a customizable fallback placeholder when no logo is available.\n  \n  @props\n  - logoUrl (string, optional): URL of the logo image to display\n  - publicId (string, optional): Cloudinary public_id for the logo\n  - alt (string): Alt text for the logo image\n  - width (number): Width of the logo in pixels\n  - height (number): Height of the logo in pixels\n  - fallbackType ('rings' | 'initials' | 'icon'): Type of fallback to show\n  - fallbackText (string): Text for initials fallback\n  - rounded (boolean): Apply rounded-full class\n  \n  @slots\n  - fallback: Custom fallback content when no logo is available\n  \n  @example\n  <ProjectLogo\n    logo-url=\"https://example.com/logo.png\"\n    alt=\"Company Logo\"\n    :width=\"64\"\n    :height=\"64\"\n  />\n-->\n<template>\n  <div \n    class=\"sl-flex sl-items-center sl-justify-center\"\n    :style=\"containerStyles\"\n  >\n    <!-- Cloudinary image if public_id provided -->\n    <CloudinaryImage \n      v-if=\"publicId\" \n      :public-id=\"publicId\" \n      :alt=\"alt\" \n      :width=\"width\"\n      :height=\"height\" \n      :custom-classes=\"{ \n        image: { \n          'sl-object-contain': true,\n          'sl-rounded-full': rounded \n        } \n      }\" \n    />\n    \n    <!-- Direct URL image -->\n    <img \n      v-else-if=\"logoUrl\" \n      :src=\"logoUrl\" \n      :alt=\"alt\" \n      :style=\"imageStyles\"\n      :class=\"[\n        'sl-object-contain',\n        { 'sl-rounded-full': rounded }\n      ]\"\n    />\n    \n    <!-- Fallback -->\n    <slot v-else name=\"fallback\">\n      <!-- Rings fallback (default) -->\n      <svg \n        v-if=\"fallbackType === 'rings'\"\n        :width=\"width\" \n        :height=\"height\" \n        viewBox=\"0 0 100 100\" \n        class=\"sl-text-stachelock-500 dark:sl-text-stachelock-400\"\n      >\n        <circle \n          cx=\"50\" \n          cy=\"50\" \n          r=\"45\" \n          fill=\"none\" \n          stroke=\"currentColor\" \n          stroke-width=\"4\"\n        />\n        <circle \n          cx=\"50\" \n          cy=\"50\" \n          r=\"30\" \n          fill=\"none\" \n          stroke=\"currentColor\" \n          stroke-width=\"4\"\n        />\n        <circle \n          cx=\"50\" \n          cy=\"50\" \n          r=\"15\" \n          fill=\"currentColor\"\n        />\n      </svg>\n      \n      <!-- Initials fallback -->\n      <div \n        v-else-if=\"fallbackType === 'initials'\"\n        class=\"sl-flex sl-items-center sl-justify-center sl-bg-stachelock-100 dark:sl-bg-stachelock-800 sl-text-stachelock-700 dark:sl-text-stachelock-200 sl-font-bold\"\n        :class=\"{ 'sl-rounded-full': rounded }\"\n        :style=\"imageStyles\"\n      >\n        {{ computedInitials }}\n      </div>\n      \n      <!-- Icon fallback -->\n      <div \n        v-else-if=\"fallbackType === 'icon'\"\n        class=\"sl-flex sl-items-center sl-justify-center sl-bg-gray-100 dark:sl-bg-gray-700\"\n        :class=\"{ 'sl-rounded-full': rounded }\"\n        :style=\"imageStyles\"\n      >\n        <svg \n          class=\"sl-w-1/2 sl-h-1/2 sl-text-gray-400 dark:sl-text-gray-500\" \n          fill=\"none\" \n          stroke=\"currentColor\" \n          viewBox=\"0 0 24 24\"\n        >\n          <path \n            stroke-linecap=\"round\" \n            stroke-linejoin=\"round\" \n            stroke-width=\"1.5\" \n            d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n          />\n        </svg>\n      </div>\n    </slot>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * ProjectLogo - Display project or organization logo\n * \n * @module components/layouts/ProjectLogo\n */\nimport { computed, type CSSProperties } from 'vue';\nimport CloudinaryImage from '../CloudinaryImage.vue';\n\ntype FallbackType = 'rings' | 'initials' | 'icon';\n\ninterface Props {\n  /** URL of the logo image */\n  logoUrl?: string;\n  /** Cloudinary public_id for the logo */\n  publicId?: string;\n  /** Alt text for the logo */\n  alt?: string;\n  /** Width of the logo in pixels */\n  width?: number;\n  /** Height of the logo in pixels */\n  height?: number;\n  /** Type of fallback to display */\n  fallbackType?: FallbackType;\n  /** Text for initials fallback (e.g., organization name) */\n  fallbackText?: string;\n  /** Apply rounded-full styling */\n  rounded?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  alt: 'Project Logo',\n  width: 64,\n  height: 64,\n  fallbackType: 'rings',\n  fallbackText: '',\n  rounded: false,\n});\n\n// Container styles\nconst containerStyles = computed((): CSSProperties => ({\n  width: `${props.width}px`,\n  height: `${props.height}px`,\n}));\n\n// Image styles\nconst imageStyles = computed((): CSSProperties => ({\n  width: `${props.width}px`,\n  height: `${props.height}px`,\n}));\n\n// Computed initials from fallback text\nconst computedInitials = computed(() => {\n  if (!props.fallbackText) return '?';\n  return props.fallbackText\n    .split(' ')\n    .map((word: string) => word[0])\n    .join('')\n    .toUpperCase()\n    .slice(0, 2);\n});\n</script>\n"],"names":["props","__props","containerStyles","computed","imageStyles","computedInitials","word","_createElementBlock","publicId","_createBlock","CloudinaryImage","alt","width","height","rounded","logoUrl","_normalizeClass","_renderSlot","_ctx","fallbackType","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;AA+JA,UAAMA,IAAQC,GAURC,IAAkBC,EAAS,OAAsB;AAAA,MACrD,OAAO,GAAGH,EAAM,KAAK;AAAA,MACrB,QAAQ,GAAGA,EAAM,MAAM;AAAA,IAAA,EACvB,GAGII,IAAcD,EAAS,OAAsB;AAAA,MACjD,OAAO,GAAGH,EAAM,KAAK;AAAA,MACrB,QAAQ,GAAGA,EAAM,MAAM;AAAA,IAAA,EACvB,GAGIK,IAAmBF,EAAS,MAC3BH,EAAM,eACJA,EAAM,aACV,MAAM,GAAG,EACT,IAAI,CAACM,MAAiBA,EAAK,CAAC,CAAC,EAC7B,KAAK,EAAE,EACP,cACA,MAAM,GAAG,CAAC,IANmB,GAOjC;2BAhKCC,EAiGM,OAAA;AAAA,MAhGJ,OAAM;AAAA,MACL,SAAOL,EAAA,KAAe;AAAA,IAAA;MAIfM,EAAAA,iBADRC,EAYEC,GAAA;AAAA;QAVC,aAAWF,EAAAA;AAAAA,QACX,KAAKG,EAAAA;AAAAA,QACL,OAAOC,EAAAA;AAAAA,QACP,QAAQC,EAAAA;AAAAA,QACR,kBAAc;AAAA;;+BAAyFC,EAAAA;AAAAA,UAAAA;AAAAA;gFAU7FC,EAAAA,gBADbR,EASE,OAAA;AAAA;QAPC,KAAKQ,EAAAA;AAAAA,QACL,KAAKJ,EAAAA;AAAAA,QACL,SAAOP,EAAA,KAAW;AAAA,QAClB,OAAKY,EAAA;AAAA;+BAA8DF,EAAAA,QAAAA;AAAAA,QAAO;yBAO7EG,EAgEOC,kCAhEP,MAgEO;AAAA,QA7DGC,EAAAA,iBAAY,gBADpBZ,EA6BM,OAAA;AAAA;UA3BH,OAAOK,EAAAA;AAAAA,UACP,QAAQC,EAAAA;AAAAA,UACT,SAAQ;AAAA,UACR,OAAM;AAAA,QAAA;UAENO,EAOE,UAAA;AAAA,YANA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,gBAAa;AAAA,UAAA;UAEfA,EAOE,UAAA;AAAA,YANA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,gBAAa;AAAA,UAAA;UAEfA,EAKE,UAAA;AAAA,YAJA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;qBAMID,EAAAA,iBAAY,mBADzBZ,EAOM,OAAA;AAAA;UALJ,OAAKS,EAAA,CAAC,4JAA0J,EAAA,mBACnIF,EAAAA,QAAAA,CAAO,CAAA;AAAA,UACnC,SAAOV,EAAA,KAAW;AAAA,QAAA,KAEhBC,EAAA,KAAgB,GAAA,CAAA,KAKRc,EAAAA,iBAAY,eADzBZ,EAmBM,OAAA;AAAA;UAjBJ,OAAKS,EAAA,CAAC,gFAA8E,EAAA,mBACvDF,EAAAA,QAAAA,CAAO,CAAA;AAAA,UACnC,SAAOV,EAAA,KAAW;AAAA,QAAA;UAEnBgB,EAYM,OAAA;AAAA,YAXJ,OAAM;AAAA,YACN,MAAK;AAAA,YACL,QAAO;AAAA,YACP,SAAQ;AAAA,UAAA;YAERA,EAKE,QAAA;AAAA,cAJA,kBAAe;AAAA,cACf,mBAAgB;AAAA,cAChB,gBAAa;AAAA,cACb,GAAE;AAAA,YAAA;;;;;;;"}
+{"version":3,"file":"ProjectLogo.vue_vue_type_script_setup_true_lang-DYjp-RNh.js","sources":["../src/components/layouts/ProjectLogo.vue"],"sourcesContent":["<!--\n  @component ProjectLogo\n  @description Display a project or organization logo with fallback.\n  \n  A flexible logo display component that shows either a provided logo image\n  or a customizable fallback placeholder when no logo is available.\n  \n  @props\n  - logoUrl (string, optional): URL of the logo image to display\n  - publicId (string, optional): Cloudinary public_id for the logo\n  - alt (string): Alt text for the logo image\n  - width (number): Width of the logo in pixels\n  - height (number): Height of the logo in pixels\n  - fallbackType ('rings' | 'initials' | 'icon'): Type of fallback to show\n  - fallbackText (string): Text for initials fallback\n  - rounded (boolean): Apply rounded-full class\n  \n  @slots\n  - fallback: Custom fallback content when no logo is available\n  \n  @example\n  <ProjectLogo\n    logo-url=\"https://example.com/logo.png\"\n    alt=\"Company Logo\"\n    :width=\"64\"\n    :height=\"64\"\n  />\n-->\n<template>\n  <div \n    class=\"sl-flex sl-items-center sl-justify-center\"\n    :style=\"containerStyles\"\n  >\n    <!-- Cloudinary image if public_id provided -->\n    <CloudinaryImage \n      v-if=\"publicId\" \n      :public-id=\"publicId\" \n      :alt=\"alt\" \n      :width=\"width\"\n      :height=\"height\" \n      :custom-classes=\"{ \n        image: { \n          'sl-object-contain': true,\n          'sl-rounded-full': rounded \n        } \n      }\" \n    />\n    \n    <!-- Direct URL image -->\n    <img \n      v-else-if=\"logoUrl\" \n      :src=\"logoUrl\" \n      :alt=\"alt\" \n      :style=\"imageStyles\"\n      :class=\"[\n        'sl-object-contain',\n        { 'sl-rounded-full': rounded }\n      ]\"\n    />\n    \n    <!-- Fallback -->\n    <slot v-else name=\"fallback\">\n      <!-- Rings fallback (default) -->\n      <svg \n        v-if=\"fallbackType === 'rings'\"\n        :width=\"width\" \n        :height=\"height\" \n        viewBox=\"0 0 100 100\" \n        class=\"sl-text-stachelock-500 dark:sl-text-stachelock-400\"\n      >\n        <circle \n          cx=\"50\" \n          cy=\"50\" \n          r=\"45\" \n          fill=\"none\" \n          stroke=\"currentColor\" \n          stroke-width=\"4\"\n        />\n        <circle \n          cx=\"50\" \n          cy=\"50\" \n          r=\"30\" \n          fill=\"none\" \n          stroke=\"currentColor\" \n          stroke-width=\"4\"\n        />\n        <circle \n          cx=\"50\" \n          cy=\"50\" \n          r=\"15\" \n          fill=\"currentColor\"\n        />\n      </svg>\n      \n      <!-- Initials fallback -->\n      <div \n        v-else-if=\"fallbackType === 'initials'\"\n        class=\"sl-flex sl-items-center sl-justify-center sl-bg-stachelock-100 dark:sl-bg-stachelock-800 sl-text-stachelock-700 dark:sl-text-stachelock-200 sl-font-bold\"\n        :class=\"{ 'sl-rounded-full': rounded }\"\n        :style=\"imageStyles\"\n      >\n        {{ computedInitials }}\n      </div>\n      \n      <!-- Icon fallback -->\n      <div \n        v-else-if=\"fallbackType === 'icon'\"\n        class=\"sl-flex sl-items-center sl-justify-center sl-bg-gray-100 dark:sl-bg-gray-700\"\n        :class=\"{ 'sl-rounded-full': rounded }\"\n        :style=\"imageStyles\"\n      >\n        <svg \n          class=\"sl-w-1/2 sl-h-1/2 sl-text-gray-400 dark:sl-text-gray-500\" \n          fill=\"none\" \n          stroke=\"currentColor\" \n          viewBox=\"0 0 24 24\"\n        >\n          <path \n            stroke-linecap=\"round\" \n            stroke-linejoin=\"round\" \n            stroke-width=\"1.5\" \n            d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n          />\n        </svg>\n      </div>\n    </slot>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * ProjectLogo - Display project or organization logo\n * \n * @module components/layouts/ProjectLogo\n */\nimport { computed, type CSSProperties } from 'vue';\nimport CloudinaryImage from '../CloudinaryImage.vue';\n\ntype FallbackType = 'rings' | 'initials' | 'icon';\n\ninterface Props {\n  /** URL of the logo image */\n  logoUrl?: string;\n  /** Cloudinary public_id for the logo */\n  publicId?: string;\n  /** Alt text for the logo */\n  alt?: string;\n  /** Width of the logo in pixels */\n  width?: number;\n  /** Height of the logo in pixels */\n  height?: number;\n  /** Type of fallback to display */\n  fallbackType?: FallbackType;\n  /** Text for initials fallback (e.g., organization name) */\n  fallbackText?: string;\n  /** Apply rounded-full styling */\n  rounded?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  alt: 'Project Logo',\n  width: 64,\n  height: 64,\n  fallbackType: 'rings',\n  fallbackText: '',\n  rounded: false,\n});\n\n// Container styles\nconst containerStyles = computed((): CSSProperties => ({\n  width: `${props.width}px`,\n  height: `${props.height}px`,\n}));\n\n// Image styles\nconst imageStyles = computed((): CSSProperties => ({\n  width: `${props.width}px`,\n  height: `${props.height}px`,\n}));\n\n// Computed initials from fallback text\nconst computedInitials = computed(() => {\n  if (!props.fallbackText) return '?';\n  return props.fallbackText\n    .split(' ')\n    .map((word: string) => word[0])\n    .join('')\n    .toUpperCase()\n    .slice(0, 2);\n});\n</script>\n"],"names":["props","__props","containerStyles","computed","imageStyles","computedInitials","word","_createElementBlock","_createBlock","CloudinaryImage","_normalizeClass","_renderSlot","_ctx","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;AA+JA,UAAMA,IAAQC,GAURC,IAAkBC,EAAS,OAAsB;AAAA,MACrD,OAAO,GAAGH,EAAM,KAAK;AAAA,MACrB,QAAQ,GAAGA,EAAM,MAAM;AAAA,IAAA,EACvB,GAGII,IAAcD,EAAS,OAAsB;AAAA,MACjD,OAAO,GAAGH,EAAM,KAAK;AAAA,MACrB,QAAQ,GAAGA,EAAM,MAAM;AAAA,IAAA,EACvB,GAGIK,IAAmBF,EAAS,MAC3BH,EAAM,eACJA,EAAM,aACV,MAAM,GAAG,EACT,IAAI,CAACM,MAAiBA,EAAK,CAAC,CAAC,EAC7B,KAAK,EAAE,EACP,cACA,MAAM,GAAG,CAAC,IANmB,GAOjC;2BAhKCC,EAiGM,OAAA;AAAA,MAhGJ,OAAM;AAAA,MACL,SAAOL,EAAA,KAAe;AAAA,IAAA;MAIfD,EAAA,iBADRO,EAYEC,GAAA;AAAA;QAVC,aAAWR,EAAA;AAAA,QACX,KAAKA,EAAA;AAAA,QACL,OAAOA,EAAA;AAAA,QACP,QAAQA,EAAA;AAAA,QACR,kBAAc;AAAA;;+BAAyFA,EAAA;AAAA,UAAA;AAAA;gFAU7FA,EAAA,gBADbM,EASE,OAAA;AAAA;QAPC,KAAKN,EAAA;AAAA,QACL,KAAKA,EAAA;AAAA,QACL,SAAOG,EAAA,KAAW;AAAA,QAClB,OAAKM,EAAA;AAAA;+BAA8DT,EAAA,QAAA;AAAA,QAAO;yBAO7EU,EAgEOC,kCAhEP,MAgEO;AAAA,QA7DGX,EAAA,iBAAY,gBADpBM,EA6BM,OAAA;AAAA;UA3BH,OAAON,EAAA;AAAA,UACP,QAAQA,EAAA;AAAA,UACT,SAAQ;AAAA,UACR,OAAM;AAAA,QAAA;UAENY,EAOE,UAAA;AAAA,YANA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,gBAAa;AAAA,UAAA;UAEfA,EAOE,UAAA;AAAA,YANA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,gBAAa;AAAA,UAAA;UAEfA,EAKE,UAAA;AAAA,YAJA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;sBAMIZ,EAAA,iBAAY,mBADzBM,EAOM,OAAA;AAAA;UALJ,OAAKG,EAAA,CAAC,4JAA0J,EAAA,mBACnIT,EAAA,QAAA,CAAO,CAAA;AAAA,UACnC,SAAOG,EAAA,KAAW;AAAA,QAAA,KAEhBC,EAAA,KAAgB,GAAA,CAAA,KAKRJ,EAAA,iBAAY,eADzBM,EAmBM,OAAA;AAAA;UAjBJ,OAAKG,EAAA,CAAC,gFAA8E,EAAA,mBACvDT,EAAA,QAAA,CAAO,CAAA;AAAA,UACnC,SAAOG,EAAA,KAAW;AAAA,QAAA;UAEnBS,EAYM,OAAA;AAAA,YAXJ,OAAM;AAAA,YACN,MAAK;AAAA,YACL,QAAO;AAAA,YACP,SAAQ;AAAA,UAAA;YAERA,EAKE,QAAA;AAAA,cAJA,kBAAe;AAAA,cACf,mBAAgB;AAAA,cAChB,gBAAa;AAAA,cACb,GAAE;AAAA,YAAA;;;;;;;"}

package/dist/{SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js → SelectInput.vue_vue_type_script_setup_true_lang-DHiZ-7K2.js}

@@ -1,20 +1,20 @@
-import { defineComponent as O, watch as _, onBeforeUnmount as G, ref as B, computed as m, createElementBlock as d, openBlock as n, createVNode as i, unref as r, withCtx as u, createElementVNode as c, createBlock as g, normalizeClass as f, createCommentVNode as v, resolveDynamicComponent as z, toDisplayString as h, Teleport as X, Transition as J, normalizeStyle as Q, withModifiers as H, Fragment as Y, renderList as Z } from "vue";
+import { defineComponent as H, watch as C, onBeforeUnmount as X, ref as S, computed as p, createElementBlock as u, openBlock as i, createVNode as d, unref as o, withCtx as c, createElementVNode as m, createBlock as y, normalizeClass as v, createCommentVNode as h, resolveDynamicComponent as N, toDisplayString as b, Teleport as _, Transition as J, normalizeStyle as Q, withModifiers as P, Fragment as Y, renderList as Z } from "vue";
 import { useField as ee } from "vee-validate";
 import le from "./forms/FormFieldWrapper.js";
 import { g as se } from "./id-DafBB_QF.js";
-import { I as te, j as ae, A as re, F as oe } from "./listbox-p2_4hUSD.js";
+import { I as te, j as ae, A as re, F as oe } from "./listbox-YaWWZiiG.js";
 import { r as ne } from "./ChevronUpDownIcon-Bq_fsgrb.js";
 import { r as ie } from "./CheckIcon-BGlsmVwT.js";
-const de = { class: "sl-w-full" }, ue = { class: "sl-relative" }, ce = { class: "sl-flex sl-items-center sl-gap-2" }, pe = {
+const de = { class: "sl-w-full" }, ue = { class: "sl-relative" }, ce = { class: "sl-flex sl-items-center sl-gap-2" }, me = {
   key: 1,
   class: "sl-block sl-truncate sl-text-left"
-}, me = {
+}, fe = {
   key: 2,
   class: "sl-block sl-truncate sl-text-left sl-text-gray-500 dark:sl-text-slate-300"
-}, fe = { class: "sl-pointer-events-none sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2" }, ve = { class: "sl-block sl-truncate sl-font-medium" }, he = { class: "sl-flex sl-items-center sl-gap-2" }, be = {
+}, pe = { class: "sl-pointer-events-none sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2" }, ve = { class: "sl-block sl-truncate sl-font-medium" }, he = { class: "sl-flex sl-items-center sl-gap-2" }, be = {
   key: 0,
   class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-4"
-}, ge = { key: 0 }, C = 224, y = 4, Ce = /* @__PURE__ */ O({
+}, ge = { key: 0 }, V = 224, x = 4, Se = /* @__PURE__ */ H({
   __name: "SelectInput",
   props: {
     name: {},
@@ -31,12 +31,12 @@ const de = { class: "sl-w-full" }, ue = { class: "sl-relative" }, ce = { class:
     showAll: { type: Boolean, default: !1 },
     itemKey: { default: "id" },
     itemText: { default: "name" },
-    modelValue: {},
+    modelValue: { type: [String, Number, Boolean, null, Object, Array] },
     boxShadow: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(N, { emit: P }) {
-    const R = O({
+  setup(a, { emit: R }) {
+    const j = H({
       props: {
         open: { type: Boolean, required: !0 },
         updateFn: { type: Function, required: !0 }
@@ -45,60 +45,60 @@ const de = { class: "sl-w-full" }, ue = { class: "sl-relative" }, ce = { class:
         const l = () => {
           e.open && e.updateFn();
         };
-        return _(() => e.open, (a) => {
-          a ? (e.updateFn(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l)) : (window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l));
-        }, { immediate: !0 }), G(() => {
+        return C(() => e.open, (r) => {
+          r ? (e.updateFn(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l)) : (window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l));
+        }, { immediate: !0 }), X(() => {
           window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l);
         }), () => null;
       }
-    }), V = B(null), w = B({
+    }), M = S(null), w = S({
       top: "0px",
       left: "0px",
       width: "200px"
     });
-    function M() {
-      const e = V.value?.$el;
+    function F() {
+      const e = M.value?.$el;
       if (!e) return;
-      const l = e.getBoundingClientRect(), a = window.innerHeight, o = a - l.bottom - y, p = l.top - y;
-      o < C && p > o ? w.value = {
-        bottom: `${a - l.top + y}px`,
+      const l = e.getBoundingClientRect(), r = window.innerHeight, n = r - l.bottom - x, f = l.top - x;
+      n < V && f > n ? w.value = {
+        bottom: `${r - l.top + x}px`,
         left: `${l.left}px`,
         width: `${l.width}px`,
-        maxHeight: `${Math.min(p, C)}px`
+        maxHeight: `${Math.min(f, V)}px`
       } : w.value = {
-        top: `${l.bottom + y}px`,
+        top: `${l.bottom + x}px`,
         left: `${l.left}px`,
         width: `${l.width}px`,
-        maxHeight: `${Math.min(o, C)}px`
+        maxHeight: `${Math.min(n, V)}px`
       };
     }
-    const t = N, K = P, S = se(t.name), { value: F, errorMessage: $, handleChange: E, meta: b, setTouched: j } = ee(
+    const t = a, K = R, $ = se(t.name), { value: E, errorMessage: I, handleChange: L, meta: g, setTouched: U } = ee(
       () => t.name,
       t.rules,
       {
         validateOnMount: t.validateOnMount,
         initialValue: t.modelValue
       }
-    ), s = B(
+    ), s = S(
       t.multiple ? Array.isArray(t.modelValue) ? t.modelValue : [] : t.modelValue
     );
-    _(
+    C(
       () => t.modelValue,
       (e) => {
         if (t.multiple) {
           const l = Array.isArray(e) ? e : [];
-          l !== s.value && (s.value = l, F.value = l);
+          l !== s.value && (s.value = l, E.value = l);
         } else
-          e !== s.value && (s.value = e, F.value = e);
+          e !== s.value && (s.value = e, E.value = e);
       },
       { immediate: !0 }
-    ), _(
+    ), C(
       s,
       (e) => {
         K("update:modelValue", e);
       }
     );
-    const U = m(() => {
+    const W = p(() => {
       const e = [
         "sl-relative",
         "sl-w-full",
@@ -129,12 +129,12 @@ const de = { class: "sl-w-full" }, ue = { class: "sl-relative" }, ce = { class:
         "sl-cursor-not-allowed",
         "sl-border-gray-200",
         "dark:sl-border-slate-700"
-      ) : $.value ? e.push(
+      ) : I.value ? e.push(
         "sl-border-red-300",
         "dark:sl-border-red-500",
         "focus:sl-ring-red-500",
         "focus:sl-border-red-500"
-      ) : b.valid && b.touched ? e.push(
+      ) : g.valid && g.touched ? e.push(
         "sl-border-green-300",
         "dark:sl-border-green-500",
         "focus:sl-ring-green-500",
@@ -145,71 +145,71 @@ const de = { class: "sl-w-full" }, ue = { class: "sl-relative" }, ce = { class:
         "hover:sl-border-gray-400",
         "dark:hover:sl-border-slate-500"
       ), e.join(" ");
-    }), k = (e) => e[t.itemKey], x = (e) => e[t.itemText] || e.toString(), I = m(() => s.value ? t.multiple && Array.isArray(s.value) ? s.value.length === 0 ? "" : s.value.length === 1 ? x(s.value[0]) : `${s.value.length} items selected` : x(s.value) : ""), L = m(() => s.value ? t.multiple && Array.isArray(s.value) ? s.value.length === 1 ? s.value[0].icon : null : s.value.icon : null), D = m(() => t.items.filter((e) => !e.disabled)), W = (e) => {
-      s.value = e, j(!0), E(e);
-    }, T = m(() => {
+    }), k = (e) => e[t.itemKey], A = (e) => e[t.itemText] || e.toString(), D = p(() => s.value ? t.multiple && Array.isArray(s.value) ? s.value.length === 0 ? "" : s.value.length === 1 ? A(s.value[0]) : `${s.value.length} items selected` : A(s.value) : ""), O = p(() => s.value ? t.multiple && Array.isArray(s.value) ? s.value.length === 1 ? s.value[0].icon : null : s.value.icon : null), T = p(() => t.items.filter((e) => !e.disabled)), q = (e) => {
+      s.value = e, U(!0), L(e);
+    }, z = p(() => {
       if (!t.multiple || !Array.isArray(s.value)) return !1;
-      const e = D.value;
+      const e = T.value;
       if (e.length === 0) return !1;
-      const l = new Set(s.value.map((a) => k(a)));
-      return e.every((a) => l.has(k(a)));
-    }), q = () => {
-      t.multiple && (T.value ? s.value = [] : s.value = [...D.value], E(s.value));
+      const l = new Set(s.value.map((r) => k(r)));
+      return e.every((r) => l.has(k(r)));
+    }), G = () => {
+      t.multiple && (z.value ? s.value = [] : s.value = [...T.value], L(s.value));
     };
-    return (e, l) => (n(), d("div", de, [
-      i(le, {
-        id: r(S),
-        name: e.name,
-        label: e.label,
-        disabled: e.disabled,
-        optional: !e.rules,
-        "tertiary-label": e.tertiaryLabel,
-        "box-shadow": e.boxShadow,
-        "error-message": r($),
-        "success-message": e.successMessage,
-        "is-valid": r(b).valid,
-        "is-touched": r(b).touched
+    return (e, l) => (i(), u("div", de, [
+      d(le, {
+        id: o($),
+        name: a.name,
+        label: a.label,
+        disabled: a.disabled,
+        optional: !a.rules,
+        "tertiary-label": a.tertiaryLabel,
+        "box-shadow": a.boxShadow,
+        "error-message": o(I),
+        "success-message": a.successMessage,
+        "is-valid": o(g).valid,
+        "is-touched": o(g).touched
       }, {
-        "success-message": u(() => [
-          e.successMessage ? (n(), d("span", ge, h(e.successMessage), 1)) : v("", !0)
+        "success-message": c(() => [
+          a.successMessage ? (i(), u("span", ge, b(a.successMessage), 1)) : h("", !0)
         ]),
-        default: u(() => [
-          i(r(te), {
+        default: c(() => [
+          d(o(te), {
             modelValue: s.value,
             "onUpdate:modelValue": [
-              l[1] || (l[1] = (a) => s.value = a),
-              W
+              l[1] || (l[1] = (r) => s.value = r),
+              q
             ],
-            disabled: e.disabled,
-            multiple: e.multiple
+            disabled: a.disabled,
+            multiple: a.multiple
           }, {
-            default: u(({ open: a }) => [
-              c("div", ue, [
-                i(r(R), {
-                  open: a,
-                  "update-fn": M
+            default: c(({ open: r }) => [
+              m("div", ue, [
+                d(o(j), {
+                  open: r,
+                  "update-fn": F
                 }, null, 8, ["open"]),
-                i(r(ae), {
+                d(o(ae), {
                   ref_key: "listboxButtonRef",
-                  ref: V,
-                  id: r(S),
-                  class: f([
-                    U.value,
-                    e.buttonClass
+                  ref: M,
+                  id: o($),
+                  class: v([
+                    W.value,
+                    a.buttonClass
                   ]),
-                  onClick: M
+                  onClick: F
                 }, {
-                  default: u(() => [
-                    c("span", ce, [
-                      L.value ? (n(), g(z(L.value), {
+                  default: c(() => [
+                    m("span", ce, [
+                      O.value ? (i(), y(N(O.value), {
                         key: 0,
                         class: "sl-h-4 sl-w-4 sl-flex-shrink-0",
                         "aria-hidden": "true"
-                      })) : v("", !0),
-                      I.value ? (n(), d("span", pe, h(I.value), 1)) : (n(), d("span", me, h(e.placeholder || "Select an option"), 1))
+                      })) : h("", !0),
+                      D.value ? (i(), u("span", me, b(D.value), 1)) : (i(), u("span", fe, b(a.placeholder || "Select an option"), 1))
                     ]),
-                    c("span", fe, [
-                      i(r(ne), {
+                    m("span", pe, [
+                      d(o(ne), {
                         class: "sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-300",
                         "aria-hidden": "true"
                       })
@@ -217,65 +217,65 @@ const de = { class: "sl-w-full" }, ue = { class: "sl-relative" }, ce = { class:
                   ]),
                   _: 1
                 }, 8, ["id", "class"]),
-                (n(), g(X, { to: "body" }, [
-                  i(J, {
+                (i(), y(_, { to: "body" }, [
+                  d(J, {
                     "leave-active-class": "sl-transition sl-duration-100 sl-ease-in",
                     "leave-from-class": "sl-opacity-100",
                     "leave-to-class": "sl-opacity-0"
                   }, {
-                    default: u(() => [
-                      i(r(re), {
+                    default: c(() => [
+                      d(o(re), {
                         class: "sl-fixed sl-z-[9999] sl-overflow-auto sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-py-1 sl-text-base sl-shadow-lg dark:sl-shadow-slate-900/50 sl-ring-1 sl-ring-black sl-ring-opacity-5 dark:sl-ring-slate-700 focus:sl-outline-none sm:sl-text-sm",
                         style: Q(w.value)
                       }, {
-                        default: u(() => [
-                          e.multiple && e.showAll ? (n(), d("li", {
+                        default: c(() => [
+                          a.multiple && a.showAll ? (i(), u("li", {
                             key: 0,
                             role: "button",
                             tabindex: "0",
-                            onMousedown: l[0] || (l[0] = H(() => {
+                            onMousedown: l[0] || (l[0] = P(() => {
                             }, ["prevent"])),
-                            onClick: H(q, ["prevent", "stop"]),
-                            class: f([
+                            onClick: P(G, ["prevent", "stop"]),
+                            class: v([
                               "sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9 sl-text-gray-900 dark:sl-text-slate-200",
                               "hover:sl-bg-stachelock-600 hover:sl-text-white"
                             ])
                           }, [
-                            c("span", ve, h(T.value ? "Unselect All" : "Select All"), 1)
-                          ], 32)) : v("", !0),
-                          (n(!0), d(Y, null, Z(e.items, (o) => (n(), g(r(oe), {
-                            key: k(o),
-                            value: o,
+                            m("span", ve, b(z.value ? "Unselect All" : "Select All"), 1)
+                          ], 32)) : h("", !0),
+                          (i(!0), u(Y, null, Z(a.items, (n) => (i(), y(o(oe), {
+                            key: k(n),
+                            value: n,
                             as: "template",
-                            disabled: o.disabled
+                            disabled: n.disabled
                           }, {
-                            default: u(({ active: p, selected: A }) => [
-                              c("li", {
-                                class: f([
+                            default: c(({ active: f, selected: B }) => [
+                              m("li", {
+                                class: v([
                                   "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-3 sl-pr-9",
-                                  p ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200",
-                                  o.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : ""
+                                  f ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200",
+                                  n.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : ""
                                 ])
                               }, [
-                                c("div", he, [
-                                  o.icon ? (n(), g(z(o.icon), {
+                                m("div", he, [
+                                  n.icon ? (i(), y(N(n.icon), {
                                     key: 0,
-                                    class: f(["sl-h-4 sl-w-4 sl-flex-shrink-0", p ? "sl-text-white" : "sl-text-gray-400 dark:sl-text-slate-300"]),
+                                    class: v(["sl-h-4 sl-w-4 sl-flex-shrink-0", f ? "sl-text-white" : "sl-text-gray-400 dark:sl-text-slate-300"]),
                                     "aria-hidden": "true"
-                                  }, null, 8, ["class"])) : v("", !0),
-                                  c("span", {
-                                    class: f([
+                                  }, null, 8, ["class"])) : h("", !0),
+                                  m("span", {
+                                    class: v([
                                       "sl-block sl-truncate",
-                                      A ? "sl-font-medium" : "sl-font-normal"
+                                      B ? "sl-font-medium" : "sl-font-normal"
                                     ])
-                                  }, h(x(o)), 3)
+                                  }, b(A(n)), 3)
                                 ]),
-                                A ? (n(), d("span", be, [
-                                  i(r(ie), {
+                                B ? (i(), u("span", be, [
+                                  d(o(ie), {
                                     class: "sl-h-5 sl-w-5",
                                     "aria-hidden": "true"
                                   })
-                                ])) : v("", !0)
+                                ])) : h("", !0)
                               ], 2)
                             ]),
                             _: 2
@@ -298,6 +298,6 @@ const de = { class: "sl-w-full" }, ue = { class: "sl-relative" }, ce = { class:
   }
 });
 export {
-  Ce as _
+  Se as _
 };
-//# sourceMappingURL=SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js.map
+//# sourceMappingURL=SelectInput.vue_vue_type_script_setup_true_lang-DHiZ-7K2.js.map