@stachelock/ui 0.3.1 → 0.5.0

package/dist/NotificationContainer.vue_vue_type_style_index_0_lang-DSfNw4Ge.js

@@ -0,0 +1,110 @@
+import { defineComponent as h, computed as m, createBlock as l, openBlock as o, Teleport as k, createElementBlock as i, createCommentVNode as u, Fragment as a, renderList as d } from "vue";
+import { useNotifications as y } from "./composables/useNotifications.js";
+import { _ as f } from "./NotificationToast.vue_vue_type_script_setup_true_lang-CU__ORw8.js";
+const g = {
+  key: 0,
+  class: "sl-notifications-position sl-notifications-tl"
+}, C = {
+  key: 1,
+  class: "sl-notifications-position sl-notifications-tc"
+}, A = {
+  key: 2,
+  class: "sl-notifications-position sl-notifications-tr"
+}, N = {
+  key: 3,
+  class: "sl-notifications-position sl-notifications-bl"
+}, B = {
+  key: 4,
+  class: "sl-notifications-position sl-notifications-bc"
+}, T = {
+  key: 5,
+  class: "sl-notifications-position sl-notifications-br"
+}, P = /* @__PURE__ */ h({
+  __name: "NotificationContainer",
+  setup(x) {
+    const {
+      activeNotifications: p,
+      hideNotification: _,
+      executeAction: v,
+      bringToFront: b
+    } = y(), n = m(() => {
+      const e = {
+        tl: [],
+        tc: [],
+        tr: [],
+        bl: [],
+        bc: [],
+        br: []
+      };
+      for (const s of p.value) {
+        const t = s.position || "br";
+        e[t].push(s);
+      }
+      return e;
+    }), c = (e) => {
+      _(e);
+    }, r = (e, s) => {
+      if (s.label === "bringToFront") {
+        b(e.id);
+        return;
+      }
+      v(e.id, s), s.action !== "dismiss" && !e.sticky && setTimeout(() => {
+        _(e);
+      }, 100);
+    };
+    return (e, s) => (o(), l(k, { to: "body" }, [
+      n.value.tl.length > 0 ? (o(), i("div", g, [
+        (o(!0), i(a, null, d(n.value.tl, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0),
+      n.value.tc.length > 0 ? (o(), i("div", C, [
+        (o(!0), i(a, null, d(n.value.tc, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0),
+      n.value.tr.length > 0 ? (o(), i("div", A, [
+        (o(!0), i(a, null, d(n.value.tr, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0),
+      n.value.bl.length > 0 ? (o(), i("div", N, [
+        (o(!0), i(a, null, d(n.value.bl, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0),
+      n.value.bc.length > 0 ? (o(), i("div", B, [
+        (o(!0), i(a, null, d(n.value.bc, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0),
+      n.value.br.length > 0 ? (o(), i("div", T, [
+        (o(!0), i(a, null, d(n.value.br, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0)
+    ]));
+  }
+});
+export {
+  P as _
+};
+//# sourceMappingURL=NotificationContainer.vue_vue_type_style_index_0_lang-DSfNw4Ge.js.map

package/dist/NotificationContainer.vue_vue_type_style_index_0_lang-DSfNw4Ge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationContainer.vue_vue_type_style_index_0_lang-DSfNw4Ge.js","sources":["../src/components/notifications/NotificationContainer.vue"],"sourcesContent":["<!--\n  @component NotificationContainer\n  @description Container for rendering all active notifications with proper positioning\n  \n  Place this component once at the root of your app to enable the notification\n  system. It automatically renders all active notifications from the useNotifications\n  composable with support for stacking, positioning, and actions.\n  \n  ## Features\n  - Automatic notification stacking with offset calculation\n  - Position-aware containers (6 positions: tr, tl, tc, br, bl, bc)\n  - Card stacking mode for many notifications\n  - Action button handling (dismiss, link, callback)\n  - Pause/resume support\n  - Works with importing packages (teleports to body)\n  \n  @example\n  // In App.vue or main layout\n  <template>\n    <div id=\"app\">\n      <RouterView />\n      <NotificationContainer />\n    </div>\n  </template>\n  \n  @example\n  // Using notifications in any component\n  <script setup>\n  import { useNotifications } from '@stachelock/ui'\n  \n  const { success, error, showNotification } = useNotifications()\n  \n  // Simple notifications\n  success('Saved!', 'Your changes were saved successfully.')\n  error('Error', 'Something went wrong.')\n  \n  // With actions\n  showNotification({\n    title: 'Confirm Delete',\n    message: 'Are you sure you want to delete this item?',\n    theme: 'warning',\n    autoClose: false,\n    actions: [\n      { label: 'Delete', action: 'callback', callback: () => deleteItem(), theme: 'danger' },\n      { label: 'Cancel', action: 'dismiss' }\n    ]\n  })\n  </script>\n-->\n<template>\n  <Teleport to=\"body\">\n    <!-- Top Left -->\n    <div \n      v-if=\"notificationsByPosition.tl.length > 0\"\n      class=\"sl-notifications-position sl-notifications-tl\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.tl\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n\n    <!-- Top Center -->\n    <div \n      v-if=\"notificationsByPosition.tc.length > 0\"\n      class=\"sl-notifications-position sl-notifications-tc\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.tc\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n\n    <!-- Top Right -->\n    <div \n      v-if=\"notificationsByPosition.tr.length > 0\"\n      class=\"sl-notifications-position sl-notifications-tr\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.tr\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n\n    <!-- Bottom Left -->\n    <div \n      v-if=\"notificationsByPosition.bl.length > 0\"\n      class=\"sl-notifications-position sl-notifications-bl\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.bl\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n\n    <!-- Bottom Center -->\n    <div \n      v-if=\"notificationsByPosition.bc.length > 0\"\n      class=\"sl-notifications-position sl-notifications-bc\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.bc\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n\n    <!-- Bottom Right (Default) -->\n    <div \n      v-if=\"notificationsByPosition.br.length > 0\"\n      class=\"sl-notifications-position sl-notifications-br\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.br\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n  </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * NotificationContainer - Global notification renderer with position-aware containers\n * \n * Renders all active notifications from the notification system, grouped by position.\n * Uses Teleport to render notifications at the body level for proper z-index.\n * \n * ## Setup\n * Add this component once in your app root:\n * ```vue\n * <template>\n *   <div id=\"app\">\n *     <YourContent />\n *     <NotificationContainer />\n *   </div>\n * </template>\n * ```\n * \n * ## Usage\n * Then use the composable anywhere:\n * ```typescript\n * import { useNotifications } from '@stachelock/ui'\n * \n * const { success, error, warning, info, showNotification } = useNotifications()\n * \n * // Simple notifications (defaults to bottom-right)\n * success('Saved!', 'Your changes were saved successfully.')\n * error('Error', 'Something went wrong.')\n * \n * // Position-specific notifications\n * showNotification({\n *   title: 'Top Right',\n *   message: 'This appears in the top right.',\n *   position: 'tr'\n * })\n * \n * // Advanced notification with actions\n * showNotification({\n *   title: 'Session Expiring',\n *   message: 'Your session will expire in 5 minutes.',\n *   theme: 'warning',\n *   position: 'br',\n *   priority: 'high',\n *   autoClose: false,\n *   actions: [\n *     { label: 'Extend Session', action: 'callback', callback: extendSession, theme: 'primary' },\n *     { label: 'Logout', action: 'callback', callback: logout, theme: 'secondary' }\n *   ]\n * })\n * ```\n */\nimport { computed } from 'vue';\nimport { \n  useNotifications, \n  type NotificationState, \n  type NotificationAction,\n  type NotificationPosition\n} from '../../composables/useNotifications';\nimport NotificationToast from './NotificationToast.vue';\n\nconst { \n  activeNotifications, \n  hideNotification, \n  executeAction, \n  bringToFront \n} = useNotifications();\n\n// Group notifications by position\nconst notificationsByPosition = computed(() => {\n  const groups: Record<NotificationPosition, NotificationState[]> = {\n    tl: [],\n    tc: [],\n    tr: [],\n    bl: [],\n    bc: [],\n    br: []\n  };\n  \n  for (const notification of activeNotifications.value) {\n    const pos = notification.position || 'br';\n    groups[pos].push(notification);\n  }\n  \n  return groups;\n});\n\nconst handleClose = (notification: NotificationState) => {\n  hideNotification(notification);\n};\n\nconst handleAction = (notification: NotificationState, action: NotificationAction) => {\n  // Handle special \"bring to front\" action for card stacking\n  if (action.label === 'bringToFront') {\n    bringToFront(notification.id);\n    return;\n  }\n  \n  // Execute the action\n  executeAction(notification.id, action);\n  \n  // Auto-dismiss after callback/link actions unless sticky\n  if (action.action !== 'dismiss' && !notification.sticky) {\n    // Small delay to let any callback complete\n    setTimeout(() => {\n      hideNotification(notification);\n    }, 100);\n  }\n};\n</script>\n\n<style>\n/* Position containers - these are fixed positioned containers for each corner/edge */\n.sl-notifications-position {\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  pointer-events: none;\n  max-height: calc(100vh - 48px);\n  overflow: visible;\n}\n\n/* Allow pointer events on individual notifications and set proper width */\n.sl-notifications-position > * {\n  pointer-events: auto;\n  width: 384px; /* max-w-sm equivalent */\n  max-width: calc(100vw - 48px);\n}\n\n/* Top positions */\n.sl-notifications-tl {\n  top: 0;\n  left: 0;\n  align-items: flex-start;\n}\n\n.sl-notifications-tc {\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n}\n\n.sl-notifications-tr {\n  top: 0;\n  right: 0;\n  align-items: flex-end;\n}\n\n/* Bottom positions - flex-direction reversed so new items appear at bottom */\n.sl-notifications-bl {\n  bottom: 0;\n  left: 0;\n  align-items: flex-start;\n  flex-direction: column-reverse;\n}\n\n.sl-notifications-bc {\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n  flex-direction: column-reverse;\n}\n\n.sl-notifications-br {\n  bottom: 0;\n  right: 0;\n  align-items: flex-end;\n  flex-direction: column-reverse;\n}\n\n/* Mobile adjustments */\n@media (max-width: 640px) {\n  .sl-notifications-position {\n    padding: 16px;\n    left: 0;\n    right: 0;\n  }\n  \n  .sl-notifications-position > * {\n    width: 100%;\n    max-width: 100%;\n  }\n  \n  .sl-notifications-tl,\n  .sl-notifications-tc,\n  .sl-notifications-tr {\n    top: 0;\n    align-items: stretch;\n  }\n  \n  .sl-notifications-bl,\n  .sl-notifications-bc,\n  .sl-notifications-br {\n    bottom: 0;\n    align-items: stretch;\n  }\n  \n  /* On mobile, center positions take full width */\n  .sl-notifications-tc,\n  .sl-notifications-bc {\n    transform: none;\n  }\n}\n</style>\n"],"names":["activeNotifications","hideNotification","executeAction","bringToFront","useNotifications","notificationsByPosition","computed","groups","notification","pos","handleClose","handleAction","action","_createBlock","_Teleport","_openBlock","_createElementBlock","_hoisted_1","_Fragment","_renderList","NotificationToast","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6"],"mappings":"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"}

package/dist/NotificationToast.vue_vue_type_script_setup_true_lang-CU__ORw8.js

@@ -0,0 +1,238 @@
+import { defineComponent as J, computed as e, createBlock as k, openBlock as r, unref as h, withCtx as v, createVNode as w, createElementBlock as o, createCommentVNode as c, normalizeStyle as K, normalizeClass as i, createElementVNode as d, resolveDynamicComponent as P, toDisplayString as y, Fragment as Q, renderList as U, withModifiers as C } from "vue";
+import { r as g, a as Z } from "./InformationCircleIcon-B322GNIt.js";
+import { r as $ } from "./ExclamationCircleIcon-DjxYk45_.js";
+import { r as _ } from "./ExclamationTriangleIcon-BNKYmV_J.js";
+import { r as tt } from "./XMarkIcon-DNvCkiOy.js";
+import { S as st, h as et } from "./transition-_rPfnoET.js";
+const lt = ["aria-live"], at = { class: "sl-flex sl-items-start" }, rt = {
+  key: 1,
+  class: "sl-mt-3 sl-flex sl-gap-2"
+}, it = ["onClick"], ft = /* @__PURE__ */ J({
+  __name: "NotificationToast",
+  props: {
+    notification: {}
+  },
+  emits: ["close", "action"],
+  setup(l, { emit: z }) {
+    const s = l, u = z, S = () => {
+      u("close", s.notification);
+    }, M = (t) => {
+      u("action", s.notification, t);
+    }, B = () => {
+      s.notification.isCardMode && s.notification.cardStackIndex !== 0 && u("action", s.notification, { label: "bringToFront", action: "callback" });
+    }, I = () => {
+    }, N = 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;
+    }), O = e(() => {
+      const t = {
+        default: "",
+        compact: "",
+        expanded: ""
+      };
+      return t[s.notification.variant] || t.default;
+    }), T = e(() => s.notification.priority === "urgent" ? "sl-animate-pulse" : ""), A = 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` : "";
+    }), F = e(() => s.notification.isCardMode ? "sl-cursor-pointer hover:sl-scale-[1.02] sl-transition-transform" : ""), L = e(() => {
+      const t = {};
+      return s.notification.maxWidth && (t.maxWidth = `${s.notification.maxWidth}px`), s.notification.isCardMode && (t.transform = `translate(${s.notification.cardOffsetX || 0}px, ${s.notification.cardOffsetY || 0}px)`, t.zIndex = s.notification.zIndex || 1), t;
+    }), b = e(() => {
+      const t = s.notification.theme;
+      return ["light", "ghost"].includes(t) ? "sl-text-gray-800 dark:sl-text-gray-100" : "sl-text-white";
+    }), V = e(() => {
+      const t = s.notification.theme;
+      return ["light", "ghost"].includes(t) ? "sl-text-gray-500 dark:sl-text-gray-400" : "sl-text-white/90";
+    }), W = 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;
+    }), D = e(() => {
+      const t = s.notification.theme, a = "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 = ["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 `${a} ${n}`;
+    }), p = e(() => {
+      if (s.notification.icon)
+        return s.notification.icon;
+      const t = s.notification.theme, a = {
+        primary: g,
+        secondary: g,
+        dark: $,
+        light: g,
+        warning: _,
+        danger: $,
+        success: Z,
+        info: g,
+        ghost: g
+      };
+      return a[t] || a.primary;
+    }), E = 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;
+    }), R = 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;
+    }), X = 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;
+    }), Y = e(() => {
+      const t = {
+        compact: "sl-p-3",
+        default: "sl-p-4",
+        expanded: "sl-p-5"
+      };
+      return t[s.notification.variant] || t.default;
+    }), j = 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;
+    }), q = (t) => {
+      const a = "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 = s.notification.theme, f = ["light", "ghost"].includes(n), m = {
+        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"
+        }
+      }, H = t.theme || "secondary", x = m[H] || m.secondary;
+      return `${a} ${f ? x.light : x.dark}`;
+    }, G = e(() => {
+      const t = s.notification.position, a = {
+        tr: "sl-translate-x-full sl-opacity-0",
+        tl: "-sl-translate-x-full sl-opacity-0",
+        br: "sl-translate-x-full sl-opacity-0",
+        bl: "-sl-translate-x-full sl-opacity-0",
+        tc: "-sl-translate-y-full sl-opacity-0",
+        bc: "sl-translate-y-full sl-opacity-0"
+      };
+      return a[t] || a.br;
+    });
+    return (t, a) => (r(), k(h(st), {
+      appear: "",
+      show: l.notification.isOpen,
+      as: "template",
+      onAfterLeave: I
+    }, {
+      default: v(() => [
+        w(h(et), {
+          as: "template",
+          enter: "sl-duration-300 sl-ease-out sl-transform",
+          "enter-from": G.value,
+          "enter-to": "sl-translate-y-0 sl-opacity-100 sl-translate-x-0",
+          leave: "sl-duration-200 sl-ease-in",
+          "leave-from": "sl-opacity-100",
+          "leave-to": "sl-opacity-0"
+        }, {
+          default: v(() => [
+            l.notification.isOpen ? (r(), o("div", {
+              key: 0,
+              class: i([
+                N.value,
+                O.value,
+                T.value,
+                F.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 sl-relative"
+              ]),
+              style: K(L.value),
+              onClick: B,
+              role: "alert",
+              "aria-live": l.notification.priority === "urgent" ? "assertive" : "polite"
+            }, [
+              d("div", {
+                class: i(Y.value)
+              }, [
+                d("div", at, [
+                  p.value ? (r(), k(P(p.value), {
+                    key: 0,
+                    class: i([E.value, V.value, "sl-flex-shrink-0"]),
+                    "aria-hidden": "true"
+                  }, null, 8, ["class"])) : c("", !0),
+                  d("div", {
+                    class: i(j.value)
+                  }, [
+                    d("p", {
+                      class: i([R.value, b.value])
+                    }, y(l.notification.title), 3),
+                    l.notification.message ? (r(), o("p", {
+                      key: 0,
+                      class: i([X.value, b.value, "sl-opacity-90"])
+                    }, y(l.notification.message), 3)) : c("", !0),
+                    l.notification.actions && l.notification.actions.length > 0 ? (r(), o("div", rt, [
+                      (r(!0), o(Q, null, U(l.notification.actions, (n, f) => (r(), o("button", {
+                        key: f,
+                        type: "button",
+                        class: i(q(n)),
+                        onClick: C((m) => M(n), ["stop"])
+                      }, y(n.label), 11, it))), 128))
+                    ])) : c("", !0)
+                  ], 2),
+                  l.notification.dismissible !== !1 ? (r(), o("button", {
+                    key: 1,
+                    type: "button",
+                    onClick: C(S, ["stop"]),
+                    class: i([D.value, W.value])
+                  }, [
+                    a[0] || (a[0] = d("span", { class: "sl-sr-only" }, "Close", -1)),
+                    w(h(tt), {
+                      class: "sl-h-5 sl-w-5",
+                      "aria-hidden": "true"
+                    })
+                  ], 2)) : c("", !0)
+                ])
+              ], 2),
+              l.notification.priority === "urgent" || l.notification.priority === "high" ? (r(), o("div", {
+                key: 0,
+                class: i(A.value)
+              }, null, 2)) : c("", !0)
+            ], 14, lt)) : c("", !0)
+          ]),
+          _: 1
+        }, 8, ["enter-from"])
+      ]),
+      _: 1
+    }, 8, ["show"]));
+  }
+});
+export {
+  ft as _
+};
+//# sourceMappingURL=NotificationToast.vue_vue_type_script_setup_true_lang-CU__ORw8.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationToast.vue_vue_type_script_setup_true_lang-CU__ORw8.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    <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 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 sl-relative'\n        ]\"\n        :style=\"toastStyle\"\n        @click=\"handleCardClick\"\n        role=\"alert\"\n        :aria-live=\"notification.priority === 'urgent' ? 'assertive' : 'polite'\"\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  </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 - width is controlled by container, just set max-width for variants\nconst variantClass = computed(() => {\n  const variants: Record<string, string> = {\n    default: '',\n    compact: '',\n    expanded: '',\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// Toast style for card stacking and custom widths\nconst toastStyle = computed(() => {\n  const styles: Record<string, string | number> = {};\n  \n  if (props.notification.maxWidth) {\n    styles.maxWidth = `${props.notification.maxWidth}px`;\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// 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-x-full sl-opacity-0',\n    tl: '-sl-translate-x-full sl-opacity-0',\n    br: 'sl-translate-x-full sl-opacity-0',\n    bl: '-sl-translate-x-full sl-opacity-0',\n    tc: '-sl-translate-y-full sl-opacity-0',\n    bc: 'sl-translate-y-full sl-opacity-0',\n  };\n  return classes[position] || classes.br;\n});\n</script>\n"],"names":["props","__props","emit","__emit","handleClose","handleAction","action","handleCardClick","onAfterLeave","themeClass","computed","themes","variantClass","variants","priorityClass","priorityIndicatorClass","base","cardModeClass","toastStyle","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","enterFromClass","position","classes","_createBlock","_unref","TransitionRoot","_createVNode","TransitionChild","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_2","_openBlock","_resolveDynamicComponent","_toDisplayString","_hoisted_3","_Fragment","idx","_withModifiers","$event","_hoisted_4","_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