@stachelock/ui 0.3.0 → 0.4.0

package/dist/{NavigationItem.vue_vue_type_script_setup_true_lang-CEsuYl3S.js.map → NavigationItem.vue_vue_type_script_setup_true_lang-C8aX-84Q.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NavigationItem.vue_vue_type_script_setup_true_lang-CEsuYl3S.js","sources":["../src/components/layouts/NavigationItem.vue"],"sourcesContent":["<template>\n  <li>\n    <a :href=\"href\"       :class=\"[\n        'sl-group sl-flex sl-gap-x-3 sl-rounded-md sl-p-2 sl-text-sm sl-leading-6 sl-font-semibold',\n        isActive \n          ? 'sl-bg-stachelock-400'\n          : 'hover:sl-bg-white/10'\n      ]\"\n      :style=\"{\n        color: isActive \n          ? '#fef2f2' \n          : '#fca5a5',\n        backgroundColor: isActive \n          ? '#f87171' \n          : 'transparent'\n      }\">\n      <component \n        :is=\"icon\" \n        :class=\"[\n          'sl-h-6 sl-w-6 sl-shrink-0'\n        ]\"\n        :style=\"{\n          color: isActive \n            ? '#fef2f2' \n            : '#fca5a5'\n        }\" \n        aria-hidden=\"true\" \n      />\n      <span v-if=\"!iconOnly\" class=\"sl-truncate\">{{ name }}</span>\n      <span v-if=\"badge\" :class=\"[\n        'sl-ml-auto sl-inline-flex sl-items-center sl-rounded-md sl-px-2 sl-py-1 sl-text-xs sl-font-medium',\n        badgeTheme === 'primary' ? 'sl-bg-stachelock-400 sl-text-white' : '',\n        badgeTheme === 'secondary' ? 'sl-bg-gray-400 sl-text-white' : '',\n        badgeTheme === 'success' ? 'sl-bg-green-400 sl-text-white' : '',\n        badgeTheme === 'warning' ? 'sl-bg-yellow-400 sl-text-white' : '',\n        badgeTheme === 'danger' ? 'sl-bg-red-400 sl-text-white' : ''\n      ]\">\n        {{ badge }}\n      </span>\n    </a>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Component } from 'vue';\n\ndefineProps<{\n  name: string;\n  href: string;\n  icon: Component;\n  isActive?: boolean;\n  iconOnly?: boolean;\n  badge?: string;\n  badgeTheme?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';\n}>();\n</script>\n\n<style scoped>\n</style>\n"],"names":["_createElementBlock","_createElementVNode","href","_normalizeClass","isActive","_normalizeStyle","_openBlock","_createBlock","_resolveDynamicComponent","icon","iconOnly","_hoisted_2","_toDisplayString","name","badge","badgeTheme"],"mappings":";;;;;;;;;;;;;;;;2BACEA,EAuCK,MAAA,MAAA;AAAA,MAtCHC,EAqCI,KAAA;AAAA,QArCA,MAAMC,EAAAA;AAAAA,QAAa,OAAKC,EAAA;AAAA;UAAiHC,EAAAA;;QAM1I,OAAKC,EAAA;AAAA,iBAAmBD,EAAAA;2BAAiFA,EAAAA;;;SAQ1GE,KAAAC,EAWEC,EAVKC,EAAAA,IAAI,GAAA;AAAA,UACR,OAAKN,EAAE;AAAA;WAEP;AAAA,UACA,OAAKE,EAAA;AAAA,mBAAqBD,EAAAA;;UAK3B,eAAY;AAAA,QAAA;QAEDM,EAAAA,6BAAbV,EAA4D,QAA5DW,GAA4DC,EAAdC,EAAAA,IAAI,GAAA,CAAA;AAAA,QACtCC,EAAAA,cAAZd,EASO,QAAA;AAAA;UATa,OAAKG,EAAA;AAAA;YAAyHY,EAAAA,eAAU,YAAA,uCAAA;AAAA,YAAoEA,EAAAA,eAAU,cAAA,iCAAA;AAAA,YAAgEA,EAAAA,eAAU,YAAA,kCAAA;AAAA,YAA+DA,EAAAA,eAAU,YAAA,mCAAA;AAAA,YAAgEA,EAAAA,eAAU,WAAA,gCAAA;AAAA,UAAA;aAQlcD,EAAAA,KAAK,GAAA,CAAA;;;;;"}
+{"version":3,"file":"NavigationItem.vue_vue_type_script_setup_true_lang-C8aX-84Q.js","sources":["../src/components/layouts/NavigationItem.vue"],"sourcesContent":["<template>\n  <li>\n    <a :href=\"href\"       :class=\"[\n        'sl-group sl-flex sl-gap-x-3 sl-rounded-md sl-p-2 sl-text-sm sl-leading-6 sl-font-semibold',\n        isActive \n          ? 'sl-bg-stachelock-400'\n          : 'hover:sl-bg-white/10'\n      ]\"\n      :style=\"{\n        color: isActive \n          ? '#fef2f2' \n          : '#fca5a5',\n        backgroundColor: isActive \n          ? '#f87171' \n          : 'transparent'\n      }\">\n      <component \n        :is=\"icon\" \n        :class=\"[\n          'sl-h-6 sl-w-6 sl-shrink-0'\n        ]\"\n        :style=\"{\n          color: isActive \n            ? '#fef2f2' \n            : '#fca5a5'\n        }\" \n        aria-hidden=\"true\" \n      />\n      <span v-if=\"!iconOnly\" class=\"sl-truncate\">{{ name }}</span>\n      <span v-if=\"badge\" :class=\"[\n        'sl-ml-auto sl-inline-flex sl-items-center sl-rounded-md sl-px-2 sl-py-1 sl-text-xs sl-font-medium',\n        badgeTheme === 'primary' ? 'sl-bg-stachelock-400 sl-text-white' : '',\n        badgeTheme === 'secondary' ? 'sl-bg-gray-400 sl-text-white' : '',\n        badgeTheme === 'success' ? 'sl-bg-green-400 sl-text-white' : '',\n        badgeTheme === 'warning' ? 'sl-bg-yellow-400 sl-text-white' : '',\n        badgeTheme === 'danger' ? 'sl-bg-red-400 sl-text-white' : ''\n      ]\">\n        {{ badge }}\n      </span>\n    </a>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Component } from 'vue';\n\ndefineProps<{\n  name: string;\n  href: string;\n  icon: Component;\n  isActive?: boolean;\n  iconOnly?: boolean;\n  badge?: string;\n  badgeTheme?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';\n}>();\n</script>\n\n<style scoped>\n</style>\n"],"names":["_createElementBlock","_createElementVNode","__props","_normalizeClass","_normalizeStyle","_openBlock","_createBlock","_resolveDynamicComponent","_hoisted_2","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;2BACEA,EAuCK,MAAA,MAAA;AAAA,MAtCHC,EAqCI,KAAA;AAAA,QArCA,MAAMC,EAAA;AAAA,QAAa,OAAKC,EAAA;AAAA;UAAiHD,EAAA;;QAM1I,OAAKE,EAAA;AAAA,iBAAmBF,EAAA;2BAAiFA,EAAA;;;SAQ1GG,KAAAC,EAWEC,EAVKL,EAAA,IAAI,GAAA;AAAA,UACR,OAAKC,EAAE;AAAA;WAEP;AAAA,UACA,OAAKC,EAAA;AAAA,mBAAqBF,EAAA;;UAK3B,eAAY;AAAA,QAAA;QAEDA,EAAA,6BAAbF,EAA4D,QAA5DQ,GAA4DC,EAAdP,EAAA,IAAI,GAAA,CAAA;AAAA,QACtCA,EAAA,cAAZF,EASO,QAAA;AAAA;UATa,OAAKG,EAAA;AAAA;YAAyHD,EAAA,eAAU,YAAA,uCAAA;AAAA,YAAoEA,EAAA,eAAU,cAAA,iCAAA;AAAA,YAAgEA,EAAA,eAAU,YAAA,kCAAA;AAAA,YAA+DA,EAAA,eAAU,YAAA,mCAAA;AAAA,YAAgEA,EAAA,eAAU,WAAA,gCAAA;AAAA,UAAA;aAQlcA,EAAA,KAAK,GAAA,CAAA;;;;;"}

package/dist/NotificationToast.vue_vue_type_script_setup_true_lang-DZxcEZkP.js

@@ -0,0 +1,277 @@
+import { defineComponent as U, computed as e, createBlock as v, openBlock as r, unref as y, withCtx as k, createElementVNode as o, normalizeStyle as w, normalizeClass as n, createVNode as C, createElementBlock as c, createCommentVNode as d, resolveDynamicComponent as Z, toDisplayString as h, Fragment as _, renderList as tt, withModifiers as $ } from "vue";
+import { r as g, a as st } from "./InformationCircleIcon-B322GNIt.js";
+import { r as z } from "./ExclamationCircleIcon-DjxYk45_.js";
+import { r as et } from "./ExclamationTriangleIcon-BNKYmV_J.js";
+import { r as lt } from "./XMarkIcon-DNvCkiOy.js";
+import { S as it, h as at } from "./transition-_rPfnoET.js";
+const nt = { class: "sl-flex sl-items-start" }, rt = {
+  key: 1,
+  class: "sl-mt-3 sl-flex sl-gap-2"
+}, ot = ["onClick"], yt = /* @__PURE__ */ U({
+  __name: "NotificationToast",
+  props: {
+    notification: {}
+  },
+  emits: ["close", "action"],
+  setup(i, { emit: S }) {
+    const s = i, m = S, B = () => {
+      m("close", s.notification);
+    }, I = (t) => {
+      m("action", s.notification, t);
+    }, M = () => {
+      s.notification.isCardMode && s.notification.cardStackIndex !== 0 && m("action", s.notification, { label: "bringToFront", action: "callback" });
+    }, A = () => {
+    }, O = e(() => {
+      const t = {
+        primary: "sl-bg-primary-600 dark:sl-bg-primary-700 sl-text-white",
+        secondary: "sl-bg-gray-600 dark:sl-bg-gray-700 sl-text-white",
+        dark: "sl-bg-gray-800 dark:sl-bg-gray-900 sl-text-white",
+        light: "sl-bg-white dark:sl-bg-gray-800 sl-text-gray-800 dark:sl-text-gray-100 sl-border sl-border-gray-200 dark:sl-border-gray-700",
+        warning: "sl-bg-amber-500 dark:sl-bg-amber-600 sl-text-white",
+        danger: "sl-bg-red-500 dark:sl-bg-red-600 sl-text-white",
+        success: "sl-bg-emerald-500 dark:sl-bg-emerald-600 sl-text-white",
+        info: "sl-bg-blue-500 dark:sl-bg-blue-600 sl-text-white",
+        ghost: "sl-bg-white dark:sl-bg-gray-800 sl-text-gray-800 dark:sl-text-gray-100 sl-border sl-border-gray-200 dark:sl-border-gray-700"
+      };
+      return t[s.notification.theme] || t.primary;
+    }), T = e(() => {
+      const t = {
+        default: "sl-w-full sl-max-w-sm",
+        compact: "sl-w-full sl-max-w-xs",
+        expanded: "sl-w-full sl-max-w-md"
+      };
+      return t[s.notification.variant] || t.default;
+    }), N = e(() => s.notification.priority === "urgent" ? "sl-animate-pulse" : ""), F = e(() => {
+      const t = "sl-absolute sl-top-0 sl-left-0 sl-right-0 sl-h-1";
+      return s.notification.priority === "urgent" ? `${t} sl-bg-red-400 dark:sl-bg-red-500` : s.notification.priority === "high" ? `${t} sl-bg-amber-400 dark:sl-bg-amber-500` : "";
+    }), L = e(() => s.notification.isCardMode ? "sl-cursor-pointer hover:sl-scale-[1.02] sl-transition-transform" : ""), V = e(() => {
+      const t = {
+        maxWidth: `${s.notification.maxWidth || 384}px`,
+        position: "relative"
+      };
+      return s.notification.isCardMode && (t.transform = `translate(${s.notification.cardOffsetX || 0}px, ${s.notification.cardOffsetY || 0}px)`, t.zIndex = s.notification.zIndex || 1), t;
+    }), p = e(() => {
+      const t = s.notification.theme;
+      return ["light", "ghost"].includes(t) ? "sl-text-gray-800 dark:sl-text-gray-100" : "sl-text-white";
+    }), D = e(() => {
+      const t = s.notification.theme;
+      return ["light", "ghost"].includes(t) ? "sl-text-gray-500 dark:sl-text-gray-400" : "sl-text-white/90";
+    }), E = e(() => {
+      const t = {
+        primary: "focus:sl-ring-primary-400 dark:focus:sl-ring-primary-500",
+        secondary: "focus:sl-ring-gray-400 dark:focus:sl-ring-gray-500",
+        dark: "focus:sl-ring-gray-400 dark:focus:sl-ring-gray-500",
+        light: "focus:sl-ring-gray-300 dark:focus:sl-ring-gray-600",
+        warning: "focus:sl-ring-amber-300 dark:focus:sl-ring-amber-500",
+        danger: "focus:sl-ring-red-300 dark:focus:sl-ring-red-500",
+        success: "focus:sl-ring-emerald-300 dark:focus:sl-ring-emerald-500",
+        info: "focus:sl-ring-blue-300 dark:focus:sl-ring-blue-500",
+        ghost: "focus:sl-ring-gray-300 dark:focus:sl-ring-gray-600"
+      };
+      return t[s.notification.theme] || t.primary;
+    }), W = e(() => {
+      const t = s.notification.theme, l = "sl-ml-4 sl-inline-flex sl-rounded-md sl-opacity-70 hover:sl-opacity-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 sl-transition-opacity", a = ["light", "ghost"].includes(t) ? "sl-text-gray-400 dark:sl-text-gray-500 hover:sl-text-gray-500 dark:hover:sl-text-gray-400" : "sl-text-white/70 hover:sl-text-white";
+      return `${l} ${a}`;
+    }), x = e(() => {
+      if (s.notification.icon)
+        return s.notification.icon;
+      const t = s.notification.theme, l = {
+        primary: g,
+        secondary: g,
+        dark: z,
+        light: g,
+        warning: et,
+        danger: z,
+        success: st,
+        info: g,
+        ghost: g
+      };
+      return l[t] || l.primary;
+    }), R = e(() => {
+      const t = {
+        compact: "sl-h-5 sl-w-5",
+        default: "sl-h-6 sl-w-6",
+        expanded: "sl-h-7 sl-w-7"
+      };
+      return t[s.notification.variant] || t.default;
+    }), X = e(() => {
+      const t = {
+        compact: "sl-text-xs sl-font-medium",
+        default: "sl-text-sm sl-font-medium",
+        expanded: "sl-text-base sl-font-semibold"
+      };
+      return t[s.notification.variant] || t.default;
+    }), Y = e(() => {
+      const t = {
+        compact: "sl-mt-0.5 sl-text-xs",
+        default: "sl-mt-1 sl-text-sm",
+        expanded: "sl-mt-2 sl-text-sm"
+      };
+      return t[s.notification.variant] || t.default;
+    }), j = e(() => {
+      const t = {
+        compact: "sl-p-3",
+        default: "sl-p-4",
+        expanded: "sl-p-5"
+      };
+      return t[s.notification.variant] || t.default;
+    }), q = e(() => {
+      const t = {
+        compact: "sl-ml-2 sl-w-0 sl-flex-1",
+        default: "sl-ml-3 sl-w-0 sl-flex-1 sl-pt-0.5",
+        expanded: "sl-ml-4 sl-w-0 sl-flex-1 sl-pt-0.5"
+      };
+      return t[s.notification.variant] || t.default;
+    }), G = (t) => {
+      const l = "sl-rounded sl-px-2 sl-py-1 sl-text-xs sl-font-medium sl-transition-colors focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-1", a = s.notification.theme, f = ["light", "ghost"].includes(a), u = {
+        primary: {
+          light: "sl-bg-primary-100 sl-text-primary-700 hover:sl-bg-primary-200 dark:sl-bg-primary-800 dark:sl-text-primary-200 dark:hover:sl-bg-primary-700",
+          dark: "sl-bg-white/20 sl-text-white hover:sl-bg-white/30"
+        },
+        secondary: {
+          light: "sl-bg-gray-100 sl-text-gray-700 hover:sl-bg-gray-200 dark:sl-bg-gray-700 dark:sl-text-gray-200 dark:hover:sl-bg-gray-600",
+          dark: "sl-bg-white/20 sl-text-white hover:sl-bg-white/30"
+        },
+        danger: {
+          light: "sl-bg-red-100 sl-text-red-700 hover:sl-bg-red-200 dark:sl-bg-red-900 dark:sl-text-red-200 dark:hover:sl-bg-red-800",
+          dark: "sl-bg-white/20 sl-text-white hover:sl-bg-white/30"
+        }
+      }, Q = t.theme || "secondary", b = u[Q] || u.secondary;
+      return `${l} ${f ? b.light : b.dark}`;
+    }, H = e(() => {
+      const t = s.notification.position;
+      return {
+        tr: "sl-items-end",
+        tl: "sl-items-start",
+        bl: "sl-items-start",
+        br: "sl-items-end",
+        tc: "sl-items-center",
+        bc: "sl-items-center"
+      }[t] || "sl-items-end";
+    }), J = e(() => {
+      const t = s.notification.position;
+      return {
+        tr: "sl-items-start",
+        tl: "sl-items-start",
+        bl: "sl-items-end",
+        br: "sl-items-end",
+        tc: "sl-items-start",
+        bc: "sl-items-end"
+      }[t] || "sl-items-end";
+    }), K = e(() => {
+      const t = s.notification.position, l = {
+        tr: "sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:sl-translate-x-4",
+        tl: "sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:-sl-translate-x-4",
+        br: "sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:sl-translate-x-4",
+        bl: "sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:-sl-translate-x-4",
+        tc: "-sl-translate-y-4 sl-opacity-0",
+        bc: "sl-translate-y-4 sl-opacity-0"
+      };
+      return l[t] || l.br;
+    }), P = e(() => {
+      const t = s.notification.position, l = s.notification.yOffset || 0, a = {
+        zIndex: 9999 + (s.notification.zIndex || 0)
+      };
+      return ["tl", "tr", "tc"].includes(t) ? a.marginTop = `${l}px` : a.marginBottom = `${l}px`, a;
+    });
+    return (t, l) => (r(), v(y(it), {
+      appear: "",
+      show: i.notification.isOpen,
+      as: "template",
+      onAfterLeave: A
+    }, {
+      default: k(() => [
+        o("div", {
+          "aria-live": "assertive",
+          class: n([
+            "sl-pointer-events-none sl-fixed sl-inset-0 sl-flex sl-px-4 sl-py-6 sm:sl-p-6",
+            J.value
+          ]),
+          style: w(P.value)
+        }, [
+          o("div", {
+            class: n(["sl-flex sl-w-full sl-flex-col sl-items-center sl-space-y-4", H.value])
+          }, [
+            C(y(at), {
+              as: "template",
+              enter: "sl-duration-300 sl-ease-out sl-transform",
+              "enter-from": K.value,
+              "enter-to": "sl-translate-y-0 sl-opacity-100 sm:sl-translate-x-0",
+              leave: "sl-duration-200 sl-ease-in",
+              "leave-from": "sl-opacity-100",
+              "leave-to": "sl-opacity-0"
+            }, {
+              default: k(() => [
+                i.notification.isOpen ? (r(), c("div", {
+                  key: 0,
+                  class: n([
+                    O.value,
+                    T.value,
+                    N.value,
+                    L.value,
+                    "sl-pointer-events-auto sl-overflow-hidden sl-rounded-lg sl-shadow-lg sl-ring-1 sl-ring-black/5 dark:sl-ring-white/10 sl-transition-all sl-duration-200"
+                  ]),
+                  style: w(V.value),
+                  onClick: M
+                }, [
+                  o("div", {
+                    class: n(j.value)
+                  }, [
+                    o("div", nt, [
+                      x.value ? (r(), v(Z(x.value), {
+                        key: 0,
+                        class: n([R.value, D.value, "sl-flex-shrink-0"]),
+                        "aria-hidden": "true"
+                      }, null, 8, ["class"])) : d("", !0),
+                      o("div", {
+                        class: n(q.value)
+                      }, [
+                        o("p", {
+                          class: n([X.value, p.value])
+                        }, h(i.notification.title), 3),
+                        i.notification.message ? (r(), c("p", {
+                          key: 0,
+                          class: n([Y.value, p.value, "sl-opacity-90"])
+                        }, h(i.notification.message), 3)) : d("", !0),
+                        i.notification.actions && i.notification.actions.length > 0 ? (r(), c("div", rt, [
+                          (r(!0), c(_, null, tt(i.notification.actions, (a, f) => (r(), c("button", {
+                            key: f,
+                            type: "button",
+                            class: n(G(a)),
+                            onClick: $((u) => I(a), ["stop"])
+                          }, h(a.label), 11, ot))), 128))
+                        ])) : d("", !0)
+                      ], 2),
+                      i.notification.dismissible !== !1 ? (r(), c("button", {
+                        key: 1,
+                        type: "button",
+                        onClick: $(B, ["stop"]),
+                        class: n([W.value, E.value])
+                      }, [
+                        l[0] || (l[0] = o("span", { class: "sl-sr-only" }, "Close", -1)),
+                        C(y(lt), {
+                          class: "sl-h-5 sl-w-5",
+                          "aria-hidden": "true"
+                        })
+                      ], 2)) : d("", !0)
+                    ])
+                  ], 2),
+                  i.notification.priority === "urgent" || i.notification.priority === "high" ? (r(), c("div", {
+                    key: 0,
+                    class: n(F.value)
+                  }, null, 2)) : d("", !0)
+                ], 6)) : d("", !0)
+              ]),
+              _: 1
+            }, 8, ["enter-from"])
+          ], 2)
+        ], 6)
+      ]),
+      _: 1
+    }, 8, ["show"]));
+  }
+});
+export {
+  yt as _
+};
+//# sourceMappingURL=NotificationToast.vue_vue_type_script_setup_true_lang-DZxcEZkP.js.map

package/dist/NotificationToast.vue_vue_type_script_setup_true_lang-DZxcEZkP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationToast.vue_vue_type_script_setup_true_lang-DZxcEZkP.js","sources":["../src/components/notifications/NotificationToast.vue"],"sourcesContent":["<!--\n  @component NotificationToast\n  @description Individual notification toast with animations, theming, and dark mode support\n  \n  Displays a single notification with icon, title, message, actions, and close button.\n  Supports multiple themes, variants, positions, and card stacking with smooth transitions.\n  \n  ## Features\n  - Multiple themes with dark mode support\n  - Three variants: default, compact, expanded\n  - Action buttons with dismiss, link, and callback support\n  - Card stacking mode for multiple notifications\n  - Priority-based styling (low, normal, high, urgent)\n  - Smooth enter/leave transitions\n  \n  @props\n  - notification (NotificationState): The notification data object\n  \n  @emits\n  - close: Emitted when the close button is clicked\n  - action: Emitted when an action button is clicked\n  \n  @example\n  <NotificationToast \n    :notification=\"notification\" \n    @close=\"handleClose\"\n    @action=\"handleAction\"\n  />\n-->\n<template>\n  <TransitionRoot \n    appear \n    :show=\"notification.isOpen\" \n    as=\"template\" \n    @after-leave=\"onAfterLeave\"\n  >\n    <div \n      aria-live=\"assertive\" \n      :class=\"[\n        'sl-pointer-events-none sl-fixed sl-inset-0 sl-flex sl-px-4 sl-py-6 sm:sl-p-6',\n        verticalAlignClass\n      ]\"\n      :style=\"containerStyle\"\n    >\n      <div \n        class=\"sl-flex sl-w-full sl-flex-col sl-items-center sl-space-y-4\" \n        :class=\"horizontalAlignClass\"\n      >\n        <TransitionChild \n          as=\"template\" \n          enter=\"sl-duration-300 sl-ease-out sl-transform\"\n          :enter-from=\"enterFromClass\"\n          enter-to=\"sl-translate-y-0 sl-opacity-100 sm:sl-translate-x-0\" \n          leave=\"sl-duration-200 sl-ease-in\"\n          leave-from=\"sl-opacity-100\" \n          leave-to=\"sl-opacity-0\"\n        >\n          <div \n            v-if=\"notification.isOpen\" \n            :class=\"[\n              themeClass,\n              variantClass,\n              priorityClass,\n              cardModeClass,\n              'sl-pointer-events-auto sl-overflow-hidden sl-rounded-lg sl-shadow-lg sl-ring-1 sl-ring-black/5 dark:sl-ring-white/10 sl-transition-all sl-duration-200'\n            ]\"\n            :style=\"cardStyle\"\n            @click=\"handleCardClick\"\n          >\n            <div :class=\"paddingClass\">\n              <div class=\"sl-flex sl-items-start\">\n                <!-- Icon -->\n                <component \n                  v-if=\"iconComponent\"\n                  :is=\"iconComponent\" \n                  :class=\"[iconSizeClass, iconColorClass, 'sl-flex-shrink-0']\"\n                  aria-hidden=\"true\" \n                />\n                \n                <!-- Content -->\n                <div :class=\"contentMarginClass\">\n                  <!-- Title -->\n                  <p :class=\"[titleClass, textColorClass]\">\n                    {{ notification.title }}\n                  </p>\n                  \n                  <!-- Message -->\n                  <p \n                    v-if=\"notification.message\" \n                    :class=\"[messageClass, textColorClass, 'sl-opacity-90']\"\n                  >\n                    {{ notification.message }}\n                  </p>\n                  \n                  <!-- Actions -->\n                  <div \n                    v-if=\"notification.actions && notification.actions.length > 0\"\n                    class=\"sl-mt-3 sl-flex sl-gap-2\"\n                  >\n                    <button\n                      v-for=\"(action, idx) in notification.actions\"\n                      :key=\"idx\"\n                      type=\"button\"\n                      :class=\"getActionButtonClass(action)\"\n                      @click.stop=\"handleAction(action)\"\n                    >\n                      {{ action.label }}\n                    </button>\n                  </div>\n                </div>\n                \n                <!-- Close Button -->\n                <button \n                  v-if=\"notification.dismissible !== false\"\n                  type=\"button\" \n                  @click.stop=\"handleClose\"\n                  :class=\"[closeButtonClass, focusRingClass]\"\n                >\n                  <span class=\"sl-sr-only\">Close</span>\n                  <XMarkIcon class=\"sl-h-5 sl-w-5\" aria-hidden=\"true\" />\n                </button>\n              </div>\n            </div>\n            \n            <!-- Priority indicator for urgent/high -->\n            <div \n              v-if=\"notification.priority === 'urgent' || notification.priority === 'high'\"\n              :class=\"priorityIndicatorClass\"\n            />\n          </div>\n        </TransitionChild>\n      </div>\n    </div>\n  </TransitionRoot>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * NotificationToast - Individual notification display\n * \n * Renders a single notification with theming, icons, actions, and animations.\n * Used internally by NotificationContainer but can be used standalone.\n */\nimport { computed, type Component } from 'vue';\nimport { \n  CheckCircleIcon, \n  ExclamationTriangleIcon, \n  ExclamationCircleIcon, \n  InformationCircleIcon \n} from '@heroicons/vue/24/outline';\nimport { XMarkIcon } from '@heroicons/vue/20/solid';\nimport { TransitionRoot, TransitionChild } from '@headlessui/vue';\nimport type { NotificationState, NotificationAction } from '../../composables/useNotifications';\n\nconst props = defineProps<{ \n  notification: NotificationState \n}>();\n\nconst emit = defineEmits<{\n  close: [notification: NotificationState];\n  action: [notification: NotificationState, action: NotificationAction];\n}>();\n\nconst handleClose = () => {\n  emit('close', props.notification);\n};\n\nconst handleAction = (action: NotificationAction) => {\n  emit('action', props.notification, action);\n};\n\nconst handleCardClick = () => {\n  // Clicking on a card in card mode brings it to front\n  if (props.notification.isCardMode && props.notification.cardStackIndex !== 0) {\n    emit('action', props.notification, { label: 'bringToFront', action: 'callback' });\n  }\n};\n\nconst onAfterLeave = () => {\n  // Animation cleanup callback\n};\n\n// Theme classes with dark mode support\nconst themeClass = computed(() => {\n  const themes: Record<string, string> = {\n    primary: 'sl-bg-primary-600 dark:sl-bg-primary-700 sl-text-white',\n    secondary: 'sl-bg-gray-600 dark:sl-bg-gray-700 sl-text-white',\n    dark: 'sl-bg-gray-800 dark:sl-bg-gray-900 sl-text-white',\n    light: 'sl-bg-white dark:sl-bg-gray-800 sl-text-gray-800 dark:sl-text-gray-100 sl-border sl-border-gray-200 dark:sl-border-gray-700',\n    warning: 'sl-bg-amber-500 dark:sl-bg-amber-600 sl-text-white',\n    danger: 'sl-bg-red-500 dark:sl-bg-red-600 sl-text-white',\n    success: 'sl-bg-emerald-500 dark:sl-bg-emerald-600 sl-text-white',\n    info: 'sl-bg-blue-500 dark:sl-bg-blue-600 sl-text-white',\n    ghost: 'sl-bg-white dark:sl-bg-gray-800 sl-text-gray-800 dark:sl-text-gray-100 sl-border sl-border-gray-200 dark:sl-border-gray-700',\n  };\n  return themes[props.notification.theme] || themes.primary;\n});\n\n// Variant classes\nconst variantClass = computed(() => {\n  const variants: Record<string, string> = {\n    default: 'sl-w-full sl-max-w-sm',\n    compact: 'sl-w-full sl-max-w-xs',\n    expanded: 'sl-w-full sl-max-w-md',\n  };\n  return variants[props.notification.variant] || variants.default;\n});\n\n// Priority classes\nconst priorityClass = computed(() => {\n  if (props.notification.priority === 'urgent') {\n    return 'sl-animate-pulse';\n  }\n  return '';\n});\n\n// Priority indicator\nconst priorityIndicatorClass = computed(() => {\n  const base = 'sl-absolute sl-top-0 sl-left-0 sl-right-0 sl-h-1';\n  if (props.notification.priority === 'urgent') {\n    return `${base} sl-bg-red-400 dark:sl-bg-red-500`;\n  }\n  if (props.notification.priority === 'high') {\n    return `${base} sl-bg-amber-400 dark:sl-bg-amber-500`;\n  }\n  return '';\n});\n\n// Card mode classes\nconst cardModeClass = computed(() => {\n  if (props.notification.isCardMode) {\n    return 'sl-cursor-pointer hover:sl-scale-[1.02] sl-transition-transform';\n  }\n  return '';\n});\n\n// Card style for stacking\nconst cardStyle = computed(() => {\n  const styles: Record<string, string | number> = {\n    maxWidth: `${props.notification.maxWidth || 384}px`,\n    position: 'relative',\n  };\n  \n  if (props.notification.isCardMode) {\n    styles.transform = `translate(${props.notification.cardOffsetX || 0}px, ${props.notification.cardOffsetY || 0}px)`;\n    styles.zIndex = props.notification.zIndex || 1;\n  }\n  \n  return styles;\n});\n\n// Text color based on theme\nconst textColorClass = computed(() => {\n  const theme = props.notification.theme;\n  return ['light', 'ghost'].includes(theme) ? 'sl-text-gray-800 dark:sl-text-gray-100' : 'sl-text-white';\n});\n\n// Icon color\nconst iconColorClass = computed(() => {\n  const theme = props.notification.theme;\n  return ['light', 'ghost'].includes(theme) ? 'sl-text-gray-500 dark:sl-text-gray-400' : 'sl-text-white/90';\n});\n\n// Focus ring class\nconst focusRingClass = computed(() => {\n  const rings: Record<string, string> = {\n    primary: 'focus:sl-ring-primary-400 dark:focus:sl-ring-primary-500',\n    secondary: 'focus:sl-ring-gray-400 dark:focus:sl-ring-gray-500',\n    dark: 'focus:sl-ring-gray-400 dark:focus:sl-ring-gray-500',\n    light: 'focus:sl-ring-gray-300 dark:focus:sl-ring-gray-600',\n    warning: 'focus:sl-ring-amber-300 dark:focus:sl-ring-amber-500',\n    danger: 'focus:sl-ring-red-300 dark:focus:sl-ring-red-500',\n    success: 'focus:sl-ring-emerald-300 dark:focus:sl-ring-emerald-500',\n    info: 'focus:sl-ring-blue-300 dark:focus:sl-ring-blue-500',\n    ghost: 'focus:sl-ring-gray-300 dark:focus:sl-ring-gray-600',\n  };\n  return rings[props.notification.theme] || rings.primary;\n});\n\n// Close button class\nconst closeButtonClass = computed(() => {\n  const theme = props.notification.theme;\n  const baseClass = 'sl-ml-4 sl-inline-flex sl-rounded-md sl-opacity-70 hover:sl-opacity-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 sl-transition-opacity';\n  const colorClass = ['light', 'ghost'].includes(theme) \n    ? 'sl-text-gray-400 dark:sl-text-gray-500 hover:sl-text-gray-500 dark:hover:sl-text-gray-400' \n    : 'sl-text-white/70 hover:sl-text-white';\n  return `${baseClass} ${colorClass}`;\n});\n\n// Icon component based on theme or custom\nconst iconComponent = computed((): Component | undefined => {\n  // Allow custom icon override\n  if (props.notification.icon) {\n    return props.notification.icon;\n  }\n  \n  const theme = props.notification.theme;\n  const icons: Record<string, Component> = {\n    primary: InformationCircleIcon,\n    secondary: InformationCircleIcon,\n    dark: ExclamationCircleIcon,\n    light: InformationCircleIcon,\n    warning: ExclamationTriangleIcon,\n    danger: ExclamationCircleIcon,\n    success: CheckCircleIcon,\n    info: InformationCircleIcon,\n    ghost: InformationCircleIcon,\n  };\n  return icons[theme] || icons.primary;\n});\n\n// Variant-specific sizing\nconst iconSizeClass = computed(() => {\n  const sizes: Record<string, string> = {\n    compact: 'sl-h-5 sl-w-5',\n    default: 'sl-h-6 sl-w-6',\n    expanded: 'sl-h-7 sl-w-7',\n  };\n  return sizes[props.notification.variant] || sizes.default;\n});\n\nconst titleClass = computed(() => {\n  const sizes: Record<string, string> = {\n    compact: 'sl-text-xs sl-font-medium',\n    default: 'sl-text-sm sl-font-medium',\n    expanded: 'sl-text-base sl-font-semibold',\n  };\n  return sizes[props.notification.variant] || sizes.default;\n});\n\nconst messageClass = computed(() => {\n  const sizes: Record<string, string> = {\n    compact: 'sl-mt-0.5 sl-text-xs',\n    default: 'sl-mt-1 sl-text-sm',\n    expanded: 'sl-mt-2 sl-text-sm',\n  };\n  return sizes[props.notification.variant] || sizes.default;\n});\n\nconst paddingClass = computed(() => {\n  const sizes: Record<string, string> = {\n    compact: 'sl-p-3',\n    default: 'sl-p-4',\n    expanded: 'sl-p-5',\n  };\n  return sizes[props.notification.variant] || sizes.default;\n});\n\nconst contentMarginClass = computed(() => {\n  const sizes: Record<string, string> = {\n    compact: 'sl-ml-2 sl-w-0 sl-flex-1',\n    default: 'sl-ml-3 sl-w-0 sl-flex-1 sl-pt-0.5',\n    expanded: 'sl-ml-4 sl-w-0 sl-flex-1 sl-pt-0.5',\n  };\n  return sizes[props.notification.variant] || sizes.default;\n});\n\n// Action button styling\nconst getActionButtonClass = (action: NotificationAction): string => {\n  const base = 'sl-rounded sl-px-2 sl-py-1 sl-text-xs sl-font-medium sl-transition-colors focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-1';\n  const theme = props.notification.theme;\n  const isLightTheme = ['light', 'ghost'].includes(theme);\n  \n  const themes: Record<string, { light: string; dark: string }> = {\n    primary: {\n      light: 'sl-bg-primary-100 sl-text-primary-700 hover:sl-bg-primary-200 dark:sl-bg-primary-800 dark:sl-text-primary-200 dark:hover:sl-bg-primary-700',\n      dark: 'sl-bg-white/20 sl-text-white hover:sl-bg-white/30'\n    },\n    secondary: {\n      light: 'sl-bg-gray-100 sl-text-gray-700 hover:sl-bg-gray-200 dark:sl-bg-gray-700 dark:sl-text-gray-200 dark:hover:sl-bg-gray-600',\n      dark: 'sl-bg-white/20 sl-text-white hover:sl-bg-white/30'\n    },\n    danger: {\n      light: 'sl-bg-red-100 sl-text-red-700 hover:sl-bg-red-200 dark:sl-bg-red-900 dark:sl-text-red-200 dark:hover:sl-bg-red-800',\n      dark: 'sl-bg-white/20 sl-text-white hover:sl-bg-white/30'\n    }\n  };\n  \n  const actionTheme = action.theme || 'secondary';\n  const themeStyle = themes[actionTheme] || themes.secondary;\n  \n  return `${base} ${isLightTheme ? themeStyle.light : themeStyle.dark}`;\n};\n\n// Horizontal alignment based on position\nconst horizontalAlignClass = computed(() => {\n  const position = props.notification.position;\n  const alignments: Record<string, string> = {\n    tr: 'sl-items-end',\n    tl: 'sl-items-start',\n    bl: 'sl-items-start',\n    br: 'sl-items-end',\n    tc: 'sl-items-center',\n    bc: 'sl-items-center',\n  };\n  return alignments[position] || 'sl-items-end';\n});\n\n// Vertical alignment based on position\nconst verticalAlignClass = computed(() => {\n  const position = props.notification.position;\n  const alignments: Record<string, string> = {\n    tr: 'sl-items-start',\n    tl: 'sl-items-start',\n    bl: 'sl-items-end',\n    br: 'sl-items-end',\n    tc: 'sl-items-start',\n    bc: 'sl-items-end',\n  };\n  return alignments[position] || 'sl-items-end';\n});\n\n// Entry animation direction based on position\nconst enterFromClass = computed(() => {\n  const position = props.notification.position;\n  const classes: Record<string, string> = {\n    tr: 'sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:sl-translate-x-4',\n    tl: 'sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:-sl-translate-x-4',\n    br: 'sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:sl-translate-x-4',\n    bl: 'sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:-sl-translate-x-4',\n    tc: '-sl-translate-y-4 sl-opacity-0',\n    bc: 'sl-translate-y-4 sl-opacity-0',\n  };\n  return classes[position] || classes.br;\n});\n\n// Container style with offset\nconst containerStyle = computed(() => {\n  const position = props.notification.position;\n  const offset = props.notification.yOffset || 0;\n  \n  const styles: Record<string, string | number> = {\n    zIndex: 9999 + (props.notification.zIndex || 0),\n  };\n  \n  // Apply offset based on position (top or bottom)\n  if (['tl', 'tr', 'tc'].includes(position)) {\n    styles.marginTop = `${offset}px`;\n  } else {\n    styles.marginBottom = `${offset}px`;\n  }\n  \n  return styles;\n});\n</script>\n"],"names":["props","__props","emit","__emit","handleClose","handleAction","action","handleCardClick","onAfterLeave","themeClass","computed","themes","variantClass","variants","priorityClass","priorityIndicatorClass","base","cardModeClass","cardStyle","styles","textColorClass","theme","iconColorClass","focusRingClass","rings","closeButtonClass","baseClass","colorClass","iconComponent","icons","InformationCircleIcon","ExclamationCircleIcon","ExclamationTriangleIcon","CheckCircleIcon","iconSizeClass","sizes","titleClass","messageClass","paddingClass","contentMarginClass","getActionButtonClass","isLightTheme","actionTheme","themeStyle","horizontalAlignClass","position","verticalAlignClass","enterFromClass","classes","containerStyle","offset","_createBlock","_unref","TransitionRoot","_createElementVNode","_normalizeClass","_createVNode","TransitionChild","_createElementBlock","_hoisted_1","_openBlock","_resolveDynamicComponent","_toDisplayString","_hoisted_2","_Fragment","idx","_withModifiers","$event","_hoisted_3","_cache","XMarkIcon"],"mappings":"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"}

package/dist/{PieChart.vue_vue_type_script_setup_true_lang-DJRcsty7.js → PieChart.vue_vue_type_script_setup_true_lang-e3wsA9O4.js}

@@ -1,6 +1,6 @@
-import { defineComponent as n, computed as s, createBlock as d, openBlock as h, mergeProps as p } from "vue";
-import c from "./charts/BaseChart.js";
-import { chartColors as f } from "./charts/chartTheme.js";
+import { defineComponent as n, computed as s, createBlock as d, openBlock as h, mergeProps as c } from "vue";
+import f from "./charts/BaseChart.js";
+import { chartColors as u } from "./charts/chartTheme.js";
 const w = /* @__PURE__ */ n({
   __name: "PieChart",
   props: {
@@ -8,14 +8,14 @@ const w = /* @__PURE__ */ n({
     title: {},
     donut: { type: Boolean, default: !1 },
     height: { default: 300 },
-    colors: { default: () => f.primary },
+    colors: { default: () => u.primary },
     loading: { type: Boolean, default: !1 },
     showLabels: { type: Boolean, default: !1 },
     showLegend: { type: Boolean, default: !0 }
   },
   emits: ["click"],
-  setup(o, { emit: a }) {
-    const e = o, l = a, r = s(() => ({
+  setup(t, { emit: a }) {
+    const e = t, l = a, i = s(() => ({
       title: e.title ? { text: e.title } : void 0,
       legend: e.showLegend ? {
         show: !0,
@@ -53,17 +53,17 @@ const w = /* @__PURE__ */ n({
         },
         data: e.data
       }]
-    })), i = (t) => {
-      l("click", t);
+    })), r = (o) => {
+      l("click", o);
     };
-    return (t, u) => (h(), d(c, p({
-      option: r.value,
+    return (o, p) => (h(), d(f, c({
+      option: i.value,
       height: t.height,
       loading: t.loading
-    }, t.$attrs, { onClick: i }), null, 16, ["option", "height", "loading"]));
+    }, o.$attrs, { onClick: r }), null, 16, ["option", "height", "loading"]));
   }
 });
 export {
   w as _
 };
-//# sourceMappingURL=PieChart.vue_vue_type_script_setup_true_lang-DJRcsty7.js.map
+//# sourceMappingURL=PieChart.vue_vue_type_script_setup_true_lang-e3wsA9O4.js.map

package/dist/{PieChart.vue_vue_type_script_setup_true_lang-DJRcsty7.js.map → PieChart.vue_vue_type_script_setup_true_lang-e3wsA9O4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PieChart.vue_vue_type_script_setup_true_lang-DJRcsty7.js","sources":["../src/components/charts/PieChart.vue"],"sourcesContent":["<!--\n  @component PieChart\n  @description Pie/Donut chart component.\n  \n  @props\n  - data (array, required): Array of {name, value} objects\n  - title (string, optional): Chart title\n  - donut (boolean, optional): Render as donut chart\n  - height (number|string, optional): Chart height\n  - colors (array, optional): Custom color palette\n  - showLabels (boolean, optional): Show segment labels\n  \n  @example\n  <PieChart\n    :data=\"[\n      { name: 'Category A', value: 40 },\n      { name: 'Category B', value: 30 },\n      { name: 'Category C', value: 30 }\n    ]\"\n    title=\"Distribution\"\n    donut\n  />\n-->\n<template>\n  <BaseChart\n    :option=\"chartOption\"\n    :height=\"height\"\n    :loading=\"loading\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BaseChart from './BaseChart.vue';\nimport { chartColors } from './chartTheme';\nimport type { EChartsOption } from 'echarts';\n\ninterface PieDataItem {\n  name: string;\n  value: number;\n}\n\ninterface Props {\n  data: PieDataItem[];\n  title?: string;\n  donut?: boolean;\n  height?: number | string;\n  colors?: string[];\n  loading?: boolean;\n  showLabels?: boolean;\n  showLegend?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  donut: false,\n  height: 300,\n  colors: () => chartColors.primary,\n  loading: false,\n  showLabels: false,\n  showLegend: true,\n});\n\nconst emit = defineEmits<{\n  click: [params: unknown];\n}>();\n\nconst chartOption = computed<EChartsOption>(() => {\n  return {\n    title: props.title ? { text: props.title } : undefined,\n    legend: props.showLegend ? { \n      show: true,\n      orient: 'horizontal',\n      bottom: 0,\n    } : { show: false },\n    tooltip: {\n      trigger: 'item',\n      formatter: '{b}: {c} ({d}%)',\n    },\n    color: props.colors,\n    series: [{\n      type: 'pie',\n      radius: props.donut ? ['40%', '70%'] : '70%',\n      center: ['50%', '45%'],\n      avoidLabelOverlap: true,\n      itemStyle: {\n        borderRadius: 4,\n        borderColor: '#ffffff',\n        borderWidth: 2,\n      },\n      label: {\n        show: props.showLabels,\n        position: props.donut ? 'center' : 'outside',\n      },\n      emphasis: {\n        label: {\n          show: true,\n          fontSize: 14,\n          fontWeight: 600,\n        },\n      },\n      labelLine: {\n        show: props.showLabels && !props.donut,\n      },\n      data: props.data,\n    }],\n  };\n});\n\nconst handleClick = (params: unknown): void => {\n  emit('click', params);\n};\n</script>\n\n"],"names":["props","__props","emit","__emit","chartOption","computed","handleClick","params","_openBlock","_createBlock","BaseChart","_mergeProps","height","loading","$attrs"],"mappings":";;;;;;;;;;;;;;;;;AAuDA,UAAMA,IAAQC,GASRC,IAAOC,GAIPC,IAAcC,EAAwB,OACnC;AAAA,MACL,OAAOL,EAAM,QAAQ,EAAE,MAAMA,EAAM,UAAU;AAAA,MAC7C,QAAQA,EAAM,aAAa;AAAA,QACzB,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MAAA,IACN,EAAE,MAAM,GAAA;AAAA,MACZ,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA,MAEb,OAAOA,EAAM;AAAA,MACb,QAAQ,CAAC;AAAA,QACP,MAAM;AAAA,QACN,QAAQA,EAAM,QAAQ,CAAC,OAAO,KAAK,IAAI;AAAA,QACvC,QAAQ,CAAC,OAAO,KAAK;AAAA,QACrB,mBAAmB;AAAA,QACnB,WAAW;AAAA,UACT,cAAc;AAAA,UACd,aAAa;AAAA,UACb,aAAa;AAAA,QAAA;AAAA,QAEf,OAAO;AAAA,UACL,MAAMA,EAAM;AAAA,UACZ,UAAUA,EAAM,QAAQ,WAAW;AAAA,QAAA;AAAA,QAErC,UAAU;AAAA,UACR,OAAO;AAAA,YACL,MAAM;AAAA,YACN,UAAU;AAAA,YACV,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,QAEF,WAAW;AAAA,UACT,MAAMA,EAAM,cAAc,CAACA,EAAM;AAAA,QAAA;AAAA,QAEnC,MAAMA,EAAM;AAAA,MAAA,CACb;AAAA,IAAA,EAEJ,GAEKM,IAAc,CAACC,MAA0B;AAC7C,MAAAL,EAAK,SAASK,CAAM;AAAA,IACtB;sBAxFEC,EAAA,GAAAC,EAMEC,GANFC,EAME;AAAA,MALC,QAAQP,EAAA;AAAA,MACR,QAAQQ,EAAAA;AAAAA,MACR,SAASC,EAAAA;AAAAA,IAAAA,GACFC,EAAAA,QAAM,EACb,SAAOR,EAAA,CAAW,GAAA,MAAA,IAAA,CAAA,UAAA,UAAA,SAAA,CAAA;AAAA;;"}
+{"version":3,"file":"PieChart.vue_vue_type_script_setup_true_lang-e3wsA9O4.js","sources":["../src/components/charts/PieChart.vue"],"sourcesContent":["<!--\n  @component PieChart\n  @description Pie/Donut chart component.\n  \n  @props\n  - data (array, required): Array of {name, value} objects\n  - title (string, optional): Chart title\n  - donut (boolean, optional): Render as donut chart\n  - height (number|string, optional): Chart height\n  - colors (array, optional): Custom color palette\n  - showLabels (boolean, optional): Show segment labels\n  \n  @example\n  <PieChart\n    :data=\"[\n      { name: 'Category A', value: 40 },\n      { name: 'Category B', value: 30 },\n      { name: 'Category C', value: 30 }\n    ]\"\n    title=\"Distribution\"\n    donut\n  />\n-->\n<template>\n  <BaseChart\n    :option=\"chartOption\"\n    :height=\"height\"\n    :loading=\"loading\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BaseChart from './BaseChart.vue';\nimport { chartColors } from './chartTheme';\nimport type { EChartsOption } from 'echarts';\n\ninterface PieDataItem {\n  name: string;\n  value: number;\n}\n\ninterface Props {\n  data: PieDataItem[];\n  title?: string;\n  donut?: boolean;\n  height?: number | string;\n  colors?: string[];\n  loading?: boolean;\n  showLabels?: boolean;\n  showLegend?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  donut: false,\n  height: 300,\n  colors: () => chartColors.primary,\n  loading: false,\n  showLabels: false,\n  showLegend: true,\n});\n\nconst emit = defineEmits<{\n  click: [params: unknown];\n}>();\n\nconst chartOption = computed<EChartsOption>(() => {\n  return {\n    title: props.title ? { text: props.title } : undefined,\n    legend: props.showLegend ? { \n      show: true,\n      orient: 'horizontal',\n      bottom: 0,\n    } : { show: false },\n    tooltip: {\n      trigger: 'item',\n      formatter: '{b}: {c} ({d}%)',\n    },\n    color: props.colors,\n    series: [{\n      type: 'pie',\n      radius: props.donut ? ['40%', '70%'] : '70%',\n      center: ['50%', '45%'],\n      avoidLabelOverlap: true,\n      itemStyle: {\n        borderRadius: 4,\n        borderColor: '#ffffff',\n        borderWidth: 2,\n      },\n      label: {\n        show: props.showLabels,\n        position: props.donut ? 'center' : 'outside',\n      },\n      emphasis: {\n        label: {\n          show: true,\n          fontSize: 14,\n          fontWeight: 600,\n        },\n      },\n      labelLine: {\n        show: props.showLabels && !props.donut,\n      },\n      data: props.data,\n    }],\n  };\n});\n\nconst handleClick = (params: unknown): void => {\n  emit('click', params);\n};\n</script>\n\n"],"names":["props","__props","emit","__emit","chartOption","computed","handleClick","params","_openBlock","_createBlock","BaseChart","_mergeProps","$attrs"],"mappings":";;;;;;;;;;;;;;;;;AAuDA,UAAMA,IAAQC,GASRC,IAAOC,GAIPC,IAAcC,EAAwB,OACnC;AAAA,MACL,OAAOL,EAAM,QAAQ,EAAE,MAAMA,EAAM,UAAU;AAAA,MAC7C,QAAQA,EAAM,aAAa;AAAA,QACzB,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MAAA,IACN,EAAE,MAAM,GAAA;AAAA,MACZ,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA,MAEb,OAAOA,EAAM;AAAA,MACb,QAAQ,CAAC;AAAA,QACP,MAAM;AAAA,QACN,QAAQA,EAAM,QAAQ,CAAC,OAAO,KAAK,IAAI;AAAA,QACvC,QAAQ,CAAC,OAAO,KAAK;AAAA,QACrB,mBAAmB;AAAA,QACnB,WAAW;AAAA,UACT,cAAc;AAAA,UACd,aAAa;AAAA,UACb,aAAa;AAAA,QAAA;AAAA,QAEf,OAAO;AAAA,UACL,MAAMA,EAAM;AAAA,UACZ,UAAUA,EAAM,QAAQ,WAAW;AAAA,QAAA;AAAA,QAErC,UAAU;AAAA,UACR,OAAO;AAAA,YACL,MAAM;AAAA,YACN,UAAU;AAAA,YACV,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,QAEF,WAAW;AAAA,UACT,MAAMA,EAAM,cAAc,CAACA,EAAM;AAAA,QAAA;AAAA,QAEnC,MAAMA,EAAM;AAAA,MAAA,CACb;AAAA,IAAA,EAEJ,GAEKM,IAAc,CAACC,MAA0B;AAC7C,MAAAL,EAAK,SAASK,CAAM;AAAA,IACtB;sBAxFEC,EAAA,GAAAC,EAMEC,GANFC,EAME;AAAA,MALC,QAAQP,EAAA;AAAA,MACR,QAAQH,EAAA;AAAA,MACR,SAASA,EAAA;AAAA,IAAA,GACFW,EAAAA,QAAM,EACb,SAAON,EAAA,CAAW,GAAA,MAAA,IAAA,CAAA,UAAA,UAAA,SAAA,CAAA;AAAA;;"}

package/dist/ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-DkABeWJt.js

@@ -0,0 +1,130 @@
+import { defineComponent as $, ref as m, computed as n, onMounted as j, onBeforeUnmount as B, createElementBlock as o, openBlock as a, createElementVNode as r, createVNode as U, createCommentVNode as u, normalizeStyle as v, normalizeClass as k, renderSlot as f, createBlock as I, toDisplayString as c, Transition as R, withCtx as S } from "vue";
+import M from "./components/CloudinaryImage.js";
+const P = { class: "sl-relative sl-flex sl-items-center sl-gap-3" }, T = ["aria-expanded"], V = ["src", "alt"], O = {
+  key: 2,
+  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"
+}, A = { class: "sl-p-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700" }, D = { class: "sl-text-sm sl-font-medium sl-text-gray-900 dark:sl-text-white" }, H = { class: "sl-text-xs sl-text-gray-500 dark:sl-text-slate-400" }, K = {
+  key: 0,
+  class: "sl-py-1"
+}, J = /* @__PURE__ */ $({
+  __name: "ProfileHeaderAvatar",
+  props: {
+    userName: {},
+    userEmail: { default: "" },
+    imagePublicId: {},
+    imageUrl: {},
+    showLogout: { type: Boolean, default: !0 },
+    logoutLabel: { default: "Log Out" },
+    size: { default: 40 },
+    ringColorClass: { default: "sl-ring-stachelock-400" },
+    menuTop: { default: "3rem" },
+    menuRight: { default: "0" }
+  },
+  emits: ["logout", "menu-toggle"],
+  setup(e, { expose: y, emit: b }) {
+    const s = e, d = b, l = m(!1), x = m(null), p = m(null), w = n(() => s.userName ? s.userName.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2) : "U"), C = n(() => `hover:sl-ring-2 hover:${s.ringColorClass}`), z = n(() => `sl-ring-2 ${s.ringColorClass}`), N = n(() => s.size < 32 ? "sl-text-xs" : s.size < 48 ? "sl-text-sm" : "sl-text-base"), E = n(() => ({
+      top: s.menuTop,
+      right: s.menuRight
+    })), g = () => {
+      l.value = !l.value, d("menu-toggle", l.value);
+    }, i = () => {
+      l.value && (l.value = !1, d("menu-toggle", !1));
+    }, L = () => {
+      i(), d("logout");
+    }, h = (t) => {
+      t.key === "Escape" && i();
+    };
+    return j(() => {
+      document.addEventListener("keydown", h);
+    }), B(() => {
+      document.removeEventListener("keydown", h);
+    }), y({
+      toggleMenu: g,
+      closeMenu: i,
+      isMenuOpen: l
+    }), (t, q) => (a(), o("div", P, [
+      r("button", {
+        ref_key: "avatarButton",
+        ref: x,
+        type: "button",
+        onClick: g,
+        class: k(["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", [
+          C.value,
+          { [z.value]: l.value }
+        ]]),
+        style: v({ width: `${e.size}px`, height: `${e.size}px` }),
+        "aria-expanded": l.value,
+        "aria-haspopup": "true"
+      }, [
+        f(t.$slots, "avatar", {}, () => [
+          e.imagePublicId ? (a(), I(M, {
+            key: 0,
+            "public-id": e.imagePublicId,
+            alt: e.userName,
+            width: e.size,
+            height: e.size,
+            "custom-classes": { image: { "sl-w-full sl-h-full sl-object-cover sl-object-center": !0 } },
+            skeleton: "user"
+          }, null, 8, ["public-id", "alt", "width", "height"])) : e.imageUrl ? (a(), o("img", {
+            key: 1,
+            src: e.imageUrl,
+            alt: e.userName,
+            class: "sl-w-full sl-h-full sl-object-cover sl-object-center"
+          }, null, 8, V)) : (a(), o("div", O, [
+            r("span", {
+              class: k(["sl-font-semibold sl-text-stachelock-700 dark:sl-text-stachelock-200", N.value])
+            }, c(w.value), 3)
+          ]))
+        ])
+      ], 14, T),
+      U(R, {
+        "enter-active-class": "sl-transition sl-ease-out sl-duration-100",
+        "enter-from-class": "sl-transform sl-opacity-0 sl-scale-95",
+        "enter-to-class": "sl-transform sl-opacity-100 sl-scale-100",
+        "leave-active-class": "sl-transition sl-ease-in sl-duration-75",
+        "leave-from-class": "sl-transform sl-opacity-100 sl-scale-100",
+        "leave-to-class": "sl-transform sl-opacity-0 sl-scale-95"
+      }, {
+        default: S(() => [
+          l.value ? (a(), o("div", {
+            key: 0,
+            ref_key: "menuRef",
+            ref: p,
+            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",
+            style: v(E.value),
+            role: "menu",
+            "aria-orientation": "vertical"
+          }, [
+            r("div", A, [
+              f(t.$slots, "menu-header", {}, () => [
+                r("p", D, c(e.userName), 1),
+                r("p", H, c(e.userEmail), 1)
+              ])
+            ]),
+            t.$slots["menu-items"] ? (a(), o("div", K, [
+              f(t.$slots, "menu-items")
+            ])) : u("", !0),
+            e.showLogout ? (a(), o("button", {
+              key: 1,
+              type: "button",
+              onClick: L,
+              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",
+              role: "menuitem"
+            }, c(e.logoutLabel), 1)) : u("", !0)
+          ], 4)) : u("", !0)
+        ]),
+        _: 3
+      }),
+      l.value ? (a(), o("div", {
+        key: 0,
+        class: "sl-fixed sl-inset-0 sl-z-40",
+        onClick: i,
+        "aria-hidden": "true"
+      })) : u("", !0)
+    ]));
+  }
+});
+export {
+  J as _
+};
+//# sourceMappingURL=ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-DkABeWJt.js.map

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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"}