@stachelock/ui 0.2.14 → 0.3.0

package/dist/LineChart.vue_vue_type_script_setup_true_lang-DszQ-a5L.js

@@ -0,0 +1,66 @@
+import { defineComponent as m, computed as r, createBlock as p, openBlock as y, mergeProps as u } from "vue";
+import g from "./charts/BaseChart.js";
+import { chartColors as f, getAreaGradient as i } from "./charts/chartTheme.js";
+const v = /* @__PURE__ */ m({
+  __name: "LineChart",
+  props: {
+    data: {},
+    xAxisData: {},
+    title: {},
+    smooth: { type: Boolean, default: !0 },
+    showArea: { type: Boolean, default: !1 },
+    height: { default: 300 },
+    colors: { default: () => f.primary },
+    loading: { type: Boolean, default: !1 },
+    showLegend: { type: Boolean, default: !0 }
+  },
+  emits: ["click"],
+  setup(s, { emit: n }) {
+    const e = s, c = n, a = r(() => Array.isArray(e.data) && e.data.length > 0 && typeof e.data[0] == "object"), d = r(() => {
+      const t = a.value ? e.data.map((o, l) => ({
+        name: o.name,
+        type: "line",
+        data: o.data,
+        smooth: e.smooth,
+        symbol: "circle",
+        symbolSize: 6,
+        lineStyle: { width: 2 },
+        areaStyle: e.showArea ? { color: i(e.colors[l % e.colors.length]) } : void 0,
+        itemStyle: { color: e.colors[l % e.colors.length] }
+      })) : [{
+        type: "line",
+        data: e.data,
+        smooth: e.smooth,
+        symbol: "circle",
+        symbolSize: 6,
+        lineStyle: { width: 2 },
+        areaStyle: e.showArea ? { color: i(e.colors[0]) } : void 0,
+        itemStyle: { color: e.colors[0] }
+      }];
+      return {
+        title: e.title ? { text: e.title } : void 0,
+        legend: e.showLegend && a.value ? { show: !0 } : { show: !1 },
+        xAxis: {
+          type: "category",
+          data: e.xAxisData,
+          boundaryGap: !1
+        },
+        yAxis: {
+          type: "value"
+        },
+        series: t
+      };
+    }), h = (t) => {
+      c("click", t);
+    };
+    return (t, o) => (y(), p(g, u({
+      option: d.value,
+      height: t.height,
+      loading: t.loading
+    }, t.$attrs, { onClick: h }), null, 16, ["option", "height", "loading"]));
+  }
+});
+export {
+  v as _
+};
+//# sourceMappingURL=LineChart.vue_vue_type_script_setup_true_lang-DszQ-a5L.js.map

package/dist/LineChart.vue_vue_type_script_setup_true_lang-DszQ-a5L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.vue_vue_type_script_setup_true_lang-DszQ-a5L.js","sources":["../src/components/charts/LineChart.vue"],"sourcesContent":["<!--\n  @component LineChart\n  @description Line chart component with optional area fill.\n  \n  @props\n  - data (array, required): Array of data points\n  - xAxisData (array, required): X-axis labels\n  - title (string, optional): Chart title\n  - smooth (boolean, optional): Smooth line curve\n  - showArea (boolean, optional): Fill area under line\n  - height (number|string, optional): Chart height\n  - colors (array, optional): Custom color palette\n  \n  @example\n  <LineChart\n    :data=\"salesData\"\n    :x-axis-data=\"months\"\n    title=\"Monthly Sales\"\n    smooth\n    show-area\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, getAreaGradient } from './chartTheme';\nimport type { EChartsOption } from 'echarts';\n\ninterface SeriesData {\n  name: string;\n  data: number[];\n}\n\ninterface Props {\n  data: number[] | SeriesData[];\n  xAxisData: string[];\n  title?: string;\n  smooth?: boolean;\n  showArea?: boolean;\n  height?: number | string;\n  colors?: string[];\n  loading?: boolean;\n  showLegend?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  smooth: true,\n  showArea: false,\n  height: 300,\n  colors: () => chartColors.primary,\n  loading: false,\n  showLegend: true,\n});\n\nconst emit = defineEmits<{\n  click: [params: unknown];\n}>();\n\nconst isMultiSeries = computed(() => {\n  return Array.isArray(props.data) && props.data.length > 0 && typeof props.data[0] === 'object';\n});\n\nconst chartOption = computed<EChartsOption>(() => {\n  const series = isMultiSeries.value\n    ? (props.data as SeriesData[]).map((s, idx) => ({\n        name: s.name,\n        type: 'line' as const,\n        data: s.data,\n        smooth: props.smooth,\n        symbol: 'circle',\n        symbolSize: 6,\n        lineStyle: { width: 2 },\n        areaStyle: props.showArea ? { color: getAreaGradient(props.colors[idx % props.colors.length]) } : undefined,\n        itemStyle: { color: props.colors[idx % props.colors.length] },\n      }))\n    : [{\n        type: 'line' as const,\n        data: props.data as number[],\n        smooth: props.smooth,\n        symbol: 'circle',\n        symbolSize: 6,\n        lineStyle: { width: 2 },\n        areaStyle: props.showArea ? { color: getAreaGradient(props.colors[0]) } : undefined,\n        itemStyle: { color: props.colors[0] },\n      }];\n\n  return {\n    title: props.title ? { text: props.title } : undefined,\n    legend: props.showLegend && isMultiSeries.value ? { show: true } : { show: false },\n    xAxis: {\n      type: 'category',\n      data: props.xAxisData,\n      boundaryGap: false,\n    },\n    yAxis: {\n      type: 'value',\n    },\n    series,\n  };\n});\n\nconst handleClick = (params: unknown): void => {\n  emit('click', params);\n};\n</script>\n\n"],"names":["props","__props","emit","__emit","isMultiSeries","computed","chartOption","series","s","idx","getAreaGradient","handleClick","params","_openBlock","_createBlock","BaseChart","_mergeProps","height","loading","$attrs"],"mappings":";;;;;;;;;;;;;;;;;;AAuDA,UAAMA,IAAQC,GASRC,IAAOC,GAIPC,IAAgBC,EAAS,MACtB,MAAM,QAAQL,EAAM,IAAI,KAAKA,EAAM,KAAK,SAAS,KAAK,OAAOA,EAAM,KAAK,CAAC,KAAM,QACvF,GAEKM,IAAcD,EAAwB,MAAM;AAChD,YAAME,IAASH,EAAc,QACxBJ,EAAM,KAAsB,IAAI,CAACQ,GAAGC,OAAS;AAAA,QAC5C,MAAMD,EAAE;AAAA,QACR,MAAM;AAAA,QACN,MAAMA,EAAE;AAAA,QACR,QAAQR,EAAM;AAAA,QACd,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,WAAW,EAAE,OAAO,EAAA;AAAA,QACpB,WAAWA,EAAM,WAAW,EAAE,OAAOU,EAAgBV,EAAM,OAAOS,IAAMT,EAAM,OAAO,MAAM,CAAC,MAAM;AAAA,QAClG,WAAW,EAAE,OAAOA,EAAM,OAAOS,IAAMT,EAAM,OAAO,MAAM,EAAA;AAAA,MAAE,EAC5D,IACF,CAAC;AAAA,QACC,MAAM;AAAA,QACN,MAAMA,EAAM;AAAA,QACZ,QAAQA,EAAM;AAAA,QACd,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,WAAW,EAAE,OAAO,EAAA;AAAA,QACpB,WAAWA,EAAM,WAAW,EAAE,OAAOU,EAAgBV,EAAM,OAAO,CAAC,CAAC,EAAA,IAAM;AAAA,QAC1E,WAAW,EAAE,OAAOA,EAAM,OAAO,CAAC,EAAA;AAAA,MAAE,CACrC;AAEL,aAAO;AAAA,QACL,OAAOA,EAAM,QAAQ,EAAE,MAAMA,EAAM,UAAU;AAAA,QAC7C,QAAQA,EAAM,cAAcI,EAAc,QAAQ,EAAE,MAAM,GAAA,IAAS,EAAE,MAAM,GAAA;AAAA,QAC3E,OAAO;AAAA,UACL,MAAM;AAAA,UACN,MAAMJ,EAAM;AAAA,UACZ,aAAa;AAAA,QAAA;AAAA,QAEf,OAAO;AAAA,UACL,MAAM;AAAA,QAAA;AAAA,QAER,QAAAO;AAAA,MAAA;AAAA,IAEJ,CAAC,GAEKI,IAAc,CAACC,MAA0B;AAC7C,MAAAV,EAAK,SAASU,CAAM;AAAA,IACtB;sBA1FEC,EAAA,GAAAC,EAMEC,GANFC,EAME;AAAA,MALC,QAAQV,EAAA;AAAA,MACR,QAAQW,EAAAA;AAAAA,MACR,SAASC,EAAAA;AAAAA,IAAAA,GACFC,EAAAA,QAAM,EACb,SAAOR,EAAA,CAAW,GAAA,MAAA,IAAA,CAAA,UAAA,UAAA,SAAA,CAAA;AAAA;;"}

