@solostylist/ui-kit 2.0.1 → 2.0.2

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

@@ -0,0 +1,267 @@
+import { t as e } from "./createSvgIcon-3y-gS0r1.js";
+import { t } from "./Add-CEnTWsXs.js";
+import { t as n } from "./Favorite-BP343hjM.js";
+import { t as r } from "./s-text-field-HYyDf1Jo.js";
+import { SButton as i } from "./s-button/s-button.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Box as c, Card as l, CardContent as u, Stack as d, Typography as f } from "@mui/material";
+//#region ../../node_modules/@mui/icons-material/Share.mjs
+var p = e(/* @__PURE__ */ o("path", { d: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92" }), "Share"), m = e(/* @__PURE__ */ o("path", { d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" }), "Star"), h = () => {
+	let [e, h] = a.useState("");
+	return /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(c, { children: /* @__PURE__ */ s(d, {
+		spacing: 3,
+		children: [
+			/* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(f, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Button Variants"
+			}), /* @__PURE__ */ s(d, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "primary",
+						children: "Contained"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "outlined",
+						color: "primary",
+						children: "Outlined"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "text",
+						color: "primary",
+						children: "Text"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(f, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Color Variants (Contained)"
+			}), /* @__PURE__ */ s(d, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "primary",
+						children: "Primary"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "secondary",
+						children: "Secondary"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "success",
+						children: "Success"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "warning",
+						children: "Warning"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "error",
+						children: "Error"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "info",
+						children: "Info"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(f, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Color Variants (Outlined)"
+			}), /* @__PURE__ */ s(d, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ o(i, {
+						variant: "outlined",
+						color: "primary",
+						children: "Primary"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "outlined",
+						color: "secondary",
+						children: "Secondary"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "outlined",
+						color: "success",
+						children: "Success"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "outlined",
+						color: "warning",
+						children: "Warning"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "outlined",
+						color: "error",
+						children: "Error"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "outlined",
+						color: "info",
+						children: "Info"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(f, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Button Sizes"
+			}), /* @__PURE__ */ s(d, {
+				direction: "row",
+				sx: {
+					alignItems: "center",
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "primary",
+						size: "small",
+						children: "Small"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "primary",
+						size: "medium",
+						children: "Medium"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "primary",
+						size: "large",
+						children: "Large"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(f, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Button States"
+			}), /* @__PURE__ */ s(d, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "primary",
+						children: "Default"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "primary",
+						disabled: !0,
+						children: "Disabled"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "outlined",
+						color: "primary",
+						disabled: !0,
+						children: "Disabled Outlined"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "text",
+						color: "primary",
+						disabled: !0,
+						children: "Disabled Text"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(f, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Buttons with Icons"
+			}), /* @__PURE__ */ s(d, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "primary",
+						startIcon: /* @__PURE__ */ o(t, {}),
+						children: "Start Icon"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "contained",
+						color: "secondary",
+						endIcon: /* @__PURE__ */ o(p, {}),
+						children: "End Icon"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "outlined",
+						color: "success",
+						startIcon: /* @__PURE__ */ o(m, {}),
+						children: "Outlined + Icon"
+					}),
+					/* @__PURE__ */ o(i, {
+						variant: "text",
+						color: "error",
+						endIcon: /* @__PURE__ */ o(n, {}),
+						children: "Text + Icon"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(f, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Form Components"
+			}), /* @__PURE__ */ s(d, {
+				sx: { gap: 2 },
+				children: [
+					/* @__PURE__ */ o(r, {
+						label: "Enhanced Text Field",
+						value: e,
+						onChange: (e) => h(e.target.value),
+						placeholder: "Enter text here...",
+						helperText: "This is an enhanced STextField component"
+					}),
+					/* @__PURE__ */ o(r, {
+						label: "Password Field",
+						type: "password",
+						placeholder: "Enter password...",
+						helperText: "Password input with custom styling"
+					}),
+					/* @__PURE__ */ o(r, {
+						label: "Multiline Text",
+						multiline: !0,
+						rows: 3,
+						placeholder: "Enter multiple lines...",
+						helperText: "Multiline text input"
+					})
+				]
+			})] })
+		]
+	}) }) }) });
+};
+//#endregion
+export { h as t };

