@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -1,2 +1,150 @@
-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 { SIconButton as e } from "../s-icon-button/s-icon-button.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@mui/material/Typography";
+import { mergeSlotProps as s } from "@mui/material/utils";
+import c from "@mui/material/ListItemIcon";
+import l from "@mui/material/Menu";
+import u from "@mui/material/MenuItem";
+import d from "react-country-flag";
+import { useTranslation as f } from "react-i18next";
+//#region lib/s-language-switcher/s-language-switcher.tsx
+var p = 16, m = 20, h = [{
+	code: "en",
+	label: "English",
+	countryCode: "GB"
+}, {
+	code: "vi",
+	label: "Vietnamese",
+	countryCode: "VN"
+}], g = t(l, {
+	name: "SLanguagePopover",
+	slot: "Root"
+})({}), _ = r.forwardRef(function(e, t) {
+	let r = n({
+		props: e,
+		name: "SLanguagePopover"
+	}), { anchorOrigin: l = {
+		horizontal: "right",
+		vertical: "bottom"
+	}, currentLanguage: f, languages: p = h, menuId: _, menuLabelledBy: v, menuWidth: y = "220px", onLanguageChange: b, slotProps: x, transformOrigin: S = {
+		horizontal: "right",
+		vertical: "top"
+	}, variant: C = "selectedMenu", ...w } = r, T = {
+		...r,
+		anchorOrigin: l,
+		currentLanguage: f,
+		languages: p,
+		menuId: _,
+		menuLabelledBy: v,
+		menuWidth: y,
+		onLanguageChange: b,
+		open: w.open,
+		slotProps: x,
+		transformOrigin: S,
+		variant: C
+	};
+	return /* @__PURE__ */ i(g, {
+		...w,
+		ref: t,
+		anchorOrigin: l,
+		ownerState: T,
+		slotProps: {
+			...x,
+			paper: s(x?.paper, { sx: { minWidth: y } }),
+			list: s(x?.list, {
+				id: _,
+				"aria-labelledby": v
+			})
+		},
+		transformOrigin: S,
+		variant: C,
+		children: p.map((e) => /* @__PURE__ */ a(u, {
+			onClick: (t) => {
+				b?.(t, e.code);
+			},
+			selected: f === e.code,
+			children: [/* @__PURE__ */ i(c, { children: /* @__PURE__ */ i(d, {
+				alt: "",
+				"aria-hidden": "true",
+				countryCode: e.countryCode,
+				svg: !0,
+				style: {
+					width: m,
+					height: m
+				}
+			}) }), /* @__PURE__ */ i(o, {
+				variant: "subtitle2",
+				children: e.label
+			})]
+		}, e.code))
+	});
+});
+_.displayName = "SLanguagePopover";
+var v = t(e, {
+	name: "SLanguageSwitcher",
+	slot: "Root"
+})({}), y = r.forwardRef(function(e, t) {
+	let o = n({
+		props: e,
+		name: "SLanguageSwitcher"
+	}), { "aria-label": s, languages: c = h, onLanguageChange: l, currentLanguage: u, tooltip: m, buttonFlagSize: g = p, menuWidth: y = "220px", onClick: b, useI18n: x = !0, ...S } = o, C = f(), w = x ? C.t : null, T = x ? C.i18n : null, [E, D] = r.useState(null), O = r.useId(), k = r.useId(), A = S.id ?? O, j = !!E, M = u ?? T?.language ?? c[0]?.code ?? "en", N = c.find((e) => e.code === M) || c[0], P = r.useCallback((e) => {
+		b?.(e), e.defaultPrevented || D(e.currentTarget);
+	}, [b]), F = r.useCallback(() => {
+		D(null);
+	}, []), I = r.useCallback((e, t) => {
+		l ? l(e, t) : T && T.changeLanguage(t), e.defaultPrevented || F();
+	}, [
+		F,
+		T,
+		l
+	]), L = m ?? (w ? w("header:language.tooltip") : "Change language"), R = {
+		...o,
+		"aria-label": s ?? (typeof L == "string" ? L : "Change language"),
+		buttonFlagSize: g,
+		currentLanguage: M,
+		languages: c,
+		menuWidth: y,
+		onClick: b,
+		onLanguageChange: l,
+		open: j,
+		tooltip: L,
+		useI18n: x
+	};
+	return /* @__PURE__ */ a(r.Fragment, { children: [/* @__PURE__ */ i(v, {
+		...S,
+		ref: t,
+		id: A,
+		"aria-controls": j ? k : void 0,
+		"aria-expanded": j || void 0,
+		"aria-haspopup": "menu",
+		"aria-label": s ?? (typeof L == "string" ? L : "Change language"),
+		onClick: P,
+		ownerState: R,
+		tooltip: L,
+		children: /* @__PURE__ */ i(d, {
+			alt: "",
+			"aria-hidden": "true",
+			countryCode: N?.countryCode || "US",
+			svg: !0,
+			style: {
+				width: g,
+				height: g
+			}
+		})
+	}), /* @__PURE__ */ i(_, {
+		anchorEl: E,
+		menuId: k,
+		menuLabelledBy: A,
+		onClose: F,
+		open: j,
+		onLanguageChange: I,
+		languages: c,
+		currentLanguage: M,
+		menuWidth: y
+	})] });
+});
+y.displayName = "SLanguageSwitcher";
+//#endregion
+export { _ as SLanguagePopover, y as SLanguageSwitcher, y as default, h as defaultLanguageOptions };

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

