@solostylist/ui-kit 2.0.1 → 2.0.2

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

@@ -1,16 +1,17 @@
 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, styled as o, useTheme as s, useThemeProps as c } from "@mui/material";
-import { mergeSlotProps as l, useForkRef as u } from "@mui/material/utils";
+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";
 //#region lib/s-lazy-image/s-lazy-image.tsx
-var d = o(i, {
+var d = c(o, {
 	name: "SLazyImage",
 	slot: "Root"
-})({}), f = o("img", {
+})({}), f = c("img", {
 	name: "SLazyImage",
 	slot: "Image"
-})({}), p = o(a, {
+})({}), p = c(s, {
 	name: "SLazyImage",
 	slot: "Skeleton"
 })({});
@@ -20,12 +21,12 @@ function m(e, t) {
 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,
+var g = r.forwardRef(function(o, s) {
+	let c = u({
+		props: o,
 		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: _ = "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: _,
 		loaded: A,
@@ -34,13 +35,13 @@ var g = t.forwardRef(function(i, a) {
 		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, {
+	}, 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, {
 		...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) => {
+	}), { onLoad: V, sx: H, ...U } = I ?? {}, { sx: W, ...G } = L ?? {}, K = h(w, D.shape.borderRadius), q = t(R, s), J = (e) => {
 		k(S), V?.(e);
 	}, Y = { ownerState: j }, X = { ownerState: j }, Z = { ownerState: j };
-	return /* @__PURE__ */ r(M, {
+	return /* @__PURE__ */ a(M, {
 		...B,
 		...Y,
 		ref: q,
@@ -51,7 +52,7 @@ var g = t.forwardRef(function(i, a) {
 			position: "relative",
 			width: T
 		}, ...e(z)],
-		children: [A ? null : /* @__PURE__ */ n(P, {
+		children: [A ? null : /* @__PURE__ */ i(P, {
 			animation: "wave",
 			variant: w,
 			...G,
@@ -62,7 +63,7 @@ var g = t.forwardRef(function(i, a) {
 				minWidth: y,
 				width: "100%"
 			}, ...e(W)]
-		}), /* @__PURE__ */ n(N, {
+		}), /* @__PURE__ */ i(N, {
 			...U,
 			...X,
 			alt: g,

package/dist/s-link/index.js

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

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

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

package/dist/s-link-Db1aabHh.js

@@ -0,0 +1,235 @@
+import { n as e } from "./chunk-C_CI6nMA.js";
+import { t } from "./colorManipulator-DmUjcif3.js";
+import { t as n } from "./prop-types-BzYPyWN7.js";
+import { r, t as i } from "./DefaultPropsProvider-ebWx4_5E.js";
+import { c as a } from "./createTheme-xB2Em0Na.js";
+import { t as o } from "./generateUtilityClass-PAIOm1jC.js";
+import { t as s } from "./clsx-DGZSe4Nt.js";
+import { t as c } from "./generateUtilityClasses-DvX505Gy.js";
+import { t as l } from "./styled-Bog8QCl3.js";
+import { t as u } from "./memoTheme-qFyKAk7y.js";
+import { t as d } from "./useTheme-BIWMbX3i.js";
+import { t as f } from "./elementTypeAcceptingRef-xl_04Y5-.js";
+import { t as p } from "./isFocusVisible-4OIE8TST.js";
+import { t as m } from "./capitalize-C0baBJCm.js";
+import { t as h } from "./createSimplePaletteValueFilter-DFvyXHoZ.js";
+import { t as g } from "./Typography-_P0svrkO.js";
+import * as _ from "react";
+import { jsx as v } from "react/jsx-runtime";
+//#region ../../node_modules/@mui/material/Link/linkClasses.mjs
+var y = /* @__PURE__ */ e(n(), 1);
+function b(e) {
+	return o("MuiLink", e);
+}
+var x = c("MuiLink", [
+	"root",
+	"underlineNone",
+	"underlineHover",
+	"underlineAlways",
+	"button",
+	"focusVisible"
+]), S = ({ theme: e, ownerState: n }) => {
+	let r = n.color;
+	if ("colorSpace" in e && e.colorSpace) {
+		let t = a(e, `palette.${r}.main`) || a(e, `palette.${r}`) || n.color;
+		return e.alpha(t, .4);
+	}
+	let i = a(e, `palette.${r}.main`, !1) || a(e, `palette.${r}`, !1) || n.color, o = a(e, `palette.${r}.mainChannel`) || a(e, `palette.${r}Channel`);
+	return "vars" in e && o ? `rgba(${o} / 0.4)` : t(i, .4);
+}, C = {
+	primary: !0,
+	secondary: !0,
+	error: !0,
+	info: !0,
+	success: !0,
+	warning: !0,
+	textPrimary: !0,
+	textSecondary: !0,
+	textDisabled: !0
+}, w = (e) => {
+	let { classes: t, component: n, focusVisible: i, underline: a } = e;
+	return r({ root: [
+		"root",
+		`underline${m(a)}`,
+		n === "button" && "button",
+		i && "focusVisible"
+	] }, b, t);
+}, T = l(g, {
+	name: "MuiLink",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [
+			t.root,
+			t[`underline${m(n.underline)}`],
+			n.component === "button" && t.button
+		];
+	}
+})(u(({ theme: e }) => ({ variants: [
+	{
+		props: { underline: "none" },
+		style: { textDecoration: "none" }
+	},
+	{
+		props: { underline: "hover" },
+		style: {
+			textDecoration: "none",
+			"&:hover": { textDecoration: "underline" }
+		}
+	},
+	{
+		props: { underline: "always" },
+		style: {
+			textDecoration: "underline",
+			"&:hover": { textDecorationColor: "inherit" }
+		}
+	},
+	{
+		props: ({ underline: e, ownerState: t }) => e === "always" && t.color !== "inherit",
+		style: { textDecorationColor: "var(--Link-underlineColor)" }
+	},
+	{
+		props: ({ underline: e, ownerState: t }) => e === "always" && t.color === "inherit",
+		style: e.colorSpace ? { textDecorationColor: e.alpha("currentColor", .4) } : null
+	},
+	...Object.entries(e.palette).filter(h()).map(([t]) => ({
+		props: {
+			underline: "always",
+			color: t
+		},
+		style: { "--Link-underlineColor": e.alpha((e.vars || e).palette[t].main, .4) }
+	})),
+	{
+		props: {
+			underline: "always",
+			color: "textPrimary"
+		},
+		style: { "--Link-underlineColor": e.alpha((e.vars || e).palette.text.primary, .4) }
+	},
+	{
+		props: {
+			underline: "always",
+			color: "textSecondary"
+		},
+		style: { "--Link-underlineColor": e.alpha((e.vars || e).palette.text.secondary, .4) }
+	},
+	{
+		props: {
+			underline: "always",
+			color: "textDisabled"
+		},
+		style: { "--Link-underlineColor": (e.vars || e).palette.text.disabled }
+	},
+	{
+		props: { component: "button" },
+		style: {
+			position: "relative",
+			WebkitTapHighlightColor: "transparent",
+			backgroundColor: "transparent",
+			outline: 0,
+			border: 0,
+			margin: 0,
+			borderRadius: 0,
+			padding: 0,
+			cursor: "pointer",
+			userSelect: "none",
+			verticalAlign: "middle",
+			MozAppearance: "none",
+			WebkitAppearance: "none",
+			"&::-moz-focus-inner": { borderStyle: "none" },
+			[`&.${x.focusVisible}`]: { outline: "auto" }
+		}
+	}
+] }))), E = /* @__PURE__ */ _.forwardRef(function(e, t) {
+	let n = i({
+		props: e,
+		name: "MuiLink"
+	}), r = d(), { className: a, color: o = "primary", component: c = "a", onBlur: l, onFocus: u, TypographyClasses: f, underline: m = "always", variant: h = "inherit", sx: g, ...y } = n, [b, x] = _.useState(!1), E = (e) => {
+		p(e.target) || x(!1), l && l(e);
+	}, D = (e) => {
+		p(e.target) && x(!0), u && u(e);
+	}, O = {
+		...n,
+		color: o,
+		component: c,
+		focusVisible: b,
+		underline: m,
+		variant: h
+	};
+	return /* @__PURE__ */ v(T, {
+		color: o,
+		className: s(w(O).root, a),
+		classes: f,
+		component: c,
+		onBlur: E,
+		onFocus: D,
+		ref: t,
+		ownerState: O,
+		variant: h,
+		...y,
+		sx: [...C[o] === void 0 ? [{ color: o }] : [], ...Array.isArray(g) ? g : [g]],
+		style: {
+			...y.style,
+			...m === "always" && o !== "inherit" && !C[o] && { "--Link-underlineColor": S({
+				theme: r,
+				ownerState: O
+			}) }
+		}
+	});
+});
+process.env.NODE_ENV !== "production" && (E.propTypes = {
+	children: y.default.node,
+	classes: y.default.object,
+	className: y.default.string,
+	color: y.default.oneOfType([y.default.oneOf([
+		"primary",
+		"secondary",
+		"success",
+		"error",
+		"info",
+		"warning",
+		"textPrimary",
+		"textSecondary",
+		"textDisabled"
+	]), y.default.string]),
+	component: f,
+	onBlur: y.default.func,
+	onFocus: y.default.func,
+	style: y.default.object,
+	sx: y.default.oneOfType([
+		y.default.arrayOf(y.default.oneOfType([
+			y.default.func,
+			y.default.object,
+			y.default.bool
+		])),
+		y.default.func,
+		y.default.object
+	]),
+	TypographyClasses: y.default.object,
+	underline: y.default.oneOf([
+		"always",
+		"hover",
+		"none"
+	]),
+	variant: y.default.oneOfType([y.default.oneOf([
+		"body1",
+		"body2",
+		"button",
+		"caption",
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6",
+		"inherit",
+		"overline",
+		"subtitle1",
+		"subtitle2"
+	]), y.default.string])
+});
+//#endregion
+//#region lib/s-link/s-link.tsx
+var D = E;
+//#endregion
+export { D as t };

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,150 @@
+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";
+//#region lib/s-list-action-item/s-list-action-item.tsx
+var g = 44, _ = 36, v = m(f, {
+	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%",
+	[`&&& .${o.root}`]: { color: "inherit" },
+	"&.Mui-focusVisible": {
+		...i(e),
+		outlineOffset: -2
+	},
+	[a]: { 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 = m(d, {
+	name: "SListActionItem",
+	slot: "Icon",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	alignItems: "center",
+	color: "inherit",
+	display: "flex",
+	flexShrink: 0,
+	justifyContent: "center",
+	minWidth: 0
+}), b = m(d, {
+	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 = m(p, {
+	name: "SListActionItem",
+	slot: "Label",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "block",
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis"
+}), S = m(p, {
+	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 = m(d, {
+	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 = c.forwardRef(function(i, a) {
+	let o = h({
+		props: i,
+		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,
+		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), {
+		...j,
+		"aria-current": V,
+		dense: f,
+		disabled: m,
+		href: m ? 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), {
+		component: "span",
+		variant: "body1"
+	}), M), Y = r(L, s(t(E?.description, M), {
+		component: "span",
+		variant: "body2"
+	}), M), X = r(R, s(t(E?.trailing, M), { component: "span" }), M);
+	return /* @__PURE__ */ u(N, {
+		...W,
+		ref: G,
+		component: z,
+		nativeButton: z === "button",
+		sx: [...e(U), ...e(O)],
+		children: [
+			_ == null ? null : /* @__PURE__ */ l(P, {
+				...K,
+				children: _
+			}),
+			/* @__PURE__ */ u(F, {
+				...q,
+				children: [/* @__PURE__ */ l(I, {
+					...J,
+					children: w
+				}), p == null ? null : /* @__PURE__ */ l(L, {
+					...Y,
+					children: p
+				})]
+			}),
+			k == null ? null : /* @__PURE__ */ l(R, {
+				...X,
+				children: k
+			})
+		]
+	});
+});
+w.displayName = "SListActionItem";
+//#endregion
+export { w as SListActionItem, w as default };

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

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

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

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