@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/theme/components/toggle-button.js

@@ -1,2 +1,93 @@
-import { t as e } from "../../toggle-button-TmtJ4nSp.js";
-export { e as MuiToggleButton };
+import { actionHoverMedia as e, getFocusVisibleStyle as t, getSelectedActionStyle as n, isSemanticActionColor as r, reducedPressMotionStyle as i, semanticActionColors as a } from "./action-styles.js";
+import { buttonBaseClasses as o } from "@mui/material/ButtonBase";
+import { toggleButtonClasses as s } from "@mui/material/ToggleButton";
+//#region lib/theme/components/toggle-button.tsx
+var c = (n) => {
+	let r = (n.vars ?? n).palette;
+	return {
+		backgroundColor: r.action.selected,
+		color: r.text.primary,
+		[`&.${o.focusVisible}`]: {
+			...t(n),
+			backgroundColor: r.action.selected
+		},
+		[e]: { "&:hover": {
+			backgroundColor: r.action.selected,
+			color: r.text.primary
+		} },
+		[`&.${s.disabled}`]: {
+			backgroundColor: r.action.disabledBackground,
+			borderColor: "transparent",
+			color: r.action.disabled
+		}
+	};
+}, l = {
+	defaultProps: { disableFocusRipple: !0 },
+	styleOverrides: { root: ({ ownerState: l, theme: u }) => {
+		let d = (u.vars ?? u).palette, f = l.color ?? "standard", p = r(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 }),
+			[`&.${o.focusVisible}`]: t(u, p),
+			[e]: { [`&:hover:not(.${s.selected})`]: {
+				backgroundColor: d.action.hover,
+				color: d.text.primary
+			} },
+			[`&:active:not(.${s.disabled}):not(.${s.selected})`]: { backgroundColor: d.action.selected },
+			[`&.${s.disabled}:not(.${s.selected})`]: {
+				backgroundColor: "transparent",
+				borderColor: d.action.disabledBackground,
+				color: d.action.disabled
+			},
+			...i,
+			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: { [`&.${s.selected}`]: c(u) }
+				},
+				...a.map((e) => ({
+					props: { color: e },
+					style: { [`&.${s.selected}`]: {
+						...n(u, e),
+						borderColor: "transparent"
+					} }
+				}))
+			]
+		};
+	} }
+};
+//#endregion
+export { l as MuiToggleButton };