@solostylist/ui-kit 2.0.1 → 2.0.3

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,250 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { STextField as n } from "../s-text-field/s-text-field.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o, Slider as s, styled as c, useThemeProps as ee } from "@mui/material";
+import { mergeSlotProps as l, useControlled as te, useEventCallback as u, useForkRef as ne } from "@mui/material/utils";
+import d from "@mui/utils/appendOwnerState";
+import { sliderClasses as f } from "@mui/material/Slider";
+//#region lib/s-number-range/s-number-range.tsx
+var p = (e, t, n) => Math.min(Math.max(e, t), n), m = (e, t, n) => {
+	let r = p(e[0], t, n), i = p(e[1], t, n);
+	return r <= i ? [r, i] : [i, r];
+}, h = (e) => {
+	if (e.trim() === "") return null;
+	let t = Number(e);
+	return Number.isFinite(t) ? t : null;
+}, g = (e) => e != null && e !== !1 && e !== "", _ = (e, t, n, r) => e >= n && e <= r && t >= n && t <= r && e <= t, re = (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.");
+}, ie = c("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%"
+})), ae = c("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
+})), oe = c(s, {
+	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),
+		[`& .${f.rail}`]: {
+			backgroundColor: (e.vars ?? e).palette.action.selected,
+			opacity: 1
+		},
+		[`& .${f.track}`]: { border: 0 },
+		[`& .${f.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, &.${f.focusVisible}`]: { boxShadow: `0 0 0 6px ${(e.vars ?? e).palette.action.selected}` }
+		},
+		[`& .${f.mark}`]: {
+			backgroundColor: (e.vars ?? e).palette[t.color].main,
+			borderRadius: e.radius.sm,
+			height: n ? 8 : 10,
+			opacity: 1,
+			width: n ? 3 : 4
+		}
+	};
+}), se = c(o, {
+	name: "SNumberRange",
+	slot: "Inputs",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "flex-start",
+	display: "flex",
+	gap: e.spacing(1)
+})), ce = c(n, {
+	name: "SNumberRange",
+	slot: "MinInput",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	flex: "1 1 0",
+	minWidth: 0
+}), le = c(n, {
+	name: "SNumberRange",
+	slot: "MaxInput",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	flex: "1 1 0",
+	minWidth: 0
+}), ue = c(o, {
+	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"
+})), v = r.forwardRef(function(n, o) {
+	let s = ee({
+		props: n,
+		name: "SNumberRange"
+	}), { color: c = "primary", defaultValue: f, disabled: v = !1, getAriaValueText: de, invalidRangeText: y = "Enter a value inside the allowed range", label: b, max: x = 100, maxLabel: S = "Maximum", min: C = 0, minLabel: w = "Minimum", onChange: fe, onChangeCommitted: T, separator: pe = "–", size: E = "medium", slotProps: D, slots: O, step: k = 1, sx: me, value: he, valueLabelFormat: A, ...ge } = s;
+	re(C, x, k);
+	let [_e, ve] = te({
+		controlled: he,
+		default: f ?? [C, x],
+		name: "SNumberRange",
+		state: "value"
+	}), [ye, j] = r.useState(null), M = m(_e, C, x), N = M[0], P = M[1], F = ye ?? [String(M[0]), String(M[1])], I = h(F[0]), L = h(F[1]), be = I !== null && L !== null && _(I, L, C, x), R = I === null || I < C || I > x || L !== null && I > L, z = L === null || L < C || L > x || I !== null && L < I;
+	r.useEffect(() => {
+		j(null);
+	}, [
+		x,
+		C,
+		P,
+		N
+	]);
+	let B = {
+		...s,
+		color: c,
+		disabled: v,
+		hasInputLabel: !1,
+		max: x,
+		maxInvalid: z,
+		min: C,
+		minInvalid: R,
+		size: E,
+		step: k,
+		value: M
+	}, V = t(D?.minInput, B), H = t(D?.maxInput, B), U = {
+		...B,
+		hasInputLabel: g(V?.label) || g(H?.label)
+	}, W = u((e, t) => {
+		let n = m(t, C, x);
+		return n[0] === M[0] && n[1] === M[1] ? n : (ve(n), fe?.(e, n), n);
+	}), xe = u((e, t) => {
+		Array.isArray(t) && (j(null), W(e, [t[0], t[1]]));
+	}), Se = u((e, t) => {
+		Array.isArray(t) && T?.(e, m([t[0], t[1]], C, x));
+	}), Ce = (e) => (t) => {
+		if (t.defaultPrevented) return;
+		let n = t.target.value, r = e === 0 ? [n, F[1]] : [F[0], n];
+		j(r);
+		let i = h(r[0]), a = h(r[1]);
+		i !== null && a !== null && _(i, a, C, x) && (j(null), W(t, [i, a]));
+	}, we = (e) => (t) => {
+		if (t.defaultPrevented) return;
+		let n = h(F[e]), r = n === null ? M : e === 0 ? [p(n, C, M[1]), M[1]] : [M[0], p(n, M[0], x)];
+		j(null);
+		let i = W(t, r);
+		T?.(t, i);
+	}, Te = (e) => {
+		if (e.defaultPrevented) return;
+		let t = e.target;
+		if (t.tagName === "INPUT") {
+			if (e.key === "Escape") {
+				e.preventDefault(), j(null);
+				return;
+			}
+			e.key === "Enter" && (e.preventDefault(), t.blur());
+		}
+	}, G = O?.root ?? ie, K = O?.label ?? ae, q = O?.slider ?? oe, J = O?.inputs ?? se, Y = O?.minInput ?? ce, X = O?.maxInput ?? le, Z = O?.separator ?? ue, { ref: Ee, sx: De, ...Oe } = d(G, l(t(D?.root, U), {
+		"aria-disabled": v || void 0,
+		...ge
+	}), U), ke = ne(Ee, o), Ae = d(K, t(D?.label, U) ?? {}, U), je = d(q, {
+		...l(t(D?.slider, U), { valueLabelDisplay: "auto" }),
+		color: c,
+		disableSwap: !0,
+		disabled: v,
+		getAriaLabel: (e) => e === 0 ? w : S,
+		getAriaValueText: de,
+		max: x,
+		min: C,
+		size: E,
+		step: k,
+		...A !== void 0 && { valueLabelFormat: A }
+	}, U), Q = d(J, t(D?.inputs, U) ?? {}, U), Me = d(Z, {
+		"aria-hidden": !0,
+		component: "span",
+		...t(D?.separator, U) ?? {}
+	}, U), $ = (e) => {
+		let { slotProps: t, ...n } = (e === 0 ? V : H) ?? {}, r = l(t?.htmlInput, { "aria-label": e === 0 ? w : S }), i = l({
+			inputMode: "decimal",
+			max: x,
+			min: C,
+			step: k
+		}, r), a = l(n, {
+			helperText: (e === 0 ? R : !R && z) ? y : void 0,
+			onBlur: we(e),
+			onChange: Ce(e),
+			onKeyDown: Te
+		});
+		return d(e === 0 ? Y : X, {
+			...a,
+			color: c,
+			disabled: v,
+			error: e === 0 ? R : z,
+			size: E,
+			slotProps: {
+				...t,
+				htmlInput: i
+			},
+			type: "number",
+			value: F[e]
+		}, U);
+	}, Ne = $(0), Pe = $(1);
+	return /* @__PURE__ */ a(G, {
+		...Oe,
+		ref: ke,
+		sx: [...e(me), ...e(De)],
+		"data-invalid": be ? void 0 : "",
+		children: [
+			b != null && /* @__PURE__ */ i(K, {
+				...Ae,
+				children: b
+			}),
+			/* @__PURE__ */ i(q, {
+				...je,
+				onChange: xe,
+				onChangeCommitted: Se,
+				value: [M[0], M[1]]
+			}),
+			/* @__PURE__ */ a(J, {
+				...Q,
+				children: [
+					/* @__PURE__ */ i(Y, { ...Ne }),
+					/* @__PURE__ */ i(Z, {
+						...Me,
+						children: pe
+					}),
+					/* @__PURE__ */ i(X, { ...Pe })
+				]
+			})
+		]
+	});
+});
+v.displayName = "SNumberRange";
+//#endregion
+export { v as SNumberRange, v as default };

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

