@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/drawer/drawer.styles.ts

@@ -0,0 +1,233 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	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,
+	letterSpacing,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const drawerStyles = create({
+	backdrop: {
+		backgroundColor: colors.backdrop,
+		inset: 0,
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: "calc(1 - var(--drawer-swipe-progress, 0))",
+		},
+		position: "fixed",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-ending-style]": duration.overlayExit,
+			"[data-swiping]": duration.instant,
+			default: duration.overlayEnter,
+		},
+		transitionProperty: "opacity",
+		transitionTimingFunction: easing.easeInOut,
+		zIndex: 50,
+	},
+	close: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		backgroundColor: {
+			[conditions.canHover]: {
+				":hover:not(:disabled):not([data-disabled])":
+					colors.controlSurfaceHover,
+				default: "transparent",
+			},
+			default: "transparent",
+		},
+		borderEndEndRadius: shape.controlRadius,
+		borderEndStartRadius: shape.controlRadius,
+		borderStartEndRadius: shape.controlRadius,
+		borderStartStartRadius: shape.controlRadius,
+		borderStyle: "none",
+		borderWidth: 0,
+		color: colors.content,
+		cursor: {
+			":disabled": "not-allowed",
+			"[data-disabled]": "not-allowed",
+			default: "pointer",
+		},
+		display: "inline-flex",
+		height: "2rem",
+		insetBlockStart: space["5"],
+		insetInlineEnd: space["5"],
+		justifyContent: "center",
+		opacity: {
+			":disabled": opacity.disabled,
+			"[data-disabled]": opacity.disabled,
+			default: 1,
+		},
+		outline: "none",
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: { ":focus-visible": focus.offset, default: 0 },
+		outlineStyle: { ":focus-visible": "solid", default: "none" },
+		outlineWidth: { ":focus-visible": borderWidth.focus, default: 0 },
+		padding: 0,
+		position: "absolute",
+		transform: {
+			[conditions.reducedMotion]: {
+				":active:not(:disabled):not([data-disabled])": "none",
+				default: "none",
+			},
+			":active:not(:disabled):not([data-disabled])": "scale(0.96)",
+			default: "none",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color, transform",
+		transitionTimingFunction: easing.expoOut,
+		width: "2rem",
+		zIndex: 1,
+	},
+	content: {
+		boxSizing: "border-box",
+	},
+	description: {
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["20"],
+		marginBlock: 0,
+		overflowWrap: "anywhere",
+	},
+	footer: {
+		alignItems: "center",
+		backgroundColor: colors.workarea,
+		borderBlockStartColor: colors.border,
+		borderBlockStartStyle: "solid",
+		borderBlockStartWidth: borderWidth.thin,
+		display: "flex",
+		flexShrink: 0,
+		flexWrap: "wrap",
+		gap: space["2"],
+		justifyContent: "flex-end",
+		// One inset on every side: the last action lines up under the close
+		// button and sits as far from the side as from the bottom.
+		paddingBlock: space["4"],
+		paddingInline: space["4"],
+	},
+	footerBare: {
+		backgroundColor: "transparent",
+		borderBlockStartStyle: "none",
+		borderBlockStartWidth: 0,
+	},
+	header: {
+		display: "flex",
+		flexDirection: "column",
+		flexShrink: 0,
+		gap: space["1"],
+		minHeight: 0,
+		overflowY: "auto",
+		paddingBlockEnd: space["4"],
+		paddingBlockStart: space["6"],
+		paddingInline: space["6"],
+	},
+	headerWithClose: {
+		paddingInlineEnd: "3.5rem",
+	},
+	noSelection: {
+		userSelect: "none",
+	},
+	panel: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["4"],
+		minHeight: 0,
+		paddingBlock: space["4"],
+		paddingBlockStart: {
+			":is([data-slot='drawer-popup']:has([data-slot='drawer-header']) *)": 0,
+			default: space["6"],
+		},
+		paddingInline: space["6"],
+	},
+	popup: {
+		"--drawer-ending-duration": {
+			[conditions.reducedMotion]: duration.instant,
+			default: "calc(var(--drawer-swipe-strength, 1) * 400ms)",
+		},
+		backgroundColor: colors.floatingSurface,
+		borderColor: {
+			[conditions.moreContrast]: colors.controlBorderStrong,
+			default: colors.border,
+		},
+		boxShadow: shadows.floating,
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "flex",
+		flexDirection: "column",
+		minHeight: 0,
+		minWidth: 0,
+		opacity: { "[data-nested-drawer-open]": 0, default: 1 },
+		outline: "none",
+		overflow: "hidden",
+		pointerEvents: "auto",
+		position: "relative",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-ending-style]": "var(--drawer-ending-duration, 0ms)",
+			"[data-swiping]": duration.instant,
+			default: duration.overlayEnter,
+		},
+		transitionProperty: "transform, opacity",
+		transitionTimingFunction: easing.expoOut,
+	},
+	scrollArea: {
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+		flexShrink: 1,
+		minHeight: 0,
+		touchAction: "auto",
+		width: "100%",
+	},
+	swipeArea: { position: "fixed", touchAction: "none", zIndex: 50 },
+	title: {
+		color: colors.content,
+		fontSize: fontSize["20"],
+		fontWeight: fontWeight.semibold,
+		letterSpacing: letterSpacing.heading,
+		lineHeight: lineHeight["28"],
+		marginBlock: 0,
+		overflowWrap: "anywhere",
+		textWrap: "balance",
+	},
+	viewport: {
+		"--drawer-viewport-inset": "0px",
+		boxSizing: "border-box",
+		display: "flex",
+		height: "100%",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		overflow: "hidden",
+		overscrollBehavior: "contain",
+		pointerEvents: "none",
+		position: "fixed",
+		width: "100%",
+		zIndex: 51,
+	},
+});

