@stachelock/ui 0.2.14 → 0.3.0

package/dist/FileDropzoneInput.vue_vue_type_script_setup_true_lang-CclXceTb.js

@@ -0,0 +1,211 @@
+import { createElementBlock as d, openBlock as c, createElementVNode as a, defineComponent as T, ref as v, computed as w, Fragment as F, createCommentVNode as C, withModifiers as f, normalizeClass as M, createVNode as x, renderSlot as $, unref as b, createTextVNode as A, toDisplayString as g, renderList as N } from "vue";
+import { r as X } from "./XMarkIcon-Cwy3T6p8.js";
+function G(r, h) {
+  return c(), d("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"
+  }, [
+    a("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
+    })
+  ]);
+}
+function L(r, h) {
+  return c(), d("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"
+  }, [
+    a("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+    })
+  ]);
+}
+const O = { class: "sl-flex sl-flex-col sl-items-center sl-justify-center sl-py-5" }, H = { class: "sl-text-xs sl-text-gray-400 dark:sl-text-slate-300" }, W = {
+  key: 0,
+  class: "sl-mt-4 sl-w-full sl-px-4"
+}, Z = { class: "sl-flex sl-flex-wrap sl-gap-2 sl-justify-center" }, R = { class: "sl-text-xs sl-text-gray-600 dark:sl-text-slate-200 sl-truncate sl-max-w-[120px]" }, J = ["onClick"], U = ["accept", "multiple", "disabled"], q = {
+  key: 0,
+  class: "sl-mt-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400"
+}, le = /* @__PURE__ */ T({
+  __name: "FileDropzoneInput",
+  props: {
+    /** Allow multiple file selection */
+    enableMultiple: {
+      type: Boolean,
+      default: !1
+    },
+    /** Accepted MIME types */
+    acceptedFormats: {
+      type: Array,
+      default: () => ["image/jpeg", "image/png", "image/gif", "application/pdf"]
+    },
+    /** Maximum file size in MB */
+    maximumFileSize: {
+      type: Number,
+      default: 10
+    },
+    /** Disable the dropzone */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** Custom ring/border classes */
+    ringClasses: {
+      type: String,
+      default: ""
+    },
+    /** Height of the dropzone */
+    height: {
+      type: String,
+      default: "md"
+    }
+  },
+  emits: ["update:files", "error"],
+  setup(r, { expose: h, emit: D }) {
+    const B = {
+      "image/jpeg": "JPG",
+      "image/png": "PNG",
+      "image/gif": "GIF",
+      "image/webp": "WEBP",
+      "image/svg+xml": "SVG",
+      "application/pdf": "PDF",
+      "application/msword": "DOC",
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+      "application/vnd.ms-excel": "XLS",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+      "text/csv": "CSV",
+      "text/plain": "TXT",
+      "application/zip": "ZIP",
+      "video/mp4": "MP4",
+      "video/webm": "WEBM",
+      "audio/mpeg": "MP3",
+      "audio/wav": "WAV"
+    }, t = r, m = D, u = v(null), l = v([]), p = v(!1), i = v(""), S = w(() => {
+      const e = {
+        sm: "sl-h-32",
+        md: "sl-h-48",
+        lg: "sl-h-64",
+        auto: "sl-min-h-[128px]"
+      };
+      return e[t.height] || e.md;
+    }), _ = w(() => t.acceptedFormats.map((e) => B[e] || e.split("/")[1]?.toUpperCase()).filter(Boolean).join(", ")), y = (e) => {
+      const s = [], o = t.maximumFileSize * 1024 * 1024;
+      return Array.from(e).forEach((n) => {
+        if (!t.acceptedFormats.includes(n.type)) {
+          i.value = `File type "${n.type}" is not accepted`, m("error", i.value);
+          return;
+        }
+        if (n.size > o) {
+          i.value = `File "${n.name}" exceeds the maximum size of ${t.maximumFileSize}MB`, m("error", i.value);
+          return;
+        }
+        s.push(n);
+      }), s.length > 0 && (i.value = ""), s;
+    }, j = (e) => {
+      const s = e.target.files;
+      if (s) {
+        const o = y(s);
+        o.length > 0 && (t.enableMultiple ? l.value = [...l.value, ...o] : l.value = o.slice(0, 1), m("update:files", l.value));
+      }
+      u.value && (u.value.value = "");
+    }, z = (e) => {
+      if (p.value = !1, !t.disabled && e.dataTransfer?.files) {
+        const s = y(e.dataTransfer.files);
+        s.length > 0 && (t.enableMultiple ? l.value = [...l.value, ...s] : l.value = s.slice(0, 1), m("update:files", l.value));
+      }
+    }, V = () => {
+      t.disabled || (p.value = !0);
+    }, E = () => {
+      t.disabled || (p.value = !0);
+    }, I = () => {
+      p.value = !1;
+    }, k = () => {
+      t.disabled || u.value?.click();
+    }, P = (e) => {
+      l.value.splice(e, 1), m("update:files", l.value);
+    };
+    return h({ clearFiles: () => {
+      l.value = [], i.value = "", u.value && (u.value.value = "");
+    }, triggerFileInputClick: k }), (e, s) => (c(), d(F, null, [
+      a("div", {
+        class: M([
+          "sl-flex sl-flex-col sl-items-center sl-justify-center sl-w-full sl-rounded-lg sl-cursor-pointer sl-transition-colors",
+          "sl-bg-gray-50 dark:sl-bg-slate-800/50 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-800",
+          r.ringClasses ? r.ringClasses : "sl-border-2 sl-border-dashed sl-border-gray-300 dark:sl-border-slate-600",
+          { "sl-opacity-50 sl-cursor-not-allowed": r.disabled },
+          { "sl-border-primary-500 sl-bg-primary-50 dark:sl-bg-primary-900/20": p.value },
+          S.value
+        ]),
+        onClick: k,
+        onDragover: f(V, ["prevent"]),
+        onDragenter: f(E, ["prevent"]),
+        onDragleave: f(I, ["prevent"]),
+        onDrop: f(z, ["prevent"])
+      }, [
+        a("div", O, [
+          x(b(G), {
+            class: M([
+              "sl-h-10 sl-w-10 sl-mb-3",
+              p.value ? "sl-text-primary-500" : "sl-text-gray-400 dark:sl-text-slate-300"
+            ]),
+            "aria-hidden": "true"
+          }, null, 8, ["class"]),
+          $(e.$slots, "default", {}, () => [
+            s[0] || (s[0] = a("p", { class: "sl-mb-2 sl-text-sm sl-text-gray-500 dark:sl-text-slate-300" }, [
+              a("span", { class: "sl-font-semibold" }, "Click to upload"),
+              A(" or drag and drop ")
+            ], -1)),
+            a("p", H, g(_.value) + " (MAX. " + g(r.maximumFileSize) + "MB) ", 1)
+          ]),
+          l.value.length > 0 ? (c(), d("div", W, [
+            a("div", Z, [
+              (c(!0), d(F, null, N(l.value, (o, n) => (c(), d("div", {
+                key: n,
+                class: "sl-flex sl-items-center sl-gap-2 sl-bg-white dark:sl-bg-slate-700 sl-rounded-md sl-px-3 sl-py-1.5 sl-shadow-sm sl-border sl-border-gray-200 dark:sl-border-slate-600"
+              }, [
+                x(b(L), { class: "sl-h-4 sl-w-4 sl-text-gray-400 dark:sl-text-slate-300" }),
+                a("span", R, g(o.name), 1),
+                a("button", {
+                  type: "button",
+                  class: "sl-text-gray-400 hover:sl-text-red-500 dark:sl-text-slate-300 dark:hover:sl-text-red-400 sl-transition-colors sl-p-0 sl-border-0 sl-bg-transparent sl-cursor-pointer",
+                  onClick: f((Q) => P(n), ["stop"])
+                }, [
+                  x(b(X), { class: "sl-h-4 sl-w-4" })
+                ], 8, J)
+              ]))), 128))
+            ])
+          ])) : C("", !0)
+        ]),
+        a("input", {
+          ref_key: "fileInputRef",
+          ref: u,
+          type: "file",
+          class: "sl-hidden",
+          accept: r.acceptedFormats.join(", "),
+          multiple: r.enableMultiple,
+          disabled: r.disabled,
+          onChange: j
+        }, null, 40, U)
+      ], 34),
+      i.value ? (c(), d("p", q, g(i.value), 1)) : C("", !0)
+    ], 64));
+  }
+});
+export {
+  le as _
+};
+//# sourceMappingURL=FileDropzoneInput.vue_vue_type_script_setup_true_lang-CclXceTb.js.map

