@solostylist/ui-kit 1.0.224 → 1.0.226

package/dist/s-image-modal/default-media-item.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { MediaItemType } from './types';
+export declare const DefaultMediaItem: React.FC<{
+    item: MediaItemType;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    disableVideoControls?: boolean;
+}>;

package/dist/s-image-modal/default-media-item.js

@@ -0,0 +1,34 @@
+import e from "../s-lazy-image/s-lazy-image.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Box as n } from "@mui/material";
+//#region lib/s-image-modal/default-media-item.tsx
+var r = ({ item: r, onClick: i, style: a = {}, objectFit: o = "contain", disableVideoControls: s = !1 }) => r.type === "video" ? /* @__PURE__ */ t(n, {
+	component: "video",
+	onClick: i,
+	controls: !s,
+	sx: {
+		width: "100%",
+		height: "100%",
+		objectFit: o,
+		bgcolor: "background.paper",
+		...a
+	},
+	children: /* @__PURE__ */ t("source", {
+		src: r.url,
+		type: "video/mp4"
+	})
+}) : /* @__PURE__ */ t(e, {
+	src: r.url,
+	alt: r.title ?? "",
+	onClick: i,
+	style: {
+		width: "100%",
+		height: "100%",
+		objectFit: o,
+		backgroundColor: "background.paper",
+		...a
+	}
+});
+//#endregion
+export { r as DefaultMediaItem };

package/dist/s-image-modal/image-modal-thumbnail-dock.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { MediaItemType, SImageModalProps } from './types';
+/**
+ * Stacked-card thumbnail dock pinned to the bottom of the modal
+ */
+export declare const ImageModalThumbnailDock: React.FC<{
+    mediaItems: MediaItemType[];
+    selectedItem: MediaItemType;
+    onSelect: (item: MediaItemType) => void;
+    renderMediaItem?: SImageModalProps['renderMediaItem'];
+}>;

package/dist/s-image-modal/image-modal-thumbnail-dock.js

@@ -0,0 +1,102 @@
+import { n as e } from "../theme-primitives-7ruiI7gY.js";
+import { DefaultMediaItem as t } from "./default-media-item.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Box as i, Paper as a, Stack as o } from "@mui/material";
+import { motion as s } from "framer-motion";
+//#region lib/s-image-modal/image-modal-thumbnail-dock.tsx
+var c = ({ mediaItems: c, selectedItem: l, onSelect: u, renderMediaItem: d }) => /* @__PURE__ */ n(i, {
+	sx: {
+		position: "fixed",
+		zIndex: 1502,
+		left: "50%",
+		bottom: 16,
+		transform: "translateX(-50%)"
+	},
+	children: /* @__PURE__ */ n(a, {
+		sx: {
+			position: "relative",
+			borderRadius: 1,
+			bgcolor: "background.paper",
+			border: "1px solid",
+			borderColor: "divider",
+			backdropFilter: "blur(12px)",
+			px: 1.5,
+			py: 1
+		},
+		children: /* @__PURE__ */ n(o, {
+			direction: "row",
+			spacing: -1.5,
+			sx: { alignItems: "center" },
+			children: c.map((a, o) => {
+				let f = l.id === a.id, p = o % 2 == 0 ? -15 : 15, m = () => u(a);
+				return /* @__PURE__ */ r(s.div, {
+					onClick: (e) => {
+						e.stopPropagation(), m();
+					},
+					style: {
+						position: "relative",
+						width: 40,
+						height: 40,
+						borderRadius: e.md,
+						overflow: "hidden",
+						flexShrink: 0,
+						zIndex: f ? 30 : c.length - o,
+						border: f ? "1px solid" : void 0,
+						borderColor: f ? "divider" : void 0,
+						cursor: "pointer"
+					},
+					initial: { rotate: p },
+					animate: {
+						scale: f ? 1.2 : 1,
+						rotate: f ? 0 : p,
+						y: f ? -8 : 0
+					},
+					whileHover: {
+						scale: 1.3,
+						rotate: 0,
+						y: -10,
+						transition: {
+							type: "spring",
+							stiffness: 400,
+							damping: 25
+						}
+					},
+					children: [
+						d ? d(a, m) : /* @__PURE__ */ n(t, {
+							item: a,
+							objectFit: "cover",
+							style: {
+								width: "100%",
+								height: "100%",
+								borderRadius: e.none,
+								pointerEvents: a.type === "video" ? "none" : "auto"
+							},
+							disableVideoControls: !0
+						}),
+						/* @__PURE__ */ n(i, { sx: {
+							position: "absolute",
+							inset: 0,
+							background: (e) => `linear-gradient(to bottom, transparent, ${(e.vars ?? e).palette.action.hover}, ${(e.vars ?? e).palette.action.selected})`,
+							pointerEvents: "none"
+						} }),
+						f && /* @__PURE__ */ n(s.div, {
+							layoutId: "activeGlow",
+							style: {
+								position: "absolute",
+								inset: -8,
+								background: "primary.main",
+								filter: "blur(16px)"
+							},
+							initial: { opacity: 0 },
+							animate: { opacity: 1 },
+							transition: { duration: .2 }
+						})
+					]
+				}, a.id);
+			})
+		})
+	})
+});
+//#endregion
+export { c as ImageModalThumbnailDock };

