@stachelock/ui 0.3.1 → 0.4.0

package/dist/{TagifyInput.vue_vue_type_script_setup_true_lang-CAK6ZIiz.js → TagifyInput.vue_vue_type_script_setup_true_lang-Da6-pRJ2.js}

@@ -1,5 +1,5 @@
 import { defineComponent as V, ref as p, watch as z, onMounted as A, createBlock as w, openBlock as u, withCtx as g, createElementVNode as d, normalizeClass as F, createElementBlock as c, Fragment as T, renderList as S, withDirectives as k, toDisplayString as h, normalizeStyle as Q, withKeys as C, withModifiers as y, vModelText as B, createVNode as U, unref as R, createCommentVNode as K, renderSlot as L, nextTick as W } from "vue";
-import { _ } from "./UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.js";
+import { _ } from "./UiBadge.vue_vue_type_script_setup_true_lang-DOtbLb9x.js";
 import j from "./forms/FormFieldWrapper.js";
 import { r as G } from "./XMarkIcon-DNvCkiOy.js";
 const H = { key: 0 }, P = ["onUpdate:modelValue", "placeholder", "disabled", "onKeydown", "onBlur"], X = ["onClick", "disabled"], Y = { class: "sl-flex-1 sl-min-w-0 sl-relative" }, Z = ["placeholder", "disabled", "onKeydown"], ee = { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-pointer-events-auto" }, te = {
@@ -227,4 +227,4 @@ const H = { key: 0 }, P = ["onUpdate:modelValue", "placeholder", "disabled", "on
 export {
   ce as _
 };
-//# sourceMappingURL=TagifyInput.vue_vue_type_script_setup_true_lang-CAK6ZIiz.js.map
+//# sourceMappingURL=TagifyInput.vue_vue_type_script_setup_true_lang-Da6-pRJ2.js.map

package/dist/TagifyInput.vue_vue_type_script_setup_true_lang-Da6-pRJ2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagifyInput.vue_vue_type_script_setup_true_lang-Da6-pRJ2.js","sources":["../src/components/inputs/TagifyInput.vue"],"sourcesContent":["<template>\n  <FormFieldWrapper\n    :id=\"name\"\n    :name=\"name\"\n    :label=\"label\"\n    :tertiary-label=\"tertiaryLabel\"\n    :error-message=\"errorMessage\"\n    :disabled=\"disabled\"\n    :optional=\"optional\"\n  >\n    <template #tertiary-label-overlay>\n      <slot name=\"tertiary-overlay\"></slot>\n    </template>\n    \n    <div class=\"sl-flex sl-flex-wrap sl-items-center sl-gap-4 sl-rounded-md sl-bg-white sl-px-3 sm:sl-text-sm sm:sl-leading-6\"\n      :class=\"inline ? null : 'sl-shadow-sm sl-border sl-border-gray-300 focus-within:sl-ring-2 focus-within:sl-ring-stachelock-600'\">\n      <!-- Display selected tags as badges -->\n      <UiBadge v-for=\"(tag, index) in selectedTags\" :key=\"index\" @click=\"editTag(index)\" theme=\"primary\" size=\"sm\">\n        <span v-if=\"!tag.isEditing\">{{ tagDisplay(tag) }}</span>\n        <input v-else ref=\"editInput\" v-model=\"tag[props.itemText]\" :placeholder=\"placeholder\"\n          :disabled=\"disabled\" @keydown.enter.prevent=\"stopEditingTag(index)\"\n          @blur=\"stopEditingTag(index)\"\n          class=\"sl-bg-transparent sl-border-none sl-outline-none sl-text-stachelock-600 sl-text-sm placeholder:sl-text-stachelock-400/80 focus:sl-ring-0 focus:sl-ring-stachelock-600 focus:sl-rounded-lg -sl-mx-3 -sl-my-2\"\n          :style=\"{ width: tag[props.itemText].length + 4 + 'ch' }\" />\n        <button type=\"button\" class=\"sl-ml-2 sl-text-stachelock-600 hover:sl-text-stachelock-400 focus:sl-outline-none\"\n          @click.stop=\"removeTag(index)\" :disabled=\"disabled\">\n          <XMarkIcon class=\"sl-h-4 sl-w-4\" />\n        </button>\n      </UiBadge>\n      <!-- Input for adding new tags -->\n      <div class=\"sl-flex-1 sl-min-w-0 sl-relative\">\n        <input ref=\"input\" v-model=\"query\" :placeholder=\"placeholder\" @input=\"filterItems\"\n          :disabled=\"disabled\" @keydown.enter.prevent=\"addTag\"\n          class=\"sl-w-full sl-border-none sl-outline-none sl-rounded-md focus:sl-ring-0 sl-text-sm sl-font-light -sl-mx-3 sl-pr-12\" />\n        <!-- Overlay slot aligned to the far right -->\n        <div class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-pointer-events-auto\">\n          <slot name=\"input-overlay\" />\n        </div>\n        <!-- Suggestions Dropdown -->\n        <div v-if=\"showDropdown && !disabled\"\n          class=\"sl-absolute sl-z-50 sl-mt-1 sl-max-h-60 sl-w-full sl-overflow-auto sl-rounded-md sl-bg-white sl-py-1 sl-text-base sl-shadow-lg sl-ring-1 sl-ring-black sl-ring-opacity-5 focus:sl-outline-none sm:sl-text-sm\">\n          <div v-for=\"item in filteredItems\" :key=\"item[itemKey]\"\n            class=\"sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9 hover:sl-bg-stachelock-600 hover:sl-text-white\"\n            @click.prevent=\"selectSuggestion(item)\">\n            <div class=\"sl-flex\">\n              <span class=\"sl-truncate sl-font-semibold\">\n                <span class=\"sl-block sl-truncate\">{{ itemDisplay(item) }}</span>\n              </span>\n              <span v-if=\"showSubext\" class=\"sl-ml-2 sl-truncate sl-text-gray-500\">\n                {{ itemSecondaryDisplay(item) }}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </FormFieldWrapper>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref, watch, onMounted, nextTick } from 'vue';\nimport { XMarkIcon } from '@heroicons/vue/20/solid';\nimport UiBadge from '../UiBadge.vue';\nimport FormFieldWrapper from '../forms/FormFieldWrapper.vue';\nimport type { TagifyItem } from '../../types/inputs';\n\ntype Item = TagifyItem;\n\nconst props = defineProps({\n  items: {\n    type: Array as () => Item[],\n    required: true,\n  },\n  value: {\n    type: Array as () => Item[],\n    default: () => [],\n  },\n  name: {\n    type: String,\n    required: true,\n  },\n  label: {\n    type: String,\n    required: false,\n  },\n  itemKey: {\n    type: String,\n    default: 'id',\n  },\n  itemText: {\n    type: String,\n    default: 'value',\n  },\n  itemSubtext: {\n    type: String,\n    default: 'name',\n  },\n  showSubext: {\n    type: Boolean,\n    default: true\n  },\n  tagDisplayKey: {\n    type: String,\n    default: 'name',\n  },\n  tertiaryLabel: {\n    type: String,\n    required: false,\n  },\n  pattern: {\n    type: RegExp,\n    default: null,\n  },\n  inline: {\n    type: Boolean,\n    default: false,\n  },\n  placeholder: {\n    type: String,\n    default: 'Add a tag...',\n  },\n  disabled: {\n    type: Boolean,\n    default: false\n  },\n  optional: {\n    type: Boolean,\n    default: false\n  },\n  errorMessage: {\n    type: String,\n    default: ''\n  },\n  hasInputRing: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst emits = defineEmits(['update:value', 'update:query', 'invalid-tag']);\n\nconst query = ref<string>('');\nconst filteredItems = ref<Item[]>([]);\nconst selectedTags = ref<Item[]>(JSON.parse(JSON.stringify(props.value)));\nconst showDropdown = ref(false);\n\nwatch(\n  () => props.value,\n  (newVal) => {\n    if (JSON.stringify(newVal) !== JSON.stringify(selectedTags.value)) {\n      selectedTags.value = JSON.parse(JSON.stringify(newVal));\n    }\n  },\n  { deep: true }\n);\n\nconst itemDisplay = (item: Item) => item[props.itemSubtext] || item[props.itemText];\nconst itemSecondaryDisplay = (item: Item) => item[props.itemSubtext] ? item[props.itemText] : undefined;\nconst tagDisplay = (tag: Item) => tag[props.tagDisplayKey] || tag[props.itemText];\n\nconst filterItems = () => {\n  if (query.value && query.value.length > 0) {\n    emits('update:query', query.value);\n\n    // Simple filtering logic\n    const lowerQuery = query.value.toLowerCase();\n    filteredItems.value = props.items.filter((item) => {\n      return (\n        item[props.itemText]?.toLowerCase().includes(lowerQuery) ||\n        item[props.itemSubtext]?.toLowerCase().includes(lowerQuery)\n      );\n    });\n    showDropdown.value = true;\n  } else {\n    filteredItems.value = [];\n    showDropdown.value = false;\n  }\n};\n\nconst addTag = () => {\n  const trimmedQuery = query.value.trim();\n  if (trimmedQuery === '') {\n    return;\n  }\n\n  let tagToAdd: Item | null = null;\n\n  const lowerQuery = trimmedQuery.toLowerCase();\n\n  // Check if the query matches any item in the items list\n  const matchedItem = props.items.find(\n    (item) =>\n      item[props.itemText]?.toLowerCase() === lowerQuery ||\n      item[props.itemSubtext]?.toLowerCase() === lowerQuery\n  );\n\n  if (matchedItem) {\n    tagToAdd = { ...matchedItem };\n  } else if (props.pattern && props.pattern.test(trimmedQuery)) {\n    // Create a new item if it doesn't exist and matches the pattern\n    tagToAdd = { id: null, [props.itemText]: trimmedQuery };\n  } else {\n    // Do not emit invalid-tag here; let the user continue typing\n    return;\n  }\n\n  // Avoid duplicates\n  if (\n    !selectedTags.value.some(\n      (tag) => tag[props.itemText] === tagToAdd![props.itemText]\n    )\n  ) {\n    selectedTags.value.push(tagToAdd!);\n    emits('update:value', selectedTags.value);\n  }\n\n  query.value = '';\n  filteredItems.value = [];\n  showDropdown.value = false;\n};\n\nconst selectSuggestion = (item: Item) => {\n  const valueToTest = item[props.itemText].trim();\n\n  // Avoid duplicates\n  if (\n    !selectedTags.value.some(\n      (tag) => tag[props.itemText] === valueToTest\n    )\n  ) {\n    selectedTags.value.push({ ...item });\n    emits('update:value', selectedTags.value);\n  }\n  query.value = '';\n  filteredItems.value = [];\n  showDropdown.value = false;\n};\n\nconst removeTag = (index: number) => {\n  selectedTags.value.splice(index, 1);\n  emits('update:value', selectedTags.value);\n};\n\nconst editTag = (index: number) => {\n  selectedTags.value[index].isEditing = true;\n  nextTick(() => {\n    // Focus logic can be added here if needed\n  });\n};\n\nconst stopEditingTag = (index: number) => {\n  const tag = selectedTags.value[index];\n  if (tag) {\n    tag.isEditing = false;\n    const valueToTest = tag[props.itemText].trim();\n\n    // Validate tag if pattern is provided\n    if (props.pattern && !props.pattern.test(valueToTest)) {\n      emits('invalid-tag', valueToTest);\n      removeTag(index);\n      return;\n    }\n\n    // Update the tag value after trimming\n    tag[props.itemText] = valueToTest;\n    emits('update:value', selectedTags.value);\n  }\n};\n\nonMounted(() => {\n  // Initialize filteredItems\n  filteredItems.value = [];\n});\n\ndefineExpose({\n  selectedTags,\n});\n</script>\n\n<style scoped>\n</style>\n"],"names":["props","__props","emits","__emit","query","ref","filteredItems","selectedTags","showDropdown","watch","newVal","itemDisplay","item","itemSecondaryDisplay","tagDisplay","tag","filterItems","lowerQuery","addTag","trimmedQuery","tagToAdd","matchedItem","selectSuggestion","valueToTest","removeTag","index","editTag","nextTick","stopEditingTag","onMounted","__expose","_createBlock","FormFieldWrapper","_renderSlot","_ctx","_createElementVNode","_normalizeClass","_openBlock","_createElementBlock","_Fragment","_renderList","UiBadge","$event","_withKeys","_withModifiers","_hoisted_1","_toDisplayString","_createVNode","_unref","XMarkIcon","_hoisted_4","_hoisted_6","_hoisted_7","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12"],"mappings":"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"}