package/dist/FileDropzoneInput.vue_vue_type_script_setup_true_lang-CclXceTb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropzoneInput.vue_vue_type_script_setup_true_lang-CclXceTb.js","sources":["../node_modules/@heroicons/vue/24/outline/esm/CloudArrowUpIcon.js","../node_modules/@heroicons/vue/24/outline/esm/DocumentIcon.js","../src/components/inputs/FileDropzoneInput.vue"],"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: \"M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z\"\n    })\n  ]))\n}","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: \"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z\"\n    })\n  ]))\n}","<template>\n  <div\n    :class=\"[\n      'sl-flex sl-flex-col sl-items-center sl-justify-center sl-w-full sl-rounded-lg sl-cursor-pointer sl-transition-colors',\n      'sl-bg-gray-50 dark:sl-bg-slate-800/50 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-800',\n      ringClasses ? ringClasses : 'sl-border-2 sl-border-dashed sl-border-gray-300 dark:sl-border-slate-600',\n      { 'sl-opacity-50 sl-cursor-not-allowed': disabled },\n      { 'sl-border-primary-500 sl-bg-primary-50 dark:sl-bg-primary-900/20': isDragOver },\n      heightClass\n    ]\"\n    @click=\"triggerFileInputClick\"\n    @dragover.prevent=\"handleDragOver\"\n    @dragenter.prevent=\"handleDragEnter\"\n    @dragleave.prevent=\"handleDragLeave\"\n    @drop.prevent=\"handleDrop\"\n  >\n    <div class=\"sl-flex sl-flex-col sl-items-center sl-justify-center sl-py-5\">\n      <CloudArrowUpIcon\n        :class=\"[\n          'sl-h-10 sl-w-10 sl-mb-3',\n          isDragOver ? 'sl-text-primary-500' : 'sl-text-gray-400 dark:sl-text-slate-300'\n        ]\"\n        aria-hidden=\"true\"\n      />\n      \n      <slot>\n        <p class=\"sl-mb-2 sl-text-sm sl-text-gray-500 dark:sl-text-slate-300\">\n          <span class=\"sl-font-semibold\">Click to upload</span> or drag and drop\n        </p>\n        <p class=\"sl-text-xs sl-text-gray-400 dark:sl-text-slate-300\">\n          {{ acceptedFormatsText }} (MAX. {{ maximumFileSize }}MB)\n        </p>\n      </slot>\n      \n      <!-- Selected files preview -->\n      <div v-if=\"selectedFiles.length > 0\" class=\"sl-mt-4 sl-w-full sl-px-4\">\n        <div class=\"sl-flex sl-flex-wrap sl-gap-2 sl-justify-center\">\n          <div\n            v-for=\"(file, index) in selectedFiles\"\n            :key=\"index\"\n            class=\"sl-flex sl-items-center sl-gap-2 sl-bg-white dark:sl-bg-slate-700 sl-rounded-md sl-px-3 sl-py-1.5 sl-shadow-sm sl-border sl-border-gray-200 dark:sl-border-slate-600\"\n          >\n            <DocumentIcon class=\"sl-h-4 sl-w-4 sl-text-gray-400 dark:sl-text-slate-300\" />\n            <span class=\"sl-text-xs sl-text-gray-600 dark:sl-text-slate-200 sl-truncate sl-max-w-[120px]\">{{ file.name }}</span>\n            <button\n              type=\"button\"\n              class=\"sl-text-gray-400 hover:sl-text-red-500 dark:sl-text-slate-300 dark:hover:sl-text-red-400 sl-transition-colors sl-p-0 sl-border-0 sl-bg-transparent sl-cursor-pointer\"\n              @click.stop=\"removeFile(index)\"\n            >\n              <XMarkIcon class=\"sl-h-4 sl-w-4\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <input\n      ref=\"fileInputRef\"\n      type=\"file\"\n      class=\"sl-hidden\"\n      :accept=\"acceptedFormats.join(', ')\"\n      :multiple=\"enableMultiple\"\n      :disabled=\"disabled\"\n      @change=\"handleInputFileChange\"\n    />\n  </div>\n  \n  <!-- Error message -->\n  <p v-if=\"errorMessage\" class=\"sl-mt-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400\">\n    {{ errorMessage }}\n  </p>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, type PropType } from 'vue';\nimport { CloudArrowUpIcon, DocumentIcon, XMarkIcon } from '@heroicons/vue/24/outline';\n\nexport type AcceptedFileType = \n  | 'image/jpeg'\n  | 'image/png'\n  | 'image/gif'\n  | 'image/webp'\n  | 'image/svg+xml'\n  | 'application/pdf'\n  | 'application/msword'\n  | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'\n  | 'application/vnd.ms-excel'\n  | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'\n  | 'text/csv'\n  | 'text/plain'\n  | 'application/zip'\n  | 'video/mp4'\n  | 'video/webm'\n  | 'audio/mpeg'\n  | 'audio/wav';\n\nconst mimeToExtension: Record<string, string> = {\n  'image/jpeg': 'JPG',\n  'image/png': 'PNG',\n  'image/gif': 'GIF',\n  'image/webp': 'WEBP',\n  'image/svg+xml': 'SVG',\n  'application/pdf': 'PDF',\n  'application/msword': 'DOC',\n  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'DOCX',\n  'application/vnd.ms-excel': 'XLS',\n  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'XLSX',\n  'text/csv': 'CSV',\n  'text/plain': 'TXT',\n  'application/zip': 'ZIP',\n  'video/mp4': 'MP4',\n  'video/webm': 'WEBM',\n  'audio/mpeg': 'MP3',\n  'audio/wav': 'WAV',\n};\n\nconst props = defineProps({\n  /** Allow multiple file selection */\n  enableMultiple: {\n    type: Boolean,\n    default: false,\n  },\n  /** Accepted MIME types */\n  acceptedFormats: {\n    type: Array as PropType<AcceptedFileType[]>,\n    default: () => ['image/jpeg', 'image/png', 'image/gif', 'application/pdf'],\n  },\n  /** Maximum file size in MB */\n  maximumFileSize: {\n    type: Number,\n    default: 10,\n  },\n  /** Disable the dropzone */\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  /** Custom ring/border classes */\n  ringClasses: {\n    type: String,\n    default: '',\n  },\n  /** Height of the dropzone */\n  height: {\n    type: String as PropType<'sm' | 'md' | 'lg' | 'auto'>,\n    default: 'md',\n  },\n});\n\nconst emit = defineEmits<{\n  (e: 'update:files', files: FileList | File[]): void;\n  (e: 'error', message: string): void;\n}>();\n\nconst fileInputRef = ref<HTMLInputElement | null>(null);\nconst selectedFiles = ref<File[]>([]);\nconst isDragOver = ref(false);\nconst errorMessage = ref('');\n\nconst heightClass = computed(() => {\n  const heights: Record<string, string> = {\n    sm: 'sl-h-32',\n    md: 'sl-h-48',\n    lg: 'sl-h-64',\n    auto: 'sl-min-h-[128px]',\n  };\n  return heights[props.height] || heights.md;\n});\n\nconst acceptedFormatsText = computed(() => {\n  return props.acceptedFormats\n    .map(format => mimeToExtension[format] || format.split('/')[1]?.toUpperCase())\n    .filter(Boolean)\n    .join(', ');\n});\n\nconst validateFiles = (files: FileList | File[]): File[] => {\n  const validFiles: File[] = [];\n  const maxBytes = props.maximumFileSize * 1024 * 1024;\n  \n  Array.from(files).forEach(file => {\n    // Check file type\n    if (!props.acceptedFormats.includes(file.type as AcceptedFileType)) {\n      errorMessage.value = `File type \"${file.type}\" is not accepted`;\n      emit('error', errorMessage.value);\n      return;\n    }\n    \n    // Check file size\n    if (file.size > maxBytes) {\n      errorMessage.value = `File \"${file.name}\" exceeds the maximum size of ${props.maximumFileSize}MB`;\n      emit('error', errorMessage.value);\n      return;\n    }\n    \n    validFiles.push(file);\n  });\n  \n  if (validFiles.length > 0) {\n    errorMessage.value = '';\n  }\n  \n  return validFiles;\n};\n\nconst handleInputFileChange = (event: Event) => {\n  const files = (event.target as HTMLInputElement).files;\n  if (files) {\n    const validFiles = validateFiles(files);\n    if (validFiles.length > 0) {\n      if (props.enableMultiple) {\n        selectedFiles.value = [...selectedFiles.value, ...validFiles];\n      } else {\n        selectedFiles.value = validFiles.slice(0, 1);\n      }\n      emit('update:files', selectedFiles.value);\n    }\n  }\n  \n  // Reset input so same file can be selected again\n  if (fileInputRef.value) {\n    fileInputRef.value.value = '';\n  }\n};\n\nconst handleDrop = (event: DragEvent) => {\n  isDragOver.value = false;\n  \n  if (props.disabled) return;\n  \n  if (event.dataTransfer?.files) {\n    const validFiles = validateFiles(event.dataTransfer.files);\n    if (validFiles.length > 0) {\n      if (props.enableMultiple) {\n        selectedFiles.value = [...selectedFiles.value, ...validFiles];\n      } else {\n        selectedFiles.value = validFiles.slice(0, 1);\n      }\n      emit('update:files', selectedFiles.value);\n    }\n  }\n};\n\nconst handleDragOver = () => {\n  if (!props.disabled) {\n    isDragOver.value = true;\n  }\n};\n\nconst handleDragEnter = () => {\n  if (!props.disabled) {\n    isDragOver.value = true;\n  }\n};\n\nconst handleDragLeave = () => {\n  isDragOver.value = false;\n};\n\nconst triggerFileInputClick = () => {\n  if (!props.disabled) {\n    fileInputRef.value?.click();\n  }\n};\n\nconst removeFile = (index: number) => {\n  selectedFiles.value.splice(index, 1);\n  emit('update:files', selectedFiles.value);\n};\n\nconst clearFiles = () => {\n  selectedFiles.value = [];\n  errorMessage.value = '';\n  if (fileInputRef.value) {\n    fileInputRef.value.value = '';\n  }\n};\n\n// Expose methods\ndefineExpose({ clearFiles, triggerFileInputClick });\n</script>\n\n"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","mimeToExtension","props","__props","emit","__emit","fileInputRef","ref","selectedFiles","isDragOver","errorMessage","heightClass","computed","heights","acceptedFormatsText","format","validateFiles","files","validFiles","maxBytes","file","handleInputFileChange","event","handleDrop","handleDragOver","handleDragEnter","handleDragLeave","triggerFileInputClick","removeFile","index","__expose","_normalizeClass","_hoisted_1","_createVNode","_unref","CloudArrowUpIcon","_renderSlot","_hoisted_2","_toDisplayString","_hoisted_3","_hoisted_4","_Fragment","_renderList","DocumentIcon","_hoisted_5","_withModifiers","$event","XMarkIcon","_hoisted_8"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/FormErrorWrapper.vue_vue_type_script_setup_true_lang-BQOlG_ab.js

