@solostylist/ui-kit 2.0.2 → 2.0.4

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "advanced ui kit for solostylist",
   "type": "module",
   "main": "dist/main.js",
@@ -53,6 +53,7 @@
   "scripts": {
     "build": "tsc --p ./tsconfig-build.json && vite build",
     "dev": "tsc --p ./tsconfig-build.json --watch",
+    "test": "vitest run",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx,json,md}\" --cache",
@@ -175,6 +176,8 @@
     "@mui/x-date-pickers": "^9.2.0",
     "@stripe/react-stripe-js": "^5.6.1",
     "@stripe/stripe-js": "^8.11.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@tiptap/core": "^3.23.4",
     "@tiptap/extension-link": "^3.23.4",
     "@tiptap/extension-placeholder": "^3.23.4",
@@ -202,6 +205,7 @@
     "husky": "^9.1.7",
     "i18next": "^25.10.10",
     "i18next-http-backend": "^3.0.6",
+    "jsdom": "^30.0.1",
     "lint-staged": "^16.4.0",
     "overlayscrollbars": "^2.16.0",
     "overlayscrollbars-react": "^0.5.6",
@@ -218,7 +222,8 @@
     "uuid": "^13.0.2",
     "vite": "^8.0.13",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-lib-inject-css": "^2.2.2"
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vitest": "^4.1.10"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -240,6 +245,6 @@
   "author": "Lê Đặng Trường Đạt",
   "license": "ISC",
   "dependencies": {
-    "@solostylist/core": "^1.0.3"
+    "@solostylist/core": "^1.0.4"
   }
 }

package/dist/Add-CEnTWsXs.js

@@ -1,6 +0,0 @@
-import { t as e } from "./createSvgIcon-3y-gS0r1.js";
-import { jsx as t } from "react/jsx-runtime";
-//#region ../../node_modules/@mui/icons-material/Add.mjs
-var n = e(/* @__PURE__ */ t("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" }), "Add");
-//#endregion
-export { n as t };

package/dist/ArrowUpward-udL1ltj2.js

@@ -1,6 +0,0 @@
-import { t as e } from "./createSvgIcon-3y-gS0r1.js";
-import { jsx as t } from "react/jsx-runtime";
-//#region ../../node_modules/@mui/icons-material/ArrowUpward.mjs
-var n = e(/* @__PURE__ */ t("path", { d: "m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z" }), "ArrowUpward");
-//#endregion
-export { n as t };

package/dist/Box-9oeZgA1U.js

@@ -1,46 +0,0 @@
-import { n as e } from "./chunk-C_CI6nMA.js";
-import { c as t, l as n, n as r } from "./defaultTheme-BaGcIzCh.js";
-import { t as i } from "./prop-types-BzYPyWN7.js";
-import { a, t as o } from "./createTheme-xB2Em0Na.js";
-import { n as s } from "./generateUtilityClass-PAIOm1jC.js";
-import { t as c } from "./clsx-DGZSe4Nt.js";
-import { t as l } from "./generateUtilityClasses-DvX505Gy.js";
-import * as u from "react";
-import { jsx as d } from "react/jsx-runtime";
-//#region ../../node_modules/@mui/system/createBox/createBox.mjs
-function f(e = {}) {
-	let { themeId: n, defaultTheme: i, defaultClassName: o = "MuiBox-root", generateClassName: s } = e, l = t("div", { shouldForwardProp: (e) => e !== "theme" && e !== "sx" && e !== "as" })(a);
-	return /* @__PURE__ */ u.forwardRef(function(e, t) {
-		let a = r(i), { className: u, component: f = "div", ...p } = e;
-		return /* @__PURE__ */ d(l, {
-			as: f,
-			ref: t,
-			className: c(u, s ? s(o) : o),
-			theme: n && a[n] || a,
-			...p
-		});
-	});
-}
-//#endregion
-//#region ../../node_modules/@mui/material/Box/boxClasses.mjs
-var p = /* @__PURE__ */ e(i(), 1), m = l("MuiBox", ["root"]), h = f({
-	themeId: n,
-	defaultTheme: o(),
-	defaultClassName: m.root,
-	generateClassName: s.generate
-});
-process.env.NODE_ENV !== "production" && (h.propTypes = {
-	children: p.default.node,
-	component: p.default.elementType,
-	sx: p.default.oneOfType([
-		p.default.arrayOf(p.default.oneOfType([
-			p.default.func,
-			p.default.object,
-			p.default.bool
-		])),
-		p.default.func,
-		p.default.object
-	])
-});
-//#endregion
-export { h as t };

