@solostylist/ui-kit 2.0.0 → 2.0.1

package/dist/s-no-ssr/s-no-ssr.js

@@ -1,2 +1,5 @@
-import { t as e } from "../s-no-ssr-D8tPdDfh.js";
-export { e as SNoSsr, e as default };
+import e from "@mui/material/NoSsr";
+//#region lib/s-no-ssr/s-no-ssr.tsx
+var t = e;
+//#endregion
+export { t as SNoSsr, t as default };

package/dist/s-pagination/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-pagination-Dt8Pk5Tp.js";
+import { SPagination as e } from "./s-pagination.js";
 export { e as SPagination, e as default };

package/dist/s-pagination/s-pagination.js

@@ -1,2 +1,85 @@
-import { t as e } from "../s-pagination-Dt8Pk5Tp.js";
-export { e as SPagination, e as default };
+import { getPaginationDimensions as e } from "./types.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@mui/material/Stack";
+import s from "@mui/material/Skeleton";
+import c from "@mui/material/Pagination";
+//#region lib/s-pagination/s-pagination.tsx
+var l = 5, u = t(c, {
+	name: "SPagination",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ ownerState: e }) => ({ ...e.loading && { display: "inline-flex" } })), d = r.forwardRef(function(t, c) {
+	let d = n({
+		props: t,
+		name: "SPagination"
+	}), { "aria-label": f = "pagination navigation", "aria-busy": p, className: m, color: h = "primary", count: g = 0, loading: _ = !1, loadingIndicator: v, shape: y = "rounded", size: b = "medium", style: x, sx: S, variant: C = "text", ...w } = d;
+	if (g <= 0) return null;
+	let T = e(b), E = _ || w.disabled, D = {
+		...d,
+		"aria-label": f,
+		color: h,
+		count: g,
+		disabled: E,
+		loading: _,
+		shape: y,
+		size: b,
+		variant: C
+	}, O = /* @__PURE__ */ i(o, {
+		"aria-label": `${f} loading`,
+		direction: "row",
+		role: "progressbar",
+		sx: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: `${T.gap}px`
+		},
+		children: v ?? (y === "circular" ? Array.from({ length: l }, (e, t) => /* @__PURE__ */ i(s, {
+			variant: "circular",
+			width: T.item,
+			height: T.item
+		}, t)) : /* @__PURE__ */ a(r.Fragment, { children: [
+			/* @__PURE__ */ i(s, {
+				variant: "rounded",
+				width: T.item,
+				height: T.item
+			}),
+			/* @__PURE__ */ i(s, {
+				variant: "rounded",
+				width: T.bar,
+				height: T.item
+			}),
+			/* @__PURE__ */ i(s, {
+				variant: "rounded",
+				width: T.item,
+				height: T.item
+			})
+		] }))
+	});
+	return /* @__PURE__ */ i(u, {
+		...w,
+		"aria-label": f,
+		"aria-busy": p ?? (_ || void 0),
+		className: m,
+		color: h,
+		count: _ ? 1 : g,
+		disabled: E,
+		hideNextButton: _ || w.hideNextButton,
+		hidePrevButton: _ || w.hidePrevButton,
+		ownerState: D,
+		page: w.page,
+		ref: c,
+		renderItem: _ ? () => O : w.renderItem,
+		shape: y,
+		showFirstButton: _ ? !1 : w.showFirstButton,
+		showLastButton: _ ? !1 : w.showLastButton,
+		size: b,
+		style: x,
+		sx: S,
+		variant: C
+	});
+});
+d.displayName = "SPagination";
+//#endregion
+export { d as SPagination, d as default };

package/dist/s-pixel-reveal/s-pixel-reveal.js

@@ -1,9 +1,9 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { resolveCanvasColor as t } from "../utils/canvas-color.js";
-import { t as n } from "../useForkRef-CKneCEtr.js";
-import { forwardRef as r, useCallback as i, useEffect as a, useRef as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Box as l, styled as u, useMediaQuery as d, useTheme as f, useThemeProps as p } from "@mui/material";
+import { forwardRef as n, useCallback as r, useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Box as c, styled as l, useMediaQuery as u, useTheme as d, useThemeProps as f } from "@mui/material";
+import { useForkRef as p } from "@mui/material/utils";
 //#region lib/s-pixel-reveal/s-pixel-reveal.tsx
 var m = class {
 	x;
@@ -44,7 +44,7 @@ var m = class {
 		let n = (t - this.size) * .5;
 		e.fillRect(this.x + n, this.y + n, this.size, this.size);
 	}
-}, h = u(l, {
+}, h = l(c, {
 	name: "SPixelReveal",
 	slot: "Root"
 })({});
@@ -56,12 +56,12 @@ function g({ x: e, y: t, gap: n, logicalWidth: r, logicalHeight: i, instant: a,
 function _(e, t, n) {
 	e.has(t) || e.set(t, []), e.get(t)?.push(n);
 }
-var v = r(function(r, l) {
-	let u = p({
-		props: r,
+var v = n(function(n, c) {
+	let l = f({
+		props: n,
 		name: "SPixelReveal"
-	}), { alt: v = "", children: y, colors: b, gap: x = 5, instant: S = !0, loading: C = !0, speed: w = 100, src: T, style: E, sx: D, ...O } = u, k = Number.isFinite(x) && x > 0 ? x : 5, A = f(), j = o(null), M = o(null), N = o(null), P = o(/* @__PURE__ */ new Map()), F = o(null), I = o(null), L = o(1e3 / 60), R = o(0), z = o(C), B = d("(prefers-reduced-motion: reduce)", { noSsr: !0 }), V = n(M, l), H = {
-		...u,
+	}), { alt: v = "", children: y, colors: b, gap: x = 5, instant: S = !0, loading: C = !0, speed: w = 100, src: T, style: E, sx: D, ...O } = l, k = Number.isFinite(x) && x > 0 ? x : 5, A = d(), j = a(null), M = a(null), N = a(null), P = a(/* @__PURE__ */ new Map()), F = a(null), I = a(null), L = a(1e3 / 60), R = a(0), z = a(C), B = u("(prefers-reduced-motion: reduce)", { noSsr: !0 }), V = p(M, c), H = {
+		...l,
 		alt: v,
 		gap: k,
 		hasImage: !!T,
@@ -71,10 +71,10 @@ var v = r(function(r, l) {
 		src: T
 	};
 	z.current = C;
-	let U = i((e, t, n, r) => {
+	let U = r((e, t, n, r) => {
 		let i = e - n, a = t - r;
 		return i * i + a * a;
-	}, []), W = i((e, t, n) => {
+	}, []), W = r((e, t, n) => {
 		F.current !== null && cancelAnimationFrame(F.current), R.current = performance.now();
 		let r = () => {
 			F.current = requestAnimationFrame(r);
@@ -94,12 +94,12 @@ var v = r(function(r, l) {
 			}), !z.current && !o && F.current !== null && (cancelAnimationFrame(F.current), F.current = null);
 		};
 		r();
-	}, [k]), G = i((e, t, n) => {
+	}, [k]), G = r((e, t, n) => {
 		e.clearRect(0, 0, t, n), z.current && P.current.forEach((t, n) => {
 			e.fillStyle = n;
 			for (let n of t) n.size = n.maxSize, n.draw(e, k);
 		});
-	}, [k]), K = i(() => {
+	}, [k]), K = r(() => {
 		let e = j.current, n = e?.getContext("2d");
 		if (!e || !n) return;
 		P.current = /* @__PURE__ */ new Map();
@@ -136,7 +136,7 @@ var v = r(function(r, l) {
 		U,
 		G,
 		W
-	]), q = i(() => {
+	]), q = r(() => {
 		let e = j.current, t = M.current, n = e?.getContext("2d");
 		if (!e || !t || !n) return;
 		let r = t.getBoundingClientRect();
@@ -144,7 +144,7 @@ var v = r(function(r, l) {
 		let i = Math.floor(r.width), a = Math.floor(r.height), o = window.devicePixelRatio ?? 1;
 		e.width = i * o, e.height = a * o, e.style.width = `${i}px`, e.style.height = `${a}px`, n.setTransform(1, 0, 0, 1, 0, 0), n.scale(o, o), K();
 	}, [K]);
-	return a(() => {
+	return i(() => {
 		q();
 		let e = new ResizeObserver(() => {
 			I.current === null && (I.current = requestAnimationFrame(() => {
@@ -154,7 +154,7 @@ var v = r(function(r, l) {
 		return M.current && e.observe(M.current), () => {
 			e.disconnect(), I.current !== null && (cancelAnimationFrame(I.current), I.current = null), F.current !== null && (cancelAnimationFrame(F.current), F.current = null);
 		};
-	}, [q]), a(() => {
+	}, [q]), i(() => {
 		let e = j.current, t = e?.getContext("2d");
 		if (!e || !t || P.current.size === 0) return;
 		let n = window.devicePixelRatio ?? 1, r = e.width / n, i = e.height / n;
@@ -168,7 +168,7 @@ var v = r(function(r, l) {
 		B,
 		G,
 		W
-	]), /* @__PURE__ */ c(h, {
+	]), /* @__PURE__ */ s(h, {
 		...O,
 		ref: V,
 		ownerState: H,
@@ -180,7 +180,7 @@ var v = r(function(r, l) {
 			width: "100%"
 		}, ...e(D)],
 		children: [
-			T && /* @__PURE__ */ s("img", {
+			T && /* @__PURE__ */ o("img", {
 				ref: N,
 				src: T,
 				alt: v,
@@ -194,7 +194,7 @@ var v = r(function(r, l) {
 				}
 			}),
 			y,
-			/* @__PURE__ */ s("canvas", {
+			/* @__PURE__ */ o("canvas", {
 				ref: j,
 				style: {
 					position: "absolute",

package/dist/s-quantity-input/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-quantity-input-mYCixlJc.js";
+import { SQuantityInput as e } from "./s-quantity-input.js";
 export { e as SQuantityInput, e as default };

package/dist/s-quantity-input/s-quantity-input.js

@@ -1,2 +1,246 @@
-import { t as e } from "../s-quantity-input-mYCixlJc.js";
-export { e as SQuantityInput, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { SIconButton as t } from "../s-icon-button/s-icon-button.js";
+import { forwardRef as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
+import { useControlled as u } from "@mui/material/utils";
+import d from "@mui/icons-material/Add";
+import f from "@mui/icons-material/Remove";
+//#region lib/s-quantity-input/s-quantity-input.tsx
+var p = {
+	small: {
+		height: 32,
+		iconButton: "small",
+		valueMinWidth: 28,
+		typography: "body2"
+	},
+	medium: {
+		height: 40,
+		iconButton: "medium",
+		valueMinWidth: 36,
+		typography: "body1"
+	},
+	large: {
+		height: 48,
+		iconButton: "large",
+		valueMinWidth: 44,
+		typography: "body1"
+	}
+}, m = (e, t, n) => {
+	let r = Math.max(e, t);
+	return n == null ? r : Math.min(r, n);
+}, h = c(o, {
+	name: "SQuantityInput",
+	slot: "Root"
+})({}), g = n((n, c) => {
+	let g = l({
+		props: n,
+		name: "SQuantityInput"
+	}), { value: _, defaultValue: v, onChange: y, min: b = 0, max: x, step: S = 1, color: C = "default", variant: w = "outlined", size: T = "medium", editable: E = !1, disabled: D = !1, "aria-label": O, "aria-labelledby": k, onKeyDown: A, role: j = "spinbutton", sx: M, tabIndex: N = D ? -1 : 0, ...P } = g, F = p[T], [I, L] = u({
+		controlled: _,
+		default: m(v ?? b, b, x),
+		name: "SQuantityInput",
+		state: "value"
+	}), R = {
+		...g,
+		color: C,
+		disabled: D,
+		editable: E,
+		min: b,
+		size: T,
+		step: S,
+		value: I,
+		variant: w
+	}, z = (e, t) => {
+		let n = m(t, b, x);
+		n !== I && (L(n), y?.(e, n));
+	}, B = D || I <= b, V = D || x != null && I >= x, H = w === "contained", U = w === "outlined", W = x == null ? null : String(x).length >= String(b).length ? String(x) : String(b), G = {
+		alignSelf: "stretch",
+		height: "auto",
+		width: F.height,
+		borderRadius: 0
+	}, K = { "&.Mui-disabled": { opacity: .5 } }, q = (e) => {
+		if (A?.(e), e.defaultPrevented || D) return;
+		let t = e.target.tagName === "INPUT";
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault(), z(e, I + S);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), z(e, I - S);
+				break;
+			case "ArrowRight":
+				if (t) break;
+				e.preventDefault(), z(e, I + S);
+				break;
+			case "ArrowLeft":
+				if (t) break;
+				e.preventDefault(), z(e, I - S);
+				break;
+			case "Home":
+				if (t) break;
+				e.preventDefault(), z(e, b);
+				break;
+			case "End":
+				if (t || x == null) break;
+				e.preventDefault(), z(e, x);
+				break;
+			default: break;
+		}
+	}, J = /* @__PURE__ */ i(o, {
+		component: "input",
+		inputMode: "numeric",
+		value: String(I),
+		disabled: D,
+		role: j,
+		"aria-label": O,
+		"aria-labelledby": k,
+		"aria-valuenow": I,
+		"aria-valuemin": b,
+		"aria-valuemax": x,
+		"aria-disabled": D || void 0,
+		tabIndex: N,
+		onChange: (e) => {
+			let t = e.target.value, n = parseInt(t.replace(/[^0-9-]/g, ""), 10);
+			Number.isNaN(n) ? (t === "" || t === "-") && z(e, b) : z(e, n);
+		},
+		onFocus: (e) => e.target.select(),
+		sx: {
+			border: 0,
+			outline: "none",
+			p: 0,
+			background: "transparent",
+			font: "inherit",
+			color: "inherit",
+			WebkitTextFillColor: "currentcolor",
+			textAlign: "center",
+			fontVariantNumeric: "tabular-nums",
+			...W == null ? {
+				minWidth: "1ch",
+				width: `${String(I).length || 1}ch`
+			} : {
+				position: "absolute",
+				inset: 0,
+				width: "100%"
+			}
+		}
+	}), Y = (e) => {
+		let t = C === "default" ? (e.vars ?? e).palette.grey : (e.vars ?? e).palette[C];
+		return {
+			backgroundColor: t[800],
+			color: t[50],
+			"&:hover": {
+				backgroundColor: t[900],
+				color: t[100]
+			},
+			"&:active": { backgroundColor: t[900] },
+			"&.Mui-disabled": {
+				backgroundColor: t[800],
+				color: t[50],
+				opacity: .5
+			},
+			...e.applyStyles("dark", {
+				color: t[100],
+				"&:hover": { color: t[50] },
+				"&.Mui-disabled": { color: t[100] }
+			})
+		};
+	};
+	return /* @__PURE__ */ a(h, {
+		...P,
+		ref: c,
+		ownerState: R,
+		role: E ? void 0 : j,
+		"aria-label": E ? void 0 : O,
+		"aria-labelledby": E ? void 0 : k,
+		"aria-valuenow": E ? void 0 : I,
+		"aria-valuemin": E ? void 0 : b,
+		"aria-valuemax": E ? void 0 : x,
+		"aria-disabled": E ? void 0 : D || void 0,
+		tabIndex: E ? void 0 : N,
+		onKeyDown: q,
+		sx: [(e) => ({
+			display: "inline-flex",
+			alignItems: "center",
+			height: F.height,
+			borderRadius: `${e.shape.borderRadius}px`,
+			outline: "none",
+			[E ? "&:has(input:focus-visible)" : "&:focus-visible"]: {
+				outline: "2px solid",
+				outlineColor: (e.vars ?? e).palette.primary[800],
+				outlineOffset: 2
+			},
+			...U ? {
+				border: "1px solid",
+				borderColor: (e.vars ?? e).palette.divider,
+				overflow: "hidden"
+			} : { gap: 1 },
+			...D ? { opacity: .5 } : {}
+		}), ...e(M)],
+		children: [
+			/* @__PURE__ */ i(t, {
+				"aria-label": "Decrease",
+				size: F.iconButton,
+				color: H ? void 0 : C,
+				disabled: B,
+				sx: H ? Y : U ? [G, K] : K,
+				onClick: (e) => z(e, I - S),
+				children: /* @__PURE__ */ i(f, {})
+			}),
+			U && /* @__PURE__ */ i(o, { sx: {
+				width: "1px",
+				alignSelf: "stretch",
+				bgcolor: "divider"
+			} }),
+			/* @__PURE__ */ i(s, {
+				component: "span",
+				variant: F.typography,
+				sx: {
+					position: "relative",
+					minWidth: F.valueMinWidth,
+					px: 1,
+					alignSelf: "stretch",
+					display: "inline-flex",
+					alignItems: "center",
+					justifyContent: "center",
+					fontWeight: 500,
+					color: "text.primary",
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: W == null ? E ? J : I : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(o, {
+					component: "span",
+					"aria-hidden": !0,
+					sx: { visibility: "hidden" },
+					children: W
+				}), E ? J : /* @__PURE__ */ i(o, {
+					component: "span",
+					sx: {
+						position: "absolute",
+						inset: 0,
+						display: "inline-flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: I
+				})] })
+			}),
+			U && /* @__PURE__ */ i(o, { sx: {
+				width: "1px",
+				alignSelf: "stretch",
+				bgcolor: "divider"
+			} }),
+			/* @__PURE__ */ i(t, {
+				"aria-label": "Increase",
+				size: F.iconButton,
+				color: H ? void 0 : C,
+				disabled: V,
+				sx: H ? Y : U ? [G, K] : K,
+				onClick: (e) => z(e, I + S),
+				children: /* @__PURE__ */ i(d, {})
+			})
+		]
+	});
+});
+g.displayName = "SQuantityInput";
+//#endregion
+export { g as SQuantityInput, g as default };

package/dist/s-review/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-review-DSXXtWlL.js";
+import { SReview as e } from "./s-review.js";
 export { e as SReview, e as default };