@solostylist/ui-kit 2.0.2 → 2.0.4

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

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

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

@@ -1,17 +1,16 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../useForkRef-BuNFTXxE.js";
-import { t as n } from "../mergeSlotProps-DC8r4QzS.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Box as o, Skeleton as s, styled as c, useTheme as l, useThemeProps as u } from "@mui/material";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+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
-var d = c(o, {
+var d = o(i, {
 	name: "SLazyImage",
 	slot: "Root"
-})({}), f = c("img", {
+})({}), f = o("img", {
 	name: "SLazyImage",
 	slot: "Image"
-})({}), p = c(s, {
+})({}), p = o(a, {
 	name: "SLazyImage",
 	slot: "Skeleton"
 })({});
@@ -21,12 +20,12 @@ function m(e, t) {
 function h(e, t) {
 	return e === "circular" ? "50%" : e === "rounded" ? typeof t == "number" ? `${t}px` : t : 0;
 }
-var g = r.forwardRef(function(o, s) {
-	let c = u({
-		props: o,
+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 } = c, D = l(), [O, k] = r.useState(null), A = O === S, j = {
-		...c,
+	}), { 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,
@@ -35,13 +34,13 @@ var g = r.forwardRef(function(o, s) {
 		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 } = n(F, {
+	}, 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 = t(R, s), J = (e) => {
+	}), { 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__ */ a(M, {
+	return /* @__PURE__ */ r(M, {
 		...B,
 		...Y,
 		ref: q,
@@ -52,7 +51,7 @@ var g = r.forwardRef(function(o, s) {
 			position: "relative",
 			width: T
 		}, ...e(z)],
-		children: [A ? null : /* @__PURE__ */ i(P, {
+		children: [A ? null : /* @__PURE__ */ n(P, {
 			animation: "wave",
 			variant: w,
 			...G,
@@ -63,7 +62,7 @@ var g = r.forwardRef(function(o, s) {
 				minWidth: y,
 				width: "100%"
 			}, ...e(W)]
-		}), /* @__PURE__ */ i(N, {
+		}), /* @__PURE__ */ n(N, {
 			...U,
 			...X,
 			alt: g,

package/dist/s-link/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-link-Db1aabHh.js";
+import { SLink as e } from "./s-link.js";
 export { e as SLink, e as default };

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

@@ -1,2 +1,5 @@
-import { t as e } from "../s-link-Db1aabHh.js";
-export { e as SLink, e as default };
+import e from "@mui/material/Link";
+//#region lib/s-link/s-link.tsx
+var t = e;
+//#endregion
+export { t as SLink, t as default };

package/dist/s-list-action-item/s-list-action-item.js

@@ -1,15 +1,14 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
-import { t as n } from "../useForkRef-BuNFTXxE.js";
-import { t as r } from "../appendOwnerState-CFQTq3pb.js";
-import { getFocusVisibleStyle as i, reducedMotionMedia as a } from "../theme/components/action-styles.js";
-import { n as o } from "../svgIconClasses-1kWGzgux.js";
-import { t as s } from "../mergeSlotProps-DC8r4QzS.js";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Box as d, ListItemButton as f, Typography as p, styled as m, useThemeProps as h } from "@mui/material";
+import { getFocusVisibleStyle as n, reducedMotionMedia as r } from "../theme/components/action-styles.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { svgIconClasses as s } from "@mui/material/SvgIcon";
+import { Box as c, ListItemButton as l, Typography as u, styled as d, useThemeProps as f } from "@mui/material";
+import { mergeSlotProps as p, useForkRef as m } from "@mui/material/utils";
+import h from "@mui/utils/appendOwnerState";
 //#region lib/s-list-action-item/s-list-action-item.tsx
-var g = 44, _ = 36, v = m(f, {
+var g = 44, _ = 36, v = d(l, {
 	name: "SListActionItem",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -19,12 +18,12 @@ var g = 44, _ = 36, v = m(f, {
 	minHeight: g,
 	transition: e.transitions.create(["background-color", "color"], { duration: e.transitions.duration.shorter }),
 	width: "100%",
-	[`&&& .${o.root}`]: { color: "inherit" },
+	[`&&& .${s.root}`]: { color: "inherit" },
 	"&.Mui-focusVisible": {
-		...i(e),
+		...n(e),
 		outlineOffset: -2
 	},
-	[a]: { transition: "none" },
+	[r]: { transition: "none" },
 	variants: [{
 		props: ({ ownerState: e }) => e.variant === "inset",
 		style: {
@@ -39,7 +38,7 @@ var g = 44, _ = 36, v = m(f, {
 			paddingBlock: e.spacing(.5)
 		}
 	}]
-})), y = m(d, {
+})), y = d(c, {
 	name: "SListActionItem",
 	slot: "Icon",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -50,7 +49,7 @@ var g = 44, _ = 36, v = m(f, {
 	flexShrink: 0,
 	justifyContent: "center",
 	minWidth: 0
-}), b = m(d, {
+}), b = d(c, {
 	name: "SListActionItem",
 	slot: "Text",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -63,7 +62,7 @@ var g = 44, _ = 36, v = m(f, {
 		props: ({ ownerState: e }) => e.hasDescription,
 		style: { gap: e.spacing(.25) }
 	}]
-})), x = m(p, {
+})), x = d(u, {
 	name: "SListActionItem",
 	slot: "Label",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -72,7 +71,7 @@ var g = 44, _ = 36, v = m(f, {
 	minWidth: 0,
 	overflow: "hidden",
 	textOverflow: "ellipsis"
-}), S = m(p, {
+}), S = d(u, {
 	name: "SListActionItem",
 	slot: "Description",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -82,7 +81,7 @@ var g = 44, _ = 36, v = m(f, {
 	minWidth: 0,
 	overflow: "hidden",
 	textOverflow: "ellipsis"
-})), C = m(d, {
+})), C = d(c, {
 	name: "SListActionItem",
 	slot: "Trailing",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -92,53 +91,53 @@ var g = 44, _ = 36, v = m(f, {
 	display: "flex",
 	flexShrink: 0,
 	marginInlineStart: "auto"
-})), w = c.forwardRef(function(i, a) {
-	let o = h({
-		props: i,
+})), w = i.forwardRef(function(n, r) {
+	let i = f({
+		props: n,
 		name: "SListActionItem"
-	}), { "aria-current": c, component: d, dense: f = !1, description: p, disabled: m = !1, href: g, icon: _, label: w, selected: T = !1, slotProps: E, slots: D, sx: O, trailing: k, variant: A = "plain", ...j } = o, M = {
-		...o,
-		dense: f,
-		disabled: m,
-		hasDescription: p != null,
+	}), { "aria-current": s, component: c, dense: l = !1, description: u, disabled: d = !1, href: g, icon: _, label: w, selected: T = !1, slotProps: E, slots: D, sx: O, trailing: k, variant: A = "plain", ...j } = i, M = {
+		...i,
+		dense: l,
+		disabled: d,
+		hasDescription: u != null,
 		selected: T,
 		variant: A
-	}, N = D?.root ?? v, P = D?.icon ?? y, F = D?.text ?? b, I = D?.label ?? x, L = D?.description ?? S, R = D?.trailing ?? C, z = d ?? (g ? "a" : "button"), B = T ? "page" : void 0, V = "aria-current" in o ? c : B, { ref: H, sx: U, ...W } = r(N, s(t(E?.root, M), {
+	}, N = D?.root ?? v, P = D?.icon ?? y, F = D?.text ?? b, I = D?.label ?? x, L = D?.description ?? S, R = D?.trailing ?? C, z = c ?? (g ? "a" : "button"), B = T ? "page" : void 0, V = "aria-current" in i ? s : B, { ref: H, sx: U, ...W } = h(N, p(t(E?.root, M), {
 		...j,
 		"aria-current": V,
-		dense: f,
-		disabled: m,
-		href: m ? void 0 : g,
+		dense: l,
+		disabled: d,
+		href: d ? void 0 : g,
 		selected: T
-	}), M), G = n(H, a), K = r(P, s(t(E?.icon, M), { component: "span" }), M), q = r(F, s(t(E?.text, M), { component: "span" }), M), J = r(I, s(t(E?.label, M), {
+	}), M), G = m(H, r), K = h(P, p(t(E?.icon, M), { component: "span" }), M), q = h(F, p(t(E?.text, M), { component: "span" }), M), J = h(I, p(t(E?.label, M), {
 		component: "span",
 		variant: "body1"
-	}), M), Y = r(L, s(t(E?.description, M), {
+	}), M), Y = h(L, p(t(E?.description, M), {
 		component: "span",
 		variant: "body2"
-	}), M), X = r(R, s(t(E?.trailing, M), { component: "span" }), M);
-	return /* @__PURE__ */ u(N, {
+	}), M), X = h(R, p(t(E?.trailing, M), { component: "span" }), M);
+	return /* @__PURE__ */ o(N, {
 		...W,
 		ref: G,
 		component: z,
 		nativeButton: z === "button",
 		sx: [...e(U), ...e(O)],
 		children: [
-			_ == null ? null : /* @__PURE__ */ l(P, {
+			_ == null ? null : /* @__PURE__ */ a(P, {
 				...K,
 				children: _
 			}),
-			/* @__PURE__ */ u(F, {
+			/* @__PURE__ */ o(F, {
 				...q,
-				children: [/* @__PURE__ */ l(I, {
+				children: [/* @__PURE__ */ a(I, {
 					...J,
 					children: w
-				}), p == null ? null : /* @__PURE__ */ l(L, {
+				}), u == null ? null : /* @__PURE__ */ a(L, {
 					...Y,
-					children: p
+					children: u
 				})]
 			}),
-			k == null ? null : /* @__PURE__ */ l(R, {
+			k == null ? null : /* @__PURE__ */ a(R, {
 				...X,
 				children: k
 			})

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

@@ -1,2 +1,2 @@
-import { t as e } from "../s-localization-provider-CeyB_SGz.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.js

@@ -1,2 +1,12 @@
-import { t as e } from "../s-localization-provider-CeyB_SGz.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 };