@@ -0,0 +1,5 @@
+export { default, default as SPopover } from './s-popover';
+export type { SPopoverOwnerState, SPopoverPlacement, SPopoverProps, SPopoverSlotProps, SPopoverSlots, } from './s-popover';
+export { default as SPopoverContent } from './s-popover-content';
+export type { SPopoverContentProps, SPopoverContentTypeMap } from './s-popover-content';
+export type {} from '../theme/component-augmentation';

package/dist/s-popover/index.js

@@ -0,0 +1,3 @@
+import { SPopover as e } from "./s-popover.js";
+import { SPopoverContent as t } from "./s-popover-content.js";
+export { e as SPopover, e as default, t as SPopoverContent };

package/dist/s-popover/placement.d.ts

@@ -0,0 +1,14 @@
+import { PopoverOrigin } from '@mui/material/Popover';
+/** Anchor edge/corner the popover surface is attached to. */
+export type SPopoverPlacement = 'bottom' | 'bottom-end' | 'bottom-start' | 'top' | 'top-end' | 'top-start';
+/**
+ * Shared placement vocabulary for every anchored surface in the kit.
+ *
+ * Lives outside `s-popover.tsx` so components that anchor a MUI `Menu` (which
+ * cannot be swapped for `SPopover`) can reuse the same origin pairs without
+ * pulling the `SPopover` component into their bundle.
+ */
+export declare const placementOrigins: Record<SPopoverPlacement, {
+    anchorOrigin: PopoverOrigin;
+    transformOrigin: PopoverOrigin;
+}>;

