@solostylist/ui-kit 2.0.1 → 2.0.2

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

@@ -1,9 +1,9 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { ScrollVelocityContext as t } from "./scroll-velocity-container.js";
-import n, { useContext as r, useEffect as i, useRef as a, useState as o } from "react";
-import { jsx as s } from "react/jsx-runtime";
-import { Box as c, useTheme as l } from "@mui/material";
-import { useForkRef as u } from "@mui/material/utils";
+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";
+import { Box as l, useTheme as u } from "@mui/material";
 import { motion as d, useAnimationFrame as f, useMotionValue as p, useScroll as m, useSpring as h, useTransform as g, useVelocity as _ } from "framer-motion";
 //#region lib/s-scroll-velocity/scroll-velocity-row.tsx
 var v = (e, t, n) => {
@@ -13,12 +13,12 @@ var v = (e, t, n) => {
 function y(e) {
 	return Array.from({ length: e }, (e, t) => `scroll-velocity-copy-${t + 1}`);
 }
-var b = n.forwardRef(function({ children: t, baseVelocity: r = 5, direction: m = 1, spacing: h = 0, sx: _, velocityFactor: b, ...x }, S) {
-	let C = l(), w = a(null), T = u(w, S), E = a(null), [D, O] = o(1), k = p(0), A = a(m >= 0 ? -1 : 1), j = a(m >= 0 ? -1 : 1), M = p(0), N = a(!0), P = a(!0), F = a(!1), I = n.useMemo(() => y(D), [D]), L = C.spacing(h);
-	i(() => {
+var b = r.forwardRef(function({ children: n, baseVelocity: i = 5, direction: m = 1, spacing: h = 0, sx: _, velocityFactor: b, ...x }, S) {
+	let C = u(), w = o(null), T = t(w, S), E = o(null), [D, O] = s(1), k = p(0), A = o(m >= 0 ? -1 : 1), j = o(m >= 0 ? -1 : 1), M = p(0), N = o(!0), P = o(!0), F = o(!1), I = r.useMemo(() => y(D), [D]), L = C.spacing(h);
+	a(() => {
 		let e = m >= 0 ? -1 : 1, t = A.current;
 		A.current = e, j.current *= e / t;
-	}, [m]), i(() => {
+	}, [m]), a(() => {
 		let e = w.current, t = E.current, n = t?.parentElement;
 		if (!e || !t || !n) return;
 		let r = () => {
@@ -45,23 +45,23 @@ var b = n.forwardRef(function({ children: t, baseVelocity: r = 5, direction: m =
 			i.disconnect(), a.disconnect(), document.removeEventListener("visibilitychange", o), s.removeEventListener("change", c);
 		};
 	}, [
-		t,
+		n,
 		L,
 		M
 	]);
 	let R = g([k, M], ([e, t]) => `${-v(0, Number(t) || 1, -(Number(e) || 0))}px`);
 	return f((e, t) => {
 		if (!N.current || !P.current || F.current) return;
-		let n = t / 1e3, i = b.get(), a = Math.min(5, Math.abs(i)), o = 1 + a;
+		let n = t / 1e3, r = b.get(), a = Math.min(5, Math.abs(r)), o = 1 + a;
 		if (a > .1) {
-			let e = i >= 0 ? 1 : -1;
+			let e = r >= 0 ? 1 : -1;
 			j.current = A.current * e;
 		}
 		let s = M.get() ?? 0;
 		if (s <= 0) return;
-		let c = s * r / 100, l = j.current * c * o * n;
+		let c = s * i / 100, l = j.current * c * o * n;
 		k.set(k.get() + l);
-	}), /* @__PURE__ */ s(c, {
+	}), /* @__PURE__ */ c(l, {
 		ref: T,
 		sx: [{
 			width: "100%",
@@ -69,7 +69,7 @@ var b = n.forwardRef(function({ children: t, baseVelocity: r = 5, direction: m =
 			whiteSpace: "nowrap"
 		}, ...e(_)],
 		...x,
-		children: /* @__PURE__ */ s(d.div, {
+		children: /* @__PURE__ */ c(d.div, {
 			style: {
 				display: "inline-flex",
 				alignItems: "center",
@@ -78,10 +78,10 @@ var b = n.forwardRef(function({ children: t, baseVelocity: r = 5, direction: m =
 				userSelect: "none",
 				x: R
 			},
-			children: I.map((e, n) => /* @__PURE__ */ s(c, {
-				ref: n === 0 ? E : null,
-				"aria-hidden": n !== 0,
-				inert: n !== 0,
+			children: I.map((e, t) => /* @__PURE__ */ c(l, {
+				ref: t === 0 ? E : null,
+				"aria-hidden": t !== 0,
+				inert: t !== 0,
 				sx: {
 					display: "inline-flex",
 					flexShrink: 0,
@@ -89,29 +89,29 @@ var b = n.forwardRef(function({ children: t, baseVelocity: r = 5, direction: m =
 					columnGap: L
 				},
 				component: "div",
-				children: t
+				children: n
 			}, e))
 		})
 	});
-}), x = n.forwardRef(function(e, t) {
+}), x = r.forwardRef(function(e, t) {
 	let { scrollY: n } = m(), r = g(h(_(n), {
 		damping: 50,
 		stiffness: 400
 	}), (e) => (e < 0 ? -1 : 1) * Math.min(5, Math.abs(e) / 1e3 * 5));
-	return /* @__PURE__ */ s(b, {
+	return /* @__PURE__ */ c(b, {
 		...e,
 		ref: t,
 		velocityFactor: r
 	});
-}), S = n.forwardRef(function(e, n) {
-	let i = r(t);
-	return i ? /* @__PURE__ */ s(b, {
+}), S = r.forwardRef(function(e, t) {
+	let r = i(n);
+	return r ? /* @__PURE__ */ c(b, {
 		...e,
-		ref: n,
-		velocityFactor: i
-	}) : /* @__PURE__ */ s(x, {
+		ref: t,
+		velocityFactor: r
+	}) : /* @__PURE__ */ c(x, {
 		...e,
-		ref: n
+		ref: t
 	});
 });
 //#endregion

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 { SSelect as e } from "./s-select.js";
+import { t as e } from "../s-select-CtVKEOZ5.js";
 export { e as SSelect, e as default };