spicykatsu 0.8.0 → 0.9.0

package/README.md

@@ -90,6 +90,7 @@ app.use(SpicyKatsu, { useComponents: false, useStyles: 'variables' })
 |-----------|-------------|
 | `SpicyAccordion` | Collapsible sections, single or multi-open |
 | `SpicyAlert` | Dismissible alerts with variants and auto-close |
+| `SpicyBadge` | Pill/tag badges with variants, dot, and removable |
 | `SpicyBtn` | Button with MDI icon support and ripple effect |
 | `SpicyCarousel` | Image carousel with autoplay, touch, and pagination |
 | `SpicyDataTable` | Data table with sorting, filtering, and pagination |
@@ -99,11 +100,14 @@ app.use(SpicyKatsu, { useComponents: false, useStyles: 'variables' })
 | `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 |
+| `SpicySelect` | Custom select with search, multi-select, and keyboard nav |
 | `SpicySheet` | Styled container/card |
+| `SpicySkeleton` | Loading placeholder with shimmer animation |
 | `SpicySlider` | Range slider input |
 | `SpicyTabs` | Tabbed interface with scrollable tab bar |
 | `SpicyTextArea` | Styled textarea |
 | `SpicyTextField` | Text input with floating label, prefix, and validation |
+| `SpicyToast` | Toast notification system with auto-dismiss and positions |
 | `SpicyToggle` | Toggle switch |
 | `SpicyTooltip` | Hover tooltip with position control |
 | `SpicyTree` | Recursive tree view |
@@ -112,8 +116,8 @@ app.use(SpicyKatsu, { useComponents: false, useStyles: 'variables' })
 
 | Directive | Description |
 |-----------|-------------|
-| `v-spicyDrag` | Makes any element draggable (mouse + touch). Accepts `{ axis: 'x' | 'y' }` |
-| `v-spicyRipple` | Adds a Material-style ripple on click/touch |
+| `v-spicyDrag` | Makes any element draggable (mouse + touch). Options: `axis`, `handle`, `disabled`, `bounds`, `grid`, `onDragStart`, `onDrag`, `onDragEnd` |
+| `v-spicyRipple` | Adds a Material-style ripple on click/touch. Options: `color`, `center`. Use `data-no-ripple` to disable |
 
 ## Dev / Playground
 
@@ -124,4 +128,4 @@ bun install
 bun run dev
 ```
 
-The playground (`src/playground/Playground.vue`) has a live example of every component and directive.
+The playground (`playground/Playground.vue`) has a live example of every component and directive.

package/dist/SpicyAccordion-CjUXROnD.js

