@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-pixel-reveal/s-pixel-reveal.d.ts

@@ -1,8 +1,9 @@
 import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
 /**
  * Props interface for SPixelReveal component
  */
-export interface SPixelRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface SPixelRevealProps extends Omit<BoxProps, 'children' | 'component'> {
     /** Spacing between pixels in the grid */
     gap?: number;
     /** Animation speed multiplier (0-100) */
@@ -20,5 +21,12 @@ export interface SPixelRevealProps extends Omit<React.HTMLAttributes<HTMLDivElem
     /** If true, all pixels appear immediately without wave/delay effect */
     instant?: boolean;
 }
-export declare const SPixelReveal: React.ForwardRefExoticComponent<SPixelRevealProps & React.RefAttributes<HTMLDivElement>>;
+export interface SPixelRevealOwnerState extends SPixelRevealProps {
+    gap: number;
+    hasImage: boolean;
+    instant: boolean;
+    loading: boolean;
+    speed: number;
+}
+export declare const SPixelReveal: React.ForwardRefExoticComponent<Omit<SPixelRevealProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SPixelReveal;

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

@@ -1,8 +1,11 @@
-import { forwardRef as e, useCallback as t, useEffect as n, useRef as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useTheme as o } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveCanvasColor as t } from "../utils/canvas-color.js";
+import { forwardRef as n, useCallback as r, useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Box as c, styled as l, useMediaQuery as u, useTheme as d, useThemeProps as f } from "@mui/material";
+import { useForkRef as p } from "@mui/material/utils";
 //#region lib/s-pixel-reveal/s-pixel-reveal.tsx