@@ -0,0 +1,63 @@
+import { defineComponent as v, computed as f, createElementBlock as c, openBlock as i, renderSlot as x, createElementVNode as l, createVNode as m, unref as s, withCtx as y, Fragment as _, renderList as g, toDisplayString as w } from "vue";
+import { r as E } from "./ExclamationCircleIcon-DjxYk45_.js";
+import { S as k } from "./transition-_rPfnoET.js";
+const S = "sl-transition-all sl-duration-500 sl-overflow-hidden", b = "sl-transform sl-scale-95 sl-opacity-0 sl-max-h-0", B = "sl-transform sl-scale-100 sl-opacity-100 sl-max-h-96", F = "sl-transition-all sl-duration-500 sl-overflow-hidden", L = "sl-transform sl-scale-100 sl-opacity-100 sl-max-h-96", T = "sl-transform sl-scale-95 sl-opacity-0 sl-max-h-0", N = { class: "sl-mt-4" }, j = { class: "sl-flex sl-grow sl-rounded-md sl-bg-red-50 dark:sl-bg-red-900/20 sl-p-3 sl-text-sm sl-text-red-600 dark:sl-text-red-400 sl-ring-1 sl-ring-red-100 dark:sl-ring-red-800" }, C = { class: "sl-space-y-1" }, M = /* @__PURE__ */ v({
+  __name: "FormErrorWrapper",
+  props: {
+    errors: { default: () => ({}) },
+    show: { type: Boolean, default: !1 }
+  },
+  setup(u) {
+    const d = u, o = (t) => {
+      const r = [];
+      for (const n in t) {
+        const e = t[n];
+        if (typeof e == "string") {
+          try {
+            const a = JSON.parse(e);
+            if (typeof a == "object" && a !== null) {
+              r.push(...o(a));
+              continue;
+            }
+          } catch {
+          }
+          r.push(e);
+        } else typeof e == "object" && e !== null && r.push(...o(e));
+      }
+      return r;
+    }, p = f(() => o(d.errors).filter(Boolean)), h = f(() => d.show && p.value.length > 0);
+    return (t, r) => (i(), c("div", null, [
+      x(t.$slots, "default"),
+      l("div", N, [
+        m(s(k), {
+          show: h.value,
+          enter: s(S),
+          "enter-from": s(b),
+          "enter-to": s(B),
+          leave: s(F),
+          "leave-from": s(L),
+          "leave-to": s(T)
+        }, {
+          default: y(() => [
+            l("div", j, [
+              l("ul", C, [
+                (i(!0), c(_, null, g(p.value, (n, e) => (i(), c("li", {
+                  key: e,
+                  class: "sl-flex sl-items-center sl-gap-2"
+                }, [
+                  m(s(E), { class: "sl-h-4 sl-w-4 sl-flex-shrink-0" }),
+                  l("span", null, w(n), 1)
+                ]))), 128))
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["show", "enter", "enter-from", "enter-to", "leave", "leave-from", "leave-to"])
+      ])
+    ]));
+  }
+});
+export {
+  M as _
+};
+//# sourceMappingURL=FormErrorWrapper.vue_vue_type_script_setup_true_lang-BQOlG_ab.js.map

package/dist/FormErrorWrapper.vue_vue_type_script_setup_true_lang-BQOlG_ab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormErrorWrapper.vue_vue_type_script_setup_true_lang-BQOlG_ab.js","sources":["../src/utils/transitions.ts","../src/components/wrappers/FormErrorWrapper.vue"],"sourcesContent":["/**\n * Transition class utilities for HeadlessUI components\n */\n\n// Standard enter/leave transitions\nexport const enterTransitionClasses = 'sl-transition sl-ease-out sl-duration-300';\nexport const enterFromTransitionClasses = 'sl-opacity-0 sl-translate-y-4 sm:sl-translate-y-0 sm:sl-scale-95';\nexport const enterToTransitionClasses = 'sl-opacity-100 sl-translate-y-0 sm:sl-scale-100';\nexport const leaveTransitionClasses = 'sl-transition sl-ease-in sl-duration-200';\nexport const leaveFromTransitionClasses = 'sl-opacity-100 sl-translate-y-0 sm:sl-scale-100';\nexport const leaveToTransitionClasses = 'sl-opacity-0 sl-translate-y-4 sm:sl-translate-y-0 sm:sl-scale-95';\n\n// Fade transitions\nexport const fadeEnterTransition = 'sl-transition-opacity sl-ease-out sl-duration-300';\nexport const fadeEnterFrom = 'sl-opacity-0';\nexport const fadeEnterTo = 'sl-opacity-100';\nexport const fadeLeaveTransition = 'sl-transition-opacity sl-ease-in sl-duration-200';\nexport const fadeLeaveFrom = 'sl-opacity-100';\nexport const fadeLeaveTo = 'sl-opacity-0';\n\n// Slide transitions\nexport const slideEnterTransition = 'sl-transform sl-transition sl-ease-in-out sl-duration-300';\nexport const slideEnterFromLeft = '-sl-translate-x-full';\nexport const slideEnterFromRight = 'sl-translate-x-full';\nexport const slideEnterFromTop = '-sl-translate-y-full';\nexport const slideEnterFromBottom = 'sl-translate-y-full';\nexport const slideEnterTo = 'sl-translate-x-0 sl-translate-y-0';\nexport const slideLeaveTransition = 'sl-transform sl-transition sl-ease-in-out sl-duration-300';\nexport const slideLeaveFrom = 'sl-translate-x-0 sl-translate-y-0';\nexport const slideLeaveToLeft = '-sl-translate-x-full';\nexport const slideLeaveToRight = 'sl-translate-x-full';\nexport const slideLeaveToTop = '-sl-translate-y-full';\nexport const slideLeaveToBottom = 'sl-translate-y-full';\n\n// Scale transitions\nexport const scaleEnterTransition = 'sl-transition sl-ease-out sl-duration-200';\nexport const scaleEnterFrom = 'sl-opacity-0 sl-scale-95';\nexport const scaleEnterTo = 'sl-opacity-100 sl-scale-100';\nexport const scaleLeaveTransition = 'sl-transition sl-ease-in sl-duration-150';\nexport const scaleLeaveFrom = 'sl-opacity-100 sl-scale-100';\nexport const scaleLeaveTo = 'sl-opacity-0 sl-scale-95';\n\n// Height-based expand/collapse transitions (for FormErrorWrapper, accordions, etc.)\nexport const expandEnterTransition = 'sl-transition-all sl-duration-500 sl-overflow-hidden';\nexport const expandEnterFrom = 'sl-transform sl-scale-95 sl-opacity-0 sl-max-h-0';\nexport const expandEnterTo = 'sl-transform sl-scale-100 sl-opacity-100 sl-max-h-96';\nexport const expandLeaveTransition = 'sl-transition-all sl-duration-500 sl-overflow-hidden';\nexport const expandLeaveFrom = 'sl-transform sl-scale-100 sl-opacity-100 sl-max-h-96';\nexport const expandLeaveTo = 'sl-transform sl-scale-95 sl-opacity-0 sl-max-h-0';\n\n/**\n * Helper to create transition props for HeadlessUI components\n */\nexport interface TransitionProps {\n  enter: string;\n  enterFrom: string;\n  enterTo: string;\n  leave: string;\n  leaveFrom: string;\n  leaveTo: string;\n}\n\nexport function createFadeTransition(): TransitionProps {\n  return {\n    enter: fadeEnterTransition,\n    enterFrom: fadeEnterFrom,\n    enterTo: fadeEnterTo,\n    leave: fadeLeaveTransition,\n    leaveFrom: fadeLeaveFrom,\n    leaveTo: fadeLeaveTo,\n  };\n}\n\nexport function createScaleTransition(): TransitionProps {\n  return {\n    enter: scaleEnterTransition,\n    enterFrom: scaleEnterFrom,\n    enterTo: scaleEnterTo,\n    leave: scaleLeaveTransition,\n    leaveFrom: scaleLeaveFrom,\n    leaveTo: scaleLeaveTo,\n  };\n}\n\nexport function createSlideTransition(direction: 'left' | 'right' | 'top' | 'bottom' = 'left'): TransitionProps {\n  const enterFrom = {\n    left: slideEnterFromLeft,\n    right: slideEnterFromRight,\n    top: slideEnterFromTop,\n    bottom: slideEnterFromBottom,\n  }[direction];\n  \n  const leaveTo = {\n    left: slideLeaveToLeft,\n    right: slideLeaveToRight,\n    top: slideLeaveToTop,\n    bottom: slideLeaveToBottom,\n  }[direction];\n  \n  return {\n    enter: slideEnterTransition,\n    enterFrom,\n    enterTo: slideEnterTo,\n    leave: slideLeaveTransition,\n    leaveFrom: slideLeaveFrom,\n    leaveTo,\n  };\n}\n\nexport function createExpandTransition(): TransitionProps {\n  return {\n    enter: expandEnterTransition,\n    enterFrom: expandEnterFrom,\n    enterTo: expandEnterTo,\n    leave: expandLeaveTransition,\n    leaveFrom: expandLeaveFrom,\n    leaveTo: expandLeaveTo,\n  };\n}\n\n","<!--\n  @component FormErrorWrapper\n  @description Form error display container with transition.\n  \n  A wrapper that displays form validation errors in a styled container\n  with smooth enter/leave transitions.\n  \n  @props\n  - errors (object, optional): Object with error messages keyed by field name\n  - show (boolean, optional): Whether to show the error container\n  \n  @slots\n  - default: Content to wrap (usually the form)\n-->\n<template>\n  <div>\n    <slot />\n    <div class=\"sl-mt-4\">\n      <TransitionRoot \n        :show=\"showErrors\" \n        :enter=\"expandEnterTransition\"\n        :enter-from=\"expandEnterFrom\"\n        :enter-to=\"expandEnterTo\"\n        :leave=\"expandLeaveTransition\"\n        :leave-from=\"expandLeaveFrom\"\n        :leave-to=\"expandLeaveTo\"\n      >\n        <div class=\"sl-flex sl-grow sl-rounded-md sl-bg-red-50 dark:sl-bg-red-900/20 sl-p-3 sl-text-sm sl-text-red-600 dark:sl-text-red-400 sl-ring-1 sl-ring-red-100 dark:sl-ring-red-800\">\n          <ul class=\"sl-space-y-1\">\n            <li \n              v-for=\"(error, i) in formattedErrors\" \n              :key=\"i\" \n              class=\"sl-flex sl-items-center sl-gap-2\"\n            >\n              <ExclamationCircleIcon class=\"sl-h-4 sl-w-4 sl-flex-shrink-0\" />\n              <span>{{ error }}</span>\n            </li>\n          </ul>\n        </div>\n      </TransitionRoot>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { TransitionRoot } from '@headlessui/vue';\nimport { ExclamationCircleIcon } from '@heroicons/vue/24/outline';\nimport {\n  expandEnterTransition,\n  expandEnterFrom,\n  expandEnterTo,\n  expandLeaveTransition,\n  expandLeaveFrom,\n  expandLeaveTo,\n} from '../../utils/transitions';\n\ninterface Props {\n  errors?: Record<string, string | undefined | Record<string, unknown>>;\n  show?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  errors: () => ({}),\n  show: false,\n});\n\n/**\n * Recursively flatten nested error objects into an array of strings\n */\nconst flattenErrors = (errors: Record<string, unknown>): string[] => {\n  const errorMessages: string[] = [];\n  \n  for (const key in errors) {\n    const value = errors[key];\n    \n    if (typeof value === 'string') {\n      // Attempt to parse the string as JSON\n      try {\n        const parsed = JSON.parse(value);\n        if (typeof parsed === 'object' && parsed !== null) {\n          errorMessages.push(...flattenErrors(parsed as Record<string, unknown>));\n          continue;\n        }\n      } catch {\n        // Not a valid JSON string, it's a regular error message\n      }\n      errorMessages.push(value);\n    } else if (typeof value === 'object' && value !== null) {\n      errorMessages.push(...flattenErrors(value as Record<string, unknown>));\n    }\n  }\n  \n  return errorMessages;\n};\n\nconst formattedErrors = computed(() => {\n  return flattenErrors(props.errors as Record<string, unknown>).filter(Boolean);\n});\n\nconst showErrors = computed(() => {\n  return props.show && formattedErrors.value.length > 0;\n});\n</script>\n\n"],"names":["expandEnterTransition","expandEnterFrom","expandEnterTo","expandLeaveTransition","expandLeaveFrom","expandLeaveTo","props","__props","flattenErrors","errors","errorMessages","key","value","parsed","formattedErrors","computed","showErrors","_createElementBlock","_renderSlot","_ctx","_createElementVNode","_hoisted_1","_createVNode","_unref","TransitionRoot","_hoisted_2","_hoisted_3","_openBlock","_Fragment","_renderList","error","i","ExclamationCircleIcon"],"mappings":";;;AA2CO,MAAMA,IAAwB,wDACxBC,IAAkB,oDAClBC,IAAgB,wDAChBC,IAAwB,wDACxBC,IAAkB,wDAClBC,IAAgB;;;;;;;ACc7B,UAAMC,IAAQC,GAQRC,IAAgB,CAACC,MAA8C;AACnE,YAAMC,IAA0B,CAAA;AAEhC,iBAAWC,KAAOF,GAAQ;AACxB,cAAMG,IAAQH,EAAOE,CAAG;AAExB,YAAI,OAAOC,KAAU,UAAU;AAE7B,cAAI;AACF,kBAAMC,IAAS,KAAK,MAAMD,CAAK;AAC/B,gBAAI,OAAOC,KAAW,YAAYA,MAAW,MAAM;AACjD,cAAAH,EAAc,KAAK,GAAGF,EAAcK,CAAiC,CAAC;AACtE;AAAA,YACF;AAAA,UACF,QAAQ;AAAA,UAER;AACA,UAAAH,EAAc,KAAKE,CAAK;AAAA,QAC1B,MAAA,CAAW,OAAOA,KAAU,YAAYA,MAAU,QAChDF,EAAc,KAAK,GAAGF,EAAcI,CAAgC,CAAC;AAAA,MAEzE;AAEA,aAAOF;AAAA,IACT,GAEMI,IAAkBC,EAAS,MACxBP,EAAcF,EAAM,MAAiC,EAAE,OAAO,OAAO,CAC7E,GAEKU,IAAaD,EAAS,MACnBT,EAAM,QAAQQ,EAAgB,MAAM,SAAS,CACrD;2BAvFCG,EA0BM,OAAA,MAAA;AAAA,MAzBJC,EAAQC,EAAA,QAAA,SAAA;AAAA,MACRC,EAuBM,OAvBNC,GAuBM;AAAA,QAtBJC,EAqBiBC,EAAAC,CAAA,GAAA;AAAA,UApBd,MAAMR,EAAA;AAAA,UACN,OAAOO,EAAAvB,CAAA;AAAA,UACP,cAAYuB,EAAAtB,CAAA;AAAA,UACZ,YAAUsB,EAAArB,CAAA;AAAA,UACV,OAAOqB,EAAApB,CAAA;AAAA,UACP,cAAYoB,EAAAnB,CAAA;AAAA,UACZ,YAAUmB,EAAAlB,CAAA;AAAA,QAAA;qBAEX,MAWM;AAAA,YAXNe,EAWM,OAXNK,GAWM;AAAA,cAVJL,EASK,MATLM,GASK;AAAA,iBARHC,EAAA,EAAA,GAAAV,EAOKW,GAAA,MAAAC,EANkBf,EAAA,OAAe,CAA5BgB,GAAOC,YADjBd,EAOK,MAAA;AAAA,kBALF,KAAKc;AAAA,kBACN,OAAM;AAAA,gBAAA;kBAENT,EAAgEC,EAAAS,CAAA,GAAA,EAAzC,OAAM,kCAAgC;AAAA,kBAC7DZ,EAAwB,gBAAfU,CAAK,GAAA,CAAA;AAAA,gBAAA;;;;;;;;;;"}

package/dist/FunnelChart.vue_vue_type_script_setup_true_lang-B8QYlJ-s.js

@@ -0,0 +1,67 @@
+import { defineComponent as n, computed as s, createBlock as f, openBlock as c, mergeProps as p } from "vue";
+import d from "./charts/BaseChart.js";
+import { chartColors as h } from "./charts/chartTheme.js";
+const C = /* @__PURE__ */ n({
+  __name: "FunnelChart",
+  props: {
+    data: {},
+    title: {},
+    height: { default: 300 },
+    colors: { default: () => h.primary },
+    loading: { type: Boolean, default: !1 },
+    sort: { default: "descending" },
+    showLabels: { type: Boolean, default: !0 }
+  },
+  emits: ["click"],
+  setup(o, { emit: i }) {
+    const t = o, l = i, r = s(() => ({
+      title: t.title ? { text: t.title } : void 0,
+      tooltip: {
+        trigger: "item",
+        formatter: "{b}: {c}"
+      },
+      color: t.colors,
+      series: [{
+        type: "funnel",
+        left: "10%",
+        width: "80%",
+        minSize: "20%",
+        maxSize: "100%",
+        gap: 2,
+        sort: t.sort,
+        label: {
+          show: t.showLabels,
+          position: "inside",
+          color: "#ffffff",
+          fontSize: 12,
+          fontWeight: 500
+        },
+        labelLine: {
+          show: !1
+        },
+        itemStyle: {
+          borderColor: "#ffffff",
+          borderWidth: 1
+        },
+        emphasis: {
+          label: {
+            fontSize: 14,
+            fontWeight: 600
+          }
+        },
+        data: t.data
+      }]
+    })), a = (e) => {
+      l("click", e);
+    };
+    return (e, m) => (c(), f(d, p({
+      option: r.value,
+      height: e.height,
+      loading: e.loading
+    }, e.$attrs, { onClick: a }), null, 16, ["option", "height", "loading"]));
+  }
+});
+export {
+  C as _
+};
+//# sourceMappingURL=FunnelChart.vue_vue_type_script_setup_true_lang-B8QYlJ-s.js.map

package/dist/FunnelChart.vue_vue_type_script_setup_true_lang-B8QYlJ-s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.vue_vue_type_script_setup_true_lang-B8QYlJ-s.js","sources":["../src/components/charts/FunnelChart.vue"],"sourcesContent":["<!--\n  @component FunnelChart\n  @description Funnel chart for conversion/flow visualization.\n  \n  @props\n  - data (array, required): Array of {name, value} objects\n  - title (string, optional): Chart title\n  - height (number|string, optional): Chart height\n  - colors (array, optional): Custom color palette\n  - sort (string, optional): Sort order - 'ascending' | 'descending' | 'none'\n  \n  @example\n  <FunnelChart\n    :data=\"[\n      { name: 'Visits', value: 5000 },\n      { name: 'Signups', value: 3000 },\n      { name: 'Purchases', value: 1000 }\n    ]\"\n    title=\"Conversion Funnel\"\n  />\n-->\n<template>\n  <BaseChart\n    :option=\"chartOption\"\n    :height=\"height\"\n    :loading=\"loading\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BaseChart from './BaseChart.vue';\nimport { chartColors } from './chartTheme';\nimport type { EChartsOption } from 'echarts';\n\ninterface FunnelDataItem {\n  name: string;\n  value: number;\n}\n\ninterface Props {\n  data: FunnelDataItem[];\n  title?: string;\n  height?: number | string;\n  colors?: string[];\n  loading?: boolean;\n  sort?: 'ascending' | 'descending' | 'none';\n  showLabels?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  height: 300,\n  colors: () => chartColors.primary,\n  loading: false,\n  sort: 'descending',\n  showLabels: true,\n});\n\nconst emit = defineEmits<{\n  click: [params: unknown];\n}>();\n\nconst chartOption = computed<EChartsOption>(() => {\n  return {\n    title: props.title ? { text: props.title } : undefined,\n    tooltip: {\n      trigger: 'item',\n      formatter: '{b}: {c}',\n    },\n    color: props.colors,\n    series: [{\n      type: 'funnel',\n      left: '10%',\n      width: '80%',\n      minSize: '20%',\n      maxSize: '100%',\n      gap: 2,\n      sort: props.sort,\n      label: {\n        show: props.showLabels,\n        position: 'inside',\n        color: '#ffffff',\n        fontSize: 12,\n        fontWeight: 500,\n      },\n      labelLine: {\n        show: false,\n      },\n      itemStyle: {\n        borderColor: '#ffffff',\n        borderWidth: 1,\n      },\n      emphasis: {\n        label: {\n          fontSize: 14,\n          fontWeight: 600,\n        },\n      },\n      data: props.data,\n    }],\n  };\n});\n\nconst handleClick = (params: unknown): void => {\n  emit('click', params);\n};\n</script>\n\n"],"names":["props","__props","emit","__emit","chartOption","computed","handleClick","params","_openBlock","_createBlock","BaseChart","_mergeProps","height","loading","$attrs"],"mappings":";;;;;;;;;;;;;;;;AAoDA,UAAMA,IAAQC,GAQRC,IAAOC,GAIPC,IAAcC,EAAwB,OACnC;AAAA,MACL,OAAOL,EAAM,QAAQ,EAAE,MAAMA,EAAM,UAAU;AAAA,MAC7C,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA,MAEb,OAAOA,EAAM;AAAA,MACb,QAAQ,CAAC;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,KAAK;AAAA,QACL,MAAMA,EAAM;AAAA,QACZ,OAAO;AAAA,UACL,MAAMA,EAAM;AAAA,UACZ,UAAU;AAAA,UACV,OAAO;AAAA,UACP,UAAU;AAAA,UACV,YAAY;AAAA,QAAA;AAAA,QAEd,WAAW;AAAA,UACT,MAAM;AAAA,QAAA;AAAA,QAER,WAAW;AAAA,UACT,aAAa;AAAA,UACb,aAAa;AAAA,QAAA;AAAA,QAEf,UAAU;AAAA,UACR,OAAO;AAAA,YACL,UAAU;AAAA,YACV,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,QAEF,MAAMA,EAAM;AAAA,MAAA,CACb;AAAA,IAAA,EAEJ,GAEKM,IAAc,CAACC,MAA0B;AAC7C,MAAAL,EAAK,SAASK,CAAM;AAAA,IACtB;sBArFEC,EAAA,GAAAC,EAMEC,GANFC,EAME;AAAA,MALC,QAAQP,EAAA;AAAA,MACR,QAAQQ,EAAAA;AAAAA,MACR,SAASC,EAAAA;AAAAA,IAAAA,GACFC,EAAAA,QAAM,EACb,SAAOR,EAAA,CAAW,GAAA,MAAA,IAAA,CAAA,UAAA,UAAA,SAAA,CAAA;AAAA;;"}

package/dist/HiddenInput.vue_vue_type_script_setup_true_lang-DYdvWmVE.js

@@ -0,0 +1,22 @@
+import { defineComponent as t, createElementBlock as a, openBlock as p, unref as r } from "vue";
+import { g as m } from "./id-DafBB_QF.js";
+const s = ["name", "id", "value"], c = /* @__PURE__ */ t({
+  __name: "HiddenInput",
+  props: {
+    name: {},
+    value: { default: "" }
+  },
+  setup(n) {
+    const o = m(`sl-${n.name}`);
+    return (e, d) => (p(), a("input", {
+      name: e.name,
+      id: r(o),
+      type: "hidden",
+      value: e.value
+    }, null, 8, s));
+  }
+});
+export {
+  c as _
+};
+//# sourceMappingURL=HiddenInput.vue_vue_type_script_setup_true_lang-DYdvWmVE.js.map

package/dist/HiddenInput.vue_vue_type_script_setup_true_lang-DYdvWmVE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenInput.vue_vue_type_script_setup_true_lang-DYdvWmVE.js","sources":["../src/components/inputs/HiddenInput.vue"],"sourcesContent":["<!--\n  @component HiddenInput\n  @description Hidden input for storing form data without display.\n  \n  A simple hidden input element for storing values in forms that don't\n  need to be visible to the user. Useful for tracking IDs, tokens, or\n  other metadata within form submissions.\n  \n  @props\n  - name (string, required): Field name for form binding\n  - value (string, optional): The hidden value\n  \n  @example\n  <HiddenInput name=\"userId\" :value=\"user.id\" />\n-->\n<template>\n  <input \n    :name=\"name\" \n    :id=\"id\" \n    type=\"hidden\" \n    :value=\"value\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { generateId } from '../../utils/id'\n\ninterface Props {\n  name: string\n  value?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  value: ''\n})\n\nconst id = generateId(`sl-${props.name}`)\n</script>\n\n"],"names":["id","generateId","__props","_createElementBlock","name","_unref","value"],"mappings":";;;;;;;;;AAoCA,UAAMA,IAAKC,EAAW,MAJRC,EAIoB,IAAI,EAAE;2BApBtCC,EAKE,SAAA;AAAA,MAJC,MAAMC,EAAAA;AAAAA,MACN,IAAIC,EAAAL,CAAA;AAAA,MACL,MAAK;AAAA,MACJ,OAAOM,EAAAA;AAAAA,IAAAA;;;"}

package/dist/InformationCircleIcon-B322GNIt.js

@@ -0,0 +1,40 @@
+import { createElementBlock as e, openBlock as r, createElementVNode as o } from "vue";
+function i(t, n) {
+  return r(), e("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"
+  }, [
+    o("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+    })
+  ]);
+}
+function l(t, n) {
+  return r(), e("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"
+  }, [
+    o("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
+    })
+  ]);
+}
+export {
+  i as a,
+  l as r
+};
+//# sourceMappingURL=InformationCircleIcon-B322GNIt.js.map

package/dist/InformationCircleIcon-B322GNIt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InformationCircleIcon-B322GNIt.js","sources":["../node_modules/@heroicons/vue/24/outline/esm/CheckCircleIcon.js","../node_modules/@heroicons/vue/24/outline/esm/InformationCircleIcon.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: \"M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"\n    })\n  ]))\n}","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: \"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"\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,EACL,CAAG;AACH;AChBe,SAASL,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,EACL,CAAG;AACH;","x_google_ignoreList":[0,1]}