package/dist/LottieAnimation.vue_vue_type_script_setup_true_lang-CwOOShcM.js

@@ -0,0 +1,36 @@
+import { defineComponent as m, defineAsyncComponent as d, inject as s, computed as p, createBlock as f, createCommentVNode as v, openBlock as y, unref as h } from "vue";
+const g = /* @__PURE__ */ m({
+  __name: "LottieAnimation",
+  props: {
+    animationData: {},
+    height: { default: 200 },
+    width: { default: 200 },
+    loop: { type: [Boolean, Number], default: void 0 },
+    autoplay: { type: Boolean, default: void 0 },
+    speed: { default: 1 },
+    pauseOnHover: { type: Boolean, default: !1 }
+  },
+  emits: ["complete", "loop-complete", "enter-frame"],
+  setup(i) {
+    const l = d(
+      () => import("./vue3-lottie.es-C_MDkNwR.js").then((e) => e.Vue3Lottie)
+    ), t = i, a = s("lottie", {}), r = p(() => t.loop !== void 0 ? t.loop : a.loop ?? !0), u = p(() => t.autoplay !== void 0 ? t.autoplay : a.autoplay ?? !0);
+    return (e, o) => e.animationData ? (y(), f(h(l), {
+      key: 0,
+      animationData: e.animationData,
+      height: e.height,
+      width: e.width,
+      loop: r.value,
+      autoplay: u.value,
+      speed: e.speed,
+      pauseOnHover: e.pauseOnHover,
+      onComplete: o[0] || (o[0] = (n) => e.$emit("complete")),
+      onLoopComplete: o[1] || (o[1] = (n) => e.$emit("loop-complete")),
+      onEnterFrame: o[2] || (o[2] = (n) => e.$emit("enter-frame", n))
+    }, null, 8, ["animationData", "height", "width", "loop", "autoplay", "speed", "pauseOnHover"])) : v("", !0);
+  }
+});
+export {
+  g as _
+};
+//# sourceMappingURL=LottieAnimation.vue_vue_type_script_setup_true_lang-CwOOShcM.js.map

package/dist/LottieAnimation.vue_vue_type_script_setup_true_lang-CwOOShcM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LottieAnimation.vue_vue_type_script_setup_true_lang-CwOOShcM.js","sources":["../src/components/LottieAnimation.vue"],"sourcesContent":["<template>\n  <Vue3Lottie\n    v-if=\"animationData\"\n    :animationData=\"animationData\"\n    :height=\"height\"\n    :width=\"width\"\n    :loop=\"effectiveLoop\"\n    :autoplay=\"effectiveAutoplay\"\n    :speed=\"speed\"\n    :pauseOnHover=\"pauseOnHover\"\n    @complete=\"$emit('complete')\"\n    @loopComplete=\"$emit('loop-complete')\"\n    @enterFrame=\"$emit('enter-frame', $event)\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, inject, defineAsyncComponent } from 'vue';\nimport type { LottieOptions } from '@/plugin/configure';\n\n// Dynamic import for Vue3Lottie\nconst Vue3Lottie = defineAsyncComponent(() => \n  import('vue3-lottie').then(m => m.Vue3Lottie)\n);\n\ninterface Props {\n  /** Lottie animation JSON data */\n  animationData: unknown;\n  /** Animation height */\n  height?: number | string;\n  /** Animation width */\n  width?: number | string;\n  /** Loop the animation */\n  loop?: boolean | number;\n  /** Auto-play the animation */\n  autoplay?: boolean;\n  /** Animation speed (1 = normal) */\n  speed?: number;\n  /** Pause on hover */\n  pauseOnHover?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  height: 200,\n  width: 200,\n  loop: undefined,\n  autoplay: undefined,\n  speed: 1,\n  pauseOnHover: false,\n});\n\ndefineEmits<{\n  (e: 'complete'): void;\n  (e: 'loop-complete'): void;\n  (e: 'enter-frame', frame: number): void;\n}>();\n\n// Get plugin configuration\nconst lottieConfig = inject<LottieOptions>('lottie', {});\n\n// Apply defaults from config if not explicitly set\nconst effectiveLoop = computed(() => {\n  if (props.loop !== undefined) return props.loop;\n  return lottieConfig.loop ?? true;\n});\n\nconst effectiveAutoplay = computed(() => {\n  if (props.autoplay !== undefined) return props.autoplay;\n  return lottieConfig.autoplay ?? true;\n});\n</script>\n\n"],"names":["Vue3Lottie","defineAsyncComponent","m","props","__props","lottieConfig","inject","effectiveLoop","computed","effectiveAutoplay","animationData","_createBlock","_unref","height","width","speed","pauseOnHover","$emit","_cache","$event"],"mappings":";;;;;;;;;;;;;;AAqBA,UAAMA,IAAaC;AAAA,MAAqB,MACtC,OAAO,8BAAa,EAAE,KAAK,CAAAC,MAAKA,EAAE,UAAU;AAAA,IAAA,GAoBxCC,IAAQC,GAgBRC,IAAeC,EAAsB,UAAU,EAAE,GAGjDC,IAAgBC,EAAS,MACzBL,EAAM,SAAS,SAAkBA,EAAM,OACpCE,EAAa,QAAQ,EAC7B,GAEKI,IAAoBD,EAAS,MAC7BL,EAAM,aAAa,SAAkBA,EAAM,WACxCE,EAAa,YAAY,EACjC;qBAnESK,EAAAA,sBADRC,EAYEC,EAAAZ,CAAA,GAAA;AAAA;MAVC,eAAeU,EAAAA;AAAAA,MACf,QAAQG,EAAAA;AAAAA,MACR,OAAOC,EAAAA;AAAAA,MACP,MAAMP,EAAA;AAAA,MACN,UAAUE,EAAA;AAAA,MACV,OAAOM,EAAAA;AAAAA,MACP,cAAcC,EAAAA;AAAAA,MACd,mCAAUC,EAAAA,MAAK,UAAA;AAAA,MACf,uCAAcA,EAAAA,MAAK,eAAA;AAAA,MACnB,cAAUC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEF,EAAAA,MAAK,eAAgBE,CAAM;AAAA,IAAA;;;"}