package/src/components/drawer/drawer.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { props } from "@stylexjs/stylex";
+import { type ReactNode, useContext } from "react";
+import { overlayLayerStyles } from "../../styles/overlay-layers.styles";
+import {
+	CloseIcon,
+	DrawerContext,
+	positionToSwipeDirection,
+} from "./drawer.context";
+import { drawerStyles } from "./drawer.styles";
+import type {
+	DrawerBackdropProps,
+	DrawerBarProps,
+	DrawerCloseProps,
+	DrawerContentProps,
+	DrawerDescriptionProps,
+	DrawerFooterProps,
+	DrawerHeaderProps,
+	DrawerPanelProps,
+	DrawerPopupProps,
+	DrawerPortalProps,
+	DrawerProps,
+	DrawerSwipeAreaProps,
+	DrawerTitleProps,
+	DrawerTriggerProps,
+	DrawerViewportProps,
+} from "./drawer.types";
+import { DrawerBar as InnerDrawerBar } from "./drawer-bar";
+import { DrawerContent as BaseDrawerContent } from "./drawer-content";
+import {
+	DrawerFooter as LayoutDrawerFooter,
+	DrawerHeader as LayoutDrawerHeader,
+	DrawerPanel as LayoutDrawerPanel,
+} from "./drawer-layout";
+import {
+	drawerPopupPositionStyles,
+	drawerPositionsStyles,
+	drawerViewportPositionStyles,
+} from "./drawer-positions.styles";
+
+export type {
+	DrawerBackdropProps,
+	DrawerBarProps,
+	DrawerCloseProps,
+	DrawerContentProps,
+	DrawerDescriptionProps,
+	DrawerFooterProps,
+	DrawerHeaderProps,
+	DrawerPanelProps,
+	DrawerPopupProps,
+	DrawerPortalProps,
+	DrawerPosition,
+	DrawerProps,
+	DrawerSwipeAreaProps,
+	DrawerTitleProps,
+	DrawerTriggerProps,
+	DrawerVariant,
+	DrawerViewportProps,
+} from "./drawer.types";
+
+const drawerVariantStyles = {
+	default: null,
+	inset: drawerPositionsStyles.popup_inset,
+	straight: drawerPositionsStyles.popup_straight,
+};
+
+export const DrawerPrimitive = BaseDrawer;
+export const DrawerCreateHandle = BaseDrawer.createHandle;
+export const DrawerPortal: (props: DrawerPortalProps) => ReactNode =
+	BaseDrawer.Portal;
+
+export function Drawer<Payload = unknown>({
+	children,
+	position = "bottom",
+	swipeDirection,
+	...rest
+}: DrawerProps<Payload>) {
+	return (
+		<DrawerContext.Provider value={{ position }}>
+			<BaseDrawer.Root
+				{...rest}
+				swipeDirection={swipeDirection ?? positionToSwipeDirection[position]}
+			>
+				{children}
+			</BaseDrawer.Root>
+		</DrawerContext.Provider>
+	);
+}
+
+export function DrawerTrigger<Payload = unknown>({
+	ref,
+	render,
+	type,
+	...rest
+}: DrawerTriggerProps<Payload>) {
+	return (
+		<BaseDrawer.Trigger
+			{...rest}
+			data-slot="drawer-trigger"
+			ref={ref}
+			render={render}
+			type={render ? type : (type ?? "button")}
+		/>
+	);
+}
+
+export function DrawerBar(barProps: DrawerBarProps) {
+	return <InnerDrawerBar {...barProps} />;
+}
+
+export function DrawerPopup({
+	children,
+	position: positionProp,
+	closeProps,
+	portalProps,
+	ref,
+	showBar = false,
+	showCloseButton = false,
+	variant = "default",
+	...rest
+}: DrawerPopupProps) {
+	const { position: contextPosition } = useContext(DrawerContext);
+	const position = positionProp ?? contextPosition;
+
+	const popup = (
+		<DrawerContext.Provider value={{ position, showCloseButton }}>
+			<BaseDrawer.Portal
+				{...mergeProps(props(overlayLayerStyles.modalPortal), portalProps)}
+			>
+				<DrawerBackdrop />
+				<DrawerViewport position={position} variant={variant}>
+					<BaseDrawer.Popup
+						{...rest}
+						data-slot="drawer-popup"
+						ref={ref}
+						{...props(
+							drawerStyles.popup,
+							drawerPopupPositionStyles[position],
+							drawerVariantStyles[variant]
+						)}
+					>
+						{showBar ? <DrawerBar /> : null}
+						{showCloseButton ? (
+							<BaseDrawer.Close
+								aria-label="Close"
+								{...closeProps}
+								data-slot="drawer-default-close"
+								{...props(drawerStyles.close)}
+							>
+								<CloseIcon />
+							</BaseDrawer.Close>
+						) : null}
+						{children}
+					</BaseDrawer.Popup>
+				</DrawerViewport>
+			</BaseDrawer.Portal>
+		</DrawerContext.Provider>
+	);
+	return position === "bottom" ? (
+		<BaseDrawer.VirtualKeyboardProvider>
+			{popup}
+		</BaseDrawer.VirtualKeyboardProvider>
+	) : (
+		popup
+	);
+}
+
+export function DrawerBackdrop({ ...rest }: DrawerBackdropProps) {
+	return (
+		<BaseDrawer.Backdrop
+			{...rest}
+			data-slot="drawer-backdrop"
+			{...props(drawerStyles.backdrop, overlayLayerStyles.backdrop)}
+		/>
+	);
+}
+
+export function DrawerViewport({
+	position: positionProp,
+	variant = "default",
+	...rest
+}: DrawerViewportProps) {
+	const { position: contextPosition } = useContext(DrawerContext);
+	const position = positionProp ?? contextPosition;
+	return (
+		<BaseDrawer.Viewport
+			{...rest}
+			data-slot="drawer-viewport"
+			{...props(
+				drawerStyles.viewport,
+				drawerViewportPositionStyles[position],
+				variant === "inset" ? drawerPositionsStyles.viewport_inset : null
+			)}
+		/>
+	);
+}
+
+export function DrawerSwipeArea({
+	position: positionProp,
+	...rest
+}: DrawerSwipeAreaProps) {
+	const { position: contextPosition } = useContext(DrawerContext);
+	const position = positionProp ?? contextPosition;
+	return (
+		<BaseDrawer.SwipeArea
+			{...rest}
+			data-slot="drawer-swipe-area"
+			{...props(
+				drawerStyles.swipeArea,
+				drawerPositionsStyles[`swipeArea_${position}`]
+			)}
+		/>
+	);
+}
+
+export function DrawerContent(contentProps: DrawerContentProps) {
+	return <BaseDrawerContent {...contentProps} />;
+}
+
+export function DrawerTitle({ children, ref, ...rest }: DrawerTitleProps) {
+	return (
+		<BaseDrawer.Title
+			{...rest}
+			data-slot="drawer-title"
+			ref={ref}
+			{...props(drawerStyles.title)}
+		>
+			{children}
+		</BaseDrawer.Title>
+	);
+}
+
+export function DrawerDescription({
+	children,
+	ref,
+	...rest
+}: DrawerDescriptionProps) {
+	return (
+		<BaseDrawer.Description
+			{...rest}
+			data-slot="drawer-description"
+			ref={ref}
+			{...props(drawerStyles.description)}
+		>
+			{children}
+		</BaseDrawer.Description>
+	);
+}
+
+export function DrawerClose({ ref, render, type, ...rest }: DrawerCloseProps) {
+	return (
+		<BaseDrawer.Close
+			{...rest}
+			data-slot="drawer-close"
+			ref={ref}
+			render={render}
+			type={render ? type : (type ?? "button")}
+		/>
+	);
+}
+
+export function DrawerHeader(headerProps: DrawerHeaderProps) {
+	return <LayoutDrawerHeader {...headerProps} />;
+}
+
+export function DrawerPanel(panelProps: DrawerPanelProps) {
+	return <LayoutDrawerPanel {...panelProps} />;
+}
+
+export function DrawerFooter(footerProps: DrawerFooterProps) {
+	return <LayoutDrawerFooter {...footerProps} />;
+}
+
+// biome-ignore lint/performance/noBarrelFile: The public drawer subpath exposes its menu parts.
+export * from "./drawer-menu";