package/dist/InlineTabs.vue_vue_type_script_setup_true_lang-DhkX5sWS.js

@@ -0,0 +1,93 @@
+import { defineComponent as w, createElementBlock as s, openBlock as t, createCommentVNode as o, createElementVNode as r, createVNode as I, unref as l, toDisplayString as n, Fragment as d, renderList as m, normalizeClass as u, withModifiers as V, createTextVNode as N, renderSlot as h } from "vue";
+import { _ as S } from "./SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js";
+import { u as $ } from "./useSimpleTabs-CSgkChEU.js";
+const B = { class: "sl-w-full" }, M = {
+  key: 0,
+  class: "sl-block sm:sl-hidden sl-mb-4"
+}, E = { class: "sl-hidden sm:sl-block" }, O = { class: "sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sm:sl-flex sm:sl-items-baseline" }, U = {
+  key: 0,
+  class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-800 dark:sl-text-white"
+}, z = { class: "sl-mt-4 sm:sl-ml-10 sm:sl-mt-0" }, A = { class: "sl--mb-px sl-flex sl-space-x-8" }, D = ["onClick", "aria-current"], F = { class: "sl-mt-4" }, L = { key: 0 }, K = /* @__PURE__ */ w({
+  __name: "InlineTabs",
+  props: {
+    tabs: {},
+    title: {},
+    dropdownOnMobile: { type: Boolean, default: !0 },
+    badgeTheme: { default: "primary" }
+  },
+  emits: ["tab-changed"],
+  setup(p, { emit: b }) {
+    const c = p, k = b, {
+      localTabs: i,
+      selectInputItems: g,
+      selectedTabItem: _,
+      setActiveTab: x,
+      handleSelectInputChange: f,
+      hasCount: y,
+      slots: v,
+      selectId: T
+    } = $({
+      getTabs: () => c.tabs,
+      onTabChange: (a) => k("tab-changed", a),
+      includeCountInName: !0,
+      badgeTheme: c.badgeTheme
+    });
+    return (a, j) => (t(), s("div", B, [
+      a.dropdownOnMobile ? (t(), s("div", M, [
+        I(S, {
+          name: l(T),
+          label: a.title,
+          items: l(g),
+          "model-value": l(_),
+          "item-key": "index",
+          "item-text": "name",
+          placeholder: "Select tab",
+          "onUpdate:modelValue": l(f)
+        }, null, 8, ["name", "label", "items", "model-value", "onUpdate:modelValue"])
+      ])) : o("", !0),
+      r("div", E, [
+        r("div", O, [
+          a.title ? (t(), s("h3", U, n(a.title), 1)) : o("", !0),
+          r("div", z, [
+            r("nav", A, [
+              (t(!0), s(d, null, m(l(i), (e, C) => (t(), s("a", {
+                key: e.name,
+                href: "#",
+                onClick: V((q) => l(x)(C), ["prevent"]),
+                class: u([
+                  e.current ? "sl-border-stachelock-600 sl-text-stachelock-600 dark:sl-text-stachelock-400" : "sl-border-transparent sl-text-gray-500 dark:sl-text-slate-400 hover:sl-border-gray-300 dark:hover:sl-border-slate-600 hover:sl-text-gray-700 dark:hover:sl-text-slate-300",
+                  "sl-whitespace-nowrap sl-border-b-2 sl-px-1 sl-pb-4 sl-text-sm sl-font-medium sl-transition-colors sl-duration-200 sl-flex sl-items-center sl-gap-2",
+                  e.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : "sl-cursor-pointer"
+                ]),
+                "aria-current": e.current ? "page" : void 0
+              }, [
+                N(n(e.name) + " ", 1),
+                l(y)(e) ? (t(), s("span", {
+                  key: 0,
+                  class: u([
+                    "sl-rounded-full sl-py-0.5 sl-px-2.5 sl-text-xs sl-font-medium sl-tabular-nums",
+                    e.current ? "sl-bg-stachelock-100 dark:sl-bg-stachelock-900/30 sl-text-stachelock-600 dark:sl-text-stachelock-400" : "sl-bg-gray-100 dark:sl-bg-slate-700 sl-text-gray-800 dark:sl-text-slate-200"
+                  ])
+                }, n(e.count), 3)) : o("", !0)
+              ], 10, D))), 128))
+            ])
+          ])
+        ])
+      ]),
+      r("div", F, [
+        h(a.$slots, "default"),
+        (t(!0), s(d, null, m(l(i), (e) => (t(), s(d, {
+          key: e.name
+        }, [
+          e.current && l(v)[e.name] ? (t(), s("div", L, [
+            h(a.$slots, e.name)
+          ])) : o("", !0)
+        ], 64))), 128))
+      ])
+    ]));
+  }
+});
+export {
+  K as _
+};
+//# sourceMappingURL=InlineTabs.vue_vue_type_script_setup_true_lang-DhkX5sWS.js.map