package/dist/MapPinIcon-CSTDUZnD.js

@@ -0,0 +1,27 @@
+import { createElementBlock as o, openBlock as r, createElementVNode as e } from "vue";
+function i(t, n) {
+  return r(), o("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    e("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+    }),
+    e("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
+    })
+  ]);
+}
+export {
+  i as r
+};
+//# sourceMappingURL=MapPinIcon-CSTDUZnD.js.map

package/dist/MapPinIcon-CSTDUZnD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapPinIcon-CSTDUZnD.js","sources":["../node_modules/@heroicons/vue/24/outline/esm/MapPinIcon.js"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    fill: \"none\",\n    viewBox: \"0 0 24 24\",\n    \"stroke-width\": \"1.5\",\n    stroke: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      d: \"M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n    }),\n    _createElementVNode(\"path\", {\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      d: \"M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z\"\n    })\n  ]))\n}"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode"],"mappings":";AAEe,SAASA,EAAOC,GAAMC,GAAQ;AAC3C,SAAQC,EAAU,GAAIC,EAAoB,OAAO;AAAA,IAC/C,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,aAAa;AAAA,EACjB,GAAK;AAAA,IACDC,EAAoB,QAAQ;AAAA,MAC1B,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB,GAAG;AAAA,IACT,CAAK;AAAA,IACDA,EAAoB,QAAQ;AAAA,MAC1B,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB,GAAG;AAAA,IACT,CAAK;AAAA,EACL,CAAG;AACH;","x_google_ignoreList":[0]}

package/dist/MonthCalendar.vue_vue_type_style_index_0_lang-CnX3Ih0W.js