package/src/components/drawer/drawer.types.ts

@@ -0,0 +1,85 @@
+import type {
+	Drawer as BaseDrawer,
+	DrawerCloseProps as BaseDrawerCloseProps,
+	DrawerContentProps as BaseDrawerContentProps,
+	DrawerDescriptionProps as BaseDrawerDescriptionProps,
+	DrawerPopupProps as BaseDrawerPopupProps,
+	DrawerPortalProps as BaseDrawerPortalProps,
+	DrawerRootProps as BaseDrawerRootProps,
+	DrawerTitleProps as BaseDrawerTitleProps,
+	DrawerTriggerProps as BaseDrawerTriggerProps,
+} from "@base-ui/react/drawer";
+import type { useRender } from "@base-ui/react/use-render";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+
+type DivProps = useRender.ComponentProps<"div">;
+type DrawerTriggerRef = ComponentPropsWithRef<typeof BaseDrawer.Trigger>["ref"];
+type DrawerPopupRef = ComponentPropsWithRef<typeof BaseDrawer.Popup>["ref"];
+
+export type DrawerPosition = "top" | "right" | "bottom" | "left";
+export type DrawerVariant = "default" | "straight" | "inset";
+
+export type DrawerProps<Payload = unknown> = Closed<
+	BaseDrawerRootProps<Payload> & {
+		position?: DrawerPosition;
+	}
+>;
+
+export type DrawerTriggerProps<Payload = unknown> = Closed<
+	Omit<BaseDrawerTriggerProps<Payload>, "ref"> & {
+		ref?: DrawerTriggerRef;
+	}
+>;
+
+export type DrawerPopupProps = Closed<
+	Omit<BaseDrawerPopupProps, "ref"> & {
+		closeProps?: DrawerCloseProps;
+		position?: DrawerPosition;
+		portalProps?: Closed<BaseDrawerPortalProps>;
+		ref?: DrawerPopupRef;
+		showBar?: boolean;
+		showCloseButton?: boolean;
+		variant?: DrawerVariant;
+	}
+>;
+
+export type DrawerContentProps = Closed<BaseDrawerContentProps>;
+
+export type DrawerBarProps = Closed<DivProps & { position?: DrawerPosition }>;
+
+export type DrawerTitleProps = Closed<BaseDrawerTitleProps>;
+export type DrawerDescriptionProps = Closed<BaseDrawerDescriptionProps>;
+export type DrawerCloseProps = Closed<BaseDrawerCloseProps>;
+export type DrawerHeaderProps = Closed<
+	Omit<useRender.ComponentProps<"div">, "data-slot"> & {
+		allowSelection?: boolean;
+	}
+>;
+export type DrawerPanelProps = Closed<
+	Omit<useRender.ComponentProps<"div">, "data-slot"> & {
+		allowSelection?: boolean;
+		scrollFade?: boolean;
+		scrollable?: boolean;
+	}
+>;
+export type DrawerFooterProps = Closed<
+	Omit<useRender.ComponentProps<"div">, "data-slot"> & {
+		allowSelection?: boolean;
+		variant?: "default" | "bare";
+	}
+>;
+
+export type DrawerBackdropProps = Closed<BaseDrawer.Backdrop.Props>;
+export type DrawerPortalProps = Closed<BaseDrawer.Portal.Props>;
+export type DrawerViewportProps = Closed<
+	BaseDrawer.Viewport.Props & {
+		position?: DrawerPosition;
+		variant?: DrawerVariant;
+	}
+>;
+export type DrawerSwipeAreaProps = Closed<
+	BaseDrawer.SwipeArea.Props & {
+		position?: DrawerPosition;
+	}
+>;

