@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -1,73 +1,120 @@
-import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Box as s, Link as c, Tooltip as l, Typography as u } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import * as t from "react";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Box as l, Link as u, Tooltip as d, Typography as f, styled as p, useThemeProps as m } from "@mui/material";
+import h from "@mui/utils/appendOwnerState";
 //#region lib/s-text-truncation/s-text-truncation.tsx
-var d = ({ text: d = "", variant: f = "expandable", lines: p = 3 }) => {
-	let [m, h] = r(!1), [g, _] = r(!1), [v, y] = r(d), b = n(null), x = n(null), S = e(() => {
-		let e = b.current;
-		if (!e || !d) {
-			_(!1), y(d);
+var g = p(l, {
+	name: "STextTruncation",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function _(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function v(e) {
+	return e ? Object.fromEntries(Object.entries(e).filter(([e]) => e === "children" || e === "component" || e === "id" || e === "ref" || e === "role" || e === "tabIndex" || e === "title" || e.startsWith("aria-") || e.startsWith("data-") ? !1 : !/^on[A-Z]/.test(e))) : {};
+}
+var y = t.forwardRef(function(l, p) {
+	let y = m({
+		props: l,
+		name: "STextTruncation"
+	}), { children: b, collapseText: x = "See less", expandText: S = "See more", lines: C = 3, slotProps: w, slots: T, sx: E, variant: D = "expandable", ...O } = y, [k, A] = a(!1), [j, M] = a(!1), [N, P] = a(b), F = i(null), I = i(null), L = t.useCallback((e) => {
+		I.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+	}, [p]), R = n(() => {
+		let e = F.current;
+		if (!e || !b) {
+			M(!1), P(b);
 			return;
 		}
 		e.textContent = "A";
-		let t = e.scrollHeight * p;
-		if (e.textContent = d, e.scrollHeight <= t + 1) {
-			_(!1), y(d);
+		let t = e.scrollHeight * C;
+		if (e.textContent = b, e.scrollHeight <= t + 1) {
+			M(!1), P(b);
 			return;
 		}
-		_(!0);
-		let n = 0, r = d.length;
-		for (; n < r;) {
-			let i = Math.ceil((n + r) / 2);
-			e.textContent = d.slice(0, i) + "… See more", e.scrollHeight > t + 1 ? r = i - 1 : n = i;
+		M(!0);
+		let n = `… ${String(S)}`, r = 0, i = b.length;
+		for (; r < i;) {
+			let a = Math.ceil((r + i) / 2);
+			e.textContent = b.slice(0, a) + n, e.scrollHeight > t + 1 ? i = a - 1 : r = a;
 		}
-		e.textContent = "", y(d.slice(0, n).trimEnd());
-	}, [d, p]);
-	return t(() => {
-		S();
-		let e = new ResizeObserver(S);
-		return x.current && e.observe(x.current), () => e.disconnect();
-	}, [S]), f === "tooltip" ? /* @__PURE__ */ a(l, {
-		title: d,
-		arrow: !0,
-		children: /* @__PURE__ */ a(u, {
-			sx: {
-				display: "-webkit-box",
-				WebkitBoxOrient: "vertical",
-				overflow: "hidden",
-				textOverflow: "ellipsis",
-				WebkitLineClamp: p,
-				lineClamp: p
-			},
-			children: d
-		})
-	}) : /* @__PURE__ */ o(s, {
-		ref: x,
-		sx: { position: "relative" },
-		children: [/* @__PURE__ */ a(u, {
-			ref: b,
+		e.textContent = "", P(b.slice(0, r).trimEnd());
+	}, [
+		S,
+		C,
+		b
+	]);
+	r(() => {
+		R();
+		let e = new ResizeObserver(R);
+		return I.current && e.observe(I.current), () => e.disconnect();
+	}, [R]);
+	let z = {
+		...y,
+		expanded: k,
+		truncated: j,
+		variant: D
+	}, B = T?.text ?? f, V = T?.toggle ?? u, H = T?.tooltip ?? d, U = _(w?.text, z), W = _(w?.toggle, z), G = _(w?.tooltip, z), { onClick: K, sx: q, ...J } = W ?? {}, Y = h(T?.text, U ?? {}, z), X = h(T?.text, v(U), z), Z = h(T?.toggle, J, z), Q = h(T?.tooltip, G ?? {}, z);
+	return /* @__PURE__ */ s(g, {
+		...O,
+		ownerState: z,
+		ref: L,
+		sx: [{ position: "relative" }, ...e(E)],
+		children: D === "tooltip" ? /* @__PURE__ */ s(H, {
+			arrow: !0,
+			title: b,
+			...Q,
+			children: /* @__PURE__ */ s(B, {
+				...Y,
+				sx: [{
+					display: "-webkit-box",
+					WebkitBoxOrient: "vertical",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					WebkitLineClamp: C,
+					lineClamp: C
+				}, ...e(U?.sx)],
+				children: b
+			})
+		}) : /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(B, {
+			ref: F,
 			"aria-hidden": !0,
-			sx: {
+			component: "span",
+			...X,
+			sx: [{
 				position: "absolute",
 				top: 0,
-				left: 0,
 				right: 0,
+				left: 0,
+				height: "auto",
 				visibility: "hidden",
 				pointerEvents: "none"
-			}
-		}), /* @__PURE__ */ o(u, { children: [m ? d : v, g && /* @__PURE__ */ o(i, { children: [m ? " " : "… ", /* @__PURE__ */ a(c, {
-			component: "span",
-			onClick: () => {
-				h(!m);
-			},
-			sx: {
-				cursor: "pointer",
-				fontSize: "inherit"
-			},
-			children: m ? "See less" : "See more"
-		})] })] })]
+			}, ...e(U?.sx)]
+		}), /* @__PURE__ */ c(B, {
+			...Y,
+			children: [k ? b : N, j && /* @__PURE__ */ c(o, { children: [k ? " " : "… ", /* @__PURE__ */ s(V, {
+				component: "button",
+				type: "button",
+				...Z,
+				onClick: (e) => {
+					K?.(e), e.defaultPrevented || A((e) => !e);
+				},
+				sx: [{
+					bgcolor: "transparent",
+					border: 0,
+					cursor: "pointer",
+					display: "inline",
+					fontSize: "inherit",
+					p: 0,
+					verticalAlign: "baseline"
+				}, ...e(q)],
+				children: k ? x : S
+			})] })]
+		})] })
 	});
-};
-d.displayName = "STextTruncation";
+});
+y.displayName = "STextTruncation";
 //#endregion
-export { d as STextTruncation, d as default };
+export { y as STextTruncation, y as default };

package/dist/s-theme-demo/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SThemeDemo } from './s-theme-demo';
-export type { SThemeDemoProps } from './s-theme-demo';
+export type { SThemeDemoOwnerState, SThemeDemoProps, SThemeDemoSection } from './types';
+export type {} from '../theme/component-augmentation';

package/dist/s-theme-demo/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-theme-demo-Bnv7lPIh.js";
+import { SThemeDemo as e } from "./s-theme-demo.js";
 export { e as SThemeDemo, e as default };

package/dist/s-theme-demo/s-theme-demo.d.ts

@@ -1,15 +1,5 @@
+import { SThemeDemoProps } from './types';
 import * as React from 'react';
-/**
- * Props interface for SThemeDemo component
- */
-export interface SThemeDemoProps {
-    /** Optional title for the demo */
-    title?: string;
-    /** Compact layout mode */
-    compact?: boolean;
-    /** Additional sections to show */
-    sections?: ('colors' | 'typography' | 'components' | 'forms' | 'shadows' | 'interactive')[];
-}
 /**
  * SThemeDemo - Comprehensive theme demonstration component
  *
@@ -27,5 +17,5 @@ export interface SThemeDemoProps {
  * @param props - SThemeDemoProps configuration
  * @returns JSX.Element - Complete theme demonstration
  */
-declare const SThemeDemo: React.FC<SThemeDemoProps>;
+export declare const SThemeDemo: React.ForwardRefExoticComponent<Omit<SThemeDemoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SThemeDemo;

package/dist/s-theme-demo/s-theme-demo.js

@@ -1,2 +1,77 @@
-import { t as e } from "../s-theme-demo-Bnv7lPIh.js";
-export { e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { TypographySection as t } from "./theme-demo-typography-section.js";
+import { ShadowSection as n } from "./theme-demo-shadow-section.js";
+import { InteractiveSection as r } from "./theme-demo-interactive-section.js";
+import { SoloStylistSection as i } from "./theme-demo-components-section.js";
+import { ColorRampsSection as a } from "./theme-demo-color-ramps-section.js";
+import { ColorPaletteSection as o } from "./theme-demo-color-palette-section.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Box as u, Stack as d, Typography as f, styled as p, useThemeProps as m } from "@mui/material";
+//#region lib/s-theme-demo/s-theme-demo.tsx
+var h = [
+	"colors",
+	"ramps",
+	"typography",
+	"components",
+	"forms",
+	"interactive",
+	"shadows"
+], g = p(u, {
+	name: "SThemeDemo",
+	slot: "Root"
+})({}), _ = s.forwardRef(function(p, _) {
+	let v = m({
+		props: p,
+		name: "SThemeDemo"
+	}), { title: y = "SoloStylist UI Kit Theme Demo", compact: b = !1, sections: x = h, sx: S, ...C } = v, w = {
+		...v,
+		compact: b
+	}, T = s.useMemo(() => ({
+		colors: x.includes("colors"),
+		ramps: x.includes("ramps"),
+		typography: x.includes("typography"),
+		components: x.includes("components"),
+		forms: x.includes("forms"),
+		shadows: x.includes("shadows"),
+		interactive: x.includes("interactive")
+	}), [x]);
+	return /* @__PURE__ */ l(g, {
+		...C,
+		ownerState: w,
+		ref: _,
+		sx: [{
+			p: b ? 2 : 3,
+			maxWidth: 1200,
+			mx: "auto"
+		}, ...e(S)],
+		children: [/* @__PURE__ */ l(u, {
+			sx: {
+				mb: 4,
+				textAlign: "center"
+			},
+			children: [/* @__PURE__ */ c(f, {
+				variant: "h3",
+				gutterBottom: !0,
+				children: y
+			}), /* @__PURE__ */ c(f, {
+				variant: "h6",
+				sx: { color: "text.secondary" },
+				children: "Showcase of the SoloStylist UI Kit with modern theming capabilities"
+			})]
+		}), /* @__PURE__ */ l(d, {
+			spacing: b ? 2 : 4,
+			children: [
+				T.colors && /* @__PURE__ */ c(o, {}),
+				T.ramps && /* @__PURE__ */ c(a, {}),
+				T.typography && /* @__PURE__ */ c(t, {}),
+				(T.components || T.forms) && /* @__PURE__ */ c(i, {}),
+				T.interactive && /* @__PURE__ */ c(r, {}),
+				T.shadows && /* @__PURE__ */ c(n, {})
+			]
+		})]
+	});
+});
+_.displayName = "SThemeDemo";
+//#endregion
+export { _ as SThemeDemo, _ as default };

package/dist/s-theme-demo/theme-demo-color-palette-section.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Color palette demonstration
+ */
+export declare const ColorPaletteSection: React.FC;

package/dist/s-theme-demo/theme-demo-color-palette-section.js

@@ -0,0 +1,185 @@
+import { useTheme as e } from "@mui/material/styles";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Box as r, Card as i, CardContent as a, Stack as o, Typography as s } from "@mui/material";
+//#region lib/s-theme-demo/theme-demo-color-palette-section.tsx
+var c = () => {
+	let c = e(), l = (c.vars ?? c).palette, u = [
+		{
+			name: "Primary",
+			color: "primary.main"
+		},
+		{
+			name: "Secondary",
+			color: "secondary.main"
+		},
+		{
+			name: "Success",
+			color: "success.main"
+		},
+		{
+			name: "Warning",
+			color: "warning.main"
+		},
+		{
+			name: "Error",
+			color: "error.main"
+		},
+		{
+			name: "Info",
+			color: "info.main"
+		}
+	], d = [
+		{
+			name: "Brand Primary",
+			token: "brand.primary",
+			value: l.gradient.brand.primary
+		},
+		{
+			name: "Brand Subtle",
+			token: "brand.subtle",
+			value: l.gradient.brand.subtle
+		},
+		{
+			name: "Surface Hero",
+			token: "surface.hero",
+			value: l.gradient.surface.hero
+		},
+		{
+			name: "Media Overlay",
+			token: "overlay.media",
+			value: l.gradient.overlay.media
+		},
+		{
+			name: "Scrim",
+			token: "overlay.scrim",
+			value: l.gradient.overlay.scrim
+		},
+		{
+			name: "Edge Fade",
+			token: "overlay.edgeFade",
+			value: l.gradient.overlay.edgeFade
+		},
+		{
+			name: "Glow",
+			token: "effect.glow",
+			value: l.gradient.effect.glow
+		}
+	];
+	return /* @__PURE__ */ t(i, { children: /* @__PURE__ */ n(a, { children: [
+		/* @__PURE__ */ t(s, {
+			variant: "h6",
+			sx: { mb: 2 },
+			children: "Color Palette"
+		}),
+		/* @__PURE__ */ t(o, {
+			direction: "row",
+			sx: {
+				flexWrap: "wrap",
+				gap: 2
+			},
+			children: u.map((e) => /* @__PURE__ */ n(r, {
+				sx: { textAlign: "center" },
+				children: [/* @__PURE__ */ t(r, { sx: {
+					width: 60,
+					height: 60,
+					bgcolor: e.color,
+					borderRadius: 1,
+					mb: 1,
+					boxShadow: 1
+				} }), /* @__PURE__ */ t(s, {
+					variant: "caption",
+					children: e.name
+				})]
+			}, e.name))
+		}),
+		/* @__PURE__ */ t(s, {
+			variant: "h6",
+			sx: {
+				mt: 3,
+				mb: 2
+			},
+			children: "Background Colors"
+		}),
+		/* @__PURE__ */ n(o, {
+			direction: "row",
+			sx: {
+				gap: 2,
+				flexWrap: "wrap"
+			},
+			children: [/* @__PURE__ */ t(r, {
+				sx: {
+					p: 2,
+					bgcolor: "background.default",
+					border: 1,
+					borderColor: "divider",
+					borderRadius: 1
+				},
+				children: /* @__PURE__ */ t(s, {
+					variant: "caption",
+					children: "Default Background"
+				})
+			}), /* @__PURE__ */ t(r, {
+				sx: {
+					p: 2,
+					bgcolor: "background.paper",
+					border: 1,
+					borderColor: "divider",
+					borderRadius: 1
+				},
+				children: /* @__PURE__ */ t(s, {
+					variant: "caption",
+					children: "Paper Background"
+				})
+			})]
+		}),
+		/* @__PURE__ */ t(s, {
+			variant: "h6",
+			sx: {
+				mt: 3,
+				mb: 2
+			},
+			children: "Semantic Gradients"
+		}),
+		/* @__PURE__ */ t(r, {
+			sx: {
+				display: "grid",
+				gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))",
+				gap: 2
+			},
+			children: d.map((e) => /* @__PURE__ */ t(r, {
+				sx: {
+					minHeight: 144,
+					p: 1,
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "flex-end",
+					background: e.value,
+					border: 1,
+					borderColor: "divider",
+					borderRadius: 1,
+					overflow: "hidden"
+				},
+				children: /* @__PURE__ */ n(r, {
+					sx: {
+						alignSelf: "flex-start",
+						p: 1,
+						borderRadius: 1,
+						gradient: "overlay.media",
+						color: "common.white"
+					},
+					children: [/* @__PURE__ */ t(s, {
+						variant: "subtitle2",
+						children: e.name
+					}), /* @__PURE__ */ n(s, {
+						variant: "caption",
+						sx: { color: "common.white" },
+						children: ["palette.gradient.", e.token]
+					})]
+				})
+			}, e.token))
+		})
+	] }) });
+};
+//#endregion
+export { c as ColorPaletteSection };

package/dist/s-theme-demo/theme-demo-color-ramps-section.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Raw color ramp demonstration (design-token reference, not applied theme colors)
+ */
+export declare const ColorRampsSection: React.FC;

package/dist/s-theme-demo/theme-demo-color-ramps-section.js

@@ -0,0 +1,125 @@
+import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "../colors-CNjL5fhq.js";
+import "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Box as g, Card as _, CardContent as v, Stack as y, Typography as b } from "@mui/material";
+//#region lib/s-theme-demo/theme-demo-color-ramps-section.tsx
+var x = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900
+], S = [
+	{
+		label: "brand",
+		role: "primary",
+		light: c,
+		dark: s
+	},
+	{
+		label: "gray",
+		role: "neutral",
+		light: d,
+		dark: u
+	},
+	{
+		label: "orange",
+		role: "warning",
+		light: a,
+		dark: r
+	},
+	{
+		label: "green",
+		role: "success",
+		light: t,
+		dark: i
+	},
+	{
+		label: "blue",
+		role: "info",
+		light: e,
+		dark: f
+	},
+	{
+		label: "red",
+		role: "error",
+		light: n,
+		dark: o
+	},
+	{
+		label: "purple",
+		role: "secondary",
+		light: p,
+		dark: l
+	}
+], C = ({ label: e, values: t, role: n }) => /* @__PURE__ */ h(g, { children: [/* @__PURE__ */ h(b, {
+	variant: "subtitle1",
+	children: [
+		n,
+		": ",
+		e
+	]
+}), /* @__PURE__ */ m(g, {
+	sx: {
+		display: "grid",
+		gridTemplateColumns: "repeat(10, 1fr)",
+		gap: .5,
+		mt: .5
+	},
+	children: x.map((e) => {
+		let n = t[e];
+		return /* @__PURE__ */ h(g, {
+			sx: {
+				backgroundColor: n,
+				gradient: "overlay.media",
+				color: "common.white",
+				borderRadius: 1,
+				minHeight: 120,
+				p: .5,
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "flex-end",
+				border: "1px solid",
+				borderColor: "divider"
+			},
+			children: [/* @__PURE__ */ m(b, {
+				variant: "caption",
+				sx: { color: "common.white" },
+				children: e
+			}), /* @__PURE__ */ m(b, {
+				variant: "caption",
+				sx: { color: "common.white" },
+				children: n.replace("hsl(", "").replace(")", "")
+			})]
+		}, e);
+	})
+})] }), w = () => /* @__PURE__ */ m(_, { children: /* @__PURE__ */ h(v, { children: [/* @__PURE__ */ m(b, {
+	variant: "h6",
+	sx: { mb: 2 },
+	children: "Color Ramps"
+}), /* @__PURE__ */ m(y, {
+	spacing: 3,
+	sx: { overflowX: "auto" },
+	children: S.map(({ label: e, role: t, light: n, dark: r }) => /* @__PURE__ */ m(g, {
+		sx: { minWidth: 640 },
+		children: /* @__PURE__ */ h(y, {
+			spacing: 1,
+			children: [/* @__PURE__ */ m(C, {
+				role: t,
+				label: `light${e[0].toUpperCase()}${e.slice(1)} — light theme`,
+				values: n
+			}), /* @__PURE__ */ m(C, {
+				role: t,
+				label: `${e} — dark theme`,
+				values: r
+			})]
+		})
+	}, e))
+})] }) });
+//#endregion
+export { w as ColorRampsSection };

package/dist/s-theme-demo/theme-demo-components-section.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SoloStylistSection: React.FC;