@@ -0,0 +1,193 @@
+import { defineComponent as R, computed as u, createElementBlock as r, openBlock as o, createElementVNode as a, Fragment as i, renderList as c, toDisplayString as g, normalizeClass as h, createCommentVNode as m, unref as L, normalizeStyle as _, withModifiers as X } from "vue";
+import { f as $ } from "./calendar-DyIP7WGv.js";
+import { u as q, c as G } from "./useEventSegments-B-r_8zCW.js";
+const J = { class: "sl-shadow sl-ring-1 sl-ring-black dark:sl-ring-slate-700 sl-ring-opacity-5 lg:sl-flex lg:sl-flex-auto lg:sl-flex-col" }, Q = { class: "sl-grid sl-grid-cols-7 sl-gap-px sl-border-b sl-border-gray-300 dark:sl-border-slate-600 sl-bg-gray-200 dark:sl-bg-slate-800 sl-text-center sl-text-xs sl-font-semibold sl-leading-6 sl-text-gray-700 dark:sl-text-slate-300 lg:sl-flex-none" }, U = { class: "sl-flex sl-bg-gray-200 dark:sl-bg-slate-800 sl-text-xs sl-leading-6 sl-text-gray-700 dark:sl-text-slate-300 lg:sl-flex-auto" }, Y = { class: "sl-hidden sl-w-full lg:sl-grid lg:sl-grid-cols-7 lg:sl-grid-rows-6 lg:sl-gap-px" }, Z = { class: "sl-px-3" }, ss = ["datetime"], es = { class: "sl-mt-2 sl-space-y-1 sl-min-h-0" }, ls = ["onClick"], ts = { class: "sl-relative" }, ns = {
+  key: 0,
+  class: "sl-truncate sl-block"
+}, rs = {
+  key: 0,
+  class: "sl-mt-1 sl-px-3"
+}, os = ["onClick"], as = { class: "sl-isolate sl-grid sl-w-full sl-grid-cols-7 sl-grid-rows-6 sl-gap-px lg:sl-hidden" }, is = ["onClick", "onDblclick"], cs = ["datetime"], ds = { class: "sl-sr-only" }, us = {
+  key: 0,
+  class: "sl-mt-auto sl-w-full sl-space-y-0.5 sl-overflow-visible"
+}, gs = ["onClick"], hs = { class: "sl-relative sl-overflow-visible" }, ms = {
+  key: 1,
+  class: "sl-mt-auto sl-flex sl-flex-wrap sl-justify-center sl-gap-0.5 sl-overflow-visible"
+}, x = 3, ps = /* @__PURE__ */ R({
+  __name: "MonthCalendar",
+  props: {
+    days: {},
+    events: { default: () => [] },
+    weekStartsOn: { default: 0 }
+  },
+  emits: ["selectDay", "select:event", "doubleSelectDay"],
+  setup(A, { emit: I }) {
+    const d = A, b = I, z = u(() => {
+      const e = ["S", "M", "T", "W", "T", "F", "S"], t = ["M", "T", "W", "T", "F", "S", "S"];
+      return d.weekStartsOn === 1 ? t : e;
+    }), { getSegment: f, barClass: P, barClassCompact: B } = q(), y = u(() => {
+      const e = [], t = /* @__PURE__ */ new Set(), s = [...d.events || []];
+      return d.days.forEach((l) => {
+        l.events?.forEach((n) => {
+          s.push(n);
+        });
+      }), s.forEach((l) => {
+        const n = l.id || String(l.name);
+        t.has(n) || (e.push(l), t.add(n));
+      }), e;
+    }), V = u(() => d.days.map((e) => e.date)), p = u(() => G(V.value, y.value)), j = u(() => {
+      if (p.value.size === 0) return 0;
+      const e = Array.from(p.value.values());
+      return Math.max(...e) + 1;
+    }), w = u(
+      () => d.days.map((e) => ({
+        ...e,
+        id: e.id || e.date
+      }))
+    ), C = (e) => (e.split("-").pop() || "").replace(/^0/, ""), k = (e) => e.events && e.events.length > 0 ? e.events : y.value.filter((t) => f(e.date, t) !== "none"), N = (e, t) => {
+      const s = d.days.find((v) => v.date === e);
+      if (!s) return [];
+      const l = k(s), n = l.filter((v) => {
+        const K = v.id || String(v.name);
+        return p.value.get(K) === t;
+      }), F = Math.min(x, l.length);
+      return t < F ? n : [];
+    }, S = (e) => {
+      const t = k(e);
+      return t.length > x ? t.length - x : 0;
+    }, O = (e, t) => {
+      const s = f(e, t);
+      return s === "start" || s === "end" || s === "single";
+    }, W = (e, t) => {
+      const s = f(e, t), l = t.startTime?.dateTime || t.datetime, n = t.endTime?.dateTime || t.datetime;
+      return s === "start" && l ? `Start ${$(l)}` : s === "end" && n ? `End ${$(n)}` : String(t.name || "");
+    }, E = (e) => k(e).filter((s) => {
+      const l = f(e.date, s);
+      return l === "start" || l === "middle" || l === "end";
+    }), D = (e) => k(e).filter((s) => f(e.date, s) === "single"), T = (e) => {
+      b("selectDay", e);
+    }, H = (e) => {
+      b("doubleSelectDay", e);
+    }, M = (e) => {
+      b("select:event", e);
+    };
+    return (e, t) => (o(), r("div", J, [
+      a("div", Q, [
+        (o(!0), r(i, null, c(z.value, (s) => (o(), r("div", {
+          key: s,
+          class: "sl-bg-white dark:sl-bg-slate-900 sl-py-2"
+        }, g(s), 1))), 128))
+      ]),
+      a("div", U, [
+        a("div", Y, [
+          (o(!0), r(i, null, c(w.value, (s) => (o(), r("div", {
+            key: s.date,
+            class: h([
+              s.isCurrentMonth ? "sl-bg-white dark:sl-bg-slate-900" : "sl-bg-gray-50 dark:sl-bg-slate-800 sl-text-gray-500 dark:sl-text-slate-400",
+              "sl-relative sl-py-2 sl-min-w-0"
+            ])
+          }, [
+            a("div", Z, [
+              a("time", {
+                datetime: s.date,
+                class: h([
+                  s.isToday ? "sl-flex sl-h-6 sl-w-6 sl-items-center sl-justify-center sl-rounded-full sl-bg-stachelock-600 sl-font-semibold sl-text-white" : ""
+                ])
+              }, g(C(s.date)), 11, ss)
+            ]),
+            a("div", es, [
+              (o(!0), r(i, null, c(Array.from({ length: j.value }, (l, n) => n), (l) => (o(), r(i, {
+                key: `lane-${l}`
+              }, [
+                (o(!0), r(i, null, c(N(s.date, l), (n) => (o(), r("button", {
+                  key: n.id,
+                  class: "sl-group sl-w-full sl-block",
+                  onClick: (F) => M(n.id)
+                }, [
+                  a("div", ts, [
+                    a("div", {
+                      class: h(L(P)(s.date, n))
+                    }, [
+                      O(s.date, n) ? (o(), r("span", ns, g(W(s.date, n) || n.name), 1)) : m("", !0)
+                    ], 2),
+                    n.ratePlanColor ? (o(), r("span", {
+                      key: 0,
+                      class: "sl-absolute sl--top-1 sl--right-1 sl-inline-block sl-h-2.5 sl-w-2.5 sl-rounded-full sl-ring-1 sl-ring-white",
+                      style: _({ backgroundColor: n.ratePlanColor })
+                    }, null, 4)) : m("", !0)
+                  ])
+                ], 8, ls))), 128))
+              ], 64))), 128)),
+              S(s) > 0 ? (o(), r("div", rs, [
+                a("button", {
+                  class: "sl-text-[11px] sl-font-medium sl-text-stachelock-700 dark:sl-text-stachelock-400 hover:sl-text-stachelock-900 dark:hover:sl-text-stachelock-300 sl-underline",
+                  onClick: (l) => T(s)
+                }, " +" + g(S(s)) + " more ", 9, os)
+              ])) : m("", !0)
+            ])
+          ], 2))), 128))
+        ]),
+        a("div", as, [
+          (o(!0), r(i, null, c(w.value, (s) => (o(), r("button", {
+            key: s.date,
+            type: "button",
+            class: h([
+              s.isCurrentMonth ? "sl-bg-white dark:sl-bg-slate-900" : "sl-bg-gray-50 dark:sl-bg-slate-800",
+              (s.isSelected || s.isToday) && "sl-font-semibold",
+              s.isSelected && "sl-text-white",
+              !s.isSelected && s.isToday && "sl-text-stachelock-600 dark:sl-text-stachelock-400",
+              !s.isSelected && s.isCurrentMonth && !s.isToday && "sl-text-gray-800 dark:sl-text-slate-200",
+              !s.isSelected && !s.isCurrentMonth && !s.isToday && "sl-text-gray-500 dark:sl-text-slate-500",
+              "sl-flex sl-min-h-[3.5rem] sl-flex-col sl-items-center sl-py-2 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-z-10 sl-overflow-visible"
+            ]),
+            onClick: (l) => T(s),
+            onDblclick: (l) => H(s)
+          }, [
+            a("time", {
+              datetime: s.date,
+              class: h([
+                s.isSelected && "sl-flex sl-h-6 sl-w-6 sl-items-center sl-justify-center sl-rounded-full",
+                s.isSelected && s.isToday && "sl-bg-stachelock-600",
+                s.isSelected && !s.isToday && "sl-bg-gray-900 dark:sl-bg-slate-200 dark:sl-text-slate-900"
+              ])
+            }, g(C(s.date)), 11, cs),
+            a("span", ds, g(s.events?.length || 0) + " events", 1),
+            E(s).length > 0 ? (o(), r("ol", us, [
+              (o(!0), r(i, null, c(E(s), (l) => (o(), r("li", {
+                key: l.id,
+                class: "sl-overflow-visible"
+              }, [
+                a("button", {
+                  class: "sl-group sl-w-full sl-overflow-visible",
+                  onClick: X((n) => M(l.id), ["stop"])
+                }, [
+                  a("div", hs, [
+                    a("div", {
+                      class: h(L(B)(s.date, l))
+                    }, null, 2),
+                    l.ratePlanColor ? (o(), r("span", {
+                      key: 0,
+                      class: "sl-absolute sl--top-0.5 sl-right-0 sl-inline-block sl-h-1.5 sl-w-1.5 sl-rounded-full sl-ring-1 sl-ring-white sl-z-20",
+                      style: _({ backgroundColor: l.ratePlanColor })
+                    }, null, 4)) : m("", !0)
+                  ])
+                ], 8, gs)
+              ]))), 128))
+            ])) : m("", !0),
+            D(s).length > 0 ? (o(), r("div", ms, [
+              (o(!0), r(i, null, c(D(s), (l) => (o(), r("span", {
+                key: l.id,
+                class: "sl-h-1.5 sl-w-1.5 sl-rounded-full sl-flex-shrink-0",
+                style: _({ backgroundColor: l.ratePlanColor || "#9ca3af" })
+              }, null, 4))), 128))
+            ])) : m("", !0)
+          ], 42, is))), 128))
+        ])
+      ])
+    ]));
+  }
+});
+export {
+  ps as _
+};
+//# sourceMappingURL=MonthCalendar.vue_vue_type_style_index_0_lang-CnX3Ih0W.js.map

