@solostylist/ui-kit 2.0.1 → 2.0.3

package/dist/s-gradient-blob-pulse/s-gradient-blob-pulse.js

@@ -0,0 +1,236 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Box as a, keyframes as o, styled as s, useThemeProps as c } from "@mui/material";
+import { mergeSlotProps as l, useForkRef as u } from "@mui/material/utils";
+import d from "@mui/utils/appendOwnerState";
+//#region lib/s-gradient-blob-pulse/s-gradient-blob-pulse.tsx
+var f = "--SGradientBlobPulse-blur", p = {
+	large: {
+		blobSizes: [
+			260,
+			200,
+			140
+		],
+		blur: 40
+	},
+	medium: {
+		blobSizes: [
+			180,
+			140,
+			100
+		],
+		blur: 28
+	},
+	small: {
+		blobSizes: [
+			80,
+			60,
+			40
+		],
+		blur: 14
+	}
+}, m = 1.3, h = {
+	balanced: {
+		colorCore: "50%",
+		colorMid: "18%",
+		fadeEnd: "64%",
+		fadeMid: "34%",
+		opacities: [
+			.48,
+			.38,
+			.32
+		],
+		sizeScale: 1
+	},
+	soft: {
+		colorCore: "34%",
+		colorMid: "10%",
+		fadeEnd: "52%",
+		fadeMid: "26%",
+		opacities: [
+			.28,
+			.22,
+			.18
+		],
+		sizeScale: 1
+	},
+	vivid: {
+		colorCore: "68%",
+		colorMid: "30%",
+		fadeEnd: "74%",
+		fadeMid: "40%",
+		opacities: [
+			.62,
+			.52,
+			.44
+		],
+		sizeScale: 1.08
+	}
+}, g = [
+	{
+		colorDelay: 0,
+		pulseDelay: 0,
+		pulseDuration: 1
+	},
+	{
+		colorDelay: .625,
+		pulseDelay: -.1875,
+		pulseDuration: .875
+	},
+	{
+		colorDelay: 1.25,
+		pulseDelay: -.34375,
+		pulseDuration: 1.125
+	}
+], _ = 2.5, v = [
+	o`
+  0%, 100% { transform: translate(-54%, -50%) scale(1); }
+  50% { transform: translate(-47%, -55%) scale(1.22); }
+`,
+	o`
+  0%, 100% { transform: translate(-46%, -48%) scale(1); }
+  50% { transform: translate(-53%, -43%) scale(1.16); }
+`,
+	o`
+  0%, 100% { transform: translate(-50%, -56%) scale(1); }
+  50% { transform: translate(-43%, -49%) scale(1.25); }
+`
+], y = o`
+  0%, 100% { background-image: var(--SGradientBlobPulse-gradient-1); }
+  25% { background-image: var(--SGradientBlobPulse-gradient-2); }
+  50% { background-image: var(--SGradientBlobPulse-gradient-3); }
+  75% { background-image: var(--SGradientBlobPulse-gradient-4); }
+`, b = (e, t) => {
+	let n = (e.vars ?? e).palette, r = t.colors?.length ? t.colors : [
+		n.primary[300],
+		n.primary[600],
+		n.secondary[400],
+		n.secondary[600]
+	];
+	return [
+		r[0],
+		r[1] ?? r[0],
+		r[2] ?? r[0],
+		r[3] ?? r[0]
+	];
+}, x = s(a, {
+	name: "SGradientBlobPulse",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ ownerState: e, theme: t }) => {
+	let n = p[e.size], r = h[e.variant], i = b(t, e), a = `${Math.round(n.blobSizes[0] * m)}px`, o = i.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-gradient-${n + 1}`]: [
+			"radial-gradient(circle,",
+			`color-mix(in srgb, ${t} ${r.colorCore}, transparent) 0%,`,
+			`color-mix(in srgb, ${t} ${r.colorMid}, transparent) ${r.fadeMid},`,
+			`transparent ${r.fadeEnd})`
+		].join(" ")
+	}), {}), s = i.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-gradient-${n + 1}`]: `radial-gradient(circle, ${t} 0%, transparent ${r.fadeEnd})`
+	}), {}), c = n.blobSizes.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-blobSize-${n + 1}`]: `${Math.round(t * r.sizeScale)}px`
+	}), {}), l = r.opacities.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-opacity-${n + 1}`]: String(t)
+	}), {}), u = g.reduce((t, n, r) => ({
+		...t,
+		[`--SGradientBlobPulse-colorDelay-${r + 1}`]: `${Math.round(e.animationDuration * n.colorDelay)}ms`,
+		[`--SGradientBlobPulse-pulseDelay-${r + 1}`]: `${Math.round(e.animationDuration * n.pulseDelay)}ms`,
+		[`--SGradientBlobPulse-pulseDuration-${r + 1}`]: `${Math.round(e.animationDuration * n.pulseDuration)}ms`
+	}), {});
+	return {
+		[f]: `${n.blur}px`,
+		"--SGradientBlobPulse-colorDuration": `${Math.round(e.animationDuration * _)}ms`,
+		...o,
+		...c,
+		...l,
+		...u,
+		alignItems: "center",
+		display: "inline-flex",
+		isolation: "isolate",
+		justifyContent: "center",
+		minHeight: a,
+		minWidth: a,
+		position: "relative",
+		"@supports not (color: color-mix(in srgb, red, blue))": s
+	};
+}), S = s(a, {
+	name: "SGradientBlobPulse",
+	slot: "Blob",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: e.radius.full,
+	filter: `blur(var(${f}))`,
+	left: "50%",
+	mixBlendMode: "normal",
+	pointerEvents: "none",
+	position: "absolute",
+	top: "50%",
+	willChange: "transform",
+	zIndex: 0,
+	"@media (prefers-reduced-motion: reduce)": { animation: "none !important" },
+	...e.applyStyles("dark", { mixBlendMode: "screen" }),
+	variants: [...v.map((t, n) => ({
+		props: ({ ownerState: e }) => e.index === n,
+		style: {
+			animation: [`${t} var(--SGradientBlobPulse-pulseDuration-${n + 1}) ${e.transitions.easing.easeInOut} infinite`, `${y} var(--SGradientBlobPulse-colorDuration) linear infinite`].join(", "),
+			animationDelay: `var(--SGradientBlobPulse-pulseDelay-${n + 1}), var(--SGradientBlobPulse-colorDelay-${n + 1})`,
+			backgroundImage: `var(--SGradientBlobPulse-gradient-${n + 1})`,
+			height: `var(--SGradientBlobPulse-blobSize-${n + 1})`,
+			opacity: `var(--SGradientBlobPulse-opacity-${n + 1})`,
+			width: `var(--SGradientBlobPulse-blobSize-${n + 1})`
+		}
+	})), {
+		props: ({ ownerState: e }) => e.paused,
+		style: { animationPlayState: "paused" }
+	}]
+})), C = s(a, {
+	name: "SGradientBlobPulse",
+	slot: "Content",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	position: "relative",
+	zIndex: 1
+}), w = [
+	0,
+	1,
+	2
+], T = n.forwardRef(function(n, a) {
+	let o = c({
+		props: n,
+		name: "SGradientBlobPulse"
+	}), { animationDuration: s = 3200, children: f, colors: p, paused: m = !1, size: h = "medium", slotProps: g, slots: _, sx: v, variant: y = "balanced", ...b } = o, T = {
+		...o,
+		animationDuration: s,
+		colors: p,
+		paused: m,
+		size: h,
+		variant: y
+	}, E = _?.root ?? x, D = _?.blob ?? S, O = _?.content ?? C, { ref: k, sx: A, ...j } = d(E, l(t(g?.root, T), b), T), M = u(k, a), N = d(O, t(g?.content, T) ?? {}, T);
+	return /* @__PURE__ */ i(E, {
+		...j,
+		ref: M,
+		sx: [...e(A), ...e(v)],
+		children: [w.map((e) => {
+			let n = {
+				...T,
+				index: e
+			};
+			return /* @__PURE__ */ r(D, {
+				...d(D, t(g?.blob, n) ?? {}, n),
+				"aria-hidden": !0
+			}, e);
+		}), /* @__PURE__ */ r(O, {
+			...N,
+			children: f
+		})]
+	});
+});
+T.displayName = "SGradientBlobPulse";
+//#endregion
+export { T as SGradientBlobPulse, T as default };

