@soroush.tech/design-system 0.1.0

package/dist/Avatar.mjs

@@ -0,0 +1,103 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { Flex } from "./Flex.mjs";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Avatar/Avatar.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"variant",
+	"size",
+	"ring",
+	"ringColor",
+	"ringWidth"
+]);
+const avatarSizeSystem = (0, src_exports.system)({ size: {
+	properties: ["width", "height"],
+	scale: "avatar"
+} });
+const avatarVariants = (0, src_exports.variant)({
+	prop: "variant",
+	variants: {
+		circular: { borderRadius: "50%" },
+		rounded: { borderRadius: "md" },
+		square: { borderRadius: 0 }
+	}
+});
+const ringSystem = (0, src_exports.system)({
+	ringColor: {
+		property: "outlineColor",
+		scale: "border"
+	},
+	ringWidth: {
+		property: "outlineWidth",
+		scale: "borderWidths"
+	}
+});
+const AvatarRoot = styled(Flex, {
+	name: "Avatar",
+	label: "avatar",
+	shouldForwardProp
+})({
+	overflow: "hidden",
+	flexShrink: 0,
+	alignItems: "center",
+	justifyContent: "center",
+	flexDirection: "row"
+}, avatarSizeSystem, avatarVariants, ({ ring }) => ring ? {
+	outlineStyle: "solid",
+	outlineOffset: "2px"
+} : {}, ringSystem);
+const AvatarImg = styled("img", {
+	name: "Avatar",
+	slot: "img",
+	label: "AvatarImg"
+})({
+	width: "100%",
+	height: "100%",
+	objectFit: "cover",
+	display: "block"
+});
+function Avatar({ src, srcSet, alt, fallback, children, variant: variantProp, size: sizeProp, ring, ringColor: ringColorProp, ringWidth: ringWidthProp, ...rest }) {
+	const theme = useTheme();
+	const variant = variantProp ?? themeDefault(theme, "avatarVariant", "circular");
+	const size = sizeProp ?? themeDefault(theme, "avatarSize", "md");
+	const ringColor = ringColorProp ?? themeDefault(theme, "borderColor", "primary");
+	const ringWidth = ringWidthProp ?? themeDefault(theme, "borderWidth", "thin");
+	const [prevSrc, setPrevSrc] = useState(src);
+	const [prevSrcSet, setPrevSrcSet] = useState(srcSet);
+	const [prevFallback, setPrevFallback] = useState(fallback);
+	const [failed, setFailed] = useState(false);
+	const [useFallback, setUseFallback] = useState(false);
+	if (prevSrc !== src || prevSrcSet !== srcSet || prevFallback !== fallback) {
+		setPrevSrc(src);
+		setPrevSrcSet(srcSet);
+		setPrevFallback(fallback);
+		setFailed(false);
+		setUseFallback(false);
+	}
+	const hasPrimary = !!(src || srcSet);
+	const hasAnyImage = hasPrimary || !!fallback;
+	const handleError = () => {
+		if (!useFallback && fallback && hasPrimary) setUseFallback(true);
+		else setFailed(true);
+	};
+	const currentSrc = useFallback ? fallback : src ?? (srcSet ? void 0 : fallback);
+	const currentSrcSet = useFallback ? void 0 : srcSet;
+	return /* @__PURE__ */ jsx(AvatarRoot, {
+		variant,
+		size,
+		ring,
+		ringColor: ring ? ringColor : void 0,
+		ringWidth: ring ? ringWidth : void 0,
+		...rest,
+		children: hasAnyImage && !failed ? /* @__PURE__ */ jsx(AvatarImg, {
+			src: currentSrc,
+			srcSet: currentSrcSet,
+			alt,
+			onError: handleError
+		}) : children
+	});
+}
+//#endregion
+export { Avatar };

package/dist/Backdrop.cjs

