npm - spicykatsu - Versions diffs - 0.4.1 → 0.8.0 - Mend

spicykatsu 0.4.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (175) hide show

package/README.md +43 -7
package/dist/SpicyAccordion-Cm-RI3r_.js +47 -0
package/dist/SpicyAccordion-TUM16yOu.js +50 -0
package/dist/SpicyAccordion.js +2 -0
package/dist/SpicyAlert-BD6QHaFZ.js +100 -0
package/dist/SpicyAlert-BwS5wCXQ.js +102 -0
package/dist/{lib/SpicyAlert/SpicyAlert.js → SpicyAlert-Bwi92wCd.js} +17 -17
package/dist/SpicyAlert.js +2 -0
package/dist/{lib/SpicyBtn/SpicyBtn.js → SpicyBtn-B5nk3vCZ.js} +14 -14
package/dist/SpicyBtn-DQ7A3JOM.js +80 -0
package/dist/SpicyBtn.js +2 -0
package/dist/SpicyCarousel-Be5oYKnj.js +121 -0
package/dist/SpicyCarousel-BpRYOVoa.js +123 -0
package/dist/SpicyCarousel-CkCmK2tQ.js +123 -0
package/dist/SpicyCarousel-DGtg0K1L.js +123 -0
package/dist/SpicyCarousel.js +2 -0
package/dist/SpicyDataTable-BqoW4IZ4.js +126 -0
package/dist/SpicyDataTable-CLkxtyXn.js +129 -0
package/dist/SpicyDataTable-x2bGAZMS.js +129 -0
package/dist/SpicyDataTable.js +2 -0
package/dist/{lib/SpicyDialog/SpicyDialog.js → SpicyDialog-CKtIwcPz.js} +4 -3
package/dist/SpicyDialog-P2nz6r0B.js +47 -0
package/dist/SpicyDialog.js +2 -0
package/dist/{lib/SpicyDivider/SpicyDivider.js → SpicyDivider-CDgC_pdd.js} +0 -0
package/dist/SpicyDivider.js +2 -0
package/dist/SpicyDropdown-COCmOTvv.js +66 -0
package/dist/SpicyDropdown-CkpSJleZ.js +64 -0
package/dist/{lib/SpicyDropdown/SpicyDropdown.js → SpicyDropdown-DLqjiK7t.js} +11 -11
package/dist/SpicyDropdown-DYtCUZwE.js +67 -0
package/dist/SpicyDropdown-HF7sHzZS.js +68 -0
package/dist/SpicyDropdown.js +2 -0
package/dist/{lib/SpicyFileInput/SpicyFileInput.js → SpicyFileInput-7dwibTqM.js} +16 -16
package/dist/SpicyFileInput-Cm8fYpHV.js +139 -0
package/dist/SpicyFileInput-CnO7Pecq.js +130 -0
package/dist/SpicyFileInput-Dkgt7474.js +132 -0
package/dist/SpicyFileInput.js +2 -0
package/dist/SpicyModal-DYN8yDMt.js +96 -0
package/dist/{lib/SpicyModal/SpicyModal.js → SpicyModal-Dx4dKN4V.js} +10 -10
package/dist/SpicyModal.js +2 -0
package/dist/SpicyProgress-62dbvFg1.js +76 -0
package/dist/SpicyProgress-CjD0SCA7.js +76 -0
package/dist/SpicyProgress.js +2 -0
package/dist/{lib/SpicySheet/SpicySheet.js → SpicySheet-k07oHm4-.js} +4 -3
package/dist/SpicySheet.js +2 -0
package/dist/SpicySlider-CGNWDfwv.js +63 -0
package/dist/{lib/SpicySlider/SpicySlider.js → SpicySlider-DPgJ_VLR.js} +12 -12
package/dist/SpicySlider-DfkXTMmc.js +63 -0
package/dist/SpicySlider.js +2 -0
package/dist/{lib/SpicyTabs/SpicyTabs.js → SpicyTabs-8fPN5eaX.js} +10 -10
package/dist/SpicyTabs-BHIwFnvt.js +67 -0
package/dist/SpicyTabs-DmB1xuWN.js +66 -0
package/dist/SpicyTabs-DrrGbixN.js +67 -0
package/dist/SpicyTabs-eGAZI2BB.js +70 -0
package/dist/SpicyTabs.js +2 -0
package/dist/{lib/SpicyTextArea/SpicyTextArea.js → SpicyTextArea-BqgEgEyx.js} +7 -7
package/dist/SpicyTextArea-CxEDRJ1P.js +41 -0
package/dist/SpicyTextArea.js +2 -0
package/dist/{lib/SpicyTextField/SpicyTextField.js → SpicyTextField-BMX1T6xl.js} +12 -12
package/dist/SpicyTextField-sziwr-ns.js +96 -0
package/dist/SpicyTextField.js +2 -0
package/dist/SpicyToggle-C-JcmPvu.js +55 -0
package/dist/{lib/SpicyToggle/SpicyToggle.js → SpicyToggle-DJTopuIB.js} +8 -8
package/dist/SpicyToggle-DdJKYSzD.js +55 -0
package/dist/SpicyToggle.js +2 -0
package/dist/{lib/SpicyTooltip/SpicyTooltip.js → SpicyTooltip-8nWZNAvJ.js} +11 -11
package/dist/SpicyTooltip-CE8Cg0wo.js +80 -0
package/dist/SpicyTooltip-aBB5NaKu.js +81 -0
package/dist/SpicyTooltip.js +2 -0
package/dist/{lib/SpicyTree/SpicyTree.js → SpicyTree-BkxOQATS.js} +13 -13
package/dist/SpicyTree.js +2 -0
package/dist/index.js +60 -0
package/dist/spicyDrag-BLiL2y_4.js +38 -0
package/dist/spicyDrag-CgD0GOa9.js +38 -0
package/dist/spicyDrag.js +2 -0
package/dist/spicyRipple-CViURy7j.js +43 -0
package/dist/spicyRipple-DHAFwamp.js +43 -0
package/dist/spicyRipple-DcEibbQv.js +42 -0
package/dist/spicyRipple.js +2 -0
package/dist/spicykatsu.css +2 -0
package/dist/spicykatsu.umd.js +1 -0
package/dist/{lib/SpicyAccordion → styles}/SpicyAccordion.css +1 -1
package/dist/styles/SpicyAlert.css +1 -0
package/dist/{lib/SpicyBtn → styles}/SpicyBtn.css +0 -0
package/dist/styles/SpicyCarousel.css +1 -0
package/dist/styles/SpicyDataTable.css +1 -0
package/dist/{lib/SpicyDialog → styles}/SpicyDialog.css +0 -0
package/dist/{lib/SpicyDropdown → styles}/SpicyDropdown.css +1 -1
package/dist/{lib/SpicyFileInput → styles}/SpicyFileInput.css +0 -0
package/dist/{lib/SpicyModal → styles}/SpicyModal.css +0 -0
package/dist/styles/SpicyProgress.css +1 -0
package/dist/{lib/SpicySheet → styles}/SpicySheet.css +0 -0
package/dist/{lib/SpicySlider → styles}/SpicySlider.css +0 -0
package/dist/{lib/SpicyTabs → styles}/SpicyTabs.css +1 -1
package/dist/{lib/SpicyTextArea → styles}/SpicyTextArea.css +0 -0
package/dist/styles/SpicyTextField.css +1 -0
package/dist/{lib/SpicyToggle → styles}/SpicyToggle.css +0 -0
package/dist/{lib/SpicyTooltip → styles}/SpicyTooltip.css +0 -0
package/dist/{lib/SpicyTree → styles}/SpicyTree.css +0 -0
package/dist/styles/base.css +28 -0
package/dist/styles/main.css +2 -0
package/dist/styles/variables.css +16 -0
package/dist/types/components/SpicyAccordion/SpicyAccordion.test.d.ts +1 -0
package/dist/types/components/SpicyAccordion/SpicyAccordion.vue.d.ts +24 -0
package/dist/types/components/SpicyAlert/SpicyAlert.test.d.ts +1 -0
package/dist/types/components/SpicyAlert/SpicyAlert.vue.d.ts +35 -0
package/dist/types/components/SpicyBtn/SpicyBtn.test.d.ts +1 -0
package/dist/types/components/SpicyBtn/SpicyBtn.vue.d.ts +39 -0
package/dist/types/components/SpicyCarousel/SpicyCarousel.test.d.ts +1 -0
package/dist/types/components/SpicyCarousel/SpicyCarousel.vue.d.ts +48 -0
package/dist/types/components/SpicyDataTable/SpicyDataTable.test.d.ts +1 -0
package/dist/types/components/SpicyDataTable/SpicyDataTable.vue.d.ts +52 -0
package/dist/types/components/SpicyDialog/SpicyDialog.test.d.ts +1 -0
package/dist/types/components/SpicyDialog/SpicyDialog.vue.d.ts +28 -0
package/dist/types/components/SpicyDivider/SpicyDivider.test.d.ts +1 -0
package/dist/types/components/SpicyDivider/SpicyDivider.vue.d.ts +26 -0
package/dist/types/components/SpicyDropdown/SpicyDropdown.test.d.ts +1 -0
package/dist/types/components/SpicyDropdown/SpicyDropdown.vue.d.ts +27 -0
package/dist/types/components/SpicyFileInput/SpicyFileInput.test.d.ts +1 -0
package/dist/types/components/SpicyFileInput/SpicyFileInput.vue.d.ts +42 -0
package/dist/types/components/SpicyModal/SpicyModal.test.d.ts +1 -0
package/dist/types/components/SpicyModal/SpicyModal.vue.d.ts +62 -0
package/dist/types/components/SpicyProgress/SpicyProgress.test.d.ts +1 -0
package/dist/types/components/SpicyProgress/SpicyProgress.vue.d.ts +31 -0
package/dist/types/components/SpicySheet/SpicySheet.test.d.ts +1 -0
package/dist/types/components/SpicySheet/SpicySheet.vue.d.ts +24 -0
package/dist/types/components/SpicySlider/SpicySlider.test.d.ts +1 -0
package/dist/types/components/SpicySlider/SpicySlider.vue.d.ts +34 -0
package/dist/types/components/SpicyTabs/SpicyTabs.test.d.ts +1 -0
package/dist/types/components/SpicyTabs/SpicyTabs.vue.d.ts +24 -0
package/dist/types/components/SpicyTextArea/SpicyTextArea.test.d.ts +1 -0
package/dist/types/components/SpicyTextArea/SpicyTextArea.vue.d.ts +32 -0
package/dist/types/components/SpicyTextField/SpicyTextField.test.d.ts +1 -0
package/dist/types/components/SpicyTextField/SpicyTextField.vue.d.ts +42 -0
package/dist/types/components/SpicyToggle/SpicyToggle.test.d.ts +1 -0
package/dist/types/components/SpicyToggle/SpicyToggle.vue.d.ts +22 -0
package/dist/types/components/SpicyTooltip/SpicyTooltip.test.d.ts +1 -0
package/dist/types/components/SpicyTooltip/SpicyTooltip.vue.d.ts +24 -0
package/dist/types/components/SpicyTree/SpicyTree.test.d.ts +1 -0
package/dist/types/components/SpicyTree/SpicyTree.vue.d.ts +13 -0
package/dist/types/components/SpicyTree/SpicyTreeNode.vue.d.ts +13 -0
package/dist/types/directives/spicyDrag.d.ts +6 -0
package/dist/types/directives/spicyRipple.d.ts +2 -0
package/dist/types/entries/SpicyAccordion.d.ts +2 -0
package/dist/types/entries/SpicyAlert.d.ts +2 -0
package/dist/types/entries/SpicyBtn.d.ts +2 -0
package/dist/types/entries/SpicyCarousel.d.ts +2 -0
package/dist/types/entries/SpicyDataTable.d.ts +2 -0
package/dist/types/entries/SpicyDialog.d.ts +2 -0
package/dist/types/entries/SpicyDivider.d.ts +2 -0
package/dist/types/entries/SpicyDropdown.d.ts +2 -0
package/dist/types/entries/SpicyFileInput.d.ts +2 -0
package/dist/types/entries/SpicyModal.d.ts +2 -0
package/dist/types/entries/SpicyProgress.d.ts +2 -0
package/dist/types/entries/SpicySheet.d.ts +2 -0
package/dist/types/entries/SpicySlider.d.ts +2 -0
package/dist/types/entries/SpicyTabs.d.ts +2 -0
package/dist/types/entries/SpicyTextArea.d.ts +2 -0
package/dist/types/entries/SpicyTextField.d.ts +2 -0
package/dist/types/entries/SpicyToggle.d.ts +2 -0
package/dist/types/entries/SpicyTooltip.d.ts +2 -0
package/dist/types/entries/SpicyTree.d.ts +3 -0
package/dist/types/entries/spicyDrag.d.ts +2 -0
package/dist/types/entries/spicyRipple.d.ts +2 -0
package/dist/types/index.d.ts +34 -0
package/dist/types/umd.d.ts +3 -0
package/package.json +158 -52
package/dist/lib/SpicyAccordion/SpicyAccordion.js +0 -47
package/dist/lib/SpicyAlert/SpicyAlert.css +0 -1
package/dist/lib/SpicyCarousel/SpicyCarousel.css +0 -1
package/dist/lib/SpicyCarousel/SpicyCarousel.js +0 -121
package/dist/lib/SpicyDataTable/SpicyDataTable.css +0 -1
package/dist/lib/SpicyDataTable/SpicyDataTable.js +0 -196
package/dist/lib/SpicyProgress/SpicyProgress.js +0 -4
package/dist/lib/SpicyTextField/SpicyTextField.css +0 -1
package/dist/spicykatsu.es.js +0 -148

