@solostylist/ui-kit 1.0.230 → 2.0.0

package/dist/s-spotlight-cursor/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SSpotlightCursor } from './s-spotlight-cursor';
-export type { SSpotlightCursorProps, SpotlightConfig } from './s-spotlight-cursor';
+export type { SSpotlightCursorOwnerState, SSpotlightCursorProps } from './s-spotlight-cursor';
+export type {} from '../theme/component-augmentation';

package/dist/s-spotlight-cursor/s-spotlight-cursor.d.ts

@@ -1,26 +1,29 @@
-import { HTMLAttributes } from 'react';
-/**
- * Configuration interface for spotlight effect appearance and behavior
- */
-export interface SpotlightConfig {
-    /** Radius of the spotlight effect in pixels */
-    radius: number;
-    /** Brightness/opacity of the spotlight effect (0-1) */
+import { SxProps, Theme } from '@mui/material';
+import * as React from 'react';
+export interface SSpotlightCursorProps extends Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'color' | 'height' | 'width'> {
+    /** Spotlight brightness/opacity from 0 to 1 */
+    brightness?: number;
+    /** MUI palette key or CSS color used by the spotlight; defaults to `primary` */
+    color?: string;
+    /** Cursor follow speed from 0.01 (slowest) to 1 (immediate) */
+    followSpeed?: number;
+    /** Spotlight radius in pixels */
+    radius?: number;
+    /** Additional MUI system styles for the root canvas */
+    sx?: SxProps<Theme>;
+}
+export interface SSpotlightCursorOwnerState {
     brightness: number;
-    /** Color of the spotlight effect in hexadecimal format */
     color: string;
-    /** Smoothing factor for cursor movement */
-    smoothing: number;
+    followSpeed: number;
+    radius: number;
+    reducedMotion: boolean;
 }
 /**
- * Props interface for the SSpotlightCursor component
+ * Renders a decorative cursor-following spotlight canvas.
+ *
+ * The parent element must establish a positioning context, usually with
+ * `position: relative`, so the absolute canvas aligns with the parent bounds.
  */
-export interface SSpotlightCursorProps extends HTMLAttributes<HTMLCanvasElement> {
-    /** Configuration object for spotlight appearance and behavior */
-    config?: SpotlightConfig;
-}
-export declare const SSpotlightCursor: {
-    ({ config, className, ...props }: SSpotlightCursorProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const SSpotlightCursor: React.ForwardRefExoticComponent<SSpotlightCursorProps & React.RefAttributes<HTMLCanvasElement>>;
 export default SSpotlightCursor;

package/dist/s-spotlight-cursor/s-spotlight-cursor.js

@@ -1,66 +1,91 @@
-import { useEffect as e, useRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { Box as r } from "@mui/material";
+import { isValidCanvasColor as e, resolveCanvasColor as t } from "../utils/canvas-color.js";
+import { t as n } from "../useForkRef-CKneCEtr.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { styled as a, useColorScheme as o, useMediaQuery as s, useTheme as c, useThemeProps as l } from "@mui/material";
 //#region lib/s-spotlight-cursor/s-spotlight-cursor.tsx
-var i = (n) => {
-	let r = t(null);
-	return e(() => {
-		let e = r.current;
-		if (!e) return;
-		let t = e.getContext("2d");
-		if (!t) return;
-		let i, a = 0, o = 0, s = -1e3, c = -1e3, l = e.parentElement, u = l ?? e, d = l?.style.position, f = () => {
-			let n = u.getBoundingClientRect(), r = window.devicePixelRatio || 1;
-			a = n.width, o = n.height, e.width = Math.max(1, Math.round(a * r)), e.height = Math.max(1, Math.round(o * r)), t.setTransform(r, 0, 0, r, 0, 0);
-		}, p = (t) => {
-			let n = e.getBoundingClientRect(), r = t.clientX - n.left, i = t.clientY - n.top;
-			if (r < 0 || r > n.width || i < 0 || i > n.height) {
-				s = -1e3, c = -1e3;
+var u = 200, d = .15, f = .1, p = .01, m = ({ brightness: n, color: i, colorScheme: a, followSpeed: o, radius: s, reducedMotion: c, theme: l }) => {
+	let u = r.useRef(null);
+	return r.useEffect(() => {
+		let r = u.current;
+		if (!r) return;
+		let a = r.getContext("2d");
+		if (!a) return;
+		let d = null, f = 0, p = 0, m = null, h = null, g = null, _ = null, v = r.parentElement ?? r, y = (l.vars ?? l).palette.primary.main, b = t(i, r, l), x = t(y, r), S = e(a, b) ? b : e(a, x) ? x : "#000000", C = () => {
+			if (d = null, a.clearRect(0, 0, f, p), m == null || h == null) return;
+			g == null || _ == null || c ? (g = m, _ = h) : (g += (m - g) * o, _ += (h - _) * o);
+			let e = a.createRadialGradient(g, _, 0, g, _, s);
+			e.addColorStop(0, S), e.addColorStop(1, "transparent"), a.save(), a.globalAlpha = n, a.fillStyle = e, a.fillRect(0, 0, f, p), a.restore();
+			let t = Math.abs(m - g), r = Math.abs(h - _);
+			!c && (t > .1 || r > .1) && (d = requestAnimationFrame(C));
+		}, w = () => {
+			d ??= requestAnimationFrame(C);
+		}, T = () => {
+			let e = r.getBoundingClientRect();
+			if (e.width === 0 || e.height === 0) return;
+			let t = window.devicePixelRatio || 1;
+			f = e.width, p = e.height, r.width = Math.max(1, Math.round(f * t)), r.height = Math.max(1, Math.round(p * t)), a.setTransform(t, 0, 0, t, 0, 0), w();
+		}, E = (e) => {
+			let t = r.getBoundingClientRect(), n = e.clientX - t.left, i = e.clientY - t.top;
+			if (n < 0 || n > t.width || i < 0 || i > t.height) {
+				m = null, h = null, g = null, _ = null, w();
 				return;
 			}
-			s = r, c = i;
-		}, m = () => {
-			s = -1e3, c = -1e3;
-		}, h = (e) => {
-			let t = parseInt(e.slice(1), 16);
-			return `${t >> 16 & 255},${t >> 8 & 255},${t & 255}`;
-		}, g = () => {
-			if (t.clearRect(0, 0, a, o), s !== -1e3 && c !== -1e3) {
-				let e = t.createRadialGradient(s, c, 0, s, c, n.radius || 200), r = h(n.color);
-				e.addColorStop(0, `rgba(${r}, ${n.brightness})`), e.addColorStop(1, "rgba(0,0,0,0)"), t.fillStyle = e, t.fillRect(0, 0, a, o);
-			}
-			i = requestAnimationFrame(g);
+			m = n, h = i, g ??= n, _ ??= i, w();
+		}, D = () => {
+			m = null, h = null, g = null, _ = null, w();
 		};
-		l && window.getComputedStyle(l).position === "static" && (l.style.position = "relative"), f();
-		let _ = new ResizeObserver(f);
-		return _.observe(u), window.addEventListener("resize", f), u.addEventListener("mousemove", p), u.addEventListener("mouseleave", m), i = requestAnimationFrame(g), () => {
-			_.disconnect(), window.removeEventListener("resize", f), u.removeEventListener("mousemove", p), u.removeEventListener("mouseleave", m), l && d !== void 0 && (l.style.position = d), cancelAnimationFrame(i);
+		T();
+		let O = new ResizeObserver(T);
+		return O.observe(r), v.addEventListener("pointermove", E, { passive: !0 }), v.addEventListener("pointerleave", D), () => {
+			O.disconnect(), v.removeEventListener("pointermove", E), v.removeEventListener("pointerleave", D), d != null && cancelAnimationFrame(d);
 		};
 	}, [
-		n.radius,
-		n.brightness,
-		n.color
-	]), r;
-}, a = ({ config: e = {
-	radius: 200,
-	brightness: .15,
-	color: "#0000ff",
-	smoothing: .1
-}, className: t, ...a }) => /* @__PURE__ */ n(r, {
-	component: "canvas",
-	ref: i(e),
-	className: t,
-	sx: {
-		position: "absolute",
-		top: 0,
-		left: 0,
-		pointerEvents: "none",
-		zIndex: 9999,
-		width: "100%",
-		height: "100%"
-	},
-	...a
+		n,
+		i,
+		a,
+		o,
+		s,
+		c,
+		l
+	]), u;
+}, h = a("canvas", {
+	name: "SSpotlightCursor",
+	slot: "Root"
+})({
+	position: "absolute",
+	top: 0,
+	left: 0,
+	pointerEvents: "none",
+	zIndex: 0,
+	width: "100%",
+	height: "100%"
+}), g = r.forwardRef(function(e, t) {
+	let r = l({
+		props: e,
+		name: "SSpotlightCursor"
+	}), a = c(), { mode: g, systemMode: _ } = o(), { brightness: v = d, color: y = "primary", followSpeed: b = f, radius: x = u, ...S } = r, C = Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : d, w = Number.isFinite(b) ? Math.min(1, Math.max(p, b)) : f, T = Number.isFinite(x) && x > 0 ? x : u, E = s("(prefers-reduced-motion: reduce)", { noSsr: !0 }), D = n(m({
+		brightness: C,
+		color: y,
+		colorScheme: g === "system" ? _ : g,
+		followSpeed: w,
+		radius: T,
+		reducedMotion: E,
+		theme: a
+	}), t), O = {
+		brightness: C,
+		color: y,
+		followSpeed: w,
+		radius: T,
+		reducedMotion: E
+	};
+	return /* @__PURE__ */ i(h, {
+		...S,
+		"aria-hidden": "true",
+		ownerState: O,
+		ref: D
+	});
 });
-a.displayName = "SSpotlightCursor";
+g.displayName = "SSpotlightCursor";
 //#endregion
-export { a as SSpotlightCursor, a as default };
+export { g as SSpotlightCursor, g as default };

package/dist/s-status-illustration/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SStatusIllustration } from './s-status-illustration';
+export type { SStatusIllustrationOwnerState, SStatusIllustrationProps, SStatusIllustrationSlotProps, SStatusIllustrationSlots, SStatusIllustrationVariant, } from './s-status-illustration';
+export type {} from '../theme/component-augmentation';

package/dist/s-status-illustration/index.js

@@ -0,0 +1,2 @@
+import { SStatusIllustration as e } from "./s-status-illustration.js";
+export { e as SStatusIllustration, e as default };

package/dist/s-status-illustration/s-status-illustration.d.ts

@@ -0,0 +1,57 @@
+import { BoxProps, ContainerProps, StackProps, SvgIconProps, TypographyProps } from '@mui/material';
+import { SLazyImageProps } from '../s-lazy-image';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export type SStatusIllustrationVariant = 'accessDenied' | 'custom' | 'error' | 'error404' | 'itemNotFound' | 'maintenance' | 'offline' | 'somethingWentWrong';
+export interface SStatusIllustrationSlots {
+    action?: React.ElementType;
+    container?: React.ElementType;
+    content?: React.ElementType;
+    description?: React.ElementType;
+    illustration?: React.ElementType;
+    image?: React.ElementType;
+    imageContainer?: React.ElementType;
+    stack?: React.ElementType;
+    title?: React.ElementType;
+}
+export interface SStatusIllustrationSlotProps {
+    action?: MuiOwnerStateSlotProps<BoxProps, SStatusIllustrationOwnerState>;
+    container?: MuiOwnerStateSlotProps<ContainerProps, SStatusIllustrationOwnerState>;
+    content?: MuiOwnerStateSlotProps<StackProps, SStatusIllustrationOwnerState>;
+    description?: MuiOwnerStateSlotProps<TypographyProps, SStatusIllustrationOwnerState>;
+    illustration?: MuiOwnerStateSlotProps<SvgIconProps, SStatusIllustrationOwnerState>;
+    image?: MuiOwnerStateSlotProps<Omit<SLazyImageProps, 'alt' | 'src'>, SStatusIllustrationOwnerState>;
+    imageContainer?: MuiOwnerStateSlotProps<BoxProps, SStatusIllustrationOwnerState>;
+    stack?: MuiOwnerStateSlotProps<StackProps, SStatusIllustrationOwnerState>;
+    title?: MuiOwnerStateSlotProps<TypographyProps, SStatusIllustrationOwnerState>;
+}
+export interface SStatusIllustrationProps extends Omit<BoxProps, 'children' | 'component' | 'title'> {
+    /** Action content, typically one or more MUI Buttons. */
+    action?: React.ReactNode;
+    /** Supporting status description. */
+    description: React.ReactNode;
+    /** Alternative text for the optional custom image. */
+    imageAlt?: string;
+    /** Optional image source. When provided, it replaces the preset illustration. */
+    imageSrc?: string;
+    /** Hide the illustration or custom image. */
+    hideIllustration?: boolean;
+    /** SVG content rendered when `variant="custom"`. */
+    children?: React.ReactNode;
+    /** Components used for internal structural slots. */
+    slots?: SStatusIllustrationSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SStatusIllustrationSlotProps;
+    /** Main status heading. */
+    title: React.ReactNode;
+    /** Status artwork to render. @default 'itemNotFound' */
+    variant?: SStatusIllustrationVariant;
+}
+export interface SStatusIllustrationOwnerState {
+    hasAction: boolean;
+    hasImage: boolean;
+    variant: SStatusIllustrationVariant;
+}
+/** Centered status layout with seven artwork presets and custom SVG support. */
+export declare const SStatusIllustration: React.ForwardRefExoticComponent<Omit<SStatusIllustrationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SStatusIllustration;