package/dist/s-popover/placement.js

@@ -0,0 +1,65 @@
+//#region lib/s-popover/placement.ts
+var e = {
+	bottom: {
+		anchorOrigin: {
+			horizontal: "center",
+			vertical: "bottom"
+		},
+		transformOrigin: {
+			horizontal: "center",
+			vertical: "top"
+		}
+	},
+	"bottom-end": {
+		anchorOrigin: {
+			horizontal: "right",
+			vertical: "bottom"
+		},
+		transformOrigin: {
+			horizontal: "right",
+			vertical: "top"
+		}
+	},
+	"bottom-start": {
+		anchorOrigin: {
+			horizontal: "left",
+			vertical: "bottom"
+		},
+		transformOrigin: {
+			horizontal: "left",
+			vertical: "top"
+		}
+	},
+	top: {
+		anchorOrigin: {
+			horizontal: "center",
+			vertical: "top"
+		},
+		transformOrigin: {
+			horizontal: "center",
+			vertical: "bottom"
+		}
+	},
+	"top-end": {
+		anchorOrigin: {
+			horizontal: "right",
+			vertical: "top"
+		},
+		transformOrigin: {
+			horizontal: "right",
+			vertical: "bottom"
+		}
+	},
+	"top-start": {
+		anchorOrigin: {
+			horizontal: "left",
+			vertical: "top"
+		},
+		transformOrigin: {
+			horizontal: "left",
+			vertical: "bottom"
+		}
+	}
+};
+//#endregion
+export { e as placementOrigins };

package/dist/s-popover/s-popover-content.d.ts