@@ -0,0 +1,26 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_View = require("./View.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Backdrop/Backdrop.tsx
+const BackdropRoot = require_src.styled(require_View.View, {
+	name: "Backdrop",
+	label: "Backdrop"
+})({
+	position: "fixed",
+	inset: 0,
+	zIndex: -1,
+	pointerEvents: "none"
+});
+/**
+* @description Dimmed overlay rendered behind a modal's content. Defaults to the
+* theme `backdrop` background; forwards click and other props to the surface.
+*/
+function Backdrop(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackdropRoot, {
+		bg: "backdrop",
+		...props
+	});
+}
+//#endregion
+exports.Backdrop = Backdrop;

package/dist/Backdrop.d.cts

@@ -0,0 +1,10 @@
+import { s as ViewProps } from "./index-FwTocqhP.cjs";
+//#region src/Backdrop/Backdrop.d.ts
+type BackdropProps = ViewProps;
+/**
+ * @description Dimmed overlay rendered behind a modal's content. Defaults to the
+ * theme `backdrop` background; forwards click and other props to the surface.
+ */
+declare function Backdrop(props: Readonly<BackdropProps>): import("react").JSX.Element;
+//#endregion
+export { Backdrop, BackdropProps };

package/dist/Backdrop.d.mts

@@ -0,0 +1,10 @@
+import { s as ViewProps } from "./index-pX7tBQdJ.mjs";
+//#region src/Backdrop/Backdrop.d.ts
+type BackdropProps = ViewProps;
+/**
+ * @description Dimmed overlay rendered behind a modal's content. Defaults to the
+ * theme `backdrop` background; forwards click and other props to the surface.
+ */
+declare function Backdrop(props: Readonly<BackdropProps>): import("react").JSX.Element;
+//#endregion
+export { Backdrop, BackdropProps };

package/dist/Backdrop.mjs

@@ -0,0 +1,25 @@
+import { d as styled } from "./src-DcNT2aIK.mjs";
+import { View } from "./View.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Backdrop/Backdrop.tsx
+const BackdropRoot = styled(View, {
+	name: "Backdrop",
+	label: "Backdrop"
+})({
+	position: "fixed",
+	inset: 0,
+	zIndex: -1,
+	pointerEvents: "none"
+});
+/**
+* @description Dimmed overlay rendered behind a modal's content. Defaults to the
+* theme `backdrop` background; forwards click and other props to the surface.
+*/
+function Backdrop(props) {
+	return /* @__PURE__ */ jsx(BackdropRoot, {
+		bg: "backdrop",
+		...props
+	});
+}
+//#endregion
+export { Backdrop };

package/dist/Button.cjs