package/dist/MonthCalendar.vue_vue_type_style_index_0_lang-CnX3Ih0W.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthCalendar.vue_vue_type_style_index_0_lang-CnX3Ih0W.js","sources":["../src/components/calendars/MonthCalendar.vue"],"sourcesContent":["<!--\n  @component MonthCalendar\n  @description Full month calendar grid with multi-day event support.\n  \n  Features:\n  - 6-week calendar grid with day headers\n  - Multi-day event bars that span across days\n  - Event lane calculation for non-overlapping display\n  - \"+X more\" overflow indicators with click-to-expand\n  - Responsive mobile view with compact event dots\n  - Rate plan color indicators\n  - Day selection and double-click navigation\n  \n  @example\n  <MonthCalendar\n    :days=\"calendarDays\"\n    :events=\"events\"\n    @selectDay=\"handleDaySelect\"\n    @select:event=\"handleEventSelect\"\n    @doubleSelectDay=\"handleDoubleSelectDay\"\n  />\n-->\n<template>\n  <div class=\"sl-shadow sl-ring-1 sl-ring-black dark:sl-ring-slate-700 sl-ring-opacity-5 lg:sl-flex lg:sl-flex-auto lg:sl-flex-col\">\n    <!-- Day headers -->\n    <div class=\"sl-grid sl-grid-cols-7 sl-gap-px sl-border-b sl-border-gray-300 dark:sl-border-slate-600 sl-bg-gray-200 dark:sl-bg-slate-800 sl-text-center sl-text-xs sl-font-semibold sl-leading-6 sl-text-gray-700 dark:sl-text-slate-300 lg:sl-flex-none\">\n      <div v-for=\"dayName in dayHeaders\" :key=\"dayName\" class=\"sl-bg-white dark:sl-bg-slate-900 sl-py-2\">\n        {{ dayName }}\n      </div>\n    </div>\n    \n    <!-- Calendar grid -->\n    <div class=\"sl-flex sl-bg-gray-200 dark:sl-bg-slate-800 sl-text-xs sl-leading-6 sl-text-gray-700 dark:sl-text-slate-300 lg:sl-flex-auto\">\n      <!-- Desktop view -->\n      <div class=\"sl-hidden sl-w-full lg:sl-grid lg:sl-grid-cols-7 lg:sl-grid-rows-6 lg:sl-gap-px\">\n        <div \n          v-for=\"day in formattedDays\" \n          :key=\"day.date\"\n          :class=\"[\n            day.isCurrentMonth ? 'sl-bg-white dark:sl-bg-slate-900' : 'sl-bg-gray-50 dark:sl-bg-slate-800 sl-text-gray-500 dark:sl-text-slate-400',\n            'sl-relative sl-py-2 sl-min-w-0'\n          ]\"\n        >\n          <div class=\"sl-px-3\">\n            <time \n              :datetime=\"day.date\"\n              :class=\"[\n                day.isToday \n                  ? 'sl-flex sl-h-6 sl-w-6 sl-items-center sl-justify-center sl-rounded-full sl-bg-stachelock-600 sl-font-semibold sl-text-white' \n                  : ''\n              ]\"\n            >\n              {{ getDayNumber(day.date) }}\n            </time>\n          </div>\n          \n          <!-- Event bars with lanes -->\n          <div class=\"sl-mt-2 sl-space-y-1 sl-min-h-0\">\n            <template v-for=\"lane in Array.from({ length: maxLanes }, (_, i) => i)\" :key=\"`lane-${lane}`\">\n              <button \n                v-for=\"event in eventsForDayAndLane(day.date, lane)\" \n                :key=\"event.id\"\n                class=\"sl-group sl-w-full sl-block\"\n                @click=\"handleEventClick(event.id)\"\n              >\n                <div class=\"sl-relative\">\n                  <div :class=\"barClass(day.date, event)\">\n                    <span v-if=\"showLabel(day.date, event)\" class=\"sl-truncate sl-block\">\n                      {{ labelFor(day.date, event) || event.name }}\n                    </span>\n                  </div>\n                  <span \n                    v-if=\"event.ratePlanColor\"\n                    class=\"sl-absolute sl--top-1 sl--right-1 sl-inline-block sl-h-2.5 sl-w-2.5 sl-rounded-full sl-ring-1 sl-ring-white\"\n                    :style=\"{ backgroundColor: event.ratePlanColor }\"\n                  />\n                </div>\n              </button>\n            </template>\n            \n            <!-- Overflow indicator -->\n            <div v-if=\"overflowCount(day) > 0\" class=\"sl-mt-1 sl-px-3\">\n              <button \n                class=\"sl-text-[11px] sl-font-medium sl-text-stachelock-700 dark:sl-text-stachelock-400 hover:sl-text-stachelock-900 dark:hover:sl-text-stachelock-300 sl-underline\"\n                @click=\"handleDayClick(day)\"\n              >\n                +{{ overflowCount(day) }} more\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Mobile view -->\n      <div class=\"sl-isolate sl-grid sl-w-full sl-grid-cols-7 sl-grid-rows-6 sl-gap-px lg:sl-hidden\">\n        <button \n          v-for=\"day in formattedDays\" \n          :key=\"day.date\"\n          type=\"button\"\n        :class=\"[\n            day.isCurrentMonth ? 'sl-bg-white dark:sl-bg-slate-900' : 'sl-bg-gray-50 dark:sl-bg-slate-800',\n          (day.isSelected || day.isToday) && 'sl-font-semibold',\n          day.isSelected && 'sl-text-white',\n            !day.isSelected && day.isToday && 'sl-text-stachelock-600 dark:sl-text-stachelock-400',\n            !day.isSelected && day.isCurrentMonth && !day.isToday && 'sl-text-gray-800 dark:sl-text-slate-200',\n            !day.isSelected && !day.isCurrentMonth && !day.isToday && 'sl-text-gray-500 dark:sl-text-slate-500',\n            'sl-flex sl-min-h-[3.5rem] sl-flex-col sl-items-center sl-py-2 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-z-10 sl-overflow-visible'\n        ]\"\n          @click=\"handleDayClick(day)\"\n          @dblclick=\"handleDayDoubleClick(day)\"\n        >\n          <time \n            :datetime=\"day.date\"\n            :class=\"[\n              day.isSelected && 'sl-flex sl-h-6 sl-w-6 sl-items-center sl-justify-center sl-rounded-full',\n              day.isSelected && day.isToday && 'sl-bg-stachelock-600',\n              day.isSelected && !day.isToday && 'sl-bg-gray-900 dark:sl-bg-slate-200 dark:sl-text-slate-900'\n            ]\"\n          >\n            {{ getDayNumber(day.date) }}\n          </time>\n          <span class=\"sl-sr-only\">{{ day.events?.length || 0 }} events</span>\n          \n          <!-- Multi-day event bars (compact) -->\n          <ol v-if=\"multiDayEventsForDay(day).length > 0\" class=\"sl-mt-auto sl-w-full sl-space-y-0.5 sl-overflow-visible\">\n            <li v-for=\"event in multiDayEventsForDay(day)\" :key=\"event.id\" class=\"sl-overflow-visible\">\n              <button class=\"sl-group sl-w-full sl-overflow-visible\" @click.stop=\"handleEventClick(event.id)\">\n                <div class=\"sl-relative sl-overflow-visible\">\n                  <div :class=\"barClassCompact(day.date, event)\" />\n                  <span \n                    v-if=\"event.ratePlanColor\" \n                    class=\"sl-absolute sl--top-0.5 sl-right-0 sl-inline-block sl-h-1.5 sl-w-1.5 sl-rounded-full sl-ring-1 sl-ring-white sl-z-20\" \n                    :style=\"{ backgroundColor: event.ratePlanColor }\"\n                  />\n                </div>\n              </button>\n            </li>\n          </ol>\n          \n          <!-- Single-day event dots -->\n          <div v-if=\"singleDayEventsForDay(day).length > 0\" class=\"sl-mt-auto sl-flex sl-flex-wrap sl-justify-center sl-gap-0.5 sl-overflow-visible\">\n            <span \n              v-for=\"event in singleDayEventsForDay(day)\" \n              :key=\"event.id\"\n              class=\"sl-h-1.5 sl-w-1.5 sl-rounded-full sl-flex-shrink-0\"\n              :style=\"{ backgroundColor: event.ratePlanColor || '#9ca3af' }\"\n            />\n          </div>\n      </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { CalendarDay, ListEvent } from '@/utils/calendar';\nimport { formatTime } from '@/utils/calendar';\nimport { useEventSegments, calculateEventLanes } from '@/composables/useEventSegments';\n\ninterface Props {\n  /** Array of calendar days to display */\n  days: CalendarDay[];\n  /** Array of events (optional, can also be attached to days) */\n  events?: ListEvent[];\n  /** Week starts on: 0 = Sunday, 1 = Monday */\n  weekStartsOn?: 0 | 1;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  events: () => [],\n  weekStartsOn: 0,\n});\n\nconst emit = defineEmits<{\n  (e: 'selectDay', day: CalendarDay): void;\n  (e: 'select:event', eventId: string | number): void;\n  (e: 'doubleSelectDay', day: CalendarDay): void;\n}>();\n\n// Day headers based on week start\nconst dayHeaders = computed(() => {\n  const sundayFirst = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n  const mondayFirst = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];\n  return props.weekStartsOn === 1 ? mondayFirst : sundayFirst;\n});\n\n// Get event segments composable\nconst { getSegment, barClass, barClassCompact } = useEventSegments();\n\n// Maximum visible events per cell before showing \"+X more\"\nconst MAX_VISIBLE_BARS = 3;\n\n// Collect all events across all days (de-duped)\nconst allEvents = computed(() => {\n  const events: ListEvent[] = [];\n  const seen = new Set<string | number>();\n  \n  // Combine prop events with day-attached events\n  const allSourceEvents = [...(props.events || [])];\n  props.days.forEach((day) => {\n    day.events?.forEach((event) => {\n      allSourceEvents.push(event);\n    });\n  });\n  \n  allSourceEvents.forEach((event) => {\n    const eventId = event.id || String(event.name);\n    if (!seen.has(eventId)) {\n      events.push(event);\n      seen.add(eventId);\n    }\n  });\n  \n  return events;\n});\n\n// Day keys for lane calculation\nconst dayKeys = computed(() => props.days.map((d) => d.date));\n\n// Calculate event lanes\nconst eventLanes = computed(() => calculateEventLanes(dayKeys.value, allEvents.value));\n\n// Maximum number of lanes needed\nconst maxLanes = computed(() => {\n  if (eventLanes.value.size === 0) return 0;\n  const lanesArray = Array.from(eventLanes.value.values());\n  return Math.max(...lanesArray) + 1;\n});\n\n// Format days with additional computed properties\nconst formattedDays = computed(() =>\n  props.days.map(day => ({\n    ...day,\n    id: day.id || day.date,\n  }))\n);\n\n// Get day number from date string\nconst getDayNumber = (dateStr: string): string => {\n  return (dateStr.split('-').pop() || '').replace(/^0/, '');\n};\n\n// Get events for a specific day\nconst getEventsForDay = (day: CalendarDay): ListEvent[] => {\n  // First check if events are attached to the day\n  if (day.events && day.events.length > 0) {\n    return day.events;\n  }\n  \n  // Otherwise, filter from props.events\n  return allEvents.value.filter(event => {\n    const segment = getSegment(day.date, event);\n    return segment !== 'none';\n  });\n};\n\n// Get events for a specific day and lane\nconst eventsForDayAndLane = (dayKey: string, lane: number): ListEvent[] => {\n  const day = props.days.find((d) => d.date === dayKey);\n  if (!day) return [];\n  \n  const dayEvents = getEventsForDay(day);\n  \n  const eventsAtLane = dayEvents.filter((event) => {\n    const eventId = event.id || String(event.name);\n    const eventLane = eventLanes.value.get(eventId);\n    return eventLane === lane;\n  });\n\n  // Limit visible events per day\n  const totalVisibleInDay = Math.min(MAX_VISIBLE_BARS, dayEvents.length);\n  if (lane < totalVisibleInDay) return eventsAtLane;\n  return [];\n};\n\n// Calculate overflow count for a day\nconst overflowCount = (day: CalendarDay): number => {\n  const dayEvents = getEventsForDay(day);\n  return dayEvents.length > MAX_VISIBLE_BARS ? dayEvents.length - MAX_VISIBLE_BARS : 0;\n};\n\n// Should show label for this segment\nconst showLabel = (dayKey: string, event: ListEvent): boolean => {\n  const seg = getSegment(dayKey, event);\n  return seg === 'start' || seg === 'end' || seg === 'single';\n};\n\n// Label content for event\nconst labelFor = (dayKey: string, event: ListEvent): string => {\n  const seg = getSegment(dayKey, event);\n  const startIso = event.startTime?.dateTime || event.datetime;\n  const endIso = event.endTime?.dateTime || event.datetime;\n  \n  if (seg === 'start' && startIso) return `Start ${formatTime(startIso)}`;\n  if (seg === 'end' && endIso) return `End ${formatTime(endIso)}`;\n  return String(event.name || '');\n};\n\n// Get multi-day events for mobile view\nconst multiDayEventsForDay = (day: CalendarDay): ListEvent[] => {\n  const dayEvents = getEventsForDay(day);\n  return dayEvents.filter((event) => {\n    const seg = getSegment(day.date, event);\n    return seg === 'start' || seg === 'middle' || seg === 'end';\n  });\n};\n\n// Get single-day events for mobile view\nconst singleDayEventsForDay = (day: CalendarDay): ListEvent[] => {\n  const dayEvents = getEventsForDay(day);\n  return dayEvents.filter((event) => getSegment(day.date, event) === 'single');\n};\n\n// Event handlers\nconst handleDayClick = (day: CalendarDay) => {\n  emit('selectDay', day);\n};\n\nconst handleDayDoubleClick = (day: CalendarDay) => {\n  emit('doubleSelectDay', day);\n};\n\nconst handleEventClick = (eventId: string | number) => {\n  emit('select:event', eventId);\n};\n</script>\n\n<style>\n/* Multi-day event bar extensions to bridge grid gaps */\n.event-bar-start {\n  width: calc(100% + 1px) !important;\n}\n.event-bar-middle {\n  width: calc(100% + 2px) !important;\n  margin-left: -1px !important;\n}\n.event-bar-end {\n  width: calc(100% + 1px) !important;\n  margin-left: -1px !important;\n}\n</style>\n"],"names":["MAX_VISIBLE_BARS","props","__props","emit","__emit","dayHeaders","computed","sundayFirst","mondayFirst","getSegment","barClass","barClassCompact","useEventSegments","allEvents","events","seen","allSourceEvents","day","event","eventId","dayKeys","d","eventLanes","calculateEventLanes","maxLanes","lanesArray","formattedDays","getDayNumber","dateStr","getEventsForDay","eventsForDayAndLane","dayKey","lane","dayEvents","eventsAtLane","totalVisibleInDay","overflowCount","showLabel","seg","labelFor","startIso","endIso","formatTime","multiDayEventsForDay","singleDayEventsForDay","handleDayClick","handleDayDoubleClick","handleEventClick","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_Fragment","_renderList","dayName","_hoisted_3","_hoisted_4","_normalizeClass","_hoisted_5","_hoisted_6","_hoisted_7","_","i","$event","_hoisted_9","_unref","_hoisted_10","_toDisplayString","_normalizeStyle","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_15","_hoisted_16","_hoisted_17","_withModifiers","_hoisted_19","_hoisted_20"],"mappings":"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"}

