ri-platform-ui-library/dist/index.es.js

Shared UI components library for Recruiter Intelligence Platform

import { defineComponent as j, resolveComponent as q, createElementBlock as i, openBlock as s, normalizeClass as y, unref as k, createBlock as L, createCommentVNode as f, renderSlot as G, createTextVNode as A, toDisplayString as m, createElementVNode as e, computed as C, Fragment as O, renderList as J, createVNode as w, resolveDynamicComponent as Y, mergeProps as Be, normalizeStyle as X, createStaticVNode as re, withCtx as F, withDirectives as ae, vShow as he, withKeys as pe, withModifiers as ee, ref as N, onUnmounted as ye, watch as ne, onBeforeUnmount as kt, onMounted as je, vModelText as Ve, nextTick as _e, Transition as me, Teleport as it, TransitionGroup as wt, vModelSelect as Ee } from "vue";
import { Line as dt, Doughnut as $t, Pie as Ct, Bar as _t } from "vue-chartjs";
import { Chart as Te, Title as Pe, Tooltip as He, Legend as Ue, LineElement as ut, CategoryScale as Qe, LinearScale as Ke, PointElement as ct, Filler as gt, ArcElement as Bt, BarElement as zt } from "chart.js";
import { useEditor as Mt, EditorContent as St } from "@tiptap/vue-3";
import jt from "@tiptap/starter-kit";
import Vt from "@tiptap/extension-underline";
import At from "@tiptap/extension-text-align";
import Dt from "@tiptap/extension-link";
import It from "@tiptap/extension-character-count";
import Lt from "@tiptap/extension-text-style";
import Ft from "@tiptap/extension-color";
import { useRouter as Tt, useRoute as Pt } from "vue-router";
const Ht = ["type", "disabled"], Ut = { key: 3 }, le = /* @__PURE__ */ j({
  __name: "BaseButton",
  props: {
    variant: { default: "primary" },
    size: { default: "md" },
    type: { default: "button" },
    disabled: { type: Boolean, default: !1 },
    loading: { type: Boolean, default: !1 },
    fullWidth: { type: Boolean, default: !1 },
    text: { default: "" },
    leftIcon: { default: void 0 },
    rightIcon: { default: void 0 },
    className: { default: "" }
  },
  emits: ["click"],
  setup(u, { emit: a }) {
    const r = u, t = a, o = computed(() => ({
      xs: "px-2.5 py-1.5 text-xs",
      sm: "px-3 py-2 text-sm",
      md: "px-4 py-2 text-sm",
      lg: "px-4 py-2 text-base",
      xl: "px-6 py-3 text-lg"
    })[r.size]), n = computed(() => ({
      xs: "xs",
      sm: "sm",
      md: "sm",
      lg: "md",
      xl: "lg"
    })[r.size]), c = computed(() => ({
      primary: "bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600",
      secondary: "bg-gray-600 hover:bg-gray-700 text-white focus:ring-gray-500 dark:bg-gray-500 dark:hover:bg-gray-600",
      success: "bg-green-600 hover:bg-green-700 text-white focus:ring-green-500 dark:bg-green-500 dark:hover:bg-green-600",
      danger: "bg-red-600 hover:bg-red-700 text-white focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600",
      warning: "bg-yellow-600 hover:bg-yellow-700 text-white focus:ring-yellow-500 dark:bg-yellow-500 dark:hover:bg-yellow-600",
      info: "bg-purple-600 hover:bg-purple-700 text-white focus:ring-purple-500 dark:bg-purple-500 dark:hover:bg-purple-600",
      ghost: "bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-gray-500",
      outline: "bg-transparent border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-gray-500"
    })[r.variant]), l = computed(() => `text-current ${n.value === "xs" ? "w-3 h-3" : n.value === "sm" ? "w-4 h-4" : n.value === "md" ? "w-5 h-5" : n.value === "lg" ? "w-6 h-6" : "w-8 h-8"}`), d = (g) => {
      !r.disabled && !r.loading && t("click", g);
    };
    return (g, v) => {
      const b = q("BaseSpinner"), p = q("BaseIcon");
      return s(), i("button", {
        type: g.type,
        disabled: g.disabled || g.loading,
        class: y([
          "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed",
          k(o),
          k(c),
          g.fullWidth ? "w-full" : "",
          g.disabled || g.loading ? "opacity-50 cursor-not-allowed" : "",
          g.className
        ]),
        onClick: d
      }, [
        g.loading ? (s(), L(b, {
          key: 0,
          size: k(n) === "2xl" ? "xl" : k(n),
          color: "current",
          class: "-ml-1 mr-2"
        }, null, 8, ["size"])) : f("", !0),
        g.$slots["left-icon"] && !g.loading ? G(g.$slots, "left-icon", {
          key: 1,
          iconSize: k(n),
          iconClass: k(l)
        }) : g.leftIcon && !g.loading ? (s(), L(p, {
          key: 2,
          icon: g.leftIcon,
          size: k(n),
          class: "mr-2"
        }, null, 8, ["icon", "size"])) : f("", !0),
        g.text || g.$slots.default ? (s(), i("span", Ut, [
          G(g.$slots, "default", {}, () => [
            A(m(g.text), 1)
          ])
        ])) : f("", !0),
        g.$slots["right-icon"] && !g.loading ? G(g.$slots, "right-icon", {
          key: 4,
          iconSize: k(n),
          iconClass: k(l)
        }) : g.rightIcon && !g.loading ? (s(), L(p, {
          key: 5,
          icon: g.rightIcon,
          size: k(n),
          class: "ml-2"
        }, null, 8, ["icon", "size"])) : f("", !0)
      ], 10, Ht);
    };
  }
}), ke = /* @__PURE__ */ j({
  __name: "ChevronDownIcon",
  props: {
    iconClass: { default: "h-5 w-5" }
  },
  setup(u) {
    return (a, r) => (s(), i("svg", {
      class: y(a.iconClass),
      fill: "none",
      stroke: "currentColor",
      viewBox: "0 0 24 24",
      xmlns: "http://www.w3.org/2000/svg"
    }, r[0] || (r[0] = [
      e("path", {
        "stroke-linecap": "round",
        "stroke-linejoin": "round",
        "stroke-width": "2",
        d: "M19 9l-7 7-7-7"
      }, null, -1)
    ]), 2));
  }
});
let Rt = 0;
function Xe(u = "id") {
  return `${u}-${++Rt}`;
}
const Nt = ["for"], Et = {
  key: 0,
  class: "text-red-500 ml-1"
}, qt = { class: "relative" }, Ot = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "autocomplete", "min", "max"], Jt = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows"], Wt = {
  key: 2,
  class: "relative"
}, Gt = ["id", "value", "disabled", "required"], Qt = {
  key: 0,
  value: "",
  disabled: "",
  class: "text-gray-500 dark:text-dark-400"
}, Kt = ["value"], Xt = { class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none" }, qe = {
  __name: "BaseInput",
  props: {
    modelValue: {
      type: [String, Number],
      default: ""
    },
    type: {
      type: String,
      default: "text",
      validator: (u) => [
        "text",
        "email",
        "password",
        "number",
        "tel",
        "url",
        "search",
        "textarea",
        "select"
      ].includes(u)
    },
    label: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    helpText: {
      type: String,
      default: ""
    },
    errorMessage: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: "md",
      validator: (u) => ["sm", "md", "lg"].includes(u)
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    readonly: {
      type: Boolean,
      default: !1
    },
    required: {
      type: Boolean,
      default: !1
    },
    rows: {
      type: Number,
      default: 3
    },
    min: {
      type: [String, Number],
      default: void 0
    },
    max: {
      type: [String, Number],
      default: void 0
    },
    options: {
      type: Array,
      default: () => []
    },
    optionValue: {
      type: String,
      default: "value"
    },
    optionLabel: {
      type: String,
      default: "label"
    },
    leftIcon: {
      type: [Object, Function],
      default: null
    },
    rightIcon: {
      type: [Object, Function],
      default: null
    },
    autocomplete: {
      type: String,
      default: void 0
    }
  },
  emits: ["update:modelValue", "focus", "blur", "change"],
  setup(u, { emit: a }) {
    const r = a, t = u, o = Xe("input"), n = C(() => t.id || o.value), c = C(() => !!t.errorMessage), l = C(() => {
      const z = t.leftIcon ? "pl-10" : "pl-3", H = t.rightIcon || t.type === "select" ? "pr-10" : "pr-3";
      switch (t.size) {
        case "sm":
          return `${z} ${H} py-2 text-sm`;
        case "lg":
          return `${z} ${H} py-4 text-lg`;
        default:
          return `${z} ${H} py-3 text-base`;
      }
    }), d = C(() => {
      switch (t.size) {
        case "sm":
          return "text-sm";
        case "lg":
          return "text-base";
        default:
          return "text-sm";
      }
    }), g = C(() => {
      switch (t.size) {
        case "sm":
          return "text-xs";
        case "lg":
          return "text-sm";
        default:
          return "text-sm";
      }
    }), v = C(() => {
      switch (t.size) {
        case "sm":
          return "h-4 w-4";
        case "lg":
          return "h-6 w-6";
        default:
          return "h-5 w-5";
      }
    }), b = C(
      () => "border-gray-300 dark:border-dark-600 bg-white dark:bg-dark-700 text-gray-900 dark:text-dark-100 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 hover:border-gray-400 dark:hover:border-dark-500 shadow-sm focus:shadow-md"
    ), p = C(
      () => "border-red-300 dark:border-red-600 bg-red-50 dark:bg-red-900/20 text-gray-900 dark:text-dark-100 focus:border-red-500 focus:ring-red-500"
    ), x = C(() => {
      var z, H;
      if (t.autocomplete)
        return t.autocomplete;
      switch (t.type) {
        case "email":
          return "email";
        case "password":
          return (z = t.label) != null && z.toLowerCase().includes("new") || (H = t.label) != null && H.toLowerCase().includes("confirm") ? "new-password" : "current-password";
        default:
          return;
      }
    }), V = (z) => {
      r("update:modelValue", z.target.value);
    }, $ = (z) => {
      r("update:modelValue", z.target.value), r("change", z.target.value);
    }, D = (z) => {
      r("focus", z);
    }, _ = (z) => {
      r("blur", z);
    }, W = (z) => typeof z == "object" ? z[t.optionValue] : z, P = (z) => typeof z == "object" ? z[t.optionLabel] : z;
    return (z, H) => (s(), i("div", null, [
      u.label ? (s(), i("label", {
        key: 0,
        for: n.value,
        class: y([
          "block font-semibold mb-2",
          d.value,
          "text-gray-800 dark:text-dark-200"
        ])
      }, [
        A(m(u.label) + " ", 1),
        u.required ? (s(), i("span", Et, "*")) : f("", !0)
      ], 10, Nt)) : f("", !0),
      e("div", qt, [
        u.type !== "textarea" && u.type !== "select" ? (s(), i("input", {
          key: 0,
          id: n.value,
          type: u.type,
          value: u.modelValue,
          placeholder: u.placeholder,
          disabled: u.disabled,
          readonly: u.readonly,
          required: u.required,
          autocomplete: x.value,
          min: u.type === "number" ? u.min : void 0,
          max: u.type === "number" ? u.max : void 0,
          class: y([
            "block w-full rounded-md transition-all duration-200",
            "border focus:outline-none focus:ring-2 focus:ring-offset-0",
            "text-ellipsis overflow-hidden",
            l.value,
            c.value ? p.value : b.value,
            u.disabled ? "opacity-50 cursor-not-allowed" : "",
            u.readonly ? "bg-gray-50 dark:bg-dark-700/50" : ""
          ]),
          onInput: V,
          onBlur: _,
          onFocus: D
        }, null, 42, Ot)) : u.type === "textarea" ? (s(), i("textarea", {
          key: 1,
          id: n.value,
          value: u.modelValue,
          placeholder: u.placeholder,
          disabled: u.disabled,
          readonly: u.readonly,
          required: u.required,
          rows: u.rows,
          class: y([
            "block w-full min-w-0 rounded-md transition-colors duration-200",
            "border focus:outline-none focus:ring-2 focus:ring-offset-0 resize-vertical",
            l.value,
            c.value ? p.value : b.value,
            u.disabled ? "opacity-50 cursor-not-allowed" : "",
            u.readonly ? "bg-gray-50 dark:bg-dark-700/50" : ""
          ]),
          onInput: V,
          onBlur: _,
          onFocus: D
        }, null, 42, Jt)) : u.type === "select" ? (s(), i("div", Wt, [
          e("select", {
            id: n.value,
            value: u.modelValue,
            disabled: u.disabled,
            required: u.required,
            class: y([
              "block w-full min-w-0 rounded-md transition-all duration-200 appearance-none",
              "border focus:outline-none focus:ring-2 focus:ring-offset-0",
              "pr-10",
              // Extra padding for dropdown arrow
              l.value,
              c.value ? p.value : b.value,
              u.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
            ]),
            onChange: $,
            onBlur: _,
            onFocus: D
          }, [
            u.placeholder ? (s(), i("option", Qt, m(u.placeholder), 1)) : f("", !0),
            (s(!0), i(O, null, J(u.options, (R) => (s(), i("option", {
              key: W(R),
              value: W(R),
              class: "text-gray-900 dark:text-dark-100 bg-white dark:bg-dark-700"
            }, m(P(R)), 9, Kt))), 128))
          ], 42, Gt),
          e("div", Xt, [
            w(ke, { "icon-class": "h-4 w-4 text-gray-400 dark:text-dark-500" })
          ])
        ])) : f("", !0),
        u.leftIcon ? (s(), i("div", {
          key: 3,
          class: y([
            "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none",
            v.value,
            "text-gray-400 dark:text-dark-500"
          ])
        }, [
          (s(), L(Y(u.leftIcon)))
        ], 2)) : f("", !0),
        u.rightIcon ? (s(), i("div", {
          key: 4,
          class: y([
            "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none",
            v.value,
            "text-gray-400 dark:text-dark-500"
          ])
        }, [
          (s(), L(Y(u.rightIcon)))
        ], 2)) : f("", !0)
      ]),
      u.helpText && !c.value ? (s(), i("p", {
        key: 1,
        class: y([
          "mt-1 text-gray-500 dark:text-dark-400",
          g.value
        ])
      }, m(u.helpText), 3)) : f("", !0),
      c.value ? (s(), i("p", {
        key: 2,
        class: y([
          "mt-1 text-red-600 dark:text-red-400",
          g.value
        ])
      }, m(u.errorMessage), 3)) : f("", !0)
    ]));
  }
}, Zt = { class: "flex items-center justify-between" }, Yt = {
  key: 0,
  class: "flex items-center space-x-2"
}, Re = {
  __name: "BaseCard",
  props: {
    title: {
      type: String,
      default: ""
    },
    variant: {
      type: String,
      default: "default",
      validator: (u) => ["default", "elevated"].includes(u)
    },
    size: {
      type: String,
      default: "md",
      validator: (u) => ["sm", "md", "lg"].includes(u)
    },
    padding: {
      type: String,
      default: "default",
      validator: (u) => ["none", "sm", "default", "lg"].includes(u)
    },
    hoverable: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["click"],
  setup(u, { emit: a }) {
    const r = a, t = u, o = C(() => {
      switch (t.padding) {
        case "sm":
          return "p-3";
        case "lg":
          return "p-8";
        default:
          return "p-6";
      }
    }), n = C(() => {
      switch (t.padding) {
        case "sm":
          return "px-3 py-2";
        case "lg":
          return "px-8 py-6";
        default:
          return "px-6 py-4";
      }
    }), c = C(() => t.padding === "none" ? "" : o.value), l = C(() => {
      switch (t.padding) {
        case "sm":
          return "px-3 py-2";
        case "lg":
          return "px-8 py-4";
        default:
          return "px-6 py-4";
      }
    }), d = C(() => {
      switch (t.size) {
        case "sm":
          return "text-sm";
        case "lg":
          return "text-xl";
        default:
          return "text-lg";
      }
    }), g = (v) => {
      t.hoverable && r("click", v);
    };
    return (v, b) => (s(), i("div", {
      class: y([
        "bg-white dark:bg-dark-800 rounded-lg border border-gray-200 dark:border-dark-700 transition-all duration-200",
        u.variant === "elevated" ? "shadow-lg dark:shadow-black/20" : "shadow-sm",
        u.hoverable ? "hover:shadow-md dark:hover:shadow-black/30 cursor-pointer" : "",
        u.padding === "none" ? "" : o.value
      ]),
      onClick: g
    }, [
      u.title || v.$slots.header ? (s(), i("div", {
        key: 0,
        class: y([
          "border-b border-gray-200 dark:border-dark-700",
          n.value
        ])
      }, [
        G(v.$slots, "header", {}, () => [
          e("div", Zt, [
            e("h3", {
              class: y([
                "font-semibold text-gray-900 dark:text-dark-100",
                d.value
              ])
            }, m(u.title), 3),
            v.$slots.actions ? (s(), i("div", Yt, [
              G(v.$slots, "actions")
            ])) : f("", !0)
          ])
        ])
      ], 2)) : f("", !0),
      e("div", {
        class: y(c.value)
      }, [
        G(v.$slots, "default")
      ], 2),
      v.$slots.footer ? (s(), i("div", {
        key: 1,
        class: y([
          "border-t border-gray-200 dark:border-dark-700",
          l.value
        ])
      }, [
        G(v.$slots, "footer")
      ], 2)) : f("", !0)
    ], 2));
  }
}, Zf = /* @__PURE__ */ j({
  __name: "BaseBadge",
  props: {
    variant: { default: "default" },
    size: { default: "sm" },
    text: { default: "" },
    rounded: { type: Boolean, default: !1 },
    leftIcon: { default: void 0 },
    rightIcon: { default: void 0 },
    className: { default: "" }
  },
  setup(u) {
    const a = u, r = computed(() => ({
      xs: "px-1.5 py-0.5 text-xs",
      sm: "px-2 py-1 text-xs",
      md: "px-2.5 py-1.5 text-sm",
      lg: "px-3 py-2 text-sm"
    })[a.size]), t = computed(() => ({
      xs: "xs",
      sm: "xs",
      md: "sm",
      lg: "sm"
    })[a.size]), o = computed(() => ({
      default: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200",
      primary: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
      secondary: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300",
      success: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
      warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
      danger: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
      info: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300"
    })[a.variant]);
    return (n, c) => {
      const l = q("BaseIcon");
      return s(), i("span", {
        class: y([
          "inline-flex items-center font-medium",
          k(r),
          k(o),
          n.rounded ? "rounded-full" : "rounded",
          n.className
        ])
      }, [
        n.leftIcon ? (s(), L(l, {
          key: 0,
          icon: n.leftIcon,
          size: k(t),
          class: "mr-1"
        }, null, 8, ["icon", "size"])) : f("", !0),
        G(n.$slots, "default", {}, () => [
          A(m(n.text), 1)
        ]),
        n.rightIcon ? (s(), L(l, {
          key: 1,
          icon: n.rightIcon,
          size: k(t),
          class: "ml-1"
        }, null, 8, ["icon", "size"])) : f("", !0)
      ], 2);
    };
  }
}), er = ["width", "height"], tr = /* @__PURE__ */ j({
  __name: "ProfileIcon",
  props: {
    size: { default: 24 },
    class: {}
  },
  setup(u) {
    const a = u, r = C(() => a.class || "");
    return (t, o) => (s(), i("svg", {
      width: t.size,
      height: t.size,
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
      class: y(r.value)
    }, o[0] || (o[0] = [
      e("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }, null, -1),
      e("circle", {
        cx: "12",
        cy: "7",
        r: "4"
      }, null, -1)
    ]), 10, er));
  }
}), rr = ["src", "alt"], Yf = /* @__PURE__ */ j({
  __name: "BaseAvatar",
  props: {
    src: { default: "" },
    alt: { default: "Avatar" },
    size: { default: "md" },
    shape: { default: "circle" },
    initials: { default: "" },
    fallbackIcon: { default: tr },
    status: { default: void 0 },
    className: { default: "" }
  },
  setup(u) {
    const a = u, r = ref(!1), t = computed(() => ({
      xs: "w-6 h-6",
      sm: "w-8 h-8",
      md: "w-10 h-10",
      lg: "w-12 h-12",
      xl: "w-16 h-16",
      "2xl": "w-20 h-20"
    })[a.size]), o = computed(() => ({
      circle: "rounded-full",
      square: "rounded-none",
      rounded: "rounded-lg"
    })[a.shape]), n = computed(() => ({
      xs: "xs",
      sm: "sm",
      md: "sm",
      lg: "md",
      xl: "lg",
      "2xl": "xl"
    })[a.size]), c = computed(() => ({
      xs: "text-xs",
      sm: "text-xs",
      md: "text-sm",
      lg: "text-base",
      xl: "text-lg",
      "2xl": "text-xl"
    })[a.size]), l = computed(() => {
      if (a.initials) {
        const p = [
          "bg-blue-500",
          "bg-green-500",
          "bg-purple-500",
          "bg-pink-500",
          "bg-indigo-500",
          "bg-yellow-500",
          "bg-red-500"
        ], x = a.initials.charCodeAt(0) % p.length;
        return p[x];
      }
      return "bg-gray-500";
    }), d = computed(() => ({
      xs: "w-1.5 h-1.5",
      sm: "w-2 h-2",
      md: "w-2.5 h-2.5",
      lg: "w-3 h-3",
      xl: "w-4 h-4",
      "2xl": "w-5 h-5"
    })[a.size]), g = computed(() => ({
      xs: "bottom-0 right-0",
      sm: "bottom-0 right-0",
      md: "bottom-0 right-0",
      lg: "bottom-0.5 right-0.5",
      xl: "bottom-1 right-1",
      "2xl": "bottom-1 right-1"
    })[a.size]), v = computed(() => a.status ? {
      online: "bg-green-500",
      offline: "bg-gray-400",
      away: "bg-yellow-500",
      busy: "bg-red-500"
    }[a.status] : ""), b = () => {
      r.value = !0;
    };
    return (p, x) => {
      const V = q("BaseIcon");
      return s(), i("div", {
        class: y([
          "relative inline-flex items-center justify-center overflow-hidden",
          k(t),
          k(o),
          p.className
        ])
      }, [
        p.src && !k(r) ? (s(), i("img", {
          key: 0,
          src: p.src,
          alt: p.alt,
          class: y(["object-cover", k(t)]),
          onError: b
        }, null, 42, rr)) : (s(), i("div", {
          key: 1,
          class: y([
            "flex items-center justify-center font-medium text-white",
            k(t),
            k(l)
          ])
        }, [
          p.initials ? (s(), i("span", {
            key: 1,
            class: y(k(c))
          }, m(p.initials), 3)) : (s(), L(V, {
            key: 0,
            icon: p.fallbackIcon,
            size: k(n)
          }, null, 8, ["icon", "size"]))
        ], 2)),
        p.status ? (s(), i("div", {
          key: 2,
          class: y([
            "absolute rounded-full border-2 border-white dark:border-gray-800",
            k(d),
            k(g),
            k(v)
          ])
        }, null, 2)) : f("", !0)
      ], 2);
    };
  }
}), eh = /* @__PURE__ */ j({
  __name: "BaseSpinner",
  props: {
    size: { default: "md" },
    color: { default: "current" },
    className: { default: "" }
  },
  setup(u) {
    const a = u, r = computed(() => ({
      xs: "w-3 h-3",
      sm: "w-4 h-4",
      md: "w-5 h-5",
      lg: "w-6 h-6",
      xl: "w-8 h-8"
    })[a.size]), t = computed(() => ({
      current: "text-current",
      primary: "text-blue-600 dark:text-blue-400",
      secondary: "text-gray-600 dark:text-gray-400",
      white: "text-white"
    })[a.color]);
    return (o, n) => (s(), i("svg", {
      class: y([
        "animate-spin",
        k(r),
        k(t),
        o.className
      ]),
      xmlns: "http://www.w3.org/2000/svg",
      fill: "none",
      viewBox: "0 0 24 24"
    }, n[0] || (n[0] = [
      e("circle", {
        class: "opacity-25",
        cx: "12",
        cy: "12",
        r: "10",
        stroke: "currentColor",
        "stroke-width": "4"
      }, null, -1),
      e("path", {
        class: "opacity-75",
        fill: "currentColor",
        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
      }, null, -1)
    ]), 2));
  }
}), th = /* @__PURE__ */ j({
  inheritAttrs: !1,
  __name: "BaseIcon",
  props: {
    icon: {},
    size: { default: "md" },
    color: { default: "current" },
    className: { default: "" }
  },
  setup(u) {
    const a = u, r = computed(() => ({
      xs: "w-3 h-3",
      sm: "w-4 h-4",
      md: "w-5 h-5",
      lg: "w-6 h-6",
      xl: "w-8 h-8",
      "2xl": "w-10 h-10"
    })[a.size]), t = computed(() => ({
      current: "text-current",
      primary: "text-blue-600 dark:text-blue-400",
      secondary: "text-gray-700 dark:text-gray-300",
      muted: "text-gray-500 dark:text-gray-400",
      success: "text-green-600 dark:text-green-400",
      warning: "text-yellow-600 dark:text-yellow-400",
      error: "text-red-600 dark:text-red-400",
      info: "text-purple-600 dark:text-purple-400"
    })[a.color]);
    return (o, n) => (s(), L(Y(o.icon), Be({
      class: [
        "transition-colors duration-200",
        k(r),
        k(t),
        o.className
      ]
    }, o.$attrs), null, 16, ["class"]));
  }
}), rh = /* @__PURE__ */ j({
  __name: "BaseText",
  props: {
    text: { default: "" },
    variant: { default: "primary" },
    size: { default: "sm" },
    className: { default: "" }
  },
  setup(u) {
    const a = u, r = computed(() => ({
      primary: "text-gray-900 dark:text-gray-100",
      secondary: "text-gray-700 dark:text-gray-300",
      muted: "text-gray-600 dark:text-gray-400",
      error: "text-red-600 dark:text-red-400",
      success: "text-green-600 dark:text-green-400",
      warning: "text-yellow-600 dark:text-yellow-400",
      info: "text-blue-600 dark:text-blue-400"
    })[a.variant]), t = computed(() => ({
      xs: "text-xs",
      sm: "text-sm",
      base: "text-base",
      lg: "text-lg",
      xl: "text-xl"
    })[a.size]);
    return (o, n) => (s(), i("p", {
      class: y([
        "text-sm leading-relaxed transition-colors duration-200",
        k(r),
        k(t),
        o.className
      ])
    }, [
      G(o.$slots, "default", {}, () => [
        A(m(o.text), 1)
      ])
    ], 2));
  }
}), sr = ["for"], ar = {
  key: 0,
  class: "text-red-500 dark:text-red-400 ml-1",
  "aria-label": "required"
}, sh = /* @__PURE__ */ j({
  __name: "BaseLabel",
  props: {
    label: { default: "" },
    htmlFor: { default: "" },
    required: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 },
    error: { type: Boolean, default: !1 },
    className: { default: "" }
  },
  setup(u) {
    return (a, r) => a.label || a.required || a.$slots.default ? (s(), i("label", {
      key: 0,
      for: a.htmlFor,
      class: y([
        "block text-sm font-medium transition-colors duration-200",
        a.error ? "text-red-600 dark:text-red-400" : "text-gray-700 dark:text-gray-300",
        a.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
        a.className
      ])
    }, [
      G(a.$slots, "default", {}, () => [
        A(m(a.label), 1)
      ]),
      a.required ? (s(), i("span", ar, "*")) : f("", !0)
    ], 10, sr)) : f("", !0);
  }
}), or = ["id", "value", "disabled", "required", "multiple"], lr = ["selected"], nr = ["value", "disabled"], ir = "block w-full border rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white dark:bg-gray-900", ah = /* @__PURE__ */ j({
  inheritAttrs: !1,
  __name: "BaseSelect",
  props: {
    id: { default: "" },
    modelValue: { default: "" },
    placeholder: { default: "" },
    disabled: { type: Boolean, default: !1 },
    required: { type: Boolean, default: !1 },
    multiple: { type: Boolean, default: !1 },
    error: { type: Boolean, default: !1 },
    size: { default: "md" },
    options: { default: () => [] },
    className: { default: "" }
  },
  emits: ["update:modelValue", "blur", "focus"],
  setup(u, { emit: a }) {
    const r = u, t = a, o = computed(() => ({
      sm: "px-3 py-1.5 text-sm",
      md: "px-3 py-2 text-sm",
      lg: "px-4 py-3 text-base"
    })[r.size]), n = computed(() => r.disabled ? "bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed" : r.error ? "border-red-300 dark:border-red-600 text-gray-900 dark:text-gray-100 focus:border-red-500 focus:ring-red-500" : "border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 hover:border-gray-400 dark:hover:border-gray-500"), c = (g) => {
      const v = g.target;
      if (r.multiple) {
        const b = Array.from(v.selectedOptions).map((p) => p.value);
        t("update:modelValue", b);
      } else
        t("update:modelValue", v.value);
    }, l = (g) => {
      t("blur", g);
    }, d = (g) => {
      t("focus", g);
    };
    return (g, v) => (s(), i("select", Be({
      id: g.id,
      value: g.modelValue,
      disabled: g.disabled,
      required: g.required,
      multiple: g.multiple,
      class: [
        ir,
        k(o),
        k(n),
        g.className
      ]
    }, g.$attrs, {
      onChange: c,
      onBlur: l,
      onFocus: d
    }), [
      g.placeholder && !g.multiple ? (s(), i("option", {
        key: 0,
        value: "",
        disabled: "",
        selected: !g.modelValue
      }, m(g.placeholder), 9, lr)) : f("", !0),
      G(g.$slots, "default", {}, () => [
        (s(!0), i(O, null, J(g.options, (b) => (s(), i("option", {
          key: b.value,
          value: b.value,
          disabled: b.disabled
        }, m(b.label), 9, nr))), 128))
      ])
    ], 16, or));
  }
}), dr = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength"], ur = "block w-full border rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 placeholder-gray-400 dark:placeholder-gray-500", oh = /* @__PURE__ */ j({
  inheritAttrs: !1,
  __name: "BaseTextarea",
  props: {
    id: { default: "" },
    modelValue: { default: "" },
    placeholder: { default: "" },
    disabled: { type: Boolean, default: !1 },
    readonly: { type: Boolean, default: !1 },
    required: { type: Boolean, default: !1 },
    error: { type: Boolean, default: !1 },
    size: { default: "md" },
    rows: { default: 4 },
    cols: { default: void 0 },
    maxlength: { default: void 0 },
    resize: { default: "vertical" },
    className: { default: "" }
  },
  emits: ["update:modelValue", "blur", "focus"],
  setup(u, { emit: a }) {
    const r = u, t = a, o = computed(() => ({
      sm: "px-3 py-1.5 text-sm",
      md: "px-3 py-2 text-sm",
      lg: "px-4 py-3 text-base"
    })[r.size]), n = computed(() => r.disabled ? "bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed" : r.error ? "bg-white dark:bg-gray-900 border-red-300 dark:border-red-600 text-gray-900 dark:text-gray-100 focus:border-red-500 focus:ring-red-500" : "bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 hover:border-gray-400 dark:hover:border-gray-500"), c = computed(() => ({
      none: "resize-none",
      vertical: "resize-y",
      horizontal: "resize-x",
      both: "resize"
    })[r.resize]), l = (v) => {
      const b = v.target;
      t("update:modelValue", b.value);
    }, d = (v) => {
      t("blur", v);
    }, g = (v) => {
      t("focus", v);
    };
    return (v, b) => (s(), i("textarea", Be({
      id: v.id,
      value: v.modelValue,
      placeholder: v.placeholder,
      disabled: v.disabled,
      readonly: v.readonly,
      required: v.required,
      rows: v.rows,
      cols: v.cols,
      maxlength: v.maxlength,
      class: [
        ur,
        k(o),
        k(n),
        k(c),
        v.className
      ]
    }, v.$attrs, {
      onInput: l,
      onBlur: d,
      onFocus: g
    }), null, 16, dr));
  }
});
function cr() {
  return {
    getStatusColor: (o) => ({
      active: "green",
      inactive: "gray",
      pending: "yellow",
      processing: "blue",
      completed: "green",
      failed: "red",
      cancelled: "gray"
    })[o] || "gray",
    getStatusText: (o) => ({
      active: "Active",
      inactive: "Inactive",
      pending: "Pending",
      processing: "Processing",
      completed: "Completed",
      failed: "Failed",
      cancelled: "Cancelled"
    })[o] || o,
    isActiveStatus: (o) => ["active", "processing", "pending"].includes(o),
    isCompleteStatus: (o) => ["completed", "failed", "cancelled"].includes(o)
  };
}
const gr = ["title"], pr = ["d"], lh = /* @__PURE__ */ j({
  __name: "BaseStatusBadge",
  props: {
    status: { default: void 0 },
    text: { default: void 0 },
    type: { default: "status" },
    score: { default: void 0 },
    showIcon: { type: Boolean, default: !0 }
  },
  setup(u) {
    const a = u, { getStatusConfig: r, getScoreConfig: t } = cr(), o = C(() => a.type === "score" && a.score !== void 0 ? t(a.score) : r(a.status)), n = C(() => a.text ? a.text : a.type === "score" && a.score !== void 0 ? `${a.score}%` : o.value.label), c = C(() => {
      var d;
      switch ((d = a.status) == null ? void 0 : d.toLowerCase()) {
        case "active":
          return "text-green-600";
        case "draft":
          return "text-gray-500";
        case "paused":
          return "text-yellow-600";
        case "closed":
          return "text-red-600";
        default:
          return "text-gray-500";
      }
    }), l = C(() => {
      var d;
      switch ((d = a.status) == null ? void 0 : d.toLowerCase()) {
        case "active":
          return "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z";
        case "draft":
          return "M4 3a2 2 0 100 4h12a2 2 0 100-4H4z M3 8a2 2 0 00-2 2v6a2 2 0 002 2h14a2 2 0 002-2v-6a2 2 0 00-2-2H3z M5 12a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z";
        case "paused":
          return "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zM11 8a1 1 0 112 0v4a1 1 0 11-2 0V8z";
        case "closed":
          return "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z";
        default:
          return "M10 18a8 8 0 100-16 8 8 0 000 16zm-1-13a1 1 0 112 0v4a1 1 0 01-.293.707l-2 2a1 1 0 01-1.414-1.414L9 8.586V5z";
      }
    });
    return (d, g) => (s(), i("span", {
      class: y([
        "inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold transition-all duration-200",
        o.value.class
      ]),
      title: o.value.label
    }, [
      d.showIcon ? (s(), i("svg", {
        key: 0,
        class: y(["w-3 h-3 mr-1.5 flex-shrink-0", c.value]),
        fill: "currentColor",
        viewBox: "0 0 20 20"
      }, [
        e("path", { d: l.value }, null, 8, pr)
      ], 2)) : f("", !0),
      G(d.$slots, "icon"),
      A(" " + m(n.value), 1)
    ], 10, gr));
  }
}), mr = {
  key: 0,
  class: "flex items-center justify-center h-full text-xs font-medium text-white"
}, nh = /* @__PURE__ */ j({
  __name: "BaseProgress",
  props: {
    value: { default: 0 },
    max: { default: 100 },
    variant: { default: "primary" },
    size: { default: "md" },
    shape: { default: "rounded" },
    animated: { type: Boolean, default: !1 },
    showLabel: { type: Boolean, default: !1 },
    labelText: { default: "" },
    className: { default: "" }
  },
  setup(u) {
    const a = u, r = computed(() => Math.max(0, Math.min(a.value, a.max)) / a.max * 100), t = computed(() => ({
      xs: "h-1",
      sm: "h-2",
      md: "h-3",
      lg: "h-4"
    })[a.size]), o = computed(() => ({
      rounded: "rounded",
      square: "rounded-none",
      pill: "rounded-full"
    })[a.shape]), n = computed(() => {
      const d = {
        default: "bg-gray-400",
        primary: "bg-blue-600",
        success: "bg-green-600",
        warning: "bg-yellow-600",
        danger: "bg-red-600"
      };
      return a.animated ? {
        default: "from-gray-400 to-gray-500",
        primary: "from-blue-500 to-blue-600",
        success: "from-green-500 to-green-600",
        warning: "from-yellow-500 to-yellow-600",
        danger: "from-red-500 to-red-600"
      }[a.variant] : d[a.variant];
    }), c = computed(() => ({
      default: "text-gray-600 dark:text-gray-400",
      primary: "text-blue-600 dark:text-blue-400",
      success: "text-green-600 dark:text-green-400",
      warning: "text-yellow-600 dark:text-yellow-400",
      danger: "text-red-600 dark:text-red-400"
    })[a.variant]), l = computed(() => a.labelText || `${Math.round(r.value)}%`);
    return (d, g) => (s(), i("div", {
      class: y([
        "w-full bg-gray-200 dark:bg-gray-700 overflow-hidden",
        k(t),
        k(o),
        d.className
      ])
    }, [
      e("div", {
        class: y([
          "h-full transition-all duration-300 ease-out",
          k(n),
          d.animated ? "bg-gradient-to-r" : ""
        ]),
        style: X({ width: `${k(r)}%` })
      }, [
        d.showLabel && k(r) > 15 ? (s(), i("div", mr, [
          G(d.$slots, "label", {}, () => [
            A(m(k(l)), 1)
          ])
        ])) : f("", !0)
      ], 6),
      d.showLabel && k(r) <= 15 ? (s(), i("div", {
        key: 0,
        class: y([
          "mt-1 text-xs font-medium",
          k(c)
        ])
      }, [
        G(d.$slots, "label", {}, () => [
          A(m(k(l)), 1)
        ])
      ], 2)) : f("", !0)
    ], 2));
  }
}), br = ["width", "height"], tt = /* @__PURE__ */ j({
  __name: "SunIcon",
  props: {
    size: { default: 24 },
    class: {}
  },
  setup(u) {
    const a = u, r = C(() => a.class || "");
    return (t, o) => (s(), i("svg", {
      width: t.size,
      height: t.size,
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
      class: y(r.value)
    }, o[0] || (o[0] = [
      re('<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>', 9)
    ]), 10, br));
  }
}), vr = ["width", "height"], fr = /* @__PURE__ */ j({
  __name: "MoonIcon",
  props: {
    size: { default: 24 },
    class: {}
  },
  setup(u) {
    const a = u, r = C(() => a.class || "");
    return (t, o) => (s(), i("svg", {
      width: t.size,
      height: t.size,
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
      class: y(r.value)
    }, o[0] || (o[0] = [
      e("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }, null, -1)
    ]), 10, vr));
  }
}), hr = ["title"], yr = {
  class: "relative inline-flex items-center justify-center p-2 rounded-lg transition-all duration-200 hover:bg-gray-100 dark:hover:bg-dark-700/50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-dark-800",
  title: "Dark mode toggle"
}, xr = /* @__PURE__ */ j({
  __name: "BaseDarkModeToggle",
  setup(u) {
    const { isDark: a, toggleDarkMode: r } = useDarkMode();
    return (t, o) => {
      const n = q("ClientOnly");
      return s(), L(n, null, {
        fallback: F(() => [
          e("button", yr, [
            w(tt, { "icon-class": "w-5 h-5 text-gray-600 dark:text-dark-300 transition-transform duration-300 hover:scale-110" })
          ])
        ]),
        default: F(() => [
          e("button", {
            class: "relative inline-flex items-center justify-center p-2 rounded-lg transition-all duration-200 hover:bg-gray-100 dark:hover:bg-dark-700/50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-dark-800",
            title: k(a) ? "Switch to light mode" : "Switch to dark mode",
            onClick: o[0] || (o[0] = //@ts-ignore
            (...c) => k(r) && k(r)(...c))
          }, [
            ae(w(tt, { "icon-class": "w-5 h-5 text-gray-600 dark:text-dark-300 transition-transform duration-300 hover:scale-110" }, null, 512), [
              [he, !k(a)]
            ]),
            ae(w(fr, { "icon-class": "w-5 h-5 text-gray-600 dark:text-dark-300 transition-transform duration-300 hover:scale-110" }, null, 512), [
              [he, k(a)]
            ])
          ], 8, hr)
        ]),
        _: 1
      });
    };
  }
}), kr = ["id", "aria-checked", "disabled"], wr = { class: "sr-only" }, ih = /* @__PURE__ */ j({
  __name: "BaseToggleSwitch",
  props: {
    id: { default: void 0 },
    modelValue: { type: Boolean },
    label: { default: "" },
    disabled: { type: Boolean, default: !1 }
  },
  emits: ["update:modelValue"],
  setup(u, { emit: a }) {
    const r = u, t = a, o = () => {
      r.disabled || t("update:modelValue", !r.modelValue);
    };
    return (n, c) => (s(), i("button", {
      id: n.id,
      type: "button",
      role: "switch",
      "aria-checked": n.modelValue,
      class: y([
        "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
        n.modelValue ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700",
        n.disabled ? "opacity-50 cursor-not-allowed" : ""
      ]),
      disabled: n.disabled,
      onClick: o
    }, [
      e("span", wr, m(n.label), 1),
      e("span", {
        class: y([
          "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
          n.modelValue ? "translate-x-5" : "translate-x-0"
        ])
      }, null, 2)
    ], 10, kr));
  }
}), $r = ["width", "height"], ze = /* @__PURE__ */ j({
  __name: "SearchIcon",
  props: {
    size: { default: 24 },
    class: {}
  },
  setup(u) {
    const a = u, r = C(() => a.class || "");
    return (t, o) => (s(), i("svg", {
      width: t.size,
      height: t.size,
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
      class: y(r.value)
    }, o[0] || (o[0] = [
      e("circle", {
        cx: "11",
        cy: "11",
        r: "8"
      }, null, -1),
      e("path", { d: "M21 21l-4.35-4.35" }, null, -1)
    ]), 10, $r));
  }
}), Cr = ["width", "height"], pt = /* @__PURE__ */ j({
  __name: "CloseIcon",
  props: {
    size: { default: 24 },
    class: {}
  },
  setup(u) {
    const a = u, r = C(() => a.class || "");
    return (t, o) => (s(), i("svg", {
      width: t.size,
      height: t.size,
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
      class: y(r.value)
    }, o[0] || (o[0] = [
      e("path", { d: "M18 6L6 18" }, null, -1),
      e("path", { d: "M6 6l12 12" }, null, -1)
    ]), 10, Cr));
  }
}), _r = { class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none" }, Br = {
  key: 1,
  class: "absolute inset-y-0 right-0 flex items-center pr-3"
}, zr = {
  key: 2,
  class: "absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg max-h-60 overflow-auto"
}, Mr = { class: "py-1" }, Sr = ["onClick"], dh = /* @__PURE__ */ j({
  __name: "SearchBar",
  props: {
    id: { default: "" },
    modelValue: { default: "" },
    type: { default: "search" },
    placeholder: { default: "Search..." },
    disabled: { type: Boolean, default: !1 },
    readonly: { type: Boolean, default: !1 },
    required: { type: Boolean, default: !1 },
    error: { type: Boolean, default: !1 },
    size: { default: "md" },
    autocomplete: { default: "off" },
    fullWidth: { type: Boolean, default: !1 },
    clearable: { type: Boolean, default: !0 },
    loading: { type: Boolean, default: !1 },
    suggestions: { default: () => [] },
    showSuggestions: { type: Boolean, default: !1 },
    className: { default: "" }
  },
  emits: ["update:modelValue", "search", "clear", "suggestion-click", "focus", "blur"],
  setup(u, { emit: a }) {
    const r = u, t = a, o = computed(() => ({
      sm: "sm",
      md: "sm",
      lg: "md"
    })[r.size]), n = (v) => {
      t("update:modelValue", String(v));
    }, c = () => {
      t("search", r.modelValue);
    }, l = () => {
      t("update:modelValue", ""), t("clear");
    }, d = () => {
      r.modelValue && l();
    }, g = (v) => {
      t("update:modelValue", v), t("suggestion-click", v), t("search", v);
    };
    return (v, b) => {
      const p = q("BaseInputField"), x = q("BaseIcon"), V = q("BaseSpinner");
      return s(), i("div", {
        class: y([
          "relative",
          v.fullWidth ? "w-full" : "",
          v.className
        ])
      }, [
        w(p, {
          id: v.id,
          "model-value": v.modelValue,
          type: v.type,
          placeholder: v.placeholder,
          disabled: v.disabled,
          readonly: v.readonly,
          required: v.required,
          error: v.error,
          size: v.size,
          autocomplete: v.autocomplete,
          class: y([
            "pr-10",
            v.clearable && v.modelValue ? "pr-16" : ""
          ]),
          "onUpdate:modelValue": n,
          onFocus: b[0] || (b[0] = ($) => v.$emit("focus", $)),
          onBlur: b[1] || (b[1] = ($) => v.$emit("blur", $)),
          onKeydown: [
            pe(c, ["enter"]),
            pe(d, ["escape"])
          ]
        }, null, 8, ["id", "model-value", "type", "placeholder", "disabled", "readonly", "required", "error", "size", "autocomplete", "class"]),
        e("div", _r, [
          w(x, {
            icon: ze,
            size: k(o),
            class: "text-gray-400"
          }, null, 8, ["size"])
        ]),
        v.clearable && v.modelValue ? (s(), i("button", {
          key: 0,
          type: "button",
          class: "absolute inset-y-0 right-8 flex items-center pr-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
          onClick: l
        }, [
          w(x, {
            icon: pt,
            size: k(o)
          }, null, 8, ["size"])
        ])) : f("", !0),
        v.loading ? (s(), i("div", Br, [
          w(V, {
            size: k(o) === "2xl" ? "xl" : k(o),
            color: "current"
          }, null, 8, ["size"])
        ])) : f("", !0),
        v.showSuggestions && v.suggestions.length > 0 ? (s(), i("div", zr, [
          e("ul", Mr, [
            (s(!0), i(O, null, J(v.suggestions, ($, D) => (s(), i("li", {
              key: D,
              class: "px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
              onClick: (_) => g($)
            }, [
              G(v.$slots, "suggestion", {
                suggestion: $,
                index: D
              }, () => [
                A(m($), 1)
              ])
            ], 8, Sr))), 128))
          ])
        ])) : f("", !0)
      ], 2);
    };
  }
}), jr = { class: "flex items-start justify-between mb-4" }, Vr = { class: "flex items-center space-x-3" }, Ar = { class: "font-semibold text-gray-900 text-lg" }, Dr = { class: "text-gray-600 text-sm" }, Ir = { class: "text-gray-500 text-xs" }, Lr = {
  key: 0,
  class: "mb-4"
}, Fr = { class: "flex flex-wrap gap-2" }, Tr = { class: "text-gray-600 text-sm mb-4 line-clamp-2" }, Pr = { class: "flex items-center justify-between text-sm text-gray-500" }, Hr = { class: "flex items-center space-x-4" }, Ur = { class: "flex items-center" }, Rr = { class: "flex items-center" }, Nr = { class: "flex items-center space-x-2" }, Er = {
  key: 1,
  class: "mt-4 pt-4 border-t border-gray-200"
}, qr = { class: "flex items-center justify-between" }, Or = { class: "flex items-center" }, Jr = { class: "text-sm font-semibold" }, Wr = /* @__PURE__ */ j({
  __name: "TalentCard",
  props: {
    talent: {},
    variant: { default: "default" },
    maxSkills: { default: 5 },
    matchScore: {}
  },
  emits: ["click"],
  setup(u, { emit: a }) {
    const r = u, t = C(() => {
      var v;
      return ((v = r.talent.skills) == null ? void 0 : v.slice(0, r.maxSkills)) || [];
    }), o = (v) => v.split(" ").map((b) => b.charAt(0)).join("").toUpperCase().slice(0, 2), n = (v) => ({
      active: "success",
      inactive: "warning",
      archived: "secondary"
    })[v] || "secondary", c = (v) => v >= 80 ? "success" : v >= 60 ? "warning" : "error", l = () => {
      r.talent.linkedin && window.open(r.talent.linkedin, "_blank");
    }, d = () => {
      r.talent.github && window.open(r.talent.github, "_blank");
    }, g = () => {
      r.talent.portfolio && window.open(r.talent.portfolio, "_blank");
    };
    return (v, b) => {