@solostylist/ui-kit 2.0.1 → 2.0.3

package/dist/s-product-gallery/s-product-gallery.js

@@ -0,0 +1,427 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
+import { SIconButton as r } from "../s-icon-button/s-icon-button.js";
+import { SCarousel as i } from "../s-carousel/s-carousel.js";
+import * as a from "react";
+import { createElement as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Box as l, ButtonBase as u, CircularProgress as d, styled as f, useTheme as ee, useThemeProps as te } from "@mui/material";
+import { mergeSlotProps as p, useControlled as ne, useEventCallback as m, useForkRef as h } from "@mui/material/utils";
+import g from "@mui/utils/appendOwnerState";
+import _ from "@mui/icons-material/PlayArrowRounded";
+//#region lib/s-product-gallery/s-product-gallery.tsx
+var re = f(l, {
+	name: "SProductGallery",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({ width: "100%" }), ie = f(l, {
+	name: "SProductGallery",
+	slot: "Stage",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ ownerState: e, theme: t }) => ({
+	aspectRatio: String(e.aspectRatio),
+	backgroundColor: (t.vars ?? t).palette.background.paper,
+	borderRadius: t.radius.md,
+	overflow: "hidden",
+	position: "relative",
+	width: "100%"
+})), ae = f(l, {
+	name: "SProductGallery",
+	slot: "Media",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "grid",
+	height: "100%",
+	minWidth: 0,
+	position: "relative",
+	width: "100%",
+	"& > *": {
+		gridArea: "1 / 1",
+		minWidth: 0
+	}
+}), oe = f(n, {
+	name: "SProductGallery",
+	slot: "Image",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), se = f(i, {
+	name: "SProductGallery",
+	slot: "Carousel",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), ce = f("video", {
+	name: "SProductGallery",
+	slot: "Video",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "block",
+	height: "100%",
+	inset: 0,
+	maxHeight: "100%",
+	minHeight: 0,
+	objectFit: "cover",
+	position: "absolute",
+	width: "100%"
+}), le = f(l, {
+	name: "SProductGallery",
+	slot: "VideoFrame"
+})({
+	height: "100%",
+	minHeight: 0,
+	position: "relative",
+	width: "100%"
+}), ue = f(r, {
+	name: "SProductGallery",
+	slot: "VideoPlayButton"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette;
+	return {
+		height: e.spacing(7),
+		left: "50%",
+		position: "absolute",
+		top: "50%",
+		transform: "translate(-50%, -50%)",
+		width: e.spacing(7),
+		zIndex: 2,
+		"&.Mui-disabled": {
+			backgroundColor: t.blackAlpha.medium,
+			color: t.common.white
+		},
+		"& svg": { fontSize: e.typography.pxToRem(32) }
+	};
+}), de = f(l, {
+	name: "SProductGallery",
+	slot: "Thumbnails",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	marginTop: e.spacing(1),
+	width: "100%"
+})), fe = f(u, {
+	name: "SProductGallery",
+	slot: "Thumbnail",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	backgroundColor: (e.vars ?? e).palette.background.paper,
+	boxSizing: "border-box",
+	borderRadius: e.radius.md,
+	display: "block",
+	height: e.spacing(7),
+	minHeight: e.spacing(5.5),
+	minWidth: e.spacing(5.5),
+	opacity: .72,
+	overflow: "hidden",
+	padding: 0,
+	position: "relative",
+	transition: e.transitions.create("opacity"),
+	marginInline: e.spacing(.5),
+	width: `calc(100% - ${e.spacing(1)})`,
+	[e.breakpoints.down("sm")]: { height: e.spacing(6.5) },
+	"&.Mui-focusVisible": {
+		outline: 0,
+		boxShadow: `0 0 0 2px ${(e.vars ?? e).palette.primary.main}`,
+		zIndex: 2
+	},
+	"&::after": {
+		border: "2px solid transparent",
+		borderRadius: "inherit",
+		content: "\"\"",
+		inset: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		transition: e.transitions.create("border-color"),
+		zIndex: 1
+	},
+	"@media (hover: hover) and (pointer: fine)": { "&:hover": { opacity: 1 } },
+	"@media (prefers-reduced-motion: reduce)": {
+		transition: "none",
+		"&::after": { transition: "none" }
+	},
+	variants: [{
+		props: ({ ownerState: e }) => e.selected,
+		style: {
+			"&::after": { borderColor: (e.vars ?? e).palette.primary.main },
+			opacity: 1
+		}
+	}]
+})), pe = f(l, {
+	name: "SProductGallery",
+	slot: "VideoIndicator"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette;
+	return {
+		alignItems: "center",
+		backgroundColor: e.alpha(t.common.black, .58),
+		borderRadius: e.radius.full,
+		boxShadow: e.shadows[2],
+		color: t.common.white,
+		display: "flex",
+		height: e.spacing(3.5),
+		justifyContent: "center",
+		left: "50%",
+		pointerEvents: "none",
+		position: "absolute",
+		top: "50%",
+		transform: "translate(-50%, -50%)",
+		width: e.spacing(3.5),
+		zIndex: 2,
+		"& svg": { fontSize: e.typography.pxToRem(20) }
+	};
+}), v = 1, me = 6;
+function he(e, t) {
+	return e !== void 0 && Number.isFinite(e) && e > 0 ? e : t;
+}
+function ge(e, t) {
+	return typeof e == "number" ? he(e, typeof t == "number" ? t : v) : typeof e == "string" && e.trim() ? e : t;
+}
+function _e(e) {
+	return e.type === "video" ? e.thumbnailSrc ?? e.poster ?? "" : e.thumbnailSrc ?? e.src;
+}
+function y(e) {
+	return e.type === "video" ? e.ariaLabel : e.alt;
+}
+function b(e) {
+	return e ? `${e.type ?? "image"}:${e.id}:${e.src}` : "";
+}
+var ve = (e, t, n) => {
+	let r = y(e);
+	return r ? `Show ${r}, ${t + 1} of ${n}` : `Show ${e.type === "video" ? "video" : "image"} ${t + 1} of ${n}`;
+};
+function ye(e, t, n) {
+	return `${y(e) || (e.type === "video" ? "Product video" : "Product image")} ${t + 1} of ${n}`;
+}
+function be(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+var x = a.forwardRef(function(r, i) {
+	let { aspectRatio: l = v, defaultValue: u, getThumbnailAriaLabel: f = ve, items: y, onChange: x, slotProps: S, slots: C, sx: w, thumbnailsLabel: T = "Choose product media", thumbnailsToShow: xe = me, value: E, ...D } = te({
+		props: r,
+		name: "SProductGallery"
+	}), Se = ee(), Ce = ge(l, v), O = Math.max(1, Math.floor(he(xe, me))), we = a.useRef(y[0]?.id ?? ""), Te = a.useRef(u === void 0), [k, A] = ne({
+		controlled: E,
+		default: u ?? we.current,
+		name: "SProductGallery",
+		state: "value"
+	}), j = E !== void 0, M = y.findIndex((e) => e.id === k), Ee = !j && y.length > 0 && M < 0 && (k !== "" || Te.current), N = M >= 0 ? M : Ee ? 0 : -1, P = y[N] ?? null, F = P?.id ?? "", De = b(P), I = P?.type === "video" ? De : "", L = a.useRef(null), R = a.useRef(null), z = a.useRef(!1), [B, V] = a.useState({
+		mediaKey: "",
+		loading: !1,
+		started: !1
+	}), H = B.mediaKey === I ? B : null, U = H?.loading ?? !1, W = H?.started ?? !1, G = a.useId(), K = {
+		...D,
+		aspectRatio: Ce,
+		activeItem: P,
+		activeIndex: N,
+		defaultValue: u,
+		getThumbnailAriaLabel: f,
+		items: y,
+		onChange: x,
+		sx: w,
+		thumbnailsLabel: T,
+		thumbnailsToShow: O,
+		value: F
+	}, q = t(S?.video, K), Oe = h(R, q?.ref);
+	a.useEffect(() => {
+		!j && P && k !== F && A(F);
+	}, [
+		P,
+		F,
+		j,
+		A,
+		k
+	]), a.useEffect(() => {
+		N >= 0 && L.current?.scrollTo(N);
+	}, [N]), a.useEffect(() => {
+		z.current = !1;
+	}, [I]);
+	let ke = m((e, t) => {
+		let n = y[t];
+		!n || n.id === P?.id || (A(n.id), x?.(e, n.id));
+	}), Ae = m(() => {
+		let e = R.current;
+		if (!e || P?.type !== "video") return;
+		let t = b(P);
+		z.current = !0, V({
+			mediaKey: t,
+			loading: !0,
+			started: !1
+		}), e.play().catch(() => {
+			z.current = !1, V((n) => R.current === e && n.mediaKey === t ? {
+				...n,
+				loading: !1,
+				started: !1
+			} : n);
+		});
+	}), je = C?.root ?? re, Me = C?.stage ?? ie, Ne = C?.media ?? ae, Pe = C?.image ?? oe, Fe = C?.video ?? ce, J = C?.thumbnails ?? de, Ie = C?.carousel ?? se, Le = C?.thumbnail ?? fe, { ref: Re, sx: ze, ...Y } = g(je, p(t(S?.root, K), D), K), Be = h(Re, i), X = g(Me, t(S?.stage, K) ?? {}, K), Ve = g(Ne, t(S?.media, K) ?? {}, K), Z = g(J, t(S?.thumbnails, K) ?? {}, K), He = t(S?.carousel, K), Q = Math.min(y.length, O), $ = He?.slotProps, Ue = g(Ie, p(He, {
+		arrows: y.length > Q,
+		slotProps: {
+			...$,
+			viewport: {
+				...$?.viewport,
+				sx: [{ py: .5 }, ...e($?.viewport?.sx)]
+			}
+		}
+	}), K), We = () => {
+		if (!P) return null;
+		if (P.type === "video") {
+			let e = b(P), t = (e) => e.currentTarget === R.current, { children: n, controls: r = !0, ...i } = g(Fe, p(q, {
+				controls: !0,
+				onCanPlay: (n) => {
+					t(n) && V((t) => t.mediaKey === e && t.started ? {
+						...t,
+						loading: !1
+					} : t);
+				},
+				onEnded: (n) => {
+					t(n) && (z.current = !1, V({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onError: (n) => {
+					t(n) && (z.current = !1, V({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onPause: (n) => {
+					t(n) && (z.current = !1, V({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onPlay: (n) => {
+					t(n) && V({
+						mediaKey: e,
+						loading: !0,
+						started: !1
+					});
+				},
+				onPlaying: (n) => {
+					if (!t(n)) return;
+					let r = n.currentTarget, i = z.current;
+					z.current = !1, V({
+						mediaKey: e,
+						loading: !1,
+						started: !0
+					}), i && requestAnimationFrame(() => {
+						R.current === r && r.focus({ preventScroll: !0 });
+					});
+				},
+				onWaiting: (n) => {
+					t(n) && V((t) => ({
+						mediaKey: e,
+						loading: !0,
+						started: t.mediaKey === e && t.started
+					}));
+				},
+				playsInline: !0,
+				preload: "metadata"
+			}), K);
+			return /* @__PURE__ */ c(le, {
+				"aria-busy": U || void 0,
+				children: [/* @__PURE__ */ s(Fe, {
+					...i,
+					"aria-label": P.ariaLabel,
+					controls: r && W,
+					poster: P.poster,
+					ref: Oe,
+					src: P.src,
+					children: n
+				}), !W || U ? /* @__PURE__ */ s(ue, {
+					"aria-busy": U || void 0,
+					"aria-label": U ? `Loading ${P.ariaLabel}` : `Play ${P.ariaLabel}`,
+					disabled: U,
+					onClick: Ae,
+					variant: "overlay",
+					children: U ? /* @__PURE__ */ s(d, {
+						"aria-label": `Loading ${P.ariaLabel}`,
+						color: "inherit",
+						size: 28
+					}) : /* @__PURE__ */ s(_, {})
+				}) : null]
+			}, `${P.type}:${P.id}:${P.src}`);
+		}
+		let { slotProps: e, ...n } = p(t(S?.image, K), { variant: "rectangular" }), r = g(Pe, n, K), i = {
+			...e,
+			image: p(e?.image, { sx: { objectFit: "cover" } })
+		};
+		return /* @__PURE__ */ o(Pe, {
+			...r,
+			alt: P.alt,
+			key: `${P.type ?? "image"}:${P.id}:${P.src}`,
+			slotProps: i,
+			src: P.src
+		});
+	};
+	return /* @__PURE__ */ c(je, {
+		...Y,
+		"aria-label": Y["aria-label"] ?? "Product media gallery",
+		"aria-roledescription": Y["aria-roledescription"] ?? "carousel",
+		ref: Be,
+		role: Y.role ?? "group",
+		sx: [...e(ze), ...e(w)],
+		children: [/* @__PURE__ */ s(Me, {
+			...X,
+			"aria-hidden": X["aria-hidden"] ?? !P,
+			"aria-label": X["aria-label"] ?? (P ? ye(P, N, y.length) : void 0),
+			"aria-roledescription": X["aria-roledescription"] ?? (P ? "slide" : void 0),
+			id: G,
+			role: X.role ?? (P ? "group" : void 0),
+			children: /* @__PURE__ */ s(Ne, {
+				...Ve,
+				children: We()
+			})
+		}), y.length > 1 ? /* @__PURE__ */ s(J, {
+			...Z,
+			"aria-label": Z["aria-label"] ?? T,
+			role: Z.role ?? "group",
+			children: /* @__PURE__ */ s(Ie, {
+				...Ue,
+				apiRef: L,
+				autoplay: !1,
+				centerMode: !1,
+				infinite: !1,
+				responsive: [{
+					breakpoint: Se.breakpoints.values.sm,
+					settings: { slidesToShow: Math.max(Math.ceil(Q / 2), 1) }
+				}],
+				slidesToShow: Q,
+				spaceBetween: 0,
+				children: y.map((e, r) => {
+					let i = r === N, a = {
+						...K,
+						index: r,
+						item: e,
+						selected: i
+					}, o = t(S?.thumbnail, a), { ref: l, ...u } = g(Le, o ?? {}, a), d = `${G}-thumbnail-${r}`;
+					return /* @__PURE__ */ c(Le, {
+						...u,
+						"aria-controls": G,
+						"aria-label": f(e, r, y.length),
+						"aria-pressed": i,
+						id: d,
+						onClick: (e) => {
+							o?.onClick?.(e), e.defaultPrevented || ke(e, r);
+						},
+						ref: (e) => {
+							be(l, e);
+						},
+						children: [/* @__PURE__ */ s(n, {
+							alt: "",
+							src: _e(e),
+							variant: "rectangular",
+							slotProps: { image: { sx: { objectFit: "cover" } } }
+						}), e.type === "video" ? /* @__PURE__ */ s(pe, {
+							"aria-hidden": !0,
+							children: /* @__PURE__ */ s(_, {})
+						}) : null]
+					}, e.id);
+				})
+			})
+		}) : null]
+	});
+});
+x.displayName = "SProductGallery";
+//#endregion
+export { x as SProductGallery, x as default };

package/dist/s-scroll-to-top/s-scroll-to-top.d.ts

@@ -1,6 +1,6 @@
 import { SIconButtonProps } from '../s-icon-button';
 import * as React from 'react';
-export interface SScrollToTopProps extends Omit<SIconButtonProps, 'children' | 'component' | 'variant'> {
+export interface SScrollToTopProps extends Omit<SIconButtonProps, 'children' | 'component' | 'target' | 'variant'> {
     /** Icon rendered inside the button. */
     icon?: React.ReactNode;
     /** Scroll target monitored by MUI's scroll trigger; defaults to the window. */

package/dist/s-segmented-control/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SSegmentedControl } from './s-segmented-control';
+export type { SSegmentedControlOption, SSegmentedControlOptionState, SSegmentedControlOwnerState, SSegmentedControlProps, SSegmentedControlSize, SSegmentedControlSlotProps, SSegmentedControlSlots, } from './s-segmented-control';
+export type {} from '../theme/component-augmentation';

package/dist/s-segmented-control/index.js

@@ -0,0 +1,2 @@
+import { SSegmentedControl as e } from "./s-segmented-control.js";
+export { e as SSegmentedControl, e as default };

package/dist/s-segmented-control/s-segmented-control.d.ts

@@ -0,0 +1,94 @@
+import { BoxProps, ButtonBaseProps, TypographyProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** Height tier of the control. */
+export type SSegmentedControlSize = 'small' | 'medium';
+/** A single selectable segment. */
+export interface SSegmentedControlOption<T extends React.Key = string> {
+    /** Optional trailing content, e.g. a count or an `SChip`. */
+    badge?: React.ReactNode;
+    /** Prevents this segment from being selected or focused. */
+    disabled?: boolean;
+    /** Optional leading content, typically an icon element. */
+    icon?: React.ReactNode;
+    /** Visible segment label. */
+    label: React.ReactNode;
+    /** Value committed when this segment becomes selected. */
+    value: T;
+}
+/**
+ * A `radiogroup` needs an accessible name, so exactly one of `aria-label` /
+ * `aria-labelledby` is required.
+ */
+type SSegmentedControlAccessibleName = {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+};
+export interface SSegmentedControlSlots {
+    /** Trailing badge wrapper rendered for options that define `badge`. */
+    badge?: React.ElementType;
+    /** Leading icon wrapper rendered for options that define `icon`. */
+    icon?: React.ElementType;
+    /** Absolutely positioned element that slides behind the selected segment. */
+    indicator?: React.ElementType;
+    /** Option label element. */
+    label?: React.ElementType;
+    /** Interactive `role="radio"` element rendered for every option. */
+    option?: React.ElementType;
+    /** Outer `role="radiogroup"` element. */
+    root?: React.ElementType;
+}
+export interface SSegmentedControlSlotProps<T extends React.Key = string> {
+    /** Props or option-state callback for the badge slot. */
+    badge?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSegmentedControlOptionState<T>>;
+    /** Props or option-state callback for the icon slot. */
+    icon?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSegmentedControlOptionState<T>>;
+    /** Props or owner-state callback for the indicator slot. */
+    indicator?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSegmentedControlOwnerState<T>>;
+    /** Props or option-state callback for the label slot. */
+    label?: MuiOwnerStateSlotProps<Omit<TypographyProps, 'children'>, SSegmentedControlOptionState<T>>;
+    /** Props or option-state callback for the option slot. */
+    option?: MuiOwnerStateSlotProps<Omit<ButtonBaseProps, 'children' | 'disabled' | 'onClick' | 'onKeyDown' | 'tabIndex'>, SSegmentedControlOptionState<T>>;
+    /** Props or owner-state callback for the root slot. */
+    root?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSegmentedControlOwnerState<T>>;
+}
+/** Props for a segmented control built on ARIA radiogroup semantics. */
+export type SSegmentedControlProps<T extends React.Key = string> = Omit<BoxProps, 'children' | 'component' | 'defaultValue' | 'onChange' | 'value'> & SSegmentedControlAccessibleName & {
+    /** Initially selected value when the control is uncontrolled. */
+    defaultValue?: T;
+    /** Disables the whole control. Individual segments use `options[].disabled`. */
+    disabled?: boolean;
+    /** Stretches the control and distributes segments evenly across its width. */
+    fullWidth?: boolean;
+    /** Called whenever the selection changes. */
+    onChange?: (event: React.SyntheticEvent, value: T) => void;
+    /** Segments rendered by the control, in visual order. */
+    options: readonly SSegmentedControlOption<T>[];
+    /** Height tier of the control. */
+    size?: SSegmentedControlSize;
+    /** Props or state callbacks for internal structural slots. */
+    slotProps?: SSegmentedControlSlotProps<T>;
+    /** Components used for internal structural slots. */
+    slots?: SSegmentedControlSlots;
+    /** Selected value for controlled usage. */
+    value?: T;
+};
+export type SSegmentedControlOwnerState<T extends React.Key = string> = SSegmentedControlProps<T> & {
+    disabled: boolean;
+    fullWidth: boolean;
+    selectedDisabled: boolean;
+    size: SSegmentedControlSize;
+};
+export type SSegmentedControlOptionState<T extends React.Key = string> = SSegmentedControlOwnerState<T> & {
+    option: SSegmentedControlOption<T>;
+    selected: boolean;
+};
+interface SSegmentedControlComponent {
+    <T extends React.Key = string>(props: SSegmentedControlProps<T> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName?: string;
+}
+export declare const SSegmentedControl: SSegmentedControlComponent;
+export default SSegmentedControl;