spicykatsu 0.0.55 → 0.4.0

package/README.md

@@ -1,7 +1,83 @@
 # SpicyKatsuLib
 
-Fun, simple library for Vue3. Something for me to play around with in my projects.  
+Fun, simple component library for Vue 3. Built as a personal playground — feel free to use it in your own projects.
 
-Feel free to clone the repo and run the `dev` script. The playground has an example of every component and directive. 
+📖 **[Docs](https://satoru8.gitlab.io/spicykatsuvlib/)**   |   📦 **[npm](https://www.npmjs.com/package/spicykatsu)**
 
-Docs: [SpicyKatsu Docs](https://satoru8.gitlab.io/spicykatsuvlib/)
+---
+
+## Installation
+
+```bash
+npm install spicykatsu
+```
+
+## Usage
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { SpicyKatsu } from 'spicykatsu'
+import 'spicykatsu/dist/style.css'
+
+const app = createApp(App)
+app.use(SpicyKatsu)
+app.mount('#app')
+```
+
+You can also import components individually for tree shaking:
+
+```ts
+import { SpicyBtn, SpicyModal } from 'spicykatsu'
+```
+
+## Options
+
+```ts
+app.use(SpicyKatsu, {
+  useComponents: true,  // Register all components globally (default: true)
+  useStyles: true,      // Inject CSS variables (default: true)
+  useDirectives: true   // Register v-spicyDrag and v-spicyRipple (default: true)
+})
+```
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `SpicyAccordion` | Collapsible sections, single or multi-open |
+| `SpicyAlert` | Dismissible alerts with variants and auto-close |
+| `SpicyBtn` | Button with MDI icon support and ripple effect |
+| `SpicyCarousel` | Image carousel with autoplay, touch, and pagination |
+| `SpicyDialog` | Teleported overlay dialog |
+| `SpicyDivider` | Horizontal or vertical divider |
+| `SpicyDropdown` | Dropdown menu with click-outside close |
+| `SpicyFileInput` | File input with drag-and-drop and multi-file preview |
+| `SpicyModal` | Modal dialog with title, actions, and Escape-to-close |
+| `SpicyProgress` | Linear and circular progress indicators |
+| `SpicySheet` | Styled container/card |
+| `SpicySlider` | Range slider input |
+| `SpicyTabs` | Tabbed interface with scrollable tab bar |
+| `SpicyTextArea` | Styled textarea |
+| `SpicyTextField` | Text input with floating label, prefix, and validation |
+| `SpicyToggle` | Toggle switch |
+| `SpicyTooltip` | Hover tooltip with position control |
+| `SpicyTree` | Recursive tree view |
+
+## Directives
+
+| Directive | Description |
+|-----------|-------------|
+| `v-spicyDrag` | Makes any element draggable (mouse + touch). Accepts `{ axis: 'x' | 'y' }` |
+| `v-spicyRipple` | Adds a Material-style ripple on click/touch |
+
+## Dev / Playground
+
+Clone the repo and run:
+
+```bash
+bun install
+bun run dev
+```
+
+The playground (`src/playground/Playground.vue`) has a live example of every component and directive.

package/dist/lib/SpicyAccordion/SpicyAccordion.css

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

package/dist/lib/SpicyAccordion/SpicyAccordion.js

@@ -1,64 +1,47 @@
-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))
-    ]));
-  }
+import { Fragment as e, Transition as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, renderSlot as d, toDisplayString as f, vShow as p, withCtx as m, withDirectives as h } from "vue";
+//#region src/components/SpicyAccordion/SpicyAccordion.css?inline
+var g = ".spicyAccordion{border:1px solid var(--skBorderColor,#ddd);border-radius:4px;overflow:hidden}.spicyAccordionItem{border-bottom:1px solid var(--skBorderColor,#ddd)}.spicyAccordionItem:last-child{border-bottom:none}.spicyAccordionHeader{background-color:var(--skBgSecondaryColor,#f5f5f5);color:var(--skTextColor,#333);text-align:left;cursor:pointer;border:none;justify-content:space-between;align-items:center;width:100%;padding:10px;transition:background-color .2s;display:flex}.spicyAccordionHeader.open{background-color:var(--skBgColor,#e0e0e0)}.spicyAccordionHeader.open .accordionArrow{transform:rotate(180deg)}.spicyAccordionContent{background-color:var(--skBgColor,#fff);color:var(--skTextColor,#333);padding:10px}.accordionToggle{align-items:center;transition:transform .2s;display:flex}.accordionArrow{width:20px;height:20px;transition:transform .2s}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter-from,.fade-leave-to{opacity:0}", _ = { class: "spicyAccordion" }, v = ["onClick", "aria-expanded"], y = {
+	key: 0,
+	class: "accordionIcon",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, b = ["d"], x = { class: "spicyAccordionContent" }, S = /* @__PURE__ */ o({
+	__name: "SpicyAccordion",
+	props: {
+		sections: {},
+		singleOpen: {
+			type: Boolean,
+			default: !1
+		},
+		defaultOpen: {}
+	},
+	setup(o) {
+		let g = o, S = l(g.defaultOpen || []), C = (e) => {
+			if (g.singleOpen) S.value = S.value.includes(e) ? [] : [e];
+			else {
+				let t = S.value.indexOf(e);
+				t === -1 ? S.value.push(e) : S.value.splice(t, 1);
+			}
+		}, w = (e) => S.value.includes(e);
+		return (l, g) => (c(), r("div", _, [(c(!0), r(e, null, u(o.sections, (e, o) => (c(), r("div", {
+			key: o,
+			class: "spicyAccordionItem"
+		}, [i("button", {
+			class: s(["spicyAccordionHeader", { open: w(o) }]),
+			onClick: (e) => C(o),
+			"aria-expanded": w(o)
+		}, [
+			i("span", null, f(e.title), 1),
+			e.icon ? (c(), r("svg", y, [i("path", { d: e.icon }, null, 8, b)])) : n("", !0),
+			g[0] ||= i("span", { class: "accordionToggle" }, [i("svg", {
+				class: "accordionArrow",
+				viewBox: "0 0 24 24"
+			}, [i("path", { d: "M7 10l5 5 5-5H7z" })])], -1)
+		], 10, v), a(t, { name: "fade" }, {
+			default: m(() => [h(i("div", x, [d(l.$slots, `section-${o}`)], 512), [[p, w(o)]])]),
+			_: 2
+		}, 1024)]))), 128))]));
+	}
 });
-export {
-  D as _
-};
+//#endregion
+export { g as n, S as t };

package/dist/lib/SpicyAlert/SpicyAlert.css

@@ -1 +1 @@
-.spicyAlert{display:flex;align-items:center;gap:10px;padding:12px}.spicyAlert.info{background-color:#e0e0e0;color:#333}.spicyAlert.success{background-color:#a3ffb7;color:#155724}.spicyAlert.warning{background-color:#ffecaf;color:#856404}.spicyAlert.error{background-color:#ffbdc2;color:#911f2a}.spicyAlert.spicyAlertRound{border-radius:8px}.spicyAlertIcon{width:24px;height:24px}.spicyAlertContainer{display:flex;flex-direction:column}.spicyAlertCloseBtn{margin-left:auto;background:none;border:none;cursor:pointer;width:20px;height:20px}.spicyAlertCloseBtn svg{width:20px;height:20px}.fade-enter-active,.fade-leave-active{transition:opacity .35s}.fade-enter,.fade-leave-to{opacity:0}
+.spicyAlert{align-items:center;gap:10px;padding:12px;display:flex}.spicyAlert.info{color:#333;background-color:#e0e0e0}.spicyAlert.success{color:#155724;background-color:#a3ffb7}.spicyAlert.warning{color:#856404;background-color:#ffecaf}.spicyAlert.error{color:#911f2a;background-color:#ffbdc2}.spicyAlert.spicyAlertRound{border-radius:8px}.spicyAlertIcon{width:24px;height:24px}.spicyAlertContainer{flex-direction:column;display:flex}.spicyAlertCloseBtn{cursor:pointer;background:0 0;border:none;width:20px;height:20px;margin-left:auto}.spicyAlertCloseBtn svg{width:20px;height:20px}.fade-enter-active,.fade-leave-active{transition:opacity .35s}.fade-enter-from,.fade-leave-to{opacity:0}

package/dist/lib/SpicyAlert/SpicyAlert.js

@@ -1,89 +1,99 @@
-import { defineComponent as d, ref as p, watch as u, openBlock as t, createBlock as y, Transition as f, withCtx as h, createElementBlock as s, normalizeClass as m, withKeys as k, toDisplayString as n, createCommentVNode as o, createElementVNode as a, renderSlot as v } from "vue";
-const w = ["aria-label"], A = {
-  key: 0,
-  class: "spicyAlertIcon"
-}, _ = {
-  key: 1,
-  class: "spicyAlertIcon",
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg"
-}, B = ["d"], C = { class: "spicyAlertContainer" }, b = {
-  key: 0,
-  class: "spicyAlertTitle"
-}, g = {
-  key: 1,
-  class: "spicyAlertText"
-}, I = {
-  key: 0,
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg"
-}, T = ["d"], O = { key: 1 }, V = /* @__PURE__ */ d({
-  __name: "SpicyAlert",
-  props: {
-    variant: { default: "info" },
-    title: {},
-    text: {},
-    icon: {},
-    mdi: {},
-    iconOnly: { type: Boolean, default: !1 },
-    closable: { type: Boolean, default: !1 },
-    autoClose: { default: 0 },
-    closeIcon: {},
-    isRound: { type: Boolean, default: !1 }
-  },
-  setup(r) {
-    const c = r, i = p(!0), l = () => {
-      i.value = !1;
-    };
-    return u(
-      () => c.autoClose,
-      (e) => {
-        e && e > 0 && setTimeout(() => {
-          l();
-        }, e);
-      }
-    ), (e, R) => (t(), y(f, { name: "fade" }, {
-      default: h(() => [
-        i.value ? (t(), s("div", {
-          key: 0,
-          class: m(["spicyAlert", [e.variant, { spicyAlertRound: e.isRound }]]),
-          "aria-atomic": "true",
-          "aria-label": e.text || "Alert",
-          role: "alert",
-          onKeydown: k(l, ["enter"])
-        }, [
-          e.iconOnly && e.icon ? (t(), s("span", A, n(e.icon), 1)) : o("", !0),
-          e.mdi ? (t(), s("svg", _, [
-            a("path", {
-              fill: "currentColor",
-              class: "spicyAlertMDI",
-              d: e.mdi
-            }, null, 8, B)
-          ])) : o("", !0),
-          a("div", C, [
-            e.title ? (t(), s("span", b, n(e.title), 1)) : o("", !0),
-            !e.iconOnly && e.text ? (t(), s("span", g, n(e.text), 1)) : o("", !0)
-          ]),
-          e.closable ? (t(), s("button", {
-            key: 2,
-            class: "spicyAlertCloseBtn",
-            onClick: l,
-            "aria-label": "Close alert"
-          }, [
-            e.closeIcon ? (t(), s("svg", I, [
-              a("path", {
-                fill: "#000",
-                d: e.closeIcon
-              }, null, 8, T)
-            ])) : (t(), s("span", O, "X"))
-          ])) : o("", !0),
-          e.text ? o("", !0) : v(e.$slots, "default", { key: 3 })
-        ], 42, w)) : o("", !0)
-      ]),
-      _: 3
-    }));
-  }
+import { Transition as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, onBeforeUnmount as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d, watch as f, withCtx as p, withKeys as m } from "vue";
+//#region src/components/SpicyAlert/SpicyAlert.css?inline
+var h = ".spicyAlert{align-items:center;gap:10px;padding:12px;display:flex}.spicyAlert.info{color:#333;background-color:#e0e0e0}.spicyAlert.success{color:#155724;background-color:#a3ffb7}.spicyAlert.warning{color:#856404;background-color:#ffecaf}.spicyAlert.error{color:#911f2a;background-color:#ffbdc2}.spicyAlert.spicyAlertRound{border-radius:8px}.spicyAlertIcon{width:24px;height:24px}.spicyAlertContainer{flex-direction:column;display:flex}.spicyAlertCloseBtn{cursor:pointer;background:0 0;border:none;width:20px;height:20px;margin-left:auto}.spicyAlertCloseBtn svg{width:20px;height:20px}.fade-enter-active,.fade-leave-active{transition:opacity .35s}.fade-enter-from,.fade-leave-to{opacity:0}", g = ["aria-label"], _ = {
+	key: 0,
+	class: "spicyAlertIcon"
+}, v = {
+	key: 1,
+	class: "spicyAlertIcon",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, y = ["d"], b = { class: "spicyAlertContainer" }, x = {
+	key: 0,
+	class: "spicyAlertTitle"
+}, S = {
+	key: 1,
+	class: "spicyAlertText"
+}, C = {
+	key: 0,
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, w = ["d"], T = { key: 1 }, E = /* @__PURE__ */ a({
+	__name: "SpicyAlert",
+	props: {
+		variant: { default: "info" },
+		title: {},
+		text: {},
+		icon: {},
+		mdi: {},
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		closable: {
+			type: Boolean,
+			default: !1
+		},
+		autoClose: { default: 0 },
+		closeIcon: {},
+		isRound: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(a) {
+		let h = a, E = l(!0), D = null, O = l(h.autoClose), k = null, A = () => {
+			E.value = !1;
+		}, j = () => {
+			O.value > 0 && (k = Date.now(), D = setTimeout(() => {
+				A();
+			}, O.value));
+		}, M = () => {
+			D &&= (clearTimeout(D), null);
+		}, N = () => {
+			if (D && k !== null) {
+				let e = Date.now() - k;
+				O.value = Math.max(0, O.value - e), M(), k = null;
+			}
+		}, P = () => {
+			j();
+		};
+		return f(() => h.autoClose, (e) => {
+			O.value = e, M(), j();
+		}), s(() => {
+			M();
+		}), j(), (s, l) => (c(), t(e, { name: "fade" }, {
+			default: p(() => [E.value ? (c(), r("div", {
+				key: 0,
+				class: o(["spicyAlert", [a.variant, { spicyAlertRound: a.isRound }]]),
+				"aria-atomic": "true",
+				"aria-label": a.text || "Alert",
+				role: "alert",
+				onKeydown: m(A, ["enter"]),
+				onMouseenter: N,
+				onMouseleave: P
+			}, [
+				a.iconOnly && a.icon ? (c(), r("span", _, d(a.icon), 1)) : n("", !0),
+				a.mdi ? (c(), r("svg", v, [i("path", {
+					fill: "currentColor",
+					class: "spicyAlertMDI",
+					d: a.mdi
+				}, null, 8, y)])) : n("", !0),
+				i("div", b, [a.title ? (c(), r("span", x, d(a.title), 1)) : n("", !0), !a.iconOnly && a.text ? (c(), r("span", S, d(a.text), 1)) : n("", !0)]),
+				a.closable ? (c(), r("button", {
+					key: 2,
+					class: "spicyAlertCloseBtn",
+					onClick: A,
+					"aria-label": "Close alert"
+				}, [a.closeIcon ? (c(), r("svg", C, [i("path", {
+					fill: "#000",
+					d: a.closeIcon
+				}, null, 8, w)])) : (c(), r("span", T, "X"))])) : n("", !0),
+				a.text ? n("", !0) : u(s.$slots, "default", { key: 3 })
+			], 42, g)) : n("", !0)]),
+			_: 3
+		}));
+	}
 });
-export {
-  V as _
-};
+//#endregion
+export { h as n, E as t };

package/dist/lib/SpicyBtn/SpicyBtn.css

@@ -1 +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:.3;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}
+.spicyBtn{text-align:center;cursor:pointer;color:var(--skTextColor,#ddd);background-color:var(--skBgColor,#28292a);font-size:var(--skFontSize,16px);font-weight:var(--skFontWeight,500);-webkit-user-select:none;user-select:none;border:none;border-radius:4px;justify-content:center;align-items:center;gap:4px;padding:8px 16px;display:flex}.spicyBtn.outlined{border:2px solid var(--skBorderColor,#515353);background-color:#0000}.spicyBtn.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor,grey)}.spicyBtn:focus-visible{outline:2px solid var(--skTextColor,#ddd);outline-offset:2px}.spicyBtn.isRound{border-radius:50px;padding:12px}.spicyBtn.large{font-size:calc(var(--skFontSize,16px) * 1.2);padding:12px 24px}.spicyBtn.large.isRound{padding:16px}.spicyBtn.large .spicyBtnIcon{width:32px;height:32px}.spicyBtn.small{font-size:calc(var(--skFontSize,16px) * .85);padding:4px 12px}.spicyBtn.small.isRound{padding:8px}.spicyBtn.small .spicyBtnIcon{width:18px;height:18px}.spicyBtn .spicyBtnIcon{justify-content:center;align-items:center;width:22px;height:22px;display:flex}

package/dist/lib/SpicyBtn/SpicyBtn.js

@@ -1,77 +1,81 @@
-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]
-      ]);
-    };
-  }
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderSlot as c, resolveDirective as l, toDisplayString as u, withDirectives as d } from "vue";
+//#region src/components/SpicyBtn/SpicyBtn.css?inline
+var f = ".spicyBtn{text-align:center;cursor:pointer;color:var(--skTextColor,#ddd);background-color:var(--skBgColor,#28292a);font-size:var(--skFontSize,16px);font-weight:var(--skFontWeight,500);-webkit-user-select:none;user-select:none;border:none;border-radius:4px;justify-content:center;align-items:center;gap:4px;padding:8px 16px;display:flex}.spicyBtn.outlined{border:2px solid var(--skBorderColor,#515353);background-color:#0000}.spicyBtn.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor,grey)}.spicyBtn:focus-visible{outline:2px solid var(--skTextColor,#ddd);outline-offset:2px}.spicyBtn.isRound{border-radius:50px;padding:12px}.spicyBtn.large{font-size:calc(var(--skFontSize,16px) * 1.2);padding:12px 24px}.spicyBtn.large.isRound{padding:16px}.spicyBtn.large .spicyBtnIcon{width:32px;height:32px}.spicyBtn.small{font-size:calc(var(--skFontSize,16px) * .85);padding:4px 12px}.spicyBtn.small.isRound{padding:8px}.spicyBtn.small .spicyBtnIcon{width:18px;height:18px}.spicyBtn .spicyBtnIcon{justify-content:center;align-items:center;width:22px;height:22px;display:flex}", p = [
+	"disabled",
+	"aria-label",
+	"aria-disabled",
+	"tabindex"
+], m = {
+	key: 0,
+	class: "spicyBtnIcon",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, h = ["d"], g = {
+	key: 1,
+	class: "spicyBtnIcon"
+}, _ = {
+	key: 2,
+	class: "spicyBtnText"
+}, v = /* @__PURE__ */ i({
+	__name: "SpicyBtn",
+	props: {
+		variant: { default: "filled" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		text: {},
+		icon: {},
+		mdi: {},
+		size: { default: "default" },
+		bgColor: {},
+		textColor: { default: "#ddd" },
+		hoverColor: {},
+		borderColor: {},
+		fontSize: { default: 16 },
+		fontWeight: { default: 500 },
+		ariaLabel: {}
+	},
+	emits: ["click"],
+	setup(i, { emit: f }) {
+		let v = f, y = (e) => {
+			b.disabled || v("click", e);
+		}, b = i, x = e(() => b.ariaLabel || b.text || "Button"), S = e(() => ({
+			"--skFontSize": typeof b.fontSize == "number" ? `${b.fontSize}px` : b.fontSize,
+			"--skFontWeight": b.fontWeight,
+			"--skBgColor": b.bgColor,
+			"--skTextColor": b.textColor,
+			"--skBorderColor": b.borderColor,
+			"--hoverColor": b.hoverColor
+		})), C = e(() => !b.text && (b.icon || b.mdi)), w = e(() => ({
+			spicyBtn: !0,
+			outlined: b.variant === "outlined",
+			disabled: b.disabled,
+			isRound: C.value,
+			[b.size]: b.size !== "default"
+		}));
+		return (e, f) => {
+			let v = l("spicyRipple");
+			return d((s(), n("button", {
+				class: a(w.value),
+				style: o(S.value),
+				disabled: i.disabled,
+				onClick: y,
+				role: "button",
+				"aria-label": x.value,
+				"aria-disabled": i.disabled,
+				tabindex: i.disabled ? -1 : 0
+			}, [
+				i.mdi ? (s(), n("svg", m, [r("path", {
+					fill: "currentColor",
+					class: "spicyBtnMDI",
+					d: i.mdi
+				}, null, 8, h)])) : i.icon ? (s(), n("span", g, u(i.icon), 1)) : t("", !0),
+				i.text ? (s(), n("span", _, u(i.text), 1)) : t("", !0),
+				c(e.$slots, "default")
+			], 14, p)), [[v]]);
+		};
+	}
 });
-export {
-  R as _
-};
+//#endregion
+export { f as n, v as t };

package/dist/lib/SpicyCarousel/SpicyCarousel.css

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