@solostylist/ui-kit 1.0.228 → 1.0.230

package/dist/s-moving-border/s-moving-border.js

@@ -3,19 +3,37 @@ import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Box as i } from "@mui/material";
 import { motion as a, useAnimationFrame as o, useMotionTemplate as s, useMotionValue as c, useTransform as l } from "framer-motion";
 //#region lib/s-moving-border/s-moving-border.tsx
-var u = 250, d = (e, t) => ({
-	position: "absolute",
-	left: "50%",
-	top: "50%",
-	width: `${e}px`,
-	height: `${e}px`,
-	transform: "translate(-50%, -50%)",
-	opacity: .5,
-	background: `radial-gradient(${t} 40%, transparent 60%)`,
-	filter: "blur(12px)",
-	pointerEvents: "none"
+var u = 250, d = 24, f = Array.from({ length: d }, (e, t) => {
+	let n = t / (d - 1);
+	return {
+		scale: 1 - n * .76,
+		opacity: .006 + n * .044
+	};
+}), p = ({ color: e, size: t }) => /* @__PURE__ */ n(i, {
+	sx: {
+		position: "absolute",
+		left: "50%",
+		top: "50%",
+		width: t,
+		height: t,
+		transform: "translate(-50%, -50%)",
+		pointerEvents: "none"
+	},
+	children: f.map(({ scale: r, opacity: a }) => {
+		let o = t * r, s = (t - o) / 2;
+		return /* @__PURE__ */ n(i, { sx: {
+			position: "absolute",
+			backgroundColor: e,
+			borderRadius: "50%",
+			height: o,
+			left: s,
+			opacity: a,
+			top: s,
+			width: o
+		} }, r);
+	})
 });
-function f({ children: i, duration: u, rx: d, ry: f, phase: p = 0 }) {
+function m({ children: i, duration: u, rx: d, ry: f, phase: p = 0 }) {
 	let m = e(null), h = c(0);
 	o((e) => {
 		let t = m.current?.getTotalLength();
@@ -53,73 +71,47 @@ function f({ children: i, duration: u, rx: d, ry: f, phase: p = 0 }) {
 		children: i
 	})] });
 }
-var p = ({ borderRadius: t, className: a, duration: o = 6e3, children: s, glowColor: c = "var(--s-palette-primary-main)", glowSize: l = u, height: p, padding: m, width: h, ...g }) => {
-	let _ = e(null);
-	return /* @__PURE__ */ r(i, {
-		className: a,
-		...g,
-		sx: [{
-			position: "relative",
-			overflow: "hidden",
-			height: p ?? "100%",
-			width: h ?? "100%",
-			padding: m ?? .125,
-			borderRadius: t,
-			backgroundColor: "transparent"
-		}, ...Array.isArray(g.sx) ? g.sx : [g.sx]],
-		children: [
-			/* @__PURE__ */ r(i, {
-				sx: {
-					position: "absolute",
-					top: 0,
-					left: 0,
-					right: 0,
-					bottom: 0
-				},
-				children: [/* @__PURE__ */ n(f, {
-					duration: o,
-					rx: "100%",
-					ry: "100%",
-					phase: 0,
-					children: /* @__PURE__ */ n(i, { sx: d(l, c) })
-				}), /* @__PURE__ */ n(f, {
-					duration: o,
-					rx: "100%",
-					ry: "100%",
-					phase: .5,
-					children: /* @__PURE__ */ n(i, { sx: d(l, c) })
-				})]
-			}),
-			/* @__PURE__ */ n(i, {
-				sx: {
-					position: "absolute",
-					pointerEvents: "none",
-					left: 0,
-					top: 0,
-					width: "100%",
-					height: "100%",
-					zIndex: 2
-				},
-				children: /* @__PURE__ */ n(i, {
-					ref: _,
-					sx: {
-						position: "absolute",
-						left: "50%",
-						top: "50%",
-						width: 120,
-						height: 120,
-						opacity: 0,
-						filter: "blur(16px)",
-						borderRadius: "50%",
-						transform: "translate(-50%, -50%)",
-						transition: "left 0.15s cubic-bezier(.4,2,.6,1), top 0.15s cubic-bezier(.4,2,.6,1), opacity 0.2s"
-					}
-				})
-			}),
-			s
-		]
-	});
-};
-p.displayName = "SMovingBorder";
+var h = ({ borderRadius: e, className: t, duration: a = 6e3, children: o, glowColor: s = "var(--s-palette-primary-main)", glowSize: c = u, height: l, padding: d, width: f, ...h }) => /* @__PURE__ */ r(i, {
+	className: t,
+	...h,
+	sx: [{
+		position: "relative",
+		overflow: "hidden",
+		height: l ?? "100%",
+		width: f ?? "100%",
+		padding: d ?? .125,
+		borderRadius: e,
+		backgroundColor: "transparent"
+	}, ...Array.isArray(h.sx) ? h.sx : [h.sx]],
+	children: [/* @__PURE__ */ r(i, {
+		sx: {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0
+		},
+		children: [/* @__PURE__ */ n(m, {
+			duration: a,
+			rx: "100%",
+			ry: "100%",
+			phase: 0,
+			children: /* @__PURE__ */ n(p, {
+				color: s,
+				size: c
+			})
+		}), /* @__PURE__ */ n(m, {
+			duration: a,
+			rx: "100%",
+			ry: "100%",
+			phase: .5,
+			children: /* @__PURE__ */ n(p, {
+				color: s,
+				size: c
+			})
+		})]
+	}), o]
+});
+h.displayName = "SMovingBorder";
 //#endregion
-export { p as SMovingBorder, p as default };
+export { h as SMovingBorder, h as default };

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

@@ -1,2 +1,3 @@
 export { default, default as SPagination } from './s-pagination';
 export type { SPaginationProps } from './s-pagination';
+export type { SPaginationColor, SPaginationSize } from './types';

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

@@ -1,16 +1,53 @@
 import { default as React } from 'react';
 import { PaginationProps } from '@mui/material';
+import { SPaginationColor, SPaginationSize } from './types';
+export type { SPaginationColor, SPaginationSize } from './types';
 /**
- * Props for the SPagination component, extending Material-UI's PaginationProps
+ * Props for SPagination. Web behavior is sourced from MUI Pagination; custom
+ * SoloStylist props stay local to the web package.
  */
-export interface SPaginationProps extends PaginationProps {
-    /** Whether the pagination is in a loading state - shows skeleton when true */
-    loading?: boolean;
-    /** Total number of pages - component returns empty fragment when 0 */
+export interface SPaginationProps extends Omit<PaginationProps, 'color' | 'count' | 'shape' | 'size' | 'variant'> {
+    /** Accessible label for the complete pagination control. */
+    accessibilityLabel?: string;
+    /** Number of always-visible pages at the beginning and end. */
+    boundaryCount?: number;
+    /** Total number of pages. The component is hidden when count is 0 or less. */
     count?: number;
+    /** Page selected initially when the component is uncontrolled. */
+    defaultPage?: number;
+    /** Whether the complete pagination control is disabled. */
+    disabled?: boolean;
+    /** Returns the accessible label for an item. */
+    getItemAriaLabel?: PaginationProps['getItemAriaLabel'];
+    /** Whether to hide the next-page button. */
+    hideNextButton?: boolean;
+    /** Whether to hide the previous-page button. */
+    hidePrevButton?: boolean;
+    /** Whether to show the pagination skeleton. */
+    loading?: boolean;
+    /** Callback fired when the page changes. */
+    onChange?: PaginationProps['onChange'];
+    /** Current page for controlled usage (1-indexed). */
+    page?: number;
+    /** Custom item renderer. */
+    renderItem?: PaginationProps['renderItem'];
+    /** Active-page color, using the same semantic palette as SButton. */
+    color?: SPaginationColor;
+    /** Shape of every pagination item. Defaults to the rounded SIconButton shape. */
+    shape?: 'circular' | 'rounded';
+    /** Whether to show the first-page button. */
+    showFirstButton?: boolean;
+    /** Whether to show the last-page button. */
+    showLastButton?: boolean;
+    /** Number of visible pages before and after the current page. */
+    siblingCount?: number;
+    /** Size of pagination items. */
+    size?: SPaginationSize;
+    /** Inactive-page visual variant. The active page always uses the contained SButton treatment. */
+    variant?: 'text' | 'outlined';
 }
 export declare const SPagination: {
-    ({ loading, count, ...props }: SPaginationProps): React.JSX.Element;
+    ({ loading, count, color, shape, size, variant, accessibilityLabel, sx, ...props }: SPaginationProps): React.JSX.Element;
     displayName: string;
 };
 export default SPagination;

package/dist/s-pagination/s-pagination.js

@@ -1,32 +1,50 @@
-import { SSkeleton as e } from "../s-skeleton/s-skeleton.js";
+import { paginationDimensions as e } from "./types.js";
+import { SSkeleton as t } from "../s-skeleton/s-skeleton.js";
 import "react";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Pagination as i, Stack as a, useMediaQuery as o, useTheme as s } from "@mui/material";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Pagination as a, Stack as o } from "@mui/material";
 //#region lib/s-pagination/s-pagination.tsx
-var c = ({ style: t }) => /* @__PURE__ */ r(a, {
-	direction: "row",
-	style: t,
-	sx: {
-		display: "inline-flex",
-		flexWrap: "wrap",
-		gap: 1
-	},
-	children: [
-		/* @__PURE__ */ n(e, { component: "icon-button" }),
-		/* @__PURE__ */ n(e, {
-			variant: "rounded",
-			width: 120
-		}),
-		/* @__PURE__ */ n(e, { component: "icon-button" })
-	]
-}), l = ({ loading: e, count: r = 0, ...a }) => {
-	let l = o(s().breakpoints.down("sm"));
-	return r === 0 ? /* @__PURE__ */ n(t, {}) : e ? /* @__PURE__ */ n(c, { style: a.style }) : /* @__PURE__ */ n(i, {
-		size: l ? "small" : "medium",
-		count: r,
-		...a
+var s = ({ size: n, style: a }) => {
+	let s = e[n];
+	return /* @__PURE__ */ i(o, {
+		direction: "row",
+		style: a,
+		sx: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: `${s.gap}px`
+		},
+		children: [
+			/* @__PURE__ */ r(t, {
+				variant: "rounded",
+				width: s.item,
+				height: s.item
+			}),
+			/* @__PURE__ */ r(t, {
+				variant: "rounded",
+				width: s.bar,
+				height: s.item
+			}),
+			/* @__PURE__ */ r(t, {
+				variant: "rounded",
+				width: s.item,
+				height: s.item
+			})
+		]
 	});
-};
-l.displayName = "SPagination";
+}, c = ({ loading: e = !1, count: t = 0, color: i = "primary", shape: o = "rounded", size: c = "medium", variant: l = "text", accessibilityLabel: u = "pagination navigation", sx: d, ...f }) => t <= 0 ? /* @__PURE__ */ r(n, {}) : e ? /* @__PURE__ */ r(s, {
+	size: c,
+	style: f.style
+}) : /* @__PURE__ */ r(a, {
+	count: t,
+	"aria-label": u,
+	color: i,
+	shape: o,
+	size: c,
+	variant: l,
+	sx: d,
+	...f
+});
+c.displayName = "SPagination";
 //#endregion
-export { l as SPagination, l as default };
+export { c as SPagination, c as default };

package/dist/s-pagination/types.d.ts

@@ -0,0 +1,9 @@
+import { PaginationProps } from '@mui/material';
+export type SPaginationSize = NonNullable<PaginationProps['size']>;
+export type SPaginationColor = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+export declare const paginationColors: readonly ["primary", "secondary", "success", "error", "info", "warning"];
+export declare const paginationDimensions: Record<SPaginationSize, {
+    item: number;
+    gap: number;
+    bar: number;
+}>;

package/dist/s-pagination/types.js

@@ -0,0 +1,27 @@
+//#region lib/s-pagination/types.ts
+var e = [
+	"primary",
+	"secondary",
+	"success",
+	"error",
+	"info",
+	"warning"
+], t = {
+	small: {
+		item: 26,
+		gap: 2,
+		bar: 90
+	},
+	medium: {
+		item: 32,
+		gap: 6,
+		bar: 120
+	},
+	large: {
+		item: 40,
+		gap: 6,
+		bar: 150
+	}
+};
+//#endregion
+export { e as paginationColors, t as paginationDimensions };

package/dist/s-review/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-review-CRnakHRo.js";
+import { t as e } from "../s-review-CvTVBxTZ.js";
 export { e as SReview, e as default };

package/dist/s-review/s-review.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-review-CRnakHRo.js";
+import { t as e } from "../s-review-CvTVBxTZ.js";
 export { e as SReview, e as default };

package/dist/{s-review-CRnakHRo.js → s-review-CvTVBxTZ.js}

@@ -39,7 +39,7 @@ var _ = t(/* @__PURE__ */ u("path", { d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02
 			spacing: 2,
 			sx: { alignItems: "flex-start" },
 			children: [/* @__PURE__ */ u(i, {
-				component: "rounded-avatar",
+				variant: "circular",
 				width: A,
 				height: A
 			}), /* @__PURE__ */ d(f, {
@@ -84,12 +84,12 @@ var _ = t(/* @__PURE__ */ u("path", { d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02
 								height: 16,
 								sx: { mr: 2 }
 							}),
-							/* @__PURE__ */ u(i, { component: "icon-button" }),
+							/* @__PURE__ */ u(i, { preset: "icon-button" }),
 							/* @__PURE__ */ u(i, {
 								width: 20,
 								height: 16
 							}),
-							/* @__PURE__ */ u(i, { component: "icon-button" }),
+							/* @__PURE__ */ u(i, { preset: "icon-button" }),
 							/* @__PURE__ */ u(i, {
 								width: 20,
 								height: 16

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

@@ -1,2 +1,2 @@
 export { default, default as SSkeleton } from './s-skeleton';
-export type { SSkeletonProps } from './s-skeleton';
+export type { SSkeletonAnimation, SSkeletonCustomProps, SSkeletonPreset, SSkeletonPresetProps, SSkeletonProps, SSkeletonVariant, } from './s-skeleton';

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

@@ -1,22 +1,38 @@
 import { default as React } from 'react';
 import { SkeletonProps } from '@mui/material';
-/**
- * Props interface for SSkeleton component
- */
-export interface SSkeletonProps extends Omit<SkeletonProps, 'variant' | 'height' | 'width' | 'component'> {
+export type SSkeletonVariant = 'circular' | 'rectangular' | 'rounded' | 'text';
+export type SSkeletonPreset = 'avatar' | 'button' | 'checkbox' | 'icon-button';
+export type SSkeletonAnimation = 'pulse' | 'wave' | false;
+type SSkeletonBaseProps = Omit<SkeletonProps, 'animation' | 'component' | 'height' | 'variant' | 'width'> & {
+    /** Loading animation. Set to false to disable animation. */
+    animation?: SSkeletonAnimation;
+};
+export type SSkeletonCustomProps = SSkeletonBaseProps & {
+    /** Pre-defined skeleton preset. Cannot be combined with custom shape/size props. */
+    preset?: never;
     /** Visual variant of the skeleton */
-    variant?: 'circular' | 'rectangular' | 'rounded' | 'text';
+    variant?: SSkeletonVariant;
     /** Height of the skeleton (number for px, string for CSS units) */
     height?: number | string;
     /** Width of the skeleton (number for px, string for CSS units) */
     width?: number | string;
     /** Font size for text variant skeletons */
     fontSize?: number | string;
-    /** Pre-defined component preset for common UI elements */
-    component?: 'button' | 'checkbox' | 'radio-button' | 'avatar' | 'rounded-avatar' | 'icon-button' | 'typography' | 'title-typography';
-}
+};
+export type SSkeletonPresetProps = SSkeletonBaseProps & {
+    /** Pre-defined skeleton preset for common UI elements */
+    preset: SSkeletonPreset;
+    variant?: never;
+    height?: never;
+    width?: never;
+    fontSize?: never;
+};
+/**
+ * Props interface for SSkeleton component
+ */
+export type SSkeletonProps = SSkeletonCustomProps | SSkeletonPresetProps;
 export declare const SSkeleton: {
-    ({ variant, width, height, fontSize, component, ...props }: SSkeletonProps): React.JSX.Element;
+    (props: SSkeletonProps): React.JSX.Element;
     displayName: string;
 };
 export default SSkeleton;

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

@@ -1,70 +1,66 @@
 import "react";
 import { jsx as e } from "react/jsx-runtime";
-import { Skeleton as t } from "@mui/material";
+import { Skeleton as t, useTheme as n } from "@mui/material";
 //#region lib/s-skeleton/s-skeleton.tsx
-var n = ({ variant: n = "text", width: r = "100%", height: i = 32, fontSize: a = "16px", component: o, ...s }) => {
-	switch (o) {
-		case "button": return /* @__PURE__ */ e(t, {
-			height: 32,
-			variant: "rounded",
-			width: r,
-			...s
-		});
-		case "checkbox": return /* @__PURE__ */ e(t, {
-			height: 24,
-			variant: "rounded",
-			width: 24,
-			...s
-		});
-		case "radio-button": return /* @__PURE__ */ e(t, {
-			height: 24,
-			variant: "circular",
-			width: 24,
-			...s
-		});
-		case "avatar": return /* @__PURE__ */ e(t, {
-			height: 54,
-			variant: "rectangular",
-			width: 54,
-			...s
-		});
-		case "rounded-avatar": return /* @__PURE__ */ e(t, {
-			height: 48,
-			variant: "circular",
-			width: 48,
-			...s
-		});
-		case "icon-button": return /* @__PURE__ */ e(t, {
-			height: 32,
-			variant: "circular",
-			width: 32,
-			...s
-		});
-		case "typography": return /* @__PURE__ */ e(t, {
-			sx: { fontSize: a },
-			variant: "text",
-			width: "100%",
-			...s
-		});
-		case "title-typography": return /* @__PURE__ */ e(t, {
-			sx: { fontSize: a },
-			variant: "text",
-			width: 200,
-			...s
-		});
-		default: return n === "text" ? /* @__PURE__ */ e(t, {
-			sx: { fontSize: a },
-			variant: n,
-			width: r,
-			...s
-		}) : /* @__PURE__ */ e(t, {
-			height: i,
-			variant: n,
-			width: r,
-			...s
+var r = {
+	avatar: {
+		height: 40,
+		variant: "circular",
+		width: 40
+	},
+	button: {
+		height: 40,
+		variant: "rounded",
+		width: 100
+	},
+	checkbox: {
+		borderRadius: "sm",
+		height: 20,
+		variant: "rounded",
+		width: 20
+	},
+	"icon-button": {
+		height: 32,
+		variant: "rounded",
+		width: 32
+	}
+}, i = ({ fontSize: n = "16px", height: r, presetBorderRadius: i, style: a, variant: o, width: s, ...c }) => {
+	let l = i === void 0 ? a : {
+		...a,
+		borderRadius: i
+	};
+	return o === "text" ? /* @__PURE__ */ e(t, {
+		style: l,
+		sx: { fontSize: n },
+		variant: o,
+		width: s,
+		...c
+	}) : /* @__PURE__ */ e(t, {
+		height: r,
+		style: l,
+		variant: o,
+		width: s,
+		...c
+	});
+}, a = (e) => {
+	let t = n();
+	if (e.preset) {
+		let { preset: n, ...a } = e, { borderRadius: o, ...s } = r[n];
+		return i({
+			...a,
+			...s,
+			presetBorderRadius: o ? t.radius[o] : void 0
 		});
 	}
+	let { fontSize: a = "16px", height: o = 32, variant: s = "text", width: c = "100%", ...l } = e;
+	return i({
+		...l,
+		fontSize: a,
+		height: o,
+		variant: s,
+		width: c
+	});
 };
-n.displayName = "SSkeleton";
+a.displayName = "SSkeleton";
 //#endregion
-export { n as SSkeleton, n as default };
+export { a as SSkeleton, a as default };

package/dist/s-text-editor/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../s-text-editor-toolbar-BEFVwZ-B.js";
+import { t as e } from "../s-text-editor-toolbar-ChtNCg2A.js";
 import { STextEditor as t } from "./s-text-editor.js";
 export { t as STextEditor, t as default, e as STextEditorToolbar };

package/dist/s-text-editor/s-text-editor-toolbar.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-text-editor-toolbar-BEFVwZ-B.js";
+import { t as e } from "../s-text-editor-toolbar-ChtNCg2A.js";
 export { e as STextEditorToolbar };

package/dist/s-text-editor/s-text-editor.js

@@ -1,6 +1,6 @@
 import { tint as e } from "../theme/utils.js";
 import { t } from "../Box-BlmynALm.js";
-import { t as n } from "../s-text-editor-toolbar-BEFVwZ-B.js";
+import { t as n } from "../s-text-editor-toolbar-ChtNCg2A.js";
 import * as r from "react";
 import { forwardRef as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";