@stachelock/ui 0.1.1 → 0.1.3

package/dist/UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js

@@ -0,0 +1,108 @@
+import { defineComponent as b, ref as _, computed as r, createElementBlock as i, openBlock as u, normalizeClass as c, createCommentVNode as p, createElementVNode as z, toDisplayString as P } from "vue";
+const C = {
+  key: 0,
+  class: "sl-h-full sl-w-full"
+}, U = ["src", "alt"], E = /* @__PURE__ */ b({
+  __name: "UiAvatar",
+  props: {
+    data: {},
+    name: {},
+    imageUrl: {},
+    size: { default: "md" },
+    color: { default: "sl-bg-stachelock-600" },
+    ring: { default: "sl-ring-white" },
+    rounded: { default: "sl-rounded-full" },
+    fallbackInitials: { default: "?" },
+    fallbackIcon: {},
+    imagePath: { default: "image.url" },
+    namePath: { default: "name" }
+  },
+  setup(v) {
+    const e = v, o = _(!1), k = () => {
+      o.value = !0;
+    }, f = {
+      xs: "sl-h-6 sl-w-6",
+      sm: "sl-h-8 sl-w-8",
+      md: "sl-h-12 sl-w-12",
+      lg: "sl-h-16 sl-w-16",
+      xl: "sl-h-20 sl-w-20",
+      "2xl": "sl-h-24 sl-w-24"
+    }, w = r(() => typeof e.size == "number" ? `sl-h-${e.size} sl-w-${e.size}` : f[e.size] || f.md), n = (l, t) => {
+      if (!l) return;
+      const a = Array.isArray(t) ? t : t.split(".");
+      let s = l;
+      for (const g of a)
+        if (s && typeof s == "object" && g in s)
+          s = s[g];
+        else
+          return;
+      return s;
+    }, m = r(() => {
+      if (e.imageUrl) return e.imageUrl;
+      if (e.data && e.imagePath) {
+        const l = n(e.data, e.imagePath);
+        if (l) return l;
+      }
+      if (e.data) {
+        const l = [
+          "profile_image.url",
+          "image.url",
+          "avatar.url",
+          "photo.url",
+          "picture.url"
+        ];
+        for (const t of l) {
+          const a = n(e.data, t);
+          if (a) return a;
+        }
+      }
+      return null;
+    }), d = r(() => {
+      if (e.name) return e.name;
+      if (e.data && e.namePath) {
+        const l = n(e.data, e.namePath);
+        if (l) return l;
+      }
+      if (e.data) {
+        const l = [
+          "name",
+          "display_name",
+          "full_name",
+          "username",
+          "title"
+        ];
+        for (const t of l) {
+          const a = n(e.data, t);
+          if (a) return a;
+        }
+      }
+      return "";
+    }), h = r(() => !!m.value), y = r(() => {
+      const l = d.value;
+      if (!l || l.trim() === "")
+        return e.fallbackInitials;
+      const t = l.split(" ").filter(Boolean);
+      return t.length === 0 ? e.fallbackInitials : t.length === 1 ? t[0][0].toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
+    });
+    return (l, t) => (u(), i("div", {
+      class: c(["sl-relative sl-inline-block", [w.value, l.ring, l.rounded]])
+    }, [
+      h.value && !o.value ? (u(), i("div", C, [
+        z("img", {
+          src: m.value,
+          alt: d.value,
+          class: c(["sl-h-full sl-w-full sl-object-cover", l.rounded]),
+          onError: k
+        }, null, 42, U)
+      ])) : p("", !0),
+      !h.value || o.value ? (u(), i("div", {
+        key: 1,
+        class: c(["sl-h-full sl-w-full sl-flex sl-items-center sl-justify-center sl-font-semibold sl-text-white", [l.color, l.rounded]])
+      }, P(y.value), 3)) : p("", !0)
+    ], 2));
+  }
+});
+export {
+  E as _
+};
+//# sourceMappingURL=UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js.map

