@soroush.tech/design-system 0.1.0

package/dist/ToggleButton/ToggleButton.d.cts

@@ -0,0 +1,14 @@
+import { i as ButtonProps } from "../index-DASvoACZ.cjs";
+import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CqD-Afho.cjs";
+//#region src/ToggleButton/ToggleButton/ToggleButton.d.ts
+interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {
+  /** The value associated with the button inside a `ToggleButtonGroup`. */
+  value: ToggleButtonValue;
+  /** Active state — inferred from the group's value when omitted. Drives `aria-pressed`. */
+  isSelected?: boolean;
+  /** Fired with the button's `value` when toggled. */
+  onChange?: (value: ToggleButtonValue) => void;
+}
+declare function ToggleButton({ value, isSelected, color, onChange, onClick, type, ...rest }: Readonly<ToggleButtonProps>): import("react").JSX.Element;
+//#endregion
+export { ToggleButton, ToggleButtonProps };

package/dist/ToggleButton/ToggleButton.d.mts

@@ -0,0 +1,14 @@
+import { i as ButtonProps } from "../index-C0xMvDjL.mjs";
+import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CqD-Afho.mjs";
+//#region src/ToggleButton/ToggleButton/ToggleButton.d.ts
+interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {
+  /** The value associated with the button inside a `ToggleButtonGroup`. */
+  value: ToggleButtonValue;
+  /** Active state — inferred from the group's value when omitted. Drives `aria-pressed`. */
+  isSelected?: boolean;
+  /** Fired with the button's `value` when toggled. */
+  onChange?: (value: ToggleButtonValue) => void;
+}
+declare function ToggleButton({ value, isSelected, color, onChange, onClick, type, ...rest }: Readonly<ToggleButtonProps>): import("react").JSX.Element;
+//#endregion
+export { ToggleButton, ToggleButtonProps };

package/dist/ToggleButton/ToggleButton.mjs

