spicykatsu 0.4.1 → 0.5.0

package/README.md

@@ -24,7 +24,7 @@ app.use(SpicyKatsu)
 app.mount('#app')
 ```
 
-Styles are automatically injected when you call `app.use(SpicyKatsu)` — no CSS import needed.
+Styles are automatically injected when you call `app.use(SpicyKatsu)` - no CSS import needed.
 
 You can also import components individually for JS tree-shaking:
 

package/dist/SpicyAccordion-Cm-RI3r_.js

@@ -0,0 +1,47 @@
+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.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "spicyAccordion" }, _ = ["onClick", "aria-expanded"], v = {
+	key: 0,
+	class: "accordionIcon",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, y = ["d"], b = { class: "spicyAccordionContent" }, x = /* @__PURE__ */ o({
+	__name: "SpicyAccordion",
+	props: {
+		sections: {},
+		singleOpen: {
+			type: Boolean,
+			default: !1
+		},
+		defaultOpen: {}
+	},
+	setup(o) {
+		let x = o, S = l(x.defaultOpen || []), C = (e) => {
+			if (x.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", {
+			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", v, [i("path", { d: e.icon }, null, 8, y)])) : n("", !0),
+			x[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)]])]),
+			_: 2
+		}, 1024)]))), 128))]));
+	}
+});
+//#endregion
+export { x as t };

package/dist/SpicyAccordion.js

@@ -0,0 +1,2 @@
+import { t as e } from "./SpicyAccordion-Cm-RI3r_.js";
+export { e as SpicyAccordion, e as default };

package/dist/{lib/SpicyAlert/SpicyAlert.js → SpicyAlert-Bwi92wCd.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/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"], _ = {
+//#region src/components/SpicyAlert/SpicyAlert.vue?vue&type=script&setup=true&lang.ts
+var h = ["aria-label"], g = {
 	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 = {
+}, v = ["d"], y = { class: "spicyAlertContainer" }, b = {
 	key: 0,
 	class: "spicyAlertTitle"
-}, S = {
+}, x = {
 	key: 1,
 	class: "spicyAlertText"
-}, C = {
+}, S = {
 	key: 0,
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg"
-}, w = ["d"], T = { key: 1 }, E = /* @__PURE__ */ a({
+}, C = ["d"], w = { key: 1 }, T = /* @__PURE__ */ a({
 	__name: "SpicyAlert",
 	props: {
 		variant: { default: "info" },
@@ -42,7 +42,7 @@ var h = ".spicyAlert{align-items:center;gap:10px;padding:12px;display:flex}.spic
 		}
 	},
 	setup(a) {
-		let h = a, E = l(!0), D = null, O = l(h.autoClose), k = null, A = () => {
+		let T = a, E = l(!0), D = null, O = l(T.autoClose), k = null, A = () => {
 			E.value = !1;
 		}, j = () => {
 			O.value > 0 && (k = Date.now(), D = setTimeout(() => {
@@ -58,7 +58,7 @@ var h = ".spicyAlert{align-items:center;gap:10px;padding:12px;display:flex}.spic
 		}, P = () => {
 			j();
 		};
-		return f(() => h.autoClose, (e) => {
+		return f(() => T.autoClose, (e) => {
 			O.value = e, M(), j();
 		}), s(() => {
 			M();
@@ -73,27 +73,27 @@ var h = ".spicyAlert{align-items:center;gap:10px;padding:12px;display:flex}.spic
 				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", {
+				a.iconOnly && a.icon ? (c(), r("span", g, d(a.icon), 1)) : n("", !0),
+				a.mdi ? (c(), r("svg", _, [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)]),
+				}, 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)]),
 				a.closable ? (c(), r("button", {
 					key: 2,
 					class: "spicyAlertCloseBtn",
 					onClick: A,
 					"aria-label": "Close alert"
-				}, [a.closeIcon ? (c(), r("svg", C, [i("path", {
+				}, [a.closeIcon ? (c(), r("svg", S, [i("path", {
 					fill: "#000",
 					d: a.closeIcon
-				}, null, 8, w)])) : (c(), r("span", T, "X"))])) : n("", !0),
+				}, null, 8, C)])) : (c(), r("span", w, "X"))])) : n("", !0),
 				a.text ? n("", !0) : u(s.$slots, "default", { key: 3 })
-			], 42, g)) : n("", !0)]),
+			], 42, h)) : n("", !0)]),
 			_: 3
 		}));
 	}
 });
 //#endregion
-export { h as n, E as t };
+export { T as t };

package/dist/SpicyAlert.js

@@ -0,0 +1,2 @@
+import { t as e } from "./SpicyAlert-Bwi92wCd.js";
+export { e as SpicyAlert, e as default };

package/dist/{lib/SpicyBtn/SpicyBtn.js → SpicyBtn-B5nk3vCZ.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/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 = [
+//#region src/components/SpicyBtn/SpicyBtn.vue?vue&type=script&setup=true&lang.ts
+var f = [
 	"disabled",
 	"aria-label",
 	"aria-disabled",
 	"tabindex"
-], m = {
+], p = {
 	key: 0,
 	class: "spicyBtnIcon",
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg"
-}, h = ["d"], g = {
+}, m = ["d"], h = {
 	key: 1,
 	class: "spicyBtnIcon"
-}, _ = {
+}, g = {
 	key: 2,
 	class: "spicyBtnText"
-}, v = /* @__PURE__ */ i({
+}, _ = /* @__PURE__ */ i({
 	__name: "SpicyBtn",
 	props: {
 		variant: { default: "filled" },
@@ -37,8 +37,8 @@ var f = ".spicyBtn{text-align:center;cursor:pointer;color:var(--skTextColor,#ddd
 		ariaLabel: {}
 	},
 	emits: ["click"],
-	setup(i, { emit: f }) {
-		let v = f, y = (e) => {
+	setup(i, { emit: _ }) {
+		let v = _, 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 = ".spicyBtn{text-align:center;cursor:pointer;color:var(--skTextColor,#ddd
 			isRound: C.value,
 			[b.size]: b.size !== "default"
 		}));
-		return (e, f) => {
+		return (e, _) => {
 			let v = l("spicyRipple");
 			return d((s(), n("button", {
 				class: a(w.value),
@@ -66,16 +66,16 @@ var f = ".spicyBtn{text-align:center;cursor:pointer;color:var(--skTextColor,#ddd
 				"aria-disabled": i.disabled,
 				tabindex: i.disabled ? -1 : 0
 			}, [
-				i.mdi ? (s(), n("svg", m, [r("path", {
+				i.mdi ? (s(), n("svg", p, [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),
+				}, 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),
 				c(e.$slots, "default")
-			], 14, p)), [[v]]);
+			], 14, f)), [[v]]);
 		};
 	}
 });
 //#endregion
-export { f as n, v as t };
+export { _ as t };

package/dist/SpicyBtn.js

@@ -0,0 +1,2 @@
+import { t as e } from "./SpicyBtn-B5nk3vCZ.js";
+export { e as SpicyBtn, e as default };

package/dist/SpicyCarousel-Be5oYKnj.js

@@ -0,0 +1,121 @@
+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/SpicyCarousel.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-label"], y = { class: "spicyCarouselInfoText" }, b = { class: "spicyCarouselTitle" }, x = { key: 0 }, S = {
+	key: 0,
+	class: "spicyCarouselNavControls"
+}, C = {
+	key: 1,
+	class: "spicyCarouselPagination"
+}, w = ["onClick"], T = { class: "spicyCarouselPage" }, E = /* @__PURE__ */ s({
+	__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(s) {
+		let E, D, O = !1, k = s, A = n(() => ({
+			"--width": k.width,
+			"--height": k.height,
+			"--activeColor": k.activeColor
+		})), j = n(() => k.paginationLimit), M = n(() => k.slides[P.value]?.title), N = n(() => F.value.fullScreen === !1 ? !1 : k.fullScreen), P = p(k.initialSlide), F = n(() => k.slides[P.value]), I, L = () => {
+			P.value = (P.value - 1 + k.slides.length) % k.slides.length;
+		}, R = () => {
+			P.value = (P.value + 1) % k.slides.length;
+		}, z = (e) => {
+			P.value = e;
+		}, B = () => {
+			I && clearInterval(I);
+		}, V = () => {
+			k.autoplay && (I = window.setInterval(R, k.autoplaySpeed));
+		}, H = () => {
+			window.open(F.value.img);
+		}, U = () => {
+			k.enableImageClick && H();
+		}, W = (e) => {
+			E = 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;
+				Math.abs(t) > Math.abs(n) && (t > 40 ? (L(), O = !0) : t < -40 && (R(), O = !0));
+			}
+		}, K = n(() => {
+			let e = k.slides.length, t = Math.max(0, P.value - Math.floor(j.value / 2)), n = Math.min(e, t + j.value);
+			return [...Array(e).keys()].slice(t, n);
+		});
+		return u(() => {
+			V();
+		}), d(() => {
+			B();
+		}), (n, u) => (f(), i("div", {
+			class: "spicyCarouselWrapper",
+			style: l({ ...A.value })
+		}, [
+			a("div", {
+				class: "spicyCarouselContainer",
+				onMouseenter: B,
+				onMouseleave: V,
+				onTouchstart: W,
+				onTouchmove: G
+			}, [o(t, {
+				name: "slide",
+				mode: "out-in"
+			}, {
+				default: _(() => [(f(), i("div", {
+					class: c(["spicyCarouselSlide", { pointCursor: k.enableImageClick }]),
+					key: P.value,
+					style: l({ backgroundImage: `url(${F.value.img})` }),
+					onClick: U
+				}, [s.slides[P.value].text ? (f(), i("div", {
+					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))]),
+				_: 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", {
+				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", {
+				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)
+		], 4));
+	}
+});
+//#endregion
+export { E as t };

package/dist/SpicyCarousel.js

@@ -0,0 +1,2 @@
+import { t as e } from "./SpicyCarousel-Be5oYKnj.js";
+export { e as SpicyCarousel, e as default };

package/dist/SpicyDataTable-BqoW4IZ4.js

@@ -0,0 +1,126 @@
+import { t as e } from "./SpicyBtn-B5nk3vCZ.js";
+import { t } from "./SpicyProgress-CjD0SCA7.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, watch as _ } from "vue";
+//#region src/components/SpicyDataTable/SpicyDataTable.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "spicyDataTable" }, y = { class: "spicyDataTableContainer" }, b = { class: "spicyDataTableTable" }, x = { class: "spicyDataTableHeader" }, S = ["onClick"], C = { class: "headerText" }, w = {
+	key: 0,
+	class: "sortIcon"
+}, T = { class: "spicyDataTableBody" }, E = ["onClick"], D = {
+	key: 0,
+	class: "spicyDataTableLoading"
+}, O = {
+	key: 1,
+	class: "spicyDataTablePagination"
+}, k = { class: "paginationInfo" }, A = { class: "paginationControls" }, j = { class: "paginationPerPage" }, M = ["value"], N = ["value"], P = /* @__PURE__ */ l({
+	__name: "SpicyDataTable",
+	props: {
+		headers: {},
+		items: {},
+		itemKey: { default: "id" },
+		itemsPerPage: { default: 10 },
+		page: { default: 1 },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		serverItemsLength: {},
+		showPagination: {
+			type: Boolean,
+			default: !0
+		},
+		sortable: {
+			type: Boolean,
+			default: !0
+		},
+		fixedRowHeight: { default: "auto" }
+	},
+	emits: [
+		"update:page",
+		"update:itemsPerPage",
+		"click:row"
+	],
+	setup(l, { emit: P }) {
+		let F = P, I = l, L = p(""), R = p(!1), z = p(I.page), B = [
+			5,
+			10,
+			25,
+			50,
+			100
+		], V = r(() => {
+			if (!L.value || !I.sortable) return I.items;
+			let e = [...I.items].sort((e, t) => {
+				let n = e[L.value], r = t[L.value];
+				return n === r ? 0 : n == null ? 1 : r == null ? -1 : typeof n == "number" && typeof r == "number" ? n - r : String(n).localeCompare(String(r));
+			});
+			return R.value ? e.reverse() : e;
+		}), H = r(() => I.serverItemsLength || V.value.length), U = r(() => Math.ceil(H.value / I.itemsPerPage)), W = r(() => {
+			let e = (z.value - 1) * I.itemsPerPage, t = e + I.itemsPerPage;
+			return V.value.slice(e, t);
+		}), G = r(() => `${(z.value - 1) * I.itemsPerPage + 1}-${Math.min(z.value * I.itemsPerPage, H.value)} of ${H.value}`), K = (e) => {
+			e.sortable === !1 || !I.sortable || (L.value === e.value ? R.value = !R.value : (L.value = e.value, R.value = !1));
+		}, q = (e, t) => {
+			F("click:row", e, t);
+		}, J = () => {
+			z.value > 1 && (z.value--, F("update:page", z.value));
+		}, Y = () => {
+			z.value < U.value && (z.value++, F("update:page", z.value));
+		}, X = (e) => {
+			let t = e.target;
+			F("update:itemsPerPage", Number(t.value)), z.value = 1, F("update:page", 1);
+		};
+		return _(() => I.page, (e) => {
+			z.value = e;
+		}), (r, p) => (f(), a("div", v, [
+			o("div", y, [o("table", b, [o("thead", x, [o("tr", null, [(f(!0), a(n, null, m(l.headers, (e) => (f(), a("th", {
+				key: e.value,
+				class: u([
+					"spicyDataTableCell",
+					"spicyDataTableHeaderCell",
+					e.align || "left",
+					{ sortable: e.sortable !== !1 && l.sortable }
+				]),
+				onClick: (t) => K(e)
+			}, [o("span", C, g(e.text), 1), e.sortable !== !1 && l.sortable && L.value === e.value ? (f(), a("span", w, g(R.value ? "▼" : "▲"), 1)) : i("", !0)], 10, S))), 128))])]), o("tbody", T, [(f(!0), a(n, null, m(W.value, (e, t) => (f(), a("tr", {
+				key: e[l.itemKey],
+				class: u(["spicyDataTableRow", { clickable: r.$attrs["onClick:row"] }]),
+				style: d({ height: l.fixedRowHeight }),
+				onClick: (t) => q(e, t)
+			}, [(f(!0), a(n, null, m(l.headers, (n) => (f(), a("td", {
+				key: n.value,
+				class: u(["spicyDataTableCell", n.align || "left"])
+			}, [h(r.$slots, `item.${n.value}`, {
+				item: e,
+				index: t
+			}, () => [s(g(e[n.value]), 1)])], 2))), 128))], 14, E))), 128))])])]),
+			l.loading ? (f(), a("div", D, [h(r.$slots, "loading", {}, () => [c(t, {
+				value: 0,
+				type: "circular",
+				size: 60
+			})])])) : i("", !0),
+			l.showPagination ? (f(), a("div", O, [
+				o("div", k, [o("span", null, g(G.value), 1)]),
+				o("div", A, [c(e, {
+					disabled: z.value === 1,
+					onClick: J,
+					text: "Previous",
+					size: "small"
+				}, null, 8, ["disabled"]), c(e, {
+					disabled: z.value === U.value,
+					onClick: Y,
+					text: "Next",
+					size: "small"
+				}, null, 8, ["disabled"])]),
+				o("div", j, [o("select", {
+					value: l.itemsPerPage,
+					onChange: X,
+					class: "itemsPerPageSelect"
+				}, [(f(), a(n, null, m(B, (e) => o("option", {
+					key: e,
+					value: e
+				}, g(e) + " / page ", 9, N)), 64))], 40, M)])
+			])) : i("", !0)
+		]));
+	}
+});
+//#endregion
+export { P as t };

package/dist/SpicyDataTable.js

@@ -0,0 +1,2 @@
+import { t as e } from "./SpicyDataTable-BqoW4IZ4.js";
+export { e as SpicyDataTable, e as default };

package/dist/{lib/SpicyDialog/SpicyDialog.js → SpicyDialog-CKtIwcPz.js}

@@ -1,6 +1,7 @@
 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";
-//#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({
+//#endregion
+//#region src/components/SpicyDialog/SpicyDialog.vue
+var m = /* @__PURE__ */ s({
 	__name: "SpicyDialog",
 	props: {
 		modelValue: Boolean,
@@ -41,4 +42,4 @@ var m = ".spicyDialogOverlay{z-index:2000;justify-content:center;align-items:cen
 	}
 });
 //#endregion
-export { m as n, h as t };
+export { m as t };

package/dist/SpicyDialog.js

@@ -0,0 +1,2 @@
+import { t as e } from "./SpicyDialog-CKtIwcPz.js";
+export { e as SpicyDialog, e as default };

package/dist/SpicyDivider.js

@@ -0,0 +1,2 @@
+import { t as e } from "./SpicyDivider-CDgC_pdd.js";
+export { e as SpicyDivider, e as default };

package/dist/{lib/SpicyDropdown/SpicyDropdown.js → SpicyDropdown-DLqjiK7t.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/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({
+//#region src/components/SpicyDropdown/SpicyDropdown.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-expanded"], y = ["width", "height"], b = ["d"], x = ["width", "height"], S = /* @__PURE__ */ s({
 	__name: "SpicyDropdown",
 	props: {
 		label: {},
@@ -10,16 +10,16 @@ var v = ".spicyDropdown{display:inline-block;position:relative}.spicyDropdownBut
 		iconSize: { default: "24px" }
 	},
 	setup(s) {
-		let v = s, C = p(!1), w = p(null), T = () => {
+		let S = 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(() => v.icon || ""), O = t(() => ({
-			width: v.width,
-			[v.align === "right" ? "right" : "left"]: 0,
-			textAlign: v.align
+		let D = t(() => S.icon || ""), O = t(() => ({
+			width: S.width,
+			[S.align === "right" ? "right" : "left"]: 0,
+			textAlign: S.align
 		}));
 		return (t, u) => (f(), r("div", {
 			ref_key: "dropdownRef",
@@ -38,7 +38,7 @@ var v = ".spicyDropdown{display:inline-block;position:relative}.spicyDropdownBut
 				height: s.iconSize,
 				viewBox: "0 0 24 24",
 				class: "dropdownIcon"
-			}, [i("path", { d: D.value }, null, 8, x)], 8, b)) : n("", !0),
+			}, [i("path", { d: D.value }, null, 8, b)], 8, y)) : n("", !0),
 			a(" " + h(s.label) + " ", 1),
 			D.value ? n("", !0) : (f(), r("svg", {
 				key: 1,
@@ -46,8 +46,8 @@ var v = ".spicyDropdown{display:inline-block;position:relative}.spicyDropdownBut
 				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, S))
-		], 8, y), o(e, { name: "fade" }, {
+			}, [...u[1] ||= [i("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)]], 10, x))
+		], 8, v), o(e, { name: "fade" }, {
 			default: g(() => [C.value ? (f(), r("div", {
 				key: 0,
 				class: "spicyDropdownMenu",
@@ -60,4 +60,4 @@ var v = ".spicyDropdown{display:inline-block;position:relative}.spicyDropdownBut
 	}
 });
 //#endregion
-export { v as n, C as t };
+export { S as t };

package/dist/SpicyDropdown.js

@@ -0,0 +1,2 @@
+import { t as e } from "./SpicyDropdown-DLqjiK7t.js";
+export { e as SpicyDropdown, e as default };