package/dist/UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js","sources":["../src/components/UiAvatar.vue"],"sourcesContent":["<template>\n  <div class=\"sl-relative sl-inline-block\" :class=\"[sizeClass, ring, rounded]\">\n    <div v-if=\"hasImage && !imageError\" class=\"sl-h-full sl-w-full\">\n      <img\n        :src=\"imageUrl\"\n        :alt=\"displayName\"\n        class=\"sl-h-full sl-w-full sl-object-cover\"\n        :class=\"rounded\"\n        @error=\"handleImageError\"\n      />\n    </div>\n    <div v-if=\"!hasImage || imageError\" class=\"sl-h-full sl-w-full sl-flex sl-items-center sl-justify-center sl-font-semibold sl-text-white\"\n      :class=\"[color, rounded]\">\n      {{ initials }}\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\n\ninterface AvatarProps {\n  // Flexible data object - can be any object with optional name and image properties\n  data?: Record<string, any>;\n  \n  // Direct properties for simple use cases\n  name?: string;\n  imageUrl?: string;\n  \n  // Size options\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number;\n  \n  // Styling options\n  color?: string;\n  ring?: string;\n  rounded?: string;\n  \n  // Image fallback options\n  fallbackInitials?: string;\n  fallbackIcon?: string;\n  \n  // Custom image path keys for different data structures\n  imagePath?: string | string[]; // e.g., 'profile_image.url' or ['profile_image', 'url']\n  namePath?: string | string[];  // e.g., 'display_name' or ['user', 'profile', 'name']\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  size: 'md',\n  color: 'sl-bg-stachelock-600',\n  ring: 'sl-ring-white',\n  rounded: 'sl-rounded-full',\n  fallbackInitials: '?',\n  imagePath: 'image.url',\n  namePath: 'name'\n});\n\nconst imageError = ref(false);\n\nconst handleImageError = () => {\n  imageError.value = true;\n};\n\n// Size classes mapping\nconst sizeClasses: Record<string, string> = {\n  xs: 'sl-h-6 sl-w-6',\n  sm: 'sl-h-8 sl-w-8',\n  md: 'sl-h-12 sl-w-12',\n  lg: 'sl-h-16 sl-w-16',\n  xl: 'sl-h-20 sl-w-20',\n  '2xl': 'sl-h-24 sl-w-24',\n};\n\nconst sizeClass = computed(() => {\n  if (typeof props.size === 'number') {\n    return `sl-h-${props.size} sl-w-${props.size}`;\n  }\n  return sizeClasses[props.size] || sizeClasses.md;\n});\n\n// Helper function to get nested object values\nconst getNestedValue = (obj: any, path: string | string[]): any => {\n  if (!obj) return undefined;\n  \n  const keys = Array.isArray(path) ? path : path.split('.');\n  let current = obj;\n  \n  for (const key of keys) {\n    if (current && typeof current === 'object' && key in current) {\n      current = current[key];\n    } else {\n      return undefined;\n    }\n  }\n  \n  return current;\n};\n\n// Get image URL from various sources\nconst imageUrl = computed(() => {\n  // Direct imageUrl prop takes precedence\n  if (props.imageUrl) return props.imageUrl;\n  \n  // Try to get from data object using imagePath\n  if (props.data && props.imagePath) {\n    const url = getNestedValue(props.data, props.imagePath);\n    if (url) return url;\n  }\n  \n  // Fallback to common image paths if no specific path provided\n  if (props.data) {\n    const commonPaths = [\n      'profile_image.url',\n      'image.url',\n      'avatar.url',\n      'photo.url',\n      'picture.url'\n    ];\n    \n    for (const path of commonPaths) {\n      const url = getNestedValue(props.data, path);\n      if (url) return url;\n    }\n  }\n  \n  return null;\n});\n\n// Get display name from various sources\nconst displayName = computed(() => {\n  // Direct name prop takes precedence\n  if (props.name) return props.name;\n  \n  // Try to get from data object using namePath\n  if (props.data && props.namePath) {\n    const name = getNestedValue(props.data, props.namePath);\n    if (name) return name;\n  }\n  \n  // Fallback to common name paths if no specific path provided\n  if (props.data) {\n    const commonPaths = [\n      'name',\n      'display_name',\n      'full_name',\n      'username',\n      'title'\n    ];\n    \n    for (const path of commonPaths) {\n      const name = getNestedValue(props.data, path);\n      if (name) return name;\n    }\n  }\n  \n  return '';\n});\n\nconst hasImage = computed(() => {\n  return !!imageUrl.value;\n});\n\nconst initials = computed(() => {\n  const name = displayName.value;\n  \n  if (!name || name.trim() === '') {\n    return props.fallbackInitials;\n  }\n\n  const names = name.split(' ').filter(Boolean);\n  if (names.length === 0) {\n    return props.fallbackInitials;\n  }\n\n  if (names.length === 1) {\n    return names[0][0].toUpperCase();\n  } else {\n    return (names[0][0] + names[names.length - 1][0]).toUpperCase();\n  }\n});\n</script>\n\n<style scoped>\n</style>\n"],"names":["props","__props","imageError","ref","handleImageError","sizeClasses","sizeClass","computed","getNestedValue","obj","path","keys","current","key","imageUrl","url","commonPaths","displayName","name","hasImage","initials","names","_createElementBlock","ring","rounded","_openBlock","_hoisted_1","_createElementVNode","_normalizeClass","color"],"mappings":"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"}

package/dist/UiBreadcrumb.vue_vue_type_script_setup_true_lang-CMH47CoK.js

@@ -0,0 +1,68 @@
+import { defineComponent as g, ref as m, computed as x, watchEffect as v, createElementBlock as l, openBlock as a, createElementVNode as u, Fragment as B, renderList as P, createBlock as k, createCommentVNode as C, createVNode as y, unref as w, withCtx as N, createTextVNode as E, toDisplayString as V } from "vue";
+import { u as R, a as S, _ as D } from "./UiNavLink.vue_vue_type_script_setup_true_lang-Bz5oiCCk.js";
+import { ChevronRightIcon as L } from "@heroicons/vue/20/solid";
+const U = {
+  class: "sl-hidden sm:sl-flex",
+  "aria-label": "Breadcrumb"
+}, j = {
+  role: "list",
+  class: "sl-flex sl-items-center sl-space-x-4"
+}, A = { class: "sl-flex sl-items-center" }, q = /* @__PURE__ */ g({
+  __name: "UiBreadcrumb",
+  setup(F) {
+    const n = m([]), h = R(), f = S(), c = m(""), p = x(() => n.value.map((s) => {
+      const t = s.name.trim();
+      return {
+        ...s,
+        name: t.length > 12 ? t.slice(0, 12) + "..." : t
+      };
+    })), d = async () => {
+      const s = h.path;
+      c.value = s;
+      const t = s.split("/").filter(Boolean), e = [];
+      for (const [o, r] of t.entries()) {
+        let i;
+        i = r.charAt(0).toUpperCase() + r.slice(1).toLowerCase(), e.push({
+          name: i,
+          fullPath: "/" + t.slice(0, o + 1).join("/")
+        });
+      }
+      n.value = e;
+    }, _ = (s, t) => {
+      const e = f.resolve(s.fullPath), o = e.matched.some((r) => r.meta?.isErrorPage);
+      (!e || e.matched.length === 0 || o) && (t.preventDefault(), t.stopPropagation(), console.warn("Breadcrumb route not found or is an error page:", s.fullPath));
+    };
+    return v(() => {
+      d();
+    }), (s, t) => (a(), l("nav", U, [
+      u("ol", j, [
+        (a(!0), l(B, null, P(p.value, (e, o) => (a(), l("li", {
+          key: e.fullPath
+        }, [
+          u("div", A, [
+            o !== 0 ? (a(), k(w(L), {
+              key: 0,
+              class: "sl-h-5 sl-w-5 sl-flex-shrink-0 sl-text-gray-400 sl-mr-3",
+              "aria-hidden": "true"
+            })) : C("", !0),
+            y(D, {
+              to: e.fullPath,
+              onClick: (r) => _(e, r),
+              "aria-current": e.fullPath === c.value ? "page" : void 0,
+              class: "sl-text-sm sl-font-medium sl-text-gray-500 hover:sl-text-gray-700 sl-truncate sl-overflow-ellipsis"
+            }, {
+              default: N(() => [
+                E(V(e.name), 1)
+              ]),
+              _: 2
+            }, 1032, ["to", "onClick", "aria-current"])
+          ])
+        ]))), 128))
+      ])
+    ]));
+  }
+});
+export {
+  q as _
+};
+//# sourceMappingURL=UiBreadcrumb.vue_vue_type_script_setup_true_lang-CMH47CoK.js.map

