@innertia-solutions/ui 0.1.4 → 0.1.6

package/components/App/Button.vue

@@ -0,0 +1,59 @@
+<script setup>
+const props = defineProps({
+  text: { type: String, required: true },
+  size: { type: String, default: "sm", validator: (v) => ["xs","sm","md","lg"].includes(v) },
+  class: { type: String, default: "" },
+  iconClass: { type: String, default: "" },
+  textClass: { type: String, default: "" },
+  outline: { type: Boolean, default: false },
+  severity: { type: String, default: "secondary", validator: (v) => ["primary","secondary","success","danger","warning","info"].includes(v) },
+  icon: { type: [Object, Function], default: null },
+  iconPosition: { type: String, default: "left", validator: (v) => ["left","right"].includes(v) },
+  loading: { type: Boolean, default: false },
+  loadingText: { type: String, default: "Cargando..." },
+  disabled: { type: Boolean, default: false },
+  type: { type: String, default: "button", validator: (v) => ["button","link"].includes(v) },
+  link: { type: String, default: "" },
+  variant: { type: String, default: "default", validator: (v) => ["default","dropdown"].includes(v) },
+})
+
+const sizeClasses = computed(() => ({ xs:"py-0.5 px-2 text-xs font-light", sm:"py-1 px-2.5 text-sm font-light", md:"py-2.5 px-3 text-sm font-light", lg:"py-3 px-4 text-base font-light" }[props.size] || "py-1 px-2.5 text-sm font-light"))
+const iconSizeClasses = computed(() => ({ xs:"size-2", sm:"size-3", md:"size-4", lg:"size-5" }[props.size] || "size-3"))
+
+const severityClasses = computed(() => {
+  if (props.variant === "dropdown") {
+    const d = { primary:"text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20", secondary:"text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-300", success:"text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-900/20", danger:"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20", warning:"text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20", info:"text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-900/20" }
+    return d[props.severity] || d.secondary
+  }
+  const base = "rounded-lg border transition-colors"
+  const v = { primary:"border-blue-600 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-500 dark:bg-blue-900/20 dark:text-blue-300 dark:hover:bg-blue-900/35", secondary:"border-slate-300 bg-slate-50 text-slate-700 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700", success:"border-emerald-600 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-500 dark:bg-emerald-900/20 dark:text-emerald-300 dark:hover:bg-emerald-900/35", danger:"border-red-600 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-500 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/35", warning:"border-yellow-600 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-500 dark:bg-yellow-900/20 dark:text-yellow-300 dark:hover:bg-yellow-900/35", info:"border-cyan-600 bg-cyan-50 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-500 dark:bg-cyan-900/20 dark:text-cyan-300 dark:hover:bg-cyan-900/35" }
+  return `${base} ${v[props.severity] || v.primary}`
+})
+
+const buttonClasses = computed(() => {
+  if (props.variant === "dropdown") {
+    const dis = props.type === "button" ? "disabled:opacity-50 disabled:pointer-events-none" : isDisabled.value ? "opacity-50 pointer-events-none" : ""
+    return `w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors text-left ${severityClasses.value} ${dis} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 ${props.class}`
+  }
+  const dis = props.type === "button" ? "disabled:opacity-50 disabled:pointer-events-none" : isDisabled.value ? "opacity-50 pointer-events-none" : ""
+  const cursor = props.type === "link" ? "cursor-pointer" : ""
+  return `${sizeClasses.value} ${severityClasses.value} ${dis} focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 ${cursor} inline-flex justify-center items-center gap-x-2 whitespace-nowrap ${props.class}`
+})
+
+const displayText = computed(() => props.loading ? props.loadingText : props.text)
+const isDisabled = computed(() => props.disabled || props.loading)
+</script>
+<template>
+  <NuxtLink v-if="type === 'link'" :to="link" :class="buttonClasses">
+    <div v-if="loading" :class="`animate-spin border-[2.5px] border-t-transparent rounded-full ${iconSizeClasses}`" :style="`border-color: currentColor; border-top-color: transparent`" role="status" />
+    <component v-else-if="icon && iconPosition === 'left'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+    <slot><span :class="textClass">{{ displayText }}</span></slot>
+    <component v-if="!loading && icon && iconPosition === 'right'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+  </NuxtLink>
+  <button v-else :disabled="isDisabled" :class="buttonClasses" type="button">
+    <div v-if="loading" :class="`animate-spin border-[2.5px] border-t-transparent rounded-full ${iconSizeClasses}`" :style="`border-color: currentColor; border-top-color: transparent`" role="status" />
+    <component v-else-if="icon && iconPosition === 'left'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+    <slot><span :class="textClass">{{ displayText }}</span></slot>
+    <component v-if="!loading && icon && iconPosition === 'right'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+  </button>
+</template>