package/dist/s-image-modal/index.d.ts

@@ -1,3 +1,3 @@
 export { default, default as SImageModal } from './s-image-modal';
-export type { SImageModalProps, MediaItemType } from './s-image-modal';
-export { DefaultMediaItem } from './s-image-modal';
+export type { SImageModalProps, MediaItemType } from './types';
+export { DefaultMediaItem } from './default-media-item';

package/dist/s-image-modal/index.js

@@ -1,2 +1,3 @@
-import { n as e, t } from "../s-image-modal-DA3DBNbv.js";
+import { t as e } from "../s-image-modal-hhRD4727.js";
+import { DefaultMediaItem as t } from "./default-media-item.js";
 export { t as DefaultMediaItem, e as SImageModal, e as default };

package/dist/s-image-modal/s-image-modal.d.ts

@@ -1,55 +1,4 @@
 import { default as React } from 'react';
-import { ModalProps } from '@mui/material';
-/**
- * Interface for individual media items (images/videos) in the modal
- */
-export interface MediaItemType {
-    /** Unique identifier for the media item */
-    id: string;
-    /** Type of media ('image' or 'video') */
-    type: string;
-    /** Optional title displayed in overlays */
-    title?: string;
-    /** Optional description displayed in overlays */
-    desc?: string;
-    /** URL source for the media */
-    url: string;
-    /** Grid column span for layout (defaults to 1) */
-    colSpan?: number;
-    /** Grid row span for layout (defaults to 2) */
-    rowSpan?: number;
-}
-/**
- * Props for SImageModal component
- */
-export interface SImageModalProps {
-    /** Currently selected media item to display */
-    selectedItem?: MediaItemType | null;
-    /** Whether the modal is open */
-    isOpen: boolean;
-    /** Function to close the modal */
-    onClose: () => void;
-    /** Function to change the selected item (for navigation) */
-    onItemChange?: (item: MediaItemType) => void;
-    /** Array of all media items for navigation (optional - if provided, enables prev/next navigation) */
-    mediaItems?: MediaItemType[];
-    /** Custom component to render media items */
-    renderMediaItem?: (item: MediaItemType, onClick?: () => void) => React.ReactNode;
-    /** Whether to show navigation arrows */
-    showNavigation?: boolean;
-    /** Whether to show the thumbnail dock */
-    showThumbnailDock?: boolean;
-    /** Whether to show the item counter */
-    showCounter?: boolean;
-    /** Custom modal styling */
-    modalSx?: ModalProps['sx'];
-}
-export declare const DefaultMediaItem: React.FC<{
-    item: MediaItemType;
-    onClick?: () => void;
-    style?: React.CSSProperties;
-    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
-    disableVideoControls?: boolean;
-}>;
+import { SImageModalProps } from './types';
 export declare const SImageModal: React.FC<SImageModalProps>;
 export default SImageModal;

package/dist/s-image-modal/s-image-modal.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../s-image-modal-DA3DBNbv.js";
-export { t as DefaultMediaItem, e as SImageModal, e as default };
+import { t as e } from "../s-image-modal-hhRD4727.js";
+export { e as SImageModal, e as default };

