cisse-vue-ui 0.1.0 → 0.1.2

package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-D2MeLTRV.cjs

@@ -0,0 +1,1133 @@
+"use strict";
+const vue = require("vue");
+const BadgeType_vue_vue_type_script_setup_true_lang = require("./BadgeType.vue_vue_type_script_setup_true_lang-CJb63H1I.cjs");
+const vue$1 = require("@iconify/vue");
+const _hoisted_1$8 = { class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950" };
+const _hoisted_2$6 = {
+  key: 0,
+  class: "flex items-center justify-between border-b border-gray-200 px-5 py-3 dark:border-gray-700"
+};
+const _hoisted_3$4 = { class: "flex flex-col gap-0.5" };
+const _hoisted_4$2 = {
+  key: 0,
+  class: "text-md font-semibold text-gray-800 dark:text-gray-200"
+};
+const _hoisted_5$2 = {
+  key: 1,
+  class: "text-sm font-normal text-gray-600 dark:text-gray-400"
+};
+const _hoisted_6$1 = { class: "flex gap-2" };
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  __name: "CardComponent",
+  props: {
+    title: {},
+    description: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+        __props.title || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
+          vue.createElementVNode("div", _hoisted_3$4, [
+            __props.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$2, [
+              vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                vue.createTextVNode(vue.toDisplayString(__props.title), 1)
+              ])
+            ])) : vue.createCommentVNode("", true),
+            __props.description || _ctx.$slots.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$2, [
+              vue.renderSlot(_ctx.$slots, "description", {}, () => [
+                vue.createTextVNode(vue.toDisplayString(__props.description), 1)
+              ])
+            ])) : vue.createCommentVNode("", true)
+          ]),
+          vue.createElementVNode("div", _hoisted_6$1, [
+            vue.renderSlot(_ctx.$slots, "actions")
+          ])
+        ])) : vue.createCommentVNode("", true),
+        vue.renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+const _hoisted_1$7 = { class: "w-full divide-y divide-gray-300 text-left dark:divide-gray-700" };
+const _hoisted_2$5 = { class: "bg-gray-100 text-sm font-semibold text-gray-600 uppercase dark:bg-gray-800 dark:text-gray-400" };
+const _hoisted_3$3 = { class: "divide-y divide-gray-300 font-medium dark:divide-gray-700" };
+const _hoisted_4$1 = { class: "flex items-center justify-end gap-2 px-3 py-4" };
+const _hoisted_5$1 = { key: 0 };
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableComponent",
+  props: {
+    properties: {},
+    items: {}
+  },
+  setup(__props) {
+    const typeComponents = {
+      text: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$1,
+      number: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$2,
+      date: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$3,
+      boolean: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$4,
+      badge: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$5
+    };
+    const getTypeComponent = (type = "text") => {
+      return typeComponents[type] || BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$1;
+    };
+    const visibleProperties = vue.computed(() => __props.properties.filter((p) => !p.hidden));
+    const getItemValue = (item, property) => {
+      if (property.name.includes(".")) {
+        let value = item;
+        for (const key of property.name.split(".")) {
+          if (value && typeof value === "object" && key in value) {
+            value = value[key];
+          } else {
+            return void 0;
+          }
+        }
+        return value;
+      }
+      return item[property.name];
+    };
+    const getAlignmentClass = (align) => {
+      switch (align) {
+        case "center":
+          return "text-center";
+        case "right":
+          return "text-right";
+        default:
+          return "text-left";
+      }
+    };
+    const getMainClass = (main) => {
+      if (main) {
+        return "text-sm font-semibold text-gray-900 dark:text-gray-100";
+      }
+      return "text-xs font-medium text-gray-600 dark:text-gray-400";
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createElementVNode("table", _hoisted_1$7, [
+          vue.createElementVNode("thead", _hoisted_2$5, [
+            vue.createElementVNode("tr", null, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleProperties.value, (property) => {
+                return vue.openBlock(), vue.createElementBlock("th", {
+                  key: property.name,
+                  class: vue.normalizeClass([getAlignmentClass(property.align), "px-3 py-3"])
+                }, [
+                  vue.renderSlot(_ctx.$slots, "header-" + property.name, { property }, () => [
+                    vue.createTextVNode(vue.toDisplayString(property.label ?? property.name), 1)
+                  ])
+                ], 2);
+              }), 128)),
+              _cache[0] || (_cache[0] = vue.createElementVNode("th", { class: "px-3 py-3 text-right" }, null, -1))
+            ])
+          ]),
+          vue.createElementVNode("tbody", _hoisted_3$3, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+              return vue.openBlock(), vue.createElementBlock("tr", {
+                key: item.id,
+                class: "hover:bg-gray-50 dark:hover:bg-gray-800"
+              }, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleProperties.value, (property) => {
+                  return vue.openBlock(), vue.createElementBlock("td", {
+                    key: property.name,
+                    class: vue.normalizeClass([
+                      getAlignmentClass(property.align),
+                      getMainClass(property.main),
+                      property.className,
+                      "px-3 py-4"
+                    ])
+                  }, [
+                    vue.renderSlot(_ctx.$slots, "item-" + property.name, {
+                      item,
+                      property,
+                      value: getItemValue(item, property)
+                    }, () => [
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getTypeComponent(property.type || "text")), {
+                        value: getItemValue(item, property)
+                      }, null, 8, ["value"]))
+                    ])
+                  ], 2);
+                }), 128)),
+                vue.createElementVNode("td", _hoisted_4$1, [
+                  vue.renderSlot(_ctx.$slots, "action", { item })
+                ])
+              ]);
+            }), 128))
+          ])
+        ]),
+        !__props.items || __props.items.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
+          vue.renderSlot(_ctx.$slots, "empty")
+        ])) : vue.createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$6 = {
+  key: 0,
+  class: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
+};
+const _hoisted_2$4 = { class: "relative" };
+const _hoisted_3$2 = ["disabled", "placeholder"];
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = {
+  key: 0,
+  class: "px-4 py-3 text-sm text-gray-500"
+};
+const _hoisted_6 = ["data-index", "onClick"];
+const _hoisted_7 = { class: "flex-1 dark:text-white" };
+const _hoisted_8 = { class: "text-xs text-gray-400" };
+const _hoisted_9 = {
+  key: 1,
+  class: "mt-1 text-sm text-red-600"
+};
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  __name: "AutocompleteComponent",
+  props: {
+    modelValue: {},
+    options: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    label: {},
+    error: {},
+    noResultsText: {},
+    teleport: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const searchQuery = vue.ref("");
+    const isOpen = vue.ref(false);
+    const highlightedIndex = vue.ref(-1);
+    const inputRef = vue.ref(null);
+    const dropdownRef = vue.ref(null);
+    const containerRef = vue.ref(null);
+    const inputWrapperRef = vue.ref(null);
+    const dropdownPosition = vue.ref({ top: 0, left: 0, width: 0 });
+    const filteredOptions = vue.computed(() => {
+      if (!searchQuery.value) {
+        return props.options;
+      }
+      const query = searchQuery.value.toLowerCase();
+      return props.options.filter(
+        (option) => option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query)
+      );
+    });
+    const selectedLabel = vue.computed(() => {
+      if (!props.modelValue) return "";
+      const option = props.options.find((opt) => opt.value === props.modelValue);
+      return (option == null ? void 0 : option.label) || "";
+    });
+    vue.watch(
+      () => props.modelValue,
+      () => {
+        if (!isOpen.value) {
+          searchQuery.value = selectedLabel.value;
+        }
+      },
+      { immediate: true }
+    );
+    const updatePosition = () => {
+      if (!inputWrapperRef.value || !props.teleport) return;
+      const rect = inputWrapperRef.value.getBoundingClientRect();
+      dropdownPosition.value = {
+        top: rect.bottom + window.scrollY + 8,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      };
+    };
+    const openDropdown = () => {
+      if (props.disabled) return;
+      isOpen.value = true;
+      searchQuery.value = "";
+      highlightedIndex.value = -1;
+      vue.nextTick(() => {
+        var _a;
+        (_a = inputRef.value) == null ? void 0 : _a.focus();
+        updatePosition();
+      });
+    };
+    const closeDropdown = () => {
+      isOpen.value = false;
+      searchQuery.value = selectedLabel.value;
+      highlightedIndex.value = -1;
+    };
+    const selectOption = (option) => {
+      emit("update:modelValue", option.value);
+      searchQuery.value = option.label;
+      closeDropdown();
+    };
+    const clearSelection = () => {
+      emit("update:modelValue", null);
+      searchQuery.value = "";
+      highlightedIndex.value = -1;
+      vue.nextTick(() => {
+        var _a;
+        (_a = inputRef.value) == null ? void 0 : _a.focus();
+      });
+    };
+    const handleKeydown = (event) => {
+      if (!isOpen.value) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          highlightedIndex.value = Math.min(
+            highlightedIndex.value + 1,
+            filteredOptions.value.length - 1
+          );
+          scrollToHighlighted();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
+          scrollToHighlighted();
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (highlightedIndex.value >= 0 && filteredOptions.value[highlightedIndex.value]) {
+            selectOption(filteredOptions.value[highlightedIndex.value]);
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          closeDropdown();
+          break;
+      }
+    };
+    const scrollToHighlighted = () => {
+      vue.nextTick(() => {
+        if (dropdownRef.value) {
+          const highlightedElement = dropdownRef.value.querySelector(
+            `[data-index="${highlightedIndex.value}"]`
+          );
+          if (highlightedElement) {
+            highlightedElement.scrollIntoView({ block: "nearest" });
+          }
+        }
+      });
+    };
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      const isInsideContainer = (_a = containerRef.value) == null ? void 0 : _a.contains(target);
+      const isInsideDropdown = (_b = dropdownRef.value) == null ? void 0 : _b.contains(target);
+      if (!isInsideContainer && !isInsideDropdown) {
+        closeDropdown();
+      }
+    };
+    vue.watch(isOpen, (newValue) => {
+      if (newValue) {
+        document.addEventListener("click", handleClickOutside);
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+        window.removeEventListener("scroll", updatePosition, true);
+        window.removeEventListener("resize", updatePosition);
+      }
+    });
+    vue.onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    });
+    const dropdownStyle = vue.computed(() => {
+      if (!props.teleport) return {};
+      return {
+        position: "absolute",
+        top: `${dropdownPosition.value.top}px`,
+        left: `${dropdownPosition.value.left}px`,
+        width: `${dropdownPosition.value.width}px`
+      };
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "autocomplete-container"
+      }, [
+        __props.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$6, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_2$4, [
+          vue.createElementVNode("div", {
+            ref_key: "inputWrapperRef",
+            ref: inputWrapperRef,
+            class: vue.normalizeClass([{
+              "border-red-500": __props.error,
+              "border-gray-300 dark:border-gray-600": !__props.error && !isOpen.value,
+              "border-primary ring-2 ring-primary/20": isOpen.value,
+              "cursor-not-allowed opacity-50": __props.disabled
+            }, "flex items-center gap-2 rounded-lg border bg-white px-3 py-2 transition dark:bg-gray-800"])
+          }, [
+            vue.createVNode(vue.unref(vue$1.Icon), {
+              class: "size-5 text-gray-400",
+              icon: "lucide:search"
+            }),
+            vue.withDirectives(vue.createElementVNode("input", {
+              ref_key: "inputRef",
+              ref: inputRef,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+              disabled: __props.disabled,
+              placeholder: __props.placeholder || "Search...",
+              class: "flex-1 bg-transparent text-sm outline-none dark:text-white",
+              type: "text",
+              onFocus: openDropdown,
+              onKeydown: handleKeydown
+            }, null, 40, _hoisted_3$2), [
+              [vue.vModelText, searchQuery.value]
+            ]),
+            __props.modelValue && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              class: "rounded p-1 transition hover:bg-gray-100 dark:hover:bg-gray-700",
+              type: "button",
+              onClick: vue.withModifiers(clearSelection, ["stop"])
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                class: "size-4 text-gray-400",
+                icon: "lucide:x"
+              })
+            ])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("button", {
+              disabled: __props.disabled,
+              class: "rounded p-1 transition hover:bg-gray-100 dark:hover:bg-gray-700",
+              type: "button",
+              onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => isOpen.value ? closeDropdown() : openDropdown(), ["stop"]))
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                class: vue.normalizeClass([{ "rotate-180": isOpen.value }, "size-4 text-gray-400 transition"]),
+                icon: "lucide:chevron-down"
+              }, null, 8, ["class"])
+            ], 8, _hoisted_4)
+          ], 2),
+          (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            to: "body",
+            disabled: !__props.teleport
+          }, [
+            vue.createVNode(vue.Transition, {
+              "enter-active-class": "transition duration-100 ease-out",
+              "enter-from-class": "opacity-0 scale-95",
+              "enter-to-class": "opacity-100 scale-100",
+              "leave-active-class": "transition duration-75 ease-in",
+              "leave-from-class": "opacity-100 scale-100",
+              "leave-to-class": "opacity-0 scale-95"
+            }, {
+              default: vue.withCtx(() => [
+                isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 0,
+                  ref_key: "dropdownRef",
+                  ref: dropdownRef,
+                  style: vue.normalizeStyle(dropdownStyle.value),
+                  class: vue.normalizeClass([
+                    "autocomplete-dropdown z-[9999] max-h-60 overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800",
+                    !__props.teleport && "absolute mt-2 w-full"
+                  ])
+                }, [
+                  filteredOptions.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, vue.toDisplayString(__props.noResultsText || "No results found"), 1)) : vue.createCommentVNode("", true),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option, index) => {
+                    return vue.openBlock(), vue.createElementBlock("button", {
+                      key: option.value,
+                      class: vue.normalizeClass([{
+                        "bg-gray-100 dark:bg-gray-700": highlightedIndex.value === index,
+                        "bg-primary/10": __props.modelValue === option.value
+                      }, "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition hover:bg-gray-100 dark:hover:bg-gray-700"]),
+                      "data-index": index,
+                      type: "button",
+                      onClick: ($event) => selectOption(option)
+                    }, [
+                      __props.modelValue === option.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                        key: 0,
+                        class: "size-4 text-primary",
+                        icon: "lucide:check"
+                      })) : vue.createCommentVNode("", true),
+                      vue.createElementVNode("span", _hoisted_7, vue.toDisplayString(option.label), 1),
+                      vue.createElementVNode("span", _hoisted_8, "(" + vue.toDisplayString(option.value) + ")", 1)
+                    ], 10, _hoisted_6);
+                  }), 128))
+                ], 6)) : vue.createCommentVNode("", true)
+              ]),
+              _: 1
+            })
+          ], 8, ["disabled"]))
+        ]),
+        __props.error ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_9, vue.toDisplayString(__props.error), 1)) : vue.createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableAction",
+  props: {
+    link: {},
+    icon: {},
+    color: {}
+  },
+  setup(__props) {
+    const colorClass = vue.computed(() => {
+      switch (__props.color) {
+        case "info":
+          return "border-blue-200 hover:bg-blue-100 dark:border-blue-800 dark:hover:bg-blue-900";
+        case "warning":
+          return "border-yellow-200 hover:bg-yellow-100 dark:border-yellow-800 dark:hover:bg-yellow-900";
+        case "success":
+          return "border-green-200 hover:bg-green-100 dark:border-green-800 dark:hover:bg-green-900";
+        case "error":
+          return "border-red-200 hover:bg-red-100 dark:border-red-800 dark:hover:bg-red-900";
+        default:
+          return "border-gray-200 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800";
+      }
+    });
+    const iconColorClass = vue.computed(() => {
+      switch (__props.color) {
+        case "info":
+          return "text-blue-600 group-hover:text-blue-900 dark:text-blue-400 dark:group-hover:text-blue-100";
+        case "warning":
+          return "text-yellow-600 group-hover:text-yellow-900 dark:text-yellow-400 dark:group-hover:text-yellow-100";
+        case "success":
+          return "text-green-600 group-hover:text-green-900 dark:text-green-400 dark:group-hover:text-green-100";
+        case "error":
+          return "text-red-600 group-hover:text-red-900 dark:text-red-400 dark:group-hover:text-red-100";
+        default:
+          return "text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100";
+      }
+    });
+    const linkComponent = vue.computed(() => {
+      if (!__props.link) return "button";
+      try {
+        const RouterLink = vue.resolveComponent("RouterLink");
+        if (typeof RouterLink !== "string") {
+          return RouterLink;
+        }
+      } catch {
+      }
+      return "a";
+    });
+    const linkProps = vue.computed(() => {
+      if (!__props.link) return {};
+      if (linkComponent.value === "a") {
+        return { href: __props.link };
+      }
+      return { to: __props.link };
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(linkComponent.value), vue.mergeProps(linkProps.value, {
+        class: [colorClass.value, "group flex size-8 items-center justify-center rounded-lg border"]
+      }), {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(vue$1.Icon), {
+            class: vue.normalizeClass([iconColorClass.value, "size-4"]),
+            icon: __props.icon
+          }, null, 8, ["class", "icon"])
+        ]),
+        _: 1
+      }, 16, ["class"]);
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Button",
+  props: {
+    variant: { default: "primary" },
+    size: { default: "md" },
+    icon: {},
+    iconRight: {},
+    loading: { type: Boolean },
+    disabled: { type: Boolean },
+    block: { type: Boolean },
+    href: {},
+    to: {},
+    type: { default: "button" }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const variantClasses = {
+      primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-primary",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus:ring-secondary",
+      outline: "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus:ring-primary dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
+      ghost: "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-primary dark:text-gray-300 dark:hover:bg-gray-800",
+      danger: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-500",
+      success: "bg-green-500 text-white hover:bg-green-600 focus:ring-green-500"
+    };
+    const sizeClasses = {
+      xs: "px-2 py-1 text-xs gap-1",
+      sm: "px-3 py-1.5 text-sm gap-1.5",
+      md: "px-4 py-2 text-sm gap-2",
+      lg: "px-5 py-2.5 text-base gap-2",
+      xl: "px-6 py-3 text-lg gap-2.5"
+    };
+    const iconSizeClasses = {
+      xs: "size-3",
+      sm: "size-4",
+      md: "size-4",
+      lg: "size-5",
+      xl: "size-6"
+    };
+    const classes = vue.computed(() => [
+      "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+      variantClasses[props.variant],
+      sizeClasses[props.size],
+      props.block && "w-full"
+    ]);
+    const component = vue.computed(() => {
+      if (props.to) {
+        try {
+          const RouterLink = vue.resolveComponent("RouterLink");
+          if (typeof RouterLink !== "string") return RouterLink;
+        } catch {
+        }
+      }
+      if (props.href) return "a";
+      return "button";
+    });
+    const componentProps = vue.computed(() => {
+      if (props.to) return { to: props.to };
+      if (props.href) return { href: props.href };
+      return { type: props.type, disabled: props.disabled || props.loading };
+    });
+    const handleClick = (event) => {
+      if (props.disabled || props.loading) return;
+      emit("click", event);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(component.value), vue.mergeProps(componentProps.value, {
+        class: classes.value,
+        onClick: handleClick
+      }), {
+        default: vue.withCtx(() => [
+          __props.loading ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+            key: 0,
+            icon: "lucide:loader-2",
+            class: vue.normalizeClass([iconSizeClasses[__props.size], "animate-spin"])
+          }, null, 8, ["class"])) : __props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+            key: 1,
+            icon: __props.icon,
+            class: vue.normalizeClass(iconSizeClasses[__props.size])
+          }, null, 8, ["icon", "class"])) : vue.createCommentVNode("", true),
+          vue.renderSlot(_ctx.$slots, "default"),
+          __props.iconRight && !__props.loading ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+            key: 2,
+            icon: __props.iconRight,
+            class: vue.normalizeClass(iconSizeClasses[__props.size])
+          }, null, 8, ["icon", "class"])) : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _hoisted_1$5 = { class: "relative inline-block" };
+const _hoisted_2$3 = ["src", "alt"];
+const _hoisted_3$1 = { key: 1 };
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Avatar",
+  props: {
+    src: {},
+    alt: {},
+    name: {},
+    size: { default: "md" },
+    status: {},
+    rounded: { default: "full" }
+  },
+  setup(__props) {
+    const props = __props;
+    const imageError = vue.ref(false);
+    const sizeClasses = {
+      xs: "size-6 text-xs",
+      sm: "size-8 text-sm",
+      md: "size-10 text-base",
+      lg: "size-12 text-lg",
+      xl: "size-16 text-xl",
+      "2xl": "size-20 text-2xl"
+    };
+    const statusSizes = {
+      xs: "size-1.5",
+      sm: "size-2",
+      md: "size-2.5",
+      lg: "size-3",
+      xl: "size-4",
+      "2xl": "size-5"
+    };
+    const statusColors = {
+      online: "bg-green-500",
+      offline: "bg-gray-400",
+      away: "bg-yellow-500",
+      busy: "bg-red-500"
+    };
+    const roundedClasses = {
+      full: "rounded-full",
+      lg: "rounded-lg",
+      md: "rounded-md"
+    };
+    const initials = vue.computed(() => {
+      if (!props.name) return "";
+      return props.name.split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase();
+    });
+    const showImage = vue.computed(() => props.src && !imageError.value);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass([
+            "flex items-center justify-center overflow-hidden bg-gray-200 font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300",
+            sizeClasses[__props.size],
+            roundedClasses[__props.rounded]
+          ])
+        }, [
+          showImage.value ? (vue.openBlock(), vue.createElementBlock("img", {
+            key: 0,
+            src: __props.src,
+            alt: __props.alt || __props.name,
+            class: "size-full object-cover",
+            onError: _cache[0] || (_cache[0] = ($event) => imageError.value = true)
+          }, null, 40, _hoisted_2$3)) : initials.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, vue.toDisplayString(initials.value), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+            key: 2,
+            icon: "lucide:user",
+            class: "size-1/2"
+          }))
+        ], 2),
+        __props.status ? (vue.openBlock(), vue.createElementBlock("span", {
+          key: 0,
+          class: vue.normalizeClass([
+            "absolute bottom-0 right-0 block rounded-full ring-2 ring-white dark:ring-gray-900",
+            statusSizes[__props.size],
+            statusColors[__props.status]
+          ])
+        }, null, 2)) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$4 = ["aria-selected", "disabled", "onClick"];
+const _hoisted_2$2 = { class: "mt-4" };
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Tabs",
+  props: {
+    tabs: {},
+    modelValue: {},
+    variant: { default: "underline" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const activeTab = vue.computed({
+      get: () => {
+        var _a;
+        return props.modelValue || ((_a = props.tabs[0]) == null ? void 0 : _a.key);
+      },
+      set: (value) => emit("update:modelValue", value)
+    });
+    const selectTab = (tab) => {
+      if (tab.disabled) return;
+      activeTab.value = tab.key;
+    };
+    const variantClasses = {
+      underline: {
+        container: "border-b border-gray-200 dark:border-gray-700",
+        tab: "border-b-2 -mb-px px-4 py-2",
+        active: "border-primary text-primary dark:text-primary",
+        inactive: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
+      },
+      pills: {
+        container: "gap-2",
+        tab: "px-4 py-2 rounded-lg",
+        active: "bg-primary text-white",
+        inactive: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+      },
+      boxed: {
+        container: "bg-gray-100 dark:bg-gray-800 p-1 rounded-lg gap-1",
+        tab: "px-4 py-2 rounded-md",
+        active: "bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow-sm",
+        inactive: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+      }
+    };
+    vue.provide("activeTab", activeTab);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass([
+            "flex",
+            variantClasses[__props.variant].container
+          ]),
+          role: "tablist"
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.tabs, (tab) => {
+            return vue.openBlock(), vue.createElementBlock("button", {
+              key: tab.key,
+              type: "button",
+              role: "tab",
+              "aria-selected": activeTab.value === tab.key,
+              disabled: tab.disabled,
+              class: vue.normalizeClass([
+                "text-sm font-medium transition-colors focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+                variantClasses[__props.variant].tab,
+                activeTab.value === tab.key ? variantClasses[__props.variant].active : variantClasses[__props.variant].inactive
+              ]),
+              onClick: ($event) => selectTab(tab)
+            }, vue.toDisplayString(tab.label), 11, _hoisted_1$4);
+          }), 128))
+        ], 2),
+        vue.createElementVNode("div", _hoisted_2$2, [
+          vue.renderSlot(_ctx.$slots, "default", { activeTab: activeTab.value })
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1$3 = { role: "tabpanel" };
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "TabPanel",
+  props: {
+    value: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const activeTab = vue.inject("activeTab");
+    const isActive = vue.computed(() => (activeTab == null ? void 0 : activeTab.value) === props.value);
+    return (_ctx, _cache) => {
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 512)), [
+        [vue.vShow, isActive.value]
+      ]);
+    };
+  }
+});
+const _hoisted_1$2 = {
+  type: "button",
+  class: "inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+};
+const _hoisted_2$1 = {
+  key: 0,
+  class: "my-1 border-t border-gray-200 dark:border-gray-700"
+};
+const _hoisted_3 = ["disabled", "onClick"];
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Dropdown",
+  props: {
+    items: {},
+    align: { default: "left" },
+    width: { default: "auto" },
+    teleport: { type: Boolean, default: true }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isOpen = vue.ref(false);
+    const dropdownRef = vue.ref();
+    const triggerRef = vue.ref();
+    const menuRef = vue.ref();
+    const dropdownPosition = vue.ref({ top: 0, left: 0, width: 0 });
+    const updatePosition = () => {
+      if (!triggerRef.value || !props.teleport) return;
+      const rect = triggerRef.value.getBoundingClientRect();
+      dropdownPosition.value = {
+        top: rect.bottom + window.scrollY + 8,
+        left: props.align === "right" ? rect.right + window.scrollX : rect.left + window.scrollX,
+        width: rect.width
+      };
+    };
+    const toggle = () => {
+      isOpen.value = !isOpen.value;
+      if (isOpen.value) {
+        vue.nextTick(updatePosition);
+      }
+    };
+    const close = () => {
+      isOpen.value = false;
+    };
+    const selectItem = (item) => {
+      if (item.disabled || item.divider) return;
+      emit("select", item);
+      close();
+    };
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      const isInsideTrigger = (_a = triggerRef.value) == null ? void 0 : _a.contains(target);
+      const isInsideMenu = (_b = menuRef.value) == null ? void 0 : _b.contains(target);
+      if (!isInsideTrigger && !isInsideMenu) {
+        close();
+      }
+    };
+    vue.watch(isOpen, (newValue) => {
+      if (newValue) {
+        document.addEventListener("click", handleClickOutside);
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+        window.removeEventListener("scroll", updatePosition, true);
+        window.removeEventListener("resize", updatePosition);
+      }
+    });
+    vue.onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    });
+    const widthClasses = {
+      auto: "w-auto min-w-[10rem]",
+      full: "w-full",
+      sm: "w-32",
+      md: "w-48",
+      lg: "w-64"
+    };
+    const dropdownStyle = vue.computed(() => {
+      if (!props.teleport) return {};
+      return {
+        position: "absolute",
+        top: `${dropdownPosition.value.top}px`,
+        left: props.align === "right" ? "auto" : `${dropdownPosition.value.left}px`,
+        right: props.align === "right" ? `${window.innerWidth - dropdownPosition.value.left - dropdownPosition.value.width}px` : "auto"
+      };
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "dropdownRef",
+        ref: dropdownRef,
+        class: "relative inline-block"
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          onClick: toggle
+        }, [
+          vue.renderSlot(_ctx.$slots, "trigger", {}, () => [
+            vue.createElementVNode("button", _hoisted_1$2, [
+              vue.renderSlot(_ctx.$slots, "trigger-label", {}, () => [
+                _cache[0] || (_cache[0] = vue.createTextVNode("Options", -1))
+              ]),
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                icon: "lucide:chevron-down",
+                class: vue.normalizeClass(["size-4 transition-transform", isOpen.value && "rotate-180"])
+              }, null, 8, ["class"])
+            ])
+          ])
+        ], 512),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          to: "body",
+          disabled: !__props.teleport
+        }, [
+          vue.createVNode(vue.Transition, {
+            "enter-active-class": "transition ease-out duration-100",
+            "enter-from-class": "transform opacity-0 scale-95",
+            "enter-to-class": "transform opacity-100 scale-100",
+            "leave-active-class": "transition ease-in duration-75",
+            "leave-from-class": "transform opacity-100 scale-100",
+            "leave-to-class": "transform opacity-0 scale-95"
+          }, {
+            default: vue.withCtx(() => [
+              isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                ref_key: "menuRef",
+                ref: menuRef,
+                style: vue.normalizeStyle(dropdownStyle.value),
+                class: vue.normalizeClass([
+                  "z-[9999] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800",
+                  widthClasses[__props.width],
+                  !__props.teleport && (__props.align === "right" ? "absolute mt-2 right-0" : "absolute mt-2 left-0")
+                ])
+              }, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+                  return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                    key: item.key
+                  }, [
+                    item.divider ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1)) : (vue.openBlock(), vue.createElementBlock("button", {
+                      key: 1,
+                      type: "button",
+                      disabled: item.disabled,
+                      class: vue.normalizeClass([
+                        "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors",
+                        item.disabled ? "cursor-not-allowed opacity-50" : item.danger ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20" : "text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                      ]),
+                      onClick: ($event) => selectItem(item)
+                    }, [
+                      item.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                        key: 0,
+                        icon: item.icon,
+                        class: "size-4"
+                      }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                      vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)
+                    ], 10, _hoisted_3))
+                  ], 64);
+                }), 128))
+              ], 6)) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 8, ["disabled"]))
+      ], 512);
+    };
+  }
+});
+const _hoisted_1$1 = {
+  key: 2,
+  class: "text-sm font-semibold"
+};
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Stepper",
+  props: {
+    steps: {},
+    modelValue: {},
+    orientation: { default: "horizontal" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const getCurrentStepIndex = () => {
+      if (props.modelValue === void 0) return 0;
+      const index = props.steps.findIndex((s) => s.key === props.modelValue);
+      return index >= 0 ? index : 0;
+    };
+    const isStepComplete = (index) => index < getCurrentStepIndex();
+    const isStepActive = (index) => index === getCurrentStepIndex();
+    const isStepPending = (index) => index > getCurrentStepIndex();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          "w-full",
+          __props.orientation === "vertical" ? "flex flex-col" : ""
+        ])
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass([
+            __props.orientation === "horizontal" ? "relative flex items-start justify-between" : "relative flex flex-col gap-4"
+          ])
+        }, [
+          __props.orientation === "horizontal" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            _cache[0] || (_cache[0] = vue.createElementVNode("div", {
+              class: "absolute left-0 top-6 h-0.5 w-full bg-gray-200 dark:bg-gray-700",
+              "aria-hidden": "true"
+            }, null, -1)),
+            vue.createElementVNode("div", {
+              class: "absolute left-0 top-6 h-0.5 bg-primary transition-all duration-500 ease-in-out",
+              style: vue.normalizeStyle({
+                width: `${getCurrentStepIndex() / (__props.steps.length - 1) * 100}%`
+              }),
+              "aria-hidden": "true"
+            }, null, 4)
+          ], 64)) : vue.createCommentVNode("", true),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.steps, (step, index) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: step.key,
+              class: vue.normalizeClass([
+                "relative",
+                __props.orientation === "horizontal" ? "flex flex-1 flex-col items-center" : "flex items-start gap-4"
+              ])
+            }, [
+              __props.orientation === "vertical" && index < __props.steps.length - 1 ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: vue.normalizeClass(["absolute left-6 top-12 h-full w-0.5 -translate-x-1/2", isStepComplete(index) ? "bg-primary" : "bg-gray-200 dark:bg-gray-700"])
+              }, null, 2)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["relative z-10 flex size-12 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-300", {
+                  "border-primary bg-primary text-white shadow-lg": isStepActive(index) || isStepComplete(index),
+                  "border-gray-300 bg-white text-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-500": isStepPending(index)
+                }])
+              }, [
+                isStepComplete(index) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                  key: 0,
+                  icon: "lucide:check",
+                  class: "size-6"
+                })) : step.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                  key: 1,
+                  icon: step.icon,
+                  class: "size-6"
+                }, null, 8, ["icon"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1, vue.toDisplayString(index + 1), 1))
+              ], 2),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([
+                  __props.orientation === "horizontal" ? "mt-4 flex flex-col items-center text-center" : "flex flex-col pt-2"
+                ])
+              }, [
+                vue.createElementVNode("p", {
+                  class: vue.normalizeClass(["text-sm font-semibold transition-colors", {
+                    "text-primary dark:text-primary": isStepActive(index) || isStepComplete(index),
+                    "text-gray-500 dark:text-gray-400": isStepPending(index)
+                  }])
+                }, vue.toDisplayString(step.title), 3),
+                step.description ? (vue.openBlock(), vue.createElementBlock("p", {
+                  key: 0,
+                  class: vue.normalizeClass(["mt-1 text-xs", {
+                    "text-gray-600 dark:text-gray-300": isStepActive(index),
+                    "text-gray-500 dark:text-gray-400": !isStepActive(index)
+                  }])
+                }, vue.toDisplayString(step.description), 3)) : vue.createCommentVNode("", true)
+              ], 2)
+            ], 2);
+          }), 128))
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1 = { class: "overflow-hidden" };
+const _hoisted_2 = { class: "space-y-4 p-6" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "CollapsibleCard",
+  props: {
+    title: {},
+    description: {},
+    defaultExpanded: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const isExpanded = vue.ref(props.defaultExpanded);
+    const toggle = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        title: __props.title,
+        description: __props.description
+      }, {
+        actions: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "actions"),
+          vue.createElementVNode("button", {
+            type: "button",
+            class: "rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800",
+            onClick: toggle
+          }, [
+            vue.createVNode(vue.unref(vue$1.Icon), {
+              icon: isExpanded.value ? "lucide:chevron-up" : "lucide:chevron-down",
+              class: "size-5"
+            }, null, 8, ["icon"])
+          ])
+        ]),
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.Transition, {
+            "enter-active-class": "transition-all duration-200 ease-out",
+            "enter-from-class": "opacity-0 max-h-0",
+            "enter-to-class": "opacity-100 max-h-[2000px]",
+            "leave-active-class": "transition-all duration-200 ease-in",
+            "leave-from-class": "opacity-100 max-h-[2000px]",
+            "leave-to-class": "opacity-0 max-h-0"
+          }, {
+            default: vue.withCtx(() => [
+              vue.withDirectives(vue.createElementVNode("div", _hoisted_1, [
+                vue.createElementVNode("div", _hoisted_2, [
+                  vue.renderSlot(_ctx.$slots, "default")
+                ])
+              ], 512), [
+                [vue.vShow, isExpanded.value]
+              ])
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["title", "description"]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main$a;
+exports._sfc_main$1 = _sfc_main$9;
+exports._sfc_main$10 = _sfc_main;
+exports._sfc_main$2 = _sfc_main$8;
+exports._sfc_main$3 = _sfc_main$7;
+exports._sfc_main$4 = _sfc_main$6;
+exports._sfc_main$5 = _sfc_main$5;
+exports._sfc_main$6 = _sfc_main$4;
+exports._sfc_main$7 = _sfc_main$3;
+exports._sfc_main$8 = _sfc_main$2;
+exports._sfc_main$9 = _sfc_main$1;
+//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-D2MeLTRV.cjs.map