@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -0,0 +1,265 @@
+import { SButton as e } from "../s-button/s-button.js";
+import { STextField as t } from "../s-text-field/s-text-field.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Add as a, Favorite as o, Share as s, Star as c } from "@mui/icons-material";
+import { Box as l, Card as u, CardContent as d, Stack as f, Typography as p } from "@mui/material";
+//#region lib/s-theme-demo/theme-demo-components-section.tsx
+var m = () => {
+	let [m, h] = n.useState("");
+	return /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(l, { children: /* @__PURE__ */ i(f, {
+		spacing: 3,
+		children: [
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Button Variants"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						children: "Contained"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "primary",
+						children: "Outlined"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "text",
+						color: "primary",
+						children: "Text"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Color Variants (Contained)"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						children: "Primary"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "secondary",
+						children: "Secondary"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "success",
+						children: "Success"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "warning",
+						children: "Warning"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "error",
+						children: "Error"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "info",
+						children: "Info"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Color Variants (Outlined)"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "primary",
+						children: "Primary"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "secondary",
+						children: "Secondary"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "success",
+						children: "Success"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "warning",
+						children: "Warning"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "error",
+						children: "Error"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "info",
+						children: "Info"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Button Sizes"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					alignItems: "center",
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						size: "small",
+						children: "Small"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						size: "medium",
+						children: "Medium"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						size: "large",
+						children: "Large"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Button States"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						children: "Default"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						disabled: !0,
+						children: "Disabled"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "primary",
+						disabled: !0,
+						children: "Disabled Outlined"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "text",
+						color: "primary",
+						disabled: !0,
+						children: "Disabled Text"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Buttons with Icons"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						startIcon: /* @__PURE__ */ r(a, {}),
+						children: "Start Icon"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "secondary",
+						endIcon: /* @__PURE__ */ r(s, {}),
+						children: "End Icon"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "success",
+						startIcon: /* @__PURE__ */ r(c, {}),
+						children: "Outlined + Icon"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "text",
+						color: "error",
+						endIcon: /* @__PURE__ */ r(o, {}),
+						children: "Text + Icon"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Form Components"
+			}), /* @__PURE__ */ i(f, {
+				sx: { gap: 2 },
+				children: [
+					/* @__PURE__ */ r(t, {
+						label: "Enhanced Text Field",
+						value: m,
+						onChange: (e) => h(e.target.value),
+						placeholder: "Enter text here...",
+						helperText: "This is an enhanced STextField component"
+					}),
+					/* @__PURE__ */ r(t, {
+						label: "Password Field",
+						type: "password",
+						placeholder: "Enter password...",
+						helperText: "Password input with custom styling"
+					}),
+					/* @__PURE__ */ r(t, {
+						label: "Multiline Text",
+						multiline: !0,
+						rows: 3,
+						placeholder: "Enter multiple lines...",
+						helperText: "Multiline text input"
+					})
+				]
+			})] })
+		]
+	}) }) }) });
+};
+//#endregion
+export { m 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 { formatFontSize as e } from "./utils.js";
+import { headingSamples as t } from "./theme-demo-data.js";
+import { useTheme as n } from "@mui/material/styles";
+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 = n();
+	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: [
+				t.map(({ variant: t, label: n, description: o }) => {
+					let s = u.typography[t];
+					return /* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(l, {
+						variant: t,
+						gutterBottom: !0,
+						children: n
+					}), /* @__PURE__ */ i(l, {
+						variant: "caption",
+						children: [
+							t,
+							" - ",
+							e(s.fontSize, u.typography.htmlFontSize),
+							", Weight",
+							" ",
+							s.fontWeight,
+							" - ",
+							o
+						]
+					})] }, t);
+				}),
+				/* @__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;

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

@@ -0,0 +1,9 @@
+//#region lib/s-theme-demo/utils.ts
+var e = (e, t = 16) => {
+	if (typeof e == "number") return `${e}px`;
+	if (typeof e != "string") return "";
+	let n = Number.parseFloat(e);
+	return Number.isNaN(n) ? e : e.endsWith("rem") ? `${e} (${Math.round(n * t)}px)` : e;
+};
+//#endregion
+export { e as formatFontSize };

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

@@ -1,2 +1,3 @@
+export type {} from '../theme/component-augmentation';
 export { default, default as SThemeProvider } from './s-theme-provider';
 export type { SThemeProviderProps } from './s-theme-provider';