@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -0,0 +1,266 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { DefaultMediaItem as t } from "./default-media-item.js";
+import { ImageViewerThumbnailDock as n } from "./image-viewer-thumbnail-dock.js";
+import { useImageViewerNavigation as r } from "./use-image-viewer-navigation.js";
+import { styled as i, useThemeProps as a } from "@mui/material/styles";
+import o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ChevronLeft as u, ChevronRight as d, Close as f } from "@mui/icons-material";
+import { Box as p, IconButton as m, Modal as h, Paper as g, Typography as _ } from "@mui/material";
+import { mergeSlotProps as v } from "@mui/material/utils";
+import { AnimatePresence as y, motion as b, useReducedMotion as x } from "framer-motion";
+//#region lib/s-image-viewer/s-image-viewer.tsx
+var S = i(h, {
+	name: "SImageViewer",
+	slot: "Root"
+})({}), C = o.forwardRef(function(i, o) {
+	let h = a({
+		props: i,
+		name: "SImageViewer"
+	}), { "aria-label": C, "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 } = h, { currentSelectedItem: U, navigationEnabled: W, currentIndex: G, totalItems: K, selectItem: q, goToPrevious: J, goToNext: Y, handleKeyDown: X } = r({
+		selectedItem: T,
+		defaultSelectedItem: E,
+		onItemChange: A,
+		mediaItems: j,
+		showNavigation: N
+	}), Z = {
+		...h,
+		currentIndex: G,
+		navigationEnabled: W
+	}, Q = x();
+	return U ? /* @__PURE__ */ c(S, {
+		...H,
+		ownerState: Z,
+		open: D,
+		onClose: O,
+		ref: o,
+		sx: [(e) => ({ zIndex: e.zIndex.modal + 100 }), ...e(V)],
+		slotProps: {
+			...B,
+			backdrop: v(B?.backdrop, { sx: {
+				backdropFilter: "blur(8px)",
+				zIndex: (e) => e.zIndex.modal + 99
+			} })
+		},
+		children: /* @__PURE__ */ l(p, {
+			onKeyDown: X,
+			children: [/* @__PURE__ */ c(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__ */ l(g, {
+					"aria-label": C,
+					"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__ */ c(p, {
+							sx: {
+								height: "100%",
+								display: "flex",
+								flexDirection: "column"
+							},
+							children: /* @__PURE__ */ c(p, {
+								sx: {
+									flex: 1,
+									p: {
+										xs: 1,
+										sm: 2,
+										md: 3
+									},
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									bgcolor: "background.default"
+								},
+								children: /* @__PURE__ */ c(y, {
+									initial: !Q,
+									mode: "wait",
+									children: /* @__PURE__ */ c(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__ */ l(g, {
+											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__ */ c(t, { item: U }), (U.title || U.desc) && /* @__PURE__ */ l(p, {
+												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__ */ c(_, {
+													variant: "h6",
+													sx: { fontSize: {
+														xs: 14,
+														sm: 18,
+														md: 20
+													} },
+													children: U.title
+												}), U.desc && /* @__PURE__ */ c(_, {
+													variant: "body2",
+													sx: { mt: .5 },
+													children: U.desc
+												})]
+											})]
+										})
+									}, U.id)
+								})
+							})
+						}),
+						/* @__PURE__ */ c(m, {
+							"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__ */ c(f, {})
+						}),
+						F && W && /* @__PURE__ */ l(p, {
+							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__ */ l(s, { children: [/* @__PURE__ */ c(m, {
+							"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__ */ c(u, {})
+						}), /* @__PURE__ */ c(m, {
+							"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__ */ c(d, {})
+						})] })
+					]
+				})
+			}), P && W && j.length > 1 && /* @__PURE__ */ c(n, {
+				mediaItems: j,
+				selectedItem: U,
+				onSelect: q,
+				renderMediaItem: M,
+				getThumbnailLabel: z
+			})]
+		})
+	}) : null;
+});
+C.displayName = "SImageViewer";
+//#endregion
+export { C as SImageViewer, C as default };

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 { useCallback as e } from "react";
+import { useControlled as t } from "@mui/material/utils";
+//#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] = t({
+		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 = e((e, t, n) => {
+		l(t), a?.(e, t, n);
+	}, [a, l]), m = e((e) => {
+		d && u > 0 && p(e, o[u - 1], "previous");
+	}, [
+		d,
+		u,
+		o,
+		p
+	]), h = e((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: e((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-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,67 @@
-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 { toSxArray as e } from "../utils/sx.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import r from "@mui/material/IconButton";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@mui/material/Typography";
+import c from "@mui/utils/appendOwnerState";
+import l from "@mui/material/Tooltip";
+import u from "@mui/icons-material/InfoOutlined";
+import d from "@mui/material/Stack";
 //#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 = t(d, {
+	name: "SLabel",
+	slot: "Root"
+})({});
+function p(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var m = (e, t) => !t && !(i.isValidElement(e) && e.type === s), h = i.forwardRef(function(t, i) {
+	let h = n({
+		props: t,
+		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 ?? d, O = S?.label ?? s, k = S?.value ?? s, A = S?.tooltip ?? l, j = S?.hintButton ?? r, M = c(S?.labelRow, p(x?.labelRow, E) ?? {}, E), N = c(S?.label, p(x?.label, E) ?? {}, E), P = c(S?.value, p(x?.value, E) ?? {}, E), F = c(S?.tooltip, p(x?.tooltip, E) ?? {}, E), I = c(S?.hintButton, p(x?.hintButton, E) ?? {}, E), L = m(b, _), R = m(g, v);
+	return /* @__PURE__ */ o(f, {
+		...w,
+		ref: i,
+		ownerState: E,
+		sx: [{ width: "100%" }, ...e(C)],
+		children: [/* @__PURE__ */ o(D, {
+			direction: "row",
+			...M,
+			sx: [{ alignItems: "center" }, ...e(M?.sx)],
+			children: [L ? /* @__PURE__ */ a(O, {
+				component: "span",
+				color: "text.secondary",
+				...N,
+				children: b
+			}) : b, E.hasHint ? /* @__PURE__ */ a(A, {
+				title: y,
+				placement: "top",
+				...F,
+				children: /* @__PURE__ */ a(j, {
+					"aria-label": typeof y == "string" ? y : "More information",
+					size: "small",
+					...I,
+					sx: [{
+						ml: 1,
+						p: 0
+					}, ...e(I?.sx)],
+					children: /* @__PURE__ */ a(u, { fontSize: "inherit" })
+				})
+			}) : null]
+		}), R ? /* @__PURE__ */ a(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";
-export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };
+import { SLanguagePopover as e, SLanguageSwitcher as t, defaultLanguageOptions as n } from "./s-language-switcher.js";
+export { e as SLanguagePopover, t as SLanguageSwitcher, t as default, n as defaultLanguageOptions };

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

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
+import { IconButtonProps } from '@mui/material/IconButton';
+import { MenuProps } from '@mui/material/Menu';
 export interface SLanguageOption {
     code: string;
     label: string;
@@ -7,39 +8,45 @@ export interface SLanguageOption {
     countryCode: string;
 }
 export declare const defaultLanguageOptions: SLanguageOption[];
-export interface SLanguagePopoverProps {
-    anchorEl: null | Element;
-    onClose?: () => void;
-    open?: boolean;
-    onLanguageChange?: (languageCode: string) => void;
+export interface SLanguagePopoverProps extends Omit<MenuProps, 'children'> {
+    onLanguageChange?: (event: React.MouseEvent<HTMLLIElement>, languageCode: string) => void;
     languages?: SLanguageOption[];
     currentLanguage?: string;
     menuWidth?: string | number;
+    /** ID applied to the menu element for trigger/menu ARIA relationships. */
+    menuId?: string;
+    /** ID of the element that labels the menu. */
+    menuLabelledBy?: string;
 }
-export declare const SLanguagePopover: ({ anchorEl, onClose, open, onLanguageChange, languages, currentLanguage, menuWidth, }: SLanguagePopoverProps) => React.JSX.Element;
+export interface SLanguagePopoverOwnerState extends SLanguagePopoverProps {
+    currentLanguage?: string;
+    menuWidth: string | number;
+    open: boolean;
+}
+export declare const SLanguagePopover: React.ForwardRefExoticComponent<Omit<SLanguagePopoverProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * Props interface for SLanguageSwitcher component
  */
-export interface SLanguageSwitcherProps {
+export interface SLanguageSwitcherProps extends Omit<IconButtonProps, 'children' | 'component'> {
     /** Custom language options to display */
     languages?: SLanguageOption[];
     /** Callback when language changes (if not provided, will use i18n.changeLanguage) */
-    onLanguageChange?: (languageCode: string) => void;
+    onLanguageChange?: (event: React.SyntheticEvent, languageCode: string) => void;
     /** Current language code (if not provided, will use i18n.language) */
     currentLanguage?: string;
-    /** Tooltip text for the language button */
-    tooltipText?: string;
+    /** Tooltip content for the language button. */
+    tooltip?: React.ReactNode;
     /** Size of the flag icon in the button */
     buttonFlagSize?: number;
-    /** Width of the language menu */
+    /** Minimum width of the language menu */
     menuWidth?: string | number;
-    /** Custom styles for the icon button */
-    sx?: SxProps<Theme>;
     /** Whether to use i18n integration */
     useI18n?: boolean;
 }
-export declare const SLanguageSwitcher: {
-    ({ languages, onLanguageChange, currentLanguage, tooltipText, buttonFlagSize, menuWidth, sx, useI18n, }: SLanguageSwitcherProps): React.JSX.Element;
-    displayName: string;
-};
+export interface SLanguageSwitcherOwnerState extends SLanguageSwitcherProps {
+    buttonFlagSize: number;
+    currentLanguage: string;
+    open: boolean;
+}
+export declare const SLanguageSwitcher: React.ForwardRefExoticComponent<Omit<SLanguageSwitcherProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default SLanguageSwitcher;