package/dist/{theme-primitives-CRfnMsNy.js → theme-primitives-CXtaMdVj.js}

@@ -1,185 +1,186 @@
-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 { a as m, i as h, n as g, o as _, r as v, s as y } from "./gradients-DSnBONEQ.js";
-import { alpha as b, createTheme as x, lighten as S } from "@mui/material/styles";
+import { o as e, t } from "./colorManipulator-DmUjcif3.js";
+import { t as n } from "./createTheme-xB2Em0Na.js";
+import { a as r, c as i, d as a, f as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./colors-Bik9qOU9.js";
+import { a as _, i as v, n as y, o as b, r as x, s as S } from "./gradients-mQAYCK0_.js";
 //#region ../core/dist/interaction.js
 var C = .9, w = { gradient: {
 	themeKey: "palette.gradient",
 	cssProperty: "backgroundImage"
-} }, T = x(), E = { palette: {
-	gradient: g,
+} }, T = n(), E = { palette: {
+	gradient: y,
 	blackAlpha: {
-		zero: _[0],
-		light: _[10],
-		medium: _[50],
-		dark: _[80],
-		full: _[100]
+		zero: b[0],
+		light: b[10],
+		medium: b[50],
+		dark: b[80],
+		full: b[100]
 	},
 	whiteAlpha: {
-		zero: y[0],
-		light: y[10],
-		medium: y[50],
-		dark: y[80],
-		full: y[100]
+		zero: S[0],
+		light: S[10],
+		medium: S[50],
+		dark: S[80],
+		full: S[100]
 	},
-	ui: { pulse: v },
+	ui: { pulse: x },
 	primary: {
-		...s,
-		contrastText: _[100],
-		light: s[400],
-		main: s[500],
-		dark: s[500],
+		...u,
+		contrastText: b[100],
+		light: u[400],
+		main: u[500],
+		dark: u[500],
 		white: "#ffffff",
 		black: "#000000"
 	},
 	secondary: {
-		...l,
-		contrastText: _[100],
-		light: l[300],
-		main: S(l[400], .05),
-		dark: l[400],
+		...f,
+		contrastText: b[100],
+		light: f[300],
+		main: e(f[400], .05),
+		dark: f[400],
 		white: "#ffffff",
 		black: "#000000"
 	},
 	info: {
-		...f,
-		contrastText: _[100],
-		light: f[300],
-		main: f[400],
-		dark: f[400],
+		...h,
+		contrastText: b[100],
+		light: h[300],
+		main: h[400],
+		dark: h[400],
 		white: "#ffffff",
 		black: "#000000"
 	},
 	warning: {
-		...r,
-		contrastText: _[100],
-		light: r[400],
-		main: r[500],
-		dark: r[500],
+		...o,
+		contrastText: b[100],
+		light: o[400],
+		main: o[500],
+		dark: o[500],
 		white: "#ffffff",
 		black: "#000000"
 	},
 	error: {
-		...o,
-		contrastText: _[100],
-		light: o[300],
-		main: S(o[400], .22),
-		dark: S(o[400], .15),
+		...l,
+		contrastText: b[100],
+		light: l[300],
+		main: e(l[400], .22),
+		dark: e(l[400], .15),
 		white: "#ffffff",
 		black: "#000000"
 	},
 	success: {
-		...i,
-		contrastText: _[100],
-		light: i[300],
-		main: i[400],
-		dark: i[400],
+		...s,
+		contrastText: b[100],
+		light: s[300],
+		main: s[400],
+		dark: s[400],
 		white: "#ffffff",
 		black: "#000000"
 	},
-	grey: u,
-	divider: b(u[700], .9),
+	grey: p,
+	divider: t(p[700], .9),
 	background: {
-		default: u[900],
-		paper: u[800]
+		default: p[900],
+		paper: p[800]
 	},
 	text: {
-		primary: u[50],
-		secondary: u[400],
-		disabled: u[500]
+		primary: p[50],
+		secondary: p[400],
+		disabled: p[500]
 	},
 	action: {
-		active: u[50],
-		hover: b(u[600], .2),
-		selected: b(u[600], .3)
+		active: p[50],
+		hover: t(p[600], .2),
+		selected: t(p[600], .3)
 	},
 	baseShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
 } }, D = {
 	light: { palette: {
-		gradient: h,
+		gradient: v,
 		blackAlpha: {
-			zero: _[0],
-			light: _[10],
-			medium: _[50],
-			dark: _[80],
-			full: _[100]
+			zero: b[0],
+			light: b[10],
+			medium: b[50],
+			dark: b[80],
+			full: b[100]
 		},
 		whiteAlpha: {
-			zero: y[0],
-			light: y[10],
-			medium: y[50],
-			dark: y[80],
-			full: y[100]
+			zero: S[0],
+			light: S[10],
+			medium: S[50],
+			dark: S[80],
+			full: S[100]
 		},
-		ui: { pulse: m },
+		ui: { pulse: _ },
 		primary: {
-			...c,
-			contrastText: c[50],
-			light: c[200],
-			main: c[500],
-			dark: c[700],
+			...d,
+			contrastText: d[50],
+			light: d[200],
+			main: d[500],
+			dark: d[700],
 			white: "#ffffff",
 			black: "#000000"
 		},
 		secondary: {
-			...p,
-			contrastText: p[50],
-			light: p[200],
-			main: p[500],
-			dark: p[700],
+			...g,
+			contrastText: g[50],
+			light: g[200],
+			main: g[500],
+			dark: g[700],
 			white: "#ffffff",
 			black: "#000000"
 		},
 		info: {
-			...e,
-			contrastText: e[50],
-			light: e[200],
-			main: e[700],
-			dark: e[800],
+			...r,
+			contrastText: r[50],
+			light: r[200],
+			main: r[700],
+			dark: r[800],
 			white: "#ffffff",
 			black: "#000000"
 		},
 		warning: {
-			...a,
-			contrastText: a[50],
-			light: a[200],
-			main: a[900],
-			dark: a[900],
+			...c,
+			contrastText: c[50],
+			light: c[200],
+			main: c[900],
+			dark: c[900],
 			white: "#ffffff",
 			black: "#000000"
 		},
 		error: {
-			...n,
-			contrastText: n[50],
-			light: n[200],
-			main: n[600],
-			dark: n[700],
+			...a,
+			contrastText: a[50],
+			light: a[200],
+			main: a[600],
+			dark: a[700],
 			white: "#ffffff",
 			black: "#000000"
 		},
 		success: {
-			...t,
-			contrastText: t[50],
-			light: t[200],
-			main: t[800],
-			dark: t[900],
+			...i,
+			contrastText: i[50],
+			light: i[200],
+			main: i[800],
+			dark: i[900],
 			white: "#ffffff",
 			black: "#000000"
 		},
-		grey: d,
-		divider: b(d[300], .9),
+		grey: m,
+		divider: t(m[300], .9),
 		background: {
-			default: d[50],
-			paper: d[100]
+			default: m[50],
+			paper: m[100]
 		},
 		text: {
-			primary: d[900],
-			secondary: d[600],
-			disabled: d[400]
+			primary: m[900],
+			secondary: m[600],
+			disabled: m[400]
 		},
 		action: {
-			active: d[900],
-			hover: b(d[300], .2),
-			selected: b(d[300], .3)
+			active: m[900],
+			hover: t(m[300], .2),
+			selected: t(m[300], .3)
 		},
 		baseShadow: "rgba(15, 23, 42, 0.08) 0px 2px 8px 0px, rgba(15, 23, 42, 0.04) 0px 1px 2px -1px"
 	} },

package/dist/toggle-button-BsGb-tOr.js

@@ -0,0 +1,104 @@
+import { t as e } from "./generateUtilityClasses-DvX505Gy.js";
+import { t } from "./buttonBaseClasses-B90LjsNK.js";
+import { actionHoverMedia as n, getFocusVisibleStyle as r, getSelectedActionStyle as i, isSemanticActionColor as a, reducedPressMotionStyle as o, semanticActionColors as s } from "./theme/components/action-styles.js";
+//#region ../../node_modules/@mui/material/ToggleButton/toggleButtonClasses.mjs
+var c = e("MuiToggleButton", [
+	"root",
+	"disabled",
+	"selected",
+	"standard",
+	"primary",
+	"secondary",
+	"sizeSmall",
+	"sizeMedium",
+	"sizeLarge",
+	"fullWidth"
+]), l = (e) => {
+	let i = (e.vars ?? e).palette;
+	return {
+		backgroundColor: i.action.selected,
+		color: i.text.primary,
+		[`&.${t.focusVisible}`]: {
+			...r(e),
+			backgroundColor: i.action.selected
+		},
+		[n]: { "&:hover": {
+			backgroundColor: i.action.selected,
+			color: i.text.primary
+		} },
+		[`&.${c.disabled}`]: {
+			backgroundColor: i.action.disabledBackground,
+			borderColor: "transparent",
+			color: i.action.disabled
+		}
+	};
+}, u = {
+	defaultProps: { disableFocusRipple: !0 },
+	styleOverrides: { root: ({ ownerState: e, theme: u }) => {
+		let d = (u.vars ?? u).palette, f = e.color ?? "standard", p = a(f) ? d[f] : d.primary;
+		return {
+			borderRadius: (u.vars ?? u).shape.borderRadius,
+			boxSizing: "border-box",
+			gap: u.spacing(1),
+			fontWeight: 500,
+			paddingBlock: 0,
+			textTransform: "none",
+			transition: u.transitions.create([
+				"background-color",
+				"border-color",
+				"color"
+			], { duration: u.transitions.duration.shorter }),
+			[`&.${t.focusVisible}`]: r(u, p),
+			[n]: { [`&:hover:not(.${c.selected})`]: {
+				backgroundColor: d.action.hover,
+				color: d.text.primary
+			} },
+			[`&:active:not(.${c.disabled}):not(.${c.selected})`]: { backgroundColor: d.action.selected },
+			[`&.${c.disabled}:not(.${c.selected})`]: {
+				backgroundColor: "transparent",
+				borderColor: d.action.disabledBackground,
+				color: d.action.disabled
+			},
+			...o,
+			variants: [
+				{
+					props: { size: "small" },
+					style: {
+						height: u.spacing(4.5),
+						minWidth: u.spacing(4.5),
+						paddingInline: u.spacing(1.5)
+					}
+				},
+				{
+					props: { size: "medium" },
+					style: {
+						height: u.spacing(5),
+						minWidth: u.spacing(5),
+						paddingInline: u.spacing(2)
+					}
+				},
+				{
+					props: { size: "large" },
+					style: {
+						height: u.spacing(5.5),
+						minWidth: u.spacing(5.5),
+						paddingInline: u.spacing(2.5)
+					}
+				},
+				{
+					props: { color: "standard" },
+					style: { [`&.${c.selected}`]: l(u) }
+				},
+				...s.map((e) => ({
+					props: { color: e },
+					style: { [`&.${c.selected}`]: {
+						...i(u, e),
+						borderColor: "transparent"
+					} }
+				}))
+			]
+		};
+	} }
+};
+//#endregion
+export { u as t };