@@ -0,0 +1,70 @@
+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, withCtx as p } from "vue";
+//#region src/components/SpicyAccordion/SpicyAccordion.vue?vue&type=script&setup=true&lang.ts
+var m = [
+	"onClick",
+	"aria-expanded",
+	"aria-controls",
+	"disabled"
+], h = {
+	key: 0,
+	class: "accordionIcon",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, g = ["d"], _ = ["id"], v = /* @__PURE__ */ o({
+	__name: "SpicyAccordion",
+	props: {
+		sections: {},
+		singleOpen: {
+			type: Boolean,
+			default: !1
+		},
+		defaultOpen: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(o) {
+		let v = o, y = l(v.defaultOpen || []), b = (e) => {
+			if (!(v.disabled || v.sections[e]?.disabled)) if (v.singleOpen) y.value = y.value.includes(e) ? [] : [e];
+			else {
+				let t = y.value.indexOf(e);
+				t === -1 ? y.value.push(e) : y.value.splice(t, 1);
+			}
+		}, x = (e) => y.value.includes(e);
+		return (l, v) => (c(), r("div", { class: s(["spicyAccordion", { disabled: o.disabled }]) }, [(c(!0), r(e, null, u(o.sections, (e, u) => (c(), r("div", {
+			key: u,
+			class: "spicyAccordionItem"
+		}, [i("button", {
+			type: "button",
+			class: s(["spicyAccordionHeader", { open: x(u) }]),
+			onClick: (e) => b(u),
+			"aria-expanded": x(u),
+			"aria-controls": `accordion-panel-${u}`,
+			disabled: o.disabled || e.disabled
+		}, [
+			i("span", null, f(e.title), 1),
+			e.icon ? (c(), r("svg", h, [i("path", {
+				fill: "currentColor",
+				d: e.icon
+			}, null, 8, g)])) : n("", !0),
+			v[0] ||= i("span", { class: "accordionToggle" }, [i("svg", {
+				class: "accordionArrow",
+				viewBox: "0 0 24 24"
+			}, [i("path", {
+				fill: "currentColor",
+				d: "M7 10l5 5 5-5H7z"
+			})])], -1)
+		], 10, m), a(t, { name: "accordion-slide" }, {
+			default: p(() => [x(u) ? (c(), r("div", {
+				key: 0,
+				id: `accordion-panel-${u}`,
+				class: "spicyAccordionContent",
+				role: "region"
+			}, [d(l.$slots, `section-${u}`)], 8, _)) : n("", !0)]),
+			_: 2
+		}, 1024)]))), 128))], 2));
+	}
+});
+//#endregion
+export { v as t };

package/dist/SpicyAccordion.js

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

package/dist/SpicyBadge-I298Cm9U.js

@@ -0,0 +1,55 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, openBlock as o, renderSlot as s } from "vue";
+//#endregion
+//#region src/components/SpicyBadge/SpicyBadge.vue
+var c = /* @__PURE__ */ r({
+	__name: "SpicyBadge",
+	props: {
+		variant: { default: "soft" },
+		color: { default: "" },
+		textColor: { default: "" },
+		size: { default: "md" },
+		dot: {
+			type: Boolean,
+			default: !1
+		},
+		dotColor: { default: "" },
+		removable: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["remove"],
+	setup(r) {
+		let c = r, l = e(() => c.dot), u = e(() => {
+			let e = {};
+			return c.color && (c.variant === "solid" ? e.backgroundColor = c.color : c.variant === "outlined" ? (e.borderColor = c.color, e.color = c.color) : (e.backgroundColor = `color-mix(in srgb, ${c.color} 15%, transparent)`, e.color = c.color)), c.textColor && (e.color = c.textColor), e;
+		});
+		return (e, c) => (o(), n("span", {
+			class: i(["spicyBadge", [
+				r.variant,
+				r.size,
+				{
+					dot: l.value,
+					removable: r.removable
+				}
+			]]),
+			style: a(u.value)
+		}, [
+			l.value ? (o(), n("span", {
+				key: 0,
+				class: "spicyBadgeDot",
+				style: a({ backgroundColor: r.dotColor })
+			}, null, 4)) : t("", !0),
+			s(e.$slots, "default"),
+			r.removable ? (o(), n("button", {
+				key: 1,
+				class: "spicyBadgeRemove",
+				onClick: c[0] ||= (t) => e.$emit("remove"),
+				"aria-label": "Remove badge",
+				type: "button"
+			}, " ✕ ")) : t("", !0)
+		], 6));
+	}
+});
+//#endregion
+export { c as t };

package/dist/SpicyBadge.js

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

package/dist/{SpicyBtn-DQ7A3JOM.js → SpicyBtn-ldAR1VsK.js}

@@ -27,7 +27,7 @@ var f = [
 		text: {},
 		icon: {},
 		mdi: {},
-		size: { default: "default" },
+		size: { default: "md" },
 		bgColor: {},
 		textColor: { default: "#ddd" },
 		hoverColor: {},
@@ -52,7 +52,7 @@ var f = [
 			outlined: b.variant === "outlined",
 			disabled: b.disabled,
 			isRound: C.value,
-			[b.size]: b.size !== "default"
+			[b.size]: b.size !== "md"
 		}));
 		return (e, _) => {
 			let v = l("spicyRipple");

package/dist/SpicyBtn.js

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

package/dist/{SpicyDataTable-CLkxtyXn.js → SpicyDataTable-Bj352mv3.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./SpicyBtn-DQ7A3JOM.js";
+import { t as e } from "./SpicyBtn-ldAR1VsK.js";
 import { t } from "./SpicyProgress-62dbvFg1.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
@@ -106,12 +106,12 @@ var v = { class: "spicyDataTable" }, y = { class: "spicyDataTableContainer" }, b
 					disabled: z.value === 1,
 					onClick: Y,
 					text: "Previous",
-					size: "small"
+					size: "sm"
 				}, null, 8, ["disabled"]), c(e, {
 					disabled: z.value === W.value,
 					onClick: X,
 					text: "Next",
-					size: "small"
+					size: "sm"
 				}, null, 8, ["disabled"])]),
 				o("div", j, [o("select", {
 					value: B.value,

package/dist/SpicyDataTable.js

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

package/dist/SpicyFileInput-bGUwF-Rj.js

@@ -0,0 +1,143 @@
+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, watch as d, withModifiers as f } from "vue";
+//#region src/components/SpicyFileInput/SpicyFileInput.vue?vue&type=script&setup=true&lang.ts
+var p = ["aria-label"], m = [
+	"multiple",
+	"accept",
+	"name",
+	"disabled",
+	"aria-label"
+], h = {
+	key: 1,
+	class: "spicyFilePreview"
+}, g = { class: "spicyFilePreviewName" }, _ = ["onClick"], v = ["onClick"], y = {
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, b = ["d"], x = {
+	key: 3,
+	class: "spicyFileInputError"
+}, S = /* @__PURE__ */ i({
+	__name: "SpicyFileInput",
+	props: {
+		modelValue: { default: () => [] },
+		label: { default: "" },
+		error: { default: "" },
+		accept: { default: "" },
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		mdi: { default: "" },
+		variant: { default: "dashed" },
+		name: { default: "" },
+		ariaLabel: { default: "" }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"error"
+	],
+	setup(i, { emit: S }) {
+		let C = S, w = i, T = s(w.modelValue), E = s(null), D = s(!1);
+		d(() => w.modelValue, (e) => {
+			T.value = e;
+		});
+		let O = (e) => {
+			if (!w.accept) return e;
+			let t = w.accept.split(",").map((e) => e.trim());
+			return e.filter((e) => t.some((t) => t.startsWith(".") ? e.name.endsWith(t) : e.type === t));
+		}, k = (e) => {
+			let t = O(e);
+			t.length < e.length && C("error", `${e.length - t.length} file(s) were rejected due to type restrictions`), !w.multiple && t.length > 0 ? (T.value = [t[0]], t.length > 1 && C("error", "Only one file is allowed")) : T.value = t, C("update:modelValue", T.value), C("change", T.value);
+		}, A = (e) => {
+			let t = e.target;
+			t.files && k(Array.from(t.files));
+		}, j = () => {
+			T.value = [], C("update:modelValue", T.value), C("change", T.value), E.value && (E.value.value = "");
+		}, M = (e) => {
+			T.value.splice(e, 1), C("update:modelValue", T.value), T.value.length === 0 && E.value && (E.value.value = ""), C("change", T.value);
+		}, N = () => {
+			w.disabled || E.value?.click();
+		}, P = () => {
+			w.disabled || (D.value = !0);
+		}, F = () => {
+			w.disabled || (D.value = !1);
+		}, I = (e) => {
+			if (!w.disabled) {
+				let t = e.dataTransfer?.files;
+				t && k(Array.from(t)), D.value = !1;
+			}
+		};
+		return (s, d) => (o(), n("div", {
+			class: a(["spicyFileInputWrapper", [{
+				hasError: i.error,
+				isDragging: D.value,
+				disabled: i.disabled,
+				[i.variant]: i.variant
+			}]]),
+			onClick: N,
+			onDragover: f(P, ["prevent"]),
+			onDragleave: f(F, ["prevent"]),
+			onDrop: f(I, ["prevent"])
+		}, [
+			i.label && !T.value.length ? (o(), n("label", {
+				key: 0,
+				class: "spicyFileInputLabel",
+				"aria-label": i.label
+			}, u(i.label), 9, p)) : t("", !0),
+			r("input", {
+				type: "file",
+				multiple: i.multiple,
+				accept: i.accept,
+				name: i.name,
+				class: "spicyFileInput",
+				onChange: A,
+				ref_key: "fileInput",
+				ref: E,
+				disabled: i.disabled,
+				"aria-label": i.ariaLabel || i.label || "File input"
+			}, null, 40, m),
+			T.value.length ? (o(), n("div", h, [(o(!0), n(e, null, c(T.value, (e, a) => (o(), n("div", {
+				key: a,
+				class: "spicyFilePreviewItem"
+			}, [
+				r("span", g, u(e.name), 1),
+				i.clearable && !i.mdi && !i.disabled ? (o(), n("button", {
+					key: 0,
+					class: "removeButton",
+					onClick: f((e) => M(a), ["stop"]),
+					"aria-label": "Remove file",
+					type: "button"
+				}, " ✕ ", 8, _)) : t("", !0),
+				i.clearable && i.mdi && !i.disabled ? (o(), n("button", {
+					key: 1,
+					class: "removeButtonMDI",
+					onClick: f((e) => M(a), ["stop"]),
+					"aria-label": "Remove file",
+					type: "button"
+				}, [(o(), n("svg", y, [r("path", {
+					fill: "currentColor",
+					d: i.mdi
+				}, null, 8, b)]))], 8, v)) : t("", !0)
+			]))), 128))])) : t("", !0),
+			i.clearable && T.value.length > 1 && !i.disabled ? (o(), n("button", {
+				key: 2,
+				class: "clearAllButton",
+				onClick: f(j, ["stop"]),
+				"aria-label": "Clear all files",
+				type: "button"
+			}, " Clear All ")) : t("", !0),
+			l(s.$slots, "default"),
+			i.error ? (o(), n("span", x, u(i.error), 1)) : t("", !0)
+		], 34));
+	}
+});
+//#endregion
+export { S as t };

package/dist/SpicyFileInput.js

@@ -1,2 +1,2 @@
-import { t as e } from "./SpicyFileInput-Cm8fYpHV.js";
+import { t as e } from "./SpicyFileInput-bGUwF-Rj.js";
 export { e as SpicyFileInput, e as default };

package/dist/SpicySelect-D0bg0r5p.js

@@ -0,0 +1,158 @@
+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, nextTick as c, normalizeClass as l, onMounted as u, onUnmounted as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, useId as g, vModelText as _, watch as v, withCtx as y, withDirectives as b, withKeys as x, withModifiers as S } from "vue";
+//#region src/components/SpicySelect/SpicySelect.vue?vue&type=script&setup=true&lang.ts
+var C = { class: "spicySelectContainer" }, w = [
+	"disabled",
+	"aria-expanded",
+	"aria-label"
+], T = { class: "spicySelectValue" }, E = {
+	key: 0,
+	class: "spicySelectDropdown"
+}, D = {
+	key: 0,
+	class: "spicySelectSearch"
+}, O = ["onKeydown"], k = {
+	class: "spicySelectOptions",
+	role: "listbox"
+}, A = [
+	"aria-selected",
+	"onClick",
+	"onMouseenter"
+], j = {
+	key: 0,
+	class: "spicySelectCheck",
+	viewBox: "0 0 24 24"
+}, M = {
+	key: 0,
+	class: "spicySelectEmpty"
+}, N = {
+	key: 1,
+	class: "spicySelectError"
+}, P = /* @__PURE__ */ s({
+	__name: "SpicySelect",
+	props: {
+		modelValue: { default: "" },
+		options: {},
+		label: { default: "" },
+		placeholder: { default: "Select an option" },
+		error: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		searchable: {
+			type: Boolean,
+			default: !1
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: { default: "" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(s, { emit: P }) {
+		let F = s, I = P, L = `spicySelect_${g()}`, R = p(null), z = p(null), B = p(!1), V = p(""), H = p(0), U = n(() => {
+			if (!V.value) return F.options;
+			let e = V.value.toLowerCase();
+			return F.options.filter((t) => t.label.toLowerCase().includes(e));
+		}), W = n(() => {
+			if (F.multiple) {
+				let e = F.modelValue;
+				return !e || !e.length ? "" : e.map((e) => F.options.find((t) => t.value === e)?.label).filter(Boolean).join(", ");
+			}
+			let e = F.modelValue;
+			return F.options.find((t) => t.value === e)?.label || "";
+		}), G = (e) => F.multiple ? F.modelValue.includes(e.value) : F.modelValue === e.value, K = (e) => {
+			if (F.multiple) {
+				let t = [...F.modelValue], n = t.indexOf(e.value);
+				n === -1 ? t.push(e.value) : t.splice(n, 1), I("update:modelValue", t), I("change", t);
+			} else I("update:modelValue", e.value), I("change", e.value), Y();
+		}, q = () => {
+			F.disabled || (B.value ? Y() : J());
+		}, J = () => {
+			B.value = !0, H.value = 0, F.searchable && c(() => z.value?.focus());
+		}, Y = () => {
+			B.value = !1, V.value = "";
+		}, X = () => {
+			H.value < U.value.length - 1 && H.value++;
+		}, Z = () => {
+			H.value > 0 && H.value--;
+		}, Q = () => {
+			U.value[H.value] && K(U.value[H.value]);
+		}, $ = (e) => {
+			R.value && !R.value.contains(e.target) && Y();
+		};
+		return u(() => {
+			document.addEventListener("click", $);
+		}), d(() => {
+			document.removeEventListener("click", $);
+		}), v(B, (e) => {
+			e || (V.value = "");
+		}), (n, c) => (f(), i("div", {
+			class: l(["spicySelectWrapper", {
+				disabled: s.disabled,
+				hasError: s.error,
+				isOpen: B.value
+			}]),
+			ref_key: "wrapperRef",
+			ref: R
+		}, [
+			s.label ? (f(), i("label", {
+				key: 0,
+				class: "spicySelectLabel",
+				for: L
+			}, h(s.label), 1)) : r("", !0),
+			a("div", C, [a("button", {
+				type: "button",
+				class: l(["spicySelectTrigger", {
+					hasValue: W.value,
+					placeholder: !W.value
+				}]),
+				onClick: q,
+				disabled: s.disabled,
+				id: L,
+				"aria-expanded": B.value,
+				"aria-haspopup": "listbox",
+				"aria-label": s.ariaLabel || s.label || void 0
+			}, [a("span", T, h(W.value || s.placeholder), 1), c[1] ||= a("svg", {
+				class: "spicySelectArrow",
+				viewBox: "0 0 24 24"
+			}, [a("path", {
+				fill: "currentColor",
+				d: "M7 10l5 5 5-5H7z"
+			})], -1)], 10, w), o(t, { name: "spicySelect-slide" }, {
+				default: y(() => [B.value ? (f(), i("div", E, [s.searchable ? (f(), i("div", D, [b(a("input", {
+					type: "text",
+					class: "spicySelectSearchInput",
+					"onUpdate:modelValue": c[0] ||= (e) => V.value = e,
+					placeholder: "Search...",
+					ref_key: "searchInputRef",
+					ref: z,
+					onKeydown: [
+						x(S(X, ["prevent"]), ["down"]),
+						x(S(Z, ["prevent"]), ["up"]),
+						x(S(Q, ["prevent"]), ["enter"]),
+						x(S(Y, ["prevent"]), ["escape"])
+					]
+				}, null, 40, O), [[_, V.value]])])) : r("", !0), a("ul", k, [(f(!0), i(e, null, m(U.value, (e, t) => (f(), i("li", {
+					key: e.value,
+					class: l(["spicySelectOption", {
+						selected: G(e),
+						highlighted: t === H.value
+					}]),
+					role: "option",
+					"aria-selected": G(e),
+					onClick: (t) => K(e),
+					onMouseenter: (e) => H.value = t
+				}, [a("span", null, h(e.label), 1), G(e) ? (f(), i("svg", j, [...c[2] ||= [a("path", {
+					fill: "currentColor",
+					d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+				}, null, -1)]])) : r("", !0)], 42, A))), 128)), U.value.length === 0 ? (f(), i("li", M, "No options found")) : r("", !0)])])) : r("", !0)]),
+				_: 1
+			})]),
+			s.error ? (f(), i("span", N, h(s.error), 1)) : r("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { P as t };

package/dist/SpicySelect.js

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

package/dist/SpicySheet-DL4CsINT.js

@@ -0,0 +1,47 @@
+import { computed as e, createBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, renderSlot as o, resolveDynamicComponent as s, withCtx as c } from "vue";
+//#endregion
+//#region src/components/SpicySheet/SpicySheet.vue
+var l = /* @__PURE__ */ n({
+	__name: "SpicySheet",
+	props: {
+		isRound: {
+			type: Boolean,
+			default: !1
+		},
+		color: { default: "" },
+		padding: { default: "" },
+		flex: {
+			type: Boolean,
+			default: !1
+		},
+		elevation: { default: 0 },
+		gap: { default: "" },
+		width: { default: "" },
+		maxWidth: { default: "" },
+		border: { default: "" },
+		borderRadius: { default: "" },
+		tag: { default: "div" }
+	},
+	setup(n) {
+		let l = n, u = e(() => l.elevation ? `elevation-${l.elevation}` : ""), d = e(() => {
+			let e = {};
+			return l.color && (e.backgroundColor = l.color), l.padding && (e.padding = l.padding), l.gap && (e["--sheet-gap"] = l.gap), l.width && (e.width = l.width), l.maxWidth && (e.maxWidth = l.maxWidth), l.border && (e.border = l.border), l.borderRadius && (e.borderRadius = l.borderRadius), e;
+		});
+		return (e, l) => (a(), t(s(n.tag), {
+			class: r([
+				"spicySheet",
+				{
+					isRound: n.isRound && !n.borderRadius,
+					flex: n.flex
+				},
+				u.value
+			]),
+			style: i(d.value)
+		}, {
+			default: c(() => [o(e.$slots, "default")]),
+			_: 3
+		}, 8, ["class", "style"]));
+	}
+});
+//#endregion
+export { l as t };

package/dist/SpicySheet.js

@@ -1,2 +1,2 @@
-import { t as e } from "./SpicySheet-k07oHm4-.js";
+import { t as e } from "./SpicySheet-DL4CsINT.js";
 export { e as SpicySheet, e as default };

package/dist/SpicySkeleton-3pNqXUU-.js

@@ -0,0 +1,36 @@
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a } from "vue";
+//#endregion
+//#region src/components/SpicySkeleton/SpicySkeleton.vue
+var o = /* @__PURE__ */ n({
+	__name: "SpicySkeleton",
+	props: {
+		width: { default: "100%" },
+		height: { default: "1em" },
+		variant: { default: "rect" },
+		rounded: {
+			type: Boolean,
+			default: !1
+		},
+		color: { default: "" },
+		shimmer: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(n) {
+		let o = n, s = e(() => ({
+			width: o.width,
+			height: o.height,
+			...o.color ? { "--skSkeletonColor": o.color } : {},
+			...o.shimmer ? {} : { animation: "none" }
+		}));
+		return (e, o) => (a(), t("div", {
+			class: r(["spicySkeleton", [n.variant, { rounded: n.rounded }]]),
+			style: i(s.value),
+			role: "status",
+			"aria-label": "Loading"
+		}, null, 6));
+	}
+});
+//#endregion
+export { o as t };

package/dist/SpicySkeleton.js

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