package/components/App/Dropdown.vue

@@ -0,0 +1,286 @@
+<script setup>
+// Props
+const props = defineProps({
+  triggerText: {
+    type: String,
+    default: "Dropdown",
+  },
+  triggerLabel: {
+    type: String,
+    default: "Dropdown menu",
+  },
+  triggerClass: {
+    type: String,
+    default: "",
+  },
+  triggerSize: {
+    type: String,
+    default: "sm",
+    validator: (value) => ["xs", "sm", "md", "lg"].includes(value),
+  },
+  triggerSeverity: {
+    type: String,
+    default: "secondary",
+    validator: (value) =>
+      ["primary", "secondary", "success", "danger", "warning", "info"].includes(
+        value
+      ),
+  },
+  triggerOutline: {
+    type: Boolean,
+    default: true,
+  },
+  wrapperClass: {
+    type: String,
+    default: "",
+  },
+  menuClass: {
+    type: String,
+    default: "",
+  },
+  placement: {
+    type: String,
+    default: "bottom-right",
+    validator: (value) =>
+      [
+        "bottom",
+        "bottom-left",
+        "bottom-right",
+        "top",
+        "top-left",
+        "top-right",
+        "left",
+        "right",
+      ].includes(value),
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  autoClose: {
+    type: String,
+    default: "true",
+    validator: (value) =>
+      ["true", "false", "inside", "outside"].includes(value),
+  },
+});
+
+// Emits
+const emit = defineEmits(["item-click", "open", "close"]);
+
+// Reactive data
+const triggerId = ref(
+  `dropdown-trigger-${Math.random().toString(36).substr(2, 9)}`
+);
+
+// Computed
+const triggerSizeClasses = computed(() => {
+  const sizes = {
+    xs: "py-0.5 px-2 text-xs font-light",
+    sm: "py-1 px-2.5 text-sm font-light",
+    md: "py-2.5 px-3 text-sm font-light",
+    lg: "py-3 px-4 text-base font-light",
+  };
+  return sizes[props.triggerSize] || sizes.sm;
+});
+
+const triggerSeverityClasses = computed(() => {
+  const base = "rounded-lg border transition-colors";
+  const variants = {
+    primary: props.triggerOutline
+      ? "border-blue-600 text-blue-600 hover:bg-blue-50 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-900/20"
+      : "border-transparent bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700",
+    secondary: props.triggerOutline
+      ? "border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700/50"
+      : "border-transparent bg-gray-600 text-white hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-700",
+    success: props.triggerOutline
+      ? "border-green-600 text-green-600 hover:bg-green-50 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-900/20"
+      : "border-transparent bg-green-600 text-white hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700",
+    danger: props.triggerOutline
+      ? "border-red-600 text-red-600 hover:bg-red-50 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-900/20"
+      : "border-transparent bg-red-600 text-white hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700",
+    warning: props.triggerOutline
+      ? "border-yellow-600 text-yellow-600 hover:bg-yellow-50 dark:border-yellow-500 dark:text-yellow-500 dark:hover:bg-yellow-900/20"
+      : "border-transparent bg-yellow-600 text-white hover:bg-yellow-700 dark:bg-yellow-600 dark:hover:bg-yellow-700",
+    info: props.triggerOutline
+      ? "border-cyan-600 text-cyan-600 hover:bg-cyan-50 dark:border-cyan-500 dark:text-cyan-500 dark:hover:bg-cyan-900/20"
+      : "border-transparent bg-cyan-600 text-white hover:bg-cyan-700 dark:bg-cyan-600 dark:hover:bg-cyan-700",
+  };
+
+  return `${base} ${variants[props.triggerSeverity] || variants.secondary}`;
+});
+
+const triggerButtonClasses = computed(() => {
+  const disabled = "disabled:opacity-50 disabled:pointer-events-none";
+  const focus =
+    "focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800";
+
+  return `hs-dropdown-toggle ${triggerSizeClasses.value} ${triggerSeverityClasses.value} ${disabled} ${focus} inline-flex justify-center items-center gap-x-2 ${props.triggerClass}`;
+});
+
+const placementClass = computed(() => {
+  const placements = {
+    bottom: "[--placement:bottom]",
+    "bottom-left": "[--placement:bottom-left]",
+    "bottom-right": "[--placement:bottom-right]",
+    top: "[--placement:top]",
+    "top-left": "[--placement:top-left]",
+    "top-right": "[--placement:top-right]",
+    left: "[--placement:left]",
+    right: "[--placement:right]",
+  };
+  return placements[props.placement] || "[--placement:bottom-left]";
+});
+
+const defaultItems = computed(() => {
+  return props.items.length
+    ? props.items
+    : [
+        {
+          label: "Editar",
+          type: "button",
+          severity: "primary",
+          action: () => {},
+        },
+        {
+          label: "Duplicar",
+          type: "button",
+          severity: "success",
+          action: () => {},
+        },
+        {
+          label: "Eliminar",
+          type: "button",
+          severity: "danger",
+          action: () => {},
+        },
+        { label: "Ver detalles", type: "link", href: "#" },
+      ];
+});
+
+// Methods
+const getItemButtonClasses = (item) => {
+  const severity = item.severity || "default";
+
+  const severityClasses = {
+    default:
+      "text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300",
+    primary:
+      "text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20",
+    success:
+      "text-green-600 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-900/20",
+    danger:
+      "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20",
+    warning:
+      "text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20",
+    info: "text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-900/20",
+  };
+
+  return severityClasses[severity] || severityClasses.default;
+};
+
+const toggleDropdown = () => {
+  // Handled by Preline JS automatically
+};
+
+const closeDropdown = () => {
+  // Handled by Preline JS automatically
+};
+
+const handleItemClick = (item, event) => {
+  emit("item-click", { item, event });
+
+  if (item.action && typeof item.action === "function") {
+    item.action();
+  }
+
+  if (item.href === "#" || item.href === "") {
+    event.preventDefault();
+  }
+};
+</script>
+<template>
+  <div class="hs-dropdown relative inline-flex" :class="wrapperClass">
+    <!-- Trigger button -->
+    <button
+      :id="triggerId"
+      type="button"
+      :class="triggerButtonClasses"
+      aria-haspopup="menu"
+      :aria-expanded="false"
+      :aria-label="triggerLabel"
+    >
+      <slot name="trigger" :toggle="toggleDropdown">
+        {{ triggerText }}
+        <svg
+          class="hs-dropdown-open:rotate-180 size-4 transition-transform duration-200"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </slot>
+    </button>
+
+    <!-- Dropdown menu -->
+    <div
+      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-40 bg-white shadow-md rounded-lg p-1 space-y-0.5 mt-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700 z-50 border border-gray-200"
+      :class="[menuClass, placementClass]"
+      role="menu"
+      :aria-orientation="'vertical'"
+      :aria-labelledby="triggerId"
+    >
+      <slot name="header" v-if="$slots.header"></slot>
+
+      <slot name="items" :close="closeDropdown">
+        <!-- Default items if no slot content provided -->
+        <template v-for="(item, index) in defaultItems" :key="index">
+          <!-- Button if type is button or has action -->
+          <button
+            v-if="item.type === 'button' || item.action"
+            type="button"
+            class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors text-left focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800"
+            :class="[
+              item.class || getItemButtonClasses(item),
+              { 'opacity-50 pointer-events-none': item.disabled },
+            ]"
+            :disabled="item.disabled"
+            @click="handleItemClick(item, $event)"
+          >
+            <component
+              :is="item.icon"
+              v-if="item.icon"
+              class="size-4 shrink-0"
+            />
+            {{ item.label }}
+          </button>
+
+          <!-- Link if type is link or has href -->
+          <a
+            v-else
+            class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+            :class="item.class"
+            :href="item.href || '#'"
+            @click="handleItemClick(item, $event)"
+          >
+            <component
+              :is="item.icon"
+              v-if="item.icon"
+              class="size-4 shrink-0"
+            />
+            {{ item.label }}
+          </a>
+        </template>
+      </slot>
+
+      <slot name="footer" v-if="$slots.footer"></slot>
+    </div>
+  </div>
+</template>

