@solostylist/ui-kit 2.0.1 → 2.0.3

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

@@ -0,0 +1,298 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { actionHoverMedia as n, getFocusVisibleStyle as r, getSemanticActionTokens as i, reducedPressMotionStyle as a } from "../theme/components/action-styles.js";
+import * as o from "react";
+import { createElement as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Box as u, ButtonBase as d, Typography as f, styled as p, useThemeProps as m } from "@mui/material";
+import { mergeSlotProps as h, unstable_useEnhancedEffect as g, useControlled as _, useEventCallback as v, useForkRef as y } from "@mui/material/utils";
+import b from "@mui/utils/appendOwnerState";
+//#region lib/s-segmented-control/s-segmented-control.tsx
+var x = [
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"End",
+	"Home"
+], S = {
+	medium: 40,
+	small: 36
+}, C = p(u, {
+	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 = p(u, {
+	name: "SSegmentedControl",
+	slot: "Indicator",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette, n = i(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 = p(d, {
+	name: "SSegmentedControl",
+	slot: "Option",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette, o = i(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,
+		[n]: { "&:hover:not(.Mui-disabled)": {
+			backgroundColor: t.action.hover,
+			color: t.text.primary
+		} },
+		"&:active:not(.Mui-disabled)": { backgroundColor: t.action.selected },
+		"&.Mui-focusVisible": r(e),
+		"&.Mui-disabled": { color: t.action.disabled },
+		...a,
+		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: o.light.containedColor,
+					fontWeight: e.typography.fontWeightMedium,
+					[n]: { "&:hover:not(.Mui-disabled)": {
+						backgroundColor: "transparent",
+						color: o.light.containedColor
+					} },
+					"&:active:not(.Mui-disabled)": { backgroundColor: "transparent" },
+					...e.applyStyles("dark", {
+						color: o.dark.containedColor,
+						[n]: { "&:hover:not(.Mui-disabled)": { color: o.dark.containedColor } }
+					})
+				}
+			}
+		]
+	};
+}), E = p(u, {
+	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 = p(f, {
+	name: "SSegmentedControl",
+	slot: "Label",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	color: "inherit",
+	fontWeight: "inherit",
+	minWidth: 0
+}), O = p(u, {
+	name: "SSegmentedControl",
+	slot: "Badge",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	alignItems: "center",
+	display: "inline-flex",
+	flex: "0 0 auto"
+});
+function k(n, r) {
+	let i = m({
+		props: n,
+		name: "SSegmentedControl"
+	}), { defaultValue: a, disabled: u = !1, fullWidth: d = !1, onChange: f, options: p, size: S = "medium", slotProps: k, slots: A, sx: j, value: M, ...N } = i, [P, F] = _({
+		controlled: M,
+		default: a,
+		name: "SSegmentedControl",
+		state: "value"
+	}), I = p.some((e) => e.value === P && e.disabled), L = {
+		...i,
+		disabled: u,
+		fullWidth: d,
+		selectedDisabled: I,
+		size: S
+	}, R = o.useRef(null), z = o.useRef(/* @__PURE__ */ new Map()), [B, V] = o.useState(null), H = o.useId();
+	g(() => {
+		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);
+		};
+	}, [
+		d,
+		JSON.stringify(p.map((e) => [
+			typeof e.value,
+			String(e.value),
+			!!e.disabled
+		])),
+		S,
+		P
+	]);
+	let U = v((e, t) => {
+		e !== P && (F(e), f?.(t, e));
+	}), W = v((e) => {
+		if (!x.includes(e.key)) return;
+		e.preventDefault();
+		let t = p.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 = p.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 } = b(q, h(t(k?.root, L), N), L), ne = y($, R, r), { style: re, ...ie } = t(k?.indicator, L) ?? {}, ae = b(J, ie, L);
+	return /* @__PURE__ */ l(q, {
+		...te,
+		"aria-disabled": u || void 0,
+		ref: ne,
+		role: "radiogroup",
+		sx: [...e(j), ...e(ee)],
+		children: [/* @__PURE__ */ c(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
+			}
+		}), p.map((e, n) => {
+			let r = e.value === P, i = `${H}-${n}`, a = `${i}-label`, o = `${i}-description`, l = e.badge != null, d = {
+				...L,
+				option: e,
+				selected: r
+			}, f = b(Y, t(k?.option, d) ?? {}, d), p = b(X, t(k?.icon, d) ?? {}, d), m = t(k?.label, d) ?? {}, h = b(Z, {
+				component: "span",
+				noWrap: !0,
+				variant: S === "small" ? "body2" : "body1",
+				...m
+			}, d), g = b(Q, {
+				component: "span",
+				...t(k?.badge, d) ?? {}
+			}, d);
+			return /* @__PURE__ */ s(Y, {
+				...f,
+				"aria-checked": r,
+				"aria-describedby": l ? o : void 0,
+				"aria-labelledby": a,
+				disabled: u || 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__ */ c(X, {
+				"aria-hidden": !0,
+				...p,
+				children: e.icon
+			}) : null, /* @__PURE__ */ c(Z, {
+				...h,
+				id: a,
+				children: e.label
+			}), l ? /* @__PURE__ */ c(Q, {
+				...g,
+				id: o,
+				children: e.badge
+			}) : null);
+		})]
+	});
+}
+var A = o.forwardRef(k);
+A.displayName = "SSegmentedControl";
+//#endregion
+export { A as SSegmentedControl, A as default };

package/dist/s-stepper/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SStepper } from './s-stepper';
+export type { SStepperOwnProps, SStepperOwnerState, SStepperProps, SStepperSlotProps, SStepperSlots, SStepperStep, SStepperStepState, SStepperTypeMap, } from './s-stepper';
+export type {} from '../theme/component-augmentation';

package/dist/s-stepper/index.js

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

package/dist/s-stepper/s-stepper.d.ts

@@ -0,0 +1,90 @@
+import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
+import { StepProps } from '@mui/material/Step';
+import { StepConnectorProps } from '@mui/material/StepConnector';
+import { StepIconProps } from '@mui/material/StepIcon';
+import { StepLabelProps } from '@mui/material/StepLabel';
+import { StepperOwnProps, StepperProps } from '@mui/material/Stepper';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** A single step in the progress indicator. */
+export interface SStepperStep {
+    /** Marks the step as done regardless of its position. Linear steppers complete preceding steps by default. */
+    completed?: boolean;
+    /** Secondary inline text rendered under the label. */
+    description?: number | string;
+    /** Passes the disabled state to MUI Step and dims its label and icon. */
+    disabled?: boolean;
+    /** Replaces the default step icon. */
+    icon?: React.ReactNode;
+    /** Unique step key. */
+    key: string;
+    /** Visible step label. */
+    label: React.ReactNode;
+}
+/** Props owned by the reusable step/progress indicator. */
+export interface SStepperOwnProps extends Omit<StepperOwnProps, 'children' | 'connector' | 'elevation' | 'square' | 'variant'> {
+    /**
+     * Zero-based index of the active step.
+     *
+     * Use `-1` to disable every step without an explicit override in linear
+     * mode. In non-linear mode, `-1` leaves every step inactive and preserves
+     * explicit per-step states.
+     * @default 0
+     */
+    activeStep?: number;
+    /**
+     * Places labels below their icons in horizontal orientation.
+     *
+     * MUI does not support alternative labels for vertical steppers, so this
+     * prop is ignored when `orientation="vertical"`.
+     * @default false
+     */
+    alternativeLabel?: boolean;
+    /** Steps rendered in order. */
+    steps: SStepperStep[];
+    /** Components used for internal structural slots. */
+    slots?: SStepperSlots;
+    /** Props or step-state callbacks for internal structural slots. */
+    slotProps?: SStepperSlotProps;
+}
+export interface SStepperTypeMap<AdditionalProps = object, RootComponent extends React.ElementType = 'ol'> {
+    props: AdditionalProps & SStepperOwnProps;
+    defaultComponent: RootComponent;
+}
+export type SStepperProps<RootComponent extends React.ElementType = SStepperTypeMap['defaultComponent'], AdditionalProps = object> = OverrideProps<SStepperTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+    component?: React.ElementType;
+};
+export interface SStepperOwnerState extends Omit<SStepperOwnProps, 'slotProps' | 'slots'> {
+    activeStep: number;
+    alternativeLabel: boolean;
+    component?: React.ElementType;
+    nonLinear: boolean;
+    orientation: NonNullable<StepperProps['orientation']>;
+}
+export interface SStepperStepState extends SStepperOwnerState {
+    active: boolean;
+    completed: boolean;
+    disabled: boolean;
+    index: number;
+    step: SStepperStep;
+}
+type RootSlotProps<Props> = MuiOwnerStateSlotProps<Props, SStepperOwnerState>;
+type StepSlotProps<Props> = MuiOwnerStateSlotProps<Props, SStepperStepState>;
+export interface SStepperSlots {
+    connector?: React.ElementType;
+    icon?: React.ElementType;
+    label?: React.ElementType;
+    root?: React.ElementType;
+    step?: React.ElementType;
+}
+export interface SStepperSlotProps {
+    connector?: RootSlotProps<StepConnectorProps>;
+    icon?: StepSlotProps<Partial<StepIconProps>>;
+    label?: StepSlotProps<Omit<StepLabelProps, 'children' | 'icon' | 'optional'>>;
+    root?: RootSlotProps<Omit<StepperProps, 'children' | 'connector' | 'elevation' | 'square' | 'variant'>>;
+    step?: StepSlotProps<Omit<StepProps, 'active' | 'children' | 'completed' | 'disabled'>>;
+}
+export declare const SStepper: OverridableComponent<SStepperTypeMap<object, "ol">> & {
+    displayName: string;
+};
+export default SStepper;

