@solostylist/ui-kit 2.0.0 → 2.0.2

package/dist/s-scroll-reveal/s-scroll-reveal.js

@@ -1,5 +1,5 @@
 import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../useThemeProps-Cr28OQu3.js";
+import { t } from "../useThemeProps-Dw9dmKyT.js";
 import { useScrollAnimation as n } from "../hooks/use-scroll-animation.js";
 import r from "react";
 import { jsx as i } from "react/jsx-runtime";

package/dist/s-scroll-to-top/s-scroll-to-top.d.ts

@@ -1,6 +1,6 @@
 import { SIconButtonProps } from '../s-icon-button';
 import * as React from 'react';
-export interface SScrollToTopProps extends Omit<SIconButtonProps, 'children' | 'component' | 'variant'> {
+export interface SScrollToTopProps extends Omit<SIconButtonProps, 'children' | 'component' | 'target' | 'variant'> {
     /** Icon rendered inside the button. */
     icon?: React.ReactNode;
     /** Scroll target monitored by MUI's scroll trigger; defaults to the window. */

package/dist/s-scroll-to-top/s-scroll-to-top.js

@@ -1,7 +1,7 @@
 import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../useThemeProps-Cr28OQu3.js";
+import { t } from "../useThemeProps-Dw9dmKyT.js";
 import { reducedMotionMedia as n } from "../theme/components/action-styles.js";
-import { t as r } from "../ArrowUpward-D88i2k4q.js";
+import { t as r } from "../ArrowUpward-udL1ltj2.js";
 import { SIconButton as i } from "../s-icon-button/s-icon-button.js";
 import * as a from "react";
 import { jsx as o } from "react/jsx-runtime";

package/dist/s-scroll-velocity/scroll-velocity-row.js

@@ -1,5 +1,5 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../useForkRef-CKneCEtr.js";
+import { t } from "../useForkRef-BuNFTXxE.js";
 import { ScrollVelocityContext as n } from "./scroll-velocity-container.js";
 import r, { useContext as i, useEffect as a, useRef as o, useState as s } from "react";
 import { jsx as c } from "react/jsx-runtime";

package/dist/s-segmented-control/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SSegmentedControl } from './s-segmented-control';
+export type { SSegmentedControlOption, SSegmentedControlOptionState, SSegmentedControlOwnerState, SSegmentedControlProps, SSegmentedControlSize, SSegmentedControlSlotProps, SSegmentedControlSlots, } from './s-segmented-control';
+export type {} from '../theme/component-augmentation';

package/dist/s-segmented-control/index.js

@@ -0,0 +1,2 @@
+import { SSegmentedControl as e } from "./s-segmented-control.js";
+export { e as SSegmentedControl, e as default };

package/dist/s-segmented-control/s-segmented-control.d.ts

@@ -0,0 +1,94 @@
+import { BoxProps, ButtonBaseProps, TypographyProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** Height tier of the control. */
+export type SSegmentedControlSize = 'small' | 'medium';
+/** A single selectable segment. */
+export interface SSegmentedControlOption<T extends React.Key = string> {
+    /** Optional trailing content, e.g. a count or an `SChip`. */
+    badge?: React.ReactNode;
+    /** Prevents this segment from being selected or focused. */
+    disabled?: boolean;
+    /** Optional leading content, typically an icon element. */
+    icon?: React.ReactNode;
+    /** Visible segment label. */
+    label: React.ReactNode;
+    /** Value committed when this segment becomes selected. */
+    value: T;
+}
+/**
+ * A `radiogroup` needs an accessible name, so exactly one of `aria-label` /
+ * `aria-labelledby` is required.
+ */
+type SSegmentedControlAccessibleName = {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+};
+export interface SSegmentedControlSlots {
+    /** Trailing badge wrapper rendered for options that define `badge`. */
+    badge?: React.ElementType;
+    /** Leading icon wrapper rendered for options that define `icon`. */
+    icon?: React.ElementType;
+    /** Absolutely positioned element that slides behind the selected segment. */
+    indicator?: React.ElementType;
+    /** Option label element. */
+    label?: React.ElementType;
+    /** Interactive `role="radio"` element rendered for every option. */
+    option?: React.ElementType;
+    /** Outer `role="radiogroup"` element. */
+    root?: React.ElementType;
+}
+export interface SSegmentedControlSlotProps<T extends React.Key = string> {
+    /** Props or option-state callback for the badge slot. */
+    badge?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSegmentedControlOptionState<T>>;
+    /** Props or option-state callback for the icon slot. */
+    icon?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSegmentedControlOptionState<T>>;
+    /** Props or owner-state callback for the indicator slot. */
+    indicator?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSegmentedControlOwnerState<T>>;
+    /** Props or option-state callback for the label slot. */
+    label?: MuiOwnerStateSlotProps<Omit<TypographyProps, 'children'>, SSegmentedControlOptionState<T>>;
+    /** Props or option-state callback for the option slot. */
+    option?: MuiOwnerStateSlotProps<Omit<ButtonBaseProps, 'children' | 'disabled' | 'onClick' | 'onKeyDown' | 'tabIndex'>, SSegmentedControlOptionState<T>>;
+    /** Props or owner-state callback for the root slot. */
+    root?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSegmentedControlOwnerState<T>>;
+}
+/** Props for a segmented control built on ARIA radiogroup semantics. */
+export type SSegmentedControlProps<T extends React.Key = string> = Omit<BoxProps, 'children' | 'component' | 'defaultValue' | 'onChange' | 'value'> & SSegmentedControlAccessibleName & {
+    /** Initially selected value when the control is uncontrolled. */
+    defaultValue?: T;
+    /** Disables the whole control. Individual segments use `options[].disabled`. */
+    disabled?: boolean;
+    /** Stretches the control and distributes segments evenly across its width. */
+    fullWidth?: boolean;
+    /** Called whenever the selection changes. */
+    onChange?: (event: React.SyntheticEvent, value: T) => void;
+    /** Segments rendered by the control, in visual order. */
+    options: readonly SSegmentedControlOption<T>[];
+    /** Height tier of the control. */
+    size?: SSegmentedControlSize;
+    /** Props or state callbacks for internal structural slots. */
+    slotProps?: SSegmentedControlSlotProps<T>;
+    /** Components used for internal structural slots. */
+    slots?: SSegmentedControlSlots;
+    /** Selected value for controlled usage. */
+    value?: T;
+};
+export type SSegmentedControlOwnerState<T extends React.Key = string> = SSegmentedControlProps<T> & {
+    disabled: boolean;
+    fullWidth: boolean;
+    selectedDisabled: boolean;
+    size: SSegmentedControlSize;
+};
+export type SSegmentedControlOptionState<T extends React.Key = string> = SSegmentedControlOwnerState<T> & {
+    option: SSegmentedControlOption<T>;
+    selected: boolean;
+};
+interface SSegmentedControlComponent {
+    <T extends React.Key = string>(props: SSegmentedControlProps<T> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName?: string;
+}
+export declare const SSegmentedControl: SSegmentedControlComponent;
+export default SSegmentedControl;

package/dist/s-segmented-control/s-segmented-control.js

@@ -0,0 +1,302 @@
+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 "../useEventCallback-DGCsaRIu.js";
+import { t as i } from "../appendOwnerState-CFQTq3pb.js";
+import { actionHoverMedia as a, getFocusVisibleStyle as o, getSemanticActionTokens as s, reducedPressMotionStyle as c } from "../theme/components/action-styles.js";
+import { t as l } from "../useEnhancedEffect-dBFfkm1e.js";
+import { t as u } from "../useControlled-DqNPBJNp.js";
+import { t as d } from "../mergeSlotProps-DC8r4QzS.js";
+import * as f from "react";
+import { createElement as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Box as g, ButtonBase as _, Typography as v, styled as y, useThemeProps as b } from "@mui/material";
+//#region lib/s-segmented-control/s-segmented-control.tsx
+var x = [
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"End",
+	"Home"
+], S = {
+	medium: 40,
+	small: 36
+}, C = y(g, {
+	name: "SSegmentedControl",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	backgroundColor: (e.vars ?? e).palette.action.hover,
+	borderRadius: e.radius.full,
+	display: "inline-flex",
+	gap: e.spacing(.5),
+	isolation: "isolate",
+	minHeight: S.medium + 8,
+	padding: e.spacing(.5),
+	position: "relative",
+	width: "fit-content",
+	variants: [{
+		props: ({ ownerState: e }) => e.size === "small",
+		style: {
+			gap: e.spacing(.25),
+			minHeight: S.small + 8
+		}
+	}, {
+		props: ({ ownerState: e }) => e.fullWidth,
+		style: {
+			display: "flex",
+			width: "100%"
+		}
+	}]
+})), w = y(g, {
+	name: "SSegmentedControl",
+	slot: "Indicator",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette, n = s(e, "primary");
+	return {
+		backgroundColor: n.light.containedBackground,
+		borderRadius: e.radius.full,
+		left: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		top: 0,
+		transition: e.transitions.create([
+			"height",
+			"opacity",
+			"transform",
+			"width"
+		], {
+			duration: e.transitions.duration.standard,
+			easing: e.transitions.easing.easeInOut
+		}),
+		zIndex: 0,
+		...e.applyStyles("dark", { backgroundColor: n.dark.containedBackground }),
+		variants: [{
+			props: ({ ownerState: e }) => e.disabled || e.selectedDisabled,
+			style: {
+				backgroundColor: t.action.disabledBackground,
+				boxShadow: "none"
+			}
+		}],
+		"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+	};
+}), T = y(_, {
+	name: "SSegmentedControl",
+	slot: "Option",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette, n = s(e, "primary");
+	return {
+		borderRadius: e.radius.full,
+		color: t.text.secondary,
+		flex: "0 0 auto",
+		fontWeight: e.typography.fontWeightRegular,
+		gap: e.spacing(1),
+		minHeight: S.medium,
+		minWidth: 0,
+		padding: e.spacing(0, 2),
+		position: "relative",
+		transition: e.transitions.create(["background-color", "color"], { duration: e.transitions.duration.shorter }),
+		zIndex: 1,
+		[a]: { "&:hover:not(.Mui-disabled)": {
+			backgroundColor: t.action.hover,
+			color: t.text.primary
+		} },
+		"&:active:not(.Mui-disabled)": { backgroundColor: t.action.selected },
+		"&.Mui-focusVisible": o(e),
+		"&.Mui-disabled": { color: t.action.disabled },
+		...c,
+		variants: [
+			{
+				props: ({ ownerState: e }) => e.size === "small",
+				style: {
+					gap: e.spacing(.75),
+					minHeight: S.small,
+					padding: e.spacing(0, 1.5)
+				}
+			},
+			{
+				props: ({ ownerState: e }) => e.fullWidth,
+				style: { flex: "1 1 0" }
+			},
+			{
+				props: ({ ownerState: e }) => e.selected,
+				style: {
+					color: n.light.containedColor,
+					fontWeight: e.typography.fontWeightMedium,
+					[a]: { "&:hover:not(.Mui-disabled)": {
+						backgroundColor: "transparent",
+						color: n.light.containedColor
+					} },
+					"&:active:not(.Mui-disabled)": { backgroundColor: "transparent" },
+					...e.applyStyles("dark", {
+						color: n.dark.containedColor,
+						[a]: { "&:hover:not(.Mui-disabled)": { color: n.dark.containedColor } }
+					})
+				}
+			}
+		]
+	};
+}), E = y(g, {
+	name: "SSegmentedControl",
+	slot: "Icon",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	alignItems: "center",
+	display: "inline-flex",
+	flex: "0 0 auto",
+	fontSize: 20,
+	"& > *": { fontSize: "inherit" },
+	variants: [{
+		props: ({ ownerState: e }) => e.size === "small",
+		style: { fontSize: 18 }
+	}]
+}), D = y(v, {
+	name: "SSegmentedControl",
+	slot: "Label",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	color: "inherit",
+	fontWeight: "inherit",
+	minWidth: 0
+}), O = y(g, {
+	name: "SSegmentedControl",
+	slot: "Badge",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	alignItems: "center",
+	display: "inline-flex",
+	flex: "0 0 auto"
+});
+function k(a, o) {
+	let s = b({
+		props: a,
+		name: "SSegmentedControl"
+	}), { defaultValue: c, disabled: g = !1, fullWidth: _ = !1, onChange: v, options: y, size: S = "medium", slotProps: k, slots: A, sx: j, value: M, ...N } = s, [P, F] = u({
+		controlled: M,
+		default: c,
+		name: "SSegmentedControl",
+		state: "value"
+	}), I = y.some((e) => e.value === P && e.disabled), L = {
+		...s,
+		disabled: g,
+		fullWidth: _,
+		selectedDisabled: I,
+		size: S
+	}, R = f.useRef(null), z = f.useRef(/* @__PURE__ */ new Map()), [B, V] = f.useState(null), H = f.useId();
+	l(() => {
+		let e = R.current;
+		if (!e) return;
+		let t = () => {
+			let t = P === void 0 ? void 0 : z.current.get(P);
+			if (!t) {
+				V((e) => e === null ? e : null);
+				return;
+			}
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = {
+				height: r.height,
+				left: r.left - n.left,
+				top: r.top - n.top,
+				width: r.width
+			};
+			V((e) => e && e.height === i.height && e.left === i.left && e.top === i.top && e.width === i.width ? e : i);
+		};
+		if (t(), window.addEventListener("resize", t), typeof ResizeObserver > "u") return () => window.removeEventListener("resize", t);
+		let n = new ResizeObserver(t);
+		return n.observe(e), z.current.forEach((e) => n.observe(e)), () => {
+			n.disconnect(), window.removeEventListener("resize", t);
+		};
+	}, [
+		_,
+		JSON.stringify(y.map((e) => [
+			typeof e.value,
+			String(e.value),
+			!!e.disabled
+		])),
+		S,
+		P
+	]);
+	let U = r((e, t) => {
+		e !== P && (F(e), v?.(t, e));
+	}), W = r((e) => {
+		if (!x.includes(e.key)) return;
+		e.preventDefault();
+		let t = y.filter((e) => !e.disabled);
+		if (t.length === 0) return;
+		let n = t.findIndex((e) => e.value === P), r;
+		if (e.key === "Home") r = 0;
+		else if (e.key === "End") r = t.length - 1;
+		else {
+			let i = e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1;
+			r = ((n === -1 ? i === 1 ? -1 : 0 : n) + i + t.length) % t.length;
+		}
+		let i = t[r];
+		i && (U(i.value, e), z.current.get(i.value)?.focus());
+	}), G = y.filter((e) => !e.disabled).map((e) => e.value), K = P !== void 0 && G.includes(P) ? P : G[0] ?? void 0, q = A?.root ?? C, J = A?.indicator ?? w, Y = A?.option ?? T, X = A?.icon ?? E, Z = A?.label ?? D, Q = A?.badge ?? O, { ref: $, sx: ee, ...te } = i(q, d(t(k?.root, L), N), L), ne = n($, R, o), { style: re, ...ie } = t(k?.indicator, L) ?? {}, ae = i(J, ie, L);
+	return /* @__PURE__ */ h(q, {
+		...te,
+		"aria-disabled": g || void 0,
+		ref: ne,
+		role: "radiogroup",
+		sx: [...e(j), ...e(ee)],
+		children: [/* @__PURE__ */ m(J, {
+			"aria-hidden": !0,
+			...ae,
+			style: {
+				height: B?.height ?? 0,
+				opacity: +!!B,
+				transform: `translate3d(${B?.left ?? 0}px, ${B?.top ?? 0}px, 0)`,
+				width: B?.width ?? 0,
+				...re
+			}
+		}), y.map((e, n) => {
+			let r = e.value === P, a = `${H}-${n}`, o = `${a}-label`, s = `${a}-description`, c = e.badge != null, l = {
+				...L,
+				option: e,
+				selected: r
+			}, u = i(Y, t(k?.option, l) ?? {}, l), d = i(X, t(k?.icon, l) ?? {}, l), f = t(k?.label, l) ?? {}, h = i(Z, {
+				component: "span",
+				noWrap: !0,
+				variant: S === "small" ? "body2" : "body1",
+				...f
+			}, l), _ = i(Q, {
+				component: "span",
+				...t(k?.badge, l) ?? {}
+			}, l);
+			return /* @__PURE__ */ p(Y, {
+				...u,
+				"aria-checked": r,
+				"aria-describedby": c ? s : void 0,
+				"aria-labelledby": o,
+				disabled: g || e.disabled,
+				key: e.value,
+				onClick: (t) => U(e.value, t),
+				onKeyDown: W,
+				ref: (t) => {
+					t ? z.current.set(e.value, t) : z.current.delete(e.value);
+				},
+				role: "radio",
+				tabIndex: e.value === K ? 0 : -1
+			}, e.icon ? /* @__PURE__ */ m(X, {
+				"aria-hidden": !0,
+				...d,
+				children: e.icon
+			}) : null, /* @__PURE__ */ m(Z, {
+				...h,
+				id: o,
+				children: e.label
+			}), c ? /* @__PURE__ */ m(Q, {
+				..._,
+				id: s,
+				children: e.badge
+			}) : null);
+		})]
+	});
+}
+var A = f.forwardRef(k);
+A.displayName = "SSegmentedControl";
+//#endregion
+export { A as SSegmentedControl, A as default };

package/dist/s-select/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-select-dwY2DYa9.js";
+import { t as e } from "../s-select-CtVKEOZ5.js";
 export { e as SSelect, e as default };

package/dist/s-select/s-select.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-select-dwY2DYa9.js";
+import { t as e } from "../s-select-CtVKEOZ5.js";
 export { e as SSelect, e as default };

package/dist/{s-select-dwY2DYa9.js → s-select-CtVKEOZ5.js}

@@ -1,6 +1,6 @@
-import { t as e } from "./createSvgIcon-B0SZlJF1.js";
-import { t } from "./mergeSlotProps-xl1-PgWL.js";
-import { t as n } from "./field-label-styles-BOyhp6gw.js";
+import { t as e } from "./createSvgIcon-3y-gS0r1.js";
+import { t } from "./mergeSlotProps-DC8r4QzS.js";
+import { t as n } from "./field-label-styles-4praXMaE.js";
 import * as r from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { Box as o, FormControl as s, FormHelperText as c, InputAdornment as l, InputLabel as ee, ListSubheader as u, MenuItem as d, Select as te, TextField as ne, styled as f, useThemeProps as re } from "@mui/material";

package/dist/s-select-list/s-select-list.js

@@ -1,9 +1,9 @@
 import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
-import { t } from "../useForkRef-CKneCEtr.js";
-import { t as n } from "../useEventCallback-CVqMfiG_.js";
-import { t as r } from "../appendOwnerState-CELpvdMz.js";
-import { t as i } from "../useControlled-BeB0W_Ui.js";
-import { t as a } from "../mergeSlotProps-xl1-PgWL.js";
+import { t } from "../useForkRef-BuNFTXxE.js";
+import { t as n } from "../useEventCallback-DGCsaRIu.js";
+import { t as r } from "../appendOwnerState-CFQTq3pb.js";
+import { t as i } from "../useControlled-DqNPBJNp.js";
+import { t as a } from "../mergeSlotProps-DC8r4QzS.js";
 import * as o from "react";
 import { createElement as s } from "react";
 import { jsx as c } from "react/jsx-runtime";

package/dist/s-skeleton/s-skeleton.js

@@ -1,6 +1,6 @@
 import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../Skeleton-iZFynl7z.js";
-import { t as n } from "../useThemeProps-Cr28OQu3.js";
+import { t } from "../useThemeProps-Dw9dmKyT.js";
+import { t as n } from "../Skeleton-iZFynl7z.js";
 import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region lib/s-skeleton/s-skeleton.tsx
@@ -25,28 +25,28 @@ var a = {
 		variant: "rounded",
 		width: 32
 	}
-}, o = e(t, {
+}, o = e(n, {
 	name: "SSkeleton",
 	slot: "Root"
 })(({ ownerState: e, theme: t }) => ({
 	...e.preset === "checkbox" && { borderRadius: t.radius.sm },
 	...e.variant === "text" && e.fontSize != null && { fontSize: e.fontSize }
-})), s = r.forwardRef(function(e, t) {
-	let r = n({
+})), s = r.forwardRef(function(e, n) {
+	let r = t({
 		props: e,
 		name: "SSkeleton"
 	});
 	if (r.preset) {
-		let { preset: e, ...n } = r, s = a[e], c = {
-			animation: n.animation,
+		let { preset: e, ...t } = r, s = a[e], c = {
+			animation: t.animation,
 			preset: e,
 			variant: s.variant
 		};
 		return /* @__PURE__ */ i(o, {
-			...n,
+			...t,
 			height: s.height,
 			ownerState: c,
-			ref: t,
+			ref: n,
 			variant: s.variant,
 			width: s.width
 		});
@@ -59,7 +59,7 @@ var a = {
 	return /* @__PURE__ */ i(o, {
 		...l,
 		ownerState: u,
-		ref: t,
+		ref: n,
 		variant: c
 	});
 });

package/dist/s-snackbar-message/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../s-snackbar-message-3Z6VySlB.js";
+import { n as e, r as t, t as n } from "../s-snackbar-message-DsfJlDYd.js";
 export { n as SSnackbarMessage, n as default, e as SnackbarMessageProvider, t as useSnackbarMessage };

package/dist/s-snackbar-message/s-snackbar-message.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../s-snackbar-message-3Z6VySlB.js";
+import { n as e, r as t, t as n } from "../s-snackbar-message-DsfJlDYd.js";
 export { n as SSnackbarMessage, n as default, e as SnackbarMessageProvider, t as useSnackbarMessage };