@solostylist/ui-kit 2.0.1 → 2.0.3

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

@@ -1,16 +1,17 @@
 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";
+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 p = 16, m = 20, h = [{
+var m = 16, h = 20, g = [{
 	code: "en",
 	label: "English",
 	countryCode: "GB"
@@ -18,101 +19,95 @@ var p = 16, m = 20, h = [{
 	code: "vi",
 	label: "Vietnamese",
 	countryCode: "VN"
-}], g = t(l, {
+}], _ = n(u, {
 	name: "SLanguagePopover",
 	slot: "Root"
-})({}), _ = r.forwardRef(function(e, t) {
-	let r = n({
+})({}), v = i.forwardRef(function(e, n) {
+	let i = r({
 		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
+	}), { 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__ */ i(g, {
-		...w,
-		ref: t,
-		anchorOrigin: l,
-		ownerState: T,
+	return /* @__PURE__ */ a(_, {
+		...T,
+		ref: n,
+		anchorOrigin: u,
+		ownerState: E,
 		slotProps: {
-			...x,
-			paper: s(x?.paper, { sx: { minWidth: y } }),
-			list: s(x?.list, {
-				id: _,
-				"aria-labelledby": v
+			...S,
+			paper: c(S?.paper, { sx: { minWidth: b } }),
+			list: c(S?.list, {
+				id: v,
+				"aria-labelledby": y
 			})
 		},
-		transformOrigin: S,
-		variant: C,
-		children: p.map((e) => /* @__PURE__ */ a(u, {
+		transformOrigin: C,
+		variant: w,
+		children: m.map((e) => /* @__PURE__ */ o(d, {
 			onClick: (t) => {
-				b?.(t, e.code);
+				x?.(t, e.code);
 			},
-			selected: f === e.code,
-			children: [/* @__PURE__ */ i(c, { children: /* @__PURE__ */ i(d, {
+			selected: p === e.code,
+			children: [/* @__PURE__ */ a(l, { children: /* @__PURE__ */ a(f, {
 				alt: "",
 				"aria-hidden": "true",
 				countryCode: e.countryCode,
 				svg: !0,
 				style: {
-					width: m,
-					height: m
+					width: h,
+					height: h
 				}
-			}) }), /* @__PURE__ */ i(o, {
+			}) }), /* @__PURE__ */ a(s, {
 				variant: "subtitle2",
 				children: e.label
 			})]
 		}, e.code))
 	});
 });
-_.displayName = "SLanguagePopover";
-var v = t(e, {
+v.displayName = "SLanguagePopover";
+var y = n(e, {
 	name: "SLanguageSwitcher",
 	slot: "Root"
-})({}), y = r.forwardRef(function(e, t) {
-	let o = n({
+})({}), b = i.forwardRef(function(e, t) {
+	let n = r({
 		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) => {
+	}), { "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 = r.useCallback(() => {
+	}, [b]), F = i.useCallback(() => {
 		D(null);
-	}, []), I = r.useCallback((e, t) => {
+	}, []), I = i.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,
+	]), L = d ?? (w ? w("header:language.tooltip") : "Change language"), R = {
+		...n,
 		"aria-label": s ?? (typeof L == "string" ? L : "Change language"),
-		buttonFlagSize: g,
+		buttonFlagSize: h,
 		currentLanguage: M,
 		languages: c,
-		menuWidth: y,
+		menuWidth: _,
 		onClick: b,
 		onLanguageChange: l,
 		open: j,
 		tooltip: L,
 		useI18n: x
 	};
-	return /* @__PURE__ */ a(r.Fragment, { children: [/* @__PURE__ */ i(v, {
+	return /* @__PURE__ */ o(i.Fragment, { children: [/* @__PURE__ */ a(y, {
 		...S,
 		ref: t,
 		id: A,
@@ -123,17 +118,17 @@ var v = t(e, {
 		onClick: P,
 		ownerState: R,
 		tooltip: L,
-		children: /* @__PURE__ */ i(d, {
+		children: /* @__PURE__ */ a(f, {
 			alt: "",
 			"aria-hidden": "true",
 			countryCode: N?.countryCode || "US",
 			svg: !0,
 			style: {
-				width: g,
-				height: g
+				width: h,
+				height: h
 			}
 		})
-	}), /* @__PURE__ */ i(_, {
+	}), /* @__PURE__ */ a(v, {
 		anchorEl: E,
 		menuId: k,
 		menuLabelledBy: A,
@@ -142,9 +137,9 @@ var v = t(e, {
 		onLanguageChange: I,
 		languages: c,
 		currentLanguage: M,
-		menuWidth: y
+		menuWidth: _
 	})] });
 });
-y.displayName = "SLanguageSwitcher";
+b.displayName = "SLanguageSwitcher";
 //#endregion
-export { _ as SLanguagePopover, y as SLanguageSwitcher, y as default, h as defaultLanguageOptions };
+export { v as SLanguagePopover, b as SLanguageSwitcher, b as default, g as defaultLanguageOptions };

package/dist/s-list-action-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as SListActionItem } from './s-list-action-item';
+export type { SListActionItemOwnerState, SListActionItemProps, SListActionItemRootSlotProps, SListActionItemSlotProps, SListActionItemSlots, SListActionItemVariant, } from './s-list-action-item';

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

@@ -0,0 +1,2 @@
+import { SListActionItem as e } from "./s-list-action-item.js";
+export { e as SListActionItem, e as default };

package/dist/s-list-action-item/s-list-action-item.d.ts

@@ -0,0 +1,89 @@
+import { BoxProps, ListItemButtonProps, TypographyProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** Row shape: `plain` spans the full width, `inset` is inset and rounded for popover menus. */
+export type SListActionItemVariant = 'inset' | 'plain';
+export interface SListActionItemSlots {
+    /** Secondary text element. */
+    description?: React.ElementType;
+    /** Leading icon container. */
+    icon?: React.ElementType;
+    /** Primary label element. */
+    label?: React.ElementType;
+    /** Interactive row element. */
+    root?: React.ElementType;
+    /** Column wrapping label and description. */
+    text?: React.ElementType;
+    /** Trailing content container. */
+    trailing?: React.ElementType;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SListActionItemOwnerState>;
+/**
+ * Root slot props, widened with the anchor attributes the row forwards when
+ * `href` is set — `ListItemButtonProps` on its own describes a `div`.
+ */
+export type SListActionItemRootSlotProps = Omit<ListItemButtonProps, 'children' | 'component'> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'>;
+export interface SListActionItemSlotProps {
+    /** Props or owner-state callback for the description slot. */
+    description?: OwnerStateSlotProps<TypographyProps>;
+    /** Props or owner-state callback for the icon slot. */
+    icon?: OwnerStateSlotProps<BoxProps>;
+    /** Props or owner-state callback for the label slot. */
+    label?: OwnerStateSlotProps<TypographyProps>;
+    /** Props or owner-state callback for the root slot. */
+    root?: OwnerStateSlotProps<SListActionItemRootSlotProps>;
+    /** Props or owner-state callback for the text column slot. */
+    text?: OwnerStateSlotProps<BoxProps>;
+    /** Props or owner-state callback for the trailing slot. */
+    trailing?: OwnerStateSlotProps<BoxProps>;
+}
+/** Props for a list action row with button or link semantics. */
+export interface SListActionItemProps extends Omit<ListItemButtonProps, 'children' | 'component' | 'dense' | 'disabled' | 'onClick' | 'selected' | 'title'> {
+    /** Root element override. Defaults to `a` when `href` is set, otherwise `button`. */
+    component?: React.ElementType;
+    /** Uses compact vertical padding. */
+    dense?: boolean;
+    /** Secondary text rendered under the label. */
+    description?: React.ReactNode;
+    /** Disables activation and exposes the disabled state to assistive technology. */
+    disabled?: boolean;
+    /** Link destination. When set, the row renders with anchor semantics. */
+    href?: string;
+    /** Leading content, usually an icon. */
+    icon?: React.ReactNode;
+    /** Primary label. */
+    label: React.ReactNode;
+    /** Called when the row is activated. Receives the original mouse event. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Anchor relationship, forwarded when the row renders as a link. */
+    rel?: string;
+    /** Marks the row as the current selection, and sets `aria-current="page"`. */
+    selected?: boolean;
+    /** Components used for internal structural slots. */
+    slots?: SListActionItemSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SListActionItemSlotProps;
+    /** Anchor target, forwarded when the row renders as a link. */
+    target?: React.HTMLAttributeAnchorTarget;
+    /** Trailing content, e.g. a check mark or shortcut hint. */
+    trailing?: React.ReactNode;
+    /** Row shape. `inset` adds side margins and a rounded corner for popover menus. */
+    variant?: SListActionItemVariant;
+}
+export interface SListActionItemOwnerState extends SListActionItemProps {
+    dense: boolean;
+    disabled: boolean;
+    hasDescription: boolean;
+    selected: boolean;
+    variant: SListActionItemVariant;
+}
+/**
+ * A single interactive row for menus, settings lists and popovers.
+ *
+ * Semantics follow the props rather than a flag: the row is a native `button`
+ * until `href` is set, at which point it becomes an anchor. Leading `icon`,
+ * `description` and `trailing` content are optional, and every structural
+ * element is swappable through `slots` / `slotProps`.
+ */
+export declare const SListActionItem: React.ForwardRefExoticComponent<Omit<SListActionItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export default SListActionItem;

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

@@ -0,0 +1,149 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+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 = d(l, {
+	name: "SListActionItem",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	color: (e.vars ?? e).palette.text.primary,
+	gap: e.spacing(1),
+	minHeight: g,
+	transition: e.transitions.create(["background-color", "color"], { duration: e.transitions.duration.shorter }),
+	width: "100%",
+	[`&&& .${s.root}`]: { color: "inherit" },
+	"&.Mui-focusVisible": {
+		...n(e),
+		outlineOffset: -2
+	},
+	[r]: { transition: "none" },
+	variants: [{
+		props: ({ ownerState: e }) => e.variant === "inset",
+		style: {
+			borderRadius: e.radius.md,
+			marginInline: e.spacing(.75),
+			width: "auto"
+		}
+	}, {
+		props: ({ ownerState: e }) => e.dense,
+		style: {
+			minHeight: _,
+			paddingBlock: e.spacing(.5)
+		}
+	}]
+})), y = d(c, {
+	name: "SListActionItem",
+	slot: "Icon",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	alignItems: "center",
+	color: "inherit",
+	display: "flex",
+	flexShrink: 0,
+	justifyContent: "center",
+	minWidth: 0
+}), b = d(c, {
+	name: "SListActionItem",
+	slot: "Text",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	display: "flex",
+	flex: 1,
+	flexDirection: "column",
+	minWidth: 0,
+	variants: [{
+		props: ({ ownerState: e }) => e.hasDescription,
+		style: { gap: e.spacing(.25) }
+	}]
+})), x = d(u, {
+	name: "SListActionItem",
+	slot: "Label",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "block",
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis"
+}), S = d(u, {
+	name: "SListActionItem",
+	slot: "Description",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	color: (e.vars ?? e).palette.text.secondary,
+	display: "block",
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis"
+})), C = d(c, {
+	name: "SListActionItem",
+	slot: "Trailing",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	color: (e.vars ?? e).palette.text.secondary,
+	display: "flex",
+	flexShrink: 0,
+	marginInlineStart: "auto"
+})), w = i.forwardRef(function(n, r) {
+	let i = f({
+		props: n,
+		name: "SListActionItem"
+	}), { "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 = 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: l,
+		disabled: d,
+		href: d ? void 0 : g,
+		selected: T
+	}), 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 = h(L, p(t(E?.description, M), {
+		component: "span",
+		variant: "body2"
+	}), 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__ */ a(P, {
+				...K,
+				children: _
+			}),
+			/* @__PURE__ */ o(F, {
+				...q,
+				children: [/* @__PURE__ */ a(I, {
+					...J,
+					children: w
+				}), u == null ? null : /* @__PURE__ */ a(L, {
+					...Y,
+					children: u
+				})]
+			}),
+			k == null ? null : /* @__PURE__ */ a(R, {
+				...X,
+				children: k
+			})
+		]
+	});
+});
+w.displayName = "SListActionItem";
+//#endregion
+export { w as SListActionItem, w as default };

package/dist/s-mega-menu/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SMegaMenu } from './s-mega-menu';
+export type { SMegaMenuChangeReason, SMegaMenuItem, SMegaMenuItemBase, SMegaMenuItemState, SMegaMenuLayout, SMegaMenuOwnerState, SMegaMenuPanelState, SMegaMenuProps, SMegaMenuResolvedLayout, SMegaMenuSide, SMegaMenuSlotProps, SMegaMenuSlots, SMegaMenuTriggerState, } from './types';
+export type {} from '../theme/component-augmentation';

package/dist/s-mega-menu/index.js

@@ -0,0 +1,2 @@
+import { SMegaMenu as e } from "./s-mega-menu.js";
+export { e as SMegaMenu, e as default };

package/dist/s-mega-menu/mega-menu-panel.d.ts

@@ -0,0 +1,38 @@
+import { SMegaMenuChangeReason, SMegaMenuItem, SMegaMenuItemState, SMegaMenuOwnerState, SMegaMenuSlotProps, SMegaMenuSlots } from './types';
+import * as React from 'react';
+/** Everything the recursive panel renderers need from the owning `SMegaMenu`. */
+export interface MegaMenuRenderContext<T = unknown> {
+    /** Closes the whole menu, optionally returning focus to the open trigger. */
+    closeMenu: (options: {
+        event: Event | React.SyntheticEvent | null;
+        focusTrigger?: boolean;
+        reason: SMegaMenuChangeReason;
+    }) => void;
+    /** Resolves the active state of an entry. */
+    getIsActive: (item: SMegaMenuItem<T>) => boolean;
+    /** Keeps submenu content mounted while closed. */
+    keepMounted: boolean;
+    /** Default element used for entries that have an `href`. */
+    linkComponent?: React.ElementType;
+    /** Owner state shared by every slot. */
+    ownerState: SMegaMenuOwnerState<T>;
+    /** Renders the content of a row. */
+    renderItem?: (item: SMegaMenuItem<T>, state: SMegaMenuItemState<T>) => React.ReactNode;
+    slotProps?: SMegaMenuSlotProps<T>;
+    slots?: SMegaMenuSlots;
+}
+interface PanelContentProps<T> {
+    /** Closes the flyout submenu this panel lives in, if any. */
+    closeParent?: () => void;
+    ctx: MegaMenuRenderContext<T>;
+    depth: number;
+    items: SMegaMenuItem<T>[];
+}
+/**
+ * Panel body for one level of the tree.
+ *
+ * Recursion happens here: a `list` layout renders branch rows that mount another
+ * `MegaMenuPanelContent` inside their flyout submenu.
+ */
+export declare function MegaMenuPanelContent<T>({ closeParent, ctx, depth, items, }: Readonly<PanelContentProps<T>>): React.JSX.Element;
+export {};