package/dist/UiBreadcrumb.vue_vue_type_script_setup_true_lang-CMH47CoK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiBreadcrumb.vue_vue_type_script_setup_true_lang-CMH47CoK.js","sources":["../src/components/UiBreadcrumb.vue"],"sourcesContent":["<template>\n  <nav class=\"sl-hidden sm:sl-flex\" aria-label=\"Breadcrumb\">\n    <ol role=\"list\" class=\"sl-flex sl-items-center sl-space-x-4\">\n      <li v-for=\"(breadcrumb, index) in processedBreadcrumbs\" :key=\"breadcrumb.fullPath\">\n        <div class=\"sl-flex sl-items-center\">\n          <ChevronRightIcon v-if=\"index !== 0\" class=\"sl-h-5 sl-w-5 sl-flex-shrink-0 sl-text-gray-400 sl-mr-3\" aria-hidden=\"true\" />\n          <!-- Make sure UiNavLink forwards the native click event -->\n          <UiNavLink :to=\"breadcrumb.fullPath\" @click=\"(event) => handleBreadcrumbClick(breadcrumb, event)\"\n            :aria-current=\"breadcrumb.fullPath === currentPath ? 'page' : undefined\"\n            class=\"sl-text-sm sl-font-medium sl-text-gray-500 hover:sl-text-gray-700 sl-truncate sl-overflow-ellipsis\">\n            {{ breadcrumb.name }}\n          </UiNavLink>\n        </div>\n      </li>\n    </ol>\n  </nav>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watchEffect, computed } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport UiNavLink from './UiNavLink.vue';\nimport { ChevronRightIcon } from '@heroicons/vue/20/solid';\n\ninterface BreadcrumbItem {\n  name: string;\n  fullPath: string;\n}\n\ninterface RouteMeta {\n  isErrorPage?: boolean;\n}\n\nconst breadcrumbs = ref<BreadcrumbItem[]>([]);\n\nconst route = useRoute();\nconst router = useRouter();\nconst currentPath = ref<string>('');\n\nconst processedBreadcrumbs = computed(() => {\n  return breadcrumbs.value.map(breadcrumb => {\n    // Optionally trim very long names (only if needed)\n    const trimmedName = breadcrumb.name.trim();\n    return {\n      ...breadcrumb,\n      name: trimmedName.length > 12 ? trimmedName.slice(0, 12) + '...' : trimmedName\n    };\n  });\n});\n\nconst processSegments = async () => {\n  const path = route.path;\n  currentPath.value = path;\n  const pathSegments = path.split('/').filter(Boolean);\n  const tempBreadcrumbs: BreadcrumbItem[] = [];\n\n  // Loop through each segment in the URL.\n  for (const [index, segment] of pathSegments.entries()) {\n    let segmentName: string;\n    \n    // Simple processing - can be extended as needed\n    segmentName = segment.charAt(0).toUpperCase() + segment.slice(1).toLowerCase();\n\n    tempBreadcrumbs.push({\n      name: segmentName,\n      fullPath: '/' + pathSegments.slice(0, index + 1).join('/')\n    });\n  }\n\n  breadcrumbs.value = tempBreadcrumbs;\n};\n\n/**\n * Prevent navigation if the resolved route is an error page.\n */\nconst handleBreadcrumbClick = (breadcrumb: BreadcrumbItem, event: MouseEvent) => {\n  const resolved = router.resolve(breadcrumb.fullPath);\n  // Check if any matched record is an error page.\n  const isErrorPage = resolved.matched.some((route: { meta?: RouteMeta }) => route.meta?.isErrorPage);\n  if (!resolved || resolved.matched.length === 0 || isErrorPage) {\n    event.preventDefault();\n    event.stopPropagation();\n    console.warn('Breadcrumb route not found or is an error page:', breadcrumb.fullPath);\n  }\n};\n\nwatchEffect(() => {\n  processSegments();\n});\n</script>\n\n<style scoped>\n</style>\n"],"names":["breadcrumbs","ref","route","useRoute","router","useRouter","currentPath","processedBreadcrumbs","computed","breadcrumb","trimmedName","processSegments","path","pathSegments","tempBreadcrumbs","index","segment","segmentName","handleBreadcrumbClick","event","resolved","isErrorPage","watchEffect","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_Fragment","_renderList","_hoisted_3","_createBlock","_unref","ChevronRightIcon","_createVNode","UiNavLink","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;;;;;AAiCA,UAAMA,IAAcC,EAAsB,EAAE,GAEtCC,IAAQC,EAAA,GACRC,IAASC,EAAA,GACTC,IAAcL,EAAY,EAAE,GAE5BM,IAAuBC,EAAS,MAC7BR,EAAY,MAAM,IAAI,CAAAS,MAAc;AAEzC,YAAMC,IAAcD,EAAW,KAAK,KAAA;AACpC,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,MAAMC,EAAY,SAAS,KAAKA,EAAY,MAAM,GAAG,EAAE,IAAI,QAAQA;AAAA,MAAA;AAAA,IAEvE,CAAC,CACF,GAEKC,IAAkB,YAAY;AAClC,YAAMC,IAAOV,EAAM;AACnB,MAAAI,EAAY,QAAQM;AACpB,YAAMC,IAAeD,EAAK,MAAM,GAAG,EAAE,OAAO,OAAO,GAC7CE,IAAoC,CAAA;AAG1C,iBAAW,CAACC,GAAOC,CAAO,KAAKH,EAAa,WAAW;AACrD,YAAII;AAGJ,QAAAA,IAAcD,EAAQ,OAAO,CAAC,EAAE,gBAAgBA,EAAQ,MAAM,CAAC,EAAE,YAAA,GAEjEF,EAAgB,KAAK;AAAA,UACnB,MAAMG;AAAA,UACN,UAAU,MAAMJ,EAAa,MAAM,GAAGE,IAAQ,CAAC,EAAE,KAAK,GAAG;AAAA,QAAA,CAC1D;AAAA,MACH;AAEA,MAAAf,EAAY,QAAQc;AAAA,IACtB,GAKMI,IAAwB,CAACT,GAA4BU,MAAsB;AAC/E,YAAMC,IAAWhB,EAAO,QAAQK,EAAW,QAAQ,GAE7CY,IAAcD,EAAS,QAAQ,KAAK,CAAClB,MAAgCA,EAAM,MAAM,WAAW;AAClG,OAAI,CAACkB,KAAYA,EAAS,QAAQ,WAAW,KAAKC,OAChDF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACN,QAAQ,KAAK,mDAAmDV,EAAW,QAAQ;AAAA,IAEvF;AAEA,WAAAa,EAAY,MAAM;AAChB,MAAAX,EAAA;AAAA,IACF,CAAC,cAvFCY,EAAA,GAAAC,EAcM,OAdNC,GAcM;AAAA,MAbJC,EAYK,MAZLC,GAYK;AAAA,SAXHJ,EAAA,EAAA,GAAAC,EAUKI,GAAA,MAAAC,EAV6BtB,EAAA,OAAoB,CAA1CE,GAAYM,YAAxBS,EAUK,MAAA;AAAA,UAVoD,KAAKf,EAAW;AAAA,QAAA;UACvEiB,EAQM,OARNI,GAQM;AAAA,YAPoBf,MAAK,UAA7BgB,EAA0HC,EAAAC,CAAA,GAAA;AAAA;cAArF,OAAM;AAAA,cAA0D,eAAY;AAAA,YAAA;YAEjHC,EAIYC,GAAA;AAAA,cAJA,IAAI1B,EAAW;AAAA,cAAW,UAAQU,MAAUD,EAAsBT,GAAYU,CAAK;AAAA,cAC5F,gBAAcV,EAAW,aAAaH,EAAA,iBAAuB;AAAA,cAC9D,OAAM;AAAA,YAAA;yBACN,MAAqB;AAAA,gBAAlB8B,EAAAC,EAAA5B,EAAW,IAAI,GAAA,CAAA;AAAA,cAAA;;;;;;;;;"}

