@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/toast/toast.styles.ts

@@ -0,0 +1,198 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+	opacity,
+} from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { shadows } from "../../styles/shadows.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const toastStyles = create({
+	action: {
+		alignItems: "center",
+		alignSelf: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		backgroundColor: {
+			[conditions.canHover]: {
+				":hover:not(:disabled)": colors.controlSurfaceHover,
+			},
+			default: colors.controlSurface,
+		},
+		borderColor: colors.border,
+		borderRadius: shape.controlRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxSizing: "border-box",
+		color: colors.content,
+		cursor: { ":disabled": "not-allowed", default: "pointer" },
+		display: "inline-flex",
+		flexShrink: 0,
+		fontFamily: "inherit",
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.medium,
+		gap: space["1"],
+		justifyContent: "center",
+		lineHeight: lineHeight.none,
+		marginInlineStart: space["1"],
+		minHeight: "1.75rem",
+		opacity: { ":disabled": opacity.disabled, default: 1 },
+		outline: "none",
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		paddingBlock: space["1"],
+		paddingInline: space["3"],
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color, border-color, color, outline-color",
+		transitionTimingFunction: easing.expoOut,
+	},
+	body: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+		gap: space["1"],
+		minWidth: 0,
+	},
+	bottomCenter: {
+		alignItems: "center",
+		bottom: space["5"],
+		left: "50%",
+		transform: "translateX(-50%)",
+	},
+	bottomLeft: {
+		alignItems: "flex-start",
+		bottom: space["5"],
+		left: space["5"],
+	},
+	bottomRight: {
+		alignItems: "flex-end",
+		bottom: space["5"],
+		right: space["5"],
+	},
+	content: {
+		alignItems: "flex-start",
+		boxSizing: "border-box",
+		display: "flex",
+		gap: space["2"],
+		overflow: "hidden",
+		padding: space["4"],
+		pointerEvents: "auto",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "opacity, box-shadow",
+		transitionTimingFunction: easing.expoOut,
+		width: "100%",
+	},
+	description: {
+		boxSizing: "border-box",
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["20"],
+		margin: space["0"],
+		wordBreak: "break-word",
+	},
+	icon: {
+		alignItems: "center",
+		display: "inline-flex",
+		flexShrink: 0,
+		height: "1rem",
+		marginBlockStart: "2px",
+		width: "1rem",
+	},
+	iconError: { color: colors.destructive },
+	iconInfo: { color: colors.infoContent },
+	iconLoading: { color: colors.content },
+	iconSuccess: { color: colors.successContent },
+	iconWarning: { color: colors.warningContent },
+	surface: {
+		backgroundColor: colors.floatingSurface,
+		borderColor: {
+			[conditions.moreContrast]: colors.controlBorderStrong,
+			default: colors.border,
+		},
+		borderRadius: shape.floatingRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.floating,
+		color: colors.content,
+	},
+	title: {
+		boxSizing: "border-box",
+		color: colors.content,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.medium,
+		lineHeight: lineHeight["20"],
+		margin: space["0"],
+		wordBreak: "break-word",
+	},
+	topCenter: {
+		alignItems: "center",
+		left: "50%",
+		top: space["5"],
+		transform: "translateX(-50%)",
+	},
+	topLeft: {
+		alignItems: "flex-start",
+		left: space["5"],
+		top: space["5"],
+	},
+	topRight: {
+		alignItems: "flex-end",
+		right: space["5"],
+		top: space["5"],
+	},
+	viewport: {
+		"--toast-focus-ring": {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		maxWidth: "400px",
+		outlineColor: {
+			[conditions.forcedColors]: "Highlight",
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		position: "fixed",
+		width: "calc(100% - 2.5rem)",
+		zIndex: 1000,
+	},
+});