package/components/App/LinkButton.vue

@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  size: { type: String, default: "sm", validator: (v) => ["xs","sm","md","lg"].includes(v) },
+  class: { type: String, default: "" },
+  iconClass: { type: String, default: "" },
+  textClass: { type: String, default: "" },
+  outline: { type: Boolean, default: false },
+  severity: { type: String, default: "secondary", validator: (v) => ["primary","secondary","success","danger","warning","info"].includes(v) },
+  icon: { type: [Object, Function], default: null },
+  iconPosition: { type: String, default: "left", validator: (v) => ["left","right"].includes(v) },
+  loading: { type: Boolean, default: false },
+  loadingText: { type: String, default: "Cargando..." },
+  disabled: { type: Boolean, default: false },
+  to: { type: String, required: true },
+  variant: { type: String, default: "default", validator: (v) => ["default","dropdown"].includes(v) },
+  text: { type: String, default: "" },
+})
+
+const buttonProps = computed(() => ({ ...props, link: props.to, type: "link" }))
+</script>
+<template>
+  <AppButton v-bind="buttonProps"><slot /></AppButton>
+</template>

package/components/App/PageLoadingSpinner.vue

@@ -0,0 +1,118 @@
+<script setup>
+const isLoading = ref(false);
+let hideTimer;
+let cleanup = [];
+
+const showLoader = () => {
+  clearTimeout(hideTimer);
+  isLoading.value = true;
+};
+
+const hideLoader = () => {
+  clearTimeout(hideTimer);
+  hideTimer = setTimeout(() => {
+    isLoading.value = false;
+  }, 120);
+};
+
+onMounted(() => {
+  const nuxtApp = useNuxtApp();
+  const router = useRouter();
+
+  cleanup = [
+    nuxtApp.hooks.hook("page:start", showLoader),
+    nuxtApp.hooks.hook("page:finish", hideLoader),
+    nuxtApp.hooks.hook("app:error", hideLoader),
+    router.beforeEach((to, from) => {
+      if (to.fullPath !== from.fullPath) {
+        showLoader();
+      }
+    }),
+    router.afterEach(hideLoader),
+    router.onError(hideLoader),
+  ].filter(Boolean);
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(hideTimer);
+  cleanup.forEach((unregister) => unregister());
+});
+</script>
+
+<template>
+  <ClientOnly>
+    <Transition name="page-loading-spinner">
+      <div
+        v-if="isLoading"
+        class="page-loading-spinner"
+        aria-label="Cargando pagina"
+        role="status"
+      >
+        <span class="page-loading-spinner__ring"></span>
+      </div>
+    </Transition>
+  </ClientOnly>
+</template>
+
+<style scoped>
+.page-loading-spinner {
+  position: fixed;
+  top: 0.625rem;
+  right: 0.5rem;
+  z-index: 2147483647;
+  display: flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(226 232 240 / 0.9);
+  border-radius: 9999px;
+  background: rgb(255 255 255 / 0.88);
+  box-shadow: 0 10px 30px rgb(15 23 42 / 0.16);
+  backdrop-filter: blur(10px);
+  pointer-events: none;
+}
+
+.page-loading-spinner__ring {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid rgb(148 163 184 / 0.38);
+  border-top-color: rgb(20 184 166);
+  border-radius: 9999px;
+  animation: page-loading-spinner-rotate 0.75s linear infinite;
+}
+
+.page-loading-spinner-enter-active,
+.page-loading-spinner-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.page-loading-spinner-enter-from,
+.page-loading-spinner-leave-to {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+@media (min-width: 640px) {
+  .page-loading-spinner {
+    right: 1.25rem;
+  }
+}
+
+:global(.dark) .page-loading-spinner {
+  border-color: rgb(51 65 85 / 0.85);
+  background: rgb(15 23 42 / 0.78);
+  box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
+}
+
+:global(.dark) .page-loading-spinner__ring {
+  border-color: rgb(100 116 139 / 0.42);
+  border-top-color: rgb(45 212 191);
+}
+
+@keyframes page-loading-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/components/App/Tag.vue

@@ -0,0 +1,193 @@
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: String,
+    required: false,
+    default: "sm",
+    validator: (value) => ["xs", "sm", "md", "lg"].includes(value),
+  },
+  severity: {
+    type: String,
+    required: false,
+    default: "secondary",
+    validator: (value) =>
+      ["primary", "secondary", "success", "danger", "warning", "info"].includes(
+        value
+      ),
+  },
+  outlined: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  icon: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+  iconPosition: {
+    type: String,
+    required: false,
+    default: "left",
+    validator: (value) => ["left", "right"].includes(value),
+  },
+  class: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  iconClass: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  textClass: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  tooltip: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  tooltipPosition: {
+    type: String,
+    required: false,
+    default: "top",
+    validator: (value) =>
+      ["top", "bottom", "left", "right", "auto"].includes(value),
+  },
+});
+
+// Computed classes for sizes
+const sizeClasses = computed(() => {
+  const sizes = {
+    xs: "px-1.5 py-0.5 text-xs",
+    sm: "px-2 py-1.5 text-xs",
+    md: "px-2.5 py-1.5 text-sm",
+    lg: "px-3 py-2 text-sm",
+  };
+  return sizes[props.size] || sizes.sm;
+});
+
+// Computed classes for icon sizes
+const iconSizeClasses = computed(() => {
+  const sizes = {
+    xs: "size-2.5",
+    sm: "size-3",
+    md: "size-3.5",
+    lg: "size-4",
+  };
+  return sizes[props.size] || sizes.sm;
+});
+
+// Computed classes for severity colors
+const severityClasses = computed(() => {
+  const base = "font-light rounded-md";
+
+  if (props.outlined) {
+    const variants = {
+      primary:
+        "border border-blue-600 text-blue-600 bg-blue-50 dark:border-blue-500 dark:text-blue-500 dark:bg-blue-900/20",
+      secondary:
+        "border border-gray-500 text-gray-700 bg-gray-50 dark:border-gray-400 dark:text-gray-300 dark:bg-gray-800",
+      success:
+        "border border-green-600 text-green-600 bg-green-50 dark:border-green-500 dark:text-green-500 dark:bg-green-900/20",
+      danger:
+        "border border-red-600 text-red-600 bg-red-50 dark:border-red-500 dark:text-red-500 dark:bg-red-900/20",
+      warning:
+        "border border-yellow-500 text-yellow-600 bg-yellow-40 dark:border-yellow-500 dark:text-yellow-500 dark:bg-yellow-900/20",
+      info: "border border-cyan-600 text-cyan-600 bg-cyan-50 dark:border-cyan-500 dark:text-cyan-500 dark:bg-cyan-900/20",
+    };
+    return `${base} ${variants[props.severity] || variants.secondary}`;
+  } else {
+    const variants = {
+      primary: "bg-blue-600 text-white dark:bg-blue-600",
+      secondary:
+        "bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-neutral-200",
+      success: "bg-green-600 text-white dark:bg-green-600",
+      danger: "bg-red-600 text-white dark:bg-red-600",
+      warning: "bg-yellow-600 text-white dark:bg-yellow-600",
+      info: "bg-cyan-600 text-white dark:bg-cyan-600",
+    };
+    return `${base} ${variants[props.severity] || variants.secondary}`;
+  }
+});
+
+// Tooltip attributes
+const tooltipClasses = computed(() => {
+  if (!props.tooltip) return "";
+
+  const placement = `[--placement:${props.tooltipPosition}]`;
+  return `hs-tooltip ${placement} inline-block`;
+});
+
+const tagClasses = computed(() => {
+  const baseClasses = `${sizeClasses.value} ${severityClasses.value} inline-flex items-center gap-x-1 ${props.class}`;
+
+  if (props.tooltip) {
+    return `${baseClasses} hs-tooltip-toggle`;
+  }
+
+  return baseClasses;
+});
+</script>
+
+<template>
+  <div v-if="tooltip" :class="tooltipClasses">
+    <span :class="tagClasses">
+      <!-- Icon Left -->
+      <component
+        v-if="icon && iconPosition === 'left'"
+        :is="icon"
+        :class="`${iconSizeClasses} ${iconClass}`"
+      />
+
+      <!-- Tag Text -->
+      <slot name="text">
+        <span :class="textClass">{{ text }}</span>
+      </slot>
+
+      <!-- Icon Right -->
+      <component
+        v-if="icon && iconPosition === 'right'"
+        :is="icon"
+        :class="`${iconSizeClasses} ${iconClass}`"
+      />
+
+      <!-- Tooltip Content -->
+      <span
+        class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-2xs dark:bg-neutral-700"
+        role="tooltip"
+      >
+        {{ tooltip }}
+      </span>
+    </span>
+  </div>
+
+  <span v-else :class="tagClasses">
+    <!-- Icon Left -->
+    <component
+      v-if="icon && iconPosition === 'left'"
+      :is="icon"
+      :class="`${iconSizeClasses} ${iconClass}`"
+    />
+
+    <!-- Tag Text -->
+    <slot name="text">
+      <span :class="textClass">{{ text }}</span>
+    </slot>
+
+    <!-- Icon Right -->
+    <component
+      v-if="icon && iconPosition === 'right'"
+      :is="icon"
+      :class="`${iconSizeClasses} ${iconClass}`"
+    />
+  </span>
+</template>