package/README.md CHANGED Viewed

@@ -14,6 +14,10 @@ npm install spicykatsu
 ## Usage
+### Full Install (Recommended)
+All components, styles, and directives are registered automatically. No extra imports needed.
 ```ts
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -24,30 +28,62 @@ app.use(SpicyKatsu)
 app.mount('#app')
 ```
-Styles are automatically injected when you call `app.use(SpicyKatsu)` — no CSS import needed.
+### Tree-Shakeable (For production optimization)
-You can also import components individually for JS tree-shaking:
+Import only the components and directives you need. Each component's CSS is bundled automatically via its `<style>` block. However, you **must** also import the CSS variables so components look correct.
 ```ts
-import { SpicyBtn, SpicyModal } from 'spicykatsu'
+import { createApp } from 'vue'
+import App from './App.vue'
+import { SpicyBtn, SpicyModal } from 'spicykatsu/SpicyBtn'
+import { spicyRipple } from 'spicykatsu/spicyRipple'
+// Import CSS variables (required for components to look correct)
+import 'spicykatsu/styles/variables'
+const app = createApp(App)
+app.component('SpicyBtn', SpicyBtn)
+app.component('SpicyModal', SpicyModal)
+app.directive('spicyRipple', spicyRipple)
+app.mount('#app')
 ```