package/src/components/toast/toast.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import type {
+	AnchoredToastProviderProps,
+	ToastData,
+	ToastProviderProps,
+} from "./toast.types";
+import { AnchoredToastView, ToastStackedView } from "./toast-views";
+
+export type {
+	AnchoredToastProviderProps,
+	ToastPosition,
+	ToastProviderProps,
+} from "./toast.types";
+
+export const ToastPrimitive = BaseToast;
+
+export const toastManager = BaseToast.createToastManager<ToastData>();
+export const anchoredToastManager = BaseToast.createToastManager<ToastData>();
+
+export function ToastProvider({
+	children,
+	position = "bottom-right",
+	portalProps,
+	toastManager: customManager,
+	...restProps
+}: ToastProviderProps) {
+	return (
+		<BaseToast.Provider
+			{...restProps}
+			toastManager={customManager ?? toastManager}
+		>
+			{children}
+			<BaseToast.Portal data-slot="toast-portal" {...portalProps}>
+				<ToastStackedView position={position} />
+			</BaseToast.Portal>
+		</BaseToast.Provider>
+	);
+}
+
+export function AnchoredToastProvider({
+	children,
+	portalProps,
+	toastManager: customManager,
+	...restProps
+}: AnchoredToastProviderProps) {
+	return (
+		<BaseToast.Provider
+			{...restProps}
+			toastManager={customManager ?? anchoredToastManager}
+		>
+			{children}
+			<BaseToast.Portal data-slot="toast-portal-anchored" {...portalProps}>
+				<AnchoredToastView />
+			</BaseToast.Portal>
+		</BaseToast.Provider>
+	);
+}

package/src/components/toast/toast.types.ts

@@ -0,0 +1,41 @@
+import type { Toast as BaseToast } from "@base-ui/react/toast";
+import type { ComponentProps, ComponentPropsWithRef } from "react";
+
+export type ToastPosition =
+	| "top-left"
+	| "top-center"
+	| "top-right"
+	| "bottom-left"
+	| "bottom-center"
+	| "bottom-right";
+
+export type ToastSwipeDirection = "up" | "down" | "left" | "right";
+
+export interface ToastData {
+	rootProps?: Omit<
+		ComponentProps<typeof BaseToast.Root>,
+		"children" | "className" | "style" | "swipeDirection" | "toast"
+	>;
+	tooltipStyle?: boolean;
+	[key: string]: unknown;
+}
+
+type ToastPortalProps = Omit<
+	ComponentPropsWithRef<typeof BaseToast.Portal>,
+	"className" | "style"
+>;
+
+export type ToastProviderProps = Omit<
+	ComponentPropsWithRef<typeof BaseToast.Provider>,
+	"className" | "style"
+> & {
+	position?: ToastPosition;
+	portalProps?: ToastPortalProps;
+};
+
+export type AnchoredToastProviderProps = Omit<
+	ComponentPropsWithRef<typeof BaseToast.Provider>,
+	"className" | "style"
+> & {
+	portalProps?: ToastPortalProps;
+};

package/src/components/toggle/toggle-colors.stylex.ts

@@ -0,0 +1,27 @@
+import { defineVars } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+
+// Forced colors keep pressed fills solid system colors in every state.
+export const toggleColors = defineVars({
+	pressedActiveBackground: {
+		[conditions.forcedColors]: "Highlight",
+		default: `color-mix(in oklch, ${colors.brandBackground} 84%, ${colors.brandForeground})`,
+	},
+	pressedBackground: {
+		[conditions.forcedColors]: "Highlight",
+		default: colors.brandBackground,
+	},
+	pressedBorder: {
+		[conditions.forcedColors]: "Highlight",
+		default: colors.brandForeground,
+	},
+	pressedForeground: {
+		[conditions.forcedColors]: "HighlightText",
+		default: colors.brandForeground,
+	},
+	pressedHoverBackground: {
+		[conditions.forcedColors]: "Highlight",
+		default: `color-mix(in oklch, ${colors.brandBackground} 92%, ${colors.brandForeground})`,
+	},
+});

package/src/components/toggle/toggle.styles.ts

