@solostylist/ui-kit 1.0.229 → 2.0.0

package/dist/{s-image-modal → s-image-viewer}/types.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ModalProps } from '@mui/material';
+import { IconButtonProps, ModalProps } from '@mui/material';
 /**
  * Interface for individual media items (images/videos) in the modal
  */
@@ -19,34 +19,51 @@ export interface MediaItemType {
     /** Grid row span for layout (defaults to 2) */
     rowSpan?: number;
 }
+export type SImageViewerChangeReason = 'next' | 'previous' | 'thumbnail';
 /**
- * Props for SImageModal component
+ * Props for SImageViewer component
  */
-export interface SImageModalProps {
+interface SImageViewerBaseProps extends Omit<ModalProps, 'aria-label' | 'aria-labelledby' | 'children' | 'onClose' | 'open' | 'ref'> {
     /** Currently selected media item to display */
     selectedItem?: MediaItemType | null;
+    /** Initially selected media item for uncontrolled usage. */
+    defaultSelectedItem?: MediaItemType | null;
     /** Whether the modal is open */
-    isOpen: boolean;
+    open: boolean;
     /** Function to close the modal */
-    onClose: () => void;
-    /** Function to change the selected item (for navigation) */
-    onItemChange?: (item: MediaItemType) => void;
+    onClose: NonNullable<ModalProps['onClose']>;
+    /** Click handler for the viewer's close button. */
+    onCloseButtonClick: NonNullable<IconButtonProps['onClick']>;
+    /** Function to change the selected item (for navigation). */
+    onItemChange?: (event: React.SyntheticEvent, item: MediaItemType, reason: SImageViewerChangeReason) => 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;
+    renderMediaItem?: (item: MediaItemType) => 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;
+    /** Returns the accessible name for a thumbnail button. */
+    getThumbnailLabel?: (item: MediaItemType, index: number) => string;
 }
+/** The viewer surface must have an accessible name, matching MUI Dialog semantics. */
+type SImageViewerAccessibleName = {
+    /** Accessible name for the viewer dialog. */
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-label'?: never;
+    /** ID of the element that labels the viewer dialog. */
+    'aria-labelledby': string;
+};
+export type SImageViewerProps = SImageViewerBaseProps & SImageViewerAccessibleName;
+export {};

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

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { MediaItemType, SImageViewerChangeReason, SImageViewerProps } from './types';
+interface UseImageViewerNavigationParams {
+    /** Currently selected media item (controlled) */
+    selectedItem?: MediaItemType | null;
+    /** Initially selected media item (uncontrolled). */
+    defaultSelectedItem?: MediaItemType | null;
+    /** Function to change the selected item (for controlled navigation) */
+    onItemChange?: SImageViewerProps['onItemChange'];
+    /** 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 SImageViewer.
+ * Falls back to internal state when `onItemChange` is not provided (uncontrolled mode).
+ */
+export declare function useImageViewerNavigation({ selectedItem, defaultSelectedItem, onItemChange, mediaItems, showNavigation, }: UseImageViewerNavigationParams): {
+    currentSelectedItem: MediaItemType | null;
+    navigationEnabled: boolean;
+    currentIndex: number;
+    totalItems: number;
+    selectItem: (event: React.SyntheticEvent, item: MediaItemType, reason: SImageViewerChangeReason) => void;
+    goToPrevious: (event: React.SyntheticEvent) => void;
+    goToNext: (event: React.SyntheticEvent) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+};
+export {};

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

@@ -0,0 +1,75 @@
+import { t as e } from "../useControlled-BeB0W_Ui.js";
+import { useCallback as t } from "react";
+//#region lib/s-image-viewer/use-image-viewer-navigation.ts
+var n = [
+	"a[href]",
+	"audio[controls]",
+	"button",
+	"input",
+	"select",
+	"summary",
+	"textarea",
+	"video[controls]",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]:not([tabindex=\"-1\"])",
+	"[role=\"button\"]",
+	"[role=\"checkbox\"]",
+	"[role=\"combobox\"]",
+	"[role=\"link\"]",
+	"[role=\"menuitem\"]",
+	"[role=\"menuitemcheckbox\"]",
+	"[role=\"menuitemradio\"]",
+	"[role=\"option\"]",
+	"[role=\"radio\"]",
+	"[role=\"slider\"]",
+	"[role=\"spinbutton\"]",
+	"[role=\"switch\"]",
+	"[role=\"tab\"]",
+	"[role=\"textbox\"]"
+].join(", ");
+function r({ selectedItem: r, defaultSelectedItem: i, onItemChange: a, mediaItems: o, showNavigation: s }) {
+	let [c, l] = e({
+		controlled: r,
+		default: i ?? null,
+		name: "SImageViewer",
+		state: "selectedItem"
+	}), u = c ? o.findIndex((e) => e.id === c.id) : -1, d = !!(s && o.length > 1 && u >= 0), f = o.length, p = t((e, t, n) => {
+		l(t), a?.(e, t, n);
+	}, [a, l]), m = t((e) => {
+		d && u > 0 && p(e, o[u - 1], "previous");
+	}, [
+		d,
+		u,
+		o,
+		p
+	]), h = t((e) => {
+		d && u < f - 1 && p(e, o[u + 1], "next");
+	}, [
+		d,
+		u,
+		f,
+		o,
+		p
+	]);
+	return {
+		currentSelectedItem: c,
+		navigationEnabled: d,
+		currentIndex: u,
+		totalItems: f,
+		selectItem: p,
+		goToPrevious: m,
+		goToNext: h,
+		handleKeyDown: t((e) => {
+			let t = e.target;
+			t instanceof Element && t.closest(n) || (e.key === "ArrowLeft" && d && u > 0 ? (e.preventDefault(), m(e)) : e.key === "ArrowRight" && d && u < f - 1 && (e.preventDefault(), h(e)));
+		}, [
+			u,
+			h,
+			m,
+			d,
+			f
+		])
+	};
+}
+//#endregion
+export { r as useImageViewerNavigation };

package/dist/s-image-viewer-DNIEYdtL.js

@@ -0,0 +1,269 @@
+import { t as e } from "./styled-Bog8QCl3.js";
+import { t } from "./useThemeProps-Cr28OQu3.js";
+import { toSxArray as n } from "./utils/sx.js";
+import { t as r } from "./createSvgIcon-B0SZlJF1.js";
+import { t as i } from "./mergeSlotProps-xl1-PgWL.js";
+import { t as a } from "./ChevronRight-BxsM4W78.js";
+import { t as o } from "./Close-o4HFfK0I.js";
+import { DefaultMediaItem as s } from "./s-image-viewer/default-media-item.js";
+import { ImageViewerThumbnailDock as c } from "./s-image-viewer/image-viewer-thumbnail-dock.js";
+import { useImageViewerNavigation as l } from "./s-image-viewer/use-image-viewer-navigation.js";
+import u from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Box as m, IconButton as h, Modal as g, Paper as _, Typography as v } from "@mui/material";
+import { AnimatePresence as y, motion as b, useReducedMotion as x } from "framer-motion";
+//#region ../../node_modules/@mui/icons-material/ChevronLeft.mjs
+var S = r(/* @__PURE__ */ f("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }), "ChevronLeft"), C = e(g, {
+	name: "SImageViewer",
+	slot: "Root"
+})({}), w = u.forwardRef(function(e, r) {
+	let u = t({
+		props: e,
+		name: "SImageViewer"
+	}), { "aria-label": g, "aria-labelledby": w, selectedItem: T, defaultSelectedItem: E, open: D, onClose: O, onCloseButtonClick: k, onItemChange: A, mediaItems: j = [], renderMediaItem: M, showNavigation: N = !0, showThumbnailDock: P = !0, showCounter: F = !0, closeText: I = "Close", previousText: L = "Previous image", nextText: R = "Next image", getThumbnailLabel: z, slotProps: B, sx: V, ...H } = u, { currentSelectedItem: U, navigationEnabled: W, currentIndex: G, totalItems: K, selectItem: q, goToPrevious: J, goToNext: Y, handleKeyDown: X } = l({
+		selectedItem: T,
+		defaultSelectedItem: E,
+		onItemChange: A,
+		mediaItems: j,
+		showNavigation: N
+	}), Z = {
+		...u,
+		currentIndex: G,
+		navigationEnabled: W
+	}, Q = x();
+	return U ? /* @__PURE__ */ f(C, {
+		...H,
+		ownerState: Z,
+		open: D,
+		onClose: O,
+		ref: r,
+		sx: [(e) => ({ zIndex: e.zIndex.modal + 100 }), ...n(V)],
+		slotProps: {
+			...B,
+			backdrop: i(B?.backdrop, { sx: {
+				backdropFilter: "blur(8px)",
+				zIndex: (e) => e.zIndex.modal + 99
+			} })
+		},
+		children: /* @__PURE__ */ p(m, {
+			onKeyDown: X,
+			children: [/* @__PURE__ */ f(b.div, {
+				initial: Q ? !1 : { scale: .98 },
+				animate: { scale: 1 },
+				exit: Q ? void 0 : { scale: .98 },
+				transition: Q ? { duration: 0 } : {
+					type: "spring",
+					stiffness: 400,
+					damping: 30
+				},
+				children: /* @__PURE__ */ p(_, {
+					"aria-label": g,
+					"aria-labelledby": w,
+					"aria-modal": !0,
+					role: "dialog",
+					sx: {
+						position: "fixed",
+						inset: 0,
+						width: "100%",
+						minHeight: "100vh",
+						borderRadius: 0,
+						overflow: "hidden",
+						zIndex: (e) => e.zIndex.modal + 101
+					},
+					children: [
+						/* @__PURE__ */ f(m, {
+							sx: {
+								height: "100%",
+								display: "flex",
+								flexDirection: "column"
+							},
+							children: /* @__PURE__ */ f(m, {
+								sx: {
+									flex: 1,
+									p: {
+										xs: 1,
+										sm: 2,
+										md: 3
+									},
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									bgcolor: "background.default"
+								},
+								children: /* @__PURE__ */ f(y, {
+									initial: !Q,
+									mode: "wait",
+									children: /* @__PURE__ */ f(b.div, {
+										style: { position: "relative" },
+										initial: Q ? !1 : {
+											y: 20,
+											scale: .97
+										},
+										animate: {
+											y: 0,
+											scale: 1,
+											transition: Q ? { duration: 0 } : {
+												type: "spring",
+												stiffness: 500,
+												damping: 30,
+												mass: .5
+											}
+										},
+										exit: Q ? void 0 : {
+											y: 20,
+											scale: .97,
+											transition: { duration: .15 }
+										},
+										children: /* @__PURE__ */ p(_, {
+											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",
+												bgcolor: "grey.900"
+											},
+											children: [M ? M(U) : /* @__PURE__ */ f(s, { item: U }), (U.title || U.desc) && /* @__PURE__ */ p(m, {
+												sx: {
+													position: "absolute",
+													left: 0,
+													right: 0,
+													bottom: 0,
+													p: {
+														xs: 1.5,
+														sm: 2,
+														md: 3
+													},
+													color: "common.white",
+													gradient: "overlay.media"
+												},
+												onClick: (e) => e.stopPropagation(),
+												children: [U.title && /* @__PURE__ */ f(v, {
+													variant: "h6",
+													sx: { fontSize: {
+														xs: 14,
+														sm: 18,
+														md: 20
+													} },
+													children: U.title
+												}), U.desc && /* @__PURE__ */ f(v, {
+													variant: "body2",
+													sx: { mt: .5 },
+													children: U.desc
+												})]
+											})]
+										})
+									}, U.id)
+								})
+							})
+						}),
+						/* @__PURE__ */ f(h, {
+							"aria-label": I,
+							onClick: k,
+							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__ */ f(o, {})
+						}),
+						F && W && /* @__PURE__ */ p(m, {
+							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: [
+								G + 1,
+								" / ",
+								K
+							]
+						}),
+						W && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(h, {
+							"aria-label": L,
+							onClick: (e) => {
+								e.stopPropagation(), J(e);
+							},
+							disabled: G === 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__ */ f(S, {})
+						}), /* @__PURE__ */ f(h, {
+							"aria-label": R,
+							onClick: (e) => {
+								e.stopPropagation(), Y(e);
+							},
+							disabled: G === K - 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__ */ f(a, {})
+						})] })
+					]
+				})
+			}), P && W && j.length > 1 && /* @__PURE__ */ f(c, {
+				mediaItems: j,
+				selectedItem: U,
+				onSelect: q,
+				renderMediaItem: M,
+				getThumbnailLabel: z
+			})]
+		})
+	}) : null;
+});
+w.displayName = "SImageViewer";
+//#endregion
+export { w as t };

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