package/dist/s-gradient-icon/index.d.ts

@@ -1,3 +1,3 @@
 export { default, default as SGradientIcon } from './s-gradient-icon';
-export type { AnimationEasing, CustomGradient, GradientDirection, GradientRole, SGradientIconOwnerState, SGradientIconProps, } from './s-gradient-icon';
+export type { AnimationEasing, CustomGradient, GradientRole, SGradientIconDirection, SGradientIconOwnerState, SGradientIconProps, } from './s-gradient-icon';
 export type {} from '../theme/component-augmentation';

package/dist/s-gradient-icon/s-gradient-icon.d.ts

@@ -6,7 +6,7 @@ type IconComponent = OverridableComponent<SvgIconTypeMap<object, 'svg'>> & {
     muiName: string;
 };
 /** Gradient direction options */
-export type GradientDirection = 'horizontal' | 'vertical' | 'diagonal' | 'radial';
+export type SGradientIconDirection = 'horizontal' | 'vertical' | 'diagonal' | 'radial';
 /** Semantic gradient roles */
 export type GradientRole = 'brand-primary' | 'brand-subtle' | 'custom';
 /** Animation easing options */
@@ -23,7 +23,7 @@ export interface CustomGradient {
     middlePosition?: number;
 }
 /** Props interface for SGradientIcon component */
