@solostylist/ui-kit 1.0.230 → 2.0.0

package/dist/s-radial-pulse-animate/s-radial-pulse-animate.js

@@ -1,9 +1,10 @@
-import { STextShimmer as e } from "../s-text-shimmer/s-text-shimmer.js";
-import { useEffect as t, useRef as n } from "react";
+import { toSxArray as e } from "../utils/sx.js";
+import { STextShimmer as t } from "../s-text-shimmer/s-text-shimmer.js";
+import n from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Box as a, keyframes as o, styled as s } from "@mui/material";
+import { Box as a, keyframes as o, styled as s, useThemeProps as c } from "@mui/material";
 //#region lib/s-radial-pulse-animate/s-radial-pulse-animate.tsx
-var c = o`
+var l = o`
   0% {
     width: 20%;
     height: 20%;
@@ -14,7 +15,10 @@ var c = o`
     height: 100%;
     opacity: 0;
   }
-`, l = s(a)(({ theme: e }) => ({
+`, u = s(a, {
+	name: "SRadialPulseAnimate",
+	slot: "Root"
+})(({ theme: e }) => ({
 	position: "relative",
 	display: "flex",
 	justifyContent: "center",
@@ -22,10 +26,17 @@ var c = o`
 	borderRadius: e.shape.borderRadius,
 	border: "1px solid",
 	borderColor: (e.vars ?? e).palette.divider
-})), u = s(a)(() => ({
+})), d = s(a)(() => ({
 	position: "absolute",
 	pointerEvents: "none"
-})), d = s(a)(({ theme: e }) => ({
+})), f = s(a, {
+	name: "SRadialPulseAnimate",
+	slot: "Label"
+})({
+	display: "inline-flex",
+	position: "relative",
+	zIndex: 1
+}), p = s(a)(({ theme: e }) => ({
 	position: "absolute",
 	top: "50%",
 	left: "50%",
@@ -34,57 +45,44 @@ var c = o`
 	height: "60px",
 	background: (e.vars ?? e).palette.ui.pulse.radialGradient,
 	borderRadius: "50%",
-	animation: `${c} 3s ease-out infinite`,
+	animation: `${l} 3s ease-out infinite`,
 	"&:nth-of-type(2)": { animationDelay: "1s" },
 	"&:nth-of-type(3)": { animationDelay: "2s" },
 	"@media (prefers-reduced-motion: reduce)": { animation: "none !important" }
-})), f = () => {
-	let e = "s-radial-pulse-particles";
-	if (document.getElementById(e)) return;
-	let t = document.createElement("style");
-	t.id = e, t.textContent = "\n    .s-radial-pulse-particle {\n      position: absolute;\n      background: var(--s-palette-text-primary);\n      border-radius: 50%;\n      animation: s-radial-pulse-float 4s ease-in-out infinite;\n    }\n    \n    .s-radial-pulse-particle:nth-child(odd) {\n      animation-direction: reverse;\n    }\n    \n    @keyframes s-radial-pulse-float {\n      0%, 100% {\n        transform: translateY(0px) rotate(0deg);\n        opacity: 0.5;\n      }\n      50% {\n        transform: translateY(-20px) rotate(180deg);\n        opacity: 1;\n      }\n    }\n    \n    @media (prefers-reduced-motion: reduce) {\n      .s-radial-pulse-particle {\n        animation: none !important;\n      }\n    }\n  ", document.head.appendChild(t);
-}, p = ({ width: a = 300, height: o = 300, className: s, text: c = "Generating...", particleSize: p = {
-	min: 2,
-	max: 6
-} }) => {
-	let m = n(null);
-	return t(() => {
-		f();
-		let e = () => {
-			if (!m.current) return;
-			let e = m.current, t = document.createElement("div");
-			t.className = "s-radial-pulse-particle";
-			let n = Math.random() * (p.max - p.min) + p.min;
-			t.style.width = `${n}px`, t.style.height = `${n}px`, t.style.left = `${Math.random() * a}px`, t.style.top = `${Math.random() * o}px`, t.style.animationDelay = `${Math.random() * 4}s`, t.style.animationDuration = `${Math.random() * 3 + 2}s`, e.appendChild(t), setTimeout(() => {
-				t.parentNode && t.parentNode.removeChild(t);
-			}, 6e3);
-		}, t = setInterval(e, 500);
-		for (let t = 0; t < 4; t++) setTimeout(e, t * 100);
-		return () => clearInterval(t);
-	}, [
-		a,
-		o,
-		p
-	]), /* @__PURE__ */ i(l, {
-		ref: m,
-		className: s,
-		sx: {
-			width: a,
-			height: o
-		},
-		children: [/* @__PURE__ */ i(u, {
+})), m = n.forwardRef(function(n, a) {
+	let o = c({
+		props: n,
+		name: "SRadialPulseAnimate"
+	}), { height: s = 300, sx: l, text: m = "Generating...", width: h = 300, ...g } = o, _ = {
+		...o,
+		height: s,
+		text: m,
+		width: h
+	};
+	return /* @__PURE__ */ i(u, {
+		...g,
+		ownerState: _,
+		ref: a,
+		sx: [{
+			height: s,
+			width: h
+		}, ...e(l)],
+		children: [/* @__PURE__ */ i(d, {
 			sx: {
-				width: Math.min(a, o),
-				height: Math.min(a, o)
+				width: Math.min(h, s),
+				height: Math.min(h, s)
 			},
 			children: [
-				/* @__PURE__ */ r(d, {}),
-				/* @__PURE__ */ r(d, {}),
-				/* @__PURE__ */ r(d, {})
+				/* @__PURE__ */ r(p, {}),
+				/* @__PURE__ */ r(p, {}),
+				/* @__PURE__ */ r(p, {})
 			]
-		}), /* @__PURE__ */ r(e, { children: c })]
+		}), /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(t, {
+			component: "span",
+			children: m
+		}) })]
 	});
-};
-p.displayName = "SRadialPulseAnimate";
+});
+m.displayName = "SRadialPulseAnimate";
 //#endregion
-export { p as SRadialPulseAnimate, p as default };
+export { m as SRadialPulseAnimate, m as default };

package/dist/s-rating/s-rating.d.ts

@@ -1,8 +1,6 @@
-import { default as React } from 'react';
 import { RatingProps } from '@mui/material';
-/**
- * Props interface for SRating component
- */
+/** Exact MUI Rating props and ref contract. */
 export type SRatingProps = RatingProps;
-export declare const SRating: React.ForwardRefExoticComponent<Omit<SRatingProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** SoloStylist export of the unmodified MUI Rating contract. */
+export declare const SRating: import('@mui/material/OverridableComponent').OverridableComponent<import('@mui/material').RatingTypeMap<{}, "span">>;
 export default SRating;

package/dist/s-rating/s-rating.js

@@ -1,11 +1,5 @@
-import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
-import { Rating as n } from "@mui/material";
+import { Rating as e } from "@mui/material";
 //#region lib/s-rating/s-rating.tsx
-var r = e((e, r) => /* @__PURE__ */ t(n, {
-	ref: r,
-	...e
-}));
-r.displayName = "SRating";
+var t = e;
 //#endregion
-export { r as SRating, r as default };
+export { t as SRating, t as default };

package/dist/s-review/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SReview } from './s-review';
-export type { SReviewProps } from './s-review';
+export type { HelpfulVote, SReviewOwnerState, SReviewProps } from './s-review';
+export type {} from '../theme/component-augmentation';

package/dist/s-review/index.js

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

package/dist/s-review/s-review.d.ts

@@ -1,18 +1,20 @@
 import { default as React } from 'react';
-import { SxProps } from '@mui/material';
+import { BoxProps, RatingProps } from '@mui/material';
 /**
  * Props interface for SReview component
  */
 export type HelpfulVote = 'yes' | 'no' | null;
-export interface SReviewProps {
-    /** Unique identifier for the review (default: Date.now()) */
-    id?: string | number;
+export interface SReviewProps extends Omit<BoxProps, 'children' | 'component'> {
+    /** Stable identifier used by review callbacks. */
+    reviewId?: string | number;
     /** Name of the reviewer */
     userName: string;
     /** URL for the user avatar image (falls back to initials if not provided) */
     userAvatar?: string;
     /** Rating value */
     rating: number;
+    /** Callback fired first with the MUI rating event, then the next rating value. */
+    onRatingChange?: RatingProps['onChange'];
     /** The review text content */
     reviewContent: string;
     /** Date and time of the review (automatically converts to relative time) */
@@ -21,12 +23,18 @@ export interface SReviewProps {
     images?: string[];
     /** Current user vote status for this review (default: null) */
     userHelpfulVote?: HelpfulVote;
-    /** Number of "Yes" votes for helpfulness (default: 0) */
+    /** Initial user vote when `userHelpfulVote` is uncontrolled. */
+    defaultUserHelpfulVote?: HelpfulVote;
+    /** Controlled number of "Yes" votes for helpfulness. */
     helpfulYes?: number;
-    /** Number of "No" votes for helpfulness (default: 0) */
+    /** Initial number of "Yes" votes when `helpfulYes` is uncontrolled. */
+    defaultHelpfulYes?: number;
+    /** Controlled number of "No" votes for helpfulness. */
     helpfulNo?: number;
+    /** Initial number of "No" votes when `helpfulNo` is uncontrolled. */
+    defaultHelpfulNo?: number;
     /** Callback when user votes on helpfulness (returns null when un-voting) */
-    onHelpfulVote?: (reviewId: string | number, vote: HelpfulVote) => void;
+    onHelpfulVote?: (event: React.MouseEvent<HTMLButtonElement>, reviewId: string | number, vote: HelpfulVote) => void;
     /** Whether to show the helpful voting section (default: true) */
     showHelpfulSection?: boolean;
     /** Size of the avatar in pixels (default: 48) */
@@ -39,8 +47,15 @@ export interface SReviewProps {
     showDivider?: boolean;
     /** Whether to show skeleton loading state instead of content (default: false) */
     loading?: boolean;
-    /** MUI sx prop for custom styling */
-    sx?: SxProps;
 }
-export declare const SReview: React.FC<SReviewProps>;
+export interface SReviewOwnerState extends SReviewProps {
+    helpfulNo: number;
+    helpfulYes: number;
+    loading: boolean;
+    readOnly: boolean;
+    showDivider: boolean;
+    showHelpfulSection: boolean;
+    userHelpfulVote: HelpfulVote;
+}
+export declare const SReview: React.ForwardRefExoticComponent<Omit<SReviewProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SReview;

package/dist/s-review/s-review.js

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

package/dist/s-review-DSXXtWlL.js

@@ -0,0 +1,272 @@
+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 };

package/dist/s-scroll-reveal/index.d.ts

@@ -1,2 +1,4 @@
-export type { SScrollRevealProps } from './s-scroll-reveal';
+export type { SScrollRevealOwnerState, SScrollRevealProps } from './s-scroll-reveal';
 export { default, default as SScrollReveal } from './s-scroll-reveal';
+export type {} from '../theme/component-augmentation';
+export type {} from '../theme/optional-component-augmentations/s-scroll-reveal';

package/dist/s-scroll-reveal/s-scroll-reveal.d.ts

@@ -4,7 +4,7 @@ import { Easing } from 'framer-motion';
 /**
  * Props interface for SScrollReveal component
  */
-export interface SScrollRevealProps extends Omit<BoxProps, 'children'> {
+export interface SScrollRevealProps extends Omit<BoxProps, 'children' | 'component'> {
     /** The content to be revealed with animation */
     children: React.ReactNode;
     /** Animation duration in seconds (default: 0.6) */
@@ -21,14 +21,22 @@ export interface SScrollRevealProps extends Omit<BoxProps, 'children'> {
     direction?: 'up' | 'down' | 'left' | 'right';
     /** Distance in pixels that elements travel during animation */
     distance?: number;
-    /** Whether to include scaling effect in the animation (default: true) */
-    scale?: boolean;
-    /** Whether to include rotation effect in the animation (default: false) */
-    rotate?: boolean;
+    /** Whether content grows from 85% to full size while being revealed (default: true) */
+    scaleOnReveal?: boolean;
+    /** Whether content rotates from -2 degrees to its resting position while being revealed (default: false) */
+    rotateOnReveal?: boolean;
     /** Whether to stagger animations for multiple children (default: true) */
     stagger?: boolean;
     /** Delay between staggered child animations in seconds (default: 0.1) */
     staggerDelay?: number;
 }
-export declare const SScrollReveal: React.FC<SScrollRevealProps>;
+export type SScrollRevealOwnerState = SScrollRevealProps & {
+    duration: number;
+    ease: Easing;
+    rotateOnReveal: boolean;
+    scaleOnReveal: boolean;
+    stagger: boolean;
+    staggerDelay: number;
+};
+export declare const SScrollReveal: React.ForwardRefExoticComponent<Omit<SScrollRevealProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SScrollReveal;