@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/sheet/sheet.styles.ts

@@ -0,0 +1,209 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+} 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 sheetStyles = create({
+	backdrop: {
+		backgroundColor: colors.backdrop,
+		inset: 0,
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		position: "fixed",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-ending-style]": duration.overlayExit,
+			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",
+		// Centers the 32px button on the 28px heading line, and puts the 16px
+		// glyph's edge on the 24px content edge.
+		insetBlockStart: `calc(${space["6"]} + (${lineHeight["28"]} - 2rem) / 2)`,
+		insetInlineEnd: space["4"],
+		justifyContent: "center",
+		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,
+	},
+	description: {
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["20"],
+		marginBlock: 0,
+	},
+	footer: {
+		alignItems: "center",
+		borderBlockStartColor: colors.border,
+		borderBlockStartStyle: "solid",
+		borderBlockStartWidth: borderWidth.thin,
+		display: "flex",
+		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: {
+		borderBlockStartStyle: "none",
+		borderBlockStartWidth: 0,
+	},
+	header: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		paddingBlockStart: space["6"],
+		paddingInline: space["6"],
+		paddingInlineEnd: "3.5rem",
+	},
+	panel: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["4"],
+		minHeight: 0,
+		paddingBlock: space["4"],
+		paddingInline: space["6"],
+	},
+	popup: {
+		backgroundColor: colors.floatingSurface,
+		borderColor: {
+			[conditions.moreContrast]: colors.controlBorderStrong,
+			default: colors.border,
+		},
+		borderStyle: "solid",
+		borderWidth: {
+			[conditions.moreContrast]: borderWidth.thin,
+			default: 0,
+		},
+		boxShadow: shadows.floating,
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "flex",
+		flexDirection: "column",
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		overflow: "hidden",
+		pointerEvents: "auto",
+		position: "relative",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-ending-style]": duration.overlayExit,
+			"[data-instant]": duration.instant,
+			default: duration.overlayEnter,
+		},
+		transitionProperty: "opacity, transform",
+		transitionTimingFunction: {
+			"[data-ending-style]": easing.easeInOut,
+			default: easing.expoOut,
+		},
+	},
+	scrollArea: {
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+		flexShrink: 1,
+		minHeight: 0,
+		width: "100%",
+	},
+	title: {
+		color: colors.content,
+		fontSize: fontSize["20"],
+		fontWeight: fontWeight.semibold,
+		letterSpacing: letterSpacing.heading,
+		lineHeight: lineHeight["28"],
+		marginBlock: 0,
+		textWrap: "balance",
+	},
+	viewport: {
+		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/sheet/sheet.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { props } from "@stylexjs/stylex";
+import { IconX } from "../../icons";
+import { overlayLayerStyles } from "../../styles/overlay-layers.styles";
+import { sheetStyles } from "./sheet.styles";
+import type {
+	SheetCloseProps,
+	SheetDescriptionProps,
+	SheetFooterProps,
+	SheetHeaderProps,
+	SheetPanelProps,
+	SheetPopupProps,
+	SheetProps,
+	SheetTitleProps,
+	SheetTriggerProps,
+} from "./sheet.types";
+import {
+	SheetFooter as LayoutSheetFooter,
+	SheetHeader as LayoutSheetHeader,
+	SheetPanel as LayoutSheetPanel,
+} from "./sheet-layout";
+import {
+	popupSideStyles,
+	sheetPositionsStyles,
+	viewportSideStyles,
+} from "./sheet-positions.styles";
+
+export type {
+	SheetCloseProps,
+	SheetContentProps,
+	SheetDescriptionProps,
+	SheetFooterProps,
+	SheetHeaderProps,
+	SheetPanelProps,
+	SheetPopupProps,
+	SheetProps,
+	SheetSide,
+	SheetTitleProps,
+	SheetTriggerProps,
+	SheetVariant,
+} from "./sheet.types";
+
+export const SheetPrimitive = BaseDialog;
+export const SheetCreateHandle = BaseDialog.createHandle;
+
+function CloseIcon() {
+	return <IconX aria-hidden="true" focusable="false" size="16" />;
+}
+
+export function Sheet<Payload = unknown>(rootProps: SheetProps<Payload>) {
+	return <BaseDialog.Root {...rootProps} />;
+}
+
+export function SheetTrigger<Payload = unknown>({
+	ref,
+	render,
+	type,
+	...rest
+}: SheetTriggerProps<Payload>) {
+	return (
+		<BaseDialog.Trigger
+			{...rest}
+			data-slot="sheet-trigger"
+			ref={ref}
+			render={render}
+			type={render ? type : (type ?? "button")}
+		/>
+	);
+}
+
+export function SheetPopup({
+	children,
+	closeProps,
+	portalProps,
+	ref,
+	showCloseButton = true,
+	side = "right",
+	variant = "default",
+	...rest
+}: SheetPopupProps) {
+	return (
+		<BaseDialog.Portal
+			{...portalProps}
+			{...props(overlayLayerStyles.modalPortal)}
+		>
+			<BaseDialog.Backdrop
+				data-slot="sheet-backdrop"
+				{...props(sheetStyles.backdrop, overlayLayerStyles.backdrop)}
+			/>
+			<BaseDialog.Viewport
+				data-slot="sheet-viewport"
+				{...props(
+					sheetStyles.viewport,
+					overlayLayerStyles.modalViewport,
+					viewportSideStyles[side],
+					variant === "inset" ? sheetPositionsStyles.viewport_inset : null
+				)}
+			>
+				<BaseDialog.Popup
+					{...rest}
+					data-slot="sheet-popup"
+					ref={ref}
+					{...props(
+						sheetStyles.popup,
+						popupSideStyles[side],
+						variant === "inset" ? sheetPositionsStyles.popup_inset : null
+					)}
+				>
+					{showCloseButton ? (
+						<BaseDialog.Close
+							aria-label="Close"
+							data-slot="sheet-default-close"
+							{...closeProps}
+							{...props(sheetStyles.close)}
+						>
+							<CloseIcon />
+						</BaseDialog.Close>
+					) : null}
+					{children}
+				</BaseDialog.Popup>
+			</BaseDialog.Viewport>
+		</BaseDialog.Portal>
+	);
+}
+
+export const SheetContent = SheetPopup;
+
+export function SheetTitle({ children, ref, ...rest }: SheetTitleProps) {
+	return (
+		<BaseDialog.Title
+			{...rest}
+			data-slot="sheet-title"
+			ref={ref}
+			{...props(sheetStyles.title)}
+		>
+			{children}
+		</BaseDialog.Title>
+	);
+}
+
+export function SheetDescription({
+	children,
+	ref,
+	...rest
+}: SheetDescriptionProps) {
+	return (
+		<BaseDialog.Description
+			{...rest}
+			data-slot="sheet-description"
+			ref={ref}
+			{...props(sheetStyles.description)}
+		>
+			{children}
+		</BaseDialog.Description>
+	);
+}
+
+export function SheetClose({ ref, render, type, ...rest }: SheetCloseProps) {
+	return (
+		<BaseDialog.Close
+			{...rest}
+			data-slot="sheet-close"
+			ref={ref}
+			render={render}
+			type={render ? type : (type ?? "button")}
+		/>
+	);
+}
+
+export function SheetHeader(headerProps: SheetHeaderProps) {
+	return <LayoutSheetHeader {...headerProps} />;
+}
+
+export function SheetPanel(panelProps: SheetPanelProps) {
+	return <LayoutSheetPanel {...panelProps} />;
+}
+
+export function SheetFooter(footerProps: SheetFooterProps) {
+	return <LayoutSheetFooter {...footerProps} />;
+}

package/src/components/sheet/sheet.types.ts

@@ -0,0 +1,67 @@
+import type {
+	Dialog as BaseDialog,
+	DialogCloseProps as BaseDialogCloseProps,
+	DialogDescriptionProps as BaseDialogDescriptionProps,
+	DialogPopupProps as BaseDialogPopupProps,
+	DialogPortalProps as BaseDialogPortalProps,
+	DialogRootProps as BaseDialogRootProps,
+	DialogTitleProps as BaseDialogTitleProps,
+	DialogTriggerProps as BaseDialogTriggerProps,
+} from "@base-ui/react/dialog";
+import type { useRender } from "@base-ui/react/use-render";
+import type { ComponentPropsWithRef } from "react";
+
+type Closed<T> = Omit<T, "className" | "style">;
+type SheetTriggerRef = ComponentPropsWithRef<typeof BaseDialog.Trigger>["ref"];
+type SheetPopupRef = ComponentPropsWithRef<typeof BaseDialog.Popup>["ref"];
+
+export type SheetSide = "top" | "right" | "bottom" | "left";
+export type SheetVariant = "default" | "inset";
+
+export type SheetProps<Payload = unknown> = BaseDialogRootProps<Payload>;
+
+export type SheetTriggerProps<Payload = unknown> = Omit<
+	BaseDialogTriggerProps<Payload>,
+	"className" | "ref" | "style"
+> & {
+	ref?: SheetTriggerRef;
+};
+
+export type SheetPopupProps = Omit<
+	BaseDialogPopupProps,
+	"className" | "ref" | "render" | "style"
+> & {
+	closeProps?: SheetCloseProps;
+	portalProps?: Omit<
+		BaseDialogPortalProps,
+		"children" | "className" | "ref" | "render" | "style"
+	>;
+	ref?: SheetPopupRef;
+	showCloseButton?: boolean;
+	side?: SheetSide;
+	variant?: SheetVariant;
+};
+
+export type SheetContentProps = SheetPopupProps;
+export type SheetTitleProps = Closed<BaseDialogTitleProps>;
+export type SheetDescriptionProps = Closed<BaseDialogDescriptionProps>;
+export type SheetCloseProps = Omit<BaseDialogCloseProps, "className" | "style">;
+
+export type SheetHeaderProps = Omit<
+	useRender.ComponentProps<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+export type SheetPanelProps = Omit<
+	useRender.ComponentProps<"div">,
+	"className" | "data-slot" | "style"
+> & {
+	scrollFade?: boolean;
+};
+
+export type SheetFooterProps = Omit<
+	useRender.ComponentProps<"div">,
+	"className" | "data-slot" | "style"
+> & {
+	variant?: "default" | "bare";
+};

package/src/components/skeleton/skeleton.styles.ts

@@ -0,0 +1,52 @@
+import { create, keyframes } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize } from "../../styles/dimensions.stylex";
+import { easing } from "../../styles/motion.stylex";
+import { shape } from "../../styles/shape.stylex";
+
+const shimmer = keyframes({
+	"0%": {
+		backgroundPosition: "200% 0",
+	},
+	"100%": {
+		backgroundPosition: "-200% 0",
+	},
+});
+
+export const skeletonStyles = create({
+	base: {
+		animationDuration: "2s",
+		animationIterationCount: "infinite",
+		animationName: {
+			[conditions.reducedMotion]: "none",
+			default: shimmer,
+		},
+		animationTimingFunction: easing.linear,
+		backgroundAttachment: "fixed",
+		// The tile tone, like icon tiles and badges: present but quiet.
+		backgroundColor: colors.controlSurface,
+		backgroundImage: `linear-gradient(120deg, transparent 40%, color-mix(in oklch, ${colors.content} 8%, transparent) 50%, transparent 60%)`,
+		backgroundRepeat: "no-repeat",
+		backgroundSize: "200% 100%",
+		boxSizing: "border-box",
+		display: "block",
+	},
+	circle: {
+		borderRadius: "9999px",
+		flexShrink: 0,
+		height: controlSize.lg,
+		width: controlSize.lg,
+	},
+	line: {
+		borderRadius: shape.checkboxRadius,
+		height: "1rem",
+		width: "100%",
+	},
+	rectangle: {
+		aspectRatio: "16 / 9",
+		borderRadius: shape.controlRadius,
+		minHeight: controlSize["2xs"],
+		width: "100%",
+	},
+});

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,35 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { skeletonStyles } from "./skeleton.styles";
+
+export type SkeletonShape = "line" | "circle" | "rectangle";
+
+type NativeDivProps = ComponentPropsWithRef<"div">;
+
+export type SkeletonProps = Omit<
+	NativeDivProps,
+	"className" | "data-slot" | "style"
+> & {
+	shape?: SkeletonShape;
+};
+
+export function Skeleton({
+	"aria-hidden": ariaHidden = true,
+	children,
+	ref: forwardedRef,
+	shape = "line",
+	...rest
+}: SkeletonProps) {
+	return (
+		<div
+			{...rest}
+			aria-hidden={ariaHidden}
+			data-shape={shape}
+			data-slot="skeleton"
+			ref={forwardedRef}
+			{...props(skeletonStyles.base, skeletonStyles[shape])}
+		>
+			{children}
+		</div>
+	);
+}