@soroush.tech/design-system 0.1.0

package/dist/ButtonGroup.mjs

@@ -0,0 +1,107 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } 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 { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ButtonGroup/ButtonGroup.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"orientation",
+	"fullWidth",
+	"variant"
+]);
+const orientationStyles = ({ theme, orientation = "horizontal", borderRadius }) => {
+	const overlap = `-${theme.borderWidths.thin}`;
+	const r = (0, src_exports.get)(theme, `radii.${borderRadius ?? 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 ?? 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, src_exports.get)(theme, `palette.${color}.dark`) : alpha((0, 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 = styled("div", {
+	name: "ButtonGroup",
+	label: "ButtonGroup",
+	shouldForwardProp,
+	systemProps: [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 = useMemo(() => ({
+		variant,
+		color,
+		size,
+		disabled,
+		fullWidth
+	}), [
+		variant,
+		color,
+		size,
+		disabled,
+		fullWidth
+	]);
+	return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(GroupRoot, {
+			as,
+			role: "group",
+			orientation,
+			borderRadius,
+			variant,
+			color,
+			fullWidth,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+export { ButtonGroup, ButtonGroupContext };

package/dist/ButtonGroupContext-DS-kl9lG.mjs

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

package/dist/ButtonGroupContext-NtkVeDVE.cjs

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

package/dist/Card.cjs

@@ -0,0 +1,95 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_useDefaultProps = require("./useDefaultProps-Cb-5FNok.cjs");
+const require_Paper = require("./Paper.cjs");
+const require_Typography = require("./Typography.cjs");
+const require_Icon = require("./Icon-1YtNCUKo.cjs");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _emotion_react = require("@emotion/react");
+//#region src/Card/Card.tsx
+const variantStyle = ({ theme, variant }) => {
+	if (variant === "bracketBox") {
+		const corner = `2px solid ${theme?.border.primary}`;
+		const size = theme?.space[1];
+		return {
+			position: "relative",
+			borderTopLeftRadius: 0,
+			borderBottomRightRadius: 0,
+			"&::before, &::after": {
+				content: "\"\"",
+				position: "absolute",
+				width: size,
+				height: size
+			},
+			"&::before": {
+				top: 0,
+				left: 0,
+				borderTop: corner,
+				borderLeft: corner
+			},
+			"&::after": {
+				bottom: 0,
+				right: 0,
+				borderBottom: corner,
+				borderRight: corner
+			}
+		};
+	}
+	if (variant === "interactive") return { "&:hover": { backgroundColor: theme?.background.secondary } };
+	return {};
+};
+const CardSurface = require_src.styled(require_Paper.Paper, {
+	name: "Card",
+	label: "CardSurface"
+})(variantStyle);
+const CardTitle = require_src.styled(require_Typography.Typography, {
+	name: "Card",
+	slot: "title"
+})();
+const CardCaption = require_src.styled(require_Typography.Typography, {
+	name: "Card",
+	slot: "caption"
+})();
+const CardIcon = require_src.styled(require_Icon.Icon, {
+	name: "Card",
+	slot: "icon"
+})();
+function Card({ variant: variantProp, icon, title, caption, iconProps, titleProps, captionProps, flexDirection = "column", children, ...rest }) {
+	const theme = (0, _emotion_react.useTheme)();
+	const dp = require_useDefaultProps.useDefaultProps("Card");
+	const variant = variantProp ?? dp.variant ?? require_themeDefault.themeDefault(theme, "cardVariant", "paper");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardSurface, {
+		variant,
+		flexDirection,
+		...rest,
+		children: [
+			icon !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardIcon, {
+				name: icon,
+				...dp.iconProps,
+				...iconProps
+			}),
+			title !== void 0 && (typeof title === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardTitle, {
+				variant: "overline",
+				color: "primary",
+				fontFamily: "mono",
+				mb: 1,
+				...dp.titleProps,
+				...titleProps,
+				children: title
+			}) : title),
+			caption !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardCaption, {
+				variant: "caption",
+				color: "secondary",
+				mb: 5,
+				...dp.captionProps,
+				...captionProps,
+				children: caption
+			}),
+			children
+		]
+	});
+}
+//#endregion
+exports.Card = Card;

package/dist/Card.d.cts

@@ -0,0 +1,18 @@
+import { r as PaperProps } from "./index-x80UG39F.cjs";
+import { a as TypographyProps } from "./index-CDVnvjIE.cjs";
+import { n as IconProps, r as IconName } from "./index-Dp81rWM1.cjs";
+import { ReactNode } from "react";
+//#region src/Card/Card.d.ts
+type CardVariant = 'paper' | 'bracketBox' | 'interactive';
+interface CardProps extends Omit<PaperProps, 'title'> {
+  variant?: CardVariant;
+  icon?: IconName;
+  title?: string | ReactNode;
+  caption?: string;
+  iconProps?: Omit<IconProps, 'name'>;
+  titleProps?: Omit<TypographyProps, 'children'>;
+  captionProps?: Omit<TypographyProps, 'children'>;
+}
+declare function Card({ variant: variantProp, icon, title, caption, iconProps, titleProps, captionProps, flexDirection, children, ...rest }: Readonly<CardProps>): import("react").JSX.Element;
+//#endregion
+export { Card, CardProps, CardVariant };

package/dist/Card.d.mts

@@ -0,0 +1,18 @@
+import { r as PaperProps } from "./index-BLRMuO_x.mjs";
+import { a as TypographyProps } from "./index-DE5PtzPn.mjs";
+import { n as IconProps, r as IconName } from "./index-BLfFycfJ.mjs";
+import { ReactNode } from "react";
+//#region src/Card/Card.d.ts
+type CardVariant = 'paper' | 'bracketBox' | 'interactive';
+interface CardProps extends Omit<PaperProps, 'title'> {
+  variant?: CardVariant;
+  icon?: IconName;
+  title?: string | ReactNode;
+  caption?: string;
+  iconProps?: Omit<IconProps, 'name'>;
+  titleProps?: Omit<TypographyProps, 'children'>;
+  captionProps?: Omit<TypographyProps, 'children'>;
+}
+declare function Card({ variant: variantProp, icon, title, caption, iconProps, titleProps, captionProps, flexDirection, children, ...rest }: Readonly<CardProps>): import("react").JSX.Element;
+//#endregion
+export { Card, CardProps, CardVariant };

package/dist/Card.mjs

@@ -0,0 +1,93 @@
+import { d as styled, u as useTheme } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { t as useDefaultProps } from "./useDefaultProps-CoApb4KT.mjs";
+import { Paper } from "./Paper.mjs";
+import { Typography } from "./Typography.mjs";
+import { t as Icon } from "./Icon-CAKRmFz3.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Card/Card.tsx
+const variantStyle = ({ theme, variant }) => {
+	if (variant === "bracketBox") {
+		const corner = `2px solid ${theme?.border.primary}`;
+		const size = theme?.space[1];
+		return {
+			position: "relative",
+			borderTopLeftRadius: 0,
+			borderBottomRightRadius: 0,
+			"&::before, &::after": {
+				content: "\"\"",
+				position: "absolute",
+				width: size,
+				height: size
+			},
+			"&::before": {
+				top: 0,
+				left: 0,
+				borderTop: corner,
+				borderLeft: corner
+			},
+			"&::after": {
+				bottom: 0,
+				right: 0,
+				borderBottom: corner,
+				borderRight: corner
+			}
+		};
+	}
+	if (variant === "interactive") return { "&:hover": { backgroundColor: theme?.background.secondary } };
+	return {};
+};
+const CardSurface = styled(Paper, {
+	name: "Card",
+	label: "CardSurface"
+})(variantStyle);
+const CardTitle = styled(Typography, {
+	name: "Card",
+	slot: "title"
+})();
+const CardCaption = styled(Typography, {
+	name: "Card",
+	slot: "caption"
+})();
+const CardIcon = styled(Icon, {
+	name: "Card",
+	slot: "icon"
+})();
+function Card({ variant: variantProp, icon, title, caption, iconProps, titleProps, captionProps, flexDirection = "column", children, ...rest }) {
+	const theme = useTheme();
+	const dp = useDefaultProps("Card");
+	const variant = variantProp ?? dp.variant ?? themeDefault(theme, "cardVariant", "paper");
+	return /* @__PURE__ */ jsxs(CardSurface, {
+		variant,
+		flexDirection,
+		...rest,
+		children: [
+			icon !== void 0 && /* @__PURE__ */ jsx(CardIcon, {
+				name: icon,
+				...dp.iconProps,
+				...iconProps
+			}),
+			title !== void 0 && (typeof title === "string" ? /* @__PURE__ */ jsx(CardTitle, {
+				variant: "overline",
+				color: "primary",
+				fontFamily: "mono",
+				mb: 1,
+				...dp.titleProps,
+				...titleProps,
+				children: title
+			}) : title),
+			caption !== void 0 && /* @__PURE__ */ jsx(CardCaption, {
+				variant: "caption",
+				color: "secondary",
+				mb: 5,
+				...dp.captionProps,
+				...captionProps,
+				children: caption
+			}),
+			children
+		]
+	});
+}
+//#endregion
+export { Card };

package/dist/Checkbox.cjs

@@ -0,0 +1,192 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_FormControl = require("./FormControl.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/Checkbox/Checkbox.tsx
+const UncheckedIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 18 18",
+	width: "1em",
+	height: "1em",
+	fill: "none",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		x: "1.5",
+		y: "1.5",
+		width: "15",
+		height: "15",
+		rx: "2.5",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	})
+});
+const CheckedIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	viewBox: "0 0 18 18",
+	width: "1em",
+	height: "1em",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		width: "18",
+		height: "18",
+		rx: "3",
+		fill: "currentColor"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M4.5 9L7.5 12L13.5 6",
+		stroke: "white",
+		strokeWidth: "1.8",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		fill: "none"
+	})]
+});
+const IndeterminateIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	viewBox: "0 0 18 18",
+	width: "1em",
+	height: "1em",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		width: "18",
+		height: "18",
+		rx: "3",
+		fill: "currentColor"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		x: "4.5",
+		y: "8.1",
+		width: "9",
+		height: "1.8",
+		rx: "0.9",
+		fill: "white"
+	})]
+});
+const HiddenInput = require_src.styled("input", {
+	name: "Checkbox",
+	slot: "input",
+	label: "CheckboxInput"
+})({
+	position: "absolute",
+	width: 0,
+	height: 0,
+	opacity: 0,
+	margin: 0,
+	padding: 0,
+	pointerEvents: "none"
+});
+const CheckboxIconWrapper = require_src.styled("span", {
+	name: "Checkbox",
+	slot: "icon",
+	label: "CheckboxIcon",
+	shouldForwardProp: (prop) => prop !== "size"
+})(({ theme, size = require_themeDefault.themeDefault(theme, "size", "md") }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	fontSize: theme.icon[size],
+	lineHeight: 0,
+	transition: "color 0.15s ease"
+}));
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"color",
+	"size",
+	"disabled",
+	"fullWidth"
+]);
+const baseStyle = ({ disabled, theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	position: "relative",
+	cursor: disabled ? "not-allowed" : "pointer",
+	gap: (theme?.space)?.[1],
+	userSelect: "none",
+	...disabled && { opacity: .5 },
+	"& input:not(:checked):not(:indeterminate) ~ span > .cb-checked": { display: "none" },
+	"& input:not(:checked):not(:indeterminate) ~ span > .cb-indeterminate": { display: "none" },
+	"& input:checked:not(:indeterminate) ~ span > .cb-unchecked": { display: "none" },
+	"& input:checked:not(:indeterminate) ~ span > .cb-indeterminate": { display: "none" },
+	"& input:indeterminate ~ span > .cb-unchecked": { display: "none" },
+	"& input:indeterminate ~ span > .cb-checked": { display: "none" },
+	"&:has(input:focus-visible) > span:first-of-type": {
+		outline: `2px solid ${theme.palette.primary.main}`,
+		outlineOffset: "2px",
+		borderRadius: "3px"
+	}
+});
+const colorStyle = ({ theme, color = require_themeDefault.themeDefault(theme, "neutralColor", "default") }) => {
+	return { color: color === "default" ? theme.text.secondary : theme.palette[color].main };
+};
+const fullWidthStyle = ({ fullWidth }) => fullWidth ? {
+	display: "flex",
+	width: "100%"
+} : {};
+const CheckboxRoot = require_src.styled("label", {
+	name: "Checkbox",
+	label: "Checkbox",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space]
+})(baseStyle, colorStyle, fullWidthStyle);
+function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colorProp, size: sizeProp, fullWidth: fullWidthProp, indeterminate = false, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+	const fc = require_FormControl.useFormControl({
+		id: idProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp,
+		fullWidth: fullWidthProp
+	});
+	const { id, disabled, required, size, fullWidth } = fc;
+	const color = colorProp ?? fc.color;
+	const describedBy = ariaDescribedby ?? fc["aria-describedby"];
+	const inputRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		inputRef.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CheckboxRoot, {
+		color,
+		size,
+		disabled,
+		fullWidth,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenInput, {
+				ref: inputRef,
+				type: "checkbox",
+				checked,
+				defaultChecked,
+				disabled,
+				id,
+				required,
+				name,
+				value,
+				onChange,
+				"data-indeterminate": indeterminate || void 0,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				"aria-describedby": describedBy
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CheckboxIconWrapper, {
+				size,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cb-unchecked",
+						children: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UncheckedIcon, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cb-checked",
+						children: checkedIcon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckedIcon, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cb-indeterminate",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IndeterminateIcon, {})
+					})
+				]
+			}),
+			children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children })
+		]
+	});
+}
+//#endregion
+exports.Checkbox = Checkbox;

package/dist/Checkbox.d.cts

@@ -0,0 +1,2 @@
+import { i as CheckboxSize, n as CheckboxColor, r as CheckboxProps, t as Checkbox } from "./index-DOPXpr2J.cjs";
+export { Checkbox, CheckboxColor, CheckboxProps, CheckboxSize };

package/dist/Checkbox.d.mts

@@ -0,0 +1,2 @@
+import { i as CheckboxSize, n as CheckboxColor, r as CheckboxProps, t as Checkbox } from "./index-Bx24ZnOV.mjs";
+export { Checkbox, CheckboxColor, CheckboxProps, CheckboxSize };