package/dist/InlineTabs.vue_vue_type_script_setup_true_lang-DhkX5sWS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineTabs.vue_vue_type_script_setup_true_lang-DhkX5sWS.js","sources":["../src/components/tabs/InlineTabs.vue"],"sourcesContent":["<!--\n  @component InlineTabs\n  @description Simple inline tab navigation with underline indicator.\n  \n  A lightweight tab component for simple tab navigation scenarios.\n  Uses named slots for tab content. Shows SelectInput dropdown on mobile.\n  \n  @props\n  - tabs (SimpleTabItem[], required): Array of tab configurations\n  - title (string, optional): Optional heading title\n  - dropdownOnMobile (boolean, optional): Show dropdown on mobile (default: true)\n  - badgeTheme (TabBadgeTheme, optional): Theme for count badges (default: 'primary')\n  \n  @emits\n  - tab-changed: Emitted when active tab changes, payload is the new index\n  \n  @example\n  <InlineTabs\n    title=\"Settings\"\n    :tabs=\"[\n      { name: 'General', current: true },\n      { name: 'Security', current: false, count: 2 },\n      { name: 'Notifications', current: false, count: 5 }\n    ]\"\n    @tab-changed=\"handleTabChange\"\n  >\n    <template #General>General content</template>\n    <template #Security>Security content</template>\n    <template #Notifications>Notifications content</template>\n  </InlineTabs>\n-->\n<template>\n  <div class=\"sl-w-full\">\n    <!-- Mobile dropdown using SelectInput -->\n    <div v-if=\"dropdownOnMobile\" class=\"sl-block sm:sl-hidden sl-mb-4\">\n      <SelectInput\n        :name=\"selectId\"\n        :label=\"title\"\n        :items=\"selectInputItems\"\n        :model-value=\"selectedTabItem\"\n        item-key=\"index\"\n        item-text=\"name\"\n        placeholder=\"Select tab\"\n        @update:model-value=\"handleSelectInputChange\"\n      />\n    </div>\n\n    <!-- Desktop tabs -->\n    <div class=\"sl-hidden sm:sl-block\">\n      <div class=\"sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sm:sl-flex sm:sl-items-baseline\">\n        <h3\n          v-if=\"title\"\n          class=\"sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-800 dark:sl-text-white\"\n        >\n          {{ title }}\n        </h3>\n        <div class=\"sl-mt-4 sm:sl-ml-10 sm:sl-mt-0\">\n          <nav class=\"sl--mb-px sl-flex sl-space-x-8\">\n            <a\n              v-for=\"(tab, index) in localTabs\"\n              :key=\"tab.name\"\n              href=\"#\"\n              @click.prevent=\"setActiveTab(index)\"\n              :class=\"[\n                tab.current \n                  ? 'sl-border-stachelock-600 sl-text-stachelock-600 dark:sl-text-stachelock-400' \n                  : 'sl-border-transparent sl-text-gray-500 dark:sl-text-slate-400 hover:sl-border-gray-300 dark:hover:sl-border-slate-600 hover:sl-text-gray-700 dark:hover:sl-text-slate-300',\n                'sl-whitespace-nowrap sl-border-b-2 sl-px-1 sl-pb-4 sl-text-sm sl-font-medium sl-transition-colors sl-duration-200 sl-flex sl-items-center sl-gap-2',\n                tab.disabled ? 'sl-opacity-50 sl-cursor-not-allowed' : 'sl-cursor-pointer'\n              ]\"\n              :aria-current=\"tab.current ? 'page' : undefined\"\n            >\n              {{ tab.name }}\n              <span\n                v-if=\"hasCount(tab)\"\n                :class=\"[\n                  'sl-rounded-full sl-py-0.5 sl-px-2.5 sl-text-xs sl-font-medium sl-tabular-nums',\n                  tab.current\n                    ? 'sl-bg-stachelock-100 dark:sl-bg-stachelock-900/30 sl-text-stachelock-600 dark:sl-text-stachelock-400'\n                    : 'sl-bg-gray-100 dark:sl-bg-slate-700 sl-text-gray-800 dark:sl-text-slate-200'\n                ]\"\n              >\n                {{ tab.count }}\n              </span>\n            </a>\n          </nav>\n        </div>\n      </div>\n    </div>\n    \n    <!-- Default slot for general content -->\n    <div class=\"sl-mt-4\">\n      <slot name=\"default\" />\n      \n      <!-- Named slots for each tab -->\n      <template v-for=\"tab in localTabs\" :key=\"tab.name\">\n        <div v-if=\"tab.current && slots[tab.name]\">\n          <slot :name=\"tab.name\" />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport SelectInput from '../inputs/SelectInput.vue';\nimport { useSimpleTabs } from '../../composables/useSimpleTabs';\nimport type { SimpleTabItem, TabBadgeTheme } from '../../types/tabs';\n\ninterface Props {\n  tabs: SimpleTabItem[];\n  title?: string;\n  dropdownOnMobile?: boolean;\n  badgeTheme?: TabBadgeTheme;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  dropdownOnMobile: true,\n  badgeTheme: 'primary'\n});\n\nconst emit = defineEmits<{\n  'tab-changed': [tabIndex: number];\n}>();\n\n// Use the shared composable for all tab logic\nconst {\n  localTabs,\n  selectInputItems,\n  selectedTabItem,\n  setActiveTab,\n  handleSelectInputChange,\n  hasCount,\n  slots,\n  selectId\n} = useSimpleTabs({\n  getTabs: () => props.tabs,\n  onTabChange: (index) => emit('tab-changed', index),\n  includeCountInName: true,\n  badgeTheme: props.badgeTheme\n});\n</script>\n"],"names":["props","__props","emit","__emit","localTabs","selectInputItems","selectedTabItem","setActiveTab","handleSelectInputChange","hasCount","slots","selectId","useSimpleTabs","index","_openBlock","_createElementBlock","_hoisted_1","dropdownOnMobile","_hoisted_2","_createVNode","SelectInput","_unref","title","_createElementVNode","_hoisted_3","_hoisted_4","_hoisted_5","_toDisplayString","_hoisted_6","_hoisted_7","_Fragment","_renderList","tab","_withModifiers","$event","_normalizeClass","_hoisted_9","_renderSlot","_ctx","_hoisted_10"],"mappings":";;;;;;;;;;;;;;;;;;;AAoHA,UAAMA,IAAQC,GAKRC,IAAOC,GAKP;AAAA,MACJ,WAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,yBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,IAAA,IACEC,EAAc;AAAA,MAChB,SAAS,MAAMZ,EAAM;AAAA,MACrB,aAAa,CAACa,MAAUX,EAAK,eAAeW,CAAK;AAAA,MACjD,oBAAoB;AAAA,MACpB,YAAYb,EAAM;AAAA,IAAA,CACnB;sBA5GCc,EAAA,GAAAC,EAqEM,OArENC,GAqEM;AAAA,MAnEOC,EAAAA,oBAAXH,EAAA,GAAAC,EAWM,OAXNG,GAWM;AAAA,QAVJC,EASEC,GAAA;AAAA,UARC,MAAMC,EAAAV,CAAA;AAAA,UACN,OAAOW,EAAAA;AAAAA,UACP,OAAOD,EAAAhB,CAAA;AAAA,UACP,eAAagB,EAAAf,CAAA;AAAA,UACd,YAAS;AAAA,UACT,aAAU;AAAA,UACV,aAAY;AAAA,UACX,uBAAoBe,EAAAb,CAAA;AAAA,QAAA;;MAKzBe,EAwCM,OAxCNC,GAwCM;AAAA,QAvCJD,EAsCM,OAtCNE,GAsCM;AAAA,UApCIH,EAAAA,cADRP,EAKK,MALLW,GAKKC,EADAL,EAAAA,KAAK,GAAA,CAAA;UAEVC,EA8BM,OA9BNK,GA8BM;AAAA,YA7BJL,EA4BM,OA5BNM,GA4BM;AAAA,eA3BJf,EAAA,EAAA,GAAAC,EA0BIe,GAAA,MAAAC,EAzBqBV,EAAAjB,CAAA,GAAS,CAAxB4B,GAAKnB,YADfE,EA0BI,KAAA;AAAA,gBAxBD,KAAKiB,EAAI;AAAA,gBACV,MAAK;AAAA,gBACJ,SAAKC,EAAA,CAAAC,MAAUb,EAAAd,CAAA,EAAaM,CAAK,GAAA,CAAA,SAAA,CAAA;AAAA,gBACjC,OAAKsB,EAAA;AAAA,kBAAoBH,EAAI;;kBAAmeA,EAAI,WAAQ,wCAAA;AAAA,gBAAA;gBAO5gB,gBAAcA,EAAI,mBAAmB;AAAA,cAAA;oBAEnCA,EAAI,IAAI,IAAG,KACd,CAAA;AAAA,gBACQX,EAAAZ,CAAA,EAASuB,CAAG,UADpBjB,EAUO,QAAA;AAAA;kBARJ,OAAKoB,EAAA;AAAA;oBAAyHH,EAAI;;mBAOhIL,EAAAK,EAAI,KAAK,GAAA,CAAA;;;;;;MASxBT,EASM,OATNa,GASM;AAAA,QARJC,EAAuBC,EAAA,QAAA,SAAA;AAAA,gBAGvBvB,EAIWe,GAAA,MAAAC,EAJaV,EAAAjB,CAAA,GAAS,CAAhB4B;UAAwB,KAAAA,EAAI;AAAA,QAAA;UAChCA,EAAI,WAAWX,KAAMW,EAAI,IAAI,UAAxCjB,EAEM,OAAAwB,GAAA;AAAA,YADJF,EAAyBC,EAAA,QAAZN,EAAI,IAAI;AAAA,UAAA;;;;;;"}