@@ -0,0 +1,22 @@
+import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
+import { Theme } from '@mui/material/styles';
+import { BoxTypeMap } from '@mui/system';
+import * as React from 'react';
+export interface SPopoverContentTypeMap<AdditionalProps = object, RootComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & BoxTypeMap<object, RootComponent, Theme>['props'];
+    defaultComponent: RootComponent;
+}
+export type SPopoverContentProps<RootComponent extends React.ElementType = SPopoverContentTypeMap['defaultComponent'], AdditionalProps = object> = OverrideProps<SPopoverContentTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+    component?: React.ElementType;
+};
+/**
+ * Padded content region for SPopover.
+ *
+ * Use one or more content regions when a popover mixes padded sections with
+ * edge-to-edge elements such as lists and dividers. The default 16px padding
+ * can be customized through `sx` or the `SPopoverContent` theme entry.
+ */
+export declare const SPopoverContent: OverridableComponent<SPopoverContentTypeMap<object, "div">> & {
+    displayName: string;
+};
+export default SPopoverContent;

package/dist/s-popover/s-popover-content.js

@@ -0,0 +1,21 @@
+import { styled as e, useThemeProps as t } from "@mui/material/styles";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@mui/material/Box";
+//#region lib/s-popover/s-popover-content.tsx
+var a = e(i, {
+	name: "SPopoverContent",
+	slot: "Root"
+})(({ theme: e }) => ({ padding: e.spacing(2) })), o = Object.assign(n.forwardRef(function(e, n) {
+	let i = t({
+		props: e,
+		name: "SPopoverContent"
+	});
+	return /* @__PURE__ */ r(a, {
+		...i,
+		ownerState: i,
+		ref: n
+	});
+}), { displayName: "SPopoverContent" });
+//#endregion
+export { o as SPopoverContent, o as default };

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

@@ -0,0 +1,59 @@
+import { PaperProps } from '@mui/material/Paper';
+import { PopoverProps, PopoverSlots } from '@mui/material/Popover';
+import { OwnerStateSlotProps } from '../utils/slots';
+import { SPopoverPlacement } from './placement';
+import * as React from 'react';
+export type { SPopoverPlacement } from './placement';
+type PopoverSlotProps = NonNullable<PopoverProps['slotProps']>;
+export interface SPopoverSlots extends Partial<Pick<PopoverSlots, 'backdrop' | 'transition'>> {
+    /** Surface rendered inside the popover, defaults to a themed MUI Paper. */
+    paper?: React.ElementType;
+    /** Popover element itself, defaults to MUI Popover. */
+    root?: React.ElementType;
+}
+type SPopoverRootSlotProps = Omit<PopoverProps, 'anchorOrigin' | 'children' | 'open' | 'slotProps' | 'slots' | 'transformOrigin'>;
+export interface SPopoverSlotProps extends Pick<PopoverSlotProps, 'backdrop' | 'transition'> {
+    /** Props or owner-state callback for the popover surface. */
+    paper?: OwnerStateSlotProps<PaperProps, SPopoverOwnerState>;
+    /** Props or owner-state callback for the popover root. */
+    root?: OwnerStateSlotProps<SPopoverRootSlotProps, SPopoverOwnerState>;
+}
+/** Props for a themed MUI Popover with placement-based origin mapping. */
+export interface SPopoverProps extends Omit<PopoverProps, 'anchorOrigin' | 'slotProps' | 'slots' | 'transformOrigin'> {
+    /** Element, virtual element, or getter the surface is positioned against. */
+    anchorEl?: PopoverProps['anchorEl'];
+    /** Popover content. Use SPopoverContent for a standard padded content region. */
+    children?: React.ReactNode;
+    /** Called when the popover requests to close (backdrop click or Escape). */
+    onClose?: PopoverProps['onClose'];
+    /** If `true`, the popover is shown. */
+    open: boolean;
+    /**
+     * Anchor edge/corner the surface attaches to. Resolves the matching
+     * `anchorOrigin`/`transformOrigin` pair on MUI Popover.
+     */
+    placement?: SPopoverPlacement;
+    /** Components used for internal structural slots. */
+    slots?: SPopoverSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SPopoverSlotProps;
+    /** Stacking order of the popover. Defaults to `theme.zIndex.modal`. */
+    zIndex?: number;
+}
+export interface SPopoverOwnerState extends SPopoverProps {
+    placement: SPopoverPlacement;
+}
+/**
+ * Themed MUI Popover with a `placement` API.
+ *
+ * Replaces the `anchorOrigin`/`transformOrigin` pair with a single `placement`
+ * token resolved from the kit's shared origin map, and applies the flat surface
+ * treatment used by every anchored panel in the system: `background.paper`,
+ * a 1px `divider` border and `radius.md`, with no elevation shadow.
+ * Compose with SPopoverContent when the content needs the standard 16px inset.
+ *
+ * The MUI `backdrop` and `transition` slots stay reachable through `slots` /
+ * `slotProps`; `root` targets the Popover itself rather than the inner Modal.
+ */
+export declare const SPopover: React.ForwardRefExoticComponent<Omit<SPopoverProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SPopover;