-export interface SGradientIconProps extends Omit<SvgIconProps, 'component'> {
+export interface SGradientIconProps extends Omit<SvgIconProps, 'component' | 'direction'> {
     /** Whether the icon should show the gradient fill (hover state) */
     hovered?: boolean;
     /** The Material-UI icon component to render with gradient effect */
@@ -37,7 +37,7 @@ export interface SGradientIconProps extends Omit<SvgIconProps, 'component'> {
     /** Custom gradient colors when role is 'custom' */
     customGradient?: CustomGradient;
     /** Direction of the gradient (default: 'diagonal') */
-    gradientDirection?: GradientDirection;
+    direction?: SGradientIconDirection;
     /** Animation duration in milliseconds (default: 300) */
     animationDuration?: number;
     /** Animation easing function (default: 'ease') */
@@ -56,7 +56,7 @@ export type SGradientIconOwnerState = SGradientIconProps & {
     animationDuration: number;
     animationEasing: AnimationEasing;
     autoHover: boolean;
-    gradientDirection: GradientDirection;
+    direction: SGradientIconDirection;
     gradientRole: GradientRole;
     hovered: boolean;
     strokeWidth: number;

package/dist/s-gradient-icon/s-gradient-icon.js

@@ -14,7 +14,7 @@ var l = o(t(({ IconComponent: e, ...t }, n) => /* @__PURE__ */ i(e, {
 	let u = c({
 		props: t,
 		name: "SGradientIcon"
-	}), { hovered: d = !1, IconComponent: f, sx: p, strokeWidth: m = 0, gradientRole: h = "brand-primary", customGradient: g, gradientDirection: _ = "diagonal", animationDuration: v = 300, animationEasing: y = "ease", autoHover: b = !1, gradientId: x, alwaysGradient: S = !1, fallbackColor: C, ...w } = u, T = s(), E = (T.vars ?? T).palette, D = n(), O = x ?? `gradient-${D}`, k = {
+	}), { hovered: d = !1, IconComponent: f, sx: p, strokeWidth: m = 0, gradientRole: h = "brand-primary", customGradient: g, direction: _ = "diagonal", animationDuration: v = 300, animationEasing: y = "ease", autoHover: b = !1, gradientId: x, alwaysGradient: S = !1, fallbackColor: C, ...w } = u, T = s(), E = (T.vars ?? T).palette, D = n(), O = x ?? `gradient-${D}`, k = {
 		"brand-primary": {
 			start: E.primary[400],
 			end: E.primary[700]
@@ -63,7 +63,7 @@ var l = o(t(({ IconComponent: e, ...t }, n) => /* @__PURE__ */ i(e, {
 		animationDuration: v,
 		animationEasing: y,
 		autoHover: b,
-		gradientDirection: _,
+		direction: _,
 		gradientRole: h,
 		hovered: d,
 		strokeWidth: m

package/dist/s-icon-button/s-icon-button.d.ts

@@ -17,8 +17,12 @@ export interface SIconButtonSlotProps {
     /** Props or an owner-state callback for the tooltip slot. */
     tooltip?: OwnerStateSlotProps<Omit<TooltipProps, 'children' | 'title'>>;
 }
-/** MUI IconButton with an optional tooltip slot. */
-export interface SIconButtonProps extends Omit<IconButtonProps, 'component'> {
+/**
+ * MUI IconButton with an optional tooltip slot. Setting `href` makes the
+ * underlying ButtonBase render an anchor, so icon-only links keep the button
+ * hit target and hover state.
+ */
+export interface SIconButtonProps extends Omit<IconButtonProps, 'component'>, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'> {
     /** Components used for internal slots. */
     slots?: SIconButtonSlots;
     /** Props or owner-state callbacks for internal slots. */

package/dist/s-interactive-card/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SInteractiveCard } from './s-interactive-card';
+export type { SInteractiveCardActionAreaProps, SInteractiveCardOwnerState, SInteractiveCardProps, SInteractiveCardSlotProps, SInteractiveCardSlots, } from './s-interactive-card';
+export type {} from '../theme/component-augmentation';

package/dist/s-interactive-card/index.js

@@ -0,0 +1,2 @@
+import { SInteractiveCard as e } from "./s-interactive-card.js";
+export { e as SInteractiveCard, e as default };

package/dist/s-interactive-card/s-interactive-card.d.ts

@@ -0,0 +1,57 @@
+import { BoxProps, CardActionAreaProps, CardProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SInteractiveCardSlots {
+    /** Element wrapping the children when the card is clickable. */
+    actionArea?: React.ElementType;
+    /** Decorative layer rendered above the content. */
+    overlay?: React.ElementType;
+    /** Card surface element. */
+    root?: React.ElementType;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SInteractiveCardOwnerState>;
+/** Action area props, widened with the anchor attributes used when `href` is set. */
+export type SInteractiveCardActionAreaProps = CardActionAreaProps & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'>;
+export interface SInteractiveCardSlotProps {
+    /** Props or owner-state callback for the action area slot. */
+    actionArea?: OwnerStateSlotProps<SInteractiveCardActionAreaProps>;
+    /** Props or owner-state callback for the overlay slot. */
+    overlay?: OwnerStateSlotProps<BoxProps>;
+    /** Props or owner-state callback for the root slot. */
+    root?: OwnerStateSlotProps<Omit<CardProps, 'children'>>;
+}
+/** Props for a card surface with a hover-lift and focus interaction language. */
+export interface SInteractiveCardProps extends Omit<CardProps, 'children' | 'component' | 'onClick'> {
+    /**
+     * Card content. When `href` or `onClick` is provided, the content is wrapped
+     * in one `CardActionArea` and must not contain nested interactive controls.
+     */
+    children?: React.ReactNode;
+    /** Keeps the hover border feedback but removes the translate and scale. */
+    disableLift?: boolean;
+    /** Disables the primary action and all built-in interaction effects. */
+    disabled?: boolean;
+    /** Link destination. When set, the card action area renders with anchor semantics. */
+    href?: string;
+    /** Enables the surface lift, border and sheen effects without changing action semantics. */
+    interactive?: boolean;
+    /** Called when the card action area is activated. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Decorative content rendered in the overlay layer. Always `aria-hidden`. */
+    overlay?: React.ReactNode;
+    /** Sweeps a light sheen across the card on hover/focus. Disabled by default. */
+    sheen?: boolean;
+    /** Components used for internal structural slots. */
+    slots?: SInteractiveCardSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SInteractiveCardSlotProps;
+}
+export interface SInteractiveCardOwnerState extends Omit<SInteractiveCardProps, 'slotProps' | 'slots'> {
+    clickable: boolean;
+    disableLift: boolean;
+    disabled: boolean;
+    interactive: boolean;
+    sheen: boolean;
+}
+export declare const SInteractiveCard: React.ForwardRefExoticComponent<Omit<SInteractiveCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SInteractiveCard;

package/dist/s-interactive-card/s-interactive-card.js

@@ -0,0 +1,150 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { actionHoverMedia as n, getFocusVisibleStyle as r, reducedMotionMedia as i } from "../theme/components/action-styles.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Box as c, Card as l, CardActionArea as u, keyframes as d, styled as f, useThemeProps as p } from "@mui/material";
+import { mergeSlotProps as m, useEventCallback as h, useForkRef as g } from "@mui/material/utils";
+import _ from "@mui/utils/appendOwnerState";
+//#region lib/s-interactive-card/s-interactive-card.tsx
+var v = "55%", y = "-18deg", b = "-140%", x = d`
+  from {
+    transform: translateX(${b}) skewX(${y});
+  }
+  to {
+    transform: translateX(${"260%"}) skewX(${y});
+  }
+`, S = (e) => ({ [n]: { "&:hover": e } }), C = (e) => ({
+	...S(e),
+	"&:has(.Mui-focusVisible)": e
+}), w = f(l, {
+	name: "SInteractiveCard",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: e.radius.md,
+	overflow: "hidden",
+	position: "relative",
+	transition: e.transitions.create(["border-color", "transform"], {
+		duration: e.transitions.duration.complex,
+		easing: e.transitions.easing.easeOut
+	}),
+	zIndex: 0,
+	[i]: { transition: "none" },
+	variants: [
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled,
+			style: C({ borderColor: (e.vars ?? e).palette.primary.main })
+		},
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled && !e.disableLift,
+			style: {
+				...S({ transform: `translateY(calc(${e.spacing(1.5)} * -1)) scale(1.02)` }),
+				[i]: S({ transform: "none" })
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled && e.sheen,
+			style: {
+				"&::after": {
+					backgroundImage: `linear-gradient(90deg, transparent, ${(e.vars ?? e).palette.whiteAlpha.light}, transparent)`,
+					content: "\"\"",
+					height: "100%",
+					insetBlockStart: 0,
+					insetInlineStart: 0,
+					pointerEvents: "none",
+					position: "absolute",
+					transform: `translateX(${b}) skewX(${y})`,
+					width: v,
+					willChange: "transform",
+					zIndex: 2
+				},
+				...S({ "&::after": { animation: `${x} ${e.transitions.duration.complex}ms ${e.transitions.easing.easeOut} forwards` } }),
+				[i]: { "&::after": { content: "none" } }
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.disabled,
+			style: {
+				borderColor: (e.vars ?? e).palette.divider,
+				boxShadow: "none"
+			}
+		}
+	]
+})), T = f(u, {
+	name: "SInteractiveCard",
+	slot: "ActionArea",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: "inherit",
+	display: "block",
+	height: "100%",
+	textAlign: "inherit",
+	width: "100%",
+	"&.Mui-focusVisible": {
+		...r(e),
+		outlineOffset: -2
+	}
+})), E = f(c, {
+	name: "SInteractiveCard",
+	slot: "Overlay",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	borderRadius: "inherit",
+	inset: 0,
+	overflow: "hidden",
+	pointerEvents: "none",
+	position: "absolute",
+	zIndex: 1
+}), D = a.forwardRef(function(n, r) {
+	let i = p({
+		props: n,
+		name: "SInteractiveCard"
+	}), { "aria-describedby": a, "aria-label": c, "aria-labelledby": l, children: u, disableLift: d = !1, disabled: f = !1, href: v, interactive: y = !0, onClick: b, overlay: x, sheen: S = !1, slotProps: C, slots: D, sx: O, ...k } = i, A = v !== void 0 || b !== void 0, j = {
+		...i,
+		clickable: A,
+		disableLift: d,
+		disabled: f,
+		interactive: y,
+		sheen: S
+	}, M = D?.root ?? w, N = D?.actionArea ?? T, P = D?.overlay ?? E, F = h((e) => {
+		if (f) {
+			e.preventDefault();
+			return;
+		}
+		b?.(e);
+	}), { ref: I, sx: L, ...R } = _(M, m(t(C?.root, j), {
+		...k,
+		"aria-describedby": A ? void 0 : a,
+		"aria-label": A ? void 0 : c,
+		"aria-labelledby": A ? void 0 : l
+	}), j), z = g(I, r), B = m(t(C?.actionArea, j), {
+		"aria-describedby": a,
+		"aria-label": c,
+		"aria-labelledby": l,
+		onClick: F
+	}), V = _(N, {
+		...B,
+		component: v === void 0 ? "button" : "a",
+		disabled: f || B.disabled,
+		href: v,
+		nativeButton: v === void 0,
+		type: v === void 0 ? "button" : void 0
+	}, j), H = _(P, t(C?.overlay, j) ?? {}, j);
+	return /* @__PURE__ */ s(M, {
+		...R,
+		ref: z,
+		sx: [...e(L), ...e(O)],
+		children: [A ? /* @__PURE__ */ o(N, {
+			...V,
+			children: u
+		}) : u, x == null ? null : /* @__PURE__ */ o(P, {
+			...H,
+			"aria-hidden": !0,
+			children: x
+		})]
+	});
+});
+D.displayName = "SInteractiveCard";
+//#endregion
+export { D as SInteractiveCard, D as default };