@soroush.tech/design-system 2.0.0-rc.2 → 2.0.0-rc.4

package/dist/Alert/Alert.cjs

@@ -0,0 +1,154 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-DU81aGy9.cjs");
+const require_utils = require("../utils.cjs");
+const require_theme = require("../theme-DzfwuzMZ.cjs");
+const require_getSurfaceRadius = require("../getSurfaceRadius-BTUV1E8H.cjs");
+const require_Icon = require("../Icon-BE7bRsqR.cjs");
+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/Alert/Alert/Alert.tsx
+const SEVERITY_ICONS = {
+	success: "check_circle",
+	info: "info",
+	warning: "warning",
+	error: "error"
+};
+const AlertRoot = require_src.styled("div", {
+	name: "Alert",
+	label: "Alert",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		..._soroush_tech_styled_system_should_forward_prop.props,
+		"severity",
+		"variant",
+		"borderRadius"
+	]),
+	systemProps: [require_src.src_exports.space]
+})(({ theme, severity, variant, borderRadius }) => {
+	const palette = (0, require_src.src_exports.get)(theme, `palette.${severity}`);
+	const text = (0, require_src.src_exports.get)(theme, "text.initial");
+	return {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: theme.space[2],
+		boxSizing: "border-box",
+		padding: `${theme.space[1]} ${theme.space[2]}`,
+		borderRadius: require_getSurfaceRadius.getSurfaceRadius(theme, borderRadius),
+		fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
+		fontSize: theme.fontSizes[1],
+		lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base"),
+		...variant === "contained" && {
+			backgroundColor: palette.main,
+			color: palette.contrastText
+		},
+		...variant === "standard" && {
+			backgroundColor: require_utils.alpha(palette.main, .15),
+			color: text
+		},
+		...variant === "outlined" && {
+			backgroundColor: "transparent",
+			color: text,
+			border: `${theme.borderWidths.thin} solid ${palette.main}`
+		}
+	};
+});
+const AlertIcon = require_src.styled("span", {
+	name: "Alert",
+	slot: "icon",
+	label: "AlertIcon",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["severity", "variant"])
+})(({ theme, severity, variant }) => ({
+	display: "inline-flex",
+	flexShrink: 0,
+	padding: `${theme.space[1]} 0`,
+	fontSize: "1.25em",
+	color: variant === "contained" ? "inherit" : (0, require_src.src_exports.get)(theme, `palette.${severity}.main`)
+}));
+const AlertMessage = require_src.styled("div", {
+	name: "Alert",
+	slot: "message",
+	label: "AlertMessage"
+})(({ theme }) => ({
+	flex: 1,
+	minWidth: 0,
+	padding: `${theme.space[1]} 0`
+}));
+const AlertAction = require_src.styled("div", {
+	name: "Alert",
+	slot: "action",
+	label: "AlertAction"
+})(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	flexShrink: 0,
+	gap: theme.space[1],
+	marginInlineStart: "auto",
+	paddingInlineStart: theme.space[2]
+}));
+const AlertClose = require_src.styled("button", {
+	name: "Alert",
+	slot: "closeButton",
+	label: "AlertCloseButton"
+})(({ theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	margin: 0,
+	padding: theme.space[1],
+	border: 0,
+	borderRadius: "50%",
+	background: "none",
+	color: "inherit",
+	opacity: .8,
+	cursor: "pointer",
+	"&:hover": { opacity: 1 },
+	"&:focus-visible": { outline: `${theme.borderWidths.base} solid ${(0, require_src.src_exports.get)(theme, "palette.primary.main")}` }
+}));
+/**
+* @description An inline message with a severity: an icon, the message, an optional `AlertTitle`,
+* an action and a close control. `role="alert"` is announced at once, `"status"` politely. Tinted
+* and outlined, its text is the theme's text on a surface, so its contrast is the theme's; filled,
+* it is the severity color's `contrastText`.
+*/
+function Alert({ children, severity: severityProp, variant: variantProp, icon, action, onClose, closeLabel: closeLabelProp, role: roleProp, borderRadius: borderRadiusProp, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = require_theme.useDefaultProps("Alert");
+	const severity = severityProp ?? dp.severity ?? "info";
+	const variant = variantProp ?? dp.variant ?? "standard";
+	const closeLabel = closeLabelProp ?? dp.closeLabel;
+	const role = roleProp ?? dp.role ?? "alert";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const iconName = SEVERITY_ICONS[severity];
+	const hasAction = action !== void 0 || onClose !== void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertRoot, {
+		role,
+		severity,
+		variant,
+		borderRadius,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [
+			icon !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon, {
+				severity,
+				variant,
+				children: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					name: iconName,
+					size: "1em",
+					color: "inherit"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertMessage, { children }),
+			hasAction && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertAction, { children: [action, onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertClose, {
+				type: "button",
+				"aria-label": closeLabel,
+				onClick: onClose,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					name: "close",
+					size: "1em",
+					color: "inherit"
+				})
+			})] })
+		]
+	});
+}
+//#endregion
+exports.Alert = Alert;