package/src/components/empty/empty.styles.ts

@@ -0,0 +1,118 @@
+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 } from "../../styles/interaction.stylex";
+import { shadows } from "../../styles/shadows.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	letterSpacing,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const emptyStyles = create({
+	content: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["4"],
+		maxWidth: "24rem",
+		minWidth: 0,
+		textWrap: "balance",
+		width: "100%",
+	},
+	description: {
+		boxSizing: "border-box",
+		color: colors.secondaryContent,
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["24"],
+		marginBlock: 0,
+		minWidth: 0,
+		textWrap: "pretty",
+	},
+	header: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		maxWidth: "24rem",
+		minWidth: 0,
+		textAlign: "center",
+		width: "100%",
+	},
+	media: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "flex",
+		justifyContent: "center",
+		marginBlockEnd: space["6"],
+		position: "relative",
+	},
+	mediaBackCard: {
+		bottom: "1px",
+		boxShadow: "none",
+		pointerEvents: "none",
+		position: "absolute",
+	},
+	mediaBackCardLeft: {
+		transform: "translateX(-2px) rotate(-10deg) scale(0.84)",
+		transformOrigin: "bottom left",
+	},
+	mediaBackCardRight: {
+		transform: "translateX(2px) rotate(10deg) scale(0.84)",
+		transformOrigin: "bottom right",
+	},
+	mediaCard: {
+		alignItems: "center",
+		backgroundColor: colors.surface,
+		borderColor: colors.border,
+		borderRadius: shape.controlRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.outlineRest,
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "flex",
+		flexShrink: 0,
+		height: controlSize.md,
+		justifyContent: "center",
+		position: "relative",
+		width: controlSize.md,
+	},
+	root: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["6"],
+		justifyContent: "center",
+		minWidth: 0,
+		paddingBlock: {
+			default: space["6"],
+			[conditions.sm]: space["8"],
+		},
+		paddingInline: {
+			default: space["4"],
+			[conditions.sm]: space["5"],
+		},
+		textAlign: "center",
+		width: "100%",
+	},
+	title: {
+		boxSizing: "border-box",
+		color: colors.content,
+		fontSize: fontSize["20"],
+		fontWeight: fontWeight.semibold,
+		letterSpacing: letterSpacing.heading,
+		lineHeight: lineHeight["28"],
+		marginBlock: 0,
+		marginBlockEnd: space["1"],
+		minWidth: 0,
+		textWrap: "balance",
+	},
+});