@davidbirchall/core 1.0.0

package/dist/index.js

@@ -0,0 +1,1190 @@
+import { defineComponent as C, openBlock as a, createBlock as W, resolveDynamicComponent as K, mergeProps as fe, toHandlers as ve, withCtx as j, renderSlot as D, createElementBlock as l, createCommentVNode as c, normalizeClass as w, ref as V, computed as M, createElementVNode as n, withModifiers as O, toDisplayString as r, Fragment as L, renderList as A, createTextVNode as Y, watch as Q, onMounted as Z, onBeforeUnmount as ee, Teleport as J, normalizeStyle as U, createVNode as X, onUnmounted as he, Transition as te } from "vue";
+const be = {
+  key: 0,
+  class: "sr-only"
+}, ye = /* @__PURE__ */ C({
+  __name: "Button",
+  props: {
+    variant: { default: "primary" },
+    disabled: { type: Boolean, default: !1 },
+    url: {},
+    target: { default: "_self" }
+  },
+  emits: ["click"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, u = (v) => {
+      t.disabled ? (v.preventDefault(), v.stopImmediatePropagation()) : f("click", v);
+    };
+    return (v, d) => (a(), W(K(e.url ? "a" : "button"), fe({
+      href: e.url,
+      target: e.url ? e.target : void 0,
+      rel: e.url && e.target === "_blank" ? "noopener noreferrer" : void 0,
+      class: ["btn", `btn--${e.variant}`, { "btn--disabled": e.disabled }],
+      disabled: !e.url && e.disabled,
+      "aria-disabled": e.disabled
+    }, ve(e.url ? {} : { click: u })), {
+      default: j(() => [
+        D(v.$slots, "default", {}, void 0, !0),
+        e.url && e.target === "_blank" ? (a(), l("span", be, "(opens in new window)")) : c("", !0)
+      ]),
+      _: 3
+    }, 16, ["href", "target", "rel", "class", "disabled", "aria-disabled"]));
+  }
+}), x = (e, m) => {
+  const t = e.__vccOpts || e;
+  for (const [f, u] of m)
+    t[f] = u;
+  return t;
+}, ge = /* @__PURE__ */ x(ye, [["__scopeId", "data-v-86500989"]]), pe = /* @__PURE__ */ C({
+  __name: "Badge",
+  props: {
+    variant: { default: "primary" },
+    size: { default: "medium" }
+  },
+  setup(e) {
+    return (m, t) => (a(), l("span", {
+      class: w(["badge", `badge--${e.variant}`, `badge--${e.size}`])
+    }, [
+      D(m.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), ke = /* @__PURE__ */ x(pe, [["__scopeId", "data-v-f310f0d4"]]), $e = { class: "calendar" }, _e = { class: "calendar-header" }, we = { class: "calendar-title" }, Ve = {
+  key: 0,
+  class: "calendar-body"
+}, De = { class: "calendar-weekdays" }, Ce = { class: "calendar-days" }, xe = ["onClick", "disabled"], Ie = {
+  key: 1,
+  class: "calendar-picker"
+}, Se = { class: "calendar-picker-grid" }, Be = ["onClick"], Me = {
+  key: 2,
+  class: "calendar-picker"
+}, Pe = { class: "calendar-picker-nav" }, Te = { class: "calendar-picker-range" }, Oe = { class: "calendar-picker-grid" }, Ee = ["onClick"], Le = /* @__PURE__ */ C({
+  __name: "Calendar",
+  props: {
+    modelValue: {},
+    mode: { default: "single" },
+    minDate: {},
+    maxDate: {},
+    disabledDates: {},
+    locale: { default: "en-US" },
+    firstDayOfWeek: { default: 0 },
+    initialDate: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, v = (() => {
+      if (t.initialDate) {
+        const [s, _, i] = t.initialDate.split("-").map(Number);
+        return new Date(s, _ - 1, i);
+      }
+      if (t.modelValue) {
+        if (typeof t.modelValue == "string") {
+          const [s, _, i] = t.modelValue.split("-").map(Number);
+          return new Date(s, _ - 1, i);
+        }
+        if (typeof t.modelValue == "object" && "start" in t.modelValue && t.modelValue.start) {
+          const [s, _, i] = t.modelValue.start.split("-").map(Number);
+          return new Date(s, _ - 1, i);
+        }
+        if (Array.isArray(t.modelValue) && t.modelValue.length > 0) {
+          const [s, _, i] = t.modelValue[0].split("-").map(Number);
+          return new Date(s, _ - 1, i);
+        }
+      }
+      return /* @__PURE__ */ new Date();
+    })(), d = V(v.getMonth()), g = V(v.getFullYear()), o = V(null), h = V(null), b = V(Math.floor(v.getFullYear() / 12) * 12), I = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], R = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], P = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], N = M(() => R[d.value]), $ = M(() => {
+      const s = [...P];
+      return t.firstDayOfWeek > 0 ? [...s.slice(t.firstDayOfWeek), ...s.slice(0, t.firstDayOfWeek)] : s;
+    }), y = M(() => Array.from({ length: 12 }, (s, _) => b.value + _)), p = M(() => {
+      const s = b.value, _ = s + 11;
+      return `${s} - ${_}`;
+    }), S = M(() => {
+      const s = [], _ = new Date(g.value, d.value, 1), i = new Date(g.value, d.value + 1, 0);
+      let T = _.getDay() - t.firstDayOfWeek;
+      T < 0 && (T += 7);
+      const G = new Date(g.value, d.value, 0).getDate();
+      for (let E = T - 1; E >= 0; E--) {
+        const F = new Date(g.value, d.value - 1, G - E);
+        s.push(k(F, !1));
+      }
+      for (let E = 1; E <= i.getDate(); E++) {
+        const F = new Date(g.value, d.value, E);
+        s.push(k(F, !0));
+      }
+      const me = 42 - s.length;
+      for (let E = 1; E <= me; E++) {
+        const F = new Date(g.value, d.value + 1, E);
+        s.push(k(F, !1));
+      }
+      return s;
+    }), k = (s, _) => {
+      const i = B(s), T = B(/* @__PURE__ */ new Date());
+      return {
+        date: s,
+        dateString: i,
+        isCurrentMonth: _,
+        isToday: i === T,
+        isSelected: q(i),
+        isDisabled: z(i),
+        isInRange: H(i)
+      };
+    }, B = (s) => {
+      const _ = s.getFullYear(), i = String(s.getMonth() + 1).padStart(2, "0"), T = String(s.getDate()).padStart(2, "0");
+      return `${_}-${i}-${T}`;
+    }, q = (s) => t.modelValue ? t.mode === "single" ? t.modelValue === s : t.mode === "multiple" && Array.isArray(t.modelValue) ? t.modelValue.includes(s) : t.mode === "range" && typeof t.modelValue == "object" && "start" in t.modelValue ? s === t.modelValue.start || s === t.modelValue.end : !1 : !1, z = (s) => !!(t.minDate && s < t.minDate || t.maxDate && s > t.maxDate || t.disabledDates?.includes(s)), H = (s) => {
+      if (t.mode !== "range" || typeof t.modelValue != "object" || !("start" in t.modelValue)) return !1;
+      const { start: _, end: i } = t.modelValue;
+      return !_ || !i ? !1 : s > _ && s < i;
+    }, le = (s) => {
+      if (!s.isDisabled) {
+        if (t.mode === "single")
+          f("update:modelValue", s.dateString);
+        else if (t.mode === "multiple") {
+          const _ = Array.isArray(t.modelValue) ? [...t.modelValue] : [], i = _.indexOf(s.dateString);
+          i > -1 ? _.splice(i, 1) : _.push(s.dateString), f("update:modelValue", _);
+        } else if (t.mode === "range")
+          if (!h.value)
+            h.value = s.dateString, f("update:modelValue", { start: s.dateString, end: s.dateString });
+          else {
+            const _ = h.value < s.dateString ? h.value : s.dateString, i = h.value < s.dateString ? s.dateString : h.value;
+            f("update:modelValue", { start: _, end: i }), h.value = null;
+          }
+      }
+    }, ne = () => {
+      d.value === 0 ? (d.value = 11, g.value--) : d.value--;
+    }, se = () => {
+      d.value === 11 ? (d.value = 0, g.value++) : d.value++;
+    }, oe = () => {
+      o.value = o.value === "month" ? null : "month";
+    }, re = () => {
+      o.value !== "year" && (b.value = Math.floor(g.value / 12) * 12), o.value = o.value === "year" ? null : "year";
+    }, de = (s) => {
+      d.value = s, o.value = null;
+    }, ie = (s) => {
+      g.value = s, o.value = null;
+    }, ce = () => {
+      b.value -= 12;
+    }, ue = () => {
+      b.value += 12;
+    };
+    return (s, _) => (a(), l("div", $e, [
+      n("div", _e, [
+        n("button", {
+          onClick: O(ne, ["stop"]),
+          class: "calendar-nav",
+          type: "button"
+        }, " ‹ "),
+        n("div", we, [
+          n("button", {
+            onClick: O(oe, ["stop"]),
+            class: "calendar-month-btn",
+            type: "button"
+          }, r(N.value), 1),
+          n("button", {
+            onClick: O(re, ["stop"]),
+            class: "calendar-year-btn",
+            type: "button"
+          }, r(g.value), 1)
+        ]),
+        n("button", {
+          onClick: O(se, ["stop"]),
+          class: "calendar-nav",
+          type: "button"
+        }, " › ")
+      ]),
+      o.value ? o.value === "month" ? (a(), l("div", Ie, [
+        n("div", Se, [
+          (a(), l(L, null, A(I, (i, T) => n("button", {
+            key: i,
+            onClick: O((G) => de(T), ["stop"]),
+            type: "button",
+            class: w([
+              "calendar-picker-item",
+              { "calendar-picker-item--selected": T === d.value }
+            ])
+          }, r(i), 11, Be)), 64))
+        ])
+      ])) : o.value === "year" ? (a(), l("div", Me, [
+        n("div", Pe, [
+          n("button", {
+            onClick: O(ce, ["stop"]),
+            class: "calendar-nav",
+            type: "button"
+          }, " ‹ "),
+          n("span", Te, r(p.value), 1),
+          n("button", {
+            onClick: O(ue, ["stop"]),
+            class: "calendar-nav",
+            type: "button"
+          }, " › ")
+        ]),
+        n("div", Oe, [
+          (a(!0), l(L, null, A(y.value, (i) => (a(), l("button", {
+            key: i,
+            onClick: O((T) => ie(i), ["stop"]),
+            type: "button",
+            class: w([
+              "calendar-picker-item",
+              { "calendar-picker-item--selected": i === g.value }
+            ])
+          }, r(i), 11, Ee))), 128))
+        ])
+      ])) : c("", !0) : (a(), l("div", Ve, [
+        n("div", De, [
+          (a(!0), l(L, null, A($.value, (i) => (a(), l("div", {
+            key: i,
+            class: "calendar-weekday"
+          }, r(i), 1))), 128))
+        ]),
+        n("div", Ce, [
+          (a(!0), l(L, null, A(S.value, (i) => (a(), l("button", {
+            key: i.dateString,
+            onClick: (T) => le(i),
+            type: "button",
+            disabled: i.isDisabled,
+            class: w([
+              "calendar-day",
+              {
+                "calendar-day--other-month": !i.isCurrentMonth,
+                "calendar-day--today": i.isToday,
+                "calendar-day--selected": i.isSelected,
+                "calendar-day--disabled": i.isDisabled,
+                "calendar-day--in-range": i.isInRange
+              }
+            ])
+          }, r(i.date.getDate()), 11, xe))), 128))
+        ])
+      ]))
+    ]));
+  }
+}), ae = /* @__PURE__ */ x(Le, [["__scopeId", "data-v-446fa187"]]), Ae = {
+  key: 0,
+  class: "card__header"
+}, Re = { class: "card__body" }, Ne = {
+  key: 1,
+  class: "card__footer"
+}, qe = /* @__PURE__ */ C({
+  __name: "Card",
+  props: {
+    hoverable: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (m, t) => (a(), l("div", {
+      class: w(["card", { "card--hoverable": e.hoverable }])
+    }, [
+      m.$slots.header ? (a(), l("div", Ae, [
+        D(m.$slots, "header", {}, void 0, !0)
+      ])) : c("", !0),
+      n("div", Re, [
+        D(m.$slots, "default", {}, void 0, !0)
+      ]),
+      m.$slots.footer ? (a(), l("div", Ne, [
+        D(m.$slots, "footer", {}, void 0, !0)
+      ])) : c("", !0)
+    ], 2));
+  }
+}), ze = /* @__PURE__ */ x(qe, [["__scopeId", "data-v-3c027648"]]), Ye = { class: "checkbox-wrapper" }, Fe = ["checked", "disabled", "required"], We = {
+  key: 0,
+  class: "checkbox-text"
+}, He = {
+  key: 0,
+  class: "checkbox-error"
+}, Ue = /* @__PURE__ */ C({
+  __name: "Checkbox",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    label: {},
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    error: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    const t = m, f = (u) => {
+      const v = u.target;
+      t("update:modelValue", v.checked);
+    };
+    return (u, v) => (a(), l("div", Ye, [
+      n("label", {
+        class: w(["checkbox-label", { "checkbox-label--disabled": e.disabled }])
+      }, [
+        n("input", {
+          type: "checkbox",
+          class: "checkbox-input",
+          checked: e.modelValue,
+          disabled: e.disabled,
+          required: e.required,
+          onChange: f
+        }, null, 40, Fe),
+        v[0] || (v[0] = n("span", { class: "checkbox-box" }, null, -1)),
+        e.label ? (a(), l("span", We, r(e.label), 1)) : c("", !0)
+      ], 2),
+      e.error ? (a(), l("span", He, r(e.error), 1)) : c("", !0)
+    ]));
+  }
+}), je = /* @__PURE__ */ x(Ue, [["__scopeId", "data-v-a2254693"]]), Je = { class: "data-table" }, Xe = { class: "data-table__wrapper" }, Ge = { class: "data-table__table" }, Ke = { class: "data-table__head" }, Qe = ["onClick"], Ze = { class: "data-table__header-content" }, et = {
+  key: 0,
+  class: "data-table__sort-icon"
+}, tt = { key: 0 }, at = {
+  key: 1,
+  class: "data-table__sort-icon--inactive"
+}, lt = { key: 0 }, nt = ["colspan"], st = /* @__PURE__ */ C({
+  __name: "DataTable",
+  props: {
+    columns: {},
+    data: {},
+    hoverable: { type: Boolean, default: !0 },
+    emptyText: { default: "No data available" }
+  },
+  setup(e) {
+    const m = e, t = V(null), f = V("asc"), u = (d) => {
+      t.value === d ? f.value = f.value === "asc" ? "desc" : "asc" : (t.value = d, f.value = "asc");
+    }, v = M(() => t.value ? [...m.data].sort((d, g) => {
+      const o = d[t.value], h = g[t.value];
+      if (o === h) return 0;
+      let b = 0;
+      return typeof o == "number" && typeof h == "number" ? b = o - h : b = String(o).localeCompare(String(h)), f.value === "asc" ? b : -b;
+    }) : m.data);
+    return (d, g) => (a(), l("div", Je, [
+      n("div", Xe, [
+        n("table", Ge, [
+          n("thead", Ke, [
+            n("tr", null, [
+              (a(!0), l(L, null, A(e.columns, (o) => (a(), l("th", {
+                key: o.key,
+                class: w(["data-table__header", { "data-table__header--sortable": o.sortable }]),
+                onClick: (h) => o.sortable ? u(o.key) : void 0
+              }, [
+                n("div", Ze, [
+                  Y(r(o.label) + " ", 1),
+                  o.sortable ? (a(), l("span", et, [
+                    t.value === o.key ? (a(), l("span", tt, r(f.value === "asc" ? "↑" : "↓"), 1)) : (a(), l("span", at, "↕"))
+                  ])) : c("", !0)
+                ])
+              ], 10, Qe))), 128))
+            ])
+          ]),
+          n("tbody", null, [
+            (a(!0), l(L, null, A(v.value, (o, h) => (a(), l("tr", {
+              key: h,
+              class: "data-table__row"
+            }, [
+              (a(!0), l(L, null, A(e.columns, (b) => (a(), l("td", {
+                key: b.key,
+                class: "data-table__cell"
+              }, [
+                D(d.$slots, `cell-${b.key}`, {
+                  row: o,
+                  value: o[b.key]
+                }, () => [
+                  Y(r(o[b.key]), 1)
+                ], !0)
+              ]))), 128))
+            ]))), 128)),
+            v.value.length === 0 ? (a(), l("tr", lt, [
+              n("td", {
+                colspan: e.columns.length,
+                class: "data-table__cell data-table__cell--empty"
+              }, r(e.emptyText), 9, nt)
+            ])) : c("", !0)
+          ])
+        ])
+      ])
+    ]));
+  }
+}), ot = /* @__PURE__ */ x(st, [["__scopeId", "data-v-511dc0a4"]]), rt = ["id", "value", "placeholder", "disabled"], dt = {
+  key: 0,
+  class: "date-error"
+}, it = /* @__PURE__ */ C({
+  __name: "DatePicker",
+  props: {
+    modelValue: {},
+    id: {},
+    placeholder: { default: "Select date" },
+    disabled: { type: Boolean },
+    format: { default: "short" },
+    error: {},
+    mode: { default: "single" },
+    minDate: {},
+    maxDate: {},
+    disabledDates: {},
+    locale: {},
+    firstDayOfWeek: { default: 0 },
+    initialDate: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, u = V(!1);
+    let v = 0;
+    const d = `date-input-${++v}`, g = M(() => t.id || d), o = V(null), h = V(null), b = V({
+      top: "0px",
+      left: "0px",
+      width: "320px"
+    }), I = V(t.modelValue);
+    Q(() => t.modelValue, (k) => {
+      I.value = k;
+    }, { immediate: !0 });
+    const R = M(() => {
+      if (!t.modelValue) return "";
+      if (t.mode === "single" && typeof t.modelValue == "string")
+        return P(t.modelValue);
+      if (t.mode === "multiple" && Array.isArray(t.modelValue))
+        return t.modelValue.map((k) => P(k)).join(", ");
+      if (t.mode === "range" && typeof t.modelValue == "object" && "start" in t.modelValue) {
+        const { start: k, end: B } = t.modelValue;
+        if (k && B)
+          return `${P(k)} - ${P(B)}`;
+        if (k) return P(k);
+      }
+      return "";
+    }), P = (k) => {
+      const [B, q, z] = k.split("-").map(Number), H = new Date(B, q - 1, z);
+      return t.format === "long" ? H.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      }) : H.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    }, N = () => {
+      t.disabled || (u.value ? y() : $());
+    }, $ = () => {
+      u.value = !0, setTimeout(() => {
+        if (o.value) {
+          const k = o.value.getBoundingClientRect(), q = window.innerHeight - k.bottom, z = 400;
+          q < z && k.top > z ? b.value = {
+            top: `${k.top - z + window.scrollY}px`,
+            left: `${k.left + window.scrollX}px`,
+            width: "320px"
+          } : b.value = {
+            top: `${k.bottom + 4 + window.scrollY}px`,
+            left: `${k.left + window.scrollX}px`,
+            width: "320px"
+          };
+        }
+      }, 0);
+    }, y = () => {
+      u.value = !1;
+    }, p = (k) => {
+      I.value = k, f("update:modelValue", k), t.mode === "single" && setTimeout(() => {
+        y();
+      }, 200), t.mode === "range" && typeof k == "object" && "start" in k && k.end && setTimeout(() => {
+        y();
+      }, 200);
+    }, S = (k) => {
+      if (!u.value) return;
+      const B = k.target;
+      o.value?.contains(B) || h.value?.contains(B) || y();
+    };
+    return Z(() => {
+      document.addEventListener("click", S);
+    }), ee(() => {
+      document.removeEventListener("click", S);
+    }), (k, B) => (a(), l("div", {
+      class: "date-picker",
+      ref_key: "datePickerRef",
+      ref: o
+    }, [
+      n("div", {
+        class: "date-picker-input",
+        onClick: N
+      }, [
+        n("input", {
+          type: "text",
+          id: g.value,
+          value: R.value,
+          placeholder: e.placeholder,
+          readonly: "",
+          disabled: e.disabled,
+          class: w(["date-input", { "date-input--error": e.error }])
+        }, null, 10, rt),
+        B[1] || (B[1] = n("span", { class: "date-icon" }, "📅", -1))
+      ]),
+      e.error ? (a(), l("span", dt, r(e.error), 1)) : c("", !0),
+      (a(), W(J, { to: "body" }, [
+        u.value ? (a(), l("div", {
+          key: 0,
+          ref_key: "dropdownRef",
+          ref: h,
+          class: "date-picker-dropdown",
+          style: U(b.value)
+        }, [
+          X(ae, {
+            modelValue: I.value,
+            "onUpdate:modelValue": [
+              B[0] || (B[0] = (q) => I.value = q),
+              p
+            ],
+            mode: e.mode,
+            "min-date": e.minDate,
+            "max-date": e.maxDate,
+            "disabled-dates": e.disabledDates,
+            "first-day-of-week": e.firstDayOfWeek,
+            "initial-date": typeof e.modelValue == "string" ? e.modelValue : void 0
+          }, null, 8, ["modelValue", "mode", "min-date", "max-date", "disabled-dates", "first-day-of-week", "initial-date"])
+        ], 4)) : c("", !0)
+      ])),
+      u.value ? (a(), l("div", {
+        key: 1,
+        class: "date-picker-overlay",
+        onClick: y
+      })) : c("", !0)
+    ], 512));
+  }
+}), ct = /* @__PURE__ */ x(it, [["__scopeId", "data-v-0b550c0b"]]), ut = {
+  key: 0,
+  class: "dropdown__header"
+}, mt = { class: "dropdown__content" }, ft = {
+  key: 0,
+  class: "dropdown__divider"
+}, vt = ["disabled", "onClick"], ht = {
+  key: 0,
+  class: "dropdown__item-icon"
+}, bt = { class: "dropdown__item-label" }, yt = {
+  key: 1,
+  class: "dropdown__footer"
+}, gt = /* @__PURE__ */ C({
+  __name: "Dropdown",
+  props: {
+    items: { default: () => [] },
+    placement: { default: "bottom-left" },
+    closeOnClick: { type: Boolean, default: !0 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["select", "open", "close"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, u = V(null), v = V(null), d = V(!1), g = V({}), o = () => {
+      t.disabled || (d.value ? b() : h());
+    }, h = () => {
+      d.value = !0, f("open"), setTimeout(() => {
+        I();
+      }, 0);
+    }, b = () => {
+      d.value = !1, f("close");
+    }, I = () => {
+      if (!u.value || !v.value) return;
+      const $ = u.value.getBoundingClientRect(), y = v.value.getBoundingClientRect();
+      let p = 0, S = 0;
+      switch (t.placement) {
+        case "bottom-left":
+          p = $.bottom + 8, S = $.left;
+          break;
+        case "bottom-right":
+          p = $.bottom + 8, S = $.right - y.width;
+          break;
+        case "top-left":
+          p = $.top - y.height - 8, S = $.left;
+          break;
+        case "top-right":
+          p = $.top - y.height - 8, S = $.right - y.width;
+          break;
+      }
+      g.value = {
+        top: `${p}px`,
+        left: `${S}px`
+      };
+    }, R = ($) => {
+      $.disabled || (f("select", $), t.closeOnClick && b());
+    }, P = ($) => {
+      $.stopPropagation();
+    }, N = ($) => {
+      if (!u.value || !v.value) return;
+      const y = $.target;
+      !u.value.contains(y) && !v.value.contains(y) && b();
+    };
+    return Z(() => {
+      document.addEventListener("click", N), window.addEventListener("scroll", I, !0), window.addEventListener("resize", I);
+    }), he(() => {
+      document.removeEventListener("click", N), window.removeEventListener("scroll", I, !0), window.removeEventListener("resize", I);
+    }), ($, y) => (a(), l("div", {
+      ref_key: "dropdownRef",
+      ref: u,
+      class: w(["dropdown", { "dropdown--disabled": e.disabled }])
+    }, [
+      n("div", {
+        onClick: o,
+        class: "dropdown__trigger"
+      }, [
+        D($.$slots, "trigger", {}, () => [
+          y[0] || (y[0] = n("button", {
+            type: "button",
+            class: "dropdown__button"
+          }, " Menu ", -1))
+        ], !0)
+      ]),
+      (a(), W(J, { to: "body" }, [
+        X(te, { name: "dropdown-fade" }, {
+          default: j(() => [
+            d.value ? (a(), l("div", {
+              key: 0,
+              ref_key: "dropdownMenuRef",
+              ref: v,
+              class: w(["dropdown__menu", `dropdown__menu--${e.placement}`]),
+              style: U(g.value),
+              onClick: P
+            }, [
+              $.$slots.header ? (a(), l("div", ut, [
+                D($.$slots, "header", {}, void 0, !0)
+              ])) : c("", !0),
+              n("div", mt, [
+                D($.$slots, "default", {}, () => [
+                  (a(!0), l(L, null, A(e.items, (p, S) => (a(), l(L, { key: S }, [
+                    p.divider ? (a(), l("div", ft)) : (a(), l("button", {
+                      key: 1,
+                      type: "button",
+                      class: w(["dropdown__item", { "dropdown__item--disabled": p.disabled }]),
+                      disabled: p.disabled,
+                      onClick: () => R(p)
+                    }, [
+                      p.icon ? (a(), l("span", ht, r(p.icon), 1)) : c("", !0),
+                      n("span", bt, r(p.label), 1)
+                    ], 10, vt))
+                  ], 64))), 128))
+                ], !0)
+              ]),
+              $.$slots.footer ? (a(), l("div", yt, [
+                D($.$slots, "footer", {}, void 0, !0)
+              ])) : c("", !0)
+            ], 6)) : c("", !0)
+          ]),
+          _: 3
+        })
+      ]))
+    ], 2));
+  }
+}), pt = /* @__PURE__ */ x(gt, [["__scopeId", "data-v-d2e8b407"]]), kt = {
+  key: 0,
+  class: "empty-state__icon"
+}, $t = { class: "empty-state__icon-text" }, _t = { class: "empty-state__content" }, wt = {
+  key: 0,
+  class: "empty-state__title"
+}, Vt = {
+  key: 1,
+  class: "empty-state__description"
+}, Dt = {
+  key: 2,
+  class: "empty-state__body"
+}, Ct = {
+  key: 1,
+  class: "empty-state__actions"
+}, xt = /* @__PURE__ */ C({
+  __name: "EmptyState",
+  props: {
+    title: { default: "" },
+    description: { default: "" },
+    icon: { default: "" },
+    actionText: { default: "" },
+    actionVariant: { default: "primary" },
+    size: { default: "medium" }
+  },
+  emits: ["action"],
+  setup(e, { emit: m }) {
+    const t = m, f = () => {
+      t("action");
+    };
+    return (u, v) => (a(), l("div", {
+      class: w(["empty-state", `empty-state--${e.size}`])
+    }, [
+      e.icon || u.$slots.icon ? (a(), l("div", kt, [
+        D(u.$slots, "icon", {}, () => [
+          n("span", $t, r(e.icon), 1)
+        ], !0)
+      ])) : c("", !0),
+      n("div", _t, [
+        e.title || u.$slots.title ? (a(), l("h3", wt, [
+          D(u.$slots, "title", {}, () => [
+            Y(r(e.title), 1)
+          ], !0)
+        ])) : c("", !0),
+        e.description || u.$slots.description ? (a(), l("p", Vt, [
+          D(u.$slots, "description", {}, () => [
+            Y(r(e.description), 1)
+          ], !0)
+        ])) : c("", !0),
+        u.$slots.default ? (a(), l("div", Dt, [
+          D(u.$slots, "default", {}, void 0, !0)
+        ])) : c("", !0)
+      ]),
+      e.actionText || u.$slots.action ? (a(), l("div", Ct, [
+        D(u.$slots, "action", {}, () => [
+          e.actionText ? (a(), l("button", {
+            key: 0,
+            type: "button",
+            class: w(["empty-state__button", `empty-state__button--${e.actionVariant}`]),
+            onClick: f
+          }, r(e.actionText), 3)) : c("", !0)
+        ], !0)
+      ])) : c("", !0)
+    ], 2));
+  }
+}), It = /* @__PURE__ */ x(xt, [["__scopeId", "data-v-05083d32"]]), St = {
+  key: 0,
+  class: "error-summary",
+  role: "alert",
+  "aria-live": "assertive"
+}, Bt = { class: "error-summary__header" }, Mt = { class: "error-summary__title" }, Pt = { class: "error-summary__subtitle" }, Tt = { key: 0 }, Ot = { class: "error-summary__list" }, Et = ["href"], Lt = /* @__PURE__ */ C({
+  __name: "ErrorSummary",
+  props: {
+    title: { default: "There is a problem" },
+    errors: {}
+  },
+  setup(e) {
+    return (m, t) => e.errors.length ? (a(), l("div", St, [
+      n("div", Bt, [
+        t[1] || (t[1] = n("span", { class: "error-summary__icon" }, "⚠️", -1)),
+        n("div", null, [
+          n("h4", Mt, r(e.title), 1),
+          n("p", Pt, [
+            Y("Please fix the following " + r(e.errors.length) + " issue", 1),
+            e.errors.length !== 1 ? (a(), l("span", Tt, "s")) : c("", !0),
+            t[0] || (t[0] = Y(":", -1))
+          ])
+        ])
+      ]),
+      n("ul", Ot, [
+        (a(!0), l(L, null, A(e.errors, (f) => (a(), l("li", {
+          key: f.id,
+          class: "error-summary__item"
+        }, [
+          n("a", {
+            href: `#${f.id}`,
+            class: "error-summary__link"
+          }, r(f.message), 9, Et)
+        ]))), 128))
+      ])
+    ])) : c("", !0);
+  }
+}), At = /* @__PURE__ */ x(Lt, [["__scopeId", "data-v-2eeef3a2"]]), Rt = ["for"], Nt = {
+  key: 1,
+  class: "form-group__hint"
+}, qt = {
+  key: 2,
+  class: "form-group__error"
+}, zt = /* @__PURE__ */ C({
+  __name: "FormGroup",
+  props: {
+    label: { default: "" },
+    id: { default: "" },
+    hint: { default: "" },
+    error: { default: "" },
+    required: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (m, t) => (a(), l("div", {
+      class: w(["form-group", { "form-group--error": e.error }])
+    }, [
+      e.label ? (a(), l("label", {
+        key: 0,
+        for: e.id,
+        class: "form-group__label"
+      }, r(e.label), 9, Rt)) : c("", !0),
+      D(m.$slots, "default", {}, void 0, !0),
+      e.hint && !e.error ? (a(), l("small", Nt, r(e.hint), 1)) : c("", !0),
+      e.error ? (a(), l("small", qt, r(e.error), 1)) : c("", !0)
+    ], 2));
+  }
+}), Yt = /* @__PURE__ */ x(zt, [["__scopeId", "data-v-328da37c"]]), Ft = /* @__PURE__ */ C({
+  __name: "Heading",
+  props: {
+    tag: { default: "h2" },
+    size: { default: "2" },
+    weight: { default: "bold" },
+    align: { default: "left" }
+  },
+  setup(e) {
+    return (m, t) => (a(), W(K(e.tag), {
+      class: w(["heading", `heading--${e.size}`, `heading--${e.weight}`, { [`heading--${e.align}`]: e.align }])
+    }, {
+      default: j(() => [
+        D(m.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), Wt = /* @__PURE__ */ x(Ft, [["__scopeId", "data-v-4857de4b"]]), Ht = { class: "input-wrapper" }, Ut = ["for"], jt = ["id", "type", "value", "placeholder", "disabled", "required"], Jt = {
+  key: 1,
+  class: "input-error"
+}, Xt = {
+  key: 2,
+  class: "input-hint"
+}, Gt = /* @__PURE__ */ C({
+  __name: "Input",
+  props: {
+    modelValue: {},
+    id: {},
+    label: {},
+    type: { default: "text" },
+    placeholder: {},
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    error: {},
+    hint: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    let t = 0;
+    const f = e, u = m, v = `input-${++t}`, d = M(() => f.id || v), g = (o) => {
+      const h = o.target;
+      u("update:modelValue", h.value);
+    };
+    return (o, h) => (a(), l("div", Ht, [
+      e.label ? (a(), l("label", {
+        key: 0,
+        for: d.value,
+        class: "input-label"
+      }, r(e.label), 9, Ut)) : c("", !0),
+      n("input", {
+        id: d.value,
+        type: e.type,
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        required: e.required,
+        class: w(["input-field", { "input-field--error": e.error, "input-field--disabled": e.disabled }]),
+        onInput: g
+      }, null, 42, jt),
+      e.error ? (a(), l("span", Jt, r(e.error), 1)) : c("", !0),
+      e.hint && !e.error ? (a(), l("span", Xt, r(e.hint), 1)) : c("", !0)
+    ]));
+  }
+}), Kt = /* @__PURE__ */ x(Gt, [["__scopeId", "data-v-95616b7b"]]), Qt = { class: "modal-header" }, Zt = { class: "modal-title" }, ea = { class: "modal-body" }, ta = {
+  key: 0,
+  class: "modal-footer"
+}, aa = /* @__PURE__ */ C({
+  __name: "Modal",
+  props: {
+    modelValue: { type: Boolean },
+    title: { default: "" },
+    size: { default: "medium" },
+    closable: { type: Boolean, default: !0 },
+    closeOnOverlay: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, u = () => {
+      f("update:modelValue", !1), f("close");
+    }, v = V(null), d = V(!1), g = V(!1), o = V(0), h = V(0), b = V(null), I = V(null), R = (y) => {
+      if (!d.value) return;
+      const p = Math.abs(y.clientX - o.value), S = Math.abs(y.clientY - h.value);
+      (p > 5 || S > 5) && (g.value = !0);
+    }, P = (y) => {
+      if (window.removeEventListener("pointermove", R), window.removeEventListener("pointerup", P), !d.value || I.value !== "overlay") {
+        d.value = !1, g.value = !1, I.value = null;
+        return;
+      }
+      const p = v.value, S = p && y.target === p;
+      t.closeOnOverlay && S && !g.value && u(), p && b.value !== null && p.hasPointerCapture(b.value) && p.releasePointerCapture(b.value), b.value = null, d.value = !1, g.value = !1, I.value = null;
+    }, N = (y) => {
+      if (!t.closeOnOverlay || y.target !== y.currentTarget) return;
+      d.value = !0, g.value = !1, I.value = "overlay", o.value = y.clientX, h.value = y.clientY;
+      const p = v.value;
+      p && (b.value = y.pointerId, p.setPointerCapture(y.pointerId)), window.addEventListener("pointermove", R), window.addEventListener("pointerup", P);
+    }, $ = () => {
+      I.value = "content";
+    };
+    return ee(() => {
+      window.removeEventListener("pointermove", R), window.removeEventListener("pointerup", P);
+    }), Q(() => t.modelValue, (y) => {
+      y ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
+    }), (y, p) => (a(), W(J, { to: "body" }, [
+      X(te, { name: "modal" }, {
+        default: j(() => [
+          e.modelValue ? (a(), l("div", {
+            key: 0,
+            ref_key: "overlayRef",
+            ref: v,
+            class: "modal-overlay",
+            onPointerdown: O(N, ["self"])
+          }, [
+            n("div", {
+              class: w(["modal-content", [`modal-content--${e.size}`]]),
+              onClick: p[0] || (p[0] = O(() => {
+              }, ["stop"])),
+              onPointerdown: O($, ["stop"]),
+              onPointerup: p[1] || (p[1] = O(() => {
+              }, ["stop"]))
+            }, [
+              n("div", Qt, [
+                D(y.$slots, "header", {}, () => [
+                  n("h3", Zt, r(e.title), 1)
+                ], !0),
+                e.closable ? (a(), l("button", {
+                  key: 0,
+                  onClick: u,
+                  class: "modal-close",
+                  "aria-label": "Close modal"
+                }, " × ")) : c("", !0)
+              ]),
+              n("div", ea, [
+                D(y.$slots, "default", {}, void 0, !0)
+              ]),
+              y.$slots.footer ? (a(), l("div", ta, [
+                D(y.$slots, "footer", {}, void 0, !0)
+              ])) : c("", !0)
+            ], 34)
+          ], 544)) : c("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}), la = /* @__PURE__ */ x(aa, [["__scopeId", "data-v-0621c687"]]), na = { class: "progress-bar" }, sa = {
+  key: 0,
+  class: "progress-bar__header"
+}, oa = { class: "progress-bar__label" }, ra = { class: "progress-bar__percentage" }, da = {
+  key: 0,
+  class: "progress-bar__text"
+}, ia = /* @__PURE__ */ C({
+  __name: "ProgressBar",
+  props: {
+    percentage: { default: 0 },
+    label: { default: "" },
+    showLabel: { type: Boolean, default: !0 },
+    showPercentageInBar: { type: Boolean, default: !1 },
+    height: { default: 12 },
+    variant: { default: "primary" },
+    animated: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    const m = e, t = M(() => Math.min(Math.max(m.percentage, 0), 100)), f = M(() => Math.round(t.value));
+    return (u, v) => (a(), l("div", na, [
+      e.showLabel ? (a(), l("div", sa, [
+        n("span", oa, r(e.label), 1),
+        n("span", ra, r(f.value) + "%", 1)
+      ])) : c("", !0),
+      n("div", {
+        class: "progress-bar__track",
+        style: U({ height: `${e.height}px` })
+      }, [
+        n("div", {
+          class: w(["progress-bar__fill", [
+            `progress-bar__fill--${e.variant}`,
+            { "progress-bar__fill--animated": e.animated }
+          ]]),
+          style: U({ width: `${t.value}%` })
+        }, [
+          e.showPercentageInBar ? (a(), l("span", da, r(f.value) + "% ", 1)) : c("", !0)
+        ], 6)
+      ], 4)
+    ]));
+  }
+}), ca = /* @__PURE__ */ x(ia, [["__scopeId", "data-v-1ee50aa7"]]), ua = { class: "select-wrapper" }, ma = ["for"], fa = ["id", "value", "disabled", "required"], va = {
+  key: 0,
+  value: "",
+  disabled: ""
+}, ha = ["value"], ba = {
+  key: 1,
+  class: "select-error"
+}, ya = {
+  key: 2,
+  class: "select-hint"
+}, ga = /* @__PURE__ */ C({
+  __name: "Select",
+  props: {
+    modelValue: {},
+    id: {},
+    label: {},
+    options: { default: () => [] },
+    placeholder: {},
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    error: {},
+    hint: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    let t = 0;
+    const f = e, u = m, v = `select-${++t}`, d = M(() => f.id || v), g = (o) => {
+      const h = o.target;
+      u("update:modelValue", h.value);
+    };
+    return (o, h) => (a(), l("div", ua, [
+      e.label ? (a(), l("label", {
+        key: 0,
+        for: d.value,
+        class: "select-label"
+      }, r(e.label), 9, ma)) : c("", !0),
+      n("select", {
+        id: d.value,
+        value: e.modelValue,
+        disabled: e.disabled,
+        required: e.required,
+        class: w([
+          "select-field",
+          {
+            "select-field--error": e.error,
+            "select-field--disabled": e.disabled,
+            "select-field--placeholder": !e.modelValue || e.modelValue === ""
+          }
+        ]),
+        onChange: g
+      }, [
+        e.placeholder ? (a(), l("option", va, r(e.placeholder), 1)) : c("", !0),
+        (a(!0), l(L, null, A(e.options, (b) => (a(), l("option", {
+          key: b.value,
+          value: b.value
+        }, r(b.label), 9, ha))), 128))
+      ], 42, fa),
+      e.error ? (a(), l("span", ba, r(e.error), 1)) : c("", !0),
+      e.hint && !e.error ? (a(), l("span", ya, r(e.hint), 1)) : c("", !0)
+    ]));
+  }
+}), pa = /* @__PURE__ */ x(ga, [["__scopeId", "data-v-aeafe36b"]]), ka = { class: "stat-card__title" }, $a = {
+  key: 0,
+  class: "stat-card__input-wrapper"
+}, _a = {
+  key: 0,
+  class: "stat-card__prefix"
+}, wa = ["value", "placeholder"], Va = {
+  key: 1,
+  class: "stat-card__suffix"
+}, Da = {
+  key: 1,
+  class: "stat-card__value-wrapper"
+}, Ca = {
+  key: 0,
+  class: "stat-card__prefix"
+}, xa = {
+  key: 1,
+  class: "stat-card__suffix"
+}, Ia = { class: "stat-card__trend-icon" }, Sa = { class: "stat-card__trend-value" }, Ba = /* @__PURE__ */ C({
+  __name: "StatCard",
+  props: {
+    title: {},
+    value: {},
+    variant: { default: "default" },
+    prefix: { default: "" },
+    suffix: { default: "" },
+    editable: { type: Boolean, default: !1 },
+    trend: {}
+  },
+  emits: ["input", "change"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, u = M(() => typeof t.value == "number" ? t.value.toLocaleString() : t.value), v = M(() => typeof t.value == "number" && t.value < 0), d = (o) => {
+      const h = o.target, b = h.valueAsNumber || h.value;
+      f("input", b);
+    }, g = (o) => {
+      const h = o.target, b = h.valueAsNumber || h.value;
+      f("change", b);
+    };
+    return (o, h) => (a(), l("div", {
+      class: w(["stat-card", `stat-card--${e.variant}`])
+    }, [
+      n("h3", ka, r(e.title), 1),
+      e.editable ? (a(), l("div", $a, [
+        e.prefix ? (a(), l("span", _a, r(e.prefix), 1)) : c("", !0),
+        n("input", {
+          value: e.value,
+          onInput: d,
+          onChange: g,
+          type: "number",
+          class: "stat-card__input",
+          placeholder: String(e.value)
+        }, null, 40, wa),
+        e.suffix ? (a(), l("span", Va, r(e.suffix), 1)) : c("", !0)
+      ])) : (a(), l("div", Da, [
+        n("p", {
+          class: w(["stat-card__value", { "stat-card__value--negative": v.value }])
+        }, [
+          e.prefix ? (a(), l("span", Ca, r(e.prefix), 1)) : c("", !0),
+          n("span", null, r(u.value), 1),
+          e.suffix ? (a(), l("span", xa, r(e.suffix), 1)) : c("", !0)
+        ], 2),
+        e.trend ? (a(), l("div", {
+          key: 0,
+          class: w(["stat-card__trend", `stat-card__trend--${e.trend.direction}`])
+        }, [
+          n("span", Ia, r(e.trend.direction === "up" ? "↑" : "↓"), 1),
+          n("span", Sa, r(Math.abs(e.trend.value)) + "%", 1)
+        ], 2)) : c("", !0)
+      ])),
+      D(o.$slots, "footer", {}, void 0, !0)
+    ], 2));
+  }
+}), Ma = /* @__PURE__ */ x(Ba, [["__scopeId", "data-v-7858d875"]]), Pa = /* @__PURE__ */ C({
+  __name: "Tag",
+  props: {
+    variant: { default: "default" },
+    size: { default: "medium" }
+  },
+  setup(e) {
+    return (m, t) => (a(), l("span", {
+      class: w(["tag", `tag--${e.variant}`, `tag--${e.size}`])
+    }, [
+      D(m.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), Ta = /* @__PURE__ */ x(Pa, [["__scopeId", "data-v-df5365be"]]), Oa = { class: "textarea-wrapper" }, Ea = ["for"], La = ["id", "value", "placeholder", "disabled", "required", "rows"], Aa = {
+  key: 1,
+  class: "textarea-error"
+}, Ra = {
+  key: 2,
+  class: "textarea-hint"
+}, Na = /* @__PURE__ */ C({
+  __name: "TextArea",
+  props: {
+    modelValue: {},
+    id: {},
+    label: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    rows: { default: 4 },
+    error: {},
+    hint: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    let t = 0;
+    const f = e, u = m, v = `textarea-${++t}`, d = M(() => f.id || v), g = (o) => {
+      const h = o.target;
+      u("update:modelValue", h.value);
+    };
+    return (o, h) => (a(), l("div", Oa, [
+      e.label ? (a(), l("label", {
+        key: 0,
+        for: d.value,
+        class: "textarea-label"
+      }, r(e.label), 9, Ea)) : c("", !0),
+      n("textarea", {
+        id: d.value,
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        required: e.required,
+        rows: e.rows,
+        class: w(["textarea-field", { "textarea-field--error": e.error, "textarea-field--disabled": e.disabled }]),
+        onInput: g
+      }, null, 42, La),
+      e.error ? (a(), l("span", Aa, r(e.error), 1)) : c("", !0),
+      e.hint && !e.error ? (a(), l("span", Ra, r(e.hint), 1)) : c("", !0)
+    ]));
+  }
+}), qa = /* @__PURE__ */ x(Na, [["__scopeId", "data-v-00775f79"]]), Ya = {
+  install(e) {
+    e.component("VBadge", ke), e.component("VButton", ge), e.component("VCalendar", ae), e.component("VCard", ze), e.component("VCheckbox", je), e.component("VDataTable", ot), e.component("VDatePicker", ct), e.component("VDropdown", pt), e.component("VEmptyState", It), e.component("VErrorSummary", At), e.component("VFormGroup", Yt), e.component("VHeading", Wt), e.component("VInput", Kt), e.component("VModal", la), e.component("VProgressBar", ca), e.component("VSelect", pa), e.component("VStatCard", Ma), e.component("VTag", Ta), e.component("VTextArea", qa);
+  }
+};
+export {
+  ke as VBadge,
+  ge as VButton,
+  ae as VCalendar,
+  ze as VCard,
+  je as VCheckbox,
+  ot as VDataTable,
+  ct as VDatePicker,
+  pt as VDropdown,
+  It as VEmptyState,
+  At as VErrorSummary,
+  Yt as VFormGroup,
+  Wt as VHeading,
+  Kt as VInput,
+  la as VModal,
+  ca as VProgressBar,
+  pa as VSelect,
+  Ma as VStatCard,
+  Ta as VTag,
+  qa as VTextArea,
+  Ya as default
+};