package/dist/NotificationToast.vue_vue_type_script_setup_true_lang-Cm5RsC7C.js

@@ -0,0 +1,162 @@
+import { defineComponent as N, computed as n, createBlock as g, openBlock as r, unref as c, withCtx as u, createElementVNode as l, normalizeStyle as A, normalizeClass as i, createVNode as p, createElementBlock as h, createCommentVNode as m, resolveDynamicComponent as O, toDisplayString as y } from "vue";
+import { r as o, a as V } from "./InformationCircleIcon-B322GNIt.js";
+import { r as x } from "./ExclamationCircleIcon-DjxYk45_.js";
+import { r as D } from "./ExclamationTriangleIcon-BNKYmV_J.js";
+import { r as E } from "./XMarkIcon-DNvCkiOy.js";
+import { S as T, h as I } from "./transition-_rPfnoET.js";
+const L = { class: "sl-p-4" }, R = { class: "sl-flex sl-items-start" }, j = { class: "sl-ml-3 sl-w-0 sl-flex-1 sl-pt-0.5" }, M = /* @__PURE__ */ N({
+  __name: "NotificationToast",
+  props: {
+    notification: {}
+  },
+  emits: ["close"],
+  setup(v, { emit: b }) {
+    const t = v, w = b, k = () => {
+      w("close", t.notification);
+    }, C = () => {
+    }, _ = n(() => {
+      const s = {
+        primary: "sl-bg-stachelock-600 sl-text-white",
+        secondary: "sl-bg-gray-600 sl-text-white",
+        dark: "sl-bg-gray-800 sl-text-white",
+        light: "sl-bg-white sl-text-gray-800 sl-border sl-border-gray-200",
+        warning: "sl-bg-amber-500 sl-text-white",
+        danger: "sl-bg-red-500 sl-text-white",
+        success: "sl-bg-emerald-500 sl-text-white",
+        info: "sl-bg-blue-500 sl-text-white",
+        ghost: "sl-bg-white sl-text-gray-800 sl-border sl-border-gray-200"
+      };
+      return s[t.notification.theme] || s.primary;
+    }), f = n(() => {
+      const s = t.notification.theme;
+      return ["light", "ghost"].includes(s) ? "sl-text-gray-800" : "sl-text-white";
+    }), $ = n(() => {
+      const s = {
+        primary: "focus:sl-ring-stachelock-400",
+        secondary: "focus:sl-ring-gray-400",
+        dark: "focus:sl-ring-gray-400",
+        light: "focus:sl-ring-gray-300",
+        warning: "focus:sl-ring-amber-300",
+        danger: "focus:sl-ring-red-300",
+        success: "focus:sl-ring-emerald-300",
+        info: "focus:sl-ring-blue-300",
+        ghost: "focus:sl-ring-gray-300"
+      };
+      return s[t.notification.theme] || s.primary;
+    }), d = n(() => {
+      if (t.notification.icon)
+        return t.notification.icon;
+      const s = t.notification.theme, e = {
+        primary: o,
+        secondary: o,
+        dark: x,
+        light: o,
+        warning: D,
+        danger: x,
+        success: V,
+        info: o,
+        ghost: o
+      };
+      return e[s] || e.primary;
+    }), S = n(() => {
+      const s = t.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"
+      }[s] || "sl-items-end";
+    }), z = n(() => {
+      const s = t.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"
+      }[s] || "sl-items-end";
+    }), B = n(() => {
+      const s = t.notification.position, e = t.notification.yOffset, a = {
+        zIndex: 9999
+      };
+      return ["tl", "tr", "tc"].includes(s) ? a.marginTop = `${e}px` : a.marginBottom = `${e}px`, a;
+    });
+    return (s, e) => (r(), g(c(T), {
+      appear: "",
+      show: s.notification.isOpen,
+      as: "template",
+      onAfterLeave: C
+    }, {
+      default: u(() => [
+        l("div", {
+          "aria-live": "assertive",
+          class: i([
+            "sl-pointer-events-none sl-fixed sl-inset-0 sl-flex sl-px-4 sl-py-6 sm:sl-p-6",
+            z.value
+          ]),
+          style: A(B.value)
+        }, [
+          l("div", {
+            class: i(["sl-flex sl-w-full sl-flex-col sl-items-center sl-space-y-4", S.value])
+          }, [
+            p(c(I), {
+              as: "template",
+              enter: "sl-duration-300 sl-ease-out sl-transform",
+              "enter-from": "sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:sl-translate-x-4",
+              "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: u(() => [
+                s.notification.isOpen ? (r(), h("div", {
+                  key: 0,
+                  class: i([[_.value], "sl-pointer-events-auto sl-w-full sl-max-w-sm sl-overflow-hidden sl-rounded-lg sl-shadow-lg sl-ring-1 sl-ring-black sl-ring-opacity-5"])
+                }, [
+                  l("div", L, [
+                    l("div", R, [
+                      d.value ? (r(), g(O(d.value), {
+                        key: 0,
+                        class: "sl-h-6 sl-w-6 sl-flex-shrink-0",
+                        "aria-hidden": "true"
+                      })) : m("", !0),
+                      l("div", j, [
+                        l("p", {
+                          class: i(["sl-text-sm sl-font-medium", f.value])
+                        }, y(s.notification.title), 3),
+                        s.notification.message ? (r(), h("p", {
+                          key: 0,
+                          class: i(["sl-mt-1 sl-text-sm sl-opacity-90", f.value])
+                        }, y(s.notification.message), 3)) : m("", !0)
+                      ]),
+                      l("button", {
+                        type: "button",
+                        onClick: k,
+                        class: i(["sl-ml-4 sl-inline-flex sl-rounded-md sl-text-current sl-opacity-70 hover:sl-opacity-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2", $.value])
+                      }, [
+                        e[0] || (e[0] = l("span", { class: "sl-sr-only" }, "Close", -1)),
+                        p(c(E), {
+                          class: "sl-h-5 sl-w-5",
+                          "aria-hidden": "true"
+                        })
+                      ], 2)
+                    ])
+                  ])
+                ], 2)) : m("", !0)
+              ]),
+              _: 1
+            })
+          ], 2)
+        ], 6)
+      ]),
+      _: 1
+    }, 8, ["show"]));
+  }
+});
+export {
+  M as _
+};
+//# sourceMappingURL=NotificationToast.vue_vue_type_script_setup_true_lang-Cm5RsC7C.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationToast.vue_vue_type_script_setup_true_lang-Cm5RsC7C.js","sources":["../src/components/notifications/NotificationToast.vue"],"sourcesContent":["<!--\n  @component NotificationToast\n  @description Individual notification toast with animations and theming\n  \n  Displays a single notification with icon, title, message, and close button.\n  Supports multiple themes and positions with 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  \n  @example\n  <NotificationToast \n    :notification=\"notification\" \n    @close=\"handleClose\" \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=\"sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:sl-translate-x-4\"\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=\"[themeClass]\"\n            class=\"sl-pointer-events-auto sl-w-full sl-max-w-sm sl-overflow-hidden sl-rounded-lg sl-shadow-lg sl-ring-1 sl-ring-black sl-ring-opacity-5\"\n          >\n            <div class=\"sl-p-4\">\n              <div class=\"sl-flex sl-items-start\">\n                <component \n                  v-if=\"iconComponent\"\n                  :is=\"iconComponent\" \n                  class=\"sl-h-6 sl-w-6 sl-flex-shrink-0\" \n                  aria-hidden=\"true\" \n                />\n                <div class=\"sl-ml-3 sl-w-0 sl-flex-1 sl-pt-0.5\">\n                  <p class=\"sl-text-sm sl-font-medium\" :class=\"textClass\">\n                    {{ notification.title }}\n                  </p>\n                  <p \n                    v-if=\"notification.message\" \n                    class=\"sl-mt-1 sl-text-sm sl-opacity-90\" \n                    :class=\"textClass\"\n                  >\n                    {{ notification.message }}\n                  </p>\n                </div>\n                <button \n                  type=\"button\" \n                  @click=\"handleClose\"\n                  class=\"sl-ml-4 sl-inline-flex sl-rounded-md sl-text-current sl-opacity-70 hover:sl-opacity-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2\"\n                  :class=\"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          </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, and animations.\n * Used internally by NotificationContainer but can be used standalone.\n */\nimport { computed } 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 } from '../../composables/useNotifications';\n\nconst props = defineProps<{ \n  notification: NotificationState \n}>();\n\nconst emit = defineEmits<{\n  close: [notification: NotificationState];\n}>();\n\nconst handleClose = () => {\n  emit('close', props.notification);\n};\n\nconst onAfterLeave = () => {\n  // Animation cleanup callback\n};\n\nconst themeClass = computed(() => {\n  const themes: Record<string, string> = {\n    primary: 'sl-bg-stachelock-600 sl-text-white',\n    secondary: 'sl-bg-gray-600 sl-text-white',\n    dark: 'sl-bg-gray-800 sl-text-white',\n    light: 'sl-bg-white sl-text-gray-800 sl-border sl-border-gray-200',\n    warning: 'sl-bg-amber-500 sl-text-white',\n    danger: 'sl-bg-red-500 sl-text-white',\n    success: 'sl-bg-emerald-500 sl-text-white',\n    info: 'sl-bg-blue-500 sl-text-white',\n    ghost: 'sl-bg-white sl-text-gray-800 sl-border sl-border-gray-200',\n  };\n  return themes[props.notification.theme] || themes.primary;\n});\n\nconst textClass = computed(() => {\n  const theme = props.notification.theme;\n  return ['light', 'ghost'].includes(theme) ? 'sl-text-gray-800' : 'sl-text-white';\n});\n\nconst focusRingClass = computed(() => {\n  const rings: Record<string, string> = {\n    primary: 'focus:sl-ring-stachelock-400',\n    secondary: 'focus:sl-ring-gray-400',\n    dark: 'focus:sl-ring-gray-400',\n    light: 'focus:sl-ring-gray-300',\n    warning: 'focus:sl-ring-amber-300',\n    danger: 'focus:sl-ring-red-300',\n    success: 'focus:sl-ring-emerald-300',\n    info: 'focus:sl-ring-blue-300',\n    ghost: 'focus:sl-ring-gray-300',\n  };\n  return rings[props.notification.theme] || rings.primary;\n});\n\nconst iconComponent = computed(() => {\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, typeof CheckCircleIcon> = {\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\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\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\nconst containerStyle = computed(() => {\n  const position = props.notification.position;\n  const offset = props.notification.yOffset;\n  \n  const styles: Record<string, string | number> = {\n    zIndex: 9999,\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\n"],"names":["props","__props","emit","__emit","handleClose","onAfterLeave","themeClass","computed","themes","textClass","theme","focusRingClass","rings","iconComponent","icons","InformationCircleIcon","ExclamationCircleIcon","ExclamationTriangleIcon","CheckCircleIcon","horizontalAlignClass","position","verticalAlignClass","containerStyle","offset","styles","_createBlock","_unref","TransitionRoot","notification","_createElementVNode","_normalizeClass","_createVNode","TransitionChild","_createElementBlock","_hoisted_1","_hoisted_2","_openBlock","_resolveDynamicComponent","_hoisted_3","_cache","XMarkIcon"],"mappings":"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"}