package/dist/UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me.js

@@ -0,0 +1,131 @@
+import { defineComponent as d, computed as n, createElementBlock as a, openBlock as r, normalizeClass as o, createCommentVNode as p, createElementVNode as l, toDisplayString as x } from "vue";
+const g = {
+  key: 0,
+  class: "sl-absolute sl-inset-0 sl-bg-white sl-bg-opacity-75 dark:sl-bg-gray-900 dark:sl-bg-opacity-75 sl-flex sl-items-center sl-justify-center sl-z-50"
+}, u = { class: "sl-flex sl-flex-col sl-items-center" }, f = /* @__PURE__ */ d({
+  __name: "UiLoading",
+  props: {
+    theme: { default: "primary" },
+    size: { default: "md" },
+    text: {},
+    overlay: { type: Boolean, default: !1 },
+    className: {}
+  },
+  setup(m) {
+    const t = m, y = n(() => {
+      const s = ["sl-flex sl-items-center sl-justify-center"];
+      return t.overlay ? s.push("sl-relative") : s.push("sl-flex-col sl-space-y-2"), t.className && s.push(t.className), s;
+    }), c = n(() => {
+      const e = {
+        xs: "sl-h-3 sl-w-3",
+        sm: "sl-h-4 sl-w-4",
+        md: "sl-h-6 sl-w-6",
+        lg: "sl-h-8 sl-w-8",
+        xl: "sl-h-10 sl-w-10",
+        "2xl": "sl-h-12 sl-w-12"
+      }, s = {
+        primary: "sl-text-stachelock-600",
+        secondary: "sl-text-gray-600",
+        dark: "sl-text-gray-700",
+        light: "sl-text-gray-400",
+        success: "sl-text-green-600",
+        warning: "sl-text-yellow-600",
+        danger: "sl-text-red-600",
+        ghost: "sl-text-gray-600"
+      };
+      return [
+        e[t.size || "md"],
+        s[t.theme || "primary"]
+      ];
+    }), i = n(() => {
+      const e = {
+        xs: "sl-text-xs",
+        sm: "sl-text-sm",
+        md: "sl-text-base",
+        lg: "sl-text-lg",
+        xl: "sl-text-xl",
+        "2xl": "sl-text-2xl"
+      }, s = {
+        primary: "sl-text-stachelock-700",
+        secondary: "sl-text-gray-700",
+        dark: "sl-text-gray-800",
+        light: "sl-text-gray-500",
+        success: "sl-text-green-700",
+        warning: "sl-text-yellow-700",
+        danger: "sl-text-red-700",
+        ghost: "sl-text-gray-700"
+      };
+      return [
+        e[t.size || "md"],
+        s[t.theme || "primary"],
+        "sl-font-medium"
+      ];
+    });
+    return (e, s) => (r(), a("div", {
+      class: o(y.value)
+    }, [
+      e.overlay ? (r(), a("div", g, [
+        l("div", u, [
+          l("div", {
+            class: o(c.value)
+          }, s[0] || (s[0] = [
+            l("svg", {
+              class: "sl-animate-spin",
+              fill: "none",
+              viewBox: "0 0 24 24"
+            }, [
+              l("circle", {
+                class: "sl-opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                "stroke-width": "4"
+              }),
+              l("path", {
+                class: "sl-opacity-75",
+                fill: "currentColor",
+                d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              })
+            ], -1)
+          ]), 2),
+          e.text ? (r(), a("p", {
+            key: 0,
+            class: o(i.value)
+          }, x(e.text), 3)) : p("", !0)
+        ])
+      ])) : (r(), a("div", {
+        key: 1,
+        class: o(c.value)
+      }, s[1] || (s[1] = [
+        l("svg", {
+          class: "sl-animate-spin",
+          fill: "none",
+          viewBox: "0 0 24 24"
+        }, [
+          l("circle", {
+            class: "sl-opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            "stroke-width": "4"
+          }),
+          l("path", {
+            class: "sl-opacity-75",
+            fill: "currentColor",
+            d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          })
+        ], -1)
+      ]), 2)),
+      e.text && !e.overlay ? (r(), a("p", {
+        key: 2,
+        class: o(i.value)
+      }, x(e.text), 3)) : p("", !0)
+    ], 2));
+  }
+});
+export {
+  f as _
+};
+//# sourceMappingURL=UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me.js.map

