@solostylist/ui-kit 1.0.228 → 1.0.229

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/s-pagination.js

@@ -12,12 +12,12 @@ var c = ({ style: t }) => /* @__PURE__ */ r(a, {
 		gap: 1
 	},
 	children: [
-		/* @__PURE__ */ n(e, { component: "icon-button" }),
+		/* @__PURE__ */ n(e, { preset: "icon-button" }),
 		/* @__PURE__ */ n(e, {
 			variant: "rounded",
 			width: 120
 		}),
-		/* @__PURE__ */ n(e, { component: "icon-button" })
+		/* @__PURE__ */ n(e, { preset: "icon-button" })
 	]
 }), l = ({ loading: e, count: r = 0, ...a }) => {
 	let l = o(s().breakpoints.down("sm"));

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";