package/dist/s-image-modal/types.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { ModalProps } from '@mui/material';
+/**
+ * Interface for individual media items (images/videos) in the modal
+ */
+export interface MediaItemType {
+    /** Unique identifier for the media item */
+    id: string;
+    /** Type of media ('image' or 'video') */
+    type: string;
+    /** Optional title displayed in overlays */
+    title?: string;
+    /** Optional description displayed in overlays */
+    desc?: string;
+    /** URL source for the media */
+    url: string;
+    /** Grid column span for layout (defaults to 1) */
+    colSpan?: number;
+    /** Grid row span for layout (defaults to 2) */
+    rowSpan?: number;
+}
+/**
+ * Props for SImageModal component
+ */
+export interface SImageModalProps {
+    /** Currently selected media item to display */
+    selectedItem?: MediaItemType | null;
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Function to close the modal */
+    onClose: () => void;
+    /** Function to change the selected item (for navigation) */
+    onItemChange?: (item: MediaItemType) => void;
+    /** Array of all media items for navigation (optional - if provided, enables prev/next navigation) */
+    mediaItems?: MediaItemType[];
+    /** Custom component to render media items */
+    renderMediaItem?: (item: MediaItemType, onClick?: () => void) => React.ReactNode;
+    /** Whether to show navigation arrows */
+    showNavigation?: boolean;
+    /** Whether to show the thumbnail dock */
+    showThumbnailDock?: boolean;
+    /** Whether to show the item counter */
+    showCounter?: boolean;
+    /** Custom modal styling */
+    modalSx?: ModalProps['sx'];
+    /** Accessible text for the close button */
+    closeText?: string;
+    /** Accessible text for the previous-image navigation button */
+    previousText?: string;
+    /** Accessible text for the next-image navigation button */
+    nextText?: string;
+}

package/dist/s-image-modal/use-image-modal-navigation.d.ts

@@ -0,0 +1,29 @@
+import { MediaItemType } from './types';
+interface UseImageModalNavigationParams {
+    /** Currently selected media item (controlled) */
+    selectedItem?: MediaItemType | null;
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Function to close the modal */
+    onClose: () => void;
+    /** Function to change the selected item (for controlled navigation) */
+    onItemChange?: (item: MediaItemType) => void;
+    /** Array of all media items for navigation */
+    mediaItems: MediaItemType[];
+    /** Whether navigation is enabled */
+    showNavigation: boolean;
+}
+/**
+ * Encapsulates the selection state and prev/next/keyboard navigation of SImageModal.
+ * Falls back to internal state when `onItemChange` is not provided (uncontrolled mode).
+ */
+export declare function useImageModalNavigation({ selectedItem, isOpen, onClose, onItemChange, mediaItems, showNavigation, }: UseImageModalNavigationParams): {
+    currentSelectedItem: MediaItemType | null;
+    navigationEnabled: boolean;
+    currentIndex: number;
+    totalItems: number;
+    selectItem: (item: MediaItemType) => void;
+    goToPrevious: () => void;
+    goToNext: () => void;
+};
+export {};

package/dist/s-image-modal/use-image-modal-navigation.js

@@ -0,0 +1,57 @@
+import { useCallback as e, useEffect as t, useState as n } from "react";
+//#region lib/s-image-modal/use-image-modal-navigation.ts
+function r({ selectedItem: r, isOpen: i, onClose: a, onItemChange: o, mediaItems: s, showNavigation: c }) {
+	let [l, u] = n(r ?? null), d = r ?? l;
+	t(() => {
+		r && u(r);
+	}, [r]);
+	let f = !!(c && s.length > 1 && d), p = d ? s.findIndex((e) => e.id === d.id) : -1, m = s.length, h = e((e) => {
+		o ? o(e) : u(e);
+	}, [o]), g = e(() => {
+		f && p > 0 && h(s[p - 1]);
+	}, [
+		f,
+		p,
+		s,
+		h
+	]), _ = e(() => {
+		f && p < m - 1 && h(s[p + 1]);
+	}, [
+		f,
+		p,
+		m,
+		s,
+		h
+	]);
+	return t(() => {
+		let e = (e) => {
+			if (i) switch (e.key) {
+				case "ArrowLeft":
+					g();
+					break;
+				case "ArrowRight":
+					_();
+					break;
+				case "Escape":
+					a();
+					break;
+			}
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		i,
+		g,
+		_,
+		a
+	]), {
+		currentSelectedItem: d,
+		navigationEnabled: f,
+		currentIndex: p,
+		totalItems: m,
+		selectItem: h,
+		goToPrevious: g,
+		goToNext: _
+	};
+}
+//#endregion
+export { r as useImageModalNavigation };

package/dist/s-image-modal-hhRD4727.js

@@ -0,0 +1,243 @@
+import { t as e } from "./createSvgIcon-HW-tbFcL.js";
+import { t } from "./ChevronRight-cBbrlMYh.js";
+import { t as n } from "./Close-DRS0T6Yu.js";
+import { DefaultMediaItem as r } from "./s-image-modal/default-media-item.js";
+import { ImageModalThumbnailDock as i } from "./s-image-modal/image-modal-thumbnail-dock.js";
+import { useImageModalNavigation as a } from "./s-image-modal/use-image-modal-navigation.js";
+import "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Box as l, IconButton as u, Modal as d, Paper as f, Typography as p } from "@mui/material";
+import { AnimatePresence as m, motion as h } from "framer-motion";
+//#region ../../node_modules/@mui/icons-material/ChevronLeft.mjs
+var g = e(/* @__PURE__ */ s("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }), "ChevronLeft"), _ = ({ selectedItem: e, isOpen: _, onClose: v, onItemChange: y, mediaItems: b = [], renderMediaItem: x, showNavigation: S = !0, showThumbnailDock: C = !0, showCounter: w = !0, modalSx: T = {}, closeText: E = "Close", previousText: D = "Previous image", nextText: O = "Next image" }) => {
+	let { currentSelectedItem: k, navigationEnabled: A, currentIndex: j, totalItems: M, selectItem: N, goToPrevious: P, goToNext: F } = a({
+		selectedItem: e,
+		isOpen: _,
+		onClose: v,
+		onItemChange: y,
+		mediaItems: b,
+		showNavigation: S
+	});
+	return !_ || !k ? null : /* @__PURE__ */ s(d, {
+		open: _,
+		onClose: v,
+		sx: {
+			zIndex: (e) => e.zIndex.modal + 100,
+			...T
+		},
+		slotProps: { backdrop: { sx: {
+			backdropFilter: "blur(8px)",
+			zIndex: (e) => e.zIndex.modal + 99
+		} } },
+		children: /* @__PURE__ */ c(l, { children: [/* @__PURE__ */ s(h.div, {
+			initial: { scale: .98 },
+			animate: { scale: 1 },
+			exit: { scale: .98 },
+			transition: {
+				type: "spring",
+				stiffness: 400,
+				damping: 30
+			},
+			children: /* @__PURE__ */ c(f, {
+				sx: {
+					position: "fixed",
+					inset: 0,
+					width: "100%",
+					minHeight: "100vh",
+					borderRadius: 0,
+					overflow: "hidden",
+					zIndex: (e) => e.zIndex.modal + 101
+				},
+				children: [
+					/* @__PURE__ */ s(l, {
+						sx: {
+							height: "100%",
+							display: "flex",
+							flexDirection: "column"
+						},
+						children: /* @__PURE__ */ s(l, {
+							sx: {
+								flex: 1,
+								p: {
+									xs: 1,
+									sm: 2,
+									md: 3
+								},
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								bgcolor: "background.default"
+							},
+							children: /* @__PURE__ */ s(m, {
+								mode: "wait",
+								children: /* @__PURE__ */ s(h.div, {
+									style: { position: "relative" },
+									initial: {
+										y: 20,
+										scale: .97
+									},
+									animate: {
+										y: 0,
+										scale: 1,
+										transition: {
+											type: "spring",
+											stiffness: 500,
+											damping: 30,
+											mass: .5
+										}
+									},
+									exit: {
+										y: 20,
+										scale: .97,
+										transition: { duration: .15 }
+									},
+									children: /* @__PURE__ */ c(f, {
+										onClick: (e) => e.stopPropagation(),
+										sx: {
+											position: "relative",
+											width: "100%",
+											aspectRatio: "16 / 9",
+											maxWidth: {
+												xs: "95%",
+												sm: "85%",
+												md: 960
+											},
+											height: "70vh",
+											borderRadius: 1,
+											border: "1px solid",
+											borderColor: "divider",
+											overflow: "hidden"
+										},
+										children: [x ? x(k) : /* @__PURE__ */ s(r, { item: k }), (k.title || k.desc) && /* @__PURE__ */ c(l, {
+											sx: {
+												position: "absolute",
+												left: 0,
+												right: 0,
+												bottom: 0,
+												p: {
+													xs: 1.5,
+													sm: 2,
+													md: 3
+												},
+												color: "common.white",
+												background: "linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 45%, transparent)"
+											},
+											onClick: (e) => e.stopPropagation(),
+											children: [k.title && /* @__PURE__ */ s(p, {
+												variant: "h6",
+												sx: { fontSize: {
+													xs: 14,
+													sm: 18,
+													md: 20
+												} },
+												children: k.title
+											}), k.desc && /* @__PURE__ */ s(p, {
+												variant: "body2",
+												sx: { mt: .5 },
+												children: k.desc
+											})]
+										})]
+									})
+								}, k.id)
+							})
+						})
+					}),
+					/* @__PURE__ */ s(u, {
+						"aria-label": E,
+						onClick: v,
+						sx: {
+							position: "absolute",
+							top: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							right: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							zIndex: (e) => e.zIndex.modal + 102
+						},
+						children: /* @__PURE__ */ s(n, {})
+					}),
+					w && A && /* @__PURE__ */ c(l, {
+						sx: {
+							position: "absolute",
+							top: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							left: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							zIndex: (e) => e.zIndex.modal + 102,
+							padding: 1,
+							px: 2,
+							fontSize: {
+								xs: 14,
+								sm: 16
+							},
+							color: "text.primary"
+						},
+						children: [
+							j + 1,
+							" / ",
+							M
+						]
+					}),
+					A && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(u, {
+						"aria-label": D,
+						onClick: (e) => {
+							e.stopPropagation(), P();
+						},
+						disabled: j === 0,
+						sx: {
+							position: "absolute",
+							left: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							top: "50%",
+							transform: "translateY(-50%)",
+							zIndex: (e) => e.zIndex.modal + 102,
+							"&:disabled": { opacity: .5 }
+						},
+						children: /* @__PURE__ */ s(g, {})
+					}), /* @__PURE__ */ s(u, {
+						"aria-label": O,
+						onClick: (e) => {
+							e.stopPropagation(), F();
+						},
+						disabled: j === M - 1,
+						sx: {
+							position: "absolute",
+							right: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							top: "50%",
+							transform: "translateY(-50%)",
+							zIndex: (e) => e.zIndex.modal + 102,
+							"&:disabled": { opacity: .5 }
+						},
+						children: /* @__PURE__ */ s(t, {})
+					})] })
+				]
+			})
+		}), C && A && b.length > 1 && /* @__PURE__ */ s(i, {
+			mediaItems: b,
+			selectedItem: k,
+			onSelect: N,
+			renderMediaItem: x
+		})] })
+	});
+};
+_.displayName = "SImageModal";
+//#endregion
+export { _ as t };

package/dist/s-label/s-label.js

@@ -1,4 +1,4 @@
-import { t as e } from "../InfoOutlined-C1AW3f5V.js";
+import { t as e } from "../InfoOutlined-BCzG-5py.js";
 import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { Stack as r, Tooltip as i, Typography as a } from "@mui/material";

package/dist/s-language-switcher/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../s-language-switcher-vievp2VS.js";
+import { n as e, r as t, t as n } from "../s-language-switcher-BKK0r8Kh.js";
 export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };

package/dist/s-language-switcher/s-language-switcher.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../s-language-switcher-vievp2VS.js";
+import { n as e, r as t, t as n } from "../s-language-switcher-BKK0r8Kh.js";
 export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };

package/dist/{s-language-switcher-vievp2VS.js → s-language-switcher-BKK0r8Kh.js}

@@ -3,11 +3,11 @@ import { _ as t } from "./createTheme-Bnw5w28O.js";
 import { o as n, r, t as i } from "./memoTheme-QMocAblm.js";
 import { t as a } from "./clsx-Bv8WXdlr.js";
 import { t as o } from "./styled-BTDmdi4c.js";
-import { u as s } from "./Modal-C1VRVWBZ.js";
-import { t as c } from "./Menu-C-0KEauj.js";
-import { t as l } from "./Typography-EsraKPZO.js";
+import { u as s } from "./Modal-Cu5Cgh-q.js";
+import { t as c } from "./Menu-CbHevx8q.js";
+import { t as l } from "./Typography-DqtTB0ZJ.js";
 import { SIconButton as u } from "./s-icon-button/s-icon-button.js";
-import { r as d, t as f } from "./MenuItem-DWivWkNb.js";
+import { r as d, t as f } from "./MenuItem-CCClg9Si.js";
 import * as p from "react";
 import m, { createElement as h } from "react";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";

package/dist/s-localization-provider/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-localization-provider-YCsec18c.js";
+import { t as e } from "../s-localization-provider-DDO9UEu_.js";
 export { e as SLocalizationProvider, e as default };

package/dist/s-localization-provider/s-localization-provider.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-localization-provider-YCsec18c.js";
+import { t as e } from "../s-localization-provider-DDO9UEu_.js";
 export { e as SLocalizationProvider, e as default };