package/dist/UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me.js","sources":["../src/components/UiLoading.vue"],"sourcesContent":["<template>\n  <div :class=\"containerClasses\">\n    <div v-if=\"overlay\" class=\"sl-absolute sl-inset-0 sl-bg-white sl-bg-opacity-75 dark:sl-bg-gray-900 dark:sl-bg-opacity-75 sl-flex sl-items-center sl-justify-center sl-z-50\">\n      <div class=\"sl-flex sl-flex-col sl-items-center\">\n        <div :class=\"spinnerClasses\">\n          <svg class=\"sl-animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle\n              class=\"sl-opacity-25\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"4\"\n            />\n            <path\n              class=\"sl-opacity-75\"\n              fill=\"currentColor\"\n              d=\"m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n        </div>\n        <p v-if=\"text\" :class=\"textClasses\">{{ text }}</p>\n      </div>\n    </div>\n    <div v-else :class=\"spinnerClasses\">\n      <svg class=\"sl-animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle\n          class=\"sl-opacity-25\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"4\"\n        />\n        <path\n          class=\"sl-opacity-75\"\n          fill=\"currentColor\"\n          d=\"m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n    </div>\n    <p v-if=\"text && !overlay\" :class=\"textClasses\">{{ text }}</p>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport type { LoadingType } from '../types/ui';\n\ninterface LoadingProps extends LoadingType {}\n\nconst props = withDefaults(defineProps<LoadingProps>(), {\n  theme: 'primary',\n  size: 'md',\n  overlay: false,\n});\n\nconst containerClasses = computed(() => {\n  const base = 'sl-flex sl-items-center sl-justify-center';\n  const classes = [base];\n\n  if (props.overlay) {\n    classes.push('sl-relative');\n  } else {\n    classes.push('sl-flex-col sl-space-y-2');\n  }\n\n  if (props.className) {\n    classes.push(props.className);\n  }\n\n  return classes;\n});\n\nconst spinnerClasses = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-h-3 sl-w-3',\n    sm: 'sl-h-4 sl-w-4',\n    md: 'sl-h-6 sl-w-6',\n    lg: 'sl-h-8 sl-w-8',\n    xl: 'sl-h-10 sl-w-10',\n    '2xl': 'sl-h-12 sl-w-12',\n  };\n\n  const colorMapping: Record<string, string> = {\n    primary: 'sl-text-stachelock-600',\n    secondary: 'sl-text-gray-600',\n    dark: 'sl-text-gray-700',\n    light: 'sl-text-gray-400',\n    success: 'sl-text-green-600',\n    warning: 'sl-text-yellow-600',\n    danger: 'sl-text-red-600',\n    ghost: 'sl-text-gray-600',\n  };\n\n  return [\n    sizeMapping[props.size || 'md'],\n    colorMapping[props.theme || 'primary']\n  ];\n});\n\nconst textClasses = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-text-xs',\n    sm: 'sl-text-sm',\n    md: 'sl-text-base',\n    lg: 'sl-text-lg',\n    xl: 'sl-text-xl',\n    '2xl': 'sl-text-2xl',\n  };\n\n  const colorMapping: Record<string, string> = {\n    primary: 'sl-text-stachelock-700',\n    secondary: 'sl-text-gray-700',\n    dark: 'sl-text-gray-800',\n    light: 'sl-text-gray-500',\n    success: 'sl-text-green-700',\n    warning: 'sl-text-yellow-700',\n    danger: 'sl-text-red-700',\n    ghost: 'sl-text-gray-700',\n  };\n\n  return [\n    sizeMapping[props.size || 'md'],\n    colorMapping[props.theme || 'primary'],\n    'sl-font-medium'\n  ];\n});\n</script>\n\n\n"],"names":["props","__props","containerClasses","computed","classes","spinnerClasses","sizeMapping","colorMapping","textClasses","_createElementBlock","overlay","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","text"],"mappings":";;;;;;;;;;;;;;AAmDA,UAAMA,IAAQC,GAMRC,IAAmBC,EAAS,MAAM;AAEtC,YAAMC,IAAU,CADH,2CACQ;AAErB,aAAIJ,EAAM,UACRI,EAAQ,KAAK,aAAa,IAE1BA,EAAQ,KAAK,0BAA0B,GAGrCJ,EAAM,aACRI,EAAQ,KAAKJ,EAAM,SAAS,GAGvBI;AAAA,IACT,CAAC,GAEKC,IAAiBF,EAAS,MAAM;AACpC,YAAMG,IAAsC;AAAA,QAC1C,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA,GAGHC,IAAuC;AAAA,QAC3C,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAGT,aAAO;AAAA,QACLD,EAAYN,EAAM,QAAQ,IAAI;AAAA,QAC9BO,EAAaP,EAAM,SAAS,SAAS;AAAA,MAAA;AAAA,IAEzC,CAAC,GAEKQ,IAAcL,EAAS,MAAM;AACjC,YAAMG,IAAsC;AAAA,QAC1C,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA,GAGHC,IAAuC;AAAA,QAC3C,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAGT,aAAO;AAAA,QACLD,EAAYN,EAAM,QAAQ,IAAI;AAAA,QAC9BO,EAAaP,EAAM,SAAS,SAAS;AAAA,QACrC;AAAA,MAAA;AAAA,IAEJ,CAAC;2BA9HCS,EAyCM,OAAA;AAAA,MAzCA,SAAOP,EAAA,KAAgB;AAAA,IAAA;MAChBQ,EAAAA,WAAXC,EAAA,GAAAF,EAqBM,OArBNG,GAqBM;AAAA,QApBJC,EAmBM,OAnBNC,GAmBM;AAAA,UAlBJD,EAgBM,OAAA;AAAA,YAhBA,SAAOR,EAAA,KAAc;AAAA,UAAA;YACzBQ,EAcM,OAAA;AAAA,cAdD,OAAM;AAAA,cAAkB,MAAK;AAAA,cAAO,SAAQ;AAAA,YAAA;cAC/CA,EAOE,UAAA;AAAA,gBANA,OAAM;AAAA,gBACN,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAE;AAAA,gBACF,QAAO;AAAA,gBACP,gBAAa;AAAA,cAAA;cAEfA,EAIE,QAAA;AAAA,gBAHA,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;;;UAICE,EAAAA,aAATN,EAAkD,KAAA;AAAA;YAAlC,SAAOD,EAAA,KAAW;AAAA,UAAA,KAAKO,EAAAA,IAAI,GAAA,CAAA;;kBAG/CN,EAgBM,OAAA;AAAA;QAhBO,SAAOJ,EAAA,KAAc;AAAA,MAAA;QAChCQ,EAcM,OAAA;AAAA,UAdD,OAAM;AAAA,UAAkB,MAAK;AAAA,UAAO,SAAQ;AAAA,QAAA;UAC/CA,EAOE,UAAA;AAAA,YANA,OAAM;AAAA,YACN,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,gBAAa;AAAA,UAAA;UAEfA,EAIE,QAAA;AAAA,YAHA,OAAM;AAAA,YACN,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;;;MAICE,EAAAA,SAASL,EAAAA,gBAAlBD,EAA8D,KAAA;AAAA;QAAlC,SAAOD,EAAA,KAAW;AAAA,MAAA,KAAKO,EAAAA,IAAI,GAAA,CAAA;;;;"}