package/dist/Alert/Alert.d.cts

@@ -0,0 +1,37 @@
+import { nt as Theme } from "../index-XN4-ZqTB.cjs";
+import { MouseEvent, ReactNode } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+//#region src/Alert/Alert/Alert.d.ts
+type AlertSeverity = 'success' | 'info' | 'warning' | 'error';
+type AlertVariant = 'standard' | 'contained' | 'outlined';
+interface AlertProps extends SpaceProps<Theme> {
+  /** The message. An `AlertTitle` may come first. */
+  children?: ReactNode;
+  /** Picks the icon and the palette color. Default: `'info'`. */
+  severity?: AlertSeverity;
+  /** Tinted, filled, or only outlined. Default: `'standard'`. */
+  variant?: AlertVariant;
+  /** The icon before the message - the severity's by default; `false` draws none. */
+  icon?: ReactNode | false;
+  /** What sits at the end of the alert - a button. */
+  action?: ReactNode;
+  /** Shows a close control. */
+  onClose?: (event: MouseEvent<HTMLElement>) => void;
+  /** Names the close control - no built-in English. */
+  closeLabel?: string;
+  /** `'alert'` is announced at once; `'status'`, politely. Default: `'alert'`. */
+  role?: 'alert' | 'status';
+  /** Corner radius, resolves against `theme.radii`. Default: `theme.defaults.surfaceRadius`, else square. */
+  borderRadius?: keyof Theme['radii'];
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description An inline message with a severity: an icon, the message, an optional `AlertTitle`,
+ * an action and a close control. `role="alert"` is announced at once, `"status"` politely. Tinted
+ * and outlined, its text is the theme's text on a surface, so its contrast is the theme's; filled,
+ * it is the severity color's `contrastText`.
+ */
+declare function Alert({ children, severity: severityProp, variant: variantProp, icon, action, onClose, closeLabel: closeLabelProp, role: roleProp, borderRadius: borderRadiusProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AlertProps>): import("react").JSX.Element;
+//#endregion
+export { Alert, AlertProps, AlertSeverity, AlertVariant };

package/dist/Alert/Alert.d.mts

@@ -0,0 +1,37 @@
+import { nt as Theme } from "../index-CRQ7XLri.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { MouseEvent, ReactNode } from "react";
+//#region src/Alert/Alert/Alert.d.ts
+type AlertSeverity = 'success' | 'info' | 'warning' | 'error';
+type AlertVariant = 'standard' | 'contained' | 'outlined';
+interface AlertProps extends SpaceProps<Theme> {
+  /** The message. An `AlertTitle` may come first. */
+  children?: ReactNode;
+  /** Picks the icon and the palette color. Default: `'info'`. */
+  severity?: AlertSeverity;
+  /** Tinted, filled, or only outlined. Default: `'standard'`. */
+  variant?: AlertVariant;
+  /** The icon before the message - the severity's by default; `false` draws none. */
+  icon?: ReactNode | false;
+  /** What sits at the end of the alert - a button. */
+  action?: ReactNode;
+  /** Shows a close control. */
+  onClose?: (event: MouseEvent<HTMLElement>) => void;
+  /** Names the close control - no built-in English. */
+  closeLabel?: string;
+  /** `'alert'` is announced at once; `'status'`, politely. Default: `'alert'`. */
+  role?: 'alert' | 'status';
+  /** Corner radius, resolves against `theme.radii`. Default: `theme.defaults.surfaceRadius`, else square. */
+  borderRadius?: keyof Theme['radii'];
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description An inline message with a severity: an icon, the message, an optional `AlertTitle`,
+ * an action and a close control. `role="alert"` is announced at once, `"status"` politely. Tinted
+ * and outlined, its text is the theme's text on a surface, so its contrast is the theme's; filled,
+ * it is the severity color's `contrastText`.
+ */
+declare function Alert({ children, severity: severityProp, variant: variantProp, icon, action, onClose, closeLabel: closeLabelProp, role: roleProp, borderRadius: borderRadiusProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AlertProps>): import("react").JSX.Element;
+//#endregion
+export { Alert, AlertProps, AlertSeverity, AlertVariant };

package/dist/Alert/Alert.mjs

@@ -0,0 +1,152 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
+import { alpha } from "../utils.mjs";
+import { n as useDefaultProps } from "../theme-oBfFhJm9.mjs";
+import { t as getSurfaceRadius } from "../getSurfaceRadius-DTgqIzll.mjs";
+import { t as Icon } from "../Icon-0hPpk-WZ.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Alert/Alert/Alert.tsx
+const SEVERITY_ICONS = {
+	success: "check_circle",
+	info: "info",
+	warning: "warning",
+	error: "error"
+};
+const AlertRoot = styled("div", {
+	name: "Alert",
+	label: "Alert",
+	shouldForwardProp: createShouldForwardProp([
+		...props,
+		"severity",
+		"variant",
+		"borderRadius"
+	]),
+	systemProps: [src_exports.space]
+})(({ theme, severity, variant, borderRadius }) => {
+	const palette = (0, src_exports.get)(theme, `palette.${severity}`);
+	const text = (0, src_exports.get)(theme, "text.initial");
+	return {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: theme.space[2],
+		boxSizing: "border-box",
+		padding: `${theme.space[1]} ${theme.space[2]}`,
+		borderRadius: getSurfaceRadius(theme, borderRadius),
+		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
+		fontSize: theme.fontSizes[1],
+		lineHeight: (0, src_exports.get)(theme, "lineHeights.base"),
+		...variant === "contained" && {
+			backgroundColor: palette.main,
+			color: palette.contrastText
+		},
+		...variant === "standard" && {
+			backgroundColor: alpha(palette.main, .15),
+			color: text
+		},
+		...variant === "outlined" && {
+			backgroundColor: "transparent",
+			color: text,
+			border: `${theme.borderWidths.thin} solid ${palette.main}`
+		}
+	};
+});
+const AlertIcon = styled("span", {
+	name: "Alert",
+	slot: "icon",
+	label: "AlertIcon",
+	shouldForwardProp: createShouldForwardProp(["severity", "variant"])
+})(({ theme, severity, variant }) => ({
+	display: "inline-flex",
+	flexShrink: 0,
+	padding: `${theme.space[1]} 0`,
+	fontSize: "1.25em",
+	color: variant === "contained" ? "inherit" : (0, src_exports.get)(theme, `palette.${severity}.main`)
+}));
+const AlertMessage = styled("div", {
+	name: "Alert",
+	slot: "message",
+	label: "AlertMessage"
+})(({ theme }) => ({
+	flex: 1,
+	minWidth: 0,
+	padding: `${theme.space[1]} 0`
+}));
+const AlertAction = styled("div", {
+	name: "Alert",
+	slot: "action",
+	label: "AlertAction"
+})(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	flexShrink: 0,
+	gap: theme.space[1],
+	marginInlineStart: "auto",
+	paddingInlineStart: theme.space[2]
+}));
+const AlertClose = styled("button", {
+	name: "Alert",
+	slot: "closeButton",
+	label: "AlertCloseButton"
+})(({ theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	margin: 0,
+	padding: theme.space[1],
+	border: 0,
+	borderRadius: "50%",
+	background: "none",
+	color: "inherit",
+	opacity: .8,
+	cursor: "pointer",
+	"&:hover": { opacity: 1 },
+	"&:focus-visible": { outline: `${theme.borderWidths.base} solid ${(0, src_exports.get)(theme, "palette.primary.main")}` }
+}));
+/**
+* @description An inline message with a severity: an icon, the message, an optional `AlertTitle`,
+* an action and a close control. `role="alert"` is announced at once, `"status"` politely. Tinted
+* and outlined, its text is the theme's text on a surface, so its contrast is the theme's; filled,
+* it is the severity color's `contrastText`.
+*/
+function Alert({ children, severity: severityProp, variant: variantProp, icon, action, onClose, closeLabel: closeLabelProp, role: roleProp, borderRadius: borderRadiusProp, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = useDefaultProps("Alert");
+	const severity = severityProp ?? dp.severity ?? "info";
+	const variant = variantProp ?? dp.variant ?? "standard";
+	const closeLabel = closeLabelProp ?? dp.closeLabel;
+	const role = roleProp ?? dp.role ?? "alert";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const iconName = SEVERITY_ICONS[severity];
+	const hasAction = action !== void 0 || onClose !== void 0;
+	return /* @__PURE__ */ jsxs(AlertRoot, {
+		role,
+		severity,
+		variant,
+		borderRadius,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [
+			icon !== false && /* @__PURE__ */ jsx(AlertIcon, {
+				severity,
+				variant,
+				children: icon ?? /* @__PURE__ */ jsx(Icon, {
+					name: iconName,
+					size: "1em",
+					color: "inherit"
+				})
+			}),
+			/* @__PURE__ */ jsx(AlertMessage, { children }),
+			hasAction && /* @__PURE__ */ jsxs(AlertAction, { children: [action, onClose && /* @__PURE__ */ jsx(AlertClose, {
+				type: "button",
+				"aria-label": closeLabel,
+				onClick: onClose,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "close",
+					size: "1em",
+					color: "inherit"
+				})
+			})] })
+		]
+	});
+}
+//#endregion
+export { Alert };

package/dist/Alert/AlertTitle.cjs

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-DU81aGy9.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Alert/AlertTitle/AlertTitle.tsx
+const AlertTitleRoot = require_src.styled("div", {
+	name: "AlertTitle",
+	label: "AlertTitle"
+})(({ theme }) => ({
+	marginBottom: theme.space[.25],
+	fontWeight: (0, require_src.src_exports.get)(theme, "fontWeights.semiBold")
+}));
+/** @description The title of an `Alert`: its first line of the message, in a heavier weight. */
+function AlertTitle({ children, className, "data-testid": dataTestid }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertTitleRoot, {
+		className,
+		"data-testid": dataTestid,
+		children
+	});
+}
+//#endregion
+exports.AlertTitle = AlertTitle;