package/dist/s-popover/s-popover.js

@@ -0,0 +1,66 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { placementOrigins as n } from "./placement.js";
+import { styled as r, useThemeProps as i } from "@mui/material/styles";
+import * as a from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { mergeSlotProps as s, useForkRef as c } from "@mui/material/utils";
+import l from "@mui/utils/appendOwnerState";
+import u, { PopoverPaper as d } from "@mui/material/Popover";
+//#region lib/s-popover/s-popover.tsx
+var f = .5, p = r(u, {
+	name: "SPopover",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({ zIndex: e.zIndex.modal })), m = r(d, {
+	name: "SPopover",
+	slot: "Paper",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	border: "1px solid",
+	borderColor: (e.vars ?? e).palette.divider,
+	borderRadius: e.radius.md,
+	marginTop: 0,
+	variants: [{
+		props: ({ ownerState: e }) => e?.placement?.startsWith("bottom") ?? !1,
+		style: { marginTop: e.spacing(f) }
+	}, {
+		props: ({ ownerState: e }) => e?.placement?.startsWith("top") ?? !1,
+		style: { marginTop: e.spacing(-f) }
+	}]
+})), h = a.forwardRef(function(r, a) {
+	let u = i({
+		props: r,
+		name: "SPopover"
+	}), { placement: d = "bottom-end", slotProps: f, slots: h, sx: g, zIndex: _, ...v } = u, y = {
+		...u,
+		placement: d
+	}, { anchorOrigin: b, transformOrigin: x } = n[d], S = h?.root ?? p, C = h?.paper ?? m, { ref: w, sx: T, ...E } = l(S, s(t(f?.root, y), v), y), D = c(w, a), { sx: O, ...k } = l(C, t(f?.paper, y) ?? {}, y);
+	return /* @__PURE__ */ o(S, {
+		...E,
+		ref: D,
+		anchorOrigin: b,
+		slots: {
+			backdrop: h?.backdrop,
+			paper: C,
+			transition: h?.transition
+		},
+		slotProps: {
+			backdrop: f?.backdrop,
+			paper: {
+				...k,
+				sx: e(O)
+			},
+			transition: f?.transition
+		},
+		sx: [
+			..._ === void 0 ? [] : [{ zIndex: _ }],
+			...e(T),
+			...e(g)
+		],
+		transformOrigin: x
+	});
+});
+h.displayName = "SPopover";
+//#endregion
+export { h as SPopover, h as default };

package/dist/s-product-card/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SProductCard } from './s-product-card';
+export type { SProductCardBadgePlacement, SProductCardLinkProps, SProductCardOwnerState, SProductCardProps, SProductCardRootProps, SProductCardSlotProps, SProductCardSlots, SProductCardSwatch, SProductCardVariant, } from './s-product-card';
+export type {} from '../theme/component-augmentation';

package/dist/s-product-card/index.js

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