package/dist/UiModal.vue_vue_type_script_setup_true_lang-CMk62qeq.js

@@ -0,0 +1,162 @@
+import { defineComponent as _, ref as b, computed as k, createBlock as m, openBlock as r, unref as t, withCtx as l, createVNode as o, createElementVNode as s, normalizeClass as u, renderSlot as n, createCommentVNode as x, createTextVNode as y, toDisplayString as p } from "vue";
+import { TransitionRoot as T, Dialog as V, TransitionChild as h, DialogPanel as B, DialogTitle as S } from "@headlessui/vue";
+import w from "./components/Button.js";
+const z = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto" }, $ = { class: "sl-bg-white" }, D = { class: "sl-px-4 sl-pt-5 sl-pb-4 sm:sl-p-6 sm:sl-pb-4" }, N = { class: "sm:sl-flex sm:sl-items-start" }, j = { class: "sl-mx-auto sl-flex sl-h-12 sl-w-12 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sl-bg-gray-100 sm:sl-mx-0 sm:sl-h-10 sm:sl-w-10" }, F = { class: "sl-mt-3 sl-text-center sm:sl-ml-4 sm:sl-mt-0 sm:sl-text-left sl-w-full" }, R = { class: "sl-mt-2" }, E = { class: "sl-px-4 sl-py-3 sm:sl-flex sm:sl-flex-row-reverse sm:sl-px-6" }, q = { class: "sl-flex sl-w-full sl-justify-end sl-gap-3" }, A = /* @__PURE__ */ _({
+  __name: "UiModal",
+  props: {
+    modelValue: { type: Boolean, required: !0 },
+    size: {
+      type: String,
+      default: "sm:max-w-lg",
+      validator: (e) => [
+        "sm:max-w-sm",
+        "sm:max-w-md",
+        "sm:max-w-lg",
+        "sm:max-w-xl",
+        "sm:max-w-2xl",
+        "sm:max-w-3xl",
+        "sm:max-w-4xl",
+        "sm:max-w-5xl",
+        "sm:max-w-6xl",
+        "sm:max-w-7xl"
+      ].includes(e)
+    },
+    position: { type: String, default: "center", validator: (e) => ["center", "top"].includes(e) },
+    showCancel: { type: Boolean, default: !0 },
+    showConfirm: { type: Boolean, default: !0 },
+    cancelText: { type: String, default: "Cancel" },
+    confirmText: { type: String, default: "Confirm" },
+    confirmTheme: { type: String, default: "primary" }
+  },
+  emits: ["update:modelValue", "cancel", "confirm"],
+  setup(e, { emit: v }) {
+    const i = v, c = b(null), g = k(() => c.value), d = () => {
+      i("update:modelValue", !1), i("cancel");
+    }, C = () => {
+      i("confirm"), i("update:modelValue", !1);
+    };
+    return (a, f) => (r(), m(t(T), {
+      as: "template",
+      show: e.modelValue
+    }, {
+      default: l(() => [
+        o(t(V), {
+          as: "div",
+          class: "sl-relative sl-z-50",
+          onClose: d,
+          "initial-focus": g.value
+        }, {
+          default: l(() => [
+            o(t(h), {
+              as: "template",
+              enter: "ease-out duration-300",
+              "enter-from": "opacity-0",
+              "enter-to": "opacity-100",
+              leave: "ease-in duration-200",
+              "leave-from": "opacity-100",
+              "leave-to": "opacity-0"
+            }, {
+              default: l(() => f[0] || (f[0] = [
+                s("div", { class: "sl-fixed sl-inset-0 sl-bg-gray-500/75 sl-transition-opacity" }, null, -1)
+              ])),
+              _: 1,
+              __: [0]
+            }),
+            s("div", z, [
+              s("div", {
+                class: u(["sl-flex sl-min-h-full sl-items-center sl-justify-center sl-p-4 sl-text-center", [e.position === "top" ? "sm:sl-items-start sm:sl-pt-16" : "sm:sl-items-center"]])
+              }, [
+                o(t(h), {
+                  as: "template",
+                  enter: "ease-out duration-300",
+                  "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+                  "enter-to": "opacity-100 translate-y-0 sm:scale-100",
+                  leave: "ease-in duration-200",
+                  "leave-from": "opacity-100 translate-y-0 sm:scale-100",
+                  "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                }, {
+                  default: l(() => [
+                    o(t(B), {
+                      class: u(["sl-relative sl-transform sl-overflow-hidden sl-rounded-lg sl-bg-white sl-text-left sl-shadow-xl sl-transition-all sl-w-full", e.size])
+                    }, {
+                      default: l(() => [
+                        s("div", $, [
+                          s("div", D, [
+                            s("div", N, [
+                              s("div", j, [
+                                n(a.$slots, "icon")
+                              ]),
+                              s("div", F, [
+                                o(t(S), {
+                                  as: "h3",
+                                  class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-900"
+                                }, {
+                                  default: l(() => [
+                                    n(a.$slots, "header")
+                                  ]),
+                                  _: 3
+                                }),
+                                s("div", R, [
+                                  n(a.$slots, "body", {}, () => [
+                                    n(a.$slots, "default")
+                                  ])
+                                ])
+                              ])
+                            ])
+                          ]),
+                          s("div", E, [
+                            n(a.$slots, "footer", {}, () => [
+                              s("div", q, [
+                                e.showCancel ? (r(), m(w, {
+                                  key: 0,
+                                  "center-label": "",
+                                  theme: "light",
+                                  outlined: !0,
+                                  onButtonClick: d
+                                }, {
+                                  default: l(() => [
+                                    y(p(e.cancelText), 1)
+                                  ]),
+                                  _: 1
+                                })) : x("", !0),
+                                e.showConfirm ? (r(), m(w, {
+                                  key: 1,
+                                  "center-label": "",
+                                  theme: e.confirmTheme,
+                                  outlined: !1,
+                                  onButtonClick: C
+                                }, {
+                                  default: l(() => [
+                                    y(p(e.confirmText), 1)
+                                  ]),
+                                  _: 1
+                                }, 8, ["theme"])) : x("", !0)
+                              ])
+                            ])
+                          ])
+                        ]),
+                        s("button", {
+                          ref_key: "fallbackFocusRef",
+                          ref: c,
+                          class: "sl-sr-only"
+                        }, "Close", 512)
+                      ]),
+                      _: 3
+                    }, 8, ["class"])
+                  ]),
+                  _: 3
+                })
+              ], 2)
+            ])
+          ]),
+          _: 3
+        }, 8, ["initial-focus"])
+      ]),
+      _: 3
+    }, 8, ["show"]));
+  }
+});
+export {
+  A as _
+};
+//# sourceMappingURL=UiModal.vue_vue_type_script_setup_true_lang-CMk62qeq.js.map