-For CSS tree-shaking, set `useStyles: false` and import only what you need:
+You can also import base utility styles if you use `.spicyText`, `.spicyHeader`, or `.spicyLink` classes:
 ```ts
-import 'spicykatsu/dist/lib/SpicyBtn/SpicyBtn.css'
+import 'spicykatsu/styles/base'
 ```
-## Options
+Or import all styles at once:
+```ts
+import 'spicykatsu/styles'
+```
+### Plugin with selective options
+You can also use the plugin with options to control what gets registered:
 ```ts
 app.use(SpicyKatsu, {
   useComponents: true,  // Register all components globally (default: true)
-  useStyles: true,      // Inject all component styles into <head> (default: true)
+  useStyles: true,      // Inject all styles into <head> (default: true)
   useDirectives: true   // Register v-spicyDrag and v-spicyRipple (default: true)
 })
 ```
+Set any to `false` to opt out of that part. For example, to register components yourself but still get styles injected:
+```ts
+app.use(SpicyKatsu, { useComponents: false })
+```
+To inject only CSS variables (useful when tree-shaking components but still using the plugin for style injection):
+```ts
+app.use(SpicyKatsu, { useComponents: false, useStyles: 'variables' })
+```
 ## Components
 | Component | Description |

package/dist/SpicyAccordion-Cm-RI3r_.js ADDED Viewed

