@solostylist/ui-kit 2.0.1 → 2.0.2

package/dist/s-nav-item/s-nav-item.js

@@ -1,87 +1,66 @@
 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, ListItemButton as a, Typography as o, styled as s, useThemeProps as c } from "@mui/material";
-import l from "@mui/utils/appendOwnerState";
+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 { actionHoverMedia as i } from "../theme/components/action-styles.js";
+import { t as a } from "../mergeSlotProps-DC8r4QzS.js";
+import { SListActionItem as o } from "../s-list-action-item/s-list-action-item.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { styled as u, useThemeProps as d } from "@mui/material";
 //#region lib/s-nav-item/s-nav-item.tsx
-var u = s("li", {
+var f = u("li", {
 	name: "SNavItem",
 	slot: "Root"
-})({});
-function d(e, t) {
-	return typeof e == "function" ? e(t) : e;
-}
-var f = t.forwardRef(function(t, s) {
-	let f = c({
-		props: t,
+})({
+	display: "block",
+	userSelect: "none"
+}), p = u(o, {
+	name: "SNavItem",
+	slot: "Item",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: e.radius.md,
+	color: (e.vars ?? e).palette.text.secondary,
+	padding: e.spacing(1.5),
+	"&.Mui-selected": { color: (e.vars ?? e).palette.text.primary },
+	[i]: { "&:hover": { color: (e.vars ?? e).palette.text.primary } }
+})), m = s.forwardRef(function(i, o) {
+	let s = d({
+		props: i,
 		name: "SNavItem"
-	}), { action: p, disabled: m = !1, href: h, icon: g, onClick: _, primary: v, selected: y = !1, slotProps: b, slots: x, sx: S, ...C } = f, w = {
-		...f,
+	}), { children: u, disabled: m = !1, href: h, icon: g, label: _, onClick: v, selected: y = !1, slotProps: b, slots: x, sx: S, trailing: C, ...w } = s, T = {
+		...s,
 		disabled: m,
 		selected: y
-	}, T = x?.button ?? a, E = x?.icon ?? i, D = x?.primary ?? o, O = x?.action ?? i, k = d(b?.button, w), A = d(b?.icon, w), j = d(b?.primary, w), M = d(b?.action, w), N = l(x?.button, k ?? {}, w), P = l(x?.icon, A ?? {}, w), F = l(x?.primary, j ?? {}, w), I = l(x?.action, M ?? {}, w), { onClick: L, sx: R, ...z } = N, { sx: B, ...V } = P, { sx: H, ...U } = I, W = L || _ ? (e) => {
-		L?.(e), e.defaultPrevented || _?.(e);
-	} : void 0;
-	return /* @__PURE__ */ n(u, {
-		...C,
-		ref: s,
-		ownerState: w,
-		sx: [{
-			display: "block",
-			userSelect: "none"
-		}, ...e(S)],
-		children: /* @__PURE__ */ r(T, {
-			component: h ? "a" : "div",
-			...z,
-			"aria-current": y ? "page" : void 0,
-			disabled: m,
-			href: m ? void 0 : h,
-			onClick: W,
-			selected: y,
-			sx: [{
-				borderRadius: 1,
-				color: "text.secondary",
-				gap: 1,
-				justifyContent: "space-between",
-				p: 1.5,
-				whiteSpace: "nowrap",
-				"&.Mui-selected": { color: "text.primary" },
-				"&.Mui-disabled": { cursor: "not-allowed" },
-				"@media (hover: hover) and (pointer: fine)": { "&:hover": { color: "text.primary" } }
-			}, ...e(R)],
-			children: [/* @__PURE__ */ r(i, {
-				sx: {
-					alignItems: "center",
-					display: "flex",
-					gap: 1,
-					minWidth: 0
-				},
-				children: [g == null ? null : /* @__PURE__ */ n(E, {
-					component: "span",
-					...V,
-					sx: [{
-						alignItems: "center",
-						display: "flex",
-						justifyContent: "center"
-					}, ...e(B)],
-					children: g
-				}), /* @__PURE__ */ n(D, {
-					component: "span",
-					...F,
-					children: v
-				})]
-			}), p == null ? null : /* @__PURE__ */ n(O, {
-				component: "span",
-				...U,
-				sx: [{
-					alignItems: "center",
-					display: "flex"
-				}, ...e(H)],
-				children: p
-			})]
-		})
+	}, E = x?.root ?? f, D = x?.item ?? p, { ref: O, sx: k, ...A } = r(E, a(t(b?.root, T), w), T), j = n(O, o), M = r(D, a(t(b?.item, T), {
+		disabled: m,
+		href: h,
+		icon: g,
+		onClick: v,
+		selected: y,
+		slots: {
+			icon: x?.icon,
+			label: x?.label,
+			trailing: x?.trailing
+		},
+		slotProps: {
+			icon: b?.icon,
+			label: b?.label,
+			trailing: b?.trailing
+		},
+		trailing: C
+	}), T);
+	return /* @__PURE__ */ l(E, {
+		...A,
+		ref: j,
+		sx: [...e(k), ...e(S)],
+		children: [/* @__PURE__ */ c(D, {
+			...M,
+			label: _
+		}), u]
 	});
 });
-f.displayName = "SNavItem";
+m.displayName = "SNavItem";
 //#endregion
-export { f as SNavItem, f as default };
+export { m as SNavItem, m as default };

package/dist/s-nav-items/s-nav-items.js

@@ -1,17 +1,17 @@
-import { toSxArray as e } from "../utils/sx.js";
-import { SNavItem as t } from "../s-nav-item/s-nav-item.js";
-import { styled as n, useThemeProps as r } from "@mui/material/styles";
-import * as i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "@mui/icons-material/ExpandMore";
-import c from "@mui/material/Typography";
-import l from "@mui/material/Stack";
-import u from "@mui/material/Box";
-import d from "@mui/material/Collapse";
-import f from "@mui/material/ListItemButton";
+import { t as e } from "../Box-9oeZgA1U.js";
+import { t } from "../styled-Bog8QCl3.js";
+import { t as n } from "../Stack-C0LGzM4c.js";
+import { t as r } from "../useThemeProps-Dw9dmKyT.js";
+import { toSxArray as i } from "../utils/sx.js";
+import { reducedMotionMedia as a } from "../theme/components/action-styles.js";
+import { t as o } from "../ExpandMore-sOgvEha9.js";
+import { SNavItem as s } from "../s-nav-item/s-nav-item.js";
+import { t as c } from "../Collapse-DPUr1cbP.js";
+import * as l from "react";
+import { jsx as u } from "react/jsx-runtime";
 //#region lib/s-nav-items/s-nav-items.tsx
-var p = n(i.forwardRef(function(e, t) {
-	return /* @__PURE__ */ a(l, {
+var d = t(l.forwardRef(function(e, t) {
+	return /* @__PURE__ */ u(n, {
 		component: "ul",
 		...e,
 		ref: t
@@ -20,148 +20,105 @@ var p = n(i.forwardRef(function(e, t) {
 	name: "SNavItems",
 	slot: "Root"
 })({});
-function m(e, t) {
-	return e.some((e) => e.href && (t === e.href || t.startsWith(e.href + "/")) ? !0 : e.items ? m(e.items, t) : !1);
+function f(e, t) {
+	return e.some((e) => e.href && (t === e.href || t.startsWith(e.href + "/")) ? !0 : e.items ? f(e.items, t) : !1);
 }
-function h(e, t) {
+function p(e, t) {
 	return !!(e.href && (t === e.href || t.startsWith(e.href + "/")));
 }
-function g(e, t) {
+function m(e, t) {
 	let n = e.items ?? [];
 	return {
-		active: h(e, t),
-		childActive: n.length > 0 && m(n, t)
+		active: p(e, t),
+		childActive: n.length > 0 && f(n, t)
 	};
 }
-function _({ item: e, pathname: n, depth: r, linkComponent: l }) {
-	let p = !!(e.items && e.items.length > 0), { active: m, childActive: h } = g(e, n), [_, y] = i.useState(e.defaultOpen ?? h);
-	if (i.useEffect(() => {
-		h && y(!0);
-	}, [h]), !p) return /* @__PURE__ */ a(t, {
-		disabled: e.disabled,
-		href: e.href,
-		icon: e.icon ? e.icon(m) : null,
-		primary: e.title,
-		selected: m,
-		slotProps: { button: {
-			component: e.component ?? l,
-			rel: e.rel,
-			target: e.target,
+function h({ item: t, pathname: n, depth: r, linkComponent: i }) {
+	let d = !!(t.items && t.items.length > 0), { active: f, childActive: p } = m(t, n), [h, _] = l.useState(t.defaultOpen ?? p);
+	if (l.useEffect(() => {
+		p && _(!0);
+	}, [p]), !d) return /* @__PURE__ */ u(s, {
+		disabled: t.disabled,
+		href: t.href,
+		icon: t.icon ? t.icon(f) : null,
+		label: t.title,
+		selected: f,
+		slotProps: { item: {
+			component: t.component ?? i,
+			rel: t.rel,
+			target: t.target,
 			sx: r > 0 ? { pl: `${(r - 1) * 12 + 12}px` } : void 0
 		} }
 	});
-	let b = m || h;
-	return /* @__PURE__ */ o(u, {
-		component: "li",
-		sx: {
-			userSelect: "none",
-			display: "block"
-		},
-		children: [/* @__PURE__ */ o(f, {
-			onClick: () => y((e) => !e),
-			disabled: e.disabled,
-			selected: b,
-			sx: {
-				alignItems: "center",
-				borderRadius: 1,
-				color: b ? "text.primary" : "text.secondary",
-				display: "flex",
-				flex: "0 0 auto",
-				gap: 1,
-				justifyContent: "space-between",
-				p: 1.5,
-				pl: r > 0 ? `${r * 12 + 12}px` : "12px",
-				whiteSpace: "nowrap",
-				width: "100%",
-				"&.Mui-disabled": {
-					color: "text.disabled",
-					cursor: "not-allowed"
-				},
-				"@media (hover: hover) and (pointer: fine)": { "&:hover": { ...!b && !e.disabled && {
-					bgcolor: "action.hover",
-					color: "text.primary"
-				} } }
+	let v = f || p;
+	return /* @__PURE__ */ u(s, {
+		disabled: t.disabled,
+		icon: t.icon ? t.icon(v) : null,
+		label: t.title,
+		onClick: () => _((e) => !e),
+		selected: v,
+		slotProps: {
+			item: {
+				"aria-current": void 0,
+				"aria-expanded": h,
+				sx: { pl: r > 0 ? `${r * 12 + 12}px` : "12px" }
 			},
-			"aria-expanded": _,
-			children: [/* @__PURE__ */ o(u, {
-				sx: {
-					alignItems: "center",
-					display: "flex",
-					gap: 1
-				},
-				children: [e.icon ? /* @__PURE__ */ a(u, {
-					component: "span",
-					sx: {
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center"
-					},
-					children: e.icon(b)
-				}) : null, /* @__PURE__ */ a(c, {
-					component: "span",
-					variant: "body1",
-					children: e.title
-				})]
-			}), /* @__PURE__ */ a(u, {
-				component: "span",
-				sx: {
-					display: "flex",
-					alignItems: "center",
-					color: "text.secondary",
-					transition: "transform 200ms ease",
-					transform: _ ? "rotate(0deg)" : "rotate(-90deg)"
-				},
-				children: /* @__PURE__ */ a(s, {})
-			})]
-		}), /* @__PURE__ */ a(d, {
-			in: _,
+			trailing: { sx: {
+				transform: h ? "rotate(0deg)" : "rotate(-90deg)",
+				transition: (e) => e.transitions.create("transform", { duration: e.transitions.duration.shorter }),
+				[a]: { transition: "none" }
+			} }
+		},
+		trailing: /* @__PURE__ */ u(o, {}),
+		children: /* @__PURE__ */ u(c, {
+			in: h,
 			timeout: 200,
 			unmountOnExit: !0,
-			children: /* @__PURE__ */ a(u, {
+			children: /* @__PURE__ */ u(e, {
 				sx: {
 					ml: r > 0 ? `${r * 16 + 12}px` : "12px",
 					mt: 1,
 					mb: 1,
 					pl: 1
 				},
-				children: /* @__PURE__ */ a(v, {
-					items: e.items,
+				children: /* @__PURE__ */ u(g, {
+					items: t.items,
 					pathname: n,
 					depth: r + 1,
-					linkComponent: l
+					linkComponent: i
 				})
 			})
-		})]
+		})
 	});
 }
-_.displayName = "SNavGroupItem";
-var v = i.forwardRef(function(t, n) {
-	let i = r({
-		props: t,
+h.displayName = "SNavGroupItem";
+var g = l.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
 		name: "SNavItems"
-	}), { depth: o = 0, items: s, linkComponent: c, pathname: l = "", sx: u, ...d } = i, f = {
-		...i,
-		depth: o,
-		pathname: l
+	}), { depth: a = 0, items: o, linkComponent: s, pathname: c = "", sx: l, ...f } = n, p = {
+		...n,
+		depth: a,
+		pathname: c
 	};
-	return /* @__PURE__ */ a(p, {
+	return /* @__PURE__ */ u(d, {
 		spacing: 1,
-		...d,
-		ref: n,
-		ownerState: f,
+		...f,
+		ref: t,
+		ownerState: p,
 		sx: [{
 			listStyle: "none",
 			m: 0,
 			p: 0
-		}, ...e(u)],
-		children: s.map((e) => /* @__PURE__ */ a(_, {
+		}, ...i(l)],
+		children: o.map((e) => /* @__PURE__ */ u(h, {
 			item: e,
-			pathname: l,
-			depth: o,
-			linkComponent: c
+			pathname: c,
+			depth: a,
+			linkComponent: s
 		}, e.key))
 	});
 });
-v.displayName = "SNavItems";
+g.displayName = "SNavItems";
 //#endregion
-export { _ as SNavGroupItem, v as SNavItems, v as default };
+export { h as SNavGroupItem, g as SNavItems, g as default };

package/dist/s-no-ssr/index.js

@@ -1,2 +1,2 @@
-import { SNoSsr as e } from "./s-no-ssr.js";
+import { t as e } from "../s-no-ssr-DH57_uP_.js";
 export { e as SNoSsr, e as default };

package/dist/s-no-ssr/s-no-ssr.js

@@ -1,5 +1,2 @@
-import e from "@mui/material/NoSsr";
-//#region lib/s-no-ssr/s-no-ssr.tsx
-var t = e;
-//#endregion
-export { t as SNoSsr, t as default };
+import { t as e } from "../s-no-ssr-DH57_uP_.js";
+export { e as SNoSsr, e as default };

package/dist/s-no-ssr-DH57_uP_.js

@@ -0,0 +1,25 @@
+import { n as e } from "./chunk-C_CI6nMA.js";
+import { t } from "./prop-types-BzYPyWN7.js";
+import { t as n } from "./useEnhancedEffect-DFq_FMGX.js";
+import { t as r } from "./exactProp-C_IsucXf.js";
+import * as i from "react";
+//#region ../../node_modules/@mui/material/NoSsr/NoSsr.mjs
+var a = /* @__PURE__ */ e(t(), 1);
+function o(e) {
+	let { children: t, defer: r = !1, fallback: a = null } = e, [o, s] = i.useState(!1);
+	return n(() => {
+		r || s(!0);
+	}, [r]), i.useEffect(() => {
+		r && s(!0);
+	}, [r]), o ? t : a;
+}
+process.env.NODE_ENV !== "production" && (o.propTypes = {
+	children: a.default.node,
+	defer: a.default.bool,
+	fallback: a.default.node
+}), process.env.NODE_ENV !== "production" && (o.propTypes = r(o.propTypes));
+//#endregion
+//#region lib/s-no-ssr/s-no-ssr.tsx
+var s = o;
+//#endregion
+export { s as t };

package/dist/s-number-range/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SNumberRange } from './s-number-range';
+export type { SNumberRangeColor, SNumberRangeOwnerState, SNumberRangeProps, SNumberRangeSize, SNumberRangeSlotProps, SNumberRangeSlots, SNumberRangeValue, } from './s-number-range';
+export type {} from '../theme/component-augmentation';

package/dist/s-number-range/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../s-number-range-Low5QjuD.js";
+export { e as SNumberRange, e as default };

package/dist/s-number-range/s-number-range.d.ts

@@ -0,0 +1,109 @@
+import { BoxProps, SliderProps, SxProps, Theme } from '@mui/material';
+import { STextFieldProps } from '../s-text-field';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** Inclusive `[minimum, maximum]` pair emitted by the control. */
+export type SNumberRangeValue = readonly [number, number];
+/** Density of the slider and the two numeric inputs. */
+export type SNumberRangeSize = 'small' | 'medium';
+/** Theme color shared by the slider and the focus state of both inputs. */
+export type SNumberRangeColor = NonNullable<SliderProps['color']>;
+type SNumberRangeFieldsetProps = Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'children' | 'color' | 'defaultValue' | 'onChange' | 'value'> & {
+    sx?: SxProps<Theme>;
+};
+type SNumberRangeLegendProps = Omit<React.ComponentPropsWithoutRef<'legend'>, 'children'> & {
+    sx?: SxProps<Theme>;
+};
+export interface SNumberRangeSlots {
+    /** Row wrapping the two numeric inputs and the separator. */
+    inputs?: React.ElementType;
+    /** Optional group label rendered as the fieldset legend. */
+    label?: React.ElementType;
+    /** Numeric input bound to `value[1]`. */
+    maxInput?: React.ElementType;
+    /** Numeric input bound to `value[0]`. */
+    minInput?: React.ElementType;
+    /** Outer fieldset. */
+    root?: React.ElementType;
+    /** Element rendered between the two numeric inputs. */
+    separator?: React.ElementType;
+    /** Dual-thumb range slider. */
+    slider?: React.ElementType;
+}
+export interface SNumberRangeSlotProps {
+    /** Props or owner-state callback for the inputs row. */
+    inputs?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SNumberRangeOwnerState>;
+    /** Props or owner-state callback for the group label. */
+    label?: MuiOwnerStateSlotProps<SNumberRangeLegendProps, SNumberRangeOwnerState>;
+    /** Props or owner-state callback for the maximum input. */
+    maxInput?: MuiOwnerStateSlotProps<Omit<STextFieldProps, 'color' | 'defaultValue' | 'disabled' | 'error' | 'size' | 'type' | 'value'>, SNumberRangeOwnerState>;
+    /** Props or owner-state callback for the minimum input. */
+    minInput?: MuiOwnerStateSlotProps<Omit<STextFieldProps, 'color' | 'defaultValue' | 'disabled' | 'error' | 'size' | 'type' | 'value'>, SNumberRangeOwnerState>;
+    /** Props or owner-state callback for the root slot. */
+    root?: MuiOwnerStateSlotProps<Omit<SNumberRangeFieldsetProps, 'disabled'>, SNumberRangeOwnerState>;
+    /** Props or owner-state callback for the separator slot. */
+    separator?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SNumberRangeOwnerState>;
+    /** Props or owner-state callback for the slider slot. */
+    slider?: MuiOwnerStateSlotProps<Omit<SliderProps, 'color' | 'defaultValue' | 'disableSwap' | 'disabled' | 'getAriaLabel' | 'getAriaValueText' | 'max' | 'min' | 'onChange' | 'onChangeCommitted' | 'size' | 'step' | 'value'>, SNumberRangeOwnerState>;
+}
+/** Props for a dual-thumb numeric range with synchronized min/max text inputs. */
+export interface SNumberRangeProps extends SNumberRangeFieldsetProps {
+    /** Theme color shared by the slider and the focus state of both inputs. */
+    color?: SNumberRangeColor;
+    /** Initial range when the control is uncontrolled. Defaults to `[min, max]`. */
+    defaultValue?: SNumberRangeValue;
+    /** Disables the slider and both inputs. */
+    disabled?: boolean;
+    /** Accessible text formatter for each slider thumb. */
+    getAriaValueText?: SliderProps['getAriaValueText'];
+    /** Helper text shown while a typed draft is empty, out of range, or inverted. */
+    invalidRangeText?: React.ReactNode;
+    /** Optional visible label for the whole range group. */
+    label?: React.ReactNode;
+    /** Upper bound of the range. */
+    max?: number;
+    /** Accessible name of the upper thumb and the maximum input. */
+    maxLabel?: string;
+    /** Lower bound of the range. */
+    min?: number;
+    /** Accessible name of the lower thumb and the minimum input. */
+    minLabel?: string;
+    /** Called for every valid change while dragging or typing. */
+    onChange?: (event: Event | React.SyntheticEvent, value: SNumberRangeValue) => void;
+    /**
+     * Called once the interaction settles: on slider release and when an input is
+     * blurred or committed with Enter. Use this as the persist/apply signal.
+     */
+    onChangeCommitted?: (event: Event | React.SyntheticEvent, value: SNumberRangeValue) => void;
+    /** Content rendered between the two numeric inputs. */
+    separator?: React.ReactNode;
+    /** Density of the slider and the two numeric inputs. */
+    size?: SNumberRangeSize;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SNumberRangeSlotProps;
+    /** Components used for internal structural slots. */
+    slots?: SNumberRangeSlots;
+    /** Granularity passed to the slider and both native number inputs. */
+    step?: number;
+    /** Controlled range. */
+    value?: SNumberRangeValue;
+    /** Formats the visual value label rendered above each slider thumb. */
+    valueLabelFormat?: SliderProps['valueLabelFormat'];
+}
+export interface SNumberRangeOwnerState extends SNumberRangeProps {
+    color: SNumberRangeColor;
+    disabled: boolean;
+    /** True when either numeric input renders a visible field label above the box. */
+    hasInputLabel: boolean;
+    max: number;
+    /** True while the maximum input holds an invalid draft. */
+    maxInvalid: boolean;
+    min: number;
+    /** True while the minimum input holds an invalid draft. */
+    minInvalid: boolean;
+    size: SNumberRangeSize;
+    step: number;
+    value: SNumberRangeValue;
+}
+export declare const SNumberRange: React.ForwardRefExoticComponent<SNumberRangeProps & React.RefAttributes<HTMLFieldSetElement>>;
+export default SNumberRange;

package/dist/s-number-range/s-number-range.js

@@ -0,0 +1,2 @@
+import { t as e } from "../s-number-range-Low5QjuD.js";
+export { e as SNumberRange, e as default };