package/dist/s-stepper/s-stepper.js

@@ -0,0 +1,102 @@
+import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import * as r from "react";
+import { createElement as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import o from "@mui/material/Typography";
+import { mergeSlotProps as s } from "@mui/material/utils";
+import c from "@mui/utils/appendOwnerState";
+import l from "@mui/material/Step";
+import u, { stepConnectorClasses as d } from "@mui/material/StepConnector";
+import f from "@mui/material/StepIcon";
+import p, { stepLabelClasses as m } from "@mui/material/StepLabel";
+import h from "@mui/material/Stepper";
+//#region lib/s-stepper/s-stepper.tsx
+var g = t(h, {
+	name: "SStepper",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	width: "100%",
+	[`& .${m.labelContainer}`]: { minWidth: 0 },
+	[`& .${m.label}`]: { overflowWrap: "anywhere" },
+	variants: [{
+		props: ({ ownerState: e }) => e.orientation === "vertical",
+		style: { [`& .${m.root}`]: { paddingBlock: e.spacing(1) } }
+	}]
+})), _ = t(l, {
+	name: "SStepper",
+	slot: "Step"
+})({ minWidth: 0 }), v = t(p, {
+	name: "SStepper",
+	slot: "Label"
+})(({ theme: e }) => ({ [`& .${m.label}`]: { [`&.${m.active}`]: {
+	color: (e.vars ?? e).palette.text.primary,
+	fontWeight: e.typography.fontWeightMedium
+} } })), y = t(f, {
+	name: "SStepper",
+	slot: "Icon"
+})({}), b = t(u, {
+	name: "SStepper",
+	slot: "Connector"
+})(({ theme: e }) => ({
+	[`&.${d.active} .${d.line}`]: {
+		borderColor: (e.vars ?? e).palette.primary.main,
+		...e.applyStyles("dark", { borderColor: (e.vars ?? e).palette.primary.light })
+	},
+	[`&.${d.completed} .${d.line}`]: { borderColor: (e.vars ?? e).palette.success.main }
+})), x = Object.assign(r.forwardRef(function(t, r) {
+	let l = n({
+		props: t,
+		name: "SStepper"
+	}), { activeStep: u = 0, alternativeLabel: d = !1, nonLinear: f = !1, orientation: p = "horizontal", slotProps: m, slots: h, steps: x, ...S } = l, C = p === "horizontal" && d, w = {
+		...l,
+		activeStep: u,
+		alternativeLabel: C,
+		nonLinear: f,
+		orientation: p
+	}, T = h?.root ?? g, E = h?.step ?? _, D = h?.label ?? v, O = h?.connector ?? b, k = h?.icon ?? y, A = c(T, s(e(m?.root, w), {
+		...S,
+		activeStep: u,
+		alternativeLabel: C,
+		nonLinear: f,
+		orientation: p
+	}), w), j = c(O, e(m?.connector, w) ?? {}, w);
+	return /* @__PURE__ */ a(T, {
+		...A,
+		ref: r,
+		connector: /* @__PURE__ */ a(O, { ...j }),
+		children: x.map((t, n) => {
+			let r = n === u, s = t.completed ?? (!f && n < u), l = t.disabled ?? (!f && n > u), d = {
+				...w,
+				active: r,
+				completed: s,
+				disabled: l,
+				index: n,
+				step: t
+			}, p = c(E, e(m?.step, d) ?? {}, d), h = c(D, e(m?.label, d) ?? {}, d), g = e(m?.icon, d);
+			return /* @__PURE__ */ i(E, {
+				...p,
+				active: r,
+				"aria-current": r ? "step" : void 0,
+				completed: s,
+				disabled: l,
+				key: t.key
+			}, /* @__PURE__ */ a(D, {
+				...h,
+				icon: t.icon,
+				optional: t.description == null ? void 0 : /* @__PURE__ */ a(o, {
+					component: "span",
+					variant: "body2",
+					sx: { color: "text.secondary" },
+					children: t.description
+				}),
+				slotProps: { stepIcon: g },
+				slots: { stepIcon: k },
+				children: t.label
+			}));
+		})
+	});
+}), { displayName: "SStepper" });
+//#endregion
+export { x as SStepper, x as default };

package/dist/s-swatch/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SSwatch } from './s-swatch';
+export type { SSwatchAccessibleNameProps, SSwatchBaseProps, SSwatchOwnerState, SSwatchProps, SSwatchShape, SSwatchSize, SSwatchSlotProps, SSwatchSlots, SSwatchVisualProps, } from './s-swatch';
+export type {} from '../theme/component-augmentation';

package/dist/s-swatch/index.js

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