@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-radial-pulse-animate/s-radial-pulse-animate.d.ts

@@ -1,8 +1,9 @@
 import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
 /**
  * Props interface for SRadialPulseAnimate component
  */
-export interface SRadialPulseAnimateProps {
+export interface SRadialPulseAnimateProps extends Omit<BoxProps, 'children' | 'component' | 'height' | 'width'> {
     /** Width of the animation container in pixels */
     width?: number;
     /** Height of the animation container in pixels */
@@ -11,11 +12,10 @@ export interface SRadialPulseAnimateProps {
     className?: string;
     /** Custom text to display in the center of the animation */
     text?: string;
-    /** Size range for floating particles in pixels */
-    particleSize?: {
-        min: number;
-        max: number;
-    };
 }
-export declare const SRadialPulseAnimate: React.FC<SRadialPulseAnimateProps>;
+export interface SRadialPulseAnimateOwnerState extends SRadialPulseAnimateProps {
+    height: number;
+    width: number;
+}
+export declare const SRadialPulseAnimate: React.ForwardRefExoticComponent<Omit<SRadialPulseAnimateProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SRadialPulseAnimate;

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 { SReview as e } from "./s-review.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,272 @@
-import { t as e } from "../s-review-CvTVBxTZ.js";
-export { e as SReview, e as default };
+import { i as e } from "../utils-CMeAWSRO.js";
+import { toSxArray as t } from "../utils/sx.js";
+import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
+import { SSkeleton as r } from "../s-skeleton/s-skeleton.js";
+import { SAvatar as i } from "../s-avatar/s-avatar.js";
+import { SImageViewer as a } from "../s-image-viewer/s-image-viewer.js";
+import { SRating as ee } from "../s-rating/s-rating.js";
+import o, { useId as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ThumbDown as te, ThumbUp as d } from "@mui/icons-material";
+import { Box as f, ButtonBase as ne, Divider as p, IconButton as m, Stack as h, Typography as g, styled as _, useTheme as re, useThemeProps as ie } from "@mui/material";
+import { useControlled as v } from "@mui/material/utils";
+//#region lib/s-review/s-review.tsx
+var y = _(f, {
+	name: "SReview",
+	slot: "Root"
+})({}), b = o.forwardRef(function(o, _) {
+	let b = ie({
+		props: o,
+		name: "SReview"
+	}), ae = re(), { reviewId: x, userName: S, userAvatar: C, rating: w, onRatingChange: oe, reviewContent: T, datetime: E, images: D, userHelpfulVote: O, defaultUserHelpfulVote: k = null, helpfulYes: A, defaultHelpfulYes: j = 0, helpfulNo: se, defaultHelpfulNo: M = 0, onHelpfulVote: ce, showHelpfulSection: N = !0, avatarSize: P = 48, maxRating: F = 5, readOnly: I = !0, showDivider: L = !0, loading: R = !1, sx: z, ...B } = b, V = s(), H = x ?? B.id ?? V, [U, W] = v({
+		controlled: O,
+		default: k,
+		name: "SReview",
+		state: "userHelpfulVote"
+	}), [G, le] = v({
+		controlled: A,
+		default: j,
+		name: "SReview",
+		state: "helpfulYes"
+	}), [K, ue] = v({
+		controlled: se,
+		default: M,
+		name: "SReview",
+		state: "helpfulNo"
+	}), q = {
+		...b,
+		avatarSize: P,
+		defaultHelpfulNo: M,
+		defaultHelpfulYes: j,
+		defaultUserHelpfulVote: k,
+		helpfulNo: K,
+		helpfulYes: G,
+		maxRating: F,
+		loading: R,
+		readOnly: I,
+		reviewId: H,
+		showDivider: L,
+		showHelpfulSection: N,
+		userHelpfulVote: U
+	}, [de, J] = c(!1), [Y, X] = c(null), Z = (e, t) => {
+		let n = U === t ? null : t, r = G, i = K;
+		U === "yes" && (r = Math.max(0, r - 1)), U === "no" && (i = Math.max(0, i - 1)), n === "yes" && (r += 1), n === "no" && (i += 1), W(n), le(r), ue(i), ce?.(e, H, n);
+	}, Q = D?.map((e, t) => ({
+		id: `review-${H}-image-${t}`,
+		type: "image",
+		url: e,
+		title: `Review image ${t + 1}`,
+		desc: `Image ${t + 1} from ${S}'s review`
+	})) ?? [], fe = (e) => {
+		let t = Q[e];
+		t && (X(t), J(!0));
+	}, $ = () => {
+		J(!1), X(null);
+	}, pe = (e, t) => {
+		X(t);
+	}, me = e(E);
+	return R ? /* @__PURE__ */ u(y, {
+		...B,
+		ref: _,
+		ownerState: q,
+		sx: [{ py: 2 }, ...t(z)],
+		children: [/* @__PURE__ */ u(h, {
+			direction: "row",
+			spacing: 2,
+			sx: { alignItems: "flex-start" },
+			children: [/* @__PURE__ */ l(r, {
+				variant: "circular",
+				width: P,
+				height: P,
+				sx: { flexShrink: 0 }
+			}), /* @__PURE__ */ u(f, {
+				sx: { flex: 1 },
+				children: [
+					/* @__PURE__ */ u(h, {
+						direction: "row",
+						spacing: 2,
+						sx: {
+							alignItems: "center",
+							mb: 1
+						},
+						children: [/* @__PURE__ */ l(r, {
+							width: 120,
+							height: 20
+						}), /* @__PURE__ */ l(r, {
+							width: 80,
+							height: 16
+						})]
+					}),
+					/* @__PURE__ */ l(f, {
+						sx: { mb: 1 },
+						children: /* @__PURE__ */ l(r, {
+							width: 100,
+							height: 20
+						})
+					}),
+					/* @__PURE__ */ l(r, {
+						height: 16,
+						sx: { mb: .5 }
+					}),
+					N && /* @__PURE__ */ u(h, {
+						direction: "row",
+						spacing: 1,
+						sx: {
+							display: "inline-flex",
+							alignItems: "center"
+						},
+						children: [
+							/* @__PURE__ */ l(r, {
+								width: 140,
+								height: 16,
+								sx: { mr: 2 }
+							}),
+							/* @__PURE__ */ l(r, { preset: "icon-button" }),
+							/* @__PURE__ */ l(r, {
+								width: 20,
+								height: 16
+							}),
+							/* @__PURE__ */ l(r, { preset: "icon-button" }),
+							/* @__PURE__ */ l(r, {
+								width: 20,
+								height: 16
+							})
+						]
+					})
+				]
+			})]
+		}), L && /* @__PURE__ */ l(p, { sx: { mt: 2 } })]
+	}) : /* @__PURE__ */ u(y, {
+		...B,
+		ref: _,
+		ownerState: q,
+		sx: [{ py: 2 }, ...t(z)],
+		children: [
+			/* @__PURE__ */ u(h, {
+				direction: "row",
+				spacing: 2,
+				sx: { alignItems: "flex-start" },
+				children: [/* @__PURE__ */ l(i, {
+					src: C,
+					name: S,
+					size: P
+				}), /* @__PURE__ */ u(f, {
+					sx: { flex: 1 },
+					children: [
+						/* @__PURE__ */ l(g, {
+							variant: "subtitle1",
+							children: S
+						}),
+						/* @__PURE__ */ l(f, { children: /* @__PURE__ */ l(ee, {
+							value: w,
+							max: F,
+							onChange: oe,
+							readOnly: I
+						}) }),
+						/* @__PURE__ */ l(g, {
+							variant: "body1",
+							sx: { lineHeight: 1.6 },
+							children: T
+						}),
+						/* @__PURE__ */ l(f, { children: /* @__PURE__ */ l(g, {
+							variant: "caption",
+							sx: { mb: 2 },
+							children: me
+						}) }),
+						D && D.length > 0 && /* @__PURE__ */ l(h, {
+							direction: "row",
+							sx: {
+								mt: 1,
+								mb: 2,
+								flexWrap: "wrap",
+								gap: 1
+							},
+							children: D.map((e, t) => /* @__PURE__ */ l(ne, {
+								"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: ae.interaction.mediaHoverOpacity } }
+								},
+								children: /* @__PURE__ */ l(n, {
+									src: e,
+									alt: `Review image ${t + 1}`,
+									width: 80,
+									height: 80,
+									slotProps: { image: { sx: { objectFit: "cover" } } }
+								})
+							}, `${e}-${t}`))
+						}),
+						N && /* @__PURE__ */ u(h, {
+							direction: "row",
+							spacing: 1,
+							sx: {
+								display: "inline-flex",
+								alignItems: "center"
+							},
+							children: [
+								/* @__PURE__ */ l(g, {
+									variant: "body2",
+									sx: { mr: 2 },
+									children: "Was this review helpful?"
+								}),
+								/* @__PURE__ */ l(m, {
+									"aria-label": "Mark review as helpful",
+									"aria-pressed": U === "yes",
+									onClick: (e) => Z(e, "yes"),
+									sx: {
+										color: U === "yes" ? "primary.main" : "text.secondary",
+										"&:hover": { backgroundColor: "action.hover" }
+									},
+									children: /* @__PURE__ */ l(d, { fontSize: "small" })
+								}),
+								/* @__PURE__ */ l(g, {
+									variant: "caption",
+									children: G
+								}),
+								/* @__PURE__ */ l(m, {
+									"aria-label": "Mark review as not helpful",
+									"aria-pressed": U === "no",
+									onClick: (e) => Z(e, "no"),
+									sx: {
+										color: U === "no" ? "error.main" : "text.secondary",
+										ml: 1,
+										"&:hover": { backgroundColor: "action.hover" }
+									},
+									children: /* @__PURE__ */ l(te, { fontSize: "small" })
+								}),
+								/* @__PURE__ */ l(g, {
+									variant: "caption",
+									children: K
+								})
+							]
+						})
+					]
+				})]
+			}),
+			L && /* @__PURE__ */ l(p, { sx: { mt: 2 } }),
+			/* @__PURE__ */ l(a, {
+				"aria-label": "Review media viewer",
+				open: de,
+				onClose: $,
+				onCloseButtonClick: $,
+				selectedItem: Y,
+				onItemChange: pe,
+				mediaItems: Q,
+				showNavigation: Q.length > 1,
+				showThumbnailDock: Q.length > 1,
+				showCounter: Q.length > 1
+			})
+		]
+	});
+});
+b.displayName = "SReview";
+//#endregion
+export { b as SReview, b as default };

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;