package/dist/Button-DaLr1m20.js

@@ -1,534 +0,0 @@
-import { n as e } from "./chunk-C_CI6nMA.js";
-import { t } from "./prop-types-BzYPyWN7.js";
-import { r as n, t as r } from "./DefaultPropsProvider-ebWx4_5E.js";
-import { t as i } from "./generateUtilityClass-PAIOm1jC.js";
-import { t as a } from "./clsx-DGZSe4Nt.js";
-import { t as o } from "./generateUtilityClasses-DvX505Gy.js";
-import { n as s, t as c } from "./styled-Bog8QCl3.js";
-import { t as l } from "./resolveProps-7jIA45vn.js";
-import { n as u, r as d } from "./IconButton-CE-4GamO.js";
-import { t as f } from "./memoTheme-qFyKAk7y.js";
-import { t as p } from "./ButtonBase-DovDC6-1.js";
-import { t as m } from "./capitalize-C0baBJCm.js";
-import { t as h } from "./createSimplePaletteValueFilter-DFvyXHoZ.js";
-import * as g from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-//#region ../../node_modules/@mui/material/Button/buttonClasses.mjs
-var y = /* @__PURE__ */ e(t(), 1);
-function b(e) {
-	return i("MuiButton", e);
-}
-var x = o("MuiButton", /* @__PURE__ */ "root.text.outlined.contained.disableElevation.focusVisible.disabled.colorInherit.colorPrimary.colorSecondary.colorSuccess.colorError.colorInfo.colorWarning.sizeMedium.sizeSmall.sizeLarge.fullWidth.startIcon.endIcon.icon.loading.loadingWrapper.loadingIconPlaceholder.loadingIndicator.loadingPositionCenter.loadingPositionStart.loadingPositionEnd".split(".")), S = /* @__PURE__ */ g.createContext({});
-process.env.NODE_ENV !== "production" && (S.displayName = "ButtonGroupContext");
-//#endregion
-//#region ../../node_modules/@mui/material/ButtonGroup/ButtonGroupButtonContext.mjs
-var C = /* @__PURE__ */ g.createContext(void 0);
-process.env.NODE_ENV !== "production" && (C.displayName = "ButtonGroupButtonContext");
-//#endregion
-//#region ../../node_modules/@mui/material/Button/Button.mjs
-var w = (e) => {
-	let { color: t, disableElevation: r, fullWidth: i, size: a, variant: o, loading: s, loadingPosition: c, classes: l } = e, u = n({
-		root: [
-			"root",
-			s && "loading",
-			o,
-			`size${m(a)}`,
-			`color${m(t)}`,
-			r && "disableElevation",
-			i && "fullWidth",
-			s && `loadingPosition${m(c)}`
-		],
-		startIcon: ["icon", "startIcon"],
-		endIcon: ["icon", "endIcon"],
-		loadingIndicator: ["loadingIndicator"],
-		loadingWrapper: ["loadingWrapper"]
-	}, b, l);
-	return {
-		...l,
-		...u
-	};
-}, T = [
-	{
-		props: { size: "small" },
-		style: { "& > *:nth-of-type(1)": { fontSize: 18 } }
-	},
-	{
-		props: { size: "medium" },
-		style: { "& > *:nth-of-type(1)": { fontSize: 20 } }
-	},
-	{
-		props: { size: "large" },
-		style: { "& > *:nth-of-type(1)": { fontSize: 22 } }
-	}
-], E = c(p, {
-	shouldForwardProp: (e) => s(e) || e === "classes",
-	name: "MuiButton",
-	slot: "Root",
-	overridesResolver: (e, t) => {
-		let { ownerState: n } = e;
-		return [
-			t.root,
-			t[n.variant],
-			t[`size${m(n.size)}`],
-			n.color === "inherit" && t.colorInherit,
-			n.disableElevation && t.disableElevation,
-			n.fullWidth && t.fullWidth,
-			n.loading && t.loading
-		];
-	}
-})(f(({ theme: e }) => {
-	let t = e.palette.mode === "light" ? e.palette.grey[300] : e.palette.grey[800], n = e.palette.mode === "light" ? e.palette.grey.A100 : e.palette.grey[700];
-	return {
-		...e.typography.button,
-		minWidth: 64,
-		padding: "6px 16px",
-		border: 0,
-		borderRadius: (e.vars || e).shape.borderRadius,
-		transition: e.transitions.create([
-			"background-color",
-			"box-shadow",
-			"border-color",
-			"color"
-		], { duration: e.transitions.duration.short }),
-		"&:hover": { textDecoration: "none" },
-		[`&.${x.disabled}`]: { color: (e.vars || e).palette.action.disabled },
-		variants: [
-			{
-				props: ({ ownerState: e }) => e.startIcon || e.loading && e.loadingPosition === "start",
-				style: { "&::before": {
-					content: "\"\\200b\"",
-					width: 0,
-					overflow: "hidden"
-				} }
-			},
-			{
-				props: { variant: "contained" },
-				style: {
-					color: "var(--variant-containedColor)",
-					backgroundColor: "var(--variant-containedBg)",
-					boxShadow: (e.vars || e).shadows[2],
-					"&:hover": {
-						boxShadow: (e.vars || e).shadows[4],
-						"@media (hover: none)": { boxShadow: (e.vars || e).shadows[2] }
-					},
-					"&:active": { boxShadow: (e.vars || e).shadows[8] },
-					[`&.${x.focusVisible}`]: { boxShadow: (e.vars || e).shadows[6] },
-					[`&.${x.disabled}`]: {
-						color: (e.vars || e).palette.action.disabled,
-						boxShadow: (e.vars || e).shadows[0],
-						backgroundColor: (e.vars || e).palette.action.disabledBackground
-					}
-				}
-			},
-			{
-				props: { variant: "outlined" },
-				style: {
-					padding: "5px 15px",
-					border: "1px solid currentColor",
-					borderColor: "var(--variant-outlinedBorder, currentColor)",
-					backgroundColor: "var(--variant-outlinedBg)",
-					color: "var(--variant-outlinedColor)",
-					[`&.${x.disabled}`]: { border: `1px solid ${(e.vars || e).palette.action.disabledBackground}` }
-				}
-			},
-			{
-				props: { variant: "text" },
-				style: {
-					padding: "6px 8px",
-					color: "var(--variant-textColor)",
-					backgroundColor: "var(--variant-textBg)"
-				}
-			},
-			...Object.entries(e.palette).filter(h()).map(([t]) => ({
-				props: { color: t },
-				style: {
-					"--variant-textColor": (e.vars || e).palette[t].main,
-					"--variant-outlinedColor": (e.vars || e).palette[t].main,
-					"--variant-outlinedBorder": e.alpha((e.vars || e).palette[t].main, .5),
-					"--variant-containedColor": (e.vars || e).palette[t].contrastText,
-					"--variant-containedBg": (e.vars || e).palette[t].main,
-					"@media (hover: hover)": { "&:hover": {
-						"--variant-containedBg": (e.vars || e).palette[t].dark,
-						"--variant-textBg": e.alpha((e.vars || e).palette[t].main, (e.vars || e).palette.action.hoverOpacity),
-						"--variant-outlinedBorder": (e.vars || e).palette[t].main,
-						"--variant-outlinedBg": e.alpha((e.vars || e).palette[t].main, (e.vars || e).palette.action.hoverOpacity)
-					} }
-				}
-			})),
-			{
-				props: { color: "inherit" },
-				style: {
-					color: "inherit",
-					borderColor: "currentColor",
-					"--variant-containedBg": e.vars ? e.vars.palette.Button.inheritContainedBg : t,
-					"@media (hover: hover)": { "&:hover": {
-						"--variant-containedBg": e.vars ? e.vars.palette.Button.inheritContainedHoverBg : n,
-						"--variant-textBg": e.alpha((e.vars || e).palette.text.primary, (e.vars || e).palette.action.hoverOpacity),
-						"--variant-outlinedBg": e.alpha((e.vars || e).palette.text.primary, (e.vars || e).palette.action.hoverOpacity)
-					} }
-				}
-			},
-			{
-				props: {
-					size: "small",
-					variant: "text"
-				},
-				style: {
-					padding: "4px 5px",
-					fontSize: e.typography.pxToRem(13)
-				}
-			},
-			{
-				props: {
-					size: "large",
-					variant: "text"
-				},
-				style: {
-					padding: "8px 11px",
-					fontSize: e.typography.pxToRem(15)
-				}
-			},
-			{
-				props: {
-					size: "small",
-					variant: "outlined"
-				},
-				style: {
-					padding: "3px 9px",
-					fontSize: e.typography.pxToRem(13)
-				}
-			},
-			{
-				props: {
-					size: "large",
-					variant: "outlined"
-				},
-				style: {
-					padding: "7px 21px",
-					fontSize: e.typography.pxToRem(15)
-				}
-			},
-			{
-				props: {
-					size: "small",
-					variant: "contained"
-				},
-				style: {
-					padding: "4px 10px",
-					fontSize: e.typography.pxToRem(13)
-				}
-			},
-			{
-				props: {
-					size: "large",
-					variant: "contained"
-				},
-				style: {
-					padding: "8px 22px",
-					fontSize: e.typography.pxToRem(15)
-				}
-			},
-			{
-				props: { disableElevation: !0 },
-				style: {
-					boxShadow: "none",
-					"&:hover": { boxShadow: "none" },
-					[`&.${x.focusVisible}`]: { boxShadow: "none" },
-					"&:active": { boxShadow: "none" },
-					[`&.${x.disabled}`]: { boxShadow: "none" }
-				}
-			},
-			{
-				props: { fullWidth: !0 },
-				style: { width: "100%" }
-			},
-			{
-				props: { loadingPosition: "center" },
-				style: {
-					transition: e.transitions.create([
-						"background-color",
-						"box-shadow",
-						"border-color"
-					], { duration: e.transitions.duration.short }),
-					[`&.${x.loading}`]: { color: "transparent" }
-				}
-			}
-		]
-	};
-})), D = c("span", {
-	name: "MuiButton",
-	slot: "StartIcon",
-	overridesResolver: (e, t) => {
-		let { ownerState: n } = e;
-		return [t.startIcon, n.loading && t.startIconLoadingStart];
-	}
-})(({ theme: e }) => ({
-	display: "inherit",
-	marginRight: 8,
-	marginLeft: -4,
-	variants: [
-		{
-			props: { size: "small" },
-			style: { marginLeft: -2 }
-		},
-		{
-			props: {
-				loadingPosition: "start",
-				loading: !0
-			},
-			style: {
-				transition: e.transitions.create(["opacity"], { duration: e.transitions.duration.short }),
-				opacity: 0
-			}
-		},
-		{
-			props: {
-				loadingPosition: "start",
-				loading: !0,
-				fullWidth: !0
-			},
-			style: { marginRight: -8 }
-		},
-		...T
-	]
-})), O = c("span", {
-	name: "MuiButton",
-	slot: "EndIcon",
-	overridesResolver: (e, t) => {
-		let { ownerState: n } = e;
-		return [t.endIcon, n.loading && t.endIconLoadingEnd];
-	}
-})(({ theme: e }) => ({
-	display: "inherit",
-	marginRight: -4,
-	marginLeft: 8,
-	variants: [
-		{
-			props: { size: "small" },
-			style: { marginRight: -2 }
-		},
-		{
-			props: {
-				loadingPosition: "end",
-				loading: !0
-			},
-			style: {
-				transition: e.transitions.create(["opacity"], { duration: e.transitions.duration.short }),
-				opacity: 0
-			}
-		},
-		{
-			props: {
-				loadingPosition: "end",
-				loading: !0,
-				fullWidth: !0
-			},
-			style: { marginLeft: -8 }
-		},
-		...T
-	]
-})), k = c("span", {
-	name: "MuiButton",
-	slot: "LoadingIndicator"
-})(({ theme: e }) => ({
-	display: "none",
-	position: "absolute",
-	visibility: "visible",
-	variants: [
-		{
-			props: { loading: !0 },
-			style: { display: "flex" }
-		},
-		{
-			props: { loadingPosition: "start" },
-			style: { left: 14 }
-		},
-		{
-			props: {
-				loadingPosition: "start",
-				size: "small"
-			},
-			style: { left: 10 }
-		},
-		{
-			props: {
-				variant: "text",
-				loadingPosition: "start"
-			},
-			style: { left: 6 }
-		},
-		{
-			props: { loadingPosition: "center" },
-			style: {
-				left: "50%",
-				transform: "translate(-50%)",
-				color: (e.vars || e).palette.action.disabled
-			}
-		},
-		{
-			props: { loadingPosition: "end" },
-			style: { right: 14 }
-		},
-		{
-			props: {
-				loadingPosition: "end",
-				size: "small"
-			},
-			style: { right: 10 }
-		},
-		{
-			props: {
-				variant: "text",
-				loadingPosition: "end"
-			},
-			style: { right: 6 }
-		},
-		{
-			props: {
-				loadingPosition: "start",
-				fullWidth: !0
-			},
-			style: {
-				position: "relative",
-				left: -10
-			}
-		},
-		{
-			props: {
-				loadingPosition: "end",
-				fullWidth: !0
-			},
-			style: {
-				position: "relative",
-				right: -10
-			}
-		}
-	]
-})), A = c("span", {
-	name: "MuiButton",
-	slot: "LoadingIconPlaceholder"
-})({
-	display: "inline-block",
-	width: "1em",
-	height: "1em"
-}), j = /* @__PURE__ */ g.forwardRef(function(e, t) {
-	let n = g.useContext(S), i = g.useContext(C), o = r({
-		props: l(n, e),
-		name: "MuiButton"
-	}), { children: s, color: c = "primary", component: f = "button", className: p, disabled: m = !1, disableElevation: h = !1, disableFocusRipple: y = !1, endIcon: b, focusVisibleClassName: x, fullWidth: T = !1, id: j, loading: M = null, loadingIndicator: N, loadingPosition: P = "center", size: F = "medium", startIcon: I, type: L, variant: R = "text", ...z } = o, B = d(j), V = N ?? /* @__PURE__ */ _(u, {
-		"aria-labelledby": B,
-		color: "inherit",
-		size: 16
-	}), H = {
-		...o,
-		color: c,
-		component: f,
-		disabled: m,
-		disableElevation: h,
-		disableFocusRipple: y,
-		fullWidth: T,
-		loading: M,
-		loadingIndicator: V,
-		loadingPosition: P,
-		size: F,
-		type: L,
-		variant: R
-	}, U = w(H), W = (I || M && P === "start") && /* @__PURE__ */ _(D, {
-		className: U.startIcon,
-		ownerState: H,
-		children: I || /* @__PURE__ */ _(A, {
-			className: U.loadingIconPlaceholder,
-			ownerState: H
-		})
-	}), G = (b || M && P === "end") && /* @__PURE__ */ _(O, {
-		className: U.endIcon,
-		ownerState: H,
-		children: b || /* @__PURE__ */ _(A, {
-			className: U.loadingIconPlaceholder,
-			ownerState: H
-		})
-	}), K = i || "", q = typeof M == "boolean" ? /* @__PURE__ */ _("span", {
-		className: U.loadingWrapper,
-		style: { display: "contents" },
-		children: M && /* @__PURE__ */ _(k, {
-			className: U.loadingIndicator,
-			ownerState: H,
-			children: V
-		})
-	}) : null, { root: J, ...Y } = U;
-	return /* @__PURE__ */ v(E, {
-		ownerState: H,
-		className: a(n.className, U.root, p, K),
-		component: f,
-		disabled: m || M,
-		focusRipple: !y,
-		focusVisibleClassName: a(U.focusVisible, x),
-		ref: t,
-		internalNativeButton: !0,
-		type: L,
-		id: M ? B : j,
-		...z,
-		classes: Y,
-		children: [
-			W,
-			P !== "end" && q,
-			s,
-			P === "end" && q,
-			G
-		]
-	});
-});
-process.env.NODE_ENV !== "production" && (j.propTypes = {
-	children: y.default.node,
-	classes: y.default.object,
-	className: y.default.string,
-	color: y.default.oneOfType([y.default.oneOf([
-		"inherit",
-		"primary",
-		"secondary",
-		"success",
-		"error",
-		"info",
-		"warning"
-	]), y.default.string]),
-	component: y.default.elementType,
-	disabled: y.default.bool,
-	disableElevation: y.default.bool,
-	disableFocusRipple: y.default.bool,
-	disableRipple: y.default.bool,
-	endIcon: y.default.node,
-	focusVisibleClassName: y.default.string,
-	fullWidth: y.default.bool,
-	href: y.default.string,
-	id: y.default.string,
-	loading: y.default.bool,
-	loadingIndicator: y.default.node,
-	loadingPosition: y.default.oneOf([
-		"center",
-		"end",
-		"start"
-	]),
-	size: y.default.oneOfType([y.default.oneOf([
-		"small",
-		"medium",
-		"large"
-	]), y.default.string]),
-	startIcon: y.default.node,
-	sx: y.default.oneOfType([
-		y.default.arrayOf(y.default.oneOfType([
-			y.default.func,
-			y.default.object,
-			y.default.bool
-		])),
-		y.default.func,
-		y.default.object
-	]),
-	type: y.default.string,
-	variant: y.default.oneOfType([y.default.oneOf([
-		"contained",
-		"outlined",
-		"text"
-	]), y.default.string])
-});
-//#endregion
-export { j as t };