package/dist/{TextAreaInput.vue_vue_type_script_setup_true_lang-BMpc-5ln.js → TextAreaInput.vue_vue_type_script_setup_true_lang-Cf0MJobG.js}

@@ -1,4 +1,4 @@
-import { defineComponent as S, ref as z, watch as b, computed as F, createElementBlock as n, openBlock as u, createVNode as O, unref as a, withCtx as g, createElementVNode as h, withDirectives as I, createCommentVNode as f, mergeProps as N, isRef as R, vModelText as j, toDisplayString as i } from "vue";
+import { defineComponent as S, ref as z, watch as h, computed as F, createElementBlock as u, openBlock as i, createVNode as O, unref as t, withCtx as f, createElementVNode as x, withDirectives as I, createCommentVNode as y, mergeProps as N, isRef as R, vModelText as j, toDisplayString as c } from "vue";
 import { useField as A } from "vee-validate";
 import D from "./forms/FormFieldWrapper.js";
 import { g as E } from "./id-DafBB_QF.js";
@@ -26,8 +26,8 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
     boxShadow: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "blur", "focus"],
-  setup(y, { expose: v, emit: k }) {
-    const s = y, d = k, t = z(), c = E(s.name), { value: l, errorMessage: p, handleBlur: w, handleChange: m, meta: o } = A(
+  setup(e, { expose: v, emit: k }) {
+    const s = e, n = k, o = z(), m = E(s.name), { value: a, errorMessage: b, handleBlur: p, handleChange: g, meta: d } = A(
       () => s.name,
       s.rules,
       {
@@ -36,19 +36,19 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
         syncVModel: !0
       }
     );
-    b(
+    h(
       () => s.modelValue,
-      (e) => {
-        e !== l.value && (l.value = e || "");
+      (l) => {
+        l !== a.value && (a.value = l || "");
       }
-    ), b(
-      l,
-      (e) => {
-        d("update:modelValue", e);
+    ), h(
+      a,
+      (l) => {
+        n("update:modelValue", l);
       }
     );
-    const x = F(() => {
-      const e = [
+    const w = F(() => {
+      const l = [
         "sl-w-full",
         "sl-px-3",
         "sl-py-2",
@@ -70,7 +70,7 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
         "sl-resize-y",
         "sl-min-h-[80px]"
       ];
-      return s.disabled ? e.push(
+      return s.disabled ? l.push(
         "sl-bg-gray-50",
         "dark:sl-bg-slate-800",
         "sl-text-gray-500",
@@ -78,85 +78,85 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
         "sl-cursor-not-allowed",
         "sl-border-gray-200",
         "dark:sl-border-slate-700"
-      ) : p.value ? e.push(
+      ) : b.value ? l.push(
         "sl-border-red-300",
         "dark:sl-border-red-500",
         "focus:sl-ring-red-500",
         "focus:sl-border-red-500"
-      ) : o.valid && o.touched ? e.push(
+      ) : d.valid && d.touched ? l.push(
         "sl-border-green-300",
         "dark:sl-border-green-500",
         "focus:sl-ring-green-500",
         "focus:sl-border-green-500"
-      ) : e.push(
+      ) : l.push(
         "sl-border-gray-300",
         "dark:sl-border-slate-600",
         "hover:sl-border-gray-400",
         "dark:hover:sl-border-slate-500"
-      ), e.join(" ");
-    }), B = (e) => {
-      const r = e.target;
-      s.lazy || m(r.value);
-    }, M = (e) => {
+      ), l.join(" ");
+    }), B = (l) => {
+      const r = l.target;
+      s.lazy || g(r.value);
+    }, M = (l) => {
       if (s.lazy) {
-        const r = e.target;
-        m(r.value);
+        const r = l.target;
+        g(r.value);
       }
-      w(e), d("blur", e);
-    }, V = (e) => {
-      d("focus", e);
+      p(l), n("blur", l);
+    }, V = (l) => {
+      n("focus", l);
     };
     return v({
       focus: () => {
-        t.value?.focus();
+        o.value?.focus();
       },
       blur: () => {
-        t.value?.blur();
+        o.value?.blur();
       },
-      textareaRef: t
-    }), (e, r) => (u(), n("div", L, [
+      textareaRef: o
+    }), (l, r) => (i(), u("div", L, [
       O(D, {
-        id: a(c),
+        id: t(m),
         name: e.name,
         label: e.label,
         disabled: e.disabled,
         optional: !e.rules,
         "tertiary-label": e.tertiaryLabel,
         "box-shadow": e.boxShadow,
-        "error-message": a(p),
+        "error-message": t(b),
         "success-message": e.successMessage,
-        "is-valid": a(o).valid,
-        "is-touched": a(o).touched
+        "is-valid": t(d).valid,
+        "is-touched": t(d).touched
       }, {
-        "success-message": g(() => [
-          e.successMessage ? (u(), n("span", W, i(e.successMessage), 1)) : f("", !0)
+        "success-message": f(() => [
+          e.successMessage ? (i(), u("span", W, c(e.successMessage), 1)) : y("", !0)
         ]),
-        default: g(() => [
-          h("div", T, [
-            I(h("textarea", N({
-              id: a(c),
+        default: f(() => [
+          x("div", T, [
+            I(x("textarea", N({
+              id: t(m),
               ref_key: "textareaRef",
-              ref: t,
-              "onUpdate:modelValue": r[0] || (r[0] = (C) => R(l) ? l.value = C : null),
+              ref: o,
+              "onUpdate:modelValue": r[0] || (r[0] = (C) => R(a) ? a.value = C : null),
               name: e.name,
               disabled: e.disabled,
               placeholder: e.placeholder,
               class: [
-                x.value,
+                w.value,
                 e.inputClass
               ],
               style: e.inputStyle,
               spellcheck: e.spellcheck,
               rows: e.rows,
               maxlength: e.maxlength
-            }, e.$attrs, {
+            }, l.$attrs, {
               onBlur: M,
               onFocus: V,
               onInput: B
             }), null, 16, P), [
-              [j, a(l)]
+              [j, t(a)]
             ]),
-            e.maxlength !== void 0 ? (u(), n("div", U, i(a(l)?.length || 0) + "/" + i(e.maxlength), 1)) : f("", !0)
+            e.maxlength !== void 0 ? (i(), u("div", U, c(t(a)?.length || 0) + "/" + c(e.maxlength), 1)) : y("", !0)
           ])
         ]),
         _: 1
@@ -167,4 +167,4 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
 export {
   Q as _
 };
-//# sourceMappingURL=TextAreaInput.vue_vue_type_script_setup_true_lang-BMpc-5ln.js.map
+//# sourceMappingURL=TextAreaInput.vue_vue_type_script_setup_true_lang-Cf0MJobG.js.map

package/dist/{TextAreaInput.vue_vue_type_script_setup_true_lang-BMpc-5ln.js.map → TextAreaInput.vue_vue_type_script_setup_true_lang-Cf0MJobG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TextAreaInput.vue_vue_type_script_setup_true_lang-BMpc-5ln.js","sources":["../src/components/inputs/TextAreaInput.vue"],"sourcesContent":["<!--\n  @component TextAreaInput\n  @description Multi-line text input with character count.\n  \n  A styled textarea component with validation, character limit display,\n  and auto-resize capability.\n  \n  @props\n  - name (string, required): Field name for form binding\n  - label (string, optional): Display label\n  - placeholder (string, optional): Placeholder text\n  - disabled (boolean, optional): Disabled state\n  - rules (Schema, optional): Validation rules\n  - modelValue (string, optional): Text value via v-model\n  - rows (number, optional): Number of visible rows\n  - maxlength (number, optional): Maximum character limit\n  - spellcheck (boolean, optional): Enable spellcheck\n  \n  @emits\n  - update:modelValue: Emitted when text changes\n  - update:validity: Emitted when validation state changes\n  \n  @example\n  <TextAreaInput\n    name=\"bio\"\n    label=\"Biography\"\n    v-model=\"form.bio\"\n    :rows=\"4\"\n    :maxlength=\"500\"\n    placeholder=\"Tell us about yourself...\"\n  />\n-->\n<template>\n  <div class=\"sl-w-full\">\n    <FormFieldWrapper\n      :id=\"id\"\n      :name=\"name\"\n      :label=\"label\"\n      :disabled=\"disabled\"\n      :optional=\"!rules\"\n      :tertiary-label=\"tertiaryLabel\"\n      :box-shadow=\"boxShadow\"\n      :error-message=\"errorMessage\"\n      :success-message=\"successMessage\"\n      :is-valid=\"meta.valid\"\n      :is-touched=\"meta.touched\"\n    >\n      <div class=\"sl-relative\">\n        <textarea\n          :id=\"id\"\n          ref=\"textareaRef\"\n          v-model=\"value\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :placeholder=\"placeholder\"\n          :class=\"[\n            textareaClasses,\n            inputClass\n          ]\"\n          :style=\"inputStyle\"\n          :spellcheck=\"spellcheck\"\n          :rows=\"rows\"\n          :maxlength=\"maxlength\"\n          v-bind=\"$attrs\"\n          @blur=\"onBlur\"\n          @focus=\"onFocus\"\n          @input=\"onInput\"\n        />\n        \n        <!-- Character count -->\n        <div \n          v-if=\"maxlength !== undefined\" \n          class=\"sl-absolute sl-bottom-2 sl-right-2 sl-text-xs sl-text-slate-500 dark:sl-text-slate-200 sl-pointer-events-none\"\n        >\n          {{ value?.length || 0 }}/{{ maxlength }}\n        </div>\n      </div>\n      \n      <template #success-message>\n        <span v-if=\"successMessage\">{{ successMessage }}</span>\n      </template>\n    </FormFieldWrapper>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, type StyleValue } from 'vue'\nimport { useField } from 'vee-validate'\nimport FormFieldWrapper from '../forms/FormFieldWrapper.vue'\nimport type { ValidationRule } from '../../types/form'\nimport { generateId } from '../../utils/id'\n\ninterface Props {\n  name: string\n  label?: string\n  placeholder?: string\n  disabled?: boolean\n  rules?: ValidationRule\n  validateOnMount?: boolean\n  successMessage?: string\n  tertiaryLabel?: string\n  spellcheck?: boolean\n  rows?: number\n  maxlength?: number\n  inputClass?: string\n  inputStyle?: StyleValue\n  lazy?: boolean\n  modelValue?: string\n  boxShadow?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  spellcheck: true,\n  rows: 4,\n  lazy: false,\n  boxShadow: false\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  blur: [event: FocusEvent]\n  focus: [event: FocusEvent]\n}>()\n\nconst textareaRef = ref<HTMLTextAreaElement>()\nconst id = generateId(props.name)\n\n// Use vee-validate for form validation\nconst { value, errorMessage, handleBlur, handleChange, meta } = useField(\n  () => props.name,\n  props.rules,\n  {\n    validateOnMount: props.validateOnMount,\n    initialValue: props.modelValue,\n    syncVModel: true\n  }\n)\n\n// Sync with v-model\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue !== value.value) {\n      value.value = newValue || ''\n    }\n  }\n)\n\nwatch(\n  value,\n  (newValue) => {\n    emit('update:modelValue', newValue)\n  }\n)\n\nconst textareaClasses = computed(() => {\n  const baseClasses = [\n    'sl-w-full',\n    'sl-px-3',\n    'sl-py-2',\n    'sl-text-sm',\n    'sl-border',\n    'sl-rounded-md',\n    'sl-bg-white',\n    'dark:sl-bg-slate-900',\n    'sl-text-gray-900',\n    'dark:sl-text-slate-100',\n    'placeholder:sl-text-gray-400',\n    'dark:placeholder:sl-text-slate-500',\n    'sl-transition-all',\n    'sl-duration-200',\n    'focus:sl-outline-none',\n    'focus:sl-ring-2',\n    'focus:sl-ring-stachelock-500',\n    'focus:sl-border-stachelock-500',\n    'sl-resize-y',\n    'sl-min-h-[80px]'\n  ]\n\n  if (props.disabled) {\n    baseClasses.push(\n      'sl-bg-gray-50',\n      'dark:sl-bg-slate-800',\n      'sl-text-gray-500',\n      'dark:sl-text-slate-300',\n      'sl-cursor-not-allowed',\n      'sl-border-gray-200',\n      'dark:sl-border-slate-700'\n    )\n  } else if (errorMessage.value) {\n    baseClasses.push(\n      'sl-border-red-300',\n      'dark:sl-border-red-500',\n      'focus:sl-ring-red-500',\n      'focus:sl-border-red-500'\n    )\n  } else if (meta.valid && meta.touched) {\n    baseClasses.push(\n      'sl-border-green-300',\n      'dark:sl-border-green-500',\n      'focus:sl-ring-green-500',\n      'focus:sl-border-green-500'\n    )\n  } else {\n    baseClasses.push(\n      'sl-border-gray-300',\n      'dark:sl-border-slate-600',\n      'hover:sl-border-gray-400',\n      'dark:hover:sl-border-slate-500'\n    )\n  }\n\n  return baseClasses.join(' ')\n})\n\nconst onInput = (event: Event) => {\n  const target = event.target as HTMLTextAreaElement\n  if (!props.lazy) {\n    handleChange(target.value)\n  }\n}\n\nconst onBlur = (event: FocusEvent) => {\n  if (props.lazy) {\n    const target = event.target as HTMLTextAreaElement\n    handleChange(target.value)\n  }\n  handleBlur(event)\n  emit('blur', event)\n}\n\nconst onFocus = (event: FocusEvent) => {\n  emit('focus', event)\n}\n\nconst focus = () => {\n  textareaRef.value?.focus()\n}\n\nconst blur = () => {\n  textareaRef.value?.blur()\n}\n\ndefineExpose({\n  focus,\n  blur,\n  textareaRef\n})\n</script>\n\n\n"],"names":["props","__props","emit","__emit","textareaRef","ref","id","generateId","value","errorMessage","handleBlur","handleChange","meta","useField","watch","newValue","textareaClasses","computed","baseClasses","onInput","event","target","onBlur","onFocus","__expose","_openBlock","_createElementBlock","_hoisted_1","_createVNode","FormFieldWrapper","_unref","name","label","disabled","rules","tertiaryLabel","boxShadow","successMessage","_createElementVNode","_hoisted_2","_withDirectives","_mergeProps","$event","placeholder","inputClass","inputStyle","spellcheck","rows","maxlength","$attrs","_hoisted_4","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"TextAreaInput.vue_vue_type_script_setup_true_lang-Cf0MJobG.js","sources":["../src/components/inputs/TextAreaInput.vue"],"sourcesContent":["<!--\n  @component TextAreaInput\n  @description Multi-line text input with character count.\n  \n  A styled textarea component with validation, character limit display,\n  and auto-resize capability.\n  \n  @props\n  - name (string, required): Field name for form binding\n  - label (string, optional): Display label\n  - placeholder (string, optional): Placeholder text\n  - disabled (boolean, optional): Disabled state\n  - rules (Schema, optional): Validation rules\n  - modelValue (string, optional): Text value via v-model\n  - rows (number, optional): Number of visible rows\n  - maxlength (number, optional): Maximum character limit\n  - spellcheck (boolean, optional): Enable spellcheck\n  \n  @emits\n  - update:modelValue: Emitted when text changes\n  - update:validity: Emitted when validation state changes\n  \n  @example\n  <TextAreaInput\n    name=\"bio\"\n    label=\"Biography\"\n    v-model=\"form.bio\"\n    :rows=\"4\"\n    :maxlength=\"500\"\n    placeholder=\"Tell us about yourself...\"\n  />\n-->\n<template>\n  <div class=\"sl-w-full\">\n    <FormFieldWrapper\n      :id=\"id\"\n      :name=\"name\"\n      :label=\"label\"\n      :disabled=\"disabled\"\n      :optional=\"!rules\"\n      :tertiary-label=\"tertiaryLabel\"\n      :box-shadow=\"boxShadow\"\n      :error-message=\"errorMessage\"\n      :success-message=\"successMessage\"\n      :is-valid=\"meta.valid\"\n      :is-touched=\"meta.touched\"\n    >\n      <div class=\"sl-relative\">\n        <textarea\n          :id=\"id\"\n          ref=\"textareaRef\"\n          v-model=\"value\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :placeholder=\"placeholder\"\n          :class=\"[\n            textareaClasses,\n            inputClass\n          ]\"\n          :style=\"inputStyle\"\n          :spellcheck=\"spellcheck\"\n          :rows=\"rows\"\n          :maxlength=\"maxlength\"\n          v-bind=\"$attrs\"\n          @blur=\"onBlur\"\n          @focus=\"onFocus\"\n          @input=\"onInput\"\n        />\n        \n        <!-- Character count -->\n        <div \n          v-if=\"maxlength !== undefined\" \n          class=\"sl-absolute sl-bottom-2 sl-right-2 sl-text-xs sl-text-slate-500 dark:sl-text-slate-200 sl-pointer-events-none\"\n        >\n          {{ value?.length || 0 }}/{{ maxlength }}\n        </div>\n      </div>\n      \n      <template #success-message>\n        <span v-if=\"successMessage\">{{ successMessage }}</span>\n      </template>\n    </FormFieldWrapper>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, type StyleValue } from 'vue'\nimport { useField } from 'vee-validate'\nimport FormFieldWrapper from '../forms/FormFieldWrapper.vue'\nimport type { ValidationRule } from '../../types/form'\nimport { generateId } from '../../utils/id'\n\ninterface Props {\n  name: string\n  label?: string\n  placeholder?: string\n  disabled?: boolean\n  rules?: ValidationRule\n  validateOnMount?: boolean\n  successMessage?: string\n  tertiaryLabel?: string\n  spellcheck?: boolean\n  rows?: number\n  maxlength?: number\n  inputClass?: string\n  inputStyle?: StyleValue\n  lazy?: boolean\n  modelValue?: string\n  boxShadow?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  spellcheck: true,\n  rows: 4,\n  lazy: false,\n  boxShadow: false\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  blur: [event: FocusEvent]\n  focus: [event: FocusEvent]\n}>()\n\nconst textareaRef = ref<HTMLTextAreaElement>()\nconst id = generateId(props.name)\n\n// Use vee-validate for form validation\nconst { value, errorMessage, handleBlur, handleChange, meta } = useField(\n  () => props.name,\n  props.rules,\n  {\n    validateOnMount: props.validateOnMount,\n    initialValue: props.modelValue,\n    syncVModel: true\n  }\n)\n\n// Sync with v-model\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue !== value.value) {\n      value.value = newValue || ''\n    }\n  }\n)\n\nwatch(\n  value,\n  (newValue) => {\n    emit('update:modelValue', newValue)\n  }\n)\n\nconst textareaClasses = computed(() => {\n  const baseClasses = [\n    'sl-w-full',\n    'sl-px-3',\n    'sl-py-2',\n    'sl-text-sm',\n    'sl-border',\n    'sl-rounded-md',\n    'sl-bg-white',\n    'dark:sl-bg-slate-900',\n    'sl-text-gray-900',\n    'dark:sl-text-slate-100',\n    'placeholder:sl-text-gray-400',\n    'dark:placeholder:sl-text-slate-500',\n    'sl-transition-all',\n    'sl-duration-200',\n    'focus:sl-outline-none',\n    'focus:sl-ring-2',\n    'focus:sl-ring-stachelock-500',\n    'focus:sl-border-stachelock-500',\n    'sl-resize-y',\n    'sl-min-h-[80px]'\n  ]\n\n  if (props.disabled) {\n    baseClasses.push(\n      'sl-bg-gray-50',\n      'dark:sl-bg-slate-800',\n      'sl-text-gray-500',\n      'dark:sl-text-slate-300',\n      'sl-cursor-not-allowed',\n      'sl-border-gray-200',\n      'dark:sl-border-slate-700'\n    )\n  } else if (errorMessage.value) {\n    baseClasses.push(\n      'sl-border-red-300',\n      'dark:sl-border-red-500',\n      'focus:sl-ring-red-500',\n      'focus:sl-border-red-500'\n    )\n  } else if (meta.valid && meta.touched) {\n    baseClasses.push(\n      'sl-border-green-300',\n      'dark:sl-border-green-500',\n      'focus:sl-ring-green-500',\n      'focus:sl-border-green-500'\n    )\n  } else {\n    baseClasses.push(\n      'sl-border-gray-300',\n      'dark:sl-border-slate-600',\n      'hover:sl-border-gray-400',\n      'dark:hover:sl-border-slate-500'\n    )\n  }\n\n  return baseClasses.join(' ')\n})\n\nconst onInput = (event: Event) => {\n  const target = event.target as HTMLTextAreaElement\n  if (!props.lazy) {\n    handleChange(target.value)\n  }\n}\n\nconst onBlur = (event: FocusEvent) => {\n  if (props.lazy) {\n    const target = event.target as HTMLTextAreaElement\n    handleChange(target.value)\n  }\n  handleBlur(event)\n  emit('blur', event)\n}\n\nconst onFocus = (event: FocusEvent) => {\n  emit('focus', event)\n}\n\nconst focus = () => {\n  textareaRef.value?.focus()\n}\n\nconst blur = () => {\n  textareaRef.value?.blur()\n}\n\ndefineExpose({\n  focus,\n  blur,\n  textareaRef\n})\n</script>\n\n\n"],"names":["props","__props","emit","__emit","textareaRef","ref","id","generateId","value","errorMessage","handleBlur","handleChange","meta","useField","watch","newValue","textareaClasses","computed","baseClasses","onInput","event","target","onBlur","onFocus","__expose","_openBlock","_createElementBlock","_hoisted_1","_createVNode","FormFieldWrapper","_unref","_createElementVNode","_hoisted_2","_withDirectives","_mergeProps","$event","$attrs","_hoisted_4","_toDisplayString"],"mappings":"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"}

package/dist/{UiAvatar.vue_vue_type_script_setup_true_lang-Ci7VLRZx.js → UiAvatar.vue_vue_type_script_setup_true_lang-WVY6JbUL.js}

@@ -1,4 +1,4 @@
-import { defineComponent as b, ref as _, computed as s, createElementBlock as o, openBlock as u, normalizeClass as m, createCommentVNode as p, createElementVNode as z, toDisplayString as P } from "vue";
+import { defineComponent as b, ref as z, computed as n, createElementBlock as u, openBlock as c, normalizeClass as m, createCommentVNode as p, createElementVNode as P, toDisplayString as x } from "vue";
 const C = {
   key: 0,
   class: "sl-h-full sl-w-full"
@@ -17,30 +17,30 @@ const C = {
     imagePath: { default: "image.url" },
     namePath: { default: "name" }
   },
-  setup(v) {
-    const e = v, i = _(!1), y = () => {
-      i.value = !0;
-    }, c = {
+  setup(s) {
+    const e = s, o = z(!1), y = () => {
+      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"
-    }, k = s(() => typeof e.size == "number" ? `sl-h-${e.size} sl-w-${e.size}` : c[e.size] || c.md), n = (l, a) => {
+    }, k = n(() => typeof e.size == "number" ? `sl-h-${e.size} sl-w-${e.size}` : f[e.size] || f.md), i = (l, t) => {
       if (!l) return;
-      const t = Array.isArray(a) ? a : a.split(".");
+      const a = Array.isArray(t) ? t : t.split(".");
       let r = l;
-      for (const g of t)
-        if (r && typeof r == "object" && g in r)
-          r = r[g];
+      for (const v of a)
+        if (r && typeof r == "object" && v in r)
+          r = r[v];
         else
           return;
-      return r;
-    }, f = s(() => {
+      return typeof r == "string" ? r : void 0;
+    }, d = n(() => {
       if (e.imageUrl) return e.imageUrl;
       if (e.data && e.imagePath) {
-        const l = n(e.data, e.imagePath);
+        const l = i(e.data, e.imagePath);
         if (l) return l;
       }
       if (e.data) {
@@ -51,16 +51,16 @@ const C = {
           "photo.url",
           "picture.url"
         ];
-        for (const a of l) {
-          const t = n(e.data, a);
-          if (t) return t;
+        for (const t of l) {
+          const a = i(e.data, t);
+          if (a) return a;
         }
       }
       return null;
-    }), d = s(() => {
+    }), h = n(() => {
       if (e.name) return e.name;
       if (e.data && e.namePath) {
-        const l = n(e.data, e.namePath);
+        const l = i(e.data, e.namePath);
         if (l) return l;
       }
       if (e.data) {
@@ -71,38 +71,38 @@ const C = {
           "username",
           "title"
         ];
-        for (const a of l) {
-          const t = n(e.data, a);
-          if (t) return t;
+        for (const t of l) {
+          const a = i(e.data, t);
+          if (a) return a;
         }
       }
       return "";
-    }), h = s(() => !!f.value), w = s(() => {
-      const l = d.value;
+    }), g = n(() => !!d.value), w = n(() => {
+      const l = h.value;
       if (!l || l.trim() === "")
         return e.fallbackInitials;
-      const a = l.split(" ").filter(Boolean);
-      return a.length === 0 ? e.fallbackInitials : a.length === 1 ? a[0][0].toUpperCase() : (a[0][0] + a[a.length - 1][0]).toUpperCase();
+      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, a) => (u(), o("div", {
-      class: m(["sl-relative sl-inline-block", [k.value, l.ring, l.rounded]])
+    return (l, t) => (c(), u("div", {
+      class: m(["sl-relative sl-inline-block", [k.value, s.ring, s.rounded]])
     }, [
-      h.value && !i.value ? (u(), o("div", C, [
-        z("img", {
-          src: f.value,
-          alt: d.value,
-          class: m(["sl-h-full sl-w-full sl-object-cover", l.rounded]),
+      g.value && !o.value ? (c(), u("div", C, [
+        P("img", {
+          src: d.value,
+          alt: h.value,
+          class: m(["sl-h-full sl-w-full sl-object-cover", s.rounded]),
           onError: y
         }, null, 42, U)
       ])) : p("", !0),
-      !h.value || i.value ? (u(), o("div", {
+      !g.value || o.value ? (c(), u("div", {
         key: 1,
-        class: m(["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(w.value), 3)) : p("", !0)
+        class: m(["sl-h-full sl-w-full sl-flex sl-items-center sl-justify-center sl-font-semibold sl-text-white", [s.color, s.rounded]])
+      }, x(w.value), 3)) : p("", !0)
     ], 2));
   }
 });
 export {
   E as _
 };
-//# sourceMappingURL=UiAvatar.vue_vue_type_script_setup_true_lang-Ci7VLRZx.js.map
+//# sourceMappingURL=UiAvatar.vue_vue_type_script_setup_true_lang-WVY6JbUL.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiAvatar.vue_vue_type_script_setup_true_lang-WVY6JbUL.js","sources":["../src/components/UiAvatar.vue"],"sourcesContent":["<!--\n  @component UiAvatar\n  @description Avatar component displaying user image or initials fallback.\n  \n  Supports flexible data structures with configurable path resolution for\n  images and names. Falls back to initials when no image is available.\n  \n  @props\n  - data (object, optional): Flexible data object with image/name properties\n  - name (string, optional): Direct name for initials\n  - imageUrl (string, optional): Direct image URL\n  - size (Size | number, optional): Avatar size - 'xs' through '2xl' or number\n  - color (string, optional): Background color class for initials fallback\n  - ring (string, optional): Ring/border class\n  - rounded (string, optional): Border radius class\n  - fallbackInitials (string, optional): Fallback when no name available\n  - imagePath (string | string[], optional): Path to image in data object\n  - namePath (string | string[], optional): Path to name in data object\n  \n  @example\n  <UiAvatar name=\"John Doe\" size=\"lg\" />\n  \n  @example\n  <UiAvatar :data=\"user\" image-path=\"profile.avatar.url\" name-path=\"profile.displayName\" />\n-->\n<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\">\n/**\n * UiAvatar - User avatar component with image and initials fallback\n * \n * Displays a user avatar with automatic fallback to initials when no image\n * is available or when image fails to load. Supports flexible data structures\n * through configurable path resolution.\n * \n * ## Features\n * - Image display with error handling\n * - Automatic initials generation from name\n * - Flexible data object support with path resolution\n * - Multiple size options\n * - Customizable colors and styling\n * \n * @module components/UiAvatar\n * @see {@link AvatarType} for prop interface\n */\nimport { computed, ref } from 'vue';\n\n// Type for flexible avatar data object\ntype AvatarData = Record<string, unknown> & {\n  name?: string;\n  display_name?: string;\n  full_name?: string;\n  username?: string;\n  title?: string;\n  image?: { url?: string };\n  profile_image?: { url?: string };\n  avatar?: { url?: string };\n  photo?: { url?: string };\n  picture?: { url?: string };\n  [key: string]: unknown;\n};\n\ninterface AvatarProps {\n  // Flexible data object - can be any object with optional name and image properties\n  data?: AvatarData;\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-primary-600 dark:sl-bg-primary-500',\n  ring: 'sl-ring-white dark:sl-ring-slate-800',\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: AvatarData | undefined, path: string | string[]): string | undefined => {\n  if (!obj) return undefined;\n  \n  const keys = Array.isArray(path) ? path : path.split('.');\n  let current: unknown = obj;\n  \n  for (const key of keys) {\n    if (current && typeof current === 'object' && key in current) {\n      current = (current as Record<string, unknown>)[key];\n    } else {\n      return undefined;\n    }\n  }\n  \n  return typeof current === 'string' ? current : undefined;\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","_openBlock","_hoisted_1","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/dist/{UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.js → UiBadge.vue_vue_type_script_setup_true_lang-DOtbLb9x.js}

@@ -1,4 +1,4 @@
-import { defineComponent as y, computed as e, createElementBlock as o, openBlock as n, normalizeClass as t, createCommentVNode as g, renderSlot as v, createElementVNode as d } from "vue";
+import { defineComponent as y, computed as e, createElementBlock as n, openBlock as t, normalizeClass as g, createCommentVNode as d, renderSlot as v, createElementVNode as a } from "vue";
 const x = /* @__PURE__ */ y({
   __name: "UiBadge",
   props: {
@@ -8,8 +8,8 @@ const x = /* @__PURE__ */ y({
     removable: { type: Boolean, default: !1 }
   },
   emits: ["remove"],
-  setup(a) {
-    const r = a, i = e(() => ({
+  setup(o) {
+    const r = o, i = e(() => ({
       gray: "sl-bg-gray-100 dark:sl-bg-gray-800 sl-text-gray-700 dark:sl-text-gray-300 sl-ring-gray-500/20 dark:sl-ring-gray-500/30",
       red: "sl-bg-red-50 dark:sl-bg-red-900/30 sl-text-red-700 dark:sl-text-red-400 sl-ring-red-600/20 dark:sl-ring-red-500/30",
       yellow: "sl-bg-yellow-50 dark:sl-bg-yellow-900/30 sl-text-yellow-800 dark:sl-text-yellow-400 sl-ring-yellow-600/20 dark:sl-ring-yellow-500/30",
@@ -18,11 +18,11 @@ const x = /* @__PURE__ */ y({
       indigo: "sl-bg-indigo-50 dark:sl-bg-indigo-900/30 sl-text-indigo-700 dark:sl-text-indigo-400 sl-ring-indigo-600/20 dark:sl-ring-indigo-500/30",
       purple: "sl-bg-purple-50 dark:sl-bg-purple-900/30 sl-text-purple-700 dark:sl-text-purple-400 sl-ring-purple-600/20 dark:sl-ring-purple-500/30",
       pink: "sl-bg-pink-50 dark:sl-bg-pink-900/30 sl-text-pink-700 dark:sl-text-pink-400 sl-ring-pink-600/20 dark:sl-ring-pink-500/30"
-    })[r.color]), p = e(() => ({
+    })[r.color]), b = e(() => ({
       sm: "sl-px-2 sl-py-0.5 sl-text-xs",
       md: "sl-px-2.5 sl-py-0.5 sl-text-xs",
       lg: "sl-px-3 sl-py-1 sl-text-sm"
-    })[r.size]), b = e(() => [
+    })[r.size]), u = e(() => [
       "sl-h-1.5 sl-w-1.5 sl-rounded-full sl-mr-1.5",
       {
         gray: "sl-bg-gray-500",
@@ -34,7 +34,7 @@ const x = /* @__PURE__ */ y({
         purple: "sl-bg-purple-500",
         pink: "sl-bg-pink-500"
       }[r.color]
-    ]), u = e(() => [
+    ]), p = e(() => [
       "sl-ml-1 sl-rounded-sm sl-p-0.5 sl-transition-colors",
       {
         gray: "hover:sl-bg-gray-200 dark:hover:sl-bg-gray-700",
@@ -49,28 +49,28 @@ const x = /* @__PURE__ */ y({
     ]), k = e(() => [
       "sl-inline-flex sl-items-center sl-font-medium sl-rounded-full sl-ring-1 sl-ring-inset",
       i.value,
-      p.value
+      b.value
     ]);
-    return (l, s) => (n(), o("span", {
-      class: t(k.value)
+    return (l, s) => (t(), n("span", {
+      class: g(k.value)
     }, [
-      l.dot ? (n(), o("span", {
+      o.dot ? (t(), n("span", {
         key: 0,
-        class: t(b.value)
-      }, null, 2)) : g("", !0),
+        class: g(u.value)
+      }, null, 2)) : d("", !0),
       v(l.$slots, "default"),
-      l.removable ? (n(), o("button", {
+      o.removable ? (t(), n("button", {
         key: 1,
         type: "button",
         onClick: s[0] || (s[0] = (m) => l.$emit("remove")),
-        class: t(u.value)
-      }, s[1] || (s[1] = [
-        d("svg", {
+        class: g(p.value)
+      }, [...s[1] || (s[1] = [
+        a("svg", {
           class: "sl-h-3 sl-w-3",
           viewBox: "0 0 14 14",
           fill: "currentColor"
         }, [
-          d("path", {
+          a("path", {
             d: "M4 4l6 6m0-6l-6 6",
             stroke: "currentColor",
             "stroke-width": "1.5",
@@ -78,11 +78,11 @@ const x = /* @__PURE__ */ y({
             fill: "none"
           })
         ], -1)
-      ]), 2)) : g("", !0)
+      ])], 2)) : d("", !0)
     ], 2));
   }
 });
 export {
   x as _
 };
-//# sourceMappingURL=UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.js.map
+//# sourceMappingURL=UiBadge.vue_vue_type_script_setup_true_lang-DOtbLb9x.js.map

package/dist/{UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.js.map → UiBadge.vue_vue_type_script_setup_true_lang-DOtbLb9x.js.map}

@@ -1 +1 @@
-{"version":3,"file":"UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.js","sources":["../src/components/UiBadge.vue"],"sourcesContent":["<!--\n  @component UiBadge\n  @description Status indicators, labels, and notification counts.\n  \n  @props\n  - color: Color variant (gray, red, yellow, green, blue, indigo, purple, pink)\n  - size: Size variant (sm, md, lg)\n  - dot: Show leading status dot\n  - removable: Show remove button\n  \n  @emits\n  - remove: Emitted when remove button is clicked\n  \n  @slots\n  - default: Badge content\n-->\n<template>\n  <span :class=\"badgeClasses\">\n    <!-- Status Dot -->\n    <span v-if=\"dot\" :class=\"dotClasses\" />\n    \n    <!-- Content -->\n    <slot />\n    \n    <!-- Remove Button -->\n    <button\n      v-if=\"removable\"\n      type=\"button\"\n      @click=\"$emit('remove')\"\n      :class=\"removeButtonClasses\"\n    >\n      <svg class=\"sl-h-3 sl-w-3\" viewBox=\"0 0 14 14\" fill=\"currentColor\">\n        <path d=\"M4 4l6 6m0-6l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" fill=\"none\" />\n      </svg>\n    </button>\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\ntype BadgeColor = 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';\ntype BadgeSize = 'sm' | 'md' | 'lg';\n\ninterface BadgeProps {\n  color?: BadgeColor;\n  size?: BadgeSize;\n  dot?: boolean;\n  removable?: boolean;\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  color: 'gray',\n  size: 'md',\n  dot: false,\n  removable: false,\n});\n\ndefineEmits<{\n  remove: [];\n}>();\n\n// Color classes for each variant\nconst colorClasses = computed(() => {\n  const colors: Record<BadgeColor, string> = {\n    gray: 'sl-bg-gray-100 dark:sl-bg-gray-800 sl-text-gray-700 dark:sl-text-gray-300 sl-ring-gray-500/20 dark:sl-ring-gray-500/30',\n    red: 'sl-bg-red-50 dark:sl-bg-red-900/30 sl-text-red-700 dark:sl-text-red-400 sl-ring-red-600/20 dark:sl-ring-red-500/30',\n    yellow: 'sl-bg-yellow-50 dark:sl-bg-yellow-900/30 sl-text-yellow-800 dark:sl-text-yellow-400 sl-ring-yellow-600/20 dark:sl-ring-yellow-500/30',\n    green: 'sl-bg-green-50 dark:sl-bg-green-900/30 sl-text-green-700 dark:sl-text-green-400 sl-ring-green-600/20 dark:sl-ring-green-500/30',\n    blue: 'sl-bg-blue-50 dark:sl-bg-blue-900/30 sl-text-blue-700 dark:sl-text-blue-400 sl-ring-blue-600/20 dark:sl-ring-blue-500/30',\n    indigo: 'sl-bg-indigo-50 dark:sl-bg-indigo-900/30 sl-text-indigo-700 dark:sl-text-indigo-400 sl-ring-indigo-600/20 dark:sl-ring-indigo-500/30',\n    purple: 'sl-bg-purple-50 dark:sl-bg-purple-900/30 sl-text-purple-700 dark:sl-text-purple-400 sl-ring-purple-600/20 dark:sl-ring-purple-500/30',\n    pink: 'sl-bg-pink-50 dark:sl-bg-pink-900/30 sl-text-pink-700 dark:sl-text-pink-400 sl-ring-pink-600/20 dark:sl-ring-pink-500/30',\n  };\n  return colors[props.color];\n});\n\n// Size classes\nconst sizeClasses = computed(() => {\n  const sizes: Record<BadgeSize, string> = {\n    sm: 'sl-px-2 sl-py-0.5 sl-text-xs',\n    md: 'sl-px-2.5 sl-py-0.5 sl-text-xs',\n    lg: 'sl-px-3 sl-py-1 sl-text-sm',\n  };\n  return sizes[props.size];\n});\n\n// Dot color classes\nconst dotClasses = computed(() => {\n  const dotColors: Record<BadgeColor, string> = {\n    gray: 'sl-bg-gray-500',\n    red: 'sl-bg-red-500',\n    yellow: 'sl-bg-yellow-500',\n    green: 'sl-bg-green-500',\n    blue: 'sl-bg-blue-500',\n    indigo: 'sl-bg-indigo-500',\n    purple: 'sl-bg-purple-500',\n    pink: 'sl-bg-pink-500',\n  };\n  return [\n    'sl-h-1.5 sl-w-1.5 sl-rounded-full sl-mr-1.5',\n    dotColors[props.color]\n  ];\n});\n\n// Remove button classes (hover matches badge color)\nconst removeButtonClasses = computed(() => {\n  const hoverColors: Record<BadgeColor, string> = {\n    gray: 'hover:sl-bg-gray-200 dark:hover:sl-bg-gray-700',\n    red: 'hover:sl-bg-red-100 dark:hover:sl-bg-red-800/50',\n    yellow: 'hover:sl-bg-yellow-100 dark:hover:sl-bg-yellow-800/50',\n    green: 'hover:sl-bg-green-100 dark:hover:sl-bg-green-800/50',\n    blue: 'hover:sl-bg-blue-100 dark:hover:sl-bg-blue-800/50',\n    indigo: 'hover:sl-bg-indigo-100 dark:hover:sl-bg-indigo-800/50',\n    purple: 'hover:sl-bg-purple-100 dark:hover:sl-bg-purple-800/50',\n    pink: 'hover:sl-bg-pink-100 dark:hover:sl-bg-pink-800/50',\n  };\n  return [\n    'sl-ml-1 sl-rounded-sm sl-p-0.5 sl-transition-colors',\n    hoverColors[props.color]\n  ];\n});\n\n// Combined badge classes\nconst badgeClasses = computed(() => [\n  'sl-inline-flex sl-items-center sl-font-medium sl-rounded-full sl-ring-1 sl-ring-inset',\n  colorClasses.value,\n  sizeClasses.value,\n]);\n</script>\n"],"names":["props","__props","colorClasses","computed","sizeClasses","dotClasses","removeButtonClasses","badgeClasses","_createElementBlock","dot","_renderSlot","_ctx","removable","$emit","_createElementVNode"],"mappings":";;;;;;;;;;;AAmDA,UAAMA,IAAQC,GAYRC,IAAeC,EAAS,OACe;AAAA,MACzC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,GAEMH,EAAM,KAAK,CAC1B,GAGKI,IAAcD,EAAS,OACc;AAAA,MACvC,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,GAEOH,EAAM,IAAI,CACxB,GAGKK,IAAaF,EAAS,MAWnB;AAAA,MACL;AAAA,MAX4C;AAAA,QAC5C,MAAM;AAAA,QACN,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,MAAA,EAIIH,EAAM,KAAK;AAAA,IAAA,CAExB,GAGKM,IAAsBH,EAAS,MAW5B;AAAA,MACL;AAAA,MAX8C;AAAA,QAC9C,MAAM;AAAA,QACN,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,MAAA,EAIMH,EAAM,KAAK;AAAA,IAAA,CAE1B,GAGKO,IAAeJ,EAAS,MAAM;AAAA,MAClC;AAAA,MACAD,EAAa;AAAA,MACbE,EAAY;AAAA,IAAA,CACb;2BA/GCI,EAkBO,QAAA;AAAA,MAlBA,SAAOD,EAAA,KAAY;AAAA,IAAA;MAEZE,EAAAA,YAAZD,EAAuC,QAAA;AAAA;QAArB,SAAOH,EAAA,KAAU;AAAA,MAAA;MAGnCK,EAAQC,EAAA,QAAA,SAAA;AAAA,MAIAC,EAAAA,kBADRJ,EASS,UAAA;AAAA;QAPP,MAAK;AAAA,QACJ,gCAAOK,EAAAA,MAAK,QAAA;AAAA,QACZ,SAAOP,EAAA,KAAmB;AAAA,MAAA;QAE3BQ,EAEM,OAAA;AAAA,UAFD,OAAM;AAAA,UAAgB,SAAQ;AAAA,UAAY,MAAK;AAAA,QAAA;UAClDA,EAA0G,QAAA;AAAA,YAApG,GAAE;AAAA,YAAoB,QAAO;AAAA,YAAe,gBAAa;AAAA,YAAM,kBAAe;AAAA,YAAQ,MAAK;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"UiBadge.vue_vue_type_script_setup_true_lang-DOtbLb9x.js","sources":["../src/components/UiBadge.vue"],"sourcesContent":["<!--\n  @component UiBadge\n  @description Status indicators, labels, and notification counts.\n  \n  @props\n  - color: Color variant (gray, red, yellow, green, blue, indigo, purple, pink)\n  - size: Size variant (sm, md, lg)\n  - dot: Show leading status dot\n  - removable: Show remove button\n  \n  @emits\n  - remove: Emitted when remove button is clicked\n  \n  @slots\n  - default: Badge content\n-->\n<template>\n  <span :class=\"badgeClasses\">\n    <!-- Status Dot -->\n    <span v-if=\"dot\" :class=\"dotClasses\" />\n    \n    <!-- Content -->\n    <slot />\n    \n    <!-- Remove Button -->\n    <button\n      v-if=\"removable\"\n      type=\"button\"\n      @click=\"$emit('remove')\"\n      :class=\"removeButtonClasses\"\n    >\n      <svg class=\"sl-h-3 sl-w-3\" viewBox=\"0 0 14 14\" fill=\"currentColor\">\n        <path d=\"M4 4l6 6m0-6l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" fill=\"none\" />\n      </svg>\n    </button>\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\ntype BadgeColor = 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';\ntype BadgeSize = 'sm' | 'md' | 'lg';\n\ninterface BadgeProps {\n  color?: BadgeColor;\n  size?: BadgeSize;\n  dot?: boolean;\n  removable?: boolean;\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  color: 'gray',\n  size: 'md',\n  dot: false,\n  removable: false,\n});\n\ndefineEmits<{\n  remove: [];\n}>();\n\n// Color classes for each variant\nconst colorClasses = computed(() => {\n  const colors: Record<BadgeColor, string> = {\n    gray: 'sl-bg-gray-100 dark:sl-bg-gray-800 sl-text-gray-700 dark:sl-text-gray-300 sl-ring-gray-500/20 dark:sl-ring-gray-500/30',\n    red: 'sl-bg-red-50 dark:sl-bg-red-900/30 sl-text-red-700 dark:sl-text-red-400 sl-ring-red-600/20 dark:sl-ring-red-500/30',\n    yellow: 'sl-bg-yellow-50 dark:sl-bg-yellow-900/30 sl-text-yellow-800 dark:sl-text-yellow-400 sl-ring-yellow-600/20 dark:sl-ring-yellow-500/30',\n    green: 'sl-bg-green-50 dark:sl-bg-green-900/30 sl-text-green-700 dark:sl-text-green-400 sl-ring-green-600/20 dark:sl-ring-green-500/30',\n    blue: 'sl-bg-blue-50 dark:sl-bg-blue-900/30 sl-text-blue-700 dark:sl-text-blue-400 sl-ring-blue-600/20 dark:sl-ring-blue-500/30',\n    indigo: 'sl-bg-indigo-50 dark:sl-bg-indigo-900/30 sl-text-indigo-700 dark:sl-text-indigo-400 sl-ring-indigo-600/20 dark:sl-ring-indigo-500/30',\n    purple: 'sl-bg-purple-50 dark:sl-bg-purple-900/30 sl-text-purple-700 dark:sl-text-purple-400 sl-ring-purple-600/20 dark:sl-ring-purple-500/30',\n    pink: 'sl-bg-pink-50 dark:sl-bg-pink-900/30 sl-text-pink-700 dark:sl-text-pink-400 sl-ring-pink-600/20 dark:sl-ring-pink-500/30',\n  };\n  return colors[props.color];\n});\n\n// Size classes\nconst sizeClasses = computed(() => {\n  const sizes: Record<BadgeSize, string> = {\n    sm: 'sl-px-2 sl-py-0.5 sl-text-xs',\n    md: 'sl-px-2.5 sl-py-0.5 sl-text-xs',\n    lg: 'sl-px-3 sl-py-1 sl-text-sm',\n  };\n  return sizes[props.size];\n});\n\n// Dot color classes\nconst dotClasses = computed(() => {\n  const dotColors: Record<BadgeColor, string> = {\n    gray: 'sl-bg-gray-500',\n    red: 'sl-bg-red-500',\n    yellow: 'sl-bg-yellow-500',\n    green: 'sl-bg-green-500',\n    blue: 'sl-bg-blue-500',\n    indigo: 'sl-bg-indigo-500',\n    purple: 'sl-bg-purple-500',\n    pink: 'sl-bg-pink-500',\n  };\n  return [\n    'sl-h-1.5 sl-w-1.5 sl-rounded-full sl-mr-1.5',\n    dotColors[props.color]\n  ];\n});\n\n// Remove button classes (hover matches badge color)\nconst removeButtonClasses = computed(() => {\n  const hoverColors: Record<BadgeColor, string> = {\n    gray: 'hover:sl-bg-gray-200 dark:hover:sl-bg-gray-700',\n    red: 'hover:sl-bg-red-100 dark:hover:sl-bg-red-800/50',\n    yellow: 'hover:sl-bg-yellow-100 dark:hover:sl-bg-yellow-800/50',\n    green: 'hover:sl-bg-green-100 dark:hover:sl-bg-green-800/50',\n    blue: 'hover:sl-bg-blue-100 dark:hover:sl-bg-blue-800/50',\n    indigo: 'hover:sl-bg-indigo-100 dark:hover:sl-bg-indigo-800/50',\n    purple: 'hover:sl-bg-purple-100 dark:hover:sl-bg-purple-800/50',\n    pink: 'hover:sl-bg-pink-100 dark:hover:sl-bg-pink-800/50',\n  };\n  return [\n    'sl-ml-1 sl-rounded-sm sl-p-0.5 sl-transition-colors',\n    hoverColors[props.color]\n  ];\n});\n\n// Combined badge classes\nconst badgeClasses = computed(() => [\n  'sl-inline-flex sl-items-center sl-font-medium sl-rounded-full sl-ring-1 sl-ring-inset',\n  colorClasses.value,\n  sizeClasses.value,\n]);\n</script>\n"],"names":["props","__props","colorClasses","computed","sizeClasses","dotClasses","removeButtonClasses","badgeClasses","_createElementBlock","_renderSlot","_ctx","$emit","_createElementVNode"],"mappings":";;;;;;;;;;;AAmDA,UAAMA,IAAQC,GAYRC,IAAeC,EAAS,OACe;AAAA,MACzC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,GAEMH,EAAM,KAAK,CAC1B,GAGKI,IAAcD,EAAS,OACc;AAAA,MACvC,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,GAEOH,EAAM,IAAI,CACxB,GAGKK,IAAaF,EAAS,MAWnB;AAAA,MACL;AAAA,MAX4C;AAAA,QAC5C,MAAM;AAAA,QACN,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,MAAA,EAIIH,EAAM,KAAK;AAAA,IAAA,CAExB,GAGKM,IAAsBH,EAAS,MAW5B;AAAA,MACL;AAAA,MAX8C;AAAA,QAC9C,MAAM;AAAA,QACN,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,MAAA,EAIMH,EAAM,KAAK;AAAA,IAAA,CAE1B,GAGKO,IAAeJ,EAAS,MAAM;AAAA,MAClC;AAAA,MACAD,EAAa;AAAA,MACbE,EAAY;AAAA,IAAA,CACb;2BA/GCI,EAkBO,QAAA;AAAA,MAlBA,SAAOD,EAAA,KAAY;AAAA,IAAA;MAEZN,EAAA,YAAZO,EAAuC,QAAA;AAAA;QAArB,SAAOH,EAAA,KAAU;AAAA,MAAA;MAGnCI,EAAQC,EAAA,QAAA,SAAA;AAAA,MAIAT,EAAA,kBADRO,EASS,UAAA;AAAA;QAPP,MAAK;AAAA,QACJ,gCAAOG,EAAAA,MAAK,QAAA;AAAA,QACZ,SAAOL,EAAA,KAAmB;AAAA,MAAA;QAE3BM,EAEM,OAAA;AAAA,UAFD,OAAM;AAAA,UAAgB,SAAQ;AAAA,UAAY,MAAK;AAAA,QAAA;UAClDA,EAA0G,QAAA;AAAA,YAApG,GAAE;AAAA,YAAoB,QAAO;AAAA,YAAe,gBAAa;AAAA,YAAM,kBAAe;AAAA,YAAQ,MAAK;AAAA,UAAA;;;;;;"}