@stachelock/ui 0.2.14 → 0.3.0

package/dist/SelectTextInput.vue_vue_type_script_setup_true_lang-B2Gw_se2.js

@@ -0,0 +1,339 @@
+import { defineComponent as X, ref as B, onMounted as P, onBeforeUnmount as Z, reactive as _, toRefs as ee, computed as v, watch as te, createElementBlock as o, openBlock as r, createCommentVNode as f, createElementVNode as d, createVNode as y, createBlock as R, resolveDynamicComponent as le, toDisplayString as m, unref as x, normalizeClass as h, withCtx as b, Teleport as se, Transition as D, normalizeStyle as ae, Fragment as ne, renderList as re } from "vue";
+import { r as ie, a as oe } from "./ExclamationCircleIcon-DmL8Wwjo.js";
+import { r as de } from "./ChevronUpDownIcon-Bq_fsgrb.js";
+import { r as ce } from "./CheckIcon-BGlsmVwT.js";
+import { I as ue, j as fe, A as ve, F as ye } from "./listbox-p2_4hUSD.js";
+const xe = {
+  class: "sl-space-y-1",
+  "data-testid": "select-text-input"
+}, me = {
+  key: 0,
+  class: "sl-grid sl-grid-cols-3 sl-items-center"
+}, ge = { class: "sl-col-span-2 sl-flex sl-items-center" }, pe = {
+  key: 1,
+  class: "sl-text-sm sl-font-medium",
+  style: { color: "var(--sl-text-primary)" }
+}, he = { class: "sl-justify-self-end sl-col-start-3 sl-text-right sl-space-y-0.5" }, be = {
+  key: 0,
+  class: "sl-text-xs",
+  style: { color: "var(--sl-text-muted)" }
+}, ke = {
+  key: 1,
+  class: "sl-text-2xs sl-uppercase sl-truncate sl-font-semibold sl-block",
+  style: { color: "var(--sl-text-secondary)" }
+}, we = {
+  key: 2,
+  class: "sl-text-xs sl-uppercase sl-truncate sl-font-semibold sl-block",
+  style: { color: "var(--sl-text-secondary)" }
+}, Se = { class: "sl-relative sl-mt-1" }, Le = {
+  key: 0,
+  class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-20 sl-pointer-events-none"
+}, Ce = {
+  key: 1,
+  class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-20 sl-pointer-events-none"
+}, Ee = { class: "sl-relative" }, Be = { class: "sl-pointer-events-none sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2" }, Re = {
+  key: 0,
+  class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-4"
+}, je = { class: "sl-flex-1 sl-relative" }, Me = ["aria-invalid", "name", "placeholder", "inputmode", "maxlength", "value", "disabled"], Oe = {
+  key: 0,
+  class: "sl-mt-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400 sl-bg-red-50 dark:sl-bg-red-900/20 sl-ring-1 sl-ring-red-100 dark:sl-ring-red-800 sl-rounded-md sl-p-2"
+}, Ve = {
+  key: 1,
+  class: "sl-text-xs sl-text-gray-500 dark:sl-text-slate-400"
+}, Ne = /* @__PURE__ */ X({
+  __name: "SelectTextInput",
+  props: {
+    name: { type: String, required: !0 },
+    label: { type: String, default: "" },
+    tertiaryLabel: { type: String, default: "" },
+    secondaryLabel: { type: String, default: "" },
+    labelIconLeft: { type: [Object, Function], default: void 0 },
+    value: {
+      type: [Object, String, Number],
+      default: void 0
+    },
+    select: {
+      type: Object,
+      default: () => ({ options: [] })
+    },
+    text: {
+      type: Object,
+      default: () => ({})
+    },
+    delimiter: { type: String, default: " " },
+    formatter: { type: Function },
+    showErrors: { type: Boolean, default: !1 },
+    hasError: { type: Boolean, default: !1 },
+    validateOnMount: { type: Boolean, default: !1 },
+    textValidationRegex: { type: [RegExp, Object], default: void 0 },
+    requiredText: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    disabledMessage: { type: String, default: "" },
+    colorfulValidation: { type: Boolean, default: !0 },
+    showValidCheck: { type: Boolean, default: !0 }
+  },
+  emits: ["update:value", "update:validity"],
+  setup(s, { emit: F }) {
+    const j = B(null), M = B({
+      top: "0px",
+      left: "0px",
+      width: "120px"
+    }), k = B(!1);
+    function O() {
+      const e = j.value?.$el;
+      if (!e) return;
+      const t = e.getBoundingClientRect();
+      M.value = {
+        top: `${t.bottom + 4}px`,
+        left: `${t.left}px`,
+        width: `${Math.max(t.width, 120)}px`
+      };
+    }
+    function q() {
+      k.value = !k.value, k.value && O();
+    }
+    function w() {
+      k.value && O();
+    }
+    P(() => {
+      window.addEventListener("scroll", w, !0), window.addEventListener("resize", w);
+    }), Z(() => {
+      window.removeEventListener("scroll", w, !0), window.removeEventListener("resize", w);
+    });
+    const U = /\b(19|20)\d{2}\b$/;
+    function i(e) {
+      if (typeof e == "string") {
+        const t = e.trim();
+        return t.length ? t : void 0;
+      }
+      if (typeof e == "number") {
+        const t = String(e);
+        return t.length ? t : void 0;
+      }
+    }
+    function V(e) {
+      return !!e && typeof e == "object" && !Array.isArray(e) && ("select" in e || "text" in e || "display" in e);
+    }
+    function Y(e) {
+      return !!(e.select || e.text || e.display);
+    }
+    function C(e, t, l) {
+      return l || (e && t ? `${e} ${t}`.trim() : e || t || void 0);
+    }
+    function $(e) {
+      const t = {};
+      if (e == null) return t;
+      if (typeof e == "string" || typeof e == "number") {
+        const l = i(e);
+        if (!l) return t;
+        const u = l.match(U);
+        if (u) {
+          const c = u[0], p = l.slice(0, l.length - c.length).trim();
+          p && (t.select = p), t.text = c, t.display = C(t.select, t.text);
+        } else
+          t.text = l, t.display = l;
+        return t;
+      }
+      if (V(e)) {
+        const l = e, u = i(l.select), c = i(l.text), p = i(l.display);
+        return u && (t.select = u), c && (t.text = c), t.display = C(t.select, t.text, p), t;
+      }
+      if (typeof e == "object" && !Array.isArray(e)) {
+        const l = e, u = i(l.select) ?? i(l.term) ?? i(l.semester), c = i(l.text) ?? i(l.year) ?? i(l.value), p = i(l.display) ?? i(l.label);
+        return u && (t.select = u), c && (t.text = c), t.display = C(t.select, t.text, p), t;
+      }
+      return t;
+    }
+    const a = s, z = F, T = $(a.value), A = _({
+      localValue: T
+    }), { localValue: n } = ee(A), G = v(
+      () => Y(T) && !V(a.value)
+    ), I = v(() => a.select?.options || []), E = v(() => n.value.select && I.value.find((e) => e.value === n.value.select) || null), H = v(() => {
+      const e = n.value.text;
+      return a.textValidationRegex ? !e || String(e).trim() === "" ? a.requiredText === !0 : !a.textValidationRegex.test(String(e)) : !1;
+    }), g = v(() => a.showErrors && (a.hasError || H.value)), N = v(
+      () => a.showValidCheck && !g.value && !!S.value
+    ), J = v(() => a.disabled ? "sl-ring-gray-200 dark:sl-ring-slate-700" : a.colorfulValidation ? g.value ? "sl-ring-red-300 dark:sl-ring-red-500 focus-within:sl-ring-stachelock-600" : N.value ? "sl-ring-green-300 dark:sl-ring-green-500 focus-within:sl-ring-stachelock-600" : "sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-stachelock-600" : "sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-stachelock-600"), S = v(() => {
+      const e = { select: n.value.select, text: n.value.text }, t = a.formatter ? a.formatter(e) : void 0;
+      return t !== void 0 ? t : [e.select, e.text].filter(Boolean).join(a.delimiter).trim();
+    }), K = v(() => {
+      if (!g.value) return "";
+      const e = !!n.value.select, t = !!n.value.text && String(n.value.text).trim() !== "", l = !!n.value.text && /^\d{4}$/.test(String(n.value.text));
+      return !e && !t ? "Please select an option and enter a value." : e ? t ? !l && a.textValidationRegex ? "Please enter a valid value." : "Please complete both fields." : "Please enter a value." : "Please select an option.";
+    });
+    function L() {
+      const e = S.value || void 0, t = {
+        select: n.value.select,
+        text: n.value.text,
+        display: e
+      };
+      z("update:value", t);
+      const l = !!(t.select && t.text && String(t.text).length > 0);
+      z("update:validity", l);
+    }
+    function Q(e) {
+      n.value.select = e?.value || void 0, k.value = !1, L();
+    }
+    function W(e) {
+      n.value.text = e || void 0, L();
+    }
+    return te(
+      () => a.value,
+      (e) => {
+        A.localValue = $(e);
+      },
+      { deep: !0 }
+    ), P(() => {
+      G.value && L();
+    }), a.validateOnMount && L(), (e, t) => (r(), o("div", xe, [
+      s.label || s.secondaryLabel || s.tertiaryLabel || s.disabled && s.disabledMessage ? (r(), o("div", me, [
+        d("div", ge, [
+          s.labelIconLeft ? (r(), R(le(s.labelIconLeft), {
+            key: 0,
+            class: "sl-mr-2 sl-h-4 sl-w-4 sl-text-yellow-300"
+          })) : f("", !0),
+          s.label ? (r(), o("label", pe, m(s.label), 1)) : f("", !0)
+        ]),
+        d("div", he, [
+          s.disabled && s.disabledMessage ? (r(), o("p", be, m(s.disabledMessage), 1)) : f("", !0),
+          s.secondaryLabel ? (r(), o("span", ke, m(s.secondaryLabel), 1)) : f("", !0),
+          s.tertiaryLabel ? (r(), o("span", we, m(s.tertiaryLabel), 1)) : f("", !0)
+        ])
+      ])) : f("", !0),
+      d("div", Se, [
+        g.value ? (r(), o("div", Le, [
+          y(x(ie), {
+            class: "sl-h-5 sl-w-5 sl-text-red-500",
+            "aria-hidden": "true"
+          })
+        ])) : N.value ? (r(), o("div", Ce, [
+          y(x(oe), {
+            class: "sl-h-5 sl-w-5 sl-text-green-500",
+            "aria-hidden": "true"
+          })
+        ])) : f("", !0),
+        d("div", {
+          class: h(["sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset", J.value])
+        }, [
+          y(x(ue), {
+            "model-value": E.value,
+            "onUpdate:modelValue": Q,
+            disabled: s.disabled
+          }, {
+            default: b(() => [
+              d("div", Ee, [
+                y(x(fe), {
+                  ref_key: "listboxButtonRef",
+                  ref: j,
+                  class: h([
+                    "sl-relative sl-cursor-default sl-rounded-l-md sl-border-0 sl-py-2 sl-pl-3 sl-pr-10 sl-text-left sl-text-sm",
+                    "sl-bg-white dark:sl-bg-slate-900 sl-text-gray-900 dark:sl-text-slate-100",
+                    "focus:sl-outline-none focus:sl-ring-0",
+                    s.disabled ? "sl-cursor-not-allowed sl-bg-gray-50 dark:sl-bg-slate-800 sl-text-gray-500 dark:sl-text-slate-400" : ""
+                  ]),
+                  "data-testid": "select-dropdown",
+                  onClick: q
+                }, {
+                  default: b(() => [
+                    d("span", {
+                      class: h(["sl-block sl-truncate sl-min-w-[80px]", E.value ? "" : "sl-text-gray-500 dark:sl-text-slate-400"])
+                    }, m(E.value?.label || s.select?.placeholder || "Select…"), 3),
+                    d("span", Be, [
+                      y(x(de), {
+                        class: "sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-300",
+                        "aria-hidden": "true"
+                      })
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["class"]),
+                (r(), R(se, { to: "body" }, [
+                  y(D, {
+                    "leave-active-class": "sl-transition sl-duration-100 sl-ease-in",
+                    "leave-from-class": "sl-opacity-100",
+                    "leave-to-class": "sl-opacity-0"
+                  }, {
+                    default: b(() => [
+                      y(x(ve), {
+                        class: "sl-fixed sl-z-[9999] sl-max-h-56 sl-overflow-auto sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-py-1 sl-text-base sl-shadow-lg dark:sl-shadow-slate-900/50 sl-ring-1 sl-ring-black sl-ring-opacity-5 dark:sl-ring-slate-700 focus:sl-outline-none sm:sl-text-sm",
+                        style: ae(M.value)
+                      }, {
+                        default: b(() => [
+                          (r(!0), o(ne, null, re(I.value, (l) => (r(), R(x(ye), {
+                            key: l.value,
+                            value: l,
+                            as: "template"
+                          }, {
+                            default: b(({ active: u, selected: c }) => [
+                              d("li", {
+                                class: h([
+                                  "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-3 sl-pr-9",
+                                  u ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200"
+                                ])
+                              }, [
+                                d("span", {
+                                  class: h(["sl-block sl-truncate", c ? "sl-font-medium" : "sl-font-normal"])
+                                }, m(l.label), 3),
+                                c ? (r(), o("span", Re, [
+                                  y(x(ce), {
+                                    class: "sl-h-5 sl-w-5",
+                                    "aria-hidden": "true"
+                                  })
+                                ])) : f("", !0)
+                              ], 2)
+                            ]),
+                            _: 2
+                          }, 1032, ["value"]))), 128))
+                        ]),
+                        _: 1
+                      }, 8, ["style"])
+                    ]),
+                    _: 1
+                  })
+                ]))
+              ])
+            ]),
+            _: 1
+          }, 8, ["model-value", "disabled"]),
+          t[1] || (t[1] = d("div", { class: "sl-w-px sl-bg-gray-200 dark:sl-bg-slate-700 sl-self-stretch" }, null, -1)),
+          d("div", je, [
+            d("input", {
+              class: h([
+                "sl-block sl-w-full sl-text-sm focus:sl-outline-none focus:sl-ring-0 sl-border-0 sl-py-2 sl-pl-3 sl-pr-10 sl-rounded-r-md",
+                "sl-placeholder:text-gray-400 dark:sl-placeholder:text-slate-500",
+                s.disabled ? "sl-bg-gray-50 dark:sl-bg-slate-800 sl-text-gray-500 dark:sl-text-slate-400 sl-cursor-not-allowed" : "sl-bg-white dark:sl-bg-slate-900 sl-text-gray-900 dark:sl-text-slate-100"
+              ]),
+              "aria-invalid": g.value || void 0,
+              name: `${s.name}__text`,
+              placeholder: s.text?.placeholder || "",
+              inputmode: s.text?.inputMode ?? "text",
+              maxlength: s.text?.maxLength || void 0,
+              value: x(n).text || "",
+              onInput: t[0] || (t[0] = (l) => W(l.target.value)),
+              disabled: s.disabled,
+              "data-testid": "text-input"
+            }, null, 42, Me)
+          ])
+        ], 2)
+      ]),
+      y(D, {
+        "enter-active-class": "sl-transition sl-ease-out sl-duration-300",
+        "enter-from-class": "sl-opacity-0 sl-transform sl-scale-95",
+        "enter-to-class": "sl-opacity-100 sl-transform sl-scale-100",
+        "leave-active-class": "sl-transition sl-ease-in sl-duration-200",
+        "leave-from-class": "sl-opacity-100 sl-transform sl-scale-100",
+        "leave-to-class": "sl-opacity-0 sl-transform sl-scale-95"
+      }, {
+        default: b(() => [
+          g.value ? (r(), o("p", Oe, m(K.value), 1)) : f("", !0)
+        ]),
+        _: 1
+      }),
+      !g.value && S.value ? (r(), o("p", Ve, m(S.value), 1)) : f("", !0)
+    ]));
+  }
+});
+export {
+  Ne as _
+};
+//# sourceMappingURL=SelectTextInput.vue_vue_type_script_setup_true_lang-B2Gw_se2.js.map

package/dist/SelectTextInput.vue_vue_type_script_setup_true_lang-B2Gw_se2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTextInput.vue_vue_type_script_setup_true_lang-B2Gw_se2.js","sources":["../src/components/inputs/SelectTextInput.vue"],"sourcesContent":["<!--\n  @component SelectTextInput\n  @description Combined select dropdown and text input field.\n  \n  A composite input that combines a select dropdown with a text input,\n  useful for inputs like \"Fall 2023\" where the user selects a term\n  and enters a year. Uses Headless UI Listbox for accessible select.\n  \n  @props\n  - name (string, required): Field name for form binding\n  - label (string, optional): Main label text\n  - value (CompositeValue | string, optional): Combined value object or string\n  - select (object, optional): Select configuration { options, placeholder, label }\n  - text (object, optional): Text input config { placeholder, inputMode, maxLength, label }\n  - delimiter (string, optional): Character between select and text in display\n  - showErrors (boolean, optional): Force show validation errors\n  - hasError (boolean, optional): External error state\n  - disabled (boolean, optional): Disabled state\n  - colorfulValidation (boolean, optional): Color-coded validation states\n  - showValidCheck (boolean, optional): Show success icon when valid\n  \n  @emits\n  - update:value: Emitted when composite value changes\n  - update:validity: Emitted when validation state changes\n  \n  @example\n  <SelectTextInput\n    name=\"graduation\"\n    label=\"Expected Graduation\"\n    :value=\"{ select: 'Fall', text: '2024' }\"\n    :select=\"{ options: [{ label: 'Fall', value: 'Fall' }, { label: 'Spring', value: 'Spring' }] }\"\n    :text=\"{ placeholder: 'Year', inputMode: 'numeric', maxLength: 4 }\"\n    @update:value=\"handleUpdate\"\n  />\n-->\n<template>\n  <div class=\"sl-space-y-1\" data-testid=\"select-text-input\">\n    <!-- Main label row -->\n    <div \n      v-if=\"label || secondaryLabel || tertiaryLabel || (disabled && disabledMessage)\" \n      class=\"sl-grid sl-grid-cols-3 sl-items-center\"\n    >\n      <div class=\"sl-col-span-2 sl-flex sl-items-center\">\n        <component \n          v-if=\"labelIconLeft\" \n          :is=\"labelIconLeft\" \n          class=\"sl-mr-2 sl-h-4 sl-w-4 sl-text-yellow-300\" \n        />\n        <label v-if=\"label\" class=\"sl-text-sm sl-font-medium\" :style=\"{ color: 'var(--sl-text-primary)' }\">\n          {{ label }}\n        </label>\n      </div>\n      <div class=\"sl-justify-self-end sl-col-start-3 sl-text-right sl-space-y-0.5\">\n        <p \n          v-if=\"disabled && disabledMessage\" \n          class=\"sl-text-xs\" :style=\"{ color: 'var(--sl-text-muted)' }\"\n        >\n          {{ disabledMessage }}\n        </p>\n        <span \n          v-if=\"secondaryLabel\" \n          class=\"sl-text-2xs sl-uppercase sl-truncate sl-font-semibold sl-block\" :style=\"{ color: 'var(--sl-text-secondary)' }\"\n        >\n          {{ secondaryLabel }}\n        </span>\n        <span \n          v-if=\"tertiaryLabel\" \n          class=\"sl-text-xs sl-uppercase sl-truncate sl-font-semibold sl-block\" :style=\"{ color: 'var(--sl-text-secondary)' }\"\n        >\n          {{ tertiaryLabel }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Input container -->\n    <div class=\"sl-relative sl-mt-1\">\n      <!-- Error icon -->\n      <div \n        v-if=\"showError\" \n        class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-20 sl-pointer-events-none\"\n      >\n        <ExclamationCircleIcon class=\"sl-h-5 sl-w-5 sl-text-red-500\" aria-hidden=\"true\" />\n      </div>\n      <!-- Success icon -->\n      <div \n        v-else-if=\"showSuccess\" \n        class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-20 sl-pointer-events-none\"\n      >\n        <CheckCircleIcon class=\"sl-h-5 sl-w-5 sl-text-green-500\" aria-hidden=\"true\" />\n      </div>\n\n      <div \n        class=\"sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset\"\n        :class=\"containerRingClass\"\n      >\n        <!-- Select dropdown using Headless UI Listbox -->\n        <Listbox\n          :model-value=\"selectedOption\"\n          @update:model-value=\"onSelectChange\"\n          :disabled=\"disabled\"\n        >\n          <div class=\"sl-relative\">\n            <ListboxButton\n              ref=\"listboxButtonRef\"\n              :class=\"[\n                'sl-relative sl-cursor-default sl-rounded-l-md sl-border-0 sl-py-2 sl-pl-3 sl-pr-10 sl-text-left sl-text-sm',\n                'sl-bg-white dark:sl-bg-slate-900 sl-text-gray-900 dark:sl-text-slate-100',\n                'focus:sl-outline-none focus:sl-ring-0',\n                disabled ? 'sl-cursor-not-allowed sl-bg-gray-50 dark:sl-bg-slate-800 sl-text-gray-500 dark:sl-text-slate-400' : ''\n              ]\"\n              data-testid=\"select-dropdown\"\n              @click=\"onDropdownClick\"\n            >\n              <span \n                class=\"sl-block sl-truncate sl-min-w-[80px]\"\n                :class=\"selectedOption ? '' : 'sl-text-gray-500 dark:sl-text-slate-400'\"\n              >\n                {{ selectedOption?.label || select?.placeholder || 'Select…' }}\n              </span>\n              <span class=\"sl-pointer-events-none sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2\">\n                <ChevronUpDownIcon class=\"sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-300\" aria-hidden=\"true\" />\n              </span>\n            </ListboxButton>\n            \n            <Teleport to=\"body\">\n              <transition\n                leave-active-class=\"sl-transition sl-duration-100 sl-ease-in\"\n                leave-from-class=\"sl-opacity-100\"\n                leave-to-class=\"sl-opacity-0\"\n              >\n                <ListboxOptions\n                  class=\"sl-fixed sl-z-[9999] sl-max-h-56 sl-overflow-auto sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-py-1 sl-text-base sl-shadow-lg dark:sl-shadow-slate-900/50 sl-ring-1 sl-ring-black sl-ring-opacity-5 dark:sl-ring-slate-700 focus:sl-outline-none sm:sl-text-sm\"\n                  :style=\"dropdownStyle\"\n                >\n                  <ListboxOption\n                    v-for=\"opt in selectOptions\"\n                    :key=\"opt.value\"\n                    :value=\"opt\"\n                    as=\"template\"\n                    v-slot=\"{ active, selected }\"\n                  >\n                    <li\n                      :class=\"[\n                        'sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-3 sl-pr-9',\n                        active ? 'sl-bg-stachelock-600 sl-text-white' : 'sl-text-gray-900 dark:sl-text-slate-200'\n                      ]\"\n                    >\n                      <span :class=\"['sl-block sl-truncate', selected ? 'sl-font-medium' : 'sl-font-normal']\">\n                        {{ opt.label }}\n                      </span>\n                      <span\n                        v-if=\"selected\"\n                        class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-4\"\n                      >\n                        <CheckIcon class=\"sl-h-5 sl-w-5\" aria-hidden=\"true\" />\n                      </span>\n                    </li>\n                  </ListboxOption>\n                </ListboxOptions>\n              </transition>\n            </Teleport>\n          </div>\n        </Listbox>\n\n        <!-- Vertical divider -->\n        <div class=\"sl-w-px sl-bg-gray-200 dark:sl-bg-slate-700 sl-self-stretch\" />\n\n        <!-- Text input -->\n        <div class=\"sl-flex-1 sl-relative\">\n          <input\n            :class=\"[\n              'sl-block sl-w-full sl-text-sm focus:sl-outline-none focus:sl-ring-0 sl-border-0 sl-py-2 sl-pl-3 sl-pr-10 sl-rounded-r-md',\n              'sl-placeholder:text-gray-400 dark:sl-placeholder:text-slate-500',\n              disabled \n                ? 'sl-bg-gray-50 dark:sl-bg-slate-800 sl-text-gray-500 dark:sl-text-slate-400 sl-cursor-not-allowed' \n                : 'sl-bg-white dark:sl-bg-slate-900 sl-text-gray-900 dark:sl-text-slate-100'\n            ]\"\n            :aria-invalid=\"showError || undefined\"\n            :name=\"`${name}__text`\"\n            :placeholder=\"text?.placeholder || ''\"\n            :inputmode=\"text?.inputMode ?? 'text'\"\n            :maxlength=\"text?.maxLength || undefined\"\n            :value=\"localValue.text || ''\"\n            @input=\"onTextChange(($event.target as HTMLInputElement).value)\"\n            :disabled=\"disabled\"\n            data-testid=\"text-input\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Error message -->\n    <Transition\n      enter-active-class=\"sl-transition sl-ease-out sl-duration-300\"\n      enter-from-class=\"sl-opacity-0 sl-transform sl-scale-95\"\n      enter-to-class=\"sl-opacity-100 sl-transform sl-scale-100\"\n      leave-active-class=\"sl-transition sl-ease-in sl-duration-200\"\n      leave-from-class=\"sl-opacity-100 sl-transform sl-scale-100\"\n      leave-to-class=\"sl-opacity-0 sl-transform sl-scale-95\"\n    >\n      <p \n        v-if=\"showError\"\n        class=\"sl-mt-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400 sl-bg-red-50 dark:sl-bg-red-900/20 sl-ring-1 sl-ring-red-100 dark:sl-ring-red-800 sl-rounded-md sl-p-2\"\n      >\n        {{ friendlyErrorMessage }}\n      </p>\n    </Transition>\n\n    <!-- Display value hint -->\n    <p \n      v-if=\"!showError && computedDisplay\" \n      class=\"sl-text-xs sl-text-gray-500 dark:sl-text-slate-400\"\n    >\n      {{ computedDisplay }}\n    </p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, reactive, toRefs, watch, onMounted, ref, onBeforeUnmount, type PropType, type Component } from 'vue'\nimport { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/vue/20/solid'\nimport { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxOption,\n  ListboxOptions,\n} from '@headlessui/vue'\n\n// Refs for floating dropdown positioning\nconst listboxButtonRef = ref<InstanceType<typeof ListboxButton> | null>(null)\nconst dropdownStyle = ref<{ top: string; left: string; width: string }>({\n  top: '0px',\n  left: '0px',\n  width: '120px'\n})\nconst dropdownOpen = ref(false)\n\nfunction updateDropdownPosition() {\n  // Get the actual DOM element from the Headless UI component\n  const el = listboxButtonRef.value?.$el as HTMLElement | undefined\n  if (!el) return\n  const rect = el.getBoundingClientRect()\n  dropdownStyle.value = {\n    top: `${rect.bottom + 4}px`,\n    left: `${rect.left}px`,\n    width: `${Math.max(rect.width, 120)}px`\n  }\n}\n\nfunction onDropdownClick() {\n  dropdownOpen.value = !dropdownOpen.value\n  if (dropdownOpen.value) {\n    updateDropdownPosition()\n  }\n}\n\n// Update position on scroll/resize when dropdown is open\nfunction handleScrollOrResize() {\n  if (dropdownOpen.value) {\n    updateDropdownPosition()\n  }\n}\n\nonMounted(() => {\n  window.addEventListener('scroll', handleScrollOrResize, true)\n  window.addEventListener('resize', handleScrollOrResize)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('scroll', handleScrollOrResize, true)\n  window.removeEventListener('resize', handleScrollOrResize)\n})\n\ntype SelectOption = { label: string; value: string }\n\ntype CompositeValue = {\n  select?: string\n  text?: string\n  display?: string\n}\n\ntype CompositePropValue = CompositeValue | string | number | Record<string, unknown> | null | undefined\n\nconst YEAR_PATTERN = /\\b(19|20)\\d{2}\\b$/\n\nfunction coerceString(input: unknown): string | undefined {\n  if (typeof input === 'string') {\n    const trimmed = input.trim()\n    return trimmed.length ? trimmed : undefined\n  }\n  if (typeof input === 'number') {\n    const str = String(input)\n    return str.length ? str : undefined\n  }\n  return undefined\n}\n\nfunction isCompositeLike(value: unknown): value is CompositeValue {\n  return (\n    !!value &&\n    typeof value === 'object' &&\n    !Array.isArray(value) &&\n    ('select' in (value as Record<string, unknown>) ||\n      'text' in (value as Record<string, unknown>) ||\n      'display' in (value as Record<string, unknown>))\n  )\n}\n\nfunction hasMeaningfulComposite(value: CompositeValue): boolean {\n  return !!(value.select || value.text || value.display)\n}\n\nfunction buildDisplay(select?: string, text?: string, fallback?: string): string | undefined {\n  if (fallback) return fallback\n  if (select && text) return `${select} ${text}`.trim()\n  return select || text || undefined\n}\n\nfunction normalizeCompositeValue(rawValue: CompositePropValue): CompositeValue {\n  const result: CompositeValue = {}\n\n  if (rawValue === null || rawValue === undefined) return result\n\n  if (typeof rawValue === 'string' || typeof rawValue === 'number') {\n    const str = coerceString(rawValue)\n    if (!str) return result\n\n    const yearMatch = str.match(YEAR_PATTERN)\n    if (yearMatch) {\n      const year = yearMatch[0]\n      const prefix = str.slice(0, str.length - year.length).trim()\n      if (prefix) result.select = prefix\n      result.text = year\n      result.display = buildDisplay(result.select, result.text)\n    } else {\n      result.text = str\n      result.display = str\n    }\n    return result\n  }\n\n  if (isCompositeLike(rawValue)) {\n    const composite = rawValue as CompositeValue\n    const select = coerceString(composite.select)\n    const text = coerceString(composite.text)\n    const display = coerceString(composite.display)\n\n    if (select) result.select = select\n    if (text) result.text = text\n    result.display = buildDisplay(result.select, result.text, display)\n    return result\n  }\n\n  if (typeof rawValue === 'object' && !Array.isArray(rawValue)) {\n    const obj = rawValue as Record<string, unknown>\n    const select =\n      coerceString(obj.select) ?? coerceString(obj.term) ?? coerceString(obj.semester)\n    const text =\n      coerceString(obj.text) ?? coerceString(obj.year) ?? coerceString(obj.value)\n    const display = coerceString(obj.display) ?? coerceString(obj.label)\n\n    if (select) result.select = select\n    if (text) result.text = text\n    result.display = buildDisplay(result.select, result.text, display)\n    return result\n  }\n\n  return result\n}\n\nconst props = defineProps({\n  name: { type: String, required: true },\n  label: { type: String, default: '' },\n  tertiaryLabel: { type: String, default: '' },\n  secondaryLabel: { type: String, default: '' },\n  labelIconLeft: { type: [Object, Function] as PropType<Component>, default: undefined },\n  value: {\n    type: [Object, String, Number] as PropType<CompositePropValue>,\n    default: undefined\n  },\n  select: {\n    type: Object as PropType<{ label?: string; options: SelectOption[]; placeholder?: string }>,\n    default: () => ({ options: [] })\n  },\n  text: {\n    type: Object as PropType<{\n      label?: string\n      placeholder?: string\n      inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'\n      maxLength?: number\n    }>,\n    default: () => ({})\n  },\n  delimiter: { type: String, default: ' ' },\n  formatter: { type: Function as PropType<(v: CompositeValue) => string | undefined> },\n  showErrors: { type: Boolean, default: false },\n  hasError: { type: Boolean, default: false },\n  validateOnMount: { type: Boolean, default: false },\n  textValidationRegex: { type: [RegExp, Object] as PropType<RegExp>, default: undefined },\n  requiredText: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  disabledMessage: { type: String, default: '' },\n  colorfulValidation: { type: Boolean, default: true },\n  showValidCheck: { type: Boolean, default: true }\n})\n\nconst emit = defineEmits<{\n  'update:value': [value: CompositeValue]\n  'update:validity': [isValid: boolean]\n}>()\n\nconst initialNormalizedValue = normalizeCompositeValue(props.value)\n\nconst state = reactive({\n  localValue: initialNormalizedValue\n})\n\nconst { localValue } = toRefs(state)\n\nconst shouldEmitNormalizedInitialValue = computed(\n  () => hasMeaningfulComposite(initialNormalizedValue) && !isCompositeLike(props.value)\n)\n\nconst selectOptions = computed<SelectOption[]>(() => props.select?.options || [])\n\n// Find the selected option object based on localValue.select\nconst selectedOption = computed<SelectOption | null>(() => {\n  if (!localValue.value.select) return null\n  return selectOptions.value.find(opt => opt.value === localValue.value.select) || null\n})\n\nconst isTextInvalid = computed(() => {\n  const t = localValue.value.text\n  if (!props.textValidationRegex) {\n    return false\n  }\n  if (!t || String(t).trim() === '') {\n    return props.requiredText === true\n  }\n  return !props.textValidationRegex.test(String(t))\n})\n\nconst showError = computed(() => props.showErrors && (props.hasError || isTextInvalid.value))\nconst showSuccess = computed(\n  () => props.showValidCheck && !showError.value && !!computedDisplay.value\n)\n\nconst containerRingClass = computed(() => {\n  if (props.disabled) return 'sl-ring-gray-200 dark:sl-ring-slate-700'\n  if (!props.colorfulValidation) return 'sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-stachelock-600'\n  if (showError.value) return 'sl-ring-red-300 dark:sl-ring-red-500 focus-within:sl-ring-stachelock-600'\n  if (showSuccess.value) return 'sl-ring-green-300 dark:sl-ring-green-500 focus-within:sl-ring-stachelock-600'\n  return 'sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-stachelock-600'\n})\n\nconst computedDisplay = computed(() => {\n  const raw = { select: localValue.value.select, text: localValue.value.text } as CompositeValue\n  const custom = props.formatter ? props.formatter(raw) : undefined\n  if (custom !== undefined) return custom\n  const parts = [raw.select, raw.text].filter(Boolean)\n  return parts.join(props.delimiter).trim()\n})\n\nconst friendlyErrorMessage = computed(() => {\n  if (!showError.value) return ''\n  const hasSelect = !!localValue.value.select\n  const hasText = !!localValue.value.text && String(localValue.value.text).trim() !== ''\n  const yearOk = !!localValue.value.text && /^\\d{4}$/.test(String(localValue.value.text))\n  if (!hasSelect && !hasText) return 'Please select an option and enter a value.'\n  if (!hasSelect) return 'Please select an option.'\n  if (!hasText) return 'Please enter a value.'\n  if (!yearOk && props.textValidationRegex) return 'Please enter a valid value.'\n  return 'Please complete both fields.'\n})\n\nfunction emitValueAndValidity() {\n  const display = computedDisplay.value || undefined\n  const payload: CompositeValue = {\n    select: localValue.value.select,\n    text: localValue.value.text,\n    display\n  }\n  emit('update:value', payload)\n  const isValid = !!(payload.select && payload.text && String(payload.text).length > 0)\n  emit('update:validity', isValid)\n}\n\nfunction onSelectChange(opt: SelectOption | null) {\n  localValue.value.select = opt?.value || undefined\n  dropdownOpen.value = false\n  emitValueAndValidity()\n}\n\nfunction onTextChange(val: string) {\n  localValue.value.text = val || undefined\n  emitValueAndValidity()\n}\n\n// Sync down-prop changes\nwatch(\n  () => props.value,\n  (v) => {\n    state.localValue = normalizeCompositeValue(v)\n  },\n  { deep: true }\n)\n\nonMounted(() => {\n  if (shouldEmitNormalizedInitialValue.value) {\n    emitValueAndValidity()\n  }\n})\n\n// Validate on mount if requested\nif (props.validateOnMount) {\n  emitValueAndValidity()\n}\n</script>\n\n"],"names":["listboxButtonRef","ref","dropdownStyle","dropdownOpen","updateDropdownPosition","el","rect","onDropdownClick","handleScrollOrResize","onMounted","onBeforeUnmount","YEAR_PATTERN","coerceString","input","trimmed","str","isCompositeLike","value","hasMeaningfulComposite","buildDisplay","select","text","fallback","normalizeCompositeValue","rawValue","result","yearMatch","year","prefix","composite","display","obj","props","__props","emit","__emit","initialNormalizedValue","state","reactive","localValue","toRefs","shouldEmitNormalizedInitialValue","computed","selectOptions","selectedOption","opt","isTextInvalid","t","showError","showSuccess","computedDisplay","containerRingClass","raw","custom","friendlyErrorMessage","hasSelect","hasText","yearOk","emitValueAndValidity","payload","isValid","onSelectChange","onTextChange","val","watch","v","_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_createBlock","_resolveDynamicComponent","_hoisted_4","_toDisplayString","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_createVNode","_unref","ExclamationCircleIcon","_hoisted_11","CheckCircleIcon","_normalizeClass","Listbox","_hoisted_12","ListboxButton","_hoisted_13","ChevronUpDownIcon","_Teleport","_Transition","ListboxOptions","_Fragment","_renderList","ListboxOption","active","selected","_hoisted_14","CheckIcon","_hoisted_15","$event","_hoisted_17","_hoisted_18"],"mappings":"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"}

package/dist/{SidebarLayout.vue_vue_type_script_setup_true_lang-CzLbBcNS.js → SidebarLayout.vue_vue_type_script_setup_true_lang-BD2PF5xp.js}

@@ -1,14 +1,15 @@
-import { defineComponent as u, ref as x, createElementBlock as g, openBlock as v, createVNode as o, createElementVNode as s, unref as a, withCtx as i, renderSlot as t, normalizeClass as d } from "vue";
-import { r as b, a as y } from "./XMarkIcon-C4wILUsz.js";
-import { S as h, h as f } from "./transition-CuxxW9dY.js";
-import { Y as _, G as w } from "./dialog-U1KNiPzc.js";
-const k = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }, S = { class: "sl-absolute sl-left-full sl-top-0 sl-flex sl-w-16 sl-justify-center sl-pt-5" }, C = {
+import { defineComponent as x, ref as g, createElementBlock as u, openBlock as v, createVNode as o, createElementVNode as s, unref as a, withCtx as i, renderSlot as t, normalizeClass as d } from "vue";
+import { r as b } from "./XMarkIcon-Cwy3T6p8.js";
+import { r as y } from "./Bars3Icon-BdOqcGcY.js";
+import { S as h, h as f } from "./transition-_rPfnoET.js";
+import { Y as _, G as k } from "./dialog-B2WA4G25.js";
+const w = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }, S = { class: "sl-absolute sl-left-full sl-top-0 sl-flex sl-w-16 sl-justify-center sl-pt-5" }, C = {
   class: "sl-flex sl-grow sl-flex-col sl-gap-y-5 sl-px-6 sl-pb-2 sl-ring-1 sl-ring-white/10",
   style: { "background-color": "#dc2626" }
 }, z = { class: "sl-flex sl-h-16 sl-shrink-0 sl-items-center" }, W = { class: "sl-flex sl-flex-1 sl-flex-col" }, B = {
   role: "list",
   class: "-sl-mx-2 sl-flex-1 sl-space-y-1"
-}, L = { class: "sl-mt-auto" }, j = { class: "sl-flex sl-h-16 sl-shrink-0 sl-items-center sl-px-6" }, E = { class: "sl-mt-8 sl-flex sl-flex-col sl-justify-between sl-h-full" }, G = { class: "sl-absolute sl-bottom-4 sl-left-0 sl-right-0 sl-px-6" }, N = { class: "sl-sticky sl-top-0 sl-z-40 sl-flex sl-h-16 sl-shrink-0 sl-items-center sl-gap-x-4 sl-border-b sl-border-gray-200 sl-bg-white sl-px-4 sl-shadow-sm sm:sl-gap-x-6 sm:sl-px-6 lg:sl-px-8" }, O = { class: "sl-flex sl-flex-1 sl-gap-x-4 sm:sl-self-stretch lg:sl-gap-x-6" }, V = { class: "sl-relative sl-flex sl-flex-1" }, Y = { class: "sl-flex sl-items-center sl-gap-x-4 lg:sl-gap-x-6" }, q = { class: "sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-py-6" }, I = /* @__PURE__ */ u({
+}, L = { class: "sl-mt-auto" }, j = { class: "sl-flex sl-h-16 sl-shrink-0 sl-items-center sl-px-6" }, E = { class: "sl-mt-8 sl-flex sl-flex-col sl-justify-between sl-h-full" }, G = { class: "sl-absolute sl-bottom-4 sl-left-0 sl-right-0 sl-px-6" }, N = { class: "sl-sticky sl-top-0 sl-z-40 sl-flex sl-h-16 sl-shrink-0 sl-items-center sl-gap-x-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sl-bg-white dark:sl-bg-slate-800 sl-px-4 sl-shadow-sm sm:sl-gap-x-6 sm:sl-px-6 lg:sl-px-8" }, O = { class: "sl-flex sl-flex-1 sl-gap-x-4 sm:sl-self-stretch lg:sl-gap-x-6" }, V = { class: "sl-relative sl-flex sl-flex-1" }, Y = { class: "sl-flex sl-items-center sl-gap-x-4 lg:sl-gap-x-6" }, q = { class: "sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-py-6" }, J = /* @__PURE__ */ x({
   __name: "SidebarLayout",
   props: {
     isWideSidebar: {
@@ -16,22 +17,22 @@ const k = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
       default: !1
     }
   },
-  setup(n) {
-    const r = x(!1), c = () => {
-      r.value = !1;
-    }, p = () => {
-      r.value = !0;
+  setup(r) {
+    const n = g(!1), p = () => {
+      n.value = !1;
+    }, c = () => {
+      n.value = !0;
     };
-    return (e, l) => (v(), g("div", k, [
+    return (e, l) => (v(), u("div", w, [
       o(a(h), {
         as: "template",
-        show: r.value
+        show: n.value
       }, {
         default: i(() => [
           o(a(_), {
             as: "div",
             class: "sl-relative sl-z-50 lg:sl-hidden",
-            onClose: c
+            onClose: p
           }, {
             default: i(() => [
               o(a(f), {
@@ -60,7 +61,7 @@ const k = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
                   "leave-to": "-sl-translate-x-full"
                 }, {
                   default: i(() => [
-                    o(a(w), { class: "sl-relative sl-mr-16 sl-flex sl-w-full sl-max-w-xs sl-flex-1" }, {
+                    o(a(k), { class: "sl-relative sl-mr-16 sl-flex sl-w-full sl-max-w-xs sl-flex-1" }, {
                       default: i(() => [
                         o(a(f), {
                           as: "template",
@@ -76,7 +77,7 @@ const k = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
                               s("button", {
                                 type: "button",
                                 class: "-sl-m-2.5 sl-p-2.5",
-                                onClick: l[0] || (l[0] = (m) => c())
+                                onClick: l[0] || (l[0] = (m) => p())
                               }, [
                                 l[3] || (l[3] = s("span", { class: "sl-sr-only" }, "Close sidebar", -1)),
                                 o(a(b), {
@@ -120,7 +121,7 @@ const k = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
         _: 3
       }, 8, ["show"]),
       s("div", {
-        class: d(["sl-hidden lg:sl-fixed lg:sl-inset-y-0 lg:sl-left-0 lg:sl-z-50 lg:sl-block lg:sl-pb-4 sl-pt-4", n.isWideSidebar ? "lg:sl-w-72" : "lg:sl-w-20"]),
+        class: d(["sl-hidden lg:sl-fixed lg:sl-inset-y-0 lg:sl-left-0 lg:sl-z-50 lg:sl-block lg:sl-pb-4 sl-pt-4", r.isWideSidebar ? "lg:sl-w-72" : "lg:sl-w-20"]),
         style: { "background-color": "#dc2626" }
       }, [
         s("div", j, [
@@ -134,7 +135,7 @@ const k = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
         s("nav", E, [
           s("ul", {
             role: "list",
-            class: d(n.isWideSidebar ? "sl-flex sl-flex-col sl-items-start sl-mx-4 sl-space-y-1" : "sl-flex sl-flex-col sl-items-center sl-space-y-1")
+            class: d(r.isWideSidebar ? "sl-flex sl-flex-col sl-items-start sl-mx-4 sl-space-y-1" : "sl-flex sl-flex-col sl-items-center sl-space-y-1")
           }, [
             t(e.$slots, "navigation")
           ], 2),
@@ -144,13 +145,13 @@ const k = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
         ])
       ], 2),
       s("div", {
-        class: d(["lg:sl-pl-20", n.isWideSidebar ? "lg:sl-pl-72" : "lg:sl-pl-20"])
+        class: d(["lg:sl-pl-20", r.isWideSidebar ? "lg:sl-pl-72" : "lg:sl-pl-20"])
       }, [
         s("div", N, [
           s("button", {
             type: "button",
-            class: "-sl-m-2.5 sl-p-2.5 sl-text-gray-700 lg:sl-hidden",
-            onClick: l[1] || (l[1] = (m) => p())
+            class: "-sl-m-2.5 sl-p-2.5 sl-text-gray-700 dark:sl-text-slate-300 lg:sl-hidden",
+            onClick: l[1] || (l[1] = (m) => c())
           }, [
             l[6] || (l[6] = s("span", { class: "sl-sr-only" }, "Open sidebar", -1)),
             o(a(y), {
@@ -159,7 +160,7 @@ const k = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
             })
           ]),
           l[7] || (l[7] = s("div", {
-            class: "sl-h-6 sl-w-px sl-bg-gray-900/10 lg:sl-hidden",
+            class: "sl-h-6 sl-w-px sl-bg-gray-900/10 dark:sl-bg-slate-700 lg:sl-hidden",
             "aria-hidden": "true"
           }, null, -1)),
           s("div", O, [
@@ -179,6 +180,6 @@ const k = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
   }
 });
 export {
-  I as _
+  J as _
 };
-//# sourceMappingURL=SidebarLayout.vue_vue_type_script_setup_true_lang-CzLbBcNS.js.map
+//# sourceMappingURL=SidebarLayout.vue_vue_type_script_setup_true_lang-BD2PF5xp.js.map

package/dist/SidebarLayout.vue_vue_type_script_setup_true_lang-BD2PF5xp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarLayout.vue_vue_type_script_setup_true_lang-BD2PF5xp.js","sources":["../src/components/layouts/SidebarLayout.vue"],"sourcesContent":["<template>\n  <div class=\"sl-relative\">\n    <!-- Mobile sidebar overlay -->\n    <TransitionRoot as=\"template\" :show=\"sidebarOpen\">\n      <Dialog as=\"div\" class=\"sl-relative sl-z-50 lg:sl-hidden\" @close=\"closeSidebar\">\n        <TransitionChild as=\"template\" enter=\"sl-transition-opacity sl-ease-linear sl-duration-300\"\n          enter-from=\"sl-opacity-0\" enter-to=\"sl-opacity-100\"\n          leave=\"sl-transition-opacity sl-ease-linear sl-duration-300\" leave-from=\"sl-opacity-100\"\n          leave-to=\"sl-opacity-0\">\n          <div class=\"sl-fixed sl-inset-0 sl-bg-gray-900/80\" />\n        </TransitionChild>\n\n        <div class=\"sl-fixed sl-inset-0 sl-flex\">\n          <TransitionChild as=\"template\" enter=\"sl-transition sl-ease-in-out sl-duration-300 sl-transform\"\n            enter-from=\"-sl-translate-x-full\" enter-to=\"sl-translate-x-0\"\n            leave=\"sl-transition sl-ease-in-out sl-duration-300 sl-transform\" leave-from=\"sl-translate-x-0\"\n            leave-to=\"-sl-translate-x-full\">\n            <DialogPanel class=\"sl-relative sl-mr-16 sl-flex sl-w-full sl-max-w-xs sl-flex-1\">\n              <TransitionChild as=\"template\" enter=\"sl-ease-in-out sl-duration-300\" enter-from=\"sl-opacity-0\"\n                enter-to=\"sl-opacity-100\" leave=\"sl-ease-in-out sl-duration-300\" leave-from=\"sl-opacity-100\"\n                leave-to=\"sl-opacity-0\">\n                <div class=\"sl-absolute sl-left-full sl-top-0 sl-flex sl-w-16 sl-justify-center sl-pt-5\">\n                  <button type=\"button\" class=\"-sl-m-2.5 sl-p-2.5\" @click=\"closeSidebar()\">\n                    <span class=\"sl-sr-only\">Close sidebar</span>\n                    <XMarkIcon class=\"sl-h-6 sl-w-6 sl-text-stachelock-050\" aria-hidden=\"true\" />\n                  </button>\n                </div>\n              </TransitionChild>\n\n              <div\n                class=\"sl-flex sl-grow sl-flex-col sl-gap-y-5 sl-px-6 sl-pb-2 sl-ring-1 sl-ring-white/10\"\n                style=\"background-color: #dc2626;\">\n                <div class=\"sl-flex sl-h-16 sl-shrink-0 sl-items-center\">\n                  <slot name=\"logo\">\n                    <div class=\"sl-font-semibold sl-text-lg\" style=\"color: #fef2f2;\">Logo</div>\n                  </slot>\n                </div>\n                <nav class=\"sl-flex sl-flex-1 sl-flex-col\">\n                  <ul role=\"list\" class=\"-sl-mx-2 sl-flex-1 sl-space-y-1\">\n                    <slot name=\"navigation\">\n                      <!-- Default navigation slot -->\n                    </slot>\n                  </ul>\n                </nav>\n                <div class=\"sl-mt-auto\">\n                  <slot name=\"sidebar-footer\">\n                    <!-- Sidebar footer content -->\n                  </slot>\n                </div>\n              </div>\n            </DialogPanel>\n          </TransitionChild>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n\n    <!-- Desktop sidebar -->\n    <div\n      class=\"sl-hidden lg:sl-fixed lg:sl-inset-y-0 lg:sl-left-0 lg:sl-z-50 lg:sl-block lg:sl-pb-4 sl-pt-4\"\n      style=\"background-color: #dc2626;\"\n      :class=\"isWideSidebar ? 'lg:sl-w-72' : 'lg:sl-w-20'\">\n      <div class=\"sl-flex sl-h-16 sl-shrink-0 sl-items-center sl-px-6\">\n        <slot name=\"logo\">\n          <div class=\"sl-font-semibold sl-text-lg\" style=\"color: #fef2f2;\">Logo</div>\n        </slot>\n      </div>\n      <nav class=\"sl-mt-8 sl-flex sl-flex-col sl-justify-between sl-h-full\">\n        <ul role=\"list\"\n          :class=\"isWideSidebar ? 'sl-flex sl-flex-col sl-items-start sl-mx-4 sl-space-y-1' : 'sl-flex sl-flex-col sl-items-center sl-space-y-1'\">\n          <slot name=\"navigation\">\n            <!-- Default navigation slot -->\n          </slot>\n        </ul>\n        <div class=\"sl-absolute sl-bottom-4 sl-left-0 sl-right-0 sl-px-6\">\n          <slot name=\"sidebar-footer\">\n            <!-- Sidebar footer content -->\n          </slot>\n        </div>\n      </nav>\n    </div>\n\n    <!-- Main content area -->\n    <div :class=\"['lg:sl-pl-20', isWideSidebar ? 'lg:sl-pl-72' : 'lg:sl-pl-20']\">\n      <!-- Header -->\n      <div\n        class=\"sl-sticky sl-top-0 sl-z-40 sl-flex sl-h-16 sl-shrink-0 sl-items-center sl-gap-x-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sl-bg-white dark:sl-bg-slate-800 sl-px-4 sl-shadow-sm sm:sl-gap-x-6 sm:sl-px-6 lg:sl-px-8\">\n        <button type=\"button\" class=\"-sl-m-2.5 sl-p-2.5 sl-text-gray-700 dark:sl-text-slate-300 lg:sl-hidden\" @click=\"openSidebar()\">\n          <span class=\"sl-sr-only\">Open sidebar</span>\n          <Bars3Icon class=\"sl-h-6 sl-w-6\" aria-hidden=\"true\" />\n        </button>\n\n        <!-- Separator -->\n        <div class=\"sl-h-6 sl-w-px sl-bg-gray-900/10 dark:sl-bg-slate-700 lg:sl-hidden\" aria-hidden=\"true\" />\n\n        <div class=\"sl-flex sl-flex-1 sl-gap-x-4 sm:sl-self-stretch lg:sl-gap-x-6\">\n          <div class=\"sl-relative sl-flex sl-flex-1\">\n            <slot name=\"header-content\">\n              <!-- Header content -->\n            </slot>\n          </div>\n          <div class=\"sl-flex sl-items-center sl-gap-x-4 lg:sl-gap-x-6\">\n            <slot name=\"header-right\">\n              <!-- Header right content (notifications, profile, etc.) -->\n            </slot>\n          </div>\n        </div>\n      </div>\n\n      <!-- Main content -->\n      <main class=\"sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-py-6\">\n        <slot name=\"main\">\n          <!-- Main content slot -->\n        </slot>\n      </main>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';\nimport { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline';\n\ndefineProps({\n  isWideSidebar: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst sidebarOpen = ref(false);\n\nconst closeSidebar = () => {\n  sidebarOpen.value = false;\n};\n\nconst openSidebar = () => {\n  sidebarOpen.value = true;\n};\n</script>\n\n<style scoped></style>\n"],"names":["sidebarOpen","ref","closeSidebar","openSidebar","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","TransitionRoot","Dialog","TransitionChild","_cache","_createElementVNode","_hoisted_2","DialogPanel","_hoisted_3","XMarkIcon","_hoisted_4","_hoisted_5","_renderSlot","_ctx","_hoisted_6","_hoisted_7","_hoisted_8","_normalizeClass","__props","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","Bars3Icon","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkIA,UAAMA,IAAcC,EAAI,EAAK,GAEvBC,IAAe,MAAM;AACzB,MAAAF,EAAY,QAAQ;AAAA,IACtB,GAEMG,IAAc,MAAM;AACxB,MAAAH,EAAY,QAAQ;AAAA,IACtB;sBAzIEI,EAAA,GAAAC,EAkHM,OAlHNC,GAkHM;AAAA,MAhHJC,EAmDiBC,EAAAC,CAAA,GAAA;AAAA,QAnDD,IAAG;AAAA,QAAY,MAAMT,EAAA;AAAA,MAAA;mBACnC,MAiDS;AAAA,UAjDTO,EAiDSC,EAAAE,CAAA,GAAA;AAAA,YAjDD,IAAG;AAAA,YAAM,OAAM;AAAA,YAAoC,SAAOR;AAAA,UAAA;uBAChE,MAKkB;AAAA,cALlBK,EAKkBC,EAAAG,CAAA,GAAA;AAAA,gBALD,IAAG;AAAA,gBAAW,OAAM;AAAA,gBACnC,cAAW;AAAA,gBAAe,YAAS;AAAA,gBACnC,OAAM;AAAA,gBAAuD,cAAW;AAAA,gBACxE,YAAS;AAAA,cAAA;2BACT,MAAqDC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,kBAArDC,EAAqD,OAAA,EAAhD,OAAM,wCAAA,GAAuC,MAAA,EAAA;AAAA,gBAAA;;;;cAGpDA,EAwCM,OAxCNC,GAwCM;AAAA,gBAvCJP,EAsCkBC,EAAAG,CAAA,GAAA;AAAA,kBAtCD,IAAG;AAAA,kBAAW,OAAM;AAAA,kBACnC,cAAW;AAAA,kBAAuB,YAAS;AAAA,kBAC3C,OAAM;AAAA,kBAA4D,cAAW;AAAA,kBAC7E,YAAS;AAAA,gBAAA;6BACT,MAiCc;AAAA,oBAjCdJ,EAiCcC,EAAAO,CAAA,GAAA,EAjCD,OAAM,kEAA8D;AAAA,iCAC/E,MASkB;AAAA,wBATlBR,EASkBC,EAAAG,CAAA,GAAA;AAAA,0BATD,IAAG;AAAA,0BAAW,OAAM;AAAA,0BAAiC,cAAW;AAAA,0BAC/E,YAAS;AAAA,0BAAiB,OAAM;AAAA,0BAAiC,cAAW;AAAA,0BAC5E,YAAS;AAAA,wBAAA;qCACT,MAKM;AAAA,4BALNE,EAKM,OALNG,GAKM;AAAA,8BAJJH,EAGS,UAAA;AAAA,gCAHD,MAAK;AAAA,gCAAS,OAAM;AAAA,gCAAsB,gCAAOX,EAAA;AAAA,8BAAY;gCACnEU,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAA6C,QAAA,EAAvC,OAAM,aAAA,GAAa,iBAAa,EAAA;AAAA,gCACtCN,EAA6EC,EAAAS,CAAA,GAAA;AAAA,kCAAlE,OAAM;AAAA,kCAAuC,eAAY;AAAA,gCAAA;;;;;;wBAK1EJ,EAoBM,OApBNK,GAoBM;AAAA,0BAjBJL,EAIM,OAJNM,GAIM;AAAA,4BAHJC,EAEOC,sBAFP,MAEO;AAAA,8CADLR,EAA2E,OAAA;AAAA,gCAAtE,OAAM;AAAA,gCAA8B,OAAA,EAAA,OAAA,UAAA;AAAA,8BAAA,GAAwB,QAAI,EAAA;AAAA,4BAAA;;0BAGzEA,EAMM,OANNS,GAMM;AAAA,4BALJT,EAIK,MAJLU,GAIK;AAAA,8BAHHH,EAEOC,EAAA,QAAA,YAAA;AAAA,4BAAA;;0BAGXR,EAIM,OAJNW,GAIM;AAAA,4BAHJJ,EAEOC,EAAA,QAAA,gBAAA;AAAA,0BAAA;;;;;;;;;;;;;;;MAUrBR,EAsBM,OAAA;AAAA,QArBJ,OAAKY,EAAA,CAAC,gGAEEC,EAAA,gBAAa,eAAA,YAAA,CAAA;AAAA,QADrB,OAAA,EAAA,oBAAA,UAAA;AAAA,MAAA;QAEAb,EAIM,OAJNc,GAIM;AAAA,UAHJP,EAEOC,sBAFP,MAEO;AAAA,4BADLR,EAA2E,OAAA;AAAA,cAAtE,OAAM;AAAA,cAA8B,OAAA,EAAA,OAAA,UAAA;AAAA,YAAA,GAAwB,QAAI,EAAA;AAAA,UAAA;;QAGzEA,EAYM,OAZNe,GAYM;AAAA,UAXJf,EAKK,MAAA;AAAA,YALD,MAAK;AAAA,YACN,SAAOa,EAAA,gBAAa,4DAAA,kDAAA;AAAA,UAAA;YACrBN,EAEOC,EAAA,QAAA,YAAA;AAAA,UAAA;UAETR,EAIM,OAJNgB,GAIM;AAAA,YAHJT,EAEOC,EAAA,QAAA,gBAAA;AAAA,UAAA;;;MAMbR,EAgCM,OAAA;AAAA,QAhCA,yBAAuBa,EAAA,gBAAa,gBAAA,aAAA,CAAA;AAAA,MAAA;QAExCb,EAsBM,OAtBNiB,GAsBM;AAAA,UApBJjB,EAGS,UAAA;AAAA,YAHD,MAAK;AAAA,YAAS,OAAM;AAAA,YAA2E,gCAAOV,EAAA;AAAA,UAAW;YACvHS,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAA4C,QAAA,EAAtC,OAAM,aAAA,GAAa,gBAAY,EAAA;AAAA,YACrCN,EAAsDC,EAAAuB,CAAA,GAAA;AAAA,cAA3C,OAAM;AAAA,cAAgB,eAAY;AAAA,YAAA;;0BAI/ClB,EAAqG,OAAA;AAAA,YAAhG,OAAM;AAAA,YAAqE,eAAY;AAAA,UAAA;UAE5FA,EAWM,OAXNmB,GAWM;AAAA,YAVJnB,EAIM,OAJNoB,GAIM;AAAA,cAHJb,EAEOC,EAAA,QAAA,gBAAA;AAAA,YAAA;YAETR,EAIM,OAJNqB,GAIM;AAAA,cAHJd,EAEOC,EAAA,QAAA,cAAA;AAAA,YAAA;;;QAMbR,EAIO,QAJPsB,GAIO;AAAA,UAHLf,EAEOC,EAAA,QAAA,MAAA;AAAA,QAAA;;;;;"}

package/dist/SparklineChart.vue_vue_type_script_setup_true_lang-DDTcpEjy.js

@@ -0,0 +1,78 @@
+import { defineComponent as s, computed as r, createElementBlock as d, openBlock as a, normalizeStyle as m, createBlock as h, createCommentVNode as c, unref as y } from "vue";
+import f from "vue-echarts";
+import { use as u } from "echarts/core";
+import { CanvasRenderer as w } from "echarts/renderers";
+import { LineChart as C, BarChart as b } from "echarts/charts";
+import { GridComponent as g } from "echarts/components";
+import { chartColors as x, getAreaGradient as S } from "./charts/chartTheme.js";
+const M = /* @__PURE__ */ s({
+  __name: "SparklineChart",
+  props: {
+    data: {},
+    type: { default: "line" },
+    height: { default: 40 },
+    width: { default: "100%" },
+    color: { default: x.primary[0] },
+    showEndpoint: { type: Boolean, default: !1 }
+  },
+  setup(i) {
+    u([w, C, b, g]);
+    const t = i, n = r(() => ({
+      height: `${t.height}px`,
+      width: typeof t.width == "number" ? `${t.width}px` : t.width
+    })), l = r(() => {
+      const o = t.type === "area", e = t.type === "bar";
+      return {
+        grid: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0
+        },
+        xAxis: {
+          type: "category",
+          show: !1,
+          data: t.data.map((v, p) => p)
+        },
+        yAxis: {
+          type: "value",
+          show: !1,
+          min: "dataMin",
+          max: "dataMax"
+        },
+        series: [{
+          type: e ? "bar" : "line",
+          data: t.data,
+          smooth: !e,
+          symbol: t.showEndpoint ? "circle" : "none",
+          symbolSize: t.showEndpoint ? 6 : 0,
+          showSymbol: t.showEndpoint,
+          lineStyle: e ? void 0 : {
+            width: 2,
+            color: t.color
+          },
+          areaStyle: o ? {
+            color: S(t.color)
+          } : void 0,
+          itemStyle: {
+            color: t.color
+          },
+          barWidth: "60%"
+        }]
+      };
+    });
+    return (o, e) => (a(), d("div", {
+      style: m(n.value)
+    }, [
+      o.data.length > 0 ? (a(), h(y(f), {
+        key: 0,
+        option: l.value,
+        autoresize: !0
+      }, null, 8, ["option"])) : c("", !0)
+    ], 4));
+  }
+});
+export {
+  M as _
+};
+//# sourceMappingURL=SparklineChart.vue_vue_type_script_setup_true_lang-DDTcpEjy.js.map