@solostylist/ui-kit 1.0.230 → 2.0.0

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

@@ -0,0 +1,185 @@
+import { t as e } from "../useTheme-BIWMbX3i.js";
+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-DKqWMRgW.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;

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

@@ -0,0 +1,2 @@
+import { t as e } from "../theme-demo-components-section-gtIYRngY.js";
+export { e as SoloStylistSection };

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

@@ -0,0 +1,7 @@
+import { HeadingVariant } from './types';
+export declare const headingSamples: {
+    variant: HeadingVariant;
+    label: string;
+    description: string;
+}[];
+export declare const shadowLevels: number[];

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

@@ -0,0 +1,45 @@
+//#region lib/s-theme-demo/theme-demo-data.ts
+var e = [
+	{
+		variant: "h1",
+		label: "Display Large",
+		description: "Used for hero sections and primary headings"
+	},
+	{
+		variant: "h2",
+		label: "Display Medium",
+		description: "Used for page titles and major sections"
+	},
+	{
+		variant: "h3",
+		label: "Display Small",
+		description: "Used for large section headings"
+	},
+	{
+		variant: "h4",
+		label: "Headline Large",
+		description: "Used for card titles and content headings"
+	},
+	{
+		variant: "h5",
+		label: "Headline Medium",
+		description: "Used for subsection headings"
+	},
+	{
+		variant: "h6",
+		label: "Headline Small",
+		description: "Used for component titles and labels"
+	}
+], t = [
+	0,
+	1,
+	2,
+	4,
+	6,
+	8,
+	12,
+	16,
+	24
+];
+//#endregion
+export { e as headingSamples, t as shadowLevels };

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

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

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

@@ -0,0 +1,95 @@
+import "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Alert as n, Box as r, Card as i, CardContent as a, Chip as o, Stack as s, Typography as c } from "@mui/material";
+//#region lib/s-theme-demo/theme-demo-interactive-section.tsx
+var l = () => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(s, {
+	spacing: 3,
+	children: [
+		/* @__PURE__ */ t(r, { children: [/* @__PURE__ */ e(c, {
+			variant: "h6",
+			sx: { mb: 2 },
+			children: "Alerts"
+		}), /* @__PURE__ */ t(s, {
+			sx: { gap: 2 },
+			children: [
+				/* @__PURE__ */ e(n, {
+					severity: "success",
+					children: "Success alert - Operation completed successfully!"
+				}),
+				/* @__PURE__ */ e(n, {
+					severity: "warning",
+					children: "Warning alert - Please review your input."
+				}),
+				/* @__PURE__ */ e(n, {
+					severity: "error",
+					children: "Error alert - Something went wrong."
+				}),
+				/* @__PURE__ */ e(n, {
+					severity: "info",
+					children: "Info alert - Here's some useful information."
+				})
+			]
+		})] }),
+		/* @__PURE__ */ t(r, { children: [/* @__PURE__ */ e(c, {
+			variant: "h6",
+			sx: { mb: 2 },
+			children: "Color Variants"
+		}), /* @__PURE__ */ t(s, {
+			direction: "row",
+			sx: {
+				flexWrap: "wrap",
+				gap: 2
+			},
+			children: [
+				/* @__PURE__ */ e(o, { label: "Default" }),
+				/* @__PURE__ */ e(o, {
+					label: "Primary",
+					color: "primary"
+				}),
+				/* @__PURE__ */ e(o, {
+					label: "Secondary",
+					color: "secondary"
+				}),
+				/* @__PURE__ */ e(o, {
+					label: "Success",
+					color: "success"
+				}),
+				/* @__PURE__ */ e(o, {
+					label: "Warning",
+					color: "warning"
+				}),
+				/* @__PURE__ */ e(o, {
+					label: "Error",
+					color: "error"
+				}),
+				/* @__PURE__ */ e(o, {
+					label: "Info",
+					color: "info"
+				})
+			]
+		})] }),
+		/* @__PURE__ */ t(r, { children: [/* @__PURE__ */ e(c, {
+			variant: "h6",
+			sx: { mb: 2 },
+			children: "Chip Sizes"
+		}), /* @__PURE__ */ t(s, {
+			direction: "row",
+			sx: {
+				alignItems: "center",
+				flexWrap: "wrap",
+				gap: 2
+			},
+			children: [/* @__PURE__ */ e(o, {
+				label: "Small",
+				color: "primary",
+				size: "small"
+			}), /* @__PURE__ */ e(o, {
+				label: "Medium",
+				color: "primary",
+				size: "medium"
+			})]
+		})] })
+	]
+}) }) }) });
+//#endregion
+export { l as InteractiveSection };

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

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

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

@@ -0,0 +1,52 @@
+import { shadowLevels as e } from "./theme-demo-data.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Box as r, Card as i, CardContent as a, Paper as o, Stack as s, Typography as c } from "@mui/material";
+//#region lib/s-theme-demo/theme-demo-shadow-section.tsx
+var l = () => /* @__PURE__ */ t(i, { children: /* @__PURE__ */ n(a, { children: [/* @__PURE__ */ t(c, {
+	variant: "h6",
+	sx: { mb: 2 },
+	children: "Shadow System"
+}), /* @__PURE__ */ n(s, {
+	direction: "row",
+	sx: {
+		flexWrap: "wrap",
+		gap: 2
+	},
+	children: [e.map((e) => /* @__PURE__ */ n(r, {
+		sx: { textAlign: "center" },
+		children: [/* @__PURE__ */ t(o, {
+			elevation: e,
+			sx: {
+				width: 80,
+				height: 80,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				mb: 1,
+				borderRadius: 2
+			},
+			children: /* @__PURE__ */ t(c, {
+				variant: "h6",
+				children: e
+			})
+		}), /* @__PURE__ */ n(c, {
+			variant: "caption",
+			children: ["Elevation ", e]
+		})]
+	}, e)), /* @__PURE__ */ n(r, {
+		sx: { textAlign: "center" },
+		children: [/* @__PURE__ */ t(o, { sx: {
+			width: 80,
+			height: 80,
+			mb: 1,
+			borderRadius: 2,
+			boxShadow: "var(--s-palette-baseShadow)"
+		} }), /* @__PURE__ */ t(c, {
+			variant: "caption",
+			children: "Custom Shadow"
+		})]
+	})]
+})] }) });
+//#endregion
+export { l as ShadowSection };

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

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

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

@@ -0,0 +1,129 @@
+import { t as e } from "../useTheme-BIWMbX3i.js";
+import { formatFontSize as t } from "./utils.js";
+import { headingSamples as n } from "./theme-demo-data.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Box as a, Card as o, CardContent as s, Stack as c, Typography as l } from "@mui/material";
+//#region lib/s-theme-demo/theme-demo-typography-section.tsx
+var u = () => {
+	let u = e();
+	return /* @__PURE__ */ r(o, { children: /* @__PURE__ */ i(s, { children: [/* @__PURE__ */ r(l, {
+		variant: "h6",
+		sx: { mb: 2 },
+		children: "Typography System"
+	}), /* @__PURE__ */ r(c, {
+		spacing: 3,
+		children: /* @__PURE__ */ i(c, {
+			spacing: 2,
+			children: [
+				n.map(({ variant: e, label: n, description: o }) => {
+					let s = u.typography[e];
+					return /* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(l, {
+						variant: e,
+						gutterBottom: !0,
+						children: n
+					}), /* @__PURE__ */ i(l, {
+						variant: "caption",
+						children: [
+							e,
+							" - ",
+							t(s.fontSize, u.typography.htmlFontSize),
+							", Weight",
+							" ",
+							s.fontWeight,
+							" - ",
+							o
+						]
+					})] }, e);
+				}),
+				/* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(l, {
+					variant: "body1",
+					gutterBottom: !0,
+					children: "Body Large - The primary text style used for most content. It provides excellent readability and is suitable for paragraphs, descriptions, and general text content. This is the main body text variant."
+				}), /* @__PURE__ */ r(l, {
+					variant: "caption",
+					children: "body1 - 1rem (16px), Weight 400, Line height 1.5"
+				})] }),
+				/* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(l, {
+					variant: "body2",
+					gutterBottom: !0,
+					children: "Body Medium - Secondary text style, often used for supporting information, captions, and less prominent content elements. Slightly smaller than body1 for hierarchy."
+				}), /* @__PURE__ */ r(l, {
+					variant: "caption",
+					children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43"
+				})] }),
+				/* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(l, {
+					variant: "subtitle1",
+					gutterBottom: !0,
+					children: "Subtitle Large - Used for prominent secondary text"
+				}), /* @__PURE__ */ r(l, {
+					variant: "caption",
+					children: "subtitle1 - 1rem (16px), Weight 500"
+				})] }),
+				/* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(l, {
+					variant: "subtitle2",
+					gutterBottom: !0,
+					children: "Subtitle Small - Used for form labels and secondary headings"
+				}), /* @__PURE__ */ r(l, {
+					variant: "caption",
+					children: "subtitle2 - 0.875rem (14px), Weight 500"
+				})] }),
+				/* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(l, {
+					variant: "caption",
+					component: "div",
+					gutterBottom: !0,
+					children: "Caption Text - Used for annotations, helper text, and fine print"
+				}), /* @__PURE__ */ r(l, {
+					variant: "caption",
+					children: "caption - 0.75rem (12px), Weight 400"
+				})] }),
+				/* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(l, {
+					variant: "overline",
+					component: "div",
+					gutterBottom: !0,
+					children: "OVERLINE TEXT - USED FOR LABELS AND CATEGORIES"
+				}), /* @__PURE__ */ r(l, {
+					variant: "caption",
+					children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px"
+				})] }),
+				/* @__PURE__ */ r(l, {
+					variant: "body1",
+					sx: { color: "text.primary" },
+					children: "Primary Text - Main content color"
+				}),
+				/* @__PURE__ */ r(l, {
+					variant: "body1",
+					sx: { color: "text.secondary" },
+					children: "Secondary Text - Supporting content color"
+				}),
+				/* @__PURE__ */ r(l, {
+					variant: "body1",
+					sx: { color: "text.disabled" },
+					children: "Disabled Text - Inactive content color"
+				}),
+				/* @__PURE__ */ r(l, {
+					variant: "body1",
+					sx: { color: "primary.main" },
+					children: "Primary Brand - Brand color text"
+				}),
+				/* @__PURE__ */ r(l, {
+					variant: "body1",
+					sx: { color: "success.main" },
+					children: "Success Text - Positive feedback"
+				}),
+				/* @__PURE__ */ r(l, {
+					variant: "body1",
+					sx: { color: "warning.main" },
+					children: "Warning Text - Caution indicators"
+				}),
+				/* @__PURE__ */ r(l, {
+					variant: "body1",
+					sx: { color: "error.main" },
+					children: "Error Text - Error messages"
+				})
+			]
+		})
+	})] }) });
+};
+//#endregion
+export { u as TypographySection };

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

@@ -0,0 +1,17 @@
+import { BoxProps } from '@mui/material/Box';
+export type SThemeDemoSection = 'colors' | 'components' | 'forms' | 'interactive' | 'ramps' | 'shadows' | 'typography';
+/**
+ * Props interface for SThemeDemo component
+ */
+export interface SThemeDemoProps extends Omit<BoxProps, 'children' | 'component' | 'title'> {
+    /** Optional title for the demo */
+    title?: string;
+    /** Compact layout mode */
+    compact?: boolean;
+    /** Additional sections to show */
+    sections?: SThemeDemoSection[];
+}
+export type SThemeDemoOwnerState = SThemeDemoProps & {
+    compact: boolean;
+};
+export type HeadingVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const formatFontSize: (fontSize: React.CSSProperties["fontSize"], rootFontSize?: number) => string;