@@ -1,2 +1,3 @@
 export { default, default as SLazyImage } from './s-lazy-image';
-export type { SLazyImageProps } from './s-lazy-image';
+export type { SLazyImageImageProps, SLazyImageOwnerState, SLazyImageProps, SLazyImageSlotProps, SLazyImageSlots, } from './s-lazy-image';
+export type {} from '../theme/component-augmentation';

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

@@ -1,2 +1,2 @@
-import e from "./s-lazy-image.js";
+import { SLazyImage as e } from "./s-lazy-image.js";
 export { e as SLazyImage, e as default };

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

@@ -1,29 +1,50 @@
-import { default as React } from 'react';
-import { SkeletonProps } from '@mui/material';
-/**
- * Props for the SLazyImage component
- */
-export interface SLazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    /** Image source URL */
+import { BoxProps, SkeletonProps, SxProps, Theme } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SLazyImageOwnerState extends SLazyImageProps {
+    loaded: boolean;
+    variant: NonNullable<SkeletonProps['variant']>;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SLazyImageOwnerState>;
+export type SLazyImageImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+    sx?: SxProps<Theme>;
+};
+export interface SLazyImageSlots {
+    image?: React.JSXElementConstructor<SLazyImageImageProps & {
+        ownerState?: SLazyImageOwnerState;
+    }>;
+    root?: React.JSXElementConstructor<Omit<BoxProps, 'component'> & {
+        ownerState?: SLazyImageOwnerState;
+    }>;
+    skeleton?: React.JSXElementConstructor<SkeletonProps & {
+        ownerState?: SLazyImageOwnerState;
+    }>;
+}
+export interface SLazyImageSlotProps {
+    image?: OwnerStateSlotProps<SLazyImageImageProps>;
+    root?: OwnerStateSlotProps<Omit<BoxProps, 'component'>>;
+    skeleton?: OwnerStateSlotProps<SkeletonProps>;
+}
+/** Props for an image with a MUI Skeleton loading state. */
+export interface SLazyImageProps extends Omit<BoxProps, 'children' | 'component' | 'ref'> {
+    /** Accessible alternative text. Use an empty string for decorative images. */
+    alt: string;
+    /** Height applied to the root, skeleton, and image. */
+    height?: number | string;
+    /** Minimum height applied to all structural slots. */
+    minHeight?: number | string;
+    /** Minimum width applied to all structural slots. */
+    minWidth?: number | string;
+    /** Image source URL. */
     src: string;
-    /** Skeleton variant while loading */
+    /** Components used for structural slots. */
+    slots?: SLazyImageSlots;
+    /** Props or owner-state callbacks for structural slots. */
+    slotProps?: SLazyImageSlotProps;
+    /** Skeleton shape and the default image border-radius shape. */
     variant?: SkeletonProps['variant'];
-    /** Custom styles applied to both skeleton and loaded image */
-    style?: React.CSSProperties;
-    /** Image height */
-    height?: number | string;
-    /** Image width */
+    /** Width applied to the root, skeleton, and image. */
     width?: number | string;
-    /** Minimum width constraint */
-    minWidth?: number | string;
-    /** Minimum height constraint */
-    minHeight?: number | string;
 }
