@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/alert/alert.styles.ts

@@ -0,0 +1,135 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { glyphSize } from "../../styles/dimensions.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+import { alertVars } from "./alert.stylex";
+
+export const alertStyles = create({
+	action: {
+		alignItems: "center",
+		alignSelf: {
+			default: "start",
+			[conditions.sm]: "center",
+		},
+		display: "flex",
+		flexShrink: 0,
+		flexWrap: "wrap",
+		gap: space["2"],
+		gridColumnEnd: "action",
+		gridColumnStart: "action",
+		gridRowEnd: "action",
+		gridRowStart: "action",
+		marginBlockStart: {
+			default: space["2"],
+			[conditions.sm]: space["0"],
+		},
+		marginInlineStart: {
+			default: space["0"],
+			[conditions.sm]: space["3"],
+		},
+		minWidth: 0,
+	},
+	default: {
+		backgroundColor: colors.surface,
+		borderColor: colors.border,
+		color: colors.content,
+		[alertVars.iconColor]: colors.content,
+	},
+	description: {
+		boxSizing: "border-box",
+		color: "inherit",
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.regular,
+		gridColumnEnd: "description",
+		gridColumnStart: "description",
+		gridRowEnd: "description",
+		gridRowStart: "description",
+		lineHeight: lineHeight["20"],
+		minWidth: 0,
+	},
+	// Status borders are a quiet edge mixed into the fill; the fill and icon
+	// carry the status.
+	error: {
+		backgroundColor: colors.destructiveSubtle,
+		borderColor: `color-mix(in oklch, ${colors.destructive} 32%, ${colors.destructiveSubtle})`,
+		color: colors.content,
+		[alertVars.iconColor]: colors.destructive,
+	},
+	icon: {
+		alignItems: "center",
+		alignSelf: "start",
+		color: alertVars.iconColor,
+		display: "inline-flex",
+		flexShrink: 0,
+		gridColumnEnd: "icon",
+		gridColumnStart: "icon",
+		gridRowEnd: "icon",
+		gridRowStart: "icon",
+		height: glyphSize.md,
+		justifyContent: "center",
+		// Centers the glyph on the 20px title line.
+		marginBlockStart: `calc((${lineHeight["20"]} - ${glyphSize.md}) / 2)`,
+		marginInlineEnd: space["2"],
+		width: glyphSize.md,
+	},
+	info: {
+		backgroundColor: colors.info,
+		borderColor: `color-mix(in oklch, ${colors.infoContent} 24%, ${colors.info})`,
+		color: colors.infoContent,
+		[alertVars.iconColor]: colors.infoContent,
+	},
+	root: {
+		alignItems: "start",
+		borderRadius: shape.controlRadiusLarge,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxSizing: "border-box",
+		display: "grid",
+		gridTemplateAreas: {
+			default: '"icon title" "icon description" "action action"',
+			[conditions.sm]: '"icon title action" "icon description action"',
+		},
+		gridTemplateColumns: {
+			default: "max-content 1fr",
+			[conditions.sm]: "max-content 1fr auto",
+		},
+		minWidth: 0,
+		paddingBlock: space["4"],
+		paddingInline: space["4"],
+		position: "relative",
+		width: "100%",
+	},
+	success: {
+		backgroundColor: colors.success,
+		borderColor: `color-mix(in oklch, ${colors.successContent} 24%, ${colors.success})`,
+		color: colors.successContent,
+		[alertVars.iconColor]: colors.successContent,
+	},
+	title: {
+		boxSizing: "border-box",
+		color: "inherit",
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.medium,
+		gridColumnEnd: "title",
+		gridColumnStart: "title",
+		gridRowEnd: "title",
+		gridRowStart: "title",
+		lineHeight: lineHeight["20"],
+		marginBlockEnd: space["1"],
+		minWidth: 0,
+	},
+	warning: {
+		backgroundColor: colors.warning,
+		borderColor: `color-mix(in oklch, ${colors.warningContent} 24%, ${colors.warning})`,
+		color: colors.warningContent,
+		[alertVars.iconColor]: colors.warningContent,
+	},
+});

package/src/components/alert/alert.stylex.ts

@@ -0,0 +1,6 @@
+import { defineVars } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+
+export const alertVars = defineVars({
+	iconColor: colors.content,
+});

package/src/components/alert/alert.tsx

@@ -0,0 +1,123 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { alertStyles } from "./alert.styles";
+
+export type AlertVariant = "default" | "error" | "info" | "success" | "warning";
+
+export type AlertProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+> & {
+	variant?: AlertVariant;
+};
+
+export type AlertIconProps = Omit<
+	ComponentPropsWithRef<"span">,
+	"className" | "data-slot" | "style"
+>;
+
+export type AlertTitleProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+export type AlertDescriptionProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+export type AlertActionProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+export function Alert({
+	children,
+	ref: forwardedRef,
+	role = "alert",
+	variant = "default",
+	...rest
+}: AlertProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="alert"
+			data-variant={variant}
+			ref={forwardedRef}
+			role={role}
+			{...props(alertStyles.root, alertStyles[variant])}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function AlertIcon({
+	"aria-hidden": ariaHidden = true,
+	children,
+	ref: forwardedRef,
+	...rest
+}: AlertIconProps) {
+	return (
+		<span
+			{...rest}
+			aria-hidden={ariaHidden}
+			data-slot="alert-icon"
+			ref={forwardedRef}
+			{...props(alertStyles.icon)}
+		>
+			{children}
+		</span>
+	);
+}
+
+export function AlertTitle({
+	children,
+	ref: forwardedRef,
+	...rest
+}: AlertTitleProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="alert-title"
+			ref={forwardedRef}
+			{...props(alertStyles.title)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function AlertDescription({
+	children,
+	ref: forwardedRef,
+	...rest
+}: AlertDescriptionProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="alert-description"
+			ref={forwardedRef}
+			{...props(alertStyles.description)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function AlertAction({
+	children,
+	ref: forwardedRef,
+	...rest
+}: AlertActionProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="alert-action"
+			ref={forwardedRef}
+			{...props(alertStyles.action)}
+		>
+			{children}
+		</div>
+	);
+}

package/src/components/alert-dialog/alert-dialog.styles.ts

@@ -0,0 +1,29 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { fontSize, lineHeight } from "../../styles/typography.stylex";
+
+export const alertDialogStyles = create({
+	description: {
+		fontSize: fontSize["14"],
+		lineHeight: lineHeight["20"],
+		overflowWrap: "anywhere",
+		textWrap: "pretty",
+	},
+	footer: {
+		backgroundColor: colors.workarea,
+		flexShrink: 0,
+	},
+	header: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		minHeight: 0,
+		overflowY: "auto",
+		overscrollBehavior: "contain",
+		paddingBlock: space["6"],
+		paddingInline: space["6"],
+	},
+	popup: { maxWidth: "32rem" },
+	title: { fontSize: fontSize["20"], overflowWrap: "anywhere" },
+});

package/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import {
+	AlertDialog as BaseAlertDialog,
+	type AlertDialogCloseProps as BaseAlertDialogCloseProps,
+	type AlertDialogDescriptionProps as BaseAlertDialogDescriptionProps,
+	type AlertDialogPopupProps as BaseAlertDialogPopupProps,
+	type AlertDialogPortalProps as BaseAlertDialogPortalProps,
+	type AlertDialogRootProps as BaseAlertDialogRootProps,
+	type AlertDialogTitleProps as BaseAlertDialogTitleProps,
+	type AlertDialogTriggerProps as BaseAlertDialogTriggerProps,
+} from "@base-ui/react/alert-dialog";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { overlayLayerStyles } from "../../styles/overlay-layers.styles";
+import { dialogStyles } from "../dialog/dialog.styles";
+import { alertDialogStyles } from "./alert-dialog.styles";
+
+type Closed<T> = Omit<T, "className" | "style">;
+type DivProps = Omit<ComponentPropsWithRef<"div">, "className" | "style">;
+type AlertDialogTriggerRef = ComponentPropsWithRef<
+	typeof BaseAlertDialog.Trigger
+>["ref"];
+type AlertDialogPopupRef = ComponentPropsWithRef<
+	typeof BaseAlertDialog.Popup
+>["ref"];
+
+export type AlertDialogProps<Payload = unknown> =
+	BaseAlertDialogRootProps<Payload>;
+
+export type AlertDialogTriggerProps<Payload = unknown> = Omit<
+	BaseAlertDialogTriggerProps<Payload>,
+	"className" | "ref" | "style"
+> & {
+	ref?: AlertDialogTriggerRef;
+};
+
+export type AlertDialogPopupProps = Omit<
+	BaseAlertDialogPopupProps,
+	"className" | "ref" | "render" | "style"
+> & {
+	portalProps?: Omit<
+		BaseAlertDialogPortalProps,
+		"children" | "className" | "ref" | "render" | "style"
+	>;
+	ref?: AlertDialogPopupRef;
+};
+
+export type AlertDialogTitleProps = Closed<BaseAlertDialogTitleProps>;
+export type AlertDialogDescriptionProps =
+	Closed<BaseAlertDialogDescriptionProps>;
+export type AlertDialogCloseProps = Omit<
+	BaseAlertDialogCloseProps,
+	"className" | "style"
+>;
+export type AlertDialogHeaderProps = DivProps;
+export type AlertDialogFooterProps = DivProps;
+
+export const AlertDialogCreateHandle = BaseAlertDialog.createHandle;
+
+export function AlertDialog<Payload = unknown>(
+	rootProps: AlertDialogProps<Payload>
+) {
+	return <BaseAlertDialog.Root {...rootProps} />;
+}
+
+export function AlertDialogTrigger<Payload = unknown>({
+	ref: forwardedRef = undefined,
+	render,
+	type,
+	...rest
+}: AlertDialogTriggerProps<Payload>) {
+	return (
+		<BaseAlertDialog.Trigger
+			{...rest}
+			ref={forwardedRef}
+			render={render}
+			type={render ? type : (type ?? "button")}
+		/>
+	);
+}
+
+export function AlertDialogPopup({
+	children,
+	portalProps,
+	ref: forwardedRef = undefined,
+	...rest
+}: AlertDialogPopupProps) {
+	return (
+		<BaseAlertDialog.Portal
+			{...portalProps}
+			{...props(overlayLayerStyles.modalPortal)}
+		>
+			<BaseAlertDialog.Backdrop
+				data-slot="alert-dialog-backdrop"
+				{...props(dialogStyles.backdrop, overlayLayerStyles.backdrop)}
+			/>
+			<BaseAlertDialog.Viewport
+				data-slot="alert-dialog-viewport"
+				{...props(dialogStyles.viewport, overlayLayerStyles.modalViewport)}
+			>
+				<BaseAlertDialog.Popup
+					{...rest}
+					data-slot="alert-dialog-popup"
+					ref={forwardedRef}
+					{...props(dialogStyles.popup, alertDialogStyles.popup)}
+				>
+					{children}
+				</BaseAlertDialog.Popup>
+			</BaseAlertDialog.Viewport>
+		</BaseAlertDialog.Portal>
+	);
+}
+
+export function AlertDialogHeader({
+	children,
+	ref: forwardedRef,
+	...rest
+}: AlertDialogHeaderProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="alert-dialog-header"
+			ref={forwardedRef}
+			{...props(alertDialogStyles.header)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function AlertDialogTitle({
+	children,
+	ref: forwardedRef,
+	...rest
+}: AlertDialogTitleProps) {
+	return (
+		<BaseAlertDialog.Title
+			{...rest}
+			data-slot="alert-dialog-title"
+			ref={forwardedRef}
+			{...props(dialogStyles.title, alertDialogStyles.title)}
+		>
+			{children}
+		</BaseAlertDialog.Title>
+	);
+}
+
+export function AlertDialogDescription({
+	children,
+	ref: forwardedRef,
+	...rest
+}: AlertDialogDescriptionProps) {
+	return (
+		<BaseAlertDialog.Description
+			{...rest}
+			data-slot="alert-dialog-description"
+			ref={forwardedRef}
+			{...props(dialogStyles.description, alertDialogStyles.description)}
+		>
+			{children}
+		</BaseAlertDialog.Description>
+	);
+}
+
+export function AlertDialogFooter({
+	children,
+	ref: forwardedRef,
+	...rest
+}: AlertDialogFooterProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="alert-dialog-footer"
+			ref={forwardedRef}
+			{...props(dialogStyles.footer, alertDialogStyles.footer)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function AlertDialogClose({
+	ref: forwardedRef,
+	render,
+	type,
+	...rest
+}: AlertDialogCloseProps) {
+	return (
+		<BaseAlertDialog.Close
+			{...rest}
+			ref={forwardedRef}
+			render={render}
+			type={render ? type : (type ?? "button")}
+		/>
+	);
+}

package/src/components/approval-card/approval-card.styles.ts

@@ -0,0 +1,69 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { shadows } from "../../styles/shadows.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const approvalCardStyles = create({
+	actions: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["2"],
+		marginInlineStart: "auto",
+	},
+	// The surface that waits on the person, like Composer: raised, with a
+	// hairline and a soft shadow, and a 16px inset as in compact popovers.
+	card: {
+		backgroundColor: colors.surface,
+		borderColor: colors.border,
+		borderRadius: shape.floatingRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.surface,
+		display: "flex",
+		flexDirection: "column",
+		gap: space["4"],
+		margin: 0,
+		minInlineSize: 0,
+		padding: space["4"],
+	},
+	description: { color: colors.mutedContent, margin: 0 },
+	detailLabel: { color: colors.mutedContent },
+	// Each pair is one row of the grid.
+	detailRow: { display: "contents" },
+	// Label and value pairs, what the action will do.
+	details: {
+		// Labels and values share a baseline across their two type sizes.
+		alignItems: "baseline",
+		columnGap: space["3"],
+		display: "grid",
+		gridTemplateColumns: "max-content minmax(0, 1fr)",
+		margin: 0,
+		rowGap: space["1"],
+	},
+	detailValue: { margin: 0, minInlineSize: 0, overflowWrap: "anywhere" },
+	footer: {
+		alignItems: "center",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["2"],
+		justifyContent: "space-between",
+	},
+	// What kind of request this is, the request, then why.
+	head: { display: "flex", flexDirection: "column", gap: space["1"] },
+	kind: {
+		alignItems: "center",
+		color: colors.mutedContent,
+		display: "flex",
+		gap: space["2"],
+		margin: 0,
+		marginBlockEnd: space["1"],
+	},
+	kindIcon: { display: "flex", flexShrink: 0 },
+	note: { display: "flex", flexDirection: "column", gap: space["2"] },
+	noteLabel: { color: colors.mutedContent },
+	resolvedApproved: { color: colors.successSolid },
+	resolvedDenied: { color: colors.mutedContent },
+	title: { color: colors.content, margin: 0 },
+});