@@ -0,0 +1,178 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_utils = require("./utils.cjs");
+const require_CircularProgress = require("./CircularProgress.cjs");
+const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
+const require_useDefaultProps = require("./useDefaultProps-Cb-5FNok.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+let _emotion_react = require("@emotion/react");
+//#region src/Button/Button.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"gap",
+	"variant",
+	"size",
+	"shape",
+	"fullWidth",
+	"loading",
+	"loadingPosition",
+	"startIcon",
+	"endIcon",
+	"loadingIndicator"
+]);
+const ButtonLabel = require_src.styled("span", {
+	name: "Button",
+	slot: "label",
+	shouldForwardProp: (prop) => prop !== "invisible"
+})(({ invisible }) => ({
+	display: "inherit",
+	alignItems: "inherit",
+	justifyContent: "inherit",
+	...invisible && { opacity: 0 }
+}));
+const LoadingCenter = require_src.styled("span", {
+	name: "Button",
+	slot: "loader",
+	label: "ButtonLoader"
+})({
+	position: "absolute",
+	left: "50%",
+	top: "50%",
+	transform: "translate(-50%, -50%)",
+	display: "flex",
+	alignItems: "center"
+});
+const ButtonIcon = require_src.styled("span", {
+	name: "Button",
+	slot: "icon"
+})({
+	display: "inline-flex",
+	alignItems: "center",
+	fontSize: "inherit",
+	lineHeight: "inherit",
+	flexShrink: 0
+});
+const baseStyles = {
+	appearance: "none",
+	outline: "none",
+	cursor: "pointer",
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	fontFamily: "inherit",
+	textTransform: "uppercase",
+	textDecoration: "none",
+	lineHeight: 1,
+	transition: "background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease",
+	"&:disabled": {
+		cursor: "not-allowed",
+		opacity: .5
+	}
+};
+const buttonBaseSystem = (0, require_src.src_exports.system)({ gap: {
+	property: "gap",
+	scale: "space"
+} });
+const sizeVariants = ({ theme, size }) => {
+	const s = theme.sizes[size];
+	return {
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const variantStyles = ({ variant = "contained", theme, color = require_themeDefault.themeDefault(theme, "color", "primary") }) => {
+	const { main, dark, contrastText } = theme.palette[color];
+	if (variant === "contained") return {
+		backgroundColor: main,
+		color: contrastText,
+		border: `${theme.borderWidths.thin} solid transparent`,
+		"&:hover:not(:disabled)": { backgroundColor: dark },
+		"&:active:not(:disabled)": { backgroundColor: dark }
+	};
+	const hoverBg = require_utils.alpha(main, .08);
+	const activeBg = require_utils.alpha(main, .125);
+	const borderColor = variant === "outlined" ? main : "transparent";
+	return {
+		backgroundColor: "transparent",
+		color: main,
+		border: `${theme.borderWidths.thin} solid ${borderColor}`,
+		"&:hover:not(:disabled)": { backgroundColor: hoverBg },
+		"&:active:not(:disabled)": { backgroundColor: activeBg }
+	};
+};
+const shapeVariants = ({ shape = "square", theme }) => {
+	if (shape === "pill") return { borderRadius: "9999px" };
+	if (shape === "rounded") return { borderRadius: theme.radii[require_themeDefault.themeDefault(theme, "borderRadius", "md")] };
+	return { borderRadius: 0 };
+};
+const fullWidthStyles = ({ fullWidth }) => fullWidth ? { width: "100%" } : {};
+const focusVisibleStyles = ({ theme }) => ({ "&:focus-visible": {
+	outline: `2px solid ${theme.palette[require_themeDefault.themeDefault(theme, "color", "primary")].main}`,
+	outlineOffset: "2px"
+} });
+const safeLayout = (props) => (0, require_src.src_exports.layout)({
+	...props,
+	size: void 0
+});
+const ButtonRoot = require_src.styled("button", {
+	name: "Button",
+	shouldForwardProp,
+	systemProps: [
+		require_src.src_exports.space,
+		safeLayout,
+		buttonBaseSystem,
+		require_src.src_exports.typography,
+		require_src.src_exports.border
+	]
+})(baseStyles, sizeVariants, variantStyles, shapeVariants, fullWidthStyles, focusVisibleStyles);
+function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", letterSpacing = "tight", startIcon, endIcon, fullWidth, loading = false, loadingIndicator, loadingPosition = "center", children, disabled, href, ...rest }) {
+	const group = (0, react.useContext)(require_ButtonGroupContext.ButtonGroupContext);
+	const theme = (0, _emotion_react.useTheme)();
+	const dp = require_useDefaultProps.useDefaultProps("Button");
+	const resolvedVariant = variant ?? group.variant ?? dp.variant ?? require_themeDefault.themeDefault(theme, "buttonVariant", "contained");
+	const resolvedColor = color ?? group.color ?? dp.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
+	const resolvedSize = size ?? group.size ?? dp.size ?? require_themeDefault.themeDefault(theme, "size", "md");
+	const resolvedShape = shape ?? dp.shape ?? "square";
+	const resolvedFullWidth = fullWidth ?? group.fullWidth ?? false;
+	const resolvedDisabled = (disabled ?? group.disabled ?? false) || loading;
+	const indicator = loadingIndicator ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CircularProgress.CircularProgress, {
+		size: 16,
+		color: "inherit"
+	});
+	const isCenter = loading && loadingPosition === "center";
+	const start = loading && loadingPosition === "start" ? indicator : startIcon;
+	const end = loading && loadingPosition === "end" ? indicator : endIcon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ButtonRoot, {
+		as: href == null ? void 0 : "a",
+		href,
+		variant: resolvedVariant,
+		color: resolvedColor,
+		size: resolvedSize,
+		shape: resolvedShape,
+		gap,
+		fontWeight,
+		letterSpacing,
+		fullWidth: resolvedFullWidth,
+		disabled: resolvedDisabled,
+		"aria-busy": loading || void 0,
+		...rest,
+		children: [
+			start != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonIcon, { children: start }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonLabel, {
+				invisible: isCenter,
+				children
+			}),
+			isCenter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingCenter, { children: indicator }),
+			end != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonIcon, { children: end })
+		]
+	});
+}
+//#endregion
+exports.Button = Button;