-/**
- * A lazy-loading image component with skeleton placeholder.
- */
-declare const SLazyImage: {
-    ({ src, variant, height, width, style, minWidth, minHeight, onLoad, ...props }: SLazyImageProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const SLazyImage: React.ForwardRefExoticComponent<SLazyImageProps & React.RefAttributes<HTMLDivElement>>;
 export default SLazyImage;

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

@@ -1,47 +1,84 @@
-import { useId as e, useState as t } from "react";
+import { toSxArray as e } from "../utils/sx.js";
+import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Box as i, Skeleton as a, useTheme as o } from "@mui/material";
+import { Box as i, Skeleton as a, styled as o, useTheme as s, useThemeProps as c } from "@mui/material";
+import { mergeSlotProps as l, useForkRef as u } from "@mui/material/utils";
 //#region lib/s-lazy-image/s-lazy-image.tsx
-function s(e, t) {
-	return e === "circular" ? "50%" : e === "rounded" ? t : "0px";
+var d = o(i, {
+	name: "SLazyImage",
+	slot: "Root"
+})({}), f = o("img", {
+	name: "SLazyImage",
+	slot: "Image"
+})({}), p = o(a, {
+	name: "SLazyImage",
+	slot: "Skeleton"
+})({});
+function m(e, t) {
+	return typeof e == "function" ? e(t) : e;
 }
-var c = ({ src: c, variant: l = "rounded", height: u = "100%", width: d = "100%", style: f, minWidth: p = "auto", minHeight: m = "auto", onLoad: h, ...g }) => {
-	let _ = e(), v = o(), [y, b] = t(!1), x = s(l, v.shape.borderRadius);
-	return /* @__PURE__ */ r(i, {
-		sx: {
-			height: u,
-			width: d
-		},
-		children: [!y && /* @__PURE__ */ n(a, {
-			variant: l,
-			id: `image-skeleton-${_}`,
+function h(e, t) {
+	return e === "circular" ? "50%" : e === "rounded" ? typeof t == "number" ? `${t}px` : t : 0;
+}
+var g = t.forwardRef(function(i, a) {
+	let o = c({
+		props: i,
+		name: "SLazyImage"
+	}), { alt: g, height: _ = "100%", minHeight: v = "auto", minWidth: y = "auto", slotProps: b, slots: x, src: S, sx: C, variant: w = "rounded", width: T = "100%", ...E } = o, D = s(), [O, k] = t.useState(null), A = O === S, j = {
+		...o,
+		alt: g,
+		height: _,
+		loaded: A,
+		minHeight: v,
+		minWidth: y,
+		src: S,
+		variant: w,
+		width: T
+	}, M = x?.root ?? d, N = x?.image ?? f, P = x?.skeleton ?? p, F = m(b?.root, j), I = m(b?.image, j), L = m(b?.skeleton, j), { ref: R, sx: z, ...B } = l(F, {
+		...E,
+		sx: C
+	}), { onLoad: V, sx: H, ...U } = I ?? {}, { sx: W, ...G } = L ?? {}, K = h(w, D.shape.borderRadius), q = u(R, a), J = (e) => {
+		k(S), V?.(e);
+	}, Y = { ownerState: j }, X = { ownerState: j }, Z = { ownerState: j };
+	return /* @__PURE__ */ r(M, {
+		...B,
+		...Y,
+		ref: q,
+		sx: [{
+			height: _,
+			minHeight: v,
+			minWidth: y,
+			position: "relative",
+			width: T
+		}, ...e(z)],
+		children: [A ? null : /* @__PURE__ */ n(P, {
 			animation: "wave",
-			style: {
-				height: u,
-				width: d,
-				minWidth: p,
-				minHeight: m,
-				...f
-			}
-		}), /* @__PURE__ */ n(i, {
-			component: "img",
-			src: c,
-			style: {
-				height: u,
-				width: d,
-				minWidth: p,
-				minHeight: m,
-				display: y ? "block" : "none",
-				borderRadius: x,
-				...f
-			},
-			onLoad: (e) => {
-				b(!0), h?.(e);
-			},
-			...g
+			variant: w,
+			...G,
+			...Z,
+			sx: [{
+				height: "100%",
+				minHeight: v,
+				minWidth: y,
+				width: "100%"
+			}, ...e(W)]
+		}), /* @__PURE__ */ n(N, {
+			...U,
+			...X,
+			alt: g,
+			onLoad: J,
+			src: S,
+			sx: [{
+				borderRadius: K,
+				display: A ? "block" : "none",
+				height: "100%",
+				minHeight: v,
+				minWidth: y,
+				width: "100%"
+			}, ...e(H)]
 		})]
 	});
-};
-c.displayName = "SLazyImage";
+});
+g.displayName = "SLazyImage";
 //#endregion
-export { c as default };
+export { g as SLazyImage, g as default };

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

@@ -1,34 +1,5 @@
-import { LinkProps, TypographyProps } from '@mui/material';
-import * as React from 'react';
-/**
- * Props interface for SLink component
- */
-export interface SLinkProps {
-    /** Text or element displayed before the main link */
-    beforeText?: string | React.ReactNode;
-    /** Text or element displayed after the main link */
-    afterText?: string | React.ReactNode;
-    /** The main clickable link text or element */
-    mainText?: string | React.ReactNode;
-    /** URL for the link (defaults to '#') */
-    href?: string;
-    /** Component to render the link as (e.g., RouterLink for client-side routing) */
-    component?: React.ElementType;
-    /** Target attribute for the link (e.g., '_blank' for new tab) */
-    target?: string;
-    /** Color of the surrounding text (defaults to text.primary) */
-    color?: TypographyProps['color'];
-    /** Color of the link itself (defaults to primary.main) */
-    linkColor?: LinkProps['color'];
-    /** Line height for the typography */
-    lineHeight?: React.CSSProperties['lineHeight'];
-    /** Typography variant for the container text */
-    variant?: TypographyProps['variant'];
-    /** Click handler for the link */
-    onClick?: LinkProps['onClick'];
-}
-export declare const SLink: {
-    ({ onClick, beforeText, afterText, mainText, href, component, target, color, linkColor, variant, lineHeight, }: SLinkProps): React.JSX.Element;
-    displayName: string;
-};
+import { LinkProps } from '@mui/material/Link';
+/** Exact MUI Link props. Compose surrounding prose with Typography. */
+export type SLinkProps = LinkProps;
+export declare const SLink: import('@mui/material/OverridableComponent').OverridableComponent<import('@mui/material').LinkTypeMap<{}, "a">>;
 export default SLink;

package/dist/s-link/s-link.js

@@ -1,37 +1,5 @@
-import "react";
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Link as n, Typography as r } from "@mui/material";
+import e from "@mui/material/Link";
 //#region lib/s-link/s-link.tsx
-var i = ({ onClick: i, beforeText: a = "", afterText: o = "", mainText: s = "", href: c = "#", component: l = "a", target: u, color: d = "text.primary", linkColor: f = "primary.main", variant: p = "body2", lineHeight: m }) => /* @__PURE__ */ t(r, {
-	variant: p,
-	sx: {
-		color: d,
-		lineHeight: m
-	},
-	children: [
-		a,
-		" ",
-		/* @__PURE__ */ e(n, {
-			href: c,
-			onClick: i,
-			sx: {
-				color: f,
-				cursor: "pointer",
-				fontSize: "inherit",
-				textDecoration: "none",
-				textUnderlineOffset: "4px",
-				"&::before": { display: "none" },
-				"&:hover": { textDecoration: "underline" },
-				"&:active": { textDecoration: "underline" }
-			},
-			component: l,
-			target: u,
-			children: s
-		}),
-		" ",
-		o
-	]
-});
-i.displayName = "SLink";
+var t = e;
 //#endregion
-export { i as SLink, i as default };
+export { t as SLink, t as default };

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

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

package/dist/s-localization-provider/s-localization-provider.d.ts

@@ -1,13 +1,11 @@
+import { LocalizationProviderProps } from '@mui/x-date-pickers/LocalizationProvider';
 import * as React from 'react';
 /**
  * Props for the SLocalizationProvider component
  */
-export interface SLocalizationProviderProps {
-    /** Child components that will have access to date localization */
-    children: React.ReactNode;
-}
+export type SLocalizationProviderProps = Omit<LocalizationProviderProps<string>, 'dateAdapter'>;
 export declare const SLocalizationProvider: {
-    ({ children }: SLocalizationProviderProps): React.JSX.Element;
+    (props: SLocalizationProviderProps): React.JSX.Element;
     displayName: string;
 };
 export default SLocalizationProvider;

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

@@ -1,2 +1,12 @@
-import { t as e } from "../s-localization-provider-l5J7myJJ.js";
-export { e as SLocalizationProvider, e as default };
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+import { AdapterDayjs as t } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider as n } from "@mui/x-date-pickers/LocalizationProvider";
+//#region lib/s-localization-provider/s-localization-provider.tsx
+var r = (r) => /* @__PURE__ */ e(n, {
+	...r,
+	dateAdapter: t
+});
+r.displayName = "SLocalizationProvider";
+//#endregion
+export { r as SLocalizationProvider, r as default };

package/dist/s-moving-border/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SMovingBorder } from './s-moving-border';
-export type { SMovingBorderProps } from './s-moving-border';
+export type { SMovingBorderOwnerState, SMovingBorderProps } from './s-moving-border';
+export type {} from '../theme/component-augmentation';

package/dist/s-moving-border/s-moving-border.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { BoxProps } from '@mui/material';
-export interface SMovingBorderProps extends BoxProps {
+export interface SMovingBorderProps extends Omit<BoxProps, 'component'> {
     /** Container border radius. */
     readonly borderRadius?: React.CSSProperties['borderRadius'];
     /** Cycle duration in milliseconds (default: 6000). */
@@ -20,5 +20,11 @@ export interface SMovingBorderProps extends BoxProps {
     /** Content. */
     readonly children: React.ReactNode;
 }
-export declare const SMovingBorder: React.FC<SMovingBorderProps>;
+export interface SMovingBorderOwnerState extends SMovingBorderProps {
+    borderRadius?: React.CSSProperties['borderRadius'];
+    duration: number;
+    glowColor: string;
+    glowSize: number;
+}
+export declare const SMovingBorder: React.ForwardRefExoticComponent<Omit<SMovingBorderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SMovingBorder;