@solostylist/ui-kit 2.0.0 → 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 { t } from "../appendOwnerState-CELpvdMz.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Box as a, ListItemButton as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
+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 = c("li", {
+var f = u("li", {
 	name: "SNavItem",
 	slot: "Root"
-})({});
-function d(e, t) {
-	return typeof e == "function" ? e(t) : e;
-}
-var f = n.forwardRef(function(n, c) {
-	let f = l({
-		props: n,
+})({
+	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 ?? o, E = x?.icon ?? a, D = x?.primary ?? s, O = x?.action ?? a, k = d(b?.button, w), A = d(b?.icon, w), j = d(b?.primary, w), M = d(b?.action, w), N = t(x?.button, k ?? {}, w), P = t(x?.icon, A ?? {}, w), F = t(x?.primary, j ?? {}, w), I = t(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__ */ r(u, {
-		...C,
-		ref: c,
-		ownerState: w,
-		sx: [{
-			display: "block",
-			userSelect: "none"
-		}, ...e(S)],
-		children: /* @__PURE__ */ i(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__ */ i(a, {
-				sx: {
-					alignItems: "center",
-					display: "flex",
-					gap: 1,
-					minWidth: 0
-				},
-				children: [g == null ? null : /* @__PURE__ */ r(E, {
-					component: "span",
-					...V,
-					sx: [{
-						alignItems: "center",
-						display: "flex",
-						justifyContent: "center"
-					}, ...e(B)],
-					children: g
-				}), /* @__PURE__ */ r(D, {
-					component: "span",
-					...F,
-					children: v
-				})]
-			}), p == null ? null : /* @__PURE__ */ r(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/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../s-nav-items-BUp7DddG.js";
-export { t as SNavGroupItem, e as SNavItems, e as default };
+import { SNavGroupItem as e, SNavItems as t } from "./s-nav-items.js";
+export { e as SNavGroupItem, t as SNavItems, t as default };

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

@@ -1,2 +1,124 @@
-import { n as e, t } from "../s-nav-items-BUp7DddG.js";
-export { t as SNavGroupItem, e as SNavItems, e as default };
+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 d = t(l.forwardRef(function(e, t) {
+	return /* @__PURE__ */ u(n, {
+		component: "ul",
+		...e,
+		ref: t
+	});
+}), {
+	name: "SNavItems",
+	slot: "Root"
+})({});
+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 p(e, t) {
+	return !!(e.href && (t === e.href || t.startsWith(e.href + "/")));
+}
+function m(e, t) {
+	let n = e.items ?? [];
+	return {
+		active: p(e, t),
+		childActive: n.length > 0 && f(n, t)
+	};
+}
+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 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" }
+			},
+			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__ */ u(e, {
+				sx: {
+					ml: r > 0 ? `${r * 16 + 12}px` : "12px",
+					mt: 1,
+					mb: 1,
+					pl: 1
+				},
+				children: /* @__PURE__ */ u(g, {
+					items: t.items,
+					pathname: n,
+					depth: r + 1,
+					linkComponent: i
+				})
+			})
+		})
+	});
+}
+h.displayName = "SNavGroupItem";
+var g = l.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "SNavItems"
+	}), { depth: a = 0, items: o, linkComponent: s, pathname: c = "", sx: l, ...f } = n, p = {
+		...n,
+		depth: a,
+		pathname: c
+	};
+	return /* @__PURE__ */ u(d, {
+		spacing: 1,
+		...f,
+		ref: t,
+		ownerState: p,
+		sx: [{
+			listStyle: "none",
+			m: 0,
+			p: 0
+		}, ...i(l)],
+		children: o.map((e) => /* @__PURE__ */ u(h, {
+			item: e,
+			pathname: c,
+			depth: a,
+			linkComponent: s
+		}, e.key))
+	});
+});
+g.displayName = "SNavItems";
+//#endregion
+export { h as SNavGroupItem, g as SNavItems, g as default };

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

@@ -1,2 +1,2 @@
-import { t as e } from "../s-no-ssr-D8tPdDfh.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,2 +1,2 @@
-import { t as e } from "../s-no-ssr-D8tPdDfh.js";
+import { t as e } from "../s-no-ssr-DH57_uP_.js";
 export { e as SNoSsr, e as default };

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 };

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

