spicykatsu 0.0.43 → 0.0.52

package/README.md

@@ -2,4 +2,6 @@
 
 Fun, simple library for Vue3. Something for me to play around with in my projects.  
 
+Feel free to clone the repo and run the `dev` script. The playground has an example of every component and directive. 
+
 Docs: [SpicyKatsu Docs](https://satoru8.gitlab.io/spicykatsuvlib/)

package/dist/lib/SpicyAccordion/SpicyAccordion.css

@@ -0,0 +1 @@
+.spicyAccordion{border:1px solid #ddd;border-radius:4px;overflow:hidden}.spicyAccordionItem{border-bottom:1px solid #ddd}.spicyAccordionItem:last-child{border-bottom:none}.spicyAccordionHeader{background-color:#f5f5f5;border:none;padding:10px;text-align:left;width:100%;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .2s ease}.spicyAccordionHeader.open{background-color:#e0e0e0}.spicyAccordionHeader.open .accordionArrow{transform:rotate(180deg)}.spicyAccordionContent{padding:10px;background-color:#fff}.accordionToggle{display:flex;align-items:center;transition:transform .2s ease}.accordionArrow{width:20px;height:20px;transition:transform .2s}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter,.fade-leave-to{opacity:0}

package/dist/lib/SpicyAccordion/SpicyAccordion.js

@@ -0,0 +1,64 @@
+import { defineComponent as u, ref as v, openBlock as c, createElementBlock as i, Fragment as m, renderList as _, createElementVNode as o, normalizeClass as f, toDisplayString as g, createCommentVNode as h, createVNode as w, Transition as y, withCtx as C, withDirectives as k, renderSlot as A, vShow as O } from "vue";
+const S = { class: "spicyAccordion" }, B = ["onClick", "aria-expanded"], I = {
+  key: 0,
+  class: "accordionIcon",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, N = ["d"], V = { class: "spicyAccordionContent" }, D = /* @__PURE__ */ u({
+  __name: "SpicyAccordion",
+  props: {
+    sections: {},
+    singleOpen: { type: Boolean, default: !1 },
+    defaultOpen: {}
+  },
+  setup(p) {
+    const r = p, s = v(r.defaultOpen || []), d = (e) => {
+      if (r.singleOpen)
+        s.value = s.value.includes(e) ? [] : [e];
+      else {
+        const t = s.value.indexOf(e);
+        t === -1 ? s.value.push(e) : s.value.splice(t, 1);
+      }
+    }, l = (e) => s.value.includes(e);
+    return (e, t) => (c(), i("div", S, [
+      (c(!0), i(m, null, _(e.sections, (a, n) => (c(), i("div", {
+        key: n,
+        class: "spicyAccordionItem"
+      }, [
+        o("button", {
+          class: f(["spicyAccordionHeader", { open: l(n) }]),
+          onClick: ($) => d(n),
+          "aria-expanded": l(n)
+        }, [
+          o("span", null, g(a.title), 1),
+          a.icon ? (c(), i("svg", I, [
+            o("path", {
+              d: a.icon
+            }, null, 8, N)
+          ])) : h("", !0),
+          t[0] || (t[0] = o("span", { class: "accordionToggle" }, [
+            o("svg", {
+              class: "accordionArrow",
+              viewBox: "0 0 24 24"
+            }, [
+              o("path", { d: "M7 10l5 5 5-5H7z" })
+            ])
+          ], -1))
+        ], 10, B),
+        w(y, { name: "fade" }, {
+          default: C(() => [
+            k(o("div", V, [
+              A(e.$slots, `section-${n}`)
+            ], 512), [
+              [O, l(n)]
+            ])
+          ]),
+          _: 2
+        }, 1024)
+      ]))), 128))
+    ]));
+  }
+});
+export {
+  D as _
+};

package/dist/lib/SpicyAlert/SpicyAlert.css

@@ -0,0 +1 @@
+.spicyAlert{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:4px}.spicyAlert.info{background-color:#e0e0e0;color:#333}.spicyAlert.success{background-color:#bcf7c9;color:#155724}.spicyAlert.warning{background-color:#fff3cd;color:#856404}.spicyAlert.error{background-color:#ffbdc2;color:#911f2a}.spicyAlertIcon{width:24px;height:24px}.spicyAlertCloseBtn{margin-left:auto;background:none;border:none;cursor:pointer}.spicyAlertCloseBtn svg{width:16px;height:16px}.fade-enter-active,.fade-leave-active{transition:opacity .35s}.fade-enter,.fade-leave-to{opacity:0}

package/dist/lib/SpicyAlert/SpicyAlert.js

@@ -0,0 +1,81 @@
+import { defineComponent as d, ref as p, watch as u, openBlock as t, createBlock as y, Transition as f, withCtx as m, createElementBlock as o, normalizeClass as h, withKeys as k, toDisplayString as n, createCommentVNode as l, createElementVNode as i, renderSlot as w } from "vue";
+const v = ["aria-label"], _ = {
+  key: 0,
+  class: "spicyAlertIcon"
+}, B = {
+  key: 1,
+  class: "spicyAlertIcon",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, C = ["d"], b = {
+  key: 2,
+  class: "spicyAlertText"
+}, g = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, A = ["d"], I = { key: 1 }, T = /* @__PURE__ */ d({
+  __name: "SpicyAlert",
+  props: {
+    variant: { default: "info" },
+    text: {},
+    icon: {},
+    mdi: {},
+    iconOnly: { type: Boolean, default: !1 },
+    closable: { type: Boolean, default: !1 },
+    autoClose: { default: 0 },
+    closeIcon: {}
+  },
+  setup(r) {
+    const c = r, a = p(!0), s = () => {
+      a.value = !1;
+    };
+    return u(
+      () => c.autoClose,
+      (e) => {
+        e && e > 0 && setTimeout(() => {
+          s();
+        }, e);
+      }
+    ), (e, O) => (t(), y(f, { name: "fade" }, {
+      default: m(() => [
+        a.value ? (t(), o("div", {
+          key: 0,
+          class: h(["spicyAlert", e.variant]),
+          "aria-atomic": "true",
+          "aria-label": e.text || "Alert",
+          role: "alert",
+          onKeydown: k(s, ["enter"])
+        }, [
+          e.iconOnly && e.icon ? (t(), o("span", _, n(e.icon), 1)) : l("", !0),
+          e.mdi ? (t(), o("svg", B, [
+            i("path", {
+              fill: "currentColor",
+              class: "spicyAlertMDI",
+              d: e.mdi
+            }, null, 8, C)
+          ])) : l("", !0),
+          !e.iconOnly && e.text ? (t(), o("span", b, n(e.text), 1)) : l("", !0),
+          e.closable ? (t(), o("button", {
+            key: 3,
+            class: "spicyAlertCloseBtn",
+            onClick: s,
+            "aria-label": "Close alert"
+          }, [
+            e.closeIcon ? (t(), o("svg", g, [
+              i("path", {
+                fill: "#000",
+                d: e.closeIcon
+              }, null, 8, A)
+            ])) : (t(), o("span", I, "X"))
+          ])) : l("", !0),
+          e.text ? l("", !0) : w(e.$slots, "default", { key: 4 })
+        ], 42, v)) : l("", !0)
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  T as _
+};

package/dist/lib/SpicyBtn/SpicyBtn.css

@@ -0,0 +1 @@
+.spicyBtn{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 16px;gap:4px;border:none;border-radius:4px;cursor:pointer;color:var(--skTextColor, #ddd);background-color:var(--skBgColor, #28292a);font-size:var(--skFontSize, 16px);font-weight:var(--skFontWeight, 500);transition:background-color .25s}.spicyBtn.outlined{background-color:transparent;border:2px solid var(--skBorderColor, #515353)}.spicyBtn.disabled{opacity:.5;cursor:not-allowed}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor, grey)}.spicyBtn.isRound{border-radius:50px;padding:12px}.spicyBtn.large{padding:12px 24px;font-size:22px}.spicyBtn.large.isRound{padding:16px}.spicyBtn.large .spicyBtnIcon{width:40px}.spicyBtn .spicyBtnIcon{width:30px}

package/dist/lib/SpicyBtn/SpicyBtn.js

@@ -0,0 +1,77 @@
+import { defineComponent as f, computed as s, resolveDirective as C, withDirectives as y, openBlock as t, createElementBlock as i, normalizeClass as h, normalizeStyle as v, createElementVNode as k, createCommentVNode as l, toDisplayString as n, renderSlot as g } from "vue";
+const B = ["disabled", "aria-label", "aria-disabled", "tabindex"], S = {
+  key: 0,
+  class: "spicyBtnIcon",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, z = ["d"], _ = {
+  key: 1,
+  class: "spicyBtnIcon"
+}, w = {
+  key: 2,
+  class: "spicyBtnText"
+}, R = /* @__PURE__ */ f({
+  __name: "SpicyBtn",
+  props: {
+    variant: { default: "filled" },
+    disabled: { type: Boolean, default: !1 },
+    text: {},
+    icon: {},
+    mdi: {},
+    size: {},
+    bgColor: {},
+    textColor: { default: "#ddd" },
+    hoverColor: {},
+    borderColor: {},
+    fontSize: { default: 16 },
+    fontWeight: { default: 500 }
+  },
+  emits: ["click"],
+  setup(a, { emit: d }) {
+    const r = d, c = () => {
+      e.disabled || r("click");
+    }, e = a, p = s(() => ({
+      "--skFontSize": typeof e.fontSize == "number" ? `${e.fontSize}px` : e.fontSize,
+      "--skFontWeight": e.fontWeight,
+      "--skBgColor": e.bgColor,
+      "--skTextColor": e.textColor,
+      "--skBorderColor": e.borderColor,
+      "--hoverColor": e.hoverColor
+    })), u = s(() => !e.text && (e.icon || e.mdi)), b = s(() => ({
+      spicyBtn: !0,
+      outlined: e.variant === "outlined",
+      disabled: e.disabled,
+      isRound: u.value,
+      large: e.size === "large"
+    }));
+    return (o, x) => {
+      const m = C("spicyRipple");
+      return y((t(), i("button", {
+        class: h(b.value),
+        style: v(p.value),
+        disabled: o.disabled,
+        onClick: c,
+        role: "button",
+        "aria-label": o.text,
+        "aria-disabled": o.disabled,
+        tabindex: o.disabled ? -1 : 0
+      }, [
+        o.mdi ? (t(), i("svg", S, [
+          k("path", {
+            fill: "currentColor",
+            class: "spicyBtnMDI",
+            d: o.mdi
+          }, null, 8, z)
+        ])) : l("", !0),
+        o.icon && !o.mdi ? (t(), i("span", _, n(o.icon), 1)) : l("", !0),
+        o.text ? (t(), i("span", w, n(o.text), 1)) : l("", !0),
+        g(o.$slots, "default")
+      ], 14, B)), [
+        [m]
+      ]);
+    };
+  }
+});
+export {
+  R as _
+};

package/dist/lib/SpicyCarousel/SpicyCarousel.css

@@ -0,0 +1 @@
+.spicyCarouselWrapper{position:relative;width:var(--width, 580px);height:var(--height, 360px);padding:30px;display:flex;align-items:center;justify-content:center}.spicyCarouselWrapper .spicyCarouselTitle{position:absolute;top:0;width:var(--width, 580px);background-color:#0009;height:30px;color:#ccc;font-size:18px;font-weight:700}.spicyCarouselWrapper .spicyCarouselContainer{position:relative;overflow:hidden;width:100%;height:100%;border-radius:var(--borderRadius);background-color:#0009}.spicyCarouselWrapper .spicyCarouselSlide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .3s ease}.spicyCarouselWrapper .spicyCarouselTextOverlay{position:absolute;bottom:10px;left:10px;background-color:#000000bf;padding:10px;color:#ccc;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);border-radius:4px}.spicyCarouselWrapper .spicyCarouselTextOverlay.fullScreen{top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;background-color:#0000004d}.spicyCarouselWrapper .spicyCarouselNavControls{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn,.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn{border:none;font-size:24px;color:#ccc;cursor:pointer;background:#0009;height:100%;width:30px;display:flex;align-items:center;justify-content:center;transition:transform .3s;pointer-events:auto;z-index:2}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn:hover,.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn:hover{background:var(--skPrimaryColor)}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn{border-radius:6px 0 0 6px}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn{border-radius:0 6px 6px 0}.spicyCarouselWrapper .spicyCarouselPagination{position:absolute;background:#0009;bottom:0;left:50%;height:30px;width:var(--width, 580px);transform:translate(-50%);display:flex;gap:8px;z-index:2;align-items:center;justify-content:center;pointer-events:auto}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn{border:none;color:#fff;cursor:pointer;background:#00b7ff80;height:26px;width:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn.active{background:var(--activeColor, var(--skPrimaryColor))}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn:hover{background:var(--skPrimaryColor)}.spicyCarouselWrapper .pointCursor{cursor:pointer}.spicyCarouselWrapper .slide-enter-active,.spicyCarouselWrapper .slide-leave-active{transition:opacity .3s}.spicyCarouselWrapper .slide-enter,.spicyCarouselWrapper .slide-leave-to{opacity:0}

package/dist/lib/SpicyCarousel/SpicyCarousel.js

@@ -0,0 +1,131 @@
+import { defineComponent as X, computed as u, ref as Y, onMounted as A, onUnmounted as V, openBlock as o, createElementBlock as n, normalizeStyle as _, createElementVNode as i, createVNode as $, Transition as z, withCtx as E, normalizeClass as y, toDisplayString as h, createCommentVNode as d, renderSlot as D, Fragment as F, renderList as O } from "vue";
+const U = ["aria-label"], W = { class: "spicyCarouselInfoText" }, j = { class: "spicyCarouselTitle" }, q = { key: 0 }, G = {
+  key: 0,
+  class: "spicyCarouselNavControls"
+}, H = {
+  key: 1,
+  class: "spicyCarouselPagination"
+}, J = ["onClick"], K = { class: "spicyCarouselPage" }, Z = /* @__PURE__ */ X({
+  __name: "SpicyCarousel",
+  props: {
+    autoplay: { type: Boolean, default: !1 },
+    autoplaySpeed: { default: 5e3 },
+    showNavigation: { type: Boolean, default: !0 },
+    showPagination: { type: Boolean, default: !0 },
+    activeColor: { default: "var(--skPrimaryColor)" },
+    loop: { type: Boolean, default: !0 },
+    initialSlide: { default: 0 },
+    slides: { default: () => [] },
+    width: { default: "580px" },
+    height: { default: "360px" },
+    fullScreen: { type: Boolean, default: !1 },
+    enableImageClick: { type: Boolean, default: !1 },
+    paginationLimit: { default: 10 }
+  },
+  setup(w) {
+    let f, C, r = !1;
+    const t = w, B = u(() => ({
+      "--width": t.width,
+      "--height": t.height,
+      "--activeColor": t.activeColor
+    })), m = u(() => t.paginationLimit), I = u(() => {
+      var e;
+      return (e = t.slides[l.value]) == null ? void 0 : e.title;
+    }), b = u(() => c.value.fullScreen === !1 ? !1 : t.fullScreen), l = Y(t.initialSlide), c = u(() => t.slides[l.value]);
+    let p;
+    const g = () => {
+      l.value = (l.value - 1 + t.slides.length) % t.slides.length;
+    }, v = () => {
+      l.value = (l.value + 1) % t.slides.length;
+    }, T = (e) => {
+      l.value = e;
+    }, S = () => {
+      p && clearInterval(p);
+    }, k = () => {
+      t.autoplay && (p = window.setInterval(v, t.autoplaySpeed));
+    }, M = () => {
+      window.open(c.value.img);
+    }, P = () => {
+      t.enableImageClick && M();
+    }, N = (e) => {
+      f = e.touches[0].clientX, C = e.touches[0].clientY, r = !1;
+    }, x = (e) => {
+      if (!r) {
+        const a = e.touches[0].clientX - f, s = e.touches[0].clientY - C;
+        Math.abs(a) > Math.abs(s) && (a > 40 ? (g(), r = !0) : a < -40 && (v(), r = !0));
+      }
+    }, L = u(() => {
+      const e = t.slides.length, a = Math.max(0, l.value - Math.floor(m.value / 2)), s = Math.min(e, a + m.value);
+      return [...Array(e).keys()].slice(a, s);
+    });
+    return A(() => {
+      k();
+    }), V(() => {
+      S();
+    }), (e, a) => (o(), n("div", {
+      class: "spicyCarouselWrapper",
+      style: _({ ...B.value })
+    }, [
+      i("div", {
+        class: "spicyCarouselContainer",
+        onMouseenter: S,
+        onMouseleave: k,
+        onTouchstart: N,
+        onTouchmove: x
+      }, [
+        $(z, {
+          name: "slide",
+          mode: "out-in"
+        }, {
+          default: E(() => [
+            (o(), n("div", {
+              class: y(["spicyCarouselSlide", { pointCursor: t.enableImageClick }]),
+              key: l.value,
+              style: _({ backgroundImage: `url(${c.value.img})` }),
+              onClick: P
+            }, [
+              e.slides[l.value].text ? (o(), n("div", {
+                key: 0,
+                class: y(["spicyCarouselTextOverlay", { fullScreen: b.value }]),
+                "aria-label": e.slides[l.value].text
+              }, [
+                i("span", W, h(e.slides[l.value].text), 1)
+              ], 10, U)) : d("", !0),
+              D(e.$slots, "default")
+            ], 6))
+          ]),
+          _: 3
+        })
+      ], 32),
+      i("div", j, [
+        I.value ? (o(), n("h2", q, h(c.value.title), 1)) : d("", !0)
+      ]),
+      e.showNavigation ? (o(), n("div", G, [
+        i("button", {
+          class: "spicyCarouselPrevBtn",
+          onClick: g
+        }, a[0] || (a[0] = [
+          i("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1)
+        ])),
+        i("button", {
+          class: "spicyCarouselNextBtn",
+          onClick: v
+        }, a[1] || (a[1] = [
+          i("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1)
+        ]))
+      ])) : d("", !0),
+      e.showPagination ? (o(), n("div", H, [
+        (o(!0), n(F, null, O(L.value, (s) => (o(), n("button", {
+          key: s,
+          onClick: (Q) => T(s),
+          class: y(["spicyCarouselPageBtn", { active: s === l.value }])
+        }, [
+          i("span", K, h(s + 1), 1)
+        ], 10, J))), 128))
+      ])) : d("", !0)
+    ], 4));
+  }
+});
+export {
+  Z as _
+};

package/dist/lib/SpicyDivider/SpicyDivider.js

@@ -0,0 +1,30 @@
+import { defineComponent as a, computed as t, openBlock as l, createElementBlock as s, normalizeClass as c, normalizeStyle as d, renderSlot as p } from "vue";
+const v = ["aria-orientation"], h = /* @__PURE__ */ a({
+  __name: "SpicyDivider",
+  props: {
+    variant: { default: "solid" },
+    orientation: { default: "horizontal" },
+    length: { default: "100%" },
+    size: { default: "1px" },
+    color: { default: "#5f5f5f" }
+  },
+  setup(r) {
+    const e = r, i = t(() => e.orientation === "vertical" ? "vertical" : "horizontal"), n = t(() => ({
+      [e.orientation === "vertical" ? "height" : "width"]: e.length,
+      border: `${e.size} ${e.variant} ${e.color}`,
+      borderLeft: e.orientation === "vertical" ? `${e.size} ${e.variant} ${e.color}` : "none",
+      borderBottom: e.orientation === "horizontal" ? `${e.size} ${e.variant} ${e.color}` : "none"
+    }));
+    return (o, f) => (l(), s("div", {
+      class: c(["spicyDivider", i.value]),
+      style: d(n.value),
+      role: "separator",
+      "aria-orientation": o.orientation
+    }, [
+      p(o.$slots, "default")
+    ], 14, v));
+  }
+});
+export {
+  h as _
+};

package/dist/lib/SpicyDropdown/SpicyDropdown.css

@@ -0,0 +1 @@
+.spicyDropdown{position:relative;display:inline-block}.spicyDropdownButton{background-color:var(--skBgColor);color:#fff;padding:10px 16px;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center}.spicyDropdownButton .arrow{margin-left:8px;transition:transform .3s ease}.spicyDropdownButton .arrow.open{transform:rotate(180deg)}.dropdownIcon{margin-right:8px}.spicyDropdownMenu{position:absolute;top:100%;background-color:#fff;box-shadow:0 4px 8px #0000001a;z-index:1;padding:10px;border-radius:4px}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter,.fade-leave-to{opacity:0}

package/dist/lib/SpicyDropdown/SpicyDropdown.js

@@ -0,0 +1,68 @@
+import { defineComponent as w, ref as v, computed as r, openBlock as i, createElementBlock as l, normalizeClass as p, createElementVNode as s, createCommentVNode as d, createTextVNode as f, toDisplayString as g, createVNode as m, Transition as y, withCtx as S, normalizeStyle as z, withModifiers as D, renderSlot as k } from "vue";
+const C = ["aria-expanded"], _ = ["width", "height"], x = ["d"], B = ["width", "height"], V = /* @__PURE__ */ w({
+  __name: "SpicyDropdown",
+  props: {
+    label: {},
+    align: { default: "left" },
+    width: { default: "200px" },
+    icon: { default: "" },
+    iconSize: { default: "24px" }
+  },
+  setup(u) {
+    const t = u, e = v(!1), c = () => {
+      e.value = !e.value;
+    }, a = r(() => t.icon || ""), h = r(() => ({
+      width: t.width,
+      [t.align === "right" ? "right" : "left"]: 0,
+      textAlign: t.align
+    }));
+    return (o, n) => (i(), l("div", {
+      class: p(["spicyDropdown", { open: e.value }])
+    }, [
+      s("button", {
+        onClick: c,
+        class: "spicyDropdownButton",
+        "aria-haspopup": "true",
+        "aria-expanded": e.value,
+        "aria-controls": "spicyDropdownMenu"
+      }, [
+        a.value ? (i(), l("svg", {
+          key: 0,
+          width: o.iconSize,
+          height: o.iconSize,
+          viewBox: "0 0 24 24",
+          class: "dropdownIcon"
+        }, [
+          s("path", { d: a.value }, null, 8, x)
+        ], 8, _)) : d("", !0),
+        f(" " + g(o.label) + " ", 1),
+        a.value ? d("", !0) : (i(), l("svg", {
+          key: 1,
+          width: o.iconSize,
+          height: o.iconSize,
+          viewBox: "0 0 24 24",
+          class: p(["arrow", { open: e.value }])
+        }, n[1] || (n[1] = [
+          s("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)
+        ]), 10, B))
+      ], 8, C),
+      m(y, { name: "fade" }, {
+        default: S(() => [
+          e.value ? (i(), l("div", {
+            key: 0,
+            class: "spicyDropdownMenu",
+            style: z(h.value),
+            onClick: n[0] || (n[0] = D((M) => e.value = !1, ["self"])),
+            id: "spicyDropdownMenu"
+          }, [
+            k(o.$slots, "default")
+          ], 4)) : d("", !0)
+        ]),
+        _: 3
+      })
+    ], 2));
+  }
+});
+export {
+  V as _
+};

package/dist/lib/SpicyFileInput/SpicyFileInput.css

@@ -0,0 +1 @@
+.spicyFileInputWrapper{display:flex;flex-direction:column;position:relative;border:2px dashed var(--skBorderColor, #515353);padding:16px;border-radius:8px;width:250px;cursor:pointer}.spicyFileInputWrapper.isDragging{background-color:#0000000d;border-color:var(--skPrimaryColor)}.spicyFileInputLabel{font-size:16px;color:var(--textColor, var(--skTextColor));-webkit-user-select:none;user-select:none;cursor:pointer}.spicyFileInput{display:none}.spicyFilePreview{display:flex;flex-direction:column;gap:4px}.spicyFilePreviewItem{display:flex;justify-content:space-between;align-items:center;padding:8px;border:1px solid var(--skBorderColor, #515353);border-radius:4px;font-size:14px;position:relative;max-width:100%}.spicyFilePreviewItem span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:90%}.removeButton{background:none;border:none;cursor:pointer;color:red;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.removeButtonMDI{width:24px;height:24px}.clearAllButton{background:none;border:none;font-size:16px;margin-top:8px;cursor:pointer;color:var(--skPrimaryColor)}.spicyFileInputError{color:red;font-size:12px;margin-top:8px}

package/dist/lib/SpicyFileInput/SpicyFileInput.js

@@ -0,0 +1,105 @@
+import { defineComponent as B, ref as f, openBlock as a, createElementBlock as t, normalizeClass as _, withModifiers as i, toDisplayString as g, createCommentVNode as u, createElementVNode as h, Fragment as A, renderList as E, renderSlot as L } from "vue";
+const S = ["aria-label"], T = ["multiple", "accept"], W = {
+  key: 1,
+  class: "spicyFilePreview"
+}, $ = ["onClick"], M = ["onClick"], N = ["d"], P = {
+  key: 3,
+  class: "spicyFileInputError"
+}, O = /* @__PURE__ */ B({
+  __name: "SpicyFileInput",
+  props: {
+    modelValue: { default: () => [] },
+    label: { default: "" },
+    error: { default: "" },
+    accept: { default: "" },
+    multiple: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !1 },
+    mdi: { default: "" }
+  },
+  emits: ["update:modelValue", "change", "error"],
+  setup(b, { emit: k }) {
+    const n = k, p = b, l = f(p.modelValue), s = f(null), d = f(!1), C = (e) => {
+      const o = e.target;
+      o.files && (l.value = Array.from(o.files), n("update:modelValue", l.value), n("change", l.value));
+    }, F = () => {
+      l.value = [], n("update:modelValue", l.value), s.value && (s.value.value = "");
+    }, y = (e) => {
+      l.value.splice(e, 1), n("update:modelValue", l.value), l.value.length === 0 && s.value && (s.value.value = "");
+    }, D = () => {
+      var e;
+      (e = s.value) == null || e.click();
+    }, I = () => {
+      d.value = !0;
+    }, V = () => {
+      d.value = !1;
+    }, w = (e) => {
+      var v;
+      const o = (v = e.dataTransfer) == null ? void 0 : v.files;
+      if (o) {
+        const r = Array.from(o).filter((m) => p.accept ? p.accept.split(",").map((c) => c.trim()).some((c) => c.startsWith(".") ? m.name.endsWith(c) : m.type === c) : !0);
+        !p.multiple && r.length > 0 ? l.value = [r[0]] : l.value = r, n("update:modelValue", l.value), n("change", l.value);
+      }
+      d.value = !1;
+    };
+    return (e, o) => (a(), t("div", {
+      class: _(["spicyFileInputWrapper", { hasError: e.error, isDragging: d.value }]),
+      onClick: D,
+      onDragover: i(I, ["prevent"]),
+      onDragleave: i(V, ["prevent"]),
+      onDrop: i(w, ["prevent"])
+    }, [
+      e.label && !l.value.length ? (a(), t("label", {
+        key: 0,
+        class: "spicyFileInputLabel",
+        "aria-label": e.label
+      }, g(e.label), 9, S)) : u("", !0),
+      h("input", {
+        type: "file",
+        multiple: e.multiple,
+        accept: e.accept,
+        class: "spicyFileInput",
+        onChange: C,
+        ref_key: "fileInput",
+        ref: s
+      }, null, 40, T),
+      l.value.length ? (a(), t("div", W, [
+        (a(!0), t(A, null, E(l.value, (v, r) => (a(), t("div", {
+          key: r,
+          class: "spicyFilePreviewItem"
+        }, [
+          h("span", null, g(v.name), 1),
+          e.clearable && !e.mdi ? (a(), t("button", {
+            key: 0,
+            class: "removeButton",
+            onClick: i((m) => y(r), ["stop"]),
+            "aria-label": "Remove"
+          }, " X ", 8, $)) : u("", !0),
+          e.clearable && e.mdi ? (a(), t("svg", {
+            key: 1,
+            class: "removeButtonMDI",
+            onClick: i((m) => y(r), ["stop"]),
+            "aria-label": "Remove",
+            viewBox: "0 0 24 24",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, [
+            h("path", {
+              fill: "red",
+              d: e.mdi
+            }, null, 8, N)
+          ], 8, M)) : u("", !0)
+        ]))), 128))
+      ])) : u("", !0),
+      e.clearable && l.value.length > 1 ? (a(), t("button", {
+        key: 2,
+        class: "clearAllButton",
+        onClick: i(F, ["stop"]),
+        "aria-label": "Clear All"
+      }, " Clear All ")) : u("", !0),
+      L(e.$slots, "default"),
+      e.error ? (a(), t("span", P, g(e.error), 1)) : u("", !0)
+    ], 34));
+  }
+});
+export {
+  O as _
+};

package/dist/lib/SpicyModal/SpicyModal.css

@@ -0,0 +1 @@
+.spicyModalOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.spicyModal{padding:20px;box-shadow:0 0 6px 2px #0003;transition:transform .3s ease-out;font-size:15px;border-radius:var(--skBorderRadius);background-color:var(--skBgColor);z-index:1001}.spicyModalHeader{text-align:center;font-size:20px;font-weight:700}.spicyModalActions{margin-top:20px;text-align:right}.spicyModalActionBtn{background-color:transparent;border:none;color:var(--skTextColor, #ddd);cursor:pointer}.spicyModalActionBtn:hover{text-decoration:underline}