@@ -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-TUM16yOu.js ADDED Viewed

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

package/dist/SpicyAccordion.js ADDED Viewed

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

package/dist/SpicyAlert-BD6QHaFZ.js ADDED Viewed

@@ -0,0 +1,100 @@
+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.vue?vue&type=script&setup=true&lang.ts
+var h = ["aria-label"], g = {
+	key: 0,
+	class: "spicyAlertIcon"
+}, _ = {
+	key: 1,
+	class: "spicyAlertIcon",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, v = ["d"], y = { class: "spicyAlertContainer" }, b = {
+	key: 0,
+	class: "spicyAlertTitle"
+}, x = {
+	key: 1,
+	class: "spicyAlertText"
+}, S = {
+	key: 0,
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, C = ["d"], w = { key: 1 }, T = /* @__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
+		}
+	},
+	emits: ["close"],
+	setup(a, { emit: T }) {
+		let E = a, D = T, O = l(!0), k = null, A = l(E.autoClose), j = null, M = () => {
+			O.value = !1, D("close");
+		}, N = () => {
+			A.value > 0 && (j = Date.now(), k = setTimeout(() => {
+				M();
+			}, A.value));
+		}, P = () => {
+			k &&= (clearTimeout(k), null);
+		}, F = () => {
+			if (k && j !== null) {
+				let e = Date.now() - j;
+				A.value = Math.max(0, A.value - e), P(), j = null;
+			}
+		}, I = () => {
+			N();
+		};
+		return f(() => E.autoClose, (e) => {
+			A.value = e, P(), N();
+		}), s(() => {
+			P();
+		}), N(), (s, l) => (c(), t(e, { name: "fade" }, {
+			default: p(() => [O.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(M, ["enter"]),
+				onMouseenter: F,
+				onMouseleave: I
+			}, [
+				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, 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: M,
+					"aria-label": "Close alert"
+				}, [a.closeIcon ? (c(), r("svg", S, [i("path", {
+					fill: "#000",
+					d: a.closeIcon
+				}, null, 8, C)])) : (c(), r("span", w, "X"))])) : n("", !0),
+				a.text ? n("", !0) : u(s.$slots, "default", { key: 3 })
+			], 42, h)) : n("", !0)]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { T as t };

package/dist/SpicyAlert-BwS5wCXQ.js ADDED Viewed

@@ -0,0 +1,102 @@
+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, onMounted as c, openBlock as l, ref as u, renderSlot as d, toDisplayString as f, watch as p, withCtx as m, withKeys as h } from "vue";
+//#region src/components/SpicyAlert/SpicyAlert.vue?vue&type=script&setup=true&lang.ts
+var 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
+		}
+	},
+	emits: ["close"],
+	setup(a, { emit: E }) {
+		let D = a, O = E, k = u(!0), A = null, j = u(D.autoClose), M = null, N = () => {
+			k.value = !1, O("close");
+		}, P = () => {
+			j.value > 0 && (M = Date.now(), A = setTimeout(() => {
+				N();
+			}, j.value));
+		}, F = () => {
+			A &&= (clearTimeout(A), null);
+		}, I = () => {
+			if (A && M !== null) {
+				let e = Date.now() - M;
+				j.value = Math.max(0, j.value - e), F(), M = null;
+			}
+		}, L = () => {
+			P();
+		};
+		return p(() => D.autoClose, (e) => {
+			j.value = e, F(), P();
+		}), s(() => {
+			F();
+		}), c(() => {
+			P();
+		}), (s, c) => (l(), t(e, { name: "fade" }, {
+			default: m(() => [k.value ? (l(), r("div", {
+				key: 0,
+				class: o(["spicyAlert", [a.variant, { spicyAlertRound: a.isRound }]]),
+				"aria-atomic": "true",
+				"aria-label": a.text || "Alert",
+				role: "alert",
+				onKeydown: h(N, ["enter"]),
+				onMouseenter: I,
+				onMouseleave: L
+			}, [
+				a.iconOnly && a.icon ? (l(), r("span", _, f(a.icon), 1)) : n("", !0),
+				a.mdi ? (l(), r("svg", v, [i("path", {
+					fill: "currentColor",
+					class: "spicyAlertMDI",
+					d: a.mdi
+				}, null, 8, y)])) : n("", !0),
+				i("div", b, [a.title ? (l(), r("span", x, f(a.title), 1)) : n("", !0), !a.iconOnly && a.text ? (l(), r("span", S, f(a.text), 1)) : n("", !0)]),
+				a.closable ? (l(), r("button", {
+					key: 2,
+					class: "spicyAlertCloseBtn",
+					onClick: N,
+					"aria-label": "Close alert"
+				}, [a.closeIcon ? (l(), r("svg", C, [i("path", {
+					fill: "#000",
+					d: a.closeIcon
+				}, null, 8, w)])) : (l(), r("span", T, "X"))])) : n("", !0),
+				a.text ? n("", !0) : d(s.$slots, "default", { key: 3 })
+			], 42, g)) : n("", !0)]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { E as t };

package/dist/{lib/SpicyAlert/SpicyAlert.js → SpicyAlert-Bwi92wCd.js} RENAMED Viewed

@@ -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 ADDED Viewed

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

package/dist/{lib/SpicyBtn/SpicyBtn.js → SpicyBtn-B5nk3vCZ.js} RENAMED Viewed

@@ -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-DQ7A3JOM.js ADDED Viewed

@@ -0,0 +1,80 @@
+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.vue?vue&type=script&setup=true&lang.ts
+var f = [
+	"disabled",
+	"aria-label",
+	"aria-disabled",
+	"tabindex"
+], p = {
+	key: 0,
+	class: "spicyBtnIcon",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+}, m = ["d"], h = {
+	key: 1,
+	class: "spicyBtnIcon"
+}, g = {
+	key: 2,
+	class: "spicyBtnText"
+}, _ = /* @__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: _ }) {
+		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,
+			"--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, _) => {
+			let v = l("spicyRipple");
+			return d((s(), n("button", {
+				class: a(w.value),
+				style: o(S.value),
+				disabled: i.disabled,
+				onClick: y,
+				"aria-label": x.value,
+				"aria-disabled": i.disabled,
+				tabindex: i.disabled ? -1 : 0
+			}, [
+				i.mdi ? (s(), n("svg", p, [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),
+				c(e.$slots, "default")
+			], 14, f)), [[v]]);
+		};
+	}
+});
+//#endregion
+export { _ as t };

package/dist/SpicyBtn.js ADDED Viewed

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