@@ -0,0 +1,267 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize } from "../../styles/dimensions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+	forcedColorAdjust,
+	opacity,
+} from "../../styles/interaction.stylex";
+import { duration, easing, pressSurface } from "../../styles/motion.stylex";
+import { shadows } from "../../styles/shadows.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+import { toggleColors } from "./toggle-colors.stylex";
+
+export const toggleStyles = create({
+	base: {
+		// The surface lives on ::before (see Button): press moves its edges by a
+		// fixed 2px while the label and focus ring stay still. Border widths are
+		// inherited so joined groups keep their zero-width inner edges.
+		"::before": {
+			backgroundColor: {
+				":active:not([data-disabled])": colors.controlSurface,
+				[conditions.canHover]: {
+					":hover:not([data-disabled]):not([data-pressed]):not(:active)":
+						colors.controlSurfaceHover,
+				},
+				"[data-pressed]": toggleColors.pressedBackground,
+				"[data-pressed]:active:not([data-disabled])":
+					toggleColors.pressedActiveBackground,
+				"[data-pressed]:not([data-disabled]):not(:active):hover": {
+					[conditions.canHover]: toggleColors.pressedHoverBackground,
+				},
+				default: "transparent",
+			},
+			borderColor: {
+				"[data-pressed]": toggleColors.pressedBorder,
+				default: "transparent",
+			},
+			borderEndEndRadius: "inherit",
+			borderEndStartRadius: "inherit",
+			borderStartEndRadius: "inherit",
+			borderStartStartRadius: "inherit",
+			borderStyle: "solid",
+			borderWidth: "inherit",
+			boxShadow: {
+				":active:not([data-disabled])": shadows.pressed,
+				"[data-pressed]": `${shadows.filledRest}, inset 0 1px 0 oklch(1 0 0 / 0.16)`,
+				"[data-pressed]:active:not([data-disabled])": shadows.pressed,
+				"[data-pressed]:not([data-disabled]):not(:active):hover": {
+					[conditions.canHover]: `${shadows.filledHover}, inset 0 1px 0 oklch(1 0 0 / 0.16)`,
+				},
+				default: "none",
+			},
+			boxSizing: "border-box",
+			content: '""',
+			inset: { ":active:not([data-disabled])": "1px", default: "-1px" },
+			pointerEvents: "none",
+			position: "absolute",
+			transitionDuration: {
+				":active:not([data-disabled])": duration.press,
+				[conditions.reducedMotion]: duration.instant,
+				default: pressSurface.restDuration,
+			},
+			transitionProperty: pressSurface.property,
+			transitionTimingFunction: {
+				":active:not([data-disabled])": easing.expoOut,
+				default: pressSurface.restEasing,
+			},
+			zIndex: -1,
+		},
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		appearance: "none",
+		backgroundColor: "transparent",
+		borderColor: "transparent",
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: "none",
+		boxSizing: "border-box",
+		color: {
+			"[data-pressed]": toggleColors.pressedForeground,
+			default: colors.content,
+		},
+		cursor: { "[data-disabled]": "not-allowed", default: "pointer" },
+		display: "inline-flex",
+		flexShrink: 0,
+		fontFamily: "inherit",
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.regular,
+		forcedColorAdjust: {
+			"[data-pressed]": forcedColorAdjust.selectedState,
+		},
+		gap: space["2"],
+		isolation: "isolate",
+		justifyContent: "center",
+		lineHeight: lineHeight.none,
+		maxInlineSize: "100%",
+		minInlineSize: 0,
+		opacity: {
+			"[data-disabled]": opacity.disabled,
+			default: 1,
+		},
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: { ":focus-visible": focus.offset, default: focus.offset },
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: {
+			":focus-visible": borderWidth.focus,
+			default: borderWidth.focus,
+		},
+		overflowWrap: "anywhere",
+		position: "relative",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "color, opacity, outline-color, outline-offset",
+		transitionTimingFunction: easing.expoOut,
+		userSelect: "none",
+		zIndex: { ":focus-visible": 1, default: 0 },
+	},
+	content: {
+		fontWeight: fontWeight.regular,
+		minInlineSize: {
+			":has(> svg:only-child)": controlSize.md,
+			":is([data-size='lg'], [data-size='icon-lg']):has(> svg:only-child)":
+				controlSize.lg,
+			":is([data-size='sm'], [data-size='icon-sm']):has(> svg:only-child)":
+				controlSize.sm,
+			default: 0,
+		},
+		paddingBlock: space["1"],
+		paddingInline: {
+			":has(> svg:only-child)": 0,
+			"[data-size^='icon']": 0,
+			"[data-size='lg']": "calc(0.875rem - 1px)",
+			"[data-size='lg']:has(> svg:only-child)": 0,
+			"[data-size='sm']": "calc(0.625rem - 1px)",
+			"[data-size='sm']:has(> svg:only-child)": 0,
+			default: "calc(0.75rem - 1px)",
+		},
+	},
+	embeddedGroup: {
+		flexShrink: 0,
+		overflowX: "visible",
+		overflowY: "visible",
+		padding: 0,
+	},
+	group: {
+		alignItems: "stretch",
+		borderRadius: shape.controlRadiusLarge,
+		boxSizing: "border-box",
+		display: "inline-flex",
+		gap: space["1"],
+		maxWidth: "100%",
+		minInlineSize: 0,
+		padding: `calc(${borderWidth.focus}px + ${focus.offset})`,
+		width: "fit-content",
+	},
+	groupOutline: { gap: 0 },
+	horizontal: {
+		flexDirection: "row",
+		overflowX: "auto",
+		scrollPaddingInline: space["1"],
+	},
+	horizontalSeparator: {
+		"::before": {
+			blockSize: borderWidth.thin,
+			inlineSize: "auto",
+			insetBlockEnd: "auto",
+			insetBlockStart: 0,
+			insetInlineEnd: space["2"],
+			insetInlineStart: space["2"],
+		},
+		height: {
+			":is([data-slot='toggle-group'][data-variant='outline'] > *)": 0,
+			default: borderWidth.thin,
+		},
+		width: "auto",
+	},
+	joinedHorizontal: {
+		"::before": { insetInline: "-1px" },
+		borderEndEndRadius: { ":last-child": "inherit", default: 0 },
+		borderEndStartRadius: { ":first-child": "inherit", default: 0 },
+		borderInlineEndWidth: { ":last-child": borderWidth.thin, default: 0 },
+		borderInlineStartWidth: { ":first-child": borderWidth.thin, default: 0 },
+		borderStartEndRadius: { ":last-child": "inherit", default: 0 },
+		borderStartStartRadius: { ":first-child": "inherit", default: 0 },
+	},
+	joinedVertical: {
+		"::before": { insetBlock: "-1px" },
+		borderBlockEndWidth: { ":last-child": borderWidth.thin, default: 0 },
+		borderBlockStartWidth: { ":first-child": borderWidth.thin, default: 0 },
+		borderEndEndRadius: { ":last-child": "inherit", default: 0 },
+		borderEndStartRadius: { ":last-child": "inherit", default: 0 },
+		borderStartEndRadius: { ":first-child": "inherit", default: 0 },
+		borderStartStartRadius: { ":first-child": "inherit", default: 0 },
+	},
+	outline: {
+		"::before": {
+			borderColor: {
+				[conditions.canHover]: {
+					":hover:not([data-disabled]):not([data-pressed])":
+						colors.controlBorderStrong,
+				},
+				"[data-pressed]": toggleColors.pressedBorder,
+				default: colors.border,
+			},
+			boxShadow: {
+				":active:not([data-disabled])": shadows.pressed,
+				[conditions.canHover]: {
+					":hover:not([data-disabled]):not([data-pressed]):not(:active)":
+						shadows.outlineHover,
+				},
+				"[data-pressed]": `${shadows.filledRest}, inset 0 1px 0 oklch(1 0 0 / 0.16)`,
+				"[data-pressed]:active:not([data-disabled])": shadows.pressed,
+				"[data-pressed]:not([data-disabled]):not(:active):hover": {
+					[conditions.canHover]: `${shadows.filledHover}, inset 0 1px 0 oklch(1 0 0 / 0.16)`,
+				},
+				default: shadows.outlineRest,
+			},
+		},
+	},
+	separator: {
+		"::before": {
+			backgroundColor: colors.border,
+			content: '""',
+			inlineSize: borderWidth.thin,
+			insetBlock: space["2"],
+			insetInlineStart: 0,
+			position: "absolute",
+		},
+		alignSelf: "stretch",
+		backgroundColor: "transparent",
+		borderStyle: "none",
+		flexShrink: 0,
+		margin: 0,
+		pointerEvents: "none",
+		position: "relative",
+		width: {
+			":is([data-slot='toggle-group'][data-variant='outline'] > *)": 0,
+			default: borderWidth.thin,
+		},
+		zIndex: 1,
+	},
+	smallGroup: { borderRadius: shape.controlRadius },
+	vertical: { flexDirection: "column" },
+});