package/dist/UiModal.vue_vue_type_script_setup_true_lang-CMk62qeq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiModal.vue_vue_type_script_setup_true_lang-CMk62qeq.js","sources":["../src/components/UiModal.vue"],"sourcesContent":["<template>\n  <TransitionRoot as=\"template\" :show=\"modelValue\">\n    <Dialog as=\"div\" class=\"sl-relative sl-z-50\" @close=\"onClose\" :initial-focus=\"initialFocusElement\">\n      <TransitionChild as=\"template\" enter=\"ease-out duration-300\" enter-from=\"opacity-0\" enter-to=\"opacity-100\"\n        leave=\"ease-in duration-200\" leave-from=\"opacity-100\" leave-to=\"opacity-0\">\n        <div class=\"sl-fixed sl-inset-0 sl-bg-gray-500/75 sl-transition-opacity\" />\n      </TransitionChild>\n\n      <div class=\"sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto\">\n        <div class=\"sl-flex sl-min-h-full sl-items-center sl-justify-center sl-p-4 sl-text-center\"\n          :class=\"[position === 'top' ? 'sm:sl-items-start sm:sl-pt-16' : 'sm:sl-items-center']\">\n          <TransitionChild as=\"template\" enter=\"ease-out duration-300\"\n            enter-from=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\"\n            enter-to=\"opacity-100 translate-y-0 sm:scale-100\" leave=\"ease-in duration-200\"\n            leave-from=\"opacity-100 translate-y-0 sm:scale-100\" leave-to=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\">\n            <DialogPanel\n              :class=\"['sl-relative sl-transform sl-overflow-hidden sl-rounded-lg sl-bg-white sl-text-left sl-shadow-xl sl-transition-all sl-w-full', size]\">\n              <div class=\"sl-bg-white\">\n                <div class=\"sl-px-4 sl-pt-5 sl-pb-4 sm:sl-p-6 sm:sl-pb-4\">\n                  <div class=\"sm:sl-flex sm:sl-items-start\">\n                    <div class=\"sl-mx-auto sl-flex sl-h-12 sl-w-12 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sl-bg-gray-100 sm:sl-mx-0 sm:sl-h-10 sm:sl-w-10\">\n                      <slot name=\"icon\" />\n                    </div>\n                    <div class=\"sl-mt-3 sl-text-center sm:sl-ml-4 sm:sl-mt-0 sm:sl-text-left sl-w-full\">\n                      <DialogTitle as=\"h3\" class=\"sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-900\">\n                        <slot name=\"header\" />\n                      </DialogTitle>\n                      <div class=\"sl-mt-2\">\n                        <slot name=\"body\">\n                          <slot />\n                        </slot>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"sl-px-4 sl-py-3 sm:sl-flex sm:sl-flex-row-reverse sm:sl-px-6\">\n                  <slot name=\"footer\">\n                    <div class=\"sl-flex sl-w-full sl-justify-end sl-gap-3\">\n                      <UiButton v-if=\"showCancel\" center-label theme=\"light\" :outlined=\"true\" @button-click=\"onClose\">\n                        {{ cancelText }}\n                      </UiButton>\n                      <UiButton v-if=\"showConfirm\" center-label :theme=\"confirmTheme\" :outlined=\"false\" @button-click=\"onConfirm\">\n                        {{ confirmText }}\n                      </UiButton>\n                    </div>\n                  </slot>\n                </div>\n              </div>\n              <button ref=\"fallbackFocusRef\" class=\"sl-sr-only\">Close</button>\n            </DialogPanel>\n          </TransitionChild>\n        </div>\n      </div>\n    </Dialog>\n  </TransitionRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';\nimport { ref, computed } from 'vue';\nimport type { Theme } from '@/types/ui';\nimport UiButton from '@/components/UiButton.vue';\n\ndefineProps({\n  modelValue: { type: Boolean, required: true },\n  size: {\n    type: String,\n    default: 'sm:max-w-lg',\n    validator: (value: string) => [\n      'sm:max-w-sm','sm:max-w-md','sm:max-w-lg','sm:max-w-xl','sm:max-w-2xl','sm:max-w-3xl','sm:max-w-4xl','sm:max-w-5xl','sm:max-w-6xl','sm:max-w-7xl'\n    ].includes(value)\n  },\n  position: { type: String, default: 'center', validator: (value: string) => ['center', 'top'].includes(value) },\n  showCancel: { type: Boolean, default: true },\n  showConfirm: { type: Boolean, default: true },\n  cancelText: { type: String, default: 'Cancel' },\n  confirmText: { type: String, default: 'Confirm' },\n  confirmTheme: { type: String as () => Theme, default: 'primary' }\n});\n\nconst emit = defineEmits(['update:modelValue', 'cancel', 'confirm']);\nconst fallbackFocusRef = ref(null);\nconst initialFocusElement = computed(() => fallbackFocusRef.value);\n\nconst onClose = () => {\n  emit('update:modelValue', false);\n  emit('cancel');\n};\n\nconst onConfirm = () => {\n  emit('confirm');\n  emit('update:modelValue', false);\n};\n</script>\n\n<style scoped>\n</style>\n\n\n"],"names":["emit","__emit","fallbackFocusRef","ref","initialFocusElement","computed","onClose","onConfirm","_createBlock","_unref","TransitionRoot","__props","_createVNode","Dialog","TransitionChild","_cache","_createElementVNode","_hoisted_1","_normalizeClass","DialogPanel","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_renderSlot","_ctx","_hoisted_6","DialogTitle","_hoisted_7","_hoisted_8","_hoisted_9","UiButton"],"mappings":"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"}