@@ -0,0 +1,56 @@
+import { 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 { t as ButtonGroupContext } from "../ButtonGroupContext-DS-kl9lG.mjs";
+import { Button } from "../Button.mjs";
+import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-DxIyy8ze.mjs";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ToggleButton/ToggleButton/ToggleButton.tsx
+const stateStyles = ({ theme, color = themeDefault(theme, "neutralColor", "default"), isSelected }) => {
+	const c = theme.palette[color];
+	if (isSelected) return {
+		backgroundColor: alpha(c.main, .16),
+		color: c.main,
+		borderColor: c.main,
+		"&:hover:not(:disabled)": { backgroundColor: alpha(c.main, .24) },
+		"&:active:not(:disabled)": { backgroundColor: alpha(c.main, .24) }
+	};
+	return {
+		color: (0, src_exports.get)(theme, "text.primary"),
+		borderColor: (0, src_exports.get)(theme, "border.light")
+	};
+};
+const ToggleButtonRoot = styled(Button, {
+	name: "ToggleButton",
+	label: "ToggleButton",
+	shouldForwardProp: (prop) => prop !== "isSelected"
+})(stateStyles);
+const isValueSelected = (value, groupValue) => {
+	if (groupValue == null) return false;
+	return Array.isArray(groupValue) ? groupValue.includes(value) : groupValue === value;
+};
+function ToggleButton({ value, isSelected, color, onChange, onClick, type = "button", ...rest }) {
+	const group = useContext(ToggleButtonGroupContext);
+	const buttonGroup = useContext(ButtonGroupContext);
+	const theme = useTheme();
+	const selected = isSelected ?? isValueSelected(value, group.value);
+	const resolvedColor = color ?? buttonGroup.color ?? themeDefault(theme, "neutralColor", "default");
+	const handleClick = (event) => {
+		onClick?.(event);
+		group.onToggle?.(value);
+		onChange?.(value);
+	};
+	return /* @__PURE__ */ jsx(ToggleButtonRoot, {
+		type,
+		variant: "outlined",
+		isSelected: selected,
+		color: resolvedColor,
+		"aria-pressed": selected,
+		onClick: handleClick,
+		value,
+		...rest
+	});
+}
+//#endregion
+export { ToggleButton };

package/dist/ToggleButton/ToggleButtonGroup.cjs

@@ -0,0 +1,54 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_themeDefault = require("../themeDefault-B-QjpGEO.cjs");
+const require_ButtonGroup = require("../ButtonGroup.cjs");
+const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-Ewc5Ixas.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _emotion_react = require("@emotion/react");
+//#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.tsx
+const selectedEdgeStyles = ({ theme, orientation = "horizontal", color = require_themeDefault.themeDefault(theme, "neutralColor", "default") }) => {
+	return { "& > [aria-pressed=\"true\"]:not(:first-of-type)": { [orientation === "vertical" ? "borderTopColor" : "borderLeftColor"]: theme.palette[color].main } };
+};
+const ToggleButtonGroupRoot = require_src.styled(require_ButtonGroup.ButtonGroup, {
+	name: "ToggleButtonGroup",
+	label: "ToggleButtonGroup"
+})(selectedEdgeStyles);
+/**
+* A `ButtonGroup` of `ToggleButton`s with single (exclusive) or multiple selection,
+* provided to children via `ToggleButtonGroupContext`. Controlled — the consumer
+* owns `value`. Visual props (`color` / `size` / `disabled` / `fullWidth`) broadcast
+* through `ButtonGroup` as usual.
+*/
+function ToggleButtonGroup({ value = null, onChange, isExclusive = false, color: colorProp, children, ...rest }) {
+	const theme = (0, _emotion_react.useTheme)();
+	const color = colorProp ?? require_themeDefault.themeDefault(theme, "neutralColor", "default");
+	const context = (0, react.useMemo)(() => {
+		const handleToggle = (buttonValue) => {
+			if (isExclusive) {
+				onChange?.(value === buttonValue ? null : buttonValue);
+				return;
+			}
+			const current = Array.isArray(value) ? value : [];
+			onChange?.(current.includes(buttonValue) ? current.filter((v) => v !== buttonValue) : [...current, buttonValue]);
+		};
+		return {
+			value,
+			onToggle: handleToggle
+		};
+	}, [
+		value,
+		onChange,
+		isExclusive
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButtonGroupContext.ToggleButtonGroupContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButtonGroupRoot, {
+			color,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+exports.ToggleButtonGroup = ToggleButtonGroup;

package/dist/ToggleButton/ToggleButtonGroup.d.cts

@@ -0,0 +1,23 @@
+import { a as ButtonGroupProps } from "../index-CyZYXDn0.cjs";
+import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CqD-Afho.cjs";
+//#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.d.ts
+interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
+  /** Selected value(s) — single when `isExclusive`, array otherwise. Controlled. */
+  value?: ToggleButtonValue | ToggleButtonValue[] | null;
+  /**
+   * Fired with the next selection: a single value or `null` when `isExclusive`,
+   * an array (possibly empty) otherwise.
+   */
+  onChange?: (value: ToggleButtonValue | ToggleButtonValue[] | null) => void;
+  /** Only one child value can be selected at a time. Default: `false`. */
+  isExclusive?: boolean;
+}
+/**
+ * A `ButtonGroup` of `ToggleButton`s with single (exclusive) or multiple selection,
+ * provided to children via `ToggleButtonGroupContext`. Controlled — the consumer
+ * owns `value`. Visual props (`color` / `size` / `disabled` / `fullWidth`) broadcast
+ * through `ButtonGroup` as usual.
+ */
+declare function ToggleButtonGroup({ value, onChange, isExclusive, color: colorProp, children, ...rest }: Readonly<ToggleButtonGroupProps>): import("react").JSX.Element;
+//#endregion
+export { ToggleButtonGroup, ToggleButtonGroupProps };

package/dist/ToggleButton/ToggleButtonGroup.d.mts

@@ -0,0 +1,23 @@
+import { a as ButtonGroupProps } from "../index-BqVgv2B_.mjs";
+import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CqD-Afho.mjs";
+//#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.d.ts
+interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
+  /** Selected value(s) — single when `isExclusive`, array otherwise. Controlled. */
+  value?: ToggleButtonValue | ToggleButtonValue[] | null;
+  /**
+   * Fired with the next selection: a single value or `null` when `isExclusive`,
+   * an array (possibly empty) otherwise.
+   */
+  onChange?: (value: ToggleButtonValue | ToggleButtonValue[] | null) => void;
+  /** Only one child value can be selected at a time. Default: `false`. */
+  isExclusive?: boolean;
+}
+/**
+ * A `ButtonGroup` of `ToggleButton`s with single (exclusive) or multiple selection,
+ * provided to children via `ToggleButtonGroupContext`. Controlled — the consumer
+ * owns `value`. Visual props (`color` / `size` / `disabled` / `fullWidth`) broadcast
+ * through `ButtonGroup` as usual.
+ */
+declare function ToggleButtonGroup({ value, onChange, isExclusive, color: colorProp, children, ...rest }: Readonly<ToggleButtonGroupProps>): import("react").JSX.Element;
+//#endregion
+export { ToggleButtonGroup, ToggleButtonGroupProps };

package/dist/ToggleButton/ToggleButtonGroup.mjs

@@ -0,0 +1,52 @@
+import { d as styled, u as useTheme } from "../src-DcNT2aIK.mjs";
+import { t as themeDefault } from "../themeDefault-CjXaY3ok.mjs";
+import { ButtonGroup } from "../ButtonGroup.mjs";
+import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-DxIyy8ze.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.tsx
+const selectedEdgeStyles = ({ theme, orientation = "horizontal", color = themeDefault(theme, "neutralColor", "default") }) => {
+	return { "& > [aria-pressed=\"true\"]:not(:first-of-type)": { [orientation === "vertical" ? "borderTopColor" : "borderLeftColor"]: theme.palette[color].main } };
+};
+const ToggleButtonGroupRoot = styled(ButtonGroup, {
+	name: "ToggleButtonGroup",
+	label: "ToggleButtonGroup"
+})(selectedEdgeStyles);
+/**
+* A `ButtonGroup` of `ToggleButton`s with single (exclusive) or multiple selection,
+* provided to children via `ToggleButtonGroupContext`. Controlled — the consumer
+* owns `value`. Visual props (`color` / `size` / `disabled` / `fullWidth`) broadcast
+* through `ButtonGroup` as usual.
+*/
+function ToggleButtonGroup({ value = null, onChange, isExclusive = false, color: colorProp, children, ...rest }) {
+	const theme = useTheme();
+	const color = colorProp ?? themeDefault(theme, "neutralColor", "default");
+	const context = useMemo(() => {
+		const handleToggle = (buttonValue) => {
+			if (isExclusive) {
+				onChange?.(value === buttonValue ? null : buttonValue);
+				return;
+			}
+			const current = Array.isArray(value) ? value : [];
+			onChange?.(current.includes(buttonValue) ? current.filter((v) => v !== buttonValue) : [...current, buttonValue]);
+		};
+		return {
+			value,
+			onToggle: handleToggle
+		};
+	}, [
+		value,
+		onChange,
+		isExclusive
+	]);
+	return /* @__PURE__ */ jsx(ToggleButtonGroupContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(ToggleButtonGroupRoot, {
+			color,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+export { ToggleButtonGroup };

package/dist/ToggleButton.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_ToggleButtonGroupContext = require("./ToggleButtonGroupContext-Ewc5Ixas.cjs");
+const require_ToggleButton_ToggleButton = require("./ToggleButton/ToggleButton.cjs");
+const require_ToggleButton_ToggleButtonGroup = require("./ToggleButton/ToggleButtonGroup.cjs");
+exports.ToggleButton = require_ToggleButton_ToggleButton.ToggleButton;
+exports.ToggleButtonGroup = require_ToggleButton_ToggleButtonGroup.ToggleButtonGroup;
+exports.ToggleButtonGroupContext = require_ToggleButtonGroupContext.ToggleButtonGroupContext;

package/dist/ToggleButton.d.cts

@@ -0,0 +1,4 @@
+import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CqD-Afho.cjs";
+import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.cjs";
+import { ToggleButton, ToggleButtonProps } from "./ToggleButton/ToggleButton.cjs";
+export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext, ToggleButtonGroupContextValue, ToggleButtonGroupProps, ToggleButtonProps, ToggleButtonValue };

package/dist/ToggleButton.d.mts

@@ -0,0 +1,4 @@
+import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CqD-Afho.mjs";
+import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.mjs";
+import { ToggleButton, ToggleButtonProps } from "./ToggleButton/ToggleButton.mjs";
+export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext, ToggleButtonGroupContextValue, ToggleButtonGroupProps, ToggleButtonProps, ToggleButtonValue };

package/dist/ToggleButton.mjs

@@ -0,0 +1,4 @@
+import { t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-DxIyy8ze.mjs";
+import { ToggleButton } from "./ToggleButton/ToggleButton.mjs";
+import { ToggleButtonGroup } from "./ToggleButton/ToggleButtonGroup.mjs";
+export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext };

package/dist/ToggleButtonGroupContext-CqD-Afho.d.cts

@@ -0,0 +1,15 @@
+//#region src/ToggleButton/ToggleButtonGroupContext.d.ts
+type ToggleButtonValue = string | number;
+/**
+ * Selection state provided by `ToggleButtonGroup` and consumed by `ToggleButton`.
+ * Visual config (color / size / disabled / fullWidth) travels via `ButtonGroupContext`.
+ */
+interface ToggleButtonGroupContextValue {
+  /** Selected value(s) — single when exclusive, array otherwise. */
+  value?: ToggleButtonValue | ToggleButtonValue[] | null;
+  /** Fired with the clicked button's value — the group resolves the next selection. */
+  onToggle?: (value: ToggleButtonValue) => void;
+}
+declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue>;
+//#endregion
+export { ToggleButtonGroupContextValue as n, ToggleButtonValue as r, ToggleButtonGroupContext as t };

package/dist/ToggleButtonGroupContext-CqD-Afho.d.mts

@@ -0,0 +1,15 @@
+//#region src/ToggleButton/ToggleButtonGroupContext.d.ts
+type ToggleButtonValue = string | number;
+/**
+ * Selection state provided by `ToggleButtonGroup` and consumed by `ToggleButton`.
+ * Visual config (color / size / disabled / fullWidth) travels via `ButtonGroupContext`.
+ */
+interface ToggleButtonGroupContextValue {
+  /** Selected value(s) — single when exclusive, array otherwise. */
+  value?: ToggleButtonValue | ToggleButtonValue[] | null;
+  /** Fired with the clicked button's value — the group resolves the next selection. */
+  onToggle?: (value: ToggleButtonValue) => void;
+}
+declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue>;
+//#endregion
+export { ToggleButtonGroupContextValue as n, ToggleButtonValue as r, ToggleButtonGroupContext as t };

package/dist/ToggleButtonGroupContext-DxIyy8ze.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/ToggleButton/ToggleButtonGroupContext.ts
+const ToggleButtonGroupContext = createContext({});
+//#endregion
+export { ToggleButtonGroupContext as t };

package/dist/ToggleButtonGroupContext-Ewc5Ixas.cjs

@@ -0,0 +1,9 @@
+//#region src/ToggleButton/ToggleButtonGroupContext.ts
+const ToggleButtonGroupContext = (0, require("react").createContext)({});
+//#endregion
+Object.defineProperty(exports, "ToggleButtonGroupContext", {
+	enumerable: true,
+	get: function() {
+		return ToggleButtonGroupContext;
+	}
+});