@solostylist/ui-kit 2.0.0 → 2.0.1

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

@@ -1,246 +0,0 @@
-import { toSxArray as e } from "./utils/sx.js";
-import { t } from "./createSvgIcon-B0SZlJF1.js";
-import { t as n } from "./useControlled-BeB0W_Ui.js";
-import { t as r } from "./Add-COc9VdNg.js";
-import { SIconButton as i } from "./s-icon-button/s-icon-button.js";
-import { forwardRef as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Box as l, Typography as u, styled as d, useThemeProps as f } from "@mui/material";
-//#region ../../node_modules/@mui/icons-material/Remove.mjs
-var p = t(/* @__PURE__ */ s("path", { d: "M19 13H5v-2h14z" }), "Remove"), m = {
-	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"
-	}
-}, h = (e, t, n) => {
-	let r = Math.max(e, t);
-	return n == null ? r : Math.min(r, n);
-}, g = d(l, {
-	name: "SQuantityInput",
-	slot: "Root"
-})({}), _ = a((t, a) => {
-	let d = f({
-		props: t,
-		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 } = d, F = m[T], [I, L] = n({
-		controlled: _,
-		default: h(v ?? b, b, x),
-		name: "SQuantityInput",
-		state: "value"
-	}), R = {
-		...d,
-		color: C,
-		disabled: D,
-		editable: E,
-		min: b,
-		size: T,
-		step: S,
-		value: I,
-		variant: w
-	}, z = (e, t) => {
-		let n = h(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__ */ s(l, {
-		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__ */ c(g, {
-		...P,
-		ref: a,
-		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__ */ s(i, {
-				"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__ */ s(p, {})
-			}),
-			U && /* @__PURE__ */ s(l, { sx: {
-				width: "1px",
-				alignSelf: "stretch",
-				bgcolor: "divider"
-			} }),
-			/* @__PURE__ */ s(u, {
-				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__ */ c(o, { children: [/* @__PURE__ */ s(l, {
-					component: "span",
-					"aria-hidden": !0,
-					sx: { visibility: "hidden" },
-					children: W
-				}), E ? J : /* @__PURE__ */ s(l, {
-					component: "span",
-					sx: {
-						position: "absolute",
-						inset: 0,
-						display: "inline-flex",
-						alignItems: "center",
-						justifyContent: "center"
-					},
-					children: I
-				})] })
-			}),
-			U && /* @__PURE__ */ s(l, { sx: {
-				width: "1px",
-				alignSelf: "stretch",
-				bgcolor: "divider"
-			} }),
-			/* @__PURE__ */ s(i, {
-				"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__ */ s(r, {})
-			})
-		]
-	});
-});
-_.displayName = "SQuantityInput";
-//#endregion
-export { _ as t };

package/dist/s-review-DSXXtWlL.js

@@ -1,272 +0,0 @@
-import { i as e } from "./utils-DaSrTYUS.js";
-import { toSxArray as t } from "./utils/sx.js";
-import { t as n } from "./createSvgIcon-B0SZlJF1.js";
-import { t as r } from "./useControlled-BeB0W_Ui.js";
-import { t as i } from "./s-image-viewer-DNIEYdtL.js";
-import { SLazyImage as a } from "./s-lazy-image/s-lazy-image.js";
-import { SSkeleton as o } from "./s-skeleton/s-skeleton.js";
-import { SAvatar as s } from "./s-avatar/s-avatar.js";
-import { SRating as ee } from "./s-rating/s-rating.js";
-import c, { useId as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Box as p, ButtonBase as m, Divider as h, IconButton as g, Stack as _, Typography as v, styled as y, useTheme as b, useThemeProps as te } from "@mui/material";
-//#region ../../node_modules/@mui/icons-material/ThumbDown.mjs
-var ne = n(/* @__PURE__ */ d("path", { d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2m4 0v12h4V3z" }), "ThumbDown"), x = n(/* @__PURE__ */ d("path", { d: "M1 21h4V9H1zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73z" }), "ThumbUp"), S = y(p, {
-	name: "SReview",
-	slot: "Root"
-})({}), C = c.forwardRef(function(n, c) {
-	let y = te({
-		props: n,
-		name: "SReview"
-	}), C = b(), { reviewId: re, userName: w, userAvatar: T, rating: E, onRatingChange: ie, reviewContent: ae, datetime: D, images: O, userHelpfulVote: k, defaultUserHelpfulVote: A = null, helpfulYes: j, defaultHelpfulYes: M = 0, helpfulNo: oe, defaultHelpfulNo: N = 0, onHelpfulVote: se, showHelpfulSection: P = !0, avatarSize: F = 48, maxRating: I = 5, readOnly: L = !0, showDivider: R = !0, loading: z = !1, sx: B, ...V } = y, H = l(), U = re ?? V.id ?? H, [W, G] = r({
-		controlled: k,
-		default: A,
-		name: "SReview",
-		state: "userHelpfulVote"
-	}), [K, ce] = r({
-		controlled: j,
-		default: M,
-		name: "SReview",
-		state: "helpfulYes"
-	}), [q, le] = r({
-		controlled: oe,
-		default: N,
-		name: "SReview",
-		state: "helpfulNo"
-	}), J = {
-		...y,
-		avatarSize: F,
-		defaultHelpfulNo: N,
-		defaultHelpfulYes: M,
-		defaultUserHelpfulVote: A,
-		helpfulNo: q,
-		helpfulYes: K,
-		maxRating: I,
-		loading: z,
-		readOnly: L,
-		reviewId: U,
-		showDivider: R,
-		showHelpfulSection: P,
-		userHelpfulVote: W
-	}, [ue, Y] = u(!1), [de, X] = u(null), Z = (e, t) => {
-		let n = W === t ? null : t, r = K, i = q;
-		W === "yes" && (r = Math.max(0, r - 1)), W === "no" && (i = Math.max(0, i - 1)), n === "yes" && (r += 1), n === "no" && (i += 1), G(n), ce(r), le(i), se?.(e, U, n);
-	}, Q = O?.map((e, t) => ({
-		id: `review-${U}-image-${t}`,
-		type: "image",
-		url: e,
-		title: `Review image ${t + 1}`,
-		desc: `Image ${t + 1} from ${w}'s review`
-	})) ?? [], fe = (e) => {
-		let t = Q[e];
-		t && (X(t), Y(!0));
-	}, $ = () => {
-		Y(!1), X(null);
-	}, pe = (e, t) => {
-		X(t);
-	}, me = e(D);
-	return z ? /* @__PURE__ */ f(S, {
-		...V,
-		ref: c,
-		ownerState: J,
-		sx: [{ py: 2 }, ...t(B)],
-		children: [/* @__PURE__ */ f(_, {
-			direction: "row",
-			spacing: 2,
-			sx: { alignItems: "flex-start" },
-			children: [/* @__PURE__ */ d(o, {
-				variant: "circular",
-				width: F,
-				height: F,
-				sx: { flexShrink: 0 }
-			}), /* @__PURE__ */ f(p, {
-				sx: { flex: 1 },
-				children: [
-					/* @__PURE__ */ f(_, {
-						direction: "row",
-						spacing: 2,
-						sx: {
-							alignItems: "center",
-							mb: 1
-						},
-						children: [/* @__PURE__ */ d(o, {
-							width: 120,
-							height: 20
-						}), /* @__PURE__ */ d(o, {
-							width: 80,
-							height: 16
-						})]
-					}),
-					/* @__PURE__ */ d(p, {
-						sx: { mb: 1 },
-						children: /* @__PURE__ */ d(o, {
-							width: 100,
-							height: 20
-						})
-					}),
-					/* @__PURE__ */ d(o, {
-						height: 16,
-						sx: { mb: .5 }
-					}),
-					P && /* @__PURE__ */ f(_, {
-						direction: "row",
-						spacing: 1,
-						sx: {
-							display: "inline-flex",
-							alignItems: "center"
-						},
-						children: [
-							/* @__PURE__ */ d(o, {
-								width: 140,
-								height: 16,
-								sx: { mr: 2 }
-							}),
-							/* @__PURE__ */ d(o, { preset: "icon-button" }),
-							/* @__PURE__ */ d(o, {
-								width: 20,
-								height: 16
-							}),
-							/* @__PURE__ */ d(o, { preset: "icon-button" }),
-							/* @__PURE__ */ d(o, {
-								width: 20,
-								height: 16
-							})
-						]
-					})
-				]
-			})]
-		}), R && /* @__PURE__ */ d(h, { sx: { mt: 2 } })]
-	}) : /* @__PURE__ */ f(S, {
-		...V,
-		ref: c,
-		ownerState: J,
-		sx: [{ py: 2 }, ...t(B)],
-		children: [
-			/* @__PURE__ */ f(_, {
-				direction: "row",
-				spacing: 2,
-				sx: { alignItems: "flex-start" },
-				children: [/* @__PURE__ */ d(s, {
-					src: T,
-					name: w,
-					size: F
-				}), /* @__PURE__ */ f(p, {
-					sx: { flex: 1 },
-					children: [
-						/* @__PURE__ */ d(v, {
-							variant: "subtitle1",
-							children: w
-						}),
-						/* @__PURE__ */ d(p, { children: /* @__PURE__ */ d(ee, {
-							value: E,
-							max: I,
-							onChange: ie,
-							readOnly: L
-						}) }),
-						/* @__PURE__ */ d(v, {
-							variant: "body1",
-							sx: { lineHeight: 1.6 },
-							children: ae
-						}),
-						/* @__PURE__ */ d(p, { children: /* @__PURE__ */ d(v, {
-							variant: "caption",
-							sx: { mb: 2 },
-							children: me
-						}) }),
-						O && O.length > 0 && /* @__PURE__ */ d(_, {
-							direction: "row",
-							sx: {
-								mt: 1,
-								mb: 2,
-								flexWrap: "wrap",
-								gap: 1
-							},
-							children: O.map((e, t) => /* @__PURE__ */ d(m, {
-								"aria-label": `Open review image ${t + 1}`,
-								component: "div",
-								onClick: () => fe(t),
-								sx: {
-									borderRadius: 1,
-									transition: (e) => e.transitions.create("opacity", { duration: e.transitions.duration.shorter }),
-									"&.Mui-focusVisible": {
-										outline: "2px solid",
-										outlineColor: "primary.main",
-										outlineOffset: 2
-									},
-									"@media (hover: hover) and (pointer: fine)": { "&:hover": { opacity: C.interaction.mediaHoverOpacity } }
-								},
-								children: /* @__PURE__ */ d(a, {
-									src: e,
-									alt: `Review image ${t + 1}`,
-									width: 80,
-									height: 80,
-									slotProps: { image: { sx: { objectFit: "cover" } } }
-								})
-							}, `${e}-${t}`))
-						}),
-						P && /* @__PURE__ */ f(_, {
-							direction: "row",
-							spacing: 1,
-							sx: {
-								display: "inline-flex",
-								alignItems: "center"
-							},
-							children: [
-								/* @__PURE__ */ d(v, {
-									variant: "body2",
-									sx: { mr: 2 },
-									children: "Was this review helpful?"
-								}),
-								/* @__PURE__ */ d(g, {
-									"aria-label": "Mark review as helpful",
-									"aria-pressed": W === "yes",
-									onClick: (e) => Z(e, "yes"),
-									sx: {
-										color: W === "yes" ? "primary.main" : "text.secondary",
-										"&:hover": { backgroundColor: "action.hover" }
-									},
-									children: /* @__PURE__ */ d(x, { fontSize: "small" })
-								}),
-								/* @__PURE__ */ d(v, {
-									variant: "caption",
-									children: K
-								}),
-								/* @__PURE__ */ d(g, {
-									"aria-label": "Mark review as not helpful",
-									"aria-pressed": W === "no",
-									onClick: (e) => Z(e, "no"),
-									sx: {
-										color: W === "no" ? "error.main" : "text.secondary",
-										ml: 1,
-										"&:hover": { backgroundColor: "action.hover" }
-									},
-									children: /* @__PURE__ */ d(ne, { fontSize: "small" })
-								}),
-								/* @__PURE__ */ d(v, {
-									variant: "caption",
-									children: q
-								})
-							]
-						})
-					]
-				})]
-			}),
-			R && /* @__PURE__ */ d(h, { sx: { mt: 2 } }),
-			/* @__PURE__ */ d(i, {
-				"aria-label": "Review media viewer",
-				open: ue,
-				onClose: $,
-				onCloseButtonClick: $,
-				selectedItem: de,
-				onItemChange: pe,
-				mediaItems: Q,
-				showNavigation: Q.length > 1,
-				showThumbnailDock: Q.length > 1,
-				showCounter: Q.length > 1
-			})
-		]
-	});
-});
-C.displayName = "SReview";
-//#endregion
-export { C as t };