package/dist/Alert/AlertTitle.d.cts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+//#region src/Alert/AlertTitle/AlertTitle.d.ts
+interface AlertTitleProps {
+  /** The title. */
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+/** @description The title of an `Alert`: its first line of the message, in a heavier weight. */
+declare function AlertTitle({ children, className, 'data-testid': dataTestid }: Readonly<AlertTitleProps>): import("react").JSX.Element;
+//#endregion
+export { AlertTitle, AlertTitleProps };

package/dist/Alert/AlertTitle.d.mts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+//#region src/Alert/AlertTitle/AlertTitle.d.ts
+interface AlertTitleProps {
+  /** The title. */
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+/** @description The title of an `Alert`: its first line of the message, in a heavier weight. */
+declare function AlertTitle({ children, className, 'data-testid': dataTestid }: Readonly<AlertTitleProps>): import("react").JSX.Element;
+//#endregion
+export { AlertTitle, AlertTitleProps };

package/dist/Alert/AlertTitle.mjs

@@ -0,0 +1,20 @@
+import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Alert/AlertTitle/AlertTitle.tsx
+const AlertTitleRoot = styled("div", {
+	name: "AlertTitle",
+	label: "AlertTitle"
+})(({ theme }) => ({
+	marginBottom: theme.space[.25],
+	fontWeight: (0, src_exports.get)(theme, "fontWeights.semiBold")
+}));
+/** @description The title of an `Alert`: its first line of the message, in a heavier weight. */
+function AlertTitle({ children, className, "data-testid": dataTestid }) {
+	return /* @__PURE__ */ jsx(AlertTitleRoot, {
+		className,
+		"data-testid": dataTestid,
+		children
+	});
+}
+//#endregion
+export { AlertTitle };

package/dist/Alert.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Alert_Alert = require("./Alert/Alert.cjs");
+const require_Alert_AlertTitle = require("./Alert/AlertTitle.cjs");
+exports.Alert = require_Alert_Alert.Alert;
+exports.AlertTitle = require_Alert_AlertTitle.AlertTitle;

package/dist/Alert.d.cts

@@ -0,0 +1,3 @@
+import { Alert, AlertProps, AlertSeverity, AlertVariant } from "./Alert/Alert.cjs";
+import { AlertTitle, AlertTitleProps } from "./Alert/AlertTitle.cjs";
+export { Alert, AlertProps, AlertSeverity, AlertTitle, AlertTitleProps, AlertVariant };

package/dist/Alert.d.mts

@@ -0,0 +1,3 @@
+import { Alert, AlertProps, AlertSeverity, AlertVariant } from "./Alert/Alert.mjs";
+import { AlertTitle, AlertTitleProps } from "./Alert/AlertTitle.mjs";
+export { Alert, AlertProps, AlertSeverity, AlertTitle, AlertTitleProps, AlertVariant };

package/dist/Alert.mjs

@@ -0,0 +1,3 @@
+import { Alert } from "./Alert/Alert.mjs";
+import { AlertTitle } from "./Alert/AlertTitle.mjs";
+export { Alert, AlertTitle };

package/dist/AppBar.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
-const require_Flex = require("./Flex.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_Flex = require("./Flex.cjs");
 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/AppBar/AppBar.tsx

package/dist/AppBar.d.cts

@@ -1,4 +1,4 @@
-import { V as Theme, Wt as FlexProps } from "./index-DmJ7yWWi.cjs";
+import { dn as FlexProps, nt as Theme } from "./index-XN4-ZqTB.cjs";
 //#region src/AppBar/AppBar.d.ts
 /** Valid values for the color prop - derived from theme.background keys. */
 type AppBarColor = keyof Theme['background'];

package/dist/AppBar.d.mts

@@ -1,4 +1,4 @@
-import { V as Theme, Wt as FlexProps } from "./index-CVNJEUwJ.mjs";
+import { dn as FlexProps, nt as Theme } from "./index-CRQ7XLri.mjs";
 //#region src/AppBar/AppBar.d.ts
 /** Valid values for the color prop - derived from theme.background keys. */
 type AppBarColor = keyof Theme['background'];

package/dist/AppBar.mjs

@@ -1,6 +1,6 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { Flex } from "./Flex.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { Flex } from "./Flex.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/AppBar/AppBar.tsx
 const shouldForwardProp = createShouldForwardProp([