package/dist/Button.d.cts

@@ -0,0 +1,2 @@
+import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-DASvoACZ.cjs";
+export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.d.mts

@@ -0,0 +1,2 @@
+import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-C0xMvDjL.mjs";
+export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.mjs

@@ -0,0 +1,175 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { alpha } from "./utils.mjs";
+import { CircularProgress } from "./CircularProgress.mjs";
+import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
+import { t as useDefaultProps } from "./useDefaultProps-CoApb4KT.mjs";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Button/Button.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"gap",
+	"variant",
+	"size",
+	"shape",
+	"fullWidth",
+	"loading",
+	"loadingPosition",
+	"startIcon",
+	"endIcon",
+	"loadingIndicator"
+]);
+const ButtonLabel = styled("span", {
+	name: "Button",
+	slot: "label",
+	shouldForwardProp: (prop) => prop !== "invisible"
+})(({ invisible }) => ({
+	display: "inherit",
+	alignItems: "inherit",
+	justifyContent: "inherit",
+	...invisible && { opacity: 0 }
+}));
+const LoadingCenter = styled("span", {
+	name: "Button",
+	slot: "loader",
+	label: "ButtonLoader"
+})({
+	position: "absolute",
+	left: "50%",
+	top: "50%",
+	transform: "translate(-50%, -50%)",
+	display: "flex",
+	alignItems: "center"
+});
+const ButtonIcon = styled("span", {
+	name: "Button",
+	slot: "icon"
+})({
+	display: "inline-flex",
+	alignItems: "center",
+	fontSize: "inherit",
+	lineHeight: "inherit",
+	flexShrink: 0
+});
+const baseStyles = {
+	appearance: "none",
+	outline: "none",
+	cursor: "pointer",
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	fontFamily: "inherit",
+	textTransform: "uppercase",
+	textDecoration: "none",
+	lineHeight: 1,
+	transition: "background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease",
+	"&:disabled": {
+		cursor: "not-allowed",
+		opacity: .5
+	}
+};
+const buttonBaseSystem = (0, src_exports.system)({ gap: {
+	property: "gap",
+	scale: "space"
+} });
+const sizeVariants = ({ theme, size }) => {
+	const s = theme.sizes[size];
+	return {
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const variantStyles = ({ variant = "contained", theme, color = themeDefault(theme, "color", "primary") }) => {
+	const { main, dark, contrastText } = theme.palette[color];
+	if (variant === "contained") return {
+		backgroundColor: main,
+		color: contrastText,
+		border: `${theme.borderWidths.thin} solid transparent`,
+		"&:hover:not(:disabled)": { backgroundColor: dark },
+		"&:active:not(:disabled)": { backgroundColor: dark }
+	};
+	const hoverBg = alpha(main, .08);
+	const activeBg = alpha(main, .125);
+	const borderColor = variant === "outlined" ? main : "transparent";
+	return {
+		backgroundColor: "transparent",
+		color: main,
+		border: `${theme.borderWidths.thin} solid ${borderColor}`,
+		"&:hover:not(:disabled)": { backgroundColor: hoverBg },
+		"&:active:not(:disabled)": { backgroundColor: activeBg }
+	};
+};
+const shapeVariants = ({ shape = "square", theme }) => {
+	if (shape === "pill") return { borderRadius: "9999px" };
+	if (shape === "rounded") return { borderRadius: theme.radii[themeDefault(theme, "borderRadius", "md")] };
+	return { borderRadius: 0 };
+};
+const fullWidthStyles = ({ fullWidth }) => fullWidth ? { width: "100%" } : {};
+const focusVisibleStyles = ({ theme }) => ({ "&:focus-visible": {
+	outline: `2px solid ${theme.palette[themeDefault(theme, "color", "primary")].main}`,
+	outlineOffset: "2px"
+} });
+const safeLayout = (props) => (0, src_exports.layout)({
+	...props,
+	size: void 0
+});
+const ButtonRoot = styled("button", {
+	name: "Button",
+	shouldForwardProp,
+	systemProps: [
+		src_exports.space,
+		safeLayout,
+		buttonBaseSystem,
+		src_exports.typography,
+		src_exports.border
+	]
+})(baseStyles, sizeVariants, variantStyles, shapeVariants, fullWidthStyles, focusVisibleStyles);
+function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", letterSpacing = "tight", startIcon, endIcon, fullWidth, loading = false, loadingIndicator, loadingPosition = "center", children, disabled, href, ...rest }) {
+	const group = useContext(ButtonGroupContext);
+	const theme = useTheme();
+	const dp = useDefaultProps("Button");
+	const resolvedVariant = variant ?? group.variant ?? dp.variant ?? themeDefault(theme, "buttonVariant", "contained");
+	const resolvedColor = color ?? group.color ?? dp.color ?? themeDefault(theme, "color", "primary");
+	const resolvedSize = size ?? group.size ?? dp.size ?? themeDefault(theme, "size", "md");
+	const resolvedShape = shape ?? dp.shape ?? "square";
+	const resolvedFullWidth = fullWidth ?? group.fullWidth ?? false;
+	const resolvedDisabled = (disabled ?? group.disabled ?? false) || loading;
+	const indicator = loadingIndicator ?? /* @__PURE__ */ jsx(CircularProgress, {
+		size: 16,
+		color: "inherit"
+	});
+	const isCenter = loading && loadingPosition === "center";
+	const start = loading && loadingPosition === "start" ? indicator : startIcon;
+	const end = loading && loadingPosition === "end" ? indicator : endIcon;
+	return /* @__PURE__ */ jsxs(ButtonRoot, {
+		as: href == null ? void 0 : "a",
+		href,
+		variant: resolvedVariant,
+		color: resolvedColor,
+		size: resolvedSize,
+		shape: resolvedShape,
+		gap,
+		fontWeight,
+		letterSpacing,
+		fullWidth: resolvedFullWidth,
+		disabled: resolvedDisabled,
+		"aria-busy": loading || void 0,
+		...rest,
+		children: [
+			start != null && /* @__PURE__ */ jsx(ButtonIcon, { children: start }),
+			/* @__PURE__ */ jsx(ButtonLabel, {
+				invisible: isCenter,
+				children
+			}),
+			isCenter && /* @__PURE__ */ jsx(LoadingCenter, { children: indicator }),
+			end != null && /* @__PURE__ */ jsx(ButtonIcon, { children: end })
+		]
+	});
+}
+//#endregion
+export { Button };

package/dist/ButtonGroup.cjs

@@ -0,0 +1,110 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_utils = require("./utils.cjs");
+const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/ButtonGroup/ButtonGroup.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"orientation",
+	"fullWidth",
+	"variant"
+]);
+const orientationStyles = ({ theme, orientation = "horizontal", borderRadius }) => {
+	const overlap = `-${theme.borderWidths.thin}`;
+	const r = (0, require_src.src_exports.get)(theme, `radii.${borderRadius ?? require_themeDefault.themeDefault(theme, "borderRadius", "md")}`);
+	if (orientation === "vertical") return {
+		flexDirection: "column",
+		"& > *:first-of-type": {
+			borderTopLeftRadius: r,
+			borderTopRightRadius: r,
+			borderBottomLeftRadius: 0,
+			borderBottomRightRadius: 0
+		},
+		"& > *:last-of-type": {
+			borderBottomLeftRadius: r,
+			borderBottomRightRadius: r,
+			borderTopLeftRadius: 0,
+			borderTopRightRadius: 0
+		},
+		"& > *:not(:first-of-type):not(:last-of-type)": { borderRadius: 0 },
+		"& > *:only-child": { borderRadius: r },
+		"& > *:not(:first-of-type)": { marginTop: overlap }
+	};
+	return {
+		flexDirection: "row",
+		"& > *:first-of-type": {
+			borderTopLeftRadius: r,
+			borderBottomLeftRadius: r,
+			borderTopRightRadius: 0,
+			borderBottomRightRadius: 0
+		},
+		"& > *:last-of-type": {
+			borderTopRightRadius: r,
+			borderBottomRightRadius: r,
+			borderTopLeftRadius: 0,
+			borderBottomLeftRadius: 0
+		},
+		"& > *:not(:first-of-type):not(:last-of-type)": { borderRadius: 0 },
+		"& > *:only-child": { borderRadius: r },
+		"& > *:not(:first-of-type)": { marginLeft: overlap }
+	};
+};
+const dividerStyles = ({ theme, orientation = "horizontal", variant = "outlined", color: colorProp }) => {
+	const color = colorProp ?? require_themeDefault.themeDefault(theme, "color", "primary");
+	const edge = orientation === "vertical" ? "borderTopColor" : "borderLeftColor";
+	if (variant === "outlined") return { "& > *:not(:first-of-type)": { [edge]: "transparent" } };
+	const dividerColor = variant === "contained" ? (0, require_src.src_exports.get)(theme, `palette.${color}.dark`) : require_utils.alpha((0, require_src.src_exports.get)(theme, `palette.${color}.main`), .5);
+	return { "& > *:not(:first-of-type)": { [edge]: dividerColor } };
+};
+const fullWidthStyles = ({ fullWidth }) => fullWidth ? {
+	display: "flex",
+	width: "100%",
+	"& > *": { flex: 1 }
+} : {};
+const GroupRoot = require_src.styled("div", {
+	name: "ButtonGroup",
+	label: "ButtonGroup",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space]
+})({ display: "inline-flex" }, orientationStyles, dividerStyles, fullWidthStyles);
+/**
+* Groups related `Button` immediate children into a visually joined cluster and
+* broadcasts `variant` / `color` / `size` / `disabled` / `fullWidth` to them via
+* `ButtonGroupContext` (explicit props on a child win).
+*/
+function ButtonGroup({ variant = "outlined", color, size, orientation = "horizontal", borderRadius, disabled = false, fullWidth = false, as, children, ...rest }) {
+	const context = (0, react.useMemo)(() => ({
+		variant,
+		color,
+		size,
+		disabled,
+		fullWidth
+	}), [
+		variant,
+		color,
+		size,
+		disabled,
+		fullWidth
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonGroupContext.ButtonGroupContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupRoot, {
+			as,
+			role: "group",
+			orientation,
+			borderRadius,
+			variant,
+			color,
+			fullWidth,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupContext = require_ButtonGroupContext.ButtonGroupContext;

package/dist/ButtonGroup.d.cts

@@ -0,0 +1,2 @@
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-CyZYXDn0.cjs";
+export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/ButtonGroup.d.mts

@@ -0,0 +1,2 @@
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-BqVgv2B_.mjs";
+export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };