spicykatsu 0.3.0 → 0.4.0

package/README.md

@@ -68,7 +68,7 @@ app.use(SpicyKatsu, {
 
 | Directive | Description |
 |-----------|-------------|
-| `v-spicyDrag` | Makes any element draggable (mouse + touch). Accepts `{ axis: 'x' \| 'y' }` |
+| `v-spicyDrag` | Makes any element draggable (mouse + touch). Accepts `{ axis: 'x' | 'y' }` |
 | `v-spicyRipple` | Adds a Material-style ripple on click/touch |
 
 ## Dev / Playground

package/dist/lib/SpicyAccordion/SpicyAccordion.js

@@ -1,11 +1,11 @@
 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.vue?vue&type=script&setup=true&lang.ts
-var g = { class: "spicyAccordion" }, _ = ["onClick", "aria-expanded"], v = {
+//#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"
-}, y = ["d"], b = { class: "spicyAccordionContent" }, x = /* @__PURE__ */ o({
+}, b = ["d"], x = { class: "spicyAccordionContent" }, S = /* @__PURE__ */ o({
 	__name: "SpicyAccordion",
 	props: {
 		sections: {},
@@ -16,14 +16,14 @@ var g = { class: "spicyAccordion" }, _ = ["onClick", "aria-expanded"], v = {
 		defaultOpen: {}
 	},
 	setup(o) {
-		let x = o, S = l(x.defaultOpen || []), C = (e) => {
-			if (x.singleOpen) S.value = S.value.includes(e) ? [] : [e];
+		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, x) => (c(), r("div", g, [(c(!0), r(e, null, u(o.sections, (e, o) => (c(), r("div", {
+		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", {
@@ -32,16 +32,16 @@ var g = { class: "spicyAccordion" }, _ = ["onClick", "aria-expanded"], v = {
 			"aria-expanded": w(o)
 		}, [
 			i("span", null, f(e.title), 1),
-			e.icon ? (c(), r("svg", v, [i("path", { d: e.icon }, null, 8, y)])) : n("", !0),
-			x[0] ||= i("span", { class: "accordionToggle" }, [i("svg", {
+			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, _), a(t, { name: "fade" }, {
-			default: m(() => [h(i("div", b, [d(l.$slots, `section-${o}`)], 512), [[p, w(o)]])]),
+		], 10, v), a(t, { name: "fade" }, {
+			default: m(() => [h(i("div", x, [d(l.$slots, `section-${o}`)], 512), [[p, w(o)]])]),
 			_: 2
 		}, 1024)]))), 128))]));
 	}
 });
 //#endregion
-export { x as t };
+export { g as n, S as t };

package/dist/lib/SpicyAlert/SpicyAlert.js

@@ -1,24 +1,24 @@
 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.vue?vue&type=script&setup=true&lang.ts
-var h = ["aria-label"], g = {
+//#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"
-}, v = ["d"], y = { class: "spicyAlertContainer" }, b = {
+}, y = ["d"], b = { class: "spicyAlertContainer" }, x = {
 	key: 0,
 	class: "spicyAlertTitle"
-}, x = {
+}, S = {
 	key: 1,
 	class: "spicyAlertText"
-}, S = {
+}, C = {
 	key: 0,
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg"
-}, C = ["d"], w = { key: 1 }, T = /* @__PURE__ */ a({
+}, w = ["d"], T = { key: 1 }, E = /* @__PURE__ */ a({
 	__name: "SpicyAlert",
 	props: {
 		variant: { default: "info" },
@@ -42,7 +42,7 @@ var h = ["aria-label"], g = {
 		}
 	},
 	setup(a) {
-		let T = a, E = l(!0), D = null, O = l(T.autoClose), k = null, 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(() => {
@@ -58,7 +58,7 @@ var h = ["aria-label"], g = {
 		}, P = () => {
 			j();
 		};
-		return f(() => T.autoClose, (e) => {
+		return f(() => h.autoClose, (e) => {
 			O.value = e, M(), j();
 		}), s(() => {
 			M();
@@ -73,27 +73,27 @@ var h = ["aria-label"], g = {
 				onMouseenter: N,
 				onMouseleave: P
 			}, [
-				a.iconOnly && a.icon ? (c(), r("span", g, d(a.icon), 1)) : n("", !0),
-				a.mdi ? (c(), r("svg", _, [i("path", {
+				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, v)])) : n("", !0),
-				i("div", y, [a.title ? (c(), r("span", b, d(a.title), 1)) : n("", !0), !a.iconOnly && a.text ? (c(), r("span", x, d(a.text), 1)) : n("", !0)]),
+				}, 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", S, [i("path", {
+				}, [a.closeIcon ? (c(), r("svg", C, [i("path", {
 					fill: "#000",
 					d: a.closeIcon
-				}, null, 8, C)])) : (c(), r("span", w, "X"))])) : n("", !0),
+				}, null, 8, w)])) : (c(), r("span", T, "X"))])) : n("", !0),
 				a.text ? n("", !0) : u(s.$slots, "default", { key: 3 })
-			], 42, h)) : n("", !0)]),
+			], 42, g)) : n("", !0)]),
 			_: 3
 		}));
 	}
 });
 //#endregion
-export { T as t };
+export { h as n, E as t };

package/dist/lib/SpicyBtn/SpicyBtn.js

@@ -1,22 +1,22 @@
 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.vue?vue&type=script&setup=true&lang.ts
-var f = [
+//#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"
-], p = {
+], m = {
 	key: 0,
 	class: "spicyBtnIcon",
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg"
-}, m = ["d"], h = {
+}, h = ["d"], g = {
 	key: 1,
 	class: "spicyBtnIcon"
-}, g = {
+}, _ = {
 	key: 2,
 	class: "spicyBtnText"
-}, _ = /* @__PURE__ */ i({
+}, v = /* @__PURE__ */ i({
 	__name: "SpicyBtn",
 	props: {
 		variant: { default: "filled" },
@@ -37,8 +37,8 @@ var f = [
 		ariaLabel: {}
 	},
 	emits: ["click"],
-	setup(i, { emit: _ }) {
-		let v = _, y = (e) => {
+	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,
@@ -54,7 +54,7 @@ var f = [
 			isRound: C.value,
 			[b.size]: b.size !== "default"
 		}));
-		return (e, _) => {
+		return (e, f) => {
 			let v = l("spicyRipple");
 			return d((s(), n("button", {
 				class: a(w.value),
@@ -66,16 +66,16 @@ var f = [
 				"aria-disabled": i.disabled,
 				tabindex: i.disabled ? -1 : 0
 			}, [
-				i.mdi ? (s(), n("svg", p, [r("path", {
+				i.mdi ? (s(), n("svg", m, [r("path", {
 					fill: "currentColor",
 					class: "spicyBtnMDI",
 					d: i.mdi
-				}, null, 8, m)])) : i.icon ? (s(), n("span", h, u(i.icon), 1)) : t("", !0),
-				i.text ? (s(), n("span", g, u(i.text), 1)) : t("", !0),
+				}, 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, f)), [[v]]);
+			], 14, p)), [[v]]);
 		};
 	}
 });
 //#endregion
-export { _ as t };
+export { f as n, v as t };

package/dist/lib/SpicyCarousel/SpicyCarousel.js

@@ -1,12 +1,12 @@
 import { Fragment as e, Transition as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, onMounted as u, onUnmounted as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, withCtx as _ } from "vue";
-//#region src/components/SpicyCarousel.vue?vue&type=script&setup=true&lang.ts
-var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "spicyCarouselTitle" }, x = { key: 0 }, S = {
+//#region src/components/SpicyCarousel/SpicyCarousel.css?inline
+var v = ".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}", y = ["aria-label"], b = { class: "spicyCarouselInfoText" }, x = { class: "spicyCarouselTitle" }, S = { key: 0 }, C = {
 	key: 0,
 	class: "spicyCarouselNavControls"
-}, C = {
+}, w = {
 	key: 1,
 	class: "spicyCarouselPagination"
-}, w = ["onClick"], T = { class: "spicyCarouselPage" }, E = /* @__PURE__ */ s({
+}, T = ["onClick"], E = { class: "spicyCarouselPage" }, D = /* @__PURE__ */ s({
 	__name: "SpicyCarousel",
 	props: {
 		autoplay: {
@@ -42,7 +42,7 @@ var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "sp
 		paginationLimit: { default: 10 }
 	},
 	setup(s) {
-		let E, D, O = !1, k = s, A = n(() => ({
+		let v, D, O = !1, k = s, A = n(() => ({
 			"--width": k.width,
 			"--height": k.height,
 			"--activeColor": k.activeColor
@@ -61,10 +61,10 @@ var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "sp
 		}, U = () => {
 			k.enableImageClick && H();
 		}, W = (e) => {
-			E = e.touches[0].clientX, D = e.touches[0].clientY, O = !1;
+			v = e.touches[0].clientX, D = e.touches[0].clientY, O = !1;
 		}, G = (e) => {
 			if (!O) {
-				let t = e.touches[0].clientX - E, n = e.touches[0].clientY - D;
+				let t = e.touches[0].clientX - v, n = e.touches[0].clientY - D;
 				Math.abs(t) > Math.abs(n) && (t > 40 ? (L(), O = !0) : t < -40 && (R(), O = !0));
 			}
 		}, K = n(() => {
@@ -98,24 +98,24 @@ var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "sp
 					key: 0,
 					class: c(["spicyCarouselTextOverlay", { fullScreen: N.value }]),
 					"aria-label": s.slides[P.value].text
-				}, [a("span", y, g(s.slides[P.value].text), 1)], 10, v)) : r("", !0), h(n.$slots, "default")], 6))]),
+				}, [a("span", b, g(s.slides[P.value].text), 1)], 10, y)) : r("", !0), h(n.$slots, "default")], 6))]),
 				_: 3
 			})], 32),
-			a("div", b, [M.value ? (f(), i("h2", x, g(F.value.title), 1)) : r("", !0)]),
-			s.showNavigation ? (f(), i("div", S, [a("button", {
+			a("div", x, [M.value ? (f(), i("h2", S, g(F.value.title), 1)) : r("", !0)]),
+			s.showNavigation ? (f(), i("div", C, [a("button", {
 				class: "spicyCarouselPrevBtn",
 				onClick: L
 			}, [...u[0] ||= [a("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1)]]), a("button", {
 				class: "spicyCarouselNextBtn",
 				onClick: R
 			}, [...u[1] ||= [a("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1)]])])) : r("", !0),
-			s.showPagination ? (f(), i("div", C, [(f(!0), i(e, null, m(K.value, (e) => (f(), i("button", {
+			s.showPagination ? (f(), i("div", w, [(f(!0), i(e, null, m(K.value, (e) => (f(), i("button", {
 				key: e,
 				onClick: (t) => z(e),
 				class: c(["spicyCarouselPageBtn", { active: e === P.value }])
-			}, [a("span", T, g(e + 1), 1)], 10, w))), 128))])) : r("", !0)
+			}, [a("span", E, g(e + 1), 1)], 10, T))), 128))])) : r("", !0)
 		], 4));
 	}
 });
 //#endregion
-export { E as t };
+export { v as n, D as t };

package/dist/lib/SpicyDialog/SpicyDialog.js

@@ -1,7 +1,6 @@
 import { Teleport as e, Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeStyle as c, openBlock as l, renderSlot as u, watch as d, withCtx as f, withModifiers as p } from "vue";
-//#endregion
-//#region src/components/SpicyDialog.vue
-var m = /* @__PURE__ */ s({
+//#region src/components/SpicyDialog/SpicyDialog.css?inline
+var m = ".spicyDialogOverlay{z-index:2000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.spicyDialog{border-radius:8px;width:100%;padding:16px}.dialog-fade-enter-active,.dialog-fade-leave-active{transition:opacity .3s}.dialog-fade-enter-from,.dialog-fade-leave-to{opacity:0}", h = /* @__PURE__ */ s({
 	__name: "SpicyDialog",
 	props: {
 		modelValue: Boolean,
@@ -42,4 +41,4 @@ var m = /* @__PURE__ */ s({
 	}
 });
 //#endregion
-export { m as t };
+export { m as n, h as t };

package/dist/lib/SpicyDivider/SpicyDivider.js

@@ -1,5 +1,5 @@
 import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, renderSlot as o } from "vue";
-//#region src/components/SpicyDivider.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/SpicyDivider/SpicyDivider.vue?vue&type=script&setup=true&lang.ts
 var s = ["aria-orientation"], c = /* @__PURE__ */ n({
 	__name: "SpicyDivider",
 	props: {

package/dist/lib/SpicyDropdown/SpicyDropdown.js

@@ -1,6 +1,6 @@
 import { Transition as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, onMounted as u, onUnmounted as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, withCtx as g, withModifiers as _ } from "vue";
-//#region src/components/SpicyDropdown.vue?vue&type=script&setup=true&lang.ts
-var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "height"], S = /* @__PURE__ */ s({
+//#region src/components/SpicyDropdown/SpicyDropdown.css?inline
+var v = ".spicyDropdown{display:inline-block;position:relative}.spicyDropdownButton{background-color:var(--skBgColor);color:#fff;cursor:pointer;border:none;align-items:center;padding:10px 16px;font-size:16px;display:flex}.spicyDropdownButton .arrow{margin-left:8px;transition:transform .3s}.spicyDropdownButton .arrow.open{transform:rotate(180deg)}.dropdownIcon{margin-right:8px}.spicyDropdownMenu{z-index:1;background-color:#fff;border-radius:4px;padding:10px;position:absolute;top:100%;box-shadow:0 4px 8px #0000001a}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter-from,.fade-leave-to{opacity:0}", y = ["aria-expanded"], b = ["width", "height"], x = ["d"], S = ["width", "height"], C = /* @__PURE__ */ s({
 	__name: "SpicyDropdown",
 	props: {
 		label: {},
@@ -10,16 +10,16 @@ var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "he
 		iconSize: { default: "24px" }
 	},
 	setup(s) {
-		let S = s, C = p(!1), w = p(null), T = () => {
+		let v = s, C = p(!1), w = p(null), T = () => {
 			C.value = !C.value;
 		}, E = (e) => {
 			w.value && !w.value.contains(e.target) && (C.value = !1);
 		};
 		u(() => document.addEventListener("click", E)), d(() => document.removeEventListener("click", E));
-		let D = t(() => S.icon || ""), O = t(() => ({
-			width: S.width,
-			[S.align === "right" ? "right" : "left"]: 0,
-			textAlign: S.align
+		let D = t(() => v.icon || ""), O = t(() => ({
+			width: v.width,
+			[v.align === "right" ? "right" : "left"]: 0,
+			textAlign: v.align
 		}));
 		return (t, u) => (f(), r("div", {
 			ref_key: "dropdownRef",
@@ -38,7 +38,7 @@ var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "he
 				height: s.iconSize,
 				viewBox: "0 0 24 24",
 				class: "dropdownIcon"
-			}, [i("path", { d: D.value }, null, 8, b)], 8, y)) : n("", !0),
+			}, [i("path", { d: D.value }, null, 8, x)], 8, b)) : n("", !0),
 			a(" " + h(s.label) + " ", 1),
 			D.value ? n("", !0) : (f(), r("svg", {
 				key: 1,
@@ -46,8 +46,8 @@ var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "he
 				height: s.iconSize,
 				viewBox: "0 0 24 24",
 				class: c(["arrow", { open: C.value }])
-			}, [...u[1] ||= [i("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)]], 10, x))
-		], 8, v), o(e, { name: "fade" }, {
+			}, [...u[1] ||= [i("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)]], 10, S))
+		], 8, y), o(e, { name: "fade" }, {
 			default: g(() => [C.value ? (f(), r("div", {
 				key: 0,
 				class: "spicyDropdownMenu",
@@ -60,4 +60,4 @@ var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "he
 	}
 });
 //#endregion
-export { S as t };
+export { v as n, C as t };

package/dist/lib/SpicyFileInput/SpicyFileInput.js

@@ -1,16 +1,16 @@
 import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, ref as s, renderList as c, renderSlot as l, toDisplayString as u, withModifiers as d } from "vue";
-//#region src/components/SpicyFileInput.vue?vue&type=script&setup=true&lang.ts
-var f = ["aria-label"], p = [
+//#region src/components/SpicyFileInput/SpicyFileInput.css?inline
+var f = ".spicyFileInputWrapper{cursor:pointer;border-width:2px;border-radius:8px;flex-direction:column;max-width:100%;display:flex;position:relative}.spicyFileInputWrapper.isDragging{border-color:var(--skPrimaryColor);background-color:#0000000d}.spicyFileInputWrapper.disabled{pointer-events:none;opacity:.3;cursor:not-allowed}.spicyFileInputWrapper.hasError{border-color:red}.spicyFileInputWrapper.solid{border-style:solid}.spicyFileInputWrapper.dashed{border-style:dashed}.spicyFileInputWrapper.plain{border-style:none}.spicyFileInputLabel{color:var(--skTextColor,#ddd);-webkit-user-select:none;user-select:none;cursor:pointer;margin:8px;padding:8px;font-size:16px}.spicyFileInput{display:none}.spicyFilePreviewItem{color:var(--skTextColor);border:1px solid var(--skBorderColor);border-radius:4px;justify-content:space-between;align-items:center;margin:8px;padding:8px;display:flex;position:relative}.spicyFilePreviewItem:hover{border-color:var(--skPrimaryColor)}.spicyFilePreviewItem span{white-space:nowrap;text-overflow:ellipsis;max-width:90%;overflow:hidden}.removeButton{cursor:pointer;color:red;background:0 0;border:none;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.removeButtonMDI{width:24px;height:24px}.clearAllButton{cursor:pointer;color:var(--skPrimaryColor);background:0 0;border:none;margin-top:8px;font-size:16px}.spicyFileInputError{color:red;margin-top:8px;font-size:12px}", p = ["aria-label"], m = [
 	"multiple",
 	"accept",
 	"disabled"
-], m = {
+], h = {
 	key: 1,
 	class: "spicyFilePreview"
-}, h = { class: "spicyFilePreviewName" }, g = ["onClick"], _ = ["onClick"], v = ["d"], y = {
+}, g = { class: "spicyFilePreviewName" }, _ = ["onClick"], v = ["onClick"], y = ["d"], b = {
 	key: 3,
 	class: "spicyFileInputError"
-}, b = /* @__PURE__ */ i({
+}, x = /* @__PURE__ */ i({
 	__name: "SpicyFileInput",
 	props: {
 		modelValue: { default: () => [] },
@@ -37,8 +37,8 @@ var f = ["aria-label"], p = [
 		"change",
 		"error"
 	],
-	setup(i, { emit: b }) {
-		let x = b, S = i, C = s(S.modelValue), w = s(null), T = s(!1), E = (e) => {
+	setup(i, { emit: f }) {
+		let x = f, S = i, C = s(S.modelValue), w = s(null), T = s(!1), E = (e) => {
 			let t = e.target;
 			t.files && (C.value = Array.from(t.files), x("update:modelValue", C.value), x("change", C.value));
 		}, D = () => {
@@ -61,7 +61,7 @@ var f = ["aria-label"], p = [
 				T.value = !1;
 			}
 		};
-		return (s, b) => (o(), n("div", {
+		return (s, f) => (o(), n("div", {
 			class: a(["spicyFileInputWrapper", [{
 				hasError: i.error,
 				isDragging: T.value,
@@ -77,7 +77,7 @@ var f = ["aria-label"], p = [
 				key: 0,
 				class: "spicyFileInputLabel",
 				"aria-label": i.label
-			}, u(i.label), 9, f)) : t("", !0),
+			}, u(i.label), 9, p)) : t("", !0),
 			r("input", {
 				type: "file",
 				multiple: i.multiple,
@@ -87,18 +87,18 @@ var f = ["aria-label"], p = [
 				ref_key: "fileInput",
 				ref: w,
 				disabled: i.disabled
-			}, null, 40, p),
-			C.value.length ? (o(), n("div", m, [(o(!0), n(e, null, c(C.value, (e, a) => (o(), n("div", {
+			}, null, 40, m),
+			C.value.length ? (o(), n("div", h, [(o(!0), n(e, null, c(C.value, (e, a) => (o(), n("div", {
 				key: a,
 				class: "spicyFilePreviewItem"
 			}, [
-				r("span", h, u(e.name), 1),
+				r("span", g, u(e.name), 1),
 				i.clearable && !i.mdi && !i.disabled ? (o(), n("button", {
 					key: 0,
 					class: "removeButton",
 					onClick: d((e) => O(a), ["stop"]),
 					"aria-label": "Remove"
-				}, " X ", 8, g)) : t("", !0),
+				}, " X ", 8, _)) : t("", !0),
 				i.clearable && i.mdi && !i.disabled ? (o(), n("svg", {
 					key: 1,
 					class: "removeButtonMDI",
@@ -109,7 +109,7 @@ var f = ["aria-label"], p = [
 				}, [r("path", {
 					fill: "red",
 					d: i.mdi
-				}, null, 8, v)], 8, _)) : t("", !0)
+				}, null, 8, y)], 8, v)) : t("", !0)
 			]))), 128))])) : t("", !0),
 			i.clearable && C.value.length > 1 && !i.disabled ? (o(), n("button", {
 				key: 2,
@@ -118,9 +118,9 @@ var f = ["aria-label"], p = [
 				"aria-label": "Clear All"
 			}, " Clear All ")) : t("", !0),
 			l(s.$slots, "default"),
-			i.error ? (o(), n("span", y, u(i.error), 1)) : t("", !0)
+			i.error ? (o(), n("span", b, u(i.error), 1)) : t("", !0)
 		], 34));
 	}
 });
 //#endregion
-export { b as t };
+export { f as n, x as t };

package/dist/lib/SpicyModal/SpicyModal.js

@@ -1,9 +1,9 @@
 import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeStyle as s, onBeforeUnmount as c, openBlock as l, renderList as u, renderSlot as d, toDisplayString as f, watch as p } from "vue";
-//#region src/components/SpicyModal.vue?vue&type=script&setup=true&lang.ts
-var m = ["aria-labelledby"], h = { class: "spicyModalHeader" }, g = {
+//#region src/components/SpicyModal/SpicyModal.css?inline
+var m = ".spicyModalOverlay{z-index:1000;background-color:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.spicyModal{border-radius:var(--skBorderRadius);background-color:var(--skBgColor);z-index:1001;padding:20px;font-size:15px;transition:transform .3s ease-out;box-shadow:0 0 6px 2px #0003}.spicyModalHeader{text-align:center;font-size:20px;font-weight:700}.spicyModalActions{text-align:right;margin-top:20px}.spicyModalActionBtn{color:var(--skTextColor,#ddd);cursor:pointer;background-color:#0000;border:none}.spicyModalActionBtn:hover{text-decoration:underline}", h = ["aria-labelledby"], g = { class: "spicyModalHeader" }, _ = {
 	key: 0,
 	id: "spicyModalTitle"
-}, _ = { class: "spicyModalActions" }, v = ["onClick"], y = /* @__PURE__ */ o({
+}, v = { class: "spicyModalActions" }, y = ["onClick"], b = /* @__PURE__ */ o({
 	__name: "SpicyModal",
 	props: {
 		width: { default: "400px" },
@@ -31,8 +31,8 @@ var m = ["aria-labelledby"], h = { class: "spicyModalHeader" }, g = {
 		"close",
 		"action-clicked"
 	],
-	setup(o, { emit: y }) {
-		let b = o, x = y, S = t(() => ({
+	setup(o, { emit: m }) {
+		let b = o, x = m, S = t(() => ({
 			"--width": b.width,
 			"--height": b.height,
 			"--skBorderRadius": b.borderRadius,
@@ -67,7 +67,7 @@ var m = ["aria-labelledby"], h = { class: "spicyModalHeader" }, g = {
 			class: "spicyModal",
 			style: s({ ...S.value })
 		}, [
-			i("header", h, [o.modalTitle ? (l(), r("span", g, [d(t.$slots, "spicyModalHeader", {
+			i("header", g, [o.modalTitle ? (l(), r("span", _, [d(t.$slots, "spicyModalHeader", {
 				title: o.modalTitle,
 				ariaLabel: o.modalTitle
 			}, () => [a(f(o.modalTitle), 1)])])) : d(t.$slots, "spicyModalHeader", {
@@ -76,7 +76,7 @@ var m = ["aria-labelledby"], h = { class: "spicyModalHeader" }, g = {
 				ariaLabel: o.modalTitle
 			})]),
 			d(t.$slots, "default"),
-			i("div", _, [
+			i("div", v, [
 				d(t.$slots, "spicyModalActions"),
 				o.actions.length === 0 && o.closeBtn ? (l(), r("button", {
 					key: 0,
@@ -87,10 +87,10 @@ var m = ["aria-labelledby"], h = { class: "spicyModalHeader" }, g = {
 					key: e.label,
 					class: "spicyModalExtraBtn spicyModalActionBtn",
 					onClick: (t) => w(e)
-				}, f(e.label), 9, v))), 128))
+				}, f(e.label), 9, y))), 128))
 			])
-		], 4)], 8, m)) : n("", !0);
+		], 4)], 8, h)) : n("", !0);
 	}
 });
 //#endregion
-export { y as t };
+export { m as n, b as t };

package/dist/lib/SpicyProgress/SpicyProgress.js

@@ -1,29 +1,29 @@
 import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeStyle as o, openBlock as s, renderSlot as c, toDisplayString as l } from "vue";
-//#region src/components/SpicyProgress.vue?vue&type=script&setup=true&lang.ts
-var u = {
+//#region src/components/SpicyProgress/SpicyProgress.css?inline
+var u = ".spicyProgress{background-color:#e0e0e0;border-radius:8px;width:100%;position:relative;overflow:hidden}.spicyProgressBar{transition:width .4s}.spicyProgressLabel{color:#fff;font-size:12px;position:absolute;top:0;right:10px}.spicyProgressCircular{justify-content:center;align-items:center;display:flex;position:relative}.spicyCircularSvg{background-color:#00000080;border-radius:50%;transform:rotate(-90deg)}.spicyCircularTrack{fill:none;stroke:#e0e0e0}.spicyCircularProgress{fill:none;transition:stroke-dashoffset .4s}.spicyCircularLabel{font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}", d = {
 	key: 0,
 	class: "spicyProgress"
-}, d = {
+}, f = {
 	key: 0,
 	class: "spicyProgressLabel"
-}, f = {
+}, p = {
 	key: 1,
 	class: "spicyProgressCircular"
-}, p = ["width", "height"], m = [
+}, m = ["width", "height"], h = [
 	"stroke-width",
 	"r",
 	"cx",
 	"cy"
-], h = [
+], g = [
 	"stroke",
 	"stroke-width",
 	"r",
 	"cx",
 	"cy"
-], g = {
+], _ = {
 	key: 0,
 	class: "spicyCircularLabel"
-}, _ = /* @__PURE__ */ a({
+}, v = /* @__PURE__ */ a({
 	__name: "SpicyProgress",
 	props: {
 		value: {},
@@ -39,19 +39,19 @@ var u = {
 		size: { default: 100 }
 	},
 	setup(a) {
-		let _ = a, v = t(() => Math.round(_.value / _.max * 100)), y = t(() => _.type === "linear"), b = t(() => ({
+		let u = a, v = t(() => Math.round(u.value / u.max * 100)), y = t(() => u.type === "linear"), b = t(() => ({
 			width: `${v.value}%`,
-			backgroundColor: _.color,
-			height: _.height
-		})), x = t(() => _.size / 2), S = t(() => (_.size - _.strokeWidth) / 2), C = t(() => 2 * Math.PI * S.value), w = t(() => ({
+			backgroundColor: u.color,
+			height: u.height
+		})), x = t(() => u.size / 2), S = t(() => (u.size - u.strokeWidth) / 2), C = t(() => 2 * Math.PI * S.value), w = t(() => ({
 			strokeDasharray: `${C.value} ${C.value}`,
 			strokeDashoffset: `${C.value - v.value / 100 * C.value}`,
 			transition: "stroke-dashoffset 400ms ease"
 		}));
-		return (t, _) => (s(), r(e, null, [y.value ? (s(), r("div", u, [i("div", {
+		return (t, u) => (s(), r(e, null, [y.value ? (s(), r("div", d, [i("div", {
 			class: "spicyProgressBar",
 			style: o(b.value)
-		}, null, 4), a.showLabel ? (s(), r("div", d, l(v.value) + "%", 1)) : n("", !0)])) : (s(), r("div", f, [(s(), r("svg", {
+		}, null, 4), a.showLabel ? (s(), r("div", f, l(v.value) + "%", 1)) : n("", !0)])) : (s(), r("div", p, [(s(), r("svg", {
 			class: "spicyCircularSvg",
 			width: a.size,
 			height: a.size
@@ -61,7 +61,7 @@ var u = {
 			r: S.value,
 			cx: x.value,
 			cy: x.value
-		}, null, 8, m), i("circle", {
+		}, null, 8, h), i("circle", {
 			class: "spicyCircularProgress",
 			stroke: a.color,
 			"stroke-width": a.strokeWidth,
@@ -69,8 +69,8 @@ var u = {
 			cx: x.value,
 			cy: x.value,
 			style: o(w.value)
-		}, null, 12, h)], 8, p)), a.showLabel ? (s(), r("div", g, l(v.value) + "%", 1)) : n("", !0)])), c(t.$slots, "default")], 64));
+		}, null, 12, g)], 8, m)), a.showLabel ? (s(), r("div", _, l(v.value) + "%", 1)) : n("", !0)])), c(t.$slots, "default")], 64));
 	}
 });
 //#endregion
-export { _ as t };
+export { u as n, v as t };

package/dist/lib/SpicySheet/SpicySheet.js

@@ -1,7 +1,6 @@
 import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, renderSlot as o } from "vue";
-//#endregion
-//#region src/components/SpicySheet.vue
-var s = /* @__PURE__ */ n({
+//#region src/components/SpicySheet/SpicySheet.css?inline
+var s = ".spicySheet.isRound{border-radius:8px}.spicySheet.flex{flex-direction:column;display:flex}", c = /* @__PURE__ */ n({
 	__name: "SpicySheet",
 	props: {
 		isRound: {
@@ -30,4 +29,4 @@ var s = /* @__PURE__ */ n({
 	}
 });
 //#endregion
-export { s as t };
+export { s as n, c as t };