-var s = class {
+var m = class {
 	x;
 	y;
 	color;
@@ -41,111 +44,146 @@ var s = class {
 		let n = (t - this.size) * .5;
 		e.fillRect(this.x + n, this.y + n, this.size, this.size);
 	}
-};
-function c({ x: e, y: t, gap: n, logicalWidth: r, logicalHeight: i, instant: a, reducedMotion: o, getDistanceSq: s }) {
+}, h = l(c, {
+	name: "SPixelReveal",
+	slot: "Root"
+})({});
+function g({ x: e, y: t, gap: n, logicalWidth: r, logicalHeight: i, instant: a, reducedMotion: o, getDistanceSq: s }) {
 	if (a || o) return 0;
 	let c = e + n / 2, l = t + n / 2, u = r / 2, d = i / 2;
 	return Math.sqrt(s(c, l, u, d));
 }
-function l(e, t) {
-	let n = /^var\((--[^),\s]+)\s*(?:,\s*([^)]+))?\)$/.exec(e.trim());
-	return n && (getComputedStyle(t).getPropertyValue(n[1]).trim() || n[2]?.trim()) || e;
-}
-function u(e, t, n) {
+function _(e, t, n) {
 	e.has(t) || e.set(t, []), e.get(t)?.push(n);
 }
-var d = e(({ gap: e = 5, speed: d = 100, colors: f, loading: p = !0, src: m, alt: h = "", style: g, children: _, instant: v = !0, ...y }, b) => {
-	let x = o(), S = r(null), C = r(null), w = r(null), T = r(/* @__PURE__ */ new Map()), E = r(null), D = r(1e3 / 60), O = r(0), k = r(!1);
-	n(() => {
-		k.current = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1;
-	}, []);
-	let A = t((e, t, n, r) => {
+var v = n(function(n, c) {
+	let l = f({
+		props: n,
+		name: "SPixelReveal"
+	}), { alt: v = "", children: y, colors: b, gap: x = 5, instant: S = !0, loading: C = !0, speed: w = 100, src: T, style: E, sx: D, ...O } = l, k = Number.isFinite(x) && x > 0 ? x : 5, A = d(), j = a(null), M = a(null), N = a(null), P = a(/* @__PURE__ */ new Map()), F = a(null), I = a(null), L = a(1e3 / 60), R = a(0), z = a(C), B = u("(prefers-reduced-motion: reduce)", { noSsr: !0 }), V = p(M, c), H = {
+		...l,
+		alt: v,
+		gap: k,
+		hasImage: !!T,
+		instant: S,
+		loading: C,
+		speed: w,
+		src: T
+	};
+	z.current = C;
+	let U = r((e, t, n, r) => {
 		let i = e - n, a = t - r;
 		return i * i + a * a;
-	}, []), j = t((t, n, r) => {
-		E.current && cancelAnimationFrame(E.current), O.current = performance.now();
-		let i = () => {
-			E.current = requestAnimationFrame(i);
-			let a = performance.now(), o = a - O.current;
-			if (o < D.current) return;
-			O.current = a - o % D.current, t.clearRect(0, 0, n, r);
-			let s = !1;
-			T.current.forEach((n, r) => {
-				t.fillStyle = r;
-				for (let r of n) {
-					if (p) {
-						r.updateWhileLoading(), r.draw(t, e), s = !0;
+	}, []), W = r((e, t, n) => {
+		F.current !== null && cancelAnimationFrame(F.current), R.current = performance.now();
+		let r = () => {
+			F.current = requestAnimationFrame(r);
+			let i = performance.now(), a = i - R.current;
+			if (a < L.current) return;
+			R.current = i - a % L.current, e.clearRect(0, 0, t, n);
+			let o = !1;
+			P.current.forEach((t, n) => {
+				e.fillStyle = n;
+				for (let n of t) {
+					if (z.current) {
+						n.updateWhileLoading(), n.draw(e, k), o = !0;
 						continue;
 					}
-					r.updateWhileIdle() && (r.draw(t, e), s = !0);
+					n.updateWhileIdle() && (n.draw(e, k), o = !0);
 				}
-			}), !p && !s && E.current && (cancelAnimationFrame(E.current), E.current = null);
+			}), !z.current && !o && F.current !== null && (cancelAnimationFrame(F.current), F.current = null);
 		};
-		i();
-	}, [p, e]), M = t(() => {
-		let t = S.current, n = t?.getContext("2d");
-		if (!t || !n) return;
-		T.current = /* @__PURE__ */ new Map();
-		let r = k.current ? 0 : Math.max(0, Math.min(100, d)) * .001, i = (x.vars ?? x).palette, a = (f ?? [
+		r();
+	}, [k]), G = r((e, t, n) => {
+		e.clearRect(0, 0, t, n), z.current && P.current.forEach((t, n) => {
+			e.fillStyle = n;
+			for (let n of t) n.size = n.maxSize, n.draw(e, k);
+		});
+	}, [k]), K = r(() => {
+		let e = j.current, n = e?.getContext("2d");
+		if (!e || !n) return;
+		P.current = /* @__PURE__ */ new Map();
+		let r = Math.max(0, Math.min(100, w)) * .001, i = (A.vars ?? A).palette, a = (b ?? [
 			i.primary[400],
 			i.primary[500],
 			i.primary[600]
-		]).map((e) => l(e, t)), o = window.devicePixelRatio ?? 1, p = t.width / o, m = t.height / o, h = .5, g = (p + m) * .01, _ = p % e / 2, y = m % e / 2;
-		for (let t = _; t < p; t += e) for (let n = y; n < m; n += e) {
-			let i = a[Math.floor(Math.random() * a.length)], o = c({
-				x: t,
-				y: n,
-				gap: e,
-				logicalWidth: p,
-				logicalHeight: m,
-				instant: v,
-				reducedMotion: k.current,
-				getDistanceSq: A
-			}), l = Math.random() * 4 + g, d = Math.random() * (2 - h) + h;
-			u(T.current, i, new s(t, n, i, r, o, l, d));
+		]).map((n) => t(n, e)), o = window.devicePixelRatio ?? 1, s = e.width / o, c = e.height / o, l = .5, u = (s + c) * .01, d = s % k / 2, f = c % k / 2;
+		for (let e = d; e < s; e += k) for (let t = f; t < c; t += k) {
+			let n = a[Math.floor(Math.random() * a.length)], i = g({
+				x: e,
+				y: t,
+				gap: k,
+				logicalWidth: s,
+				logicalHeight: c,
+				instant: S,
+				reducedMotion: B,
+				getDistanceSq: U
+			}), o = Math.random() * 4 + u, d = Math.random() * (2 - l) + l;
+			_(P.current, n, new m(e, t, n, r, i, o, d));
 		}
-		j(n, p, m);
+		if (B) {
+			G(n, s, c);
+			return;
+		}
+		W(n, s, c);
 	}, [
-		e,
-		d,
-		f,
-		x,
-		v,
+		k,
+		w,
+		b,
 		A,
-		j
-	]), N = t(() => {
-		let e = S.current, t = C.current, n = e?.getContext("2d");
+		S,
+		B,
+		U,
+		G,
+		W
+	]), q = r(() => {
+		let e = j.current, t = M.current, n = e?.getContext("2d");
 		if (!e || !t || !n) return;
 		let r = t.getBoundingClientRect();
 		if (r.width === 0 || r.height === 0) return;
 		let i = Math.floor(r.width), a = Math.floor(r.height), o = window.devicePixelRatio ?? 1;
-		e.width = i * o, e.height = a * o, e.style.width = `${i}px`, e.style.height = `${a}px`, n.setTransform(1, 0, 0, 1, 0, 0), n.scale(o, o), M();
-	}, [M]);
-	return n(() => {
-		N();
+		e.width = i * o, e.height = a * o, e.style.width = `${i}px`, e.style.height = `${a}px`, n.setTransform(1, 0, 0, 1, 0, 0), n.scale(o, o), K();
+	}, [K]);
+	return i(() => {
+		q();
 		let e = new ResizeObserver(() => {
-			requestAnimationFrame(() => N());
+			I.current === null && (I.current = requestAnimationFrame(() => {
+				I.current = null, q();
+			}));
 		});
-		return C.current && e.observe(C.current), () => {
-			e.disconnect(), E.current && cancelAnimationFrame(E.current);
+		return M.current && e.observe(M.current), () => {
+			e.disconnect(), I.current !== null && (cancelAnimationFrame(I.current), I.current = null), F.current !== null && (cancelAnimationFrame(F.current), F.current = null);
 		};
-	}, [N]), /* @__PURE__ */ a("div", {
-		ref: (e) => {
-			C.current = e, typeof b == "function" ? b(e) : b && (b.current = e);
-		},
-		style: {
-			position: "relative",
-			width: "100%",
+	}, [q]), i(() => {
+		let e = j.current, t = e?.getContext("2d");
+		if (!e || !t || P.current.size === 0) return;
+		let n = window.devicePixelRatio ?? 1, r = e.width / n, i = e.height / n;
+		if (B) {
+			F.current !== null && (cancelAnimationFrame(F.current), F.current = null), G(t, r, i);
+			return;
+		}
+		W(t, r, i);
+	}, [
+		C,
+		B,
+		G,
+		W
+	]), /* @__PURE__ */ s(h, {
+		...O,
+		ref: V,
+		ownerState: H,
+		style: E,
+		sx: [{
 			height: "100%",
 			overflow: "hidden",
-			...g
-		},
-		...y,
+			position: "relative",
+			width: "100%"
+		}, ...e(D)],
 		children: [
-			m && /* @__PURE__ */ i("img", {
-				ref: w,
-				src: m,
-				alt: h,
+			T && /* @__PURE__ */ o("img", {
+				ref: N,
+				src: T,
+				alt: v,
 				style: {
 					position: "absolute",
 					inset: 0,
@@ -155,9 +193,9 @@ var d = e(({ gap: e = 5, speed: d = 100, colors: f, loading: p = !0, src: m, alt
 					display: "block"
 				}
 			}),
-			_,
-			/* @__PURE__ */ i("canvas", {
-				ref: S,
+			y,
+			/* @__PURE__ */ o("canvas", {
+				ref: j,
 				style: {
 					position: "absolute",
 					inset: 0,
@@ -171,6 +209,6 @@ var d = e(({ gap: e = 5, speed: d = 100, colors: f, loading: p = !0, src: m, alt
 		]
 	});
 });
-d.displayName = "SPixelReveal";
+v.displayName = "SPixelReveal";
 //#endregion
-export { d as SPixelReveal, d as default };
+export { v as SPixelReveal, v as default };

package/dist/s-quantity-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SQuantityInput } from './s-quantity-input';
+export type { SQuantityInputColor, SQuantityInputOwnerState, SQuantityInputProps, SQuantityInputSize, SQuantityInputVariant, } from './s-quantity-input';
+export type {} from '../theme/component-augmentation';

package/dist/s-quantity-input/index.js

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

package/dist/s-quantity-input/s-quantity-input.d.ts

@@ -0,0 +1,114 @@
+import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
+/**
+ * Theme color used to tint the increment/decrement controls. `default` renders
+ * untinted controls (primary text color); its contained fill uses the neutral ramp.
+ */
+export type SQuantityInputColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+/**
+ * Visual style of the control.
+ * - `outlined` (default): a bordered pill with tinted, transparent controls.
+ * - `contained`: solid, filled controls flanking the value.
+ * - `text`: free-standing ghost controls with the value in between.
+ */
+export type SQuantityInputVariant = 'outlined' | 'contained' | 'text';
+/** Size of the control */
+export type SQuantityInputSize = 'small' | 'medium' | 'large';
+/**
+ * Props interface for SQuantityInput component
+ */
+type SQuantityInputAccessibleName = {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+};
+export type SQuantityInputProps = Omit<BoxProps, 'children' | 'color' | 'component' | 'defaultValue' | 'onChange' | 'size'> & SQuantityInputAccessibleName & {
+    /** Controlled value. Omit to use `defaultValue` (uncontrolled) */
+    value?: number;
+    /** Initial value when uncontrolled. Defaults to `min` */
+    defaultValue?: number;
+    /** Callback fired with the next value when the user increases or decreases */
+    onChange?: (event: React.SyntheticEvent, value: number) => void;
+    /** Minimum value (inclusive) */
+    min?: number;
+    /** Maximum value (inclusive). Omit for no upper bound */
+    max?: number;
+    /** Increment/decrement amount */
+    step?: number;
+    /** Theme color of the controls */
+    color?: SQuantityInputColor;
+    /** Visual style of the control */
+    variant?: SQuantityInputVariant;
+    /** Size of the control */
+    size?: SQuantityInputSize;
+    /** Whether the value can be typed directly */
+    editable?: boolean;
+    /** Whether the whole control is disabled */
+    disabled?: boolean;
+};
+export type SQuantityInputOwnerState = SQuantityInputProps & {
+    color: SQuantityInputColor;
+    disabled: boolean;
+    editable: boolean;
+    min: number;
+    size: SQuantityInputSize;
+    step: number;
+    value: number;
+    variant: SQuantityInputVariant;
+};
+export declare const SQuantityInput: React.ForwardRefExoticComponent<(Omit<Omit<BoxProps, "color" | "onChange" | "children" | "defaultValue" | "component" | "size"> & {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+} & {
+    /** Controlled value. Omit to use `defaultValue` (uncontrolled) */
+    value?: number;
+    /** Initial value when uncontrolled. Defaults to `min` */
+    defaultValue?: number;
+    /** Callback fired with the next value when the user increases or decreases */
+    onChange?: (event: React.SyntheticEvent, value: number) => void;
+    /** Minimum value (inclusive) */
+    min?: number;
+    /** Maximum value (inclusive). Omit for no upper bound */
+    max?: number;
+    /** Increment/decrement amount */
+    step?: number;
+    /** Theme color of the controls */
+    color?: SQuantityInputColor;
+    /** Visual style of the control */
+    variant?: SQuantityInputVariant;
+    /** Size of the control */
+    size?: SQuantityInputSize;
+    /** Whether the value can be typed directly */
+    editable?: boolean;
+    /** Whether the whole control is disabled */
+    disabled?: boolean;
+}, "ref"> | Omit<Omit<BoxProps, "color" | "onChange" | "children" | "defaultValue" | "component" | "size"> & {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+} & {
+    /** Controlled value. Omit to use `defaultValue` (uncontrolled) */
+    value?: number;
+    /** Initial value when uncontrolled. Defaults to `min` */
+    defaultValue?: number;
+    /** Callback fired with the next value when the user increases or decreases */
+    onChange?: (event: React.SyntheticEvent, value: number) => void;
+    /** Minimum value (inclusive) */
+    min?: number;
+    /** Maximum value (inclusive). Omit for no upper bound */
+    max?: number;
+    /** Increment/decrement amount */
+    step?: number;
+    /** Theme color of the controls */
+    color?: SQuantityInputColor;
+    /** Visual style of the control */
+    variant?: SQuantityInputVariant;
+    /** Size of the control */
+    size?: SQuantityInputSize;
+    /** Whether the value can be typed directly */
+    editable?: boolean;
+    /** Whether the whole control is disabled */
+    disabled?: boolean;
+}, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export default SQuantityInput;

package/dist/s-quantity-input/s-quantity-input.js

@@ -0,0 +1,246 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { SIconButton as t } from "../s-icon-button/s-icon-button.js";
+import { forwardRef as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
+import { useControlled as u } from "@mui/material/utils";
+import d from "@mui/icons-material/Add";
+import f from "@mui/icons-material/Remove";
+//#region lib/s-quantity-input/s-quantity-input.tsx
+var p = {
+	small: {
+		height: 32,
+		iconButton: "small",
+		valueMinWidth: 28,
+		typography: "body2"
+	},
+	medium: {
+		height: 40,
+		iconButton: "medium",
+		valueMinWidth: 36,
+		typography: "body1"
+	},
+	large: {
+		height: 48,
+		iconButton: "large",
+		valueMinWidth: 44,
+		typography: "body1"
+	}
+}, m = (e, t, n) => {
+	let r = Math.max(e, t);
+	return n == null ? r : Math.min(r, n);
+}, h = c(o, {
+	name: "SQuantityInput",
+	slot: "Root"
+})({}), g = n((n, c) => {
+	let g = l({
+		props: n,
+		name: "SQuantityInput"
+	}), { value: _, defaultValue: v, onChange: y, min: b = 0, max: x, step: S = 1, color: C = "default", variant: w = "outlined", size: T = "medium", editable: E = !1, disabled: D = !1, "aria-label": O, "aria-labelledby": k, onKeyDown: A, role: j = "spinbutton", sx: M, tabIndex: N = D ? -1 : 0, ...P } = g, F = p[T], [I, L] = u({
+		controlled: _,
+		default: m(v ?? b, b, x),
+		name: "SQuantityInput",
+		state: "value"
+	}), R = {
+		...g,
+		color: C,
+		disabled: D,
+		editable: E,
+		min: b,
+		size: T,
+		step: S,
+		value: I,
+		variant: w
+	}, z = (e, t) => {
+		let n = m(t, b, x);
+		n !== I && (L(n), y?.(e, n));
+	}, B = D || I <= b, V = D || x != null && I >= x, H = w === "contained", U = w === "outlined", W = x == null ? null : String(x).length >= String(b).length ? String(x) : String(b), G = {
+		alignSelf: "stretch",
+		height: "auto",
+		width: F.height,
+		borderRadius: 0
+	}, K = { "&.Mui-disabled": { opacity: .5 } }, q = (e) => {
+		if (A?.(e), e.defaultPrevented || D) return;
+		let t = e.target.tagName === "INPUT";
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault(), z(e, I + S);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), z(e, I - S);
+				break;
+			case "ArrowRight":
+				if (t) break;
+				e.preventDefault(), z(e, I + S);
+				break;
+			case "ArrowLeft":
+				if (t) break;
+				e.preventDefault(), z(e, I - S);
+				break;
+			case "Home":
+				if (t) break;
+				e.preventDefault(), z(e, b);
+				break;
+			case "End":
+				if (t || x == null) break;
+				e.preventDefault(), z(e, x);
+				break;
+			default: break;
+		}
+	}, J = /* @__PURE__ */ i(o, {
+		component: "input",
+		inputMode: "numeric",
+		value: String(I),
+		disabled: D,
+		role: j,
+		"aria-label": O,
+		"aria-labelledby": k,
+		"aria-valuenow": I,
+		"aria-valuemin": b,
+		"aria-valuemax": x,
+		"aria-disabled": D || void 0,
+		tabIndex: N,
+		onChange: (e) => {
+			let t = e.target.value, n = parseInt(t.replace(/[^0-9-]/g, ""), 10);
+			Number.isNaN(n) ? (t === "" || t === "-") && z(e, b) : z(e, n);
+		},
+		onFocus: (e) => e.target.select(),
+		sx: {
+			border: 0,
+			outline: "none",
+			p: 0,
+			background: "transparent",
+			font: "inherit",
+			color: "inherit",
+			WebkitTextFillColor: "currentcolor",
+			textAlign: "center",
+			fontVariantNumeric: "tabular-nums",
+			...W == null ? {
+				minWidth: "1ch",
+				width: `${String(I).length || 1}ch`
+			} : {
+				position: "absolute",
+				inset: 0,
+				width: "100%"
+			}
+		}
+	}), Y = (e) => {
+		let t = C === "default" ? (e.vars ?? e).palette.grey : (e.vars ?? e).palette[C];
+		return {
+			backgroundColor: t[800],
+			color: t[50],
+			"&:hover": {
+				backgroundColor: t[900],
+				color: t[100]
+			},
+			"&:active": { backgroundColor: t[900] },
+			"&.Mui-disabled": {
+				backgroundColor: t[800],
+				color: t[50],
+				opacity: .5
+			},
+			...e.applyStyles("dark", {
+				color: t[100],
+				"&:hover": { color: t[50] },
+				"&.Mui-disabled": { color: t[100] }
+			})
+		};
+	};
+	return /* @__PURE__ */ a(h, {
+		...P,
+		ref: c,
+		ownerState: R,
+		role: E ? void 0 : j,
+		"aria-label": E ? void 0 : O,
+		"aria-labelledby": E ? void 0 : k,
+		"aria-valuenow": E ? void 0 : I,
+		"aria-valuemin": E ? void 0 : b,
+		"aria-valuemax": E ? void 0 : x,
+		"aria-disabled": E ? void 0 : D || void 0,
+		tabIndex: E ? void 0 : N,
+		onKeyDown: q,
+		sx: [(e) => ({
+			display: "inline-flex",
+			alignItems: "center",
+			height: F.height,
+			borderRadius: `${e.shape.borderRadius}px`,
+			outline: "none",
+			[E ? "&:has(input:focus-visible)" : "&:focus-visible"]: {
+				outline: "2px solid",
+				outlineColor: (e.vars ?? e).palette.primary[800],
+				outlineOffset: 2
+			},
+			...U ? {
+				border: "1px solid",
+				borderColor: (e.vars ?? e).palette.divider,
+				overflow: "hidden"
+			} : { gap: 1 },
+			...D ? { opacity: .5 } : {}
+		}), ...e(M)],
+		children: [
+			/* @__PURE__ */ i(t, {
+				"aria-label": "Decrease",
+				size: F.iconButton,
+				color: H ? void 0 : C,
+				disabled: B,
+				sx: H ? Y : U ? [G, K] : K,
+				onClick: (e) => z(e, I - S),
+				children: /* @__PURE__ */ i(f, {})
+			}),
+			U && /* @__PURE__ */ i(o, { sx: {
+				width: "1px",
+				alignSelf: "stretch",
+				bgcolor: "divider"
+			} }),
+			/* @__PURE__ */ i(s, {
+				component: "span",
+				variant: F.typography,
+				sx: {
+					position: "relative",
+					minWidth: F.valueMinWidth,
+					px: 1,
+					alignSelf: "stretch",
+					display: "inline-flex",
+					alignItems: "center",
+					justifyContent: "center",
+					fontWeight: 500,
+					color: "text.primary",
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: W == null ? E ? J : I : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(o, {
+					component: "span",
+					"aria-hidden": !0,
+					sx: { visibility: "hidden" },
+					children: W
+				}), E ? J : /* @__PURE__ */ i(o, {
+					component: "span",
+					sx: {
+						position: "absolute",
+						inset: 0,
+						display: "inline-flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: I
+				})] })
+			}),
+			U && /* @__PURE__ */ i(o, { sx: {
+				width: "1px",
+				alignSelf: "stretch",
+				bgcolor: "divider"
+			} }),
+			/* @__PURE__ */ i(t, {
+				"aria-label": "Increase",
+				size: F.iconButton,
+				color: H ? void 0 : C,
+				disabled: V,
+				sx: H ? Y : U ? [G, K] : K,
+				onClick: (e) => z(e, I + S),
+				children: /* @__PURE__ */ i(d, {})
+			})
+		]
+	});
+});
+g.displayName = "SQuantityInput";
+//#endregion
+export { g as SQuantityInput, g as default };

package/dist/s-radial-pulse-animate/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SRadialPulseAnimate } from './s-radial-pulse-animate';
-export type { SRadialPulseAnimateProps } from './s-radial-pulse-animate';
+export type { SRadialPulseAnimateOwnerState, SRadialPulseAnimateProps } from './s-radial-pulse-animate';
+export type {} from '../theme/component-augmentation';