@@ -0,0 +1,253 @@
+import { t as e } from "./generateUtilityClasses-DvX505Gy.js";
+import { toSxArray as t } from "./utils/sx.js";
+import { resolveOwnerStateSlotProps as n } from "./utils/slots.js";
+import { t as r } from "./useForkRef-BuNFTXxE.js";
+import { t as i } from "./useEventCallback-DGCsaRIu.js";
+import { t as a } from "./appendOwnerState-CFQTq3pb.js";
+import { t as o } from "./useControlled-DqNPBJNp.js";
+import { t as s } from "./mergeSlotProps-DC8r4QzS.js";
+import { t as c } from "./s-text-field-HYyDf1Jo.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Box as f, Slider as p, styled as m, useThemeProps as ee } from "@mui/material";
+//#region ../../node_modules/@mui/material/Slider/sliderClasses.mjs
+var h = e("MuiSlider", /* @__PURE__ */ "root.active.colorPrimary.colorSecondary.colorError.colorInfo.colorSuccess.colorWarning.disabled.dragging.focusVisible.mark.markActive.marked.markLabel.markLabelActive.rail.sizeSmall.thumb.track.trackInverted.trackFalse.valueLabel.valueLabelOpen.valueLabelCircle.valueLabelLabel.vertical".split(".")), g = (e, t, n) => Math.min(Math.max(e, t), n), _ = (e, t, n) => {
+	let r = g(e[0], t, n), i = g(e[1], t, n);
+	return r <= i ? [r, i] : [i, r];
+}, v = (e) => {
+	if (e.trim() === "") return null;
+	let t = Number(e);
+	return Number.isFinite(t) ? t : null;
+}, y = (e) => e != null && e !== !1 && e !== "", b = (e, t, n, r) => e >= n && e <= r && t >= n && t <= r && e <= t, te = (e, t, n) => {
+	if (!Number.isFinite(e) || !Number.isFinite(t) || e >= t) throw RangeError("SNumberRange: `min` and `max` must be finite numbers and `min` must be less than `max`.");
+	if (!Number.isFinite(n) || n <= 0) throw RangeError("SNumberRange: `step` must be a finite number greater than 0.");
+}, ne = m("fieldset", {
+	name: "SNumberRange",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	border: 0,
+	display: "flex",
+	flexDirection: "column",
+	gap: e.spacing(1),
+	margin: 0,
+	minWidth: 0,
+	padding: 0,
+	width: "100%"
+})), re = m("legend", {
+	name: "SNumberRange",
+	slot: "Label",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	...e.typography.body2,
+	color: (e.vars ?? e).palette.text.primary,
+	fontWeight: 600,
+	margin: 0,
+	padding: 0
+})), ie = m(p, {
+	name: "SNumberRange",
+	slot: "Slider",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e, ownerState: t }) => {
+	let n = t.size === "small";
+	return {
+		color: (e.vars ?? e).palette[t.color].main,
+		height: n ? 2 : 3,
+		padding: e.spacing(n ? 1 : 1.5, 0),
+		[`& .${h.rail}`]: {
+			backgroundColor: (e.vars ?? e).palette.action.selected,
+			opacity: 1
+		},
+		[`& .${h.track}`]: { border: 0 },
+		[`& .${h.thumb}`]: {
+			border: `2px solid ${(e.vars ?? e).palette.background.paper}`,
+			boxShadow: `0 0 0 1px ${(e.vars ?? e).palette[t.color].main}`,
+			height: n ? 14 : 18,
+			width: n ? 14 : 18,
+			[`&:hover, &.${h.focusVisible}`]: { boxShadow: `0 0 0 6px ${(e.vars ?? e).palette.action.selected}` }
+		},
+		[`& .${h.mark}`]: {
+			backgroundColor: (e.vars ?? e).palette[t.color].main,
+			borderRadius: e.radius.sm,
+			height: n ? 8 : 10,
+			opacity: 1,
+			width: n ? 3 : 4
+		}
+	};
+}), ae = m(f, {
+	name: "SNumberRange",
+	slot: "Inputs",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "flex-start",
+	display: "flex",
+	gap: e.spacing(1)
+})), oe = m(c, {
+	name: "SNumberRange",
+	slot: "MinInput",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	flex: "1 1 0",
+	minWidth: 0
+}), se = m(c, {
+	name: "SNumberRange",
+	slot: "MaxInput",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	flex: "1 1 0",
+	minWidth: 0
+}), ce = m(f, {
+	name: "SNumberRange",
+	slot: "Separator",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e, ownerState: t }) => ({
+	alignItems: "center",
+	color: (e.vars ?? e).palette.text.secondary,
+	display: "inline-flex",
+	flex: "0 0 auto",
+	height: t.size === "small" ? 36 : 40,
+	marginTop: t.hasInputLabel ? "1.4375em" : 0,
+	paddingInline: e.spacing(.5),
+	userSelect: "none"
+})), x = l.forwardRef(function(e, c) {
+	let f = ee({
+		props: e,
+		name: "SNumberRange"
+	}), { color: p = "primary", defaultValue: m, disabled: h = !1, getAriaValueText: x, invalidRangeText: le = "Enter a value inside the allowed range", label: S, max: C = 100, maxLabel: w = "Maximum", min: T = 0, minLabel: E = "Minimum", onChange: ue, onChangeCommitted: D, separator: de = "–", size: O = "medium", slotProps: k, slots: A, step: j = 1, sx: fe, value: pe, valueLabelFormat: M, ...me } = f;
+	te(T, C, j);
+	let [he, ge] = o({
+		controlled: pe,
+		default: m ?? [T, C],
+		name: "SNumberRange",
+		state: "value"
+	}), [_e, N] = l.useState(null), P = _(he, T, C), ve = P[0], ye = P[1], F = _e ?? [String(P[0]), String(P[1])], I = v(F[0]), L = v(F[1]), be = I !== null && L !== null && b(I, L, T, C), R = I === null || I < T || I > C || L !== null && I > L, z = L === null || L < T || L > C || I !== null && L < I;
+	l.useEffect(() => {
+		N(null);
+	}, [
+		C,
+		T,
+		ye,
+		ve
+	]);
+	let B = {
+		...f,
+		color: p,
+		disabled: h,
+		hasInputLabel: !1,
+		max: C,
+		maxInvalid: z,
+		min: T,
+		minInvalid: R,
+		size: O,
+		step: j,
+		value: P
+	}, V = n(k?.minInput, B), H = n(k?.maxInput, B), U = {
+		...B,
+		hasInputLabel: y(V?.label) || y(H?.label)
+	}, W = i((e, t) => {
+		let n = _(t, T, C);
+		return n[0] === P[0] && n[1] === P[1] ? n : (ge(n), ue?.(e, n), n);
+	}), xe = i((e, t) => {
+		Array.isArray(t) && (N(null), W(e, [t[0], t[1]]));
+	}), Se = i((e, t) => {
+		Array.isArray(t) && D?.(e, _([t[0], t[1]], T, C));
+	}), Ce = (e) => (t) => {
+		if (t.defaultPrevented) return;
+		let n = t.target.value, r = e === 0 ? [n, F[1]] : [F[0], n];
+		N(r);
+		let i = v(r[0]), a = v(r[1]);
+		i !== null && a !== null && b(i, a, T, C) && (N(null), W(t, [i, a]));
+	}, we = (e) => (t) => {
+		if (t.defaultPrevented) return;
+		let n = v(F[e]), r = n === null ? P : e === 0 ? [g(n, T, P[1]), P[1]] : [P[0], g(n, P[0], C)];
+		N(null);
+		let i = W(t, r);
+		D?.(t, i);
+	}, Te = (e) => {
+		if (e.defaultPrevented) return;
+		let t = e.target;
+		if (t.tagName === "INPUT") {
+			if (e.key === "Escape") {
+				e.preventDefault(), N(null);
+				return;
+			}
+			e.key === "Enter" && (e.preventDefault(), t.blur());
+		}
+	}, G = A?.root ?? ne, K = A?.label ?? re, q = A?.slider ?? ie, J = A?.inputs ?? ae, Y = A?.minInput ?? oe, X = A?.maxInput ?? se, Z = A?.separator ?? ce, { ref: Ee, sx: De, ...Oe } = a(G, s(n(k?.root, U), {
+		"aria-disabled": h || void 0,
+		...me
+	}), U), ke = r(Ee, c), Ae = a(K, n(k?.label, U) ?? {}, U), je = a(q, {
+		...s(n(k?.slider, U), { valueLabelDisplay: "auto" }),
+		color: p,
+		disableSwap: !0,
+		disabled: h,
+		getAriaLabel: (e) => e === 0 ? E : w,
+		getAriaValueText: x,
+		max: C,
+		min: T,
+		size: O,
+		step: j,
+		...M !== void 0 && { valueLabelFormat: M }
+	}, U), Q = a(J, n(k?.inputs, U) ?? {}, U), Me = a(Z, {
+		"aria-hidden": !0,
+		component: "span",
+		...n(k?.separator, U) ?? {}
+	}, U), $ = (e) => {
+		let { slotProps: t, ...n } = (e === 0 ? V : H) ?? {}, r = s(t?.htmlInput, { "aria-label": e === 0 ? E : w }), i = s({
+			inputMode: "decimal",
+			max: C,
+			min: T,
+			step: j
+		}, r), o = s(n, {
+			helperText: (e === 0 ? R : !R && z) ? le : void 0,
+			onBlur: we(e),
+			onChange: Ce(e),
+			onKeyDown: Te
+		});
+		return a(e === 0 ? Y : X, {
+			...o,
+			color: p,
+			disabled: h,
+			error: e === 0 ? R : z,
+			size: O,
+			slotProps: {
+				...t,
+				htmlInput: i
+			},
+			type: "number",
+			value: F[e]
+		}, U);
+	}, Ne = $(0), Pe = $(1);
+	return /* @__PURE__ */ d(G, {
+		...Oe,
+		ref: ke,
+		sx: [...t(fe), ...t(De)],
+		"data-invalid": be ? void 0 : "",
+		children: [
+			S != null && /* @__PURE__ */ u(K, {
+				...Ae,
+				children: S
+			}),
+			/* @__PURE__ */ u(q, {
+				...je,
+				onChange: xe,
+				onChangeCommitted: Se,
+				value: [P[0], P[1]]
+			}),
+			/* @__PURE__ */ d(J, {
+				...Q,
+				children: [
+					/* @__PURE__ */ u(Y, { ...Ne }),
+					/* @__PURE__ */ u(Z, {
+						...Me,
+						children: de
+					}),
+					/* @__PURE__ */ u(X, { ...Pe })
+				]
+			})
+		]
+	});
+});
+x.displayName = "SNumberRange";
+//#endregion
+export { x as t };

package/dist/s-pagination/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-pagination-Dt8Pk5Tp.js";
+import { t as e } from "../s-pagination-s46hBifh.js";
 export { e as SPagination, e as default };

package/dist/s-pagination/s-pagination.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-pagination-Dt8Pk5Tp.js";
+import { t as e } from "../s-pagination-s46hBifh.js";
 export { e as SPagination, e as default };