@@ -1,2 +1,3 @@
 export { default, default as SLabel } from './s-label';
-export type { SLabelProps } from './s-label';
+export type { SLabelOwnerState, SLabelProps, SLabelSlotProps, SLabelSlots } from './s-label';
+export type {} from '../theme/component-augmentation';

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

@@ -1,21 +1,38 @@
-import { default as React } from 'react';
-import { SxProps } from '@mui/material';
-import { Theme } from '../theme/types';
-/**
- * Props interface for SLabel component
- */
-export interface SLabelProps {
-    /** Main label text or element to display prominently */
-    label?: string | React.ReactNode;
-    /** Child elements to render below the label, typically form controls */
+import { IconButtonProps } from '@mui/material/IconButton';
+import { StackProps } from '@mui/material/Stack';
+import { TooltipProps } from '@mui/material/Tooltip';
+import { TypographyProps } from '@mui/material/Typography';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SLabelOwnerState extends SLabelProps {
+    disableLabelTypography: boolean;
+    disableValueTypography: boolean;
+    hasHint: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SLabelOwnerState>;
+export interface SLabelSlots {
+    hintButton?: React.ElementType;
+    label?: React.ElementType;
+    labelRow?: React.ElementType;
+    tooltip?: React.ElementType;
+    value?: React.ElementType;
+}
+export interface SLabelSlotProps {
+    hintButton?: OwnerStateSlotProps<Omit<IconButtonProps, 'children'>>;
+    label?: OwnerStateSlotProps<TypographyProps>;
+    labelRow?: OwnerStateSlotProps<StackProps>;
+    tooltip?: OwnerStateSlotProps<Omit<TooltipProps, 'children' | 'title'>>;
+    value?: OwnerStateSlotProps<TypographyProps>;
+}
+/** A labelled-value composition with an optional accessible hint. */
+export interface SLabelProps extends Omit<StackProps, 'children' | 'component'> {
     children?: React.ReactNode;
-    /** Tooltip hint text shown on hover of the help icon */
-    hint?: string;
-    /** Custom styles using Material-UI sx prop for layout customization */
-    sx?: SxProps<Theme>;
+    disableLabelTypography?: boolean;
+    disableValueTypography?: boolean;
+    hint?: React.ReactNode;
+    label: React.ReactNode;
+    slots?: SLabelSlots;
+    slotProps?: SLabelSlotProps;
 }
-export declare const SLabel: {
-    ({ label, children, hint, sx }: SLabelProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const SLabel: React.ForwardRefExoticComponent<Omit<SLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SLabel;

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

@@ -1,26 +1,68 @@
-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";
+import { t as e } from "../styled-Bog8QCl3.js";
+import { t } from "../Stack-UMc4dV4G.js";
+import { r as n } from "../elementAcceptingRef-DhkNAkFH.js";
+import { t as r } from "../useThemeProps-Cr28OQu3.js";
+import { toSxArray as i } from "../utils/sx.js";
+import { t as a } from "../appendOwnerState-CELpvdMz.js";
+import { t as o } from "../Typography-yXjc7kVP.js";
+import { t as s } from "../InfoOutlined-VC7X46pc.js";
+import { t as c } from "../Tooltip-DbCd6rgF.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region lib/s-label/s-label.tsx
-var o = (e) => typeof e == "string" || typeof e == "number", s = (e) => o(e) ? /* @__PURE__ */ t(a, {
-	sx: { color: "text.secondary" },
-	children: e
-}) : e, c = (e) => o(e) ? /* @__PURE__ */ t(a, { children: e }) : e, l = ({ label: a, children: o, hint: l, sx: u }) => /* @__PURE__ */ n(r, {
-	sx: [{ width: "100%" }, ...Array.isArray(u) ? u : [u]],
-	children: [/* @__PURE__ */ n(r, {
-		direction: "row",
-		sx: { alignItems: "center" },
-		children: [s(a), l ? /* @__PURE__ */ t(i, {
-			title: l,
-			placement: "top",
-			children: /* @__PURE__ */ t(e, { sx: {
-				marginLeft: 1,
-				color: "text.secondary"
-			} })
-		}) : null]
-	}), c(o)]
+var f = e(t, {
+	name: "SLabel",
+	slot: "Root"
+})({});
+function p(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var m = (e, t) => !t && !(l.isValidElement(e) && e.type === o), h = l.forwardRef(function(e, l) {
+	let h = r({
+		props: e,
+		name: "SLabel"
+	}), { children: g, disableLabelTypography: _ = !1, disableValueTypography: v = !1, hint: y, label: b, slotProps: x, slots: S, sx: C, ...w } = h, T = typeof y == "string" ? y.trim().length > 0 : !!y, E = {
+		...h,
+		disableLabelTypography: _,
+		disableValueTypography: v,
+		hasHint: T
+	}, D = S?.labelRow ?? t, O = S?.label ?? o, k = S?.value ?? o, A = S?.tooltip ?? c, j = S?.hintButton ?? n, M = a(S?.labelRow, p(x?.labelRow, E) ?? {}, E), N = a(S?.label, p(x?.label, E) ?? {}, E), P = a(S?.value, p(x?.value, E) ?? {}, E), F = a(S?.tooltip, p(x?.tooltip, E) ?? {}, E), I = a(S?.hintButton, p(x?.hintButton, E) ?? {}, E), L = m(b, _), R = m(g, v);
+	return /* @__PURE__ */ d(f, {
+		...w,
+		ref: l,
+		ownerState: E,
+		sx: [{ width: "100%" }, ...i(C)],
+		children: [/* @__PURE__ */ d(D, {
+			direction: "row",
+			...M,
+			sx: [{ alignItems: "center" }, ...i(M?.sx)],
+			children: [L ? /* @__PURE__ */ u(O, {
+				component: "span",
+				color: "text.secondary",
+				...N,
+				children: b
+			}) : b, E.hasHint ? /* @__PURE__ */ u(A, {
+				title: y,
+				placement: "top",
+				...F,
+				children: /* @__PURE__ */ u(j, {
+					"aria-label": typeof y == "string" ? y : "More information",
+					size: "small",
+					...I,
+					sx: [{
+						ml: 1,
+						p: 0
+					}, ...i(I?.sx)],
+					children: /* @__PURE__ */ u(s, { fontSize: "inherit" })
+				})
+			}) : null]
+		}), R ? /* @__PURE__ */ u(k, {
+			component: "div",
+			...P,
+			children: g
+		}) : g]
+	});
 });
-l.displayName = "SLabel";
+h.displayName = "SLabel";
 //#endregion
-export { l as SLabel, l as default };
+export { h as SLabel, h as default };

package/dist/s-language-switcher/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SLanguageSwitcher, SLanguagePopover, defaultLanguageOptions } from './s-language-switcher';
-export type { SLanguageSwitcherProps, SLanguagePopoverProps, SLanguageOption } from './s-language-switcher';
+export type { SLanguageSwitcherOwnerState, SLanguageSwitcherProps, SLanguagePopoverOwnerState, SLanguagePopoverProps, SLanguageOption, } from './s-language-switcher';
+export type {} from '../theme/component-augmentation';

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-B96dUknj.js";
+import { n as e, r as t, t as n } from "../s-language-switcher-D-1nywT3.js";
 export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };