@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/context-menu/context-menu.types.ts

@@ -0,0 +1,97 @@
+import type {
+	ContextMenu as BaseContextMenu,
+	ContextMenuRootProps as BaseContextMenuRootProps,
+	ContextMenuSubmenuRootProps,
+} from "@base-ui/react/context-menu";
+import type { MenuRadioGroupChangeEventDetails as ContextMenuRadioGroupChangeEventDetails } from "@base-ui/react/menu";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+
+type ContextMenuPositionerProps = ComponentPropsWithRef<
+	typeof BaseContextMenu.Positioner
+>;
+type ContextMenuBasePopupProps = ComponentPropsWithRef<
+	typeof BaseContextMenu.Popup
+>;
+
+export type ContextMenuProps<_Payload = unknown> =
+	Closed<BaseContextMenuRootProps>;
+export type ContextMenuPortalProps = Closed<
+	ComponentPropsWithRef<typeof BaseContextMenu.Portal>
+>;
+export type ContextMenuTriggerProps = Closed<
+	ComponentPropsWithRef<typeof BaseContextMenu.Trigger>
+>;
+export type ContextMenuPopupProps = Closed<
+	Omit<ContextMenuBasePopupProps, "ref"> & {
+		align?: ContextMenuPositionerProps["align"];
+		alignOffset?: ContextMenuPositionerProps["alignOffset"];
+		anchor?: ContextMenuPositionerProps["anchor"];
+		portalProps?: Omit<ContextMenuPortalProps, "children" | "ref">;
+		ref?: ContextMenuBasePopupProps["ref"];
+		side?: ContextMenuPositionerProps["side"];
+		sideOffset?: ContextMenuPositionerProps["sideOffset"];
+	}
+>;
+export type ContextMenuItemVariant = "default" | "destructive";
+export type ContextMenuItemProps = Closed<
+	Omit<ComponentPropsWithRef<typeof BaseContextMenu.Item>, "ref"> & {
+		closeOnClick?: boolean;
+		inset?: boolean;
+		ref?: ComponentPropsWithRef<typeof BaseContextMenu.Item>["ref"];
+		variant?: ContextMenuItemVariant;
+	}
+>;
+export type ContextMenuLinkItemProps = Closed<
+	ComponentPropsWithRef<typeof BaseContextMenu.LinkItem> & {
+		inset?: boolean;
+		variant?: ContextMenuItemVariant;
+	}
+>;
+export type ContextMenuGroupProps = Closed<
+	ComponentPropsWithRef<typeof BaseContextMenu.Group>
+>;
+export type ContextMenuGroupLabelProps = Closed<
+	ComponentPropsWithRef<typeof BaseContextMenu.GroupLabel> & { inset?: boolean }
+>;
+export type ContextMenuSeparatorProps = Closed<
+	ComponentPropsWithRef<typeof BaseContextMenu.Separator>
+>;
+export type ContextMenuShortcutProps = Closed<ComponentPropsWithRef<"kbd">>;
+export type ContextMenuCheckboxItemVariant = "default" | "switch";
+export type ContextMenuCheckboxItemProps = Closed<
+	Omit<ComponentPropsWithRef<typeof BaseContextMenu.CheckboxItem>, "ref"> & {
+		ref?: ComponentPropsWithRef<typeof BaseContextMenu.CheckboxItem>["ref"];
+		variant?: ContextMenuCheckboxItemVariant;
+	}
+>;
+type BaseContextMenuRadioGroupProps = ComponentPropsWithRef<
+	typeof BaseContextMenu.RadioGroup
+>;
+export type ContextMenuRadioGroupProps<Value = unknown> = Closed<
+	Omit<
+		BaseContextMenuRadioGroupProps,
+		"defaultValue" | "onValueChange" | "value"
+	> & {
+		defaultValue?: Value;
+		onValueChange?: (
+			value: Value,
+			eventDetails: ContextMenuRadioGroupChangeEventDetails
+		) => void;
+		value?: Value;
+	}
+>;
+type BaseContextMenuRadioItemProps = ComponentPropsWithRef<
+	typeof BaseContextMenu.RadioItem
+>;
+export type ContextMenuRadioItemProps<Value = unknown> = Closed<
+	Omit<BaseContextMenuRadioItemProps, "value"> & { value: Value }
+>;
+export type ContextMenuSubProps = Closed<ContextMenuSubmenuRootProps>;
+export type ContextMenuSubTriggerProps = Closed<
+	Omit<ComponentPropsWithRef<typeof BaseContextMenu.SubmenuTrigger>, "ref"> & {
+		inset?: boolean;
+		ref?: ComponentPropsWithRef<typeof BaseContextMenu.SubmenuTrigger>["ref"];
+	}
+>;
+export type ContextMenuSubPopupProps = Closed<ContextMenuPopupProps>;

package/src/components/conversation/conversation.styles.ts

@@ -0,0 +1,56 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+// A readable measure for the thread and the composer under it.
+const MEASURE = "48rem";
+
+export const conversationStyles = create({
+	// The transcript and its rail side by side; the jump button floats here.
+	body: {
+		display: "flex",
+		flexGrow: 1,
+		minBlockSize: 0,
+		position: "relative",
+	},
+	// The thread's column, centered; it fills the view so an empty state can
+	// center in it.
+	column: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		marginInline: "auto",
+		maxInlineSize: MEASURE,
+		minBlockSize: "100%",
+		paddingBlock: space["6"],
+		paddingInline: space["4"],
+	},
+	// The rail sits at the end edge; on a narrow view the thread keeps clear.
+	columnWithRail: { paddingInlineEnd: space["10"] },
+	emptyDescription: { color: colors.mutedContent, margin: 0 },
+	// Centered in the view before the first turn; Suggestions sit under it.
+	emptyState: {
+		// Full width, so Suggestions get the whole column; the words center.
+		alignItems: "stretch",
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+		gap: space["4"],
+		justifyContent: "center",
+		textAlign: "center",
+	},
+	emptyText: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+	},
+	emptyTitle: { color: colors.content, margin: 0 },
+	footer: {
+		boxSizing: "border-box",
+		inlineSize: "100%",
+		marginInline: "auto",
+		maxInlineSize: MEASURE,
+		paddingBlockEnd: space["4"],
+		paddingInline: space["4"],
+	},
+});

package/src/components/conversation/conversation.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import {
+	Children,
+	type ComponentPropsWithRef,
+	isValidElement,
+	type ReactElement,
+	type ReactNode,
+} from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import {
+	MessageScroller,
+	MessageScrollerButton,
+	MessageScrollerContent,
+	MessageScrollerItem,
+	MessageScrollerNavigation,
+	MessageScrollerViewport,
+} from "../message-scroller/message-scroller";
+import { conversationStyles as styles } from "./conversation.styles";
+
+type Part = Omit<Closed<ComponentPropsWithRef<"div">>, "data-slot">;
+
+export type ConversationProps = Part & { children: ReactNode };
+
+/**
+ * The thread with the agent: turns that scroll, an empty state before the
+ * first one, and the composer docked under them. It fills a parent with a
+ * bounded height.
+ */
+export function Conversation({ children, ...rest }: ConversationProps) {
+	return <MessageScroller {...rest}>{children}</MessageScroller>;
+}
+
+export interface ConversationEmptyStateProps {
+	/** Starters, such as Suggestions, under the words. */
+	children?: ReactNode;
+	description?: ReactNode;
+	title: ReactNode;
+}
+
+/** The start screen, shown in place of the thread before the first turn. */
+export function ConversationEmptyState({
+	children,
+	description,
+	title,
+}: ConversationEmptyStateProps) {
+	return (
+		<div data-slot="conversation-empty-state" {...props(styles.emptyState)}>
+			<div {...props(styles.emptyText)}>
+				<h2 {...props(typeRoles.subheading, styles.emptyTitle)}>{title}</h2>
+				{description ? (
+					<p {...props(typeRoles.body, styles.emptyDescription)}>
+						{description}
+					</p>
+				) : null}
+			</div>
+			{children}
+		</div>
+	);
+}
+
+// React prefixes keys from Children.toArray; the id is the key as written.
+const KEY_PREFIX = /^\.\$/u;
+
+function idOf(turn: ReactElement) {
+	return String(turn.key).replace(KEY_PREFIX, "");
+}
+
+function split(children: ReactNode) {
+	const empty: ReactNode[] = [];
+	const turns: ReactElement[] = [];
+	for (const child of Children.toArray(children)) {
+		if (isValidElement(child) && child.type === ConversationEmptyState) {
+			empty.push(child);
+		} else if (isValidElement(child)) {
+			turns.push(child);
+		}
+	}
+	return { empty, turns };
+}
+
+export interface ConversationContentProps {
+	"aria-label"?: string;
+	/** True while a reply streams, so assistive tech waits for it. */
+	busy?: boolean;
+	/**
+	 * The turns, each with a key that is its id, and an optional
+	 * ConversationEmptyState. A turn holding the person's own Message
+	 * settles near the top when sent, and the rail lists it.
+	 */
+	children: ReactNode;
+	/** Adds a MessageScrollerNavigation rail, one tick per turn the person sent. */
+	navigation?: boolean;
+}
+
+/** The scrolling thread, with the jump button floating over its end. */
+export function ConversationContent({
+	"aria-label": ariaLabel = "Conversation",
+	busy = false,
+	children,
+	navigation = false,
+}: ConversationContentProps) {
+	const { empty, turns } = split(children);
+	return (
+		<div data-slot="conversation-content" {...props(styles.body)}>
+			<MessageScrollerViewport aria-label={ariaLabel}>
+				<div {...props(styles.column, navigation && styles.columnWithRail)}>
+					{turns.length === 0 ? empty : null}
+					<MessageScrollerContent busy={busy}>
+						{turns.map((turn) => (
+							<MessageScrollerItem
+								key={turn.key}
+								messageId={idOf(turn)}
+								scrollAnchor="auto"
+							>
+								{turn}
+							</MessageScrollerItem>
+						))}
+					</MessageScrollerContent>
+				</div>
+			</MessageScrollerViewport>
+			{navigation ? <MessageScrollerNavigation /> : null}
+			<MessageScrollerButton />
+		</div>
+	);
+}
+
+export type ConversationFooterProps = Part & { children: ReactNode };
+
+/** Holds the composer under the thread, in the thread's column. */
+export function ConversationFooter({
+	children,
+	...rest
+}: ConversationFooterProps) {
+	return (
+		<div {...rest} data-slot="conversation-footer" {...props(styles.footer)}>
+			{children}
+		</div>
+	);
+}

package/src/components/data-table/data-table.styles.ts

@@ -0,0 +1,63 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize } from "../../styles/dimensions.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { lineHeight } from "../../styles/typography.stylex";
+
+export const dataTableStyles = create({
+	column: (width: number) => ({ width }),
+	controls: {
+		alignItems: "center",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["1"],
+	},
+	footer: {
+		alignItems: "center",
+		display: "flex",
+		flexWrap: "wrap",
+		fontVariantNumeric: "tabular-nums",
+		gap: space["2"],
+		justifyContent: "space-between",
+	},
+	// An 8px hit area inside the column's trailing edge; it shows a 2px line on
+	// the column rule while hovered or dragged.
+	resizeHandle: {
+		"::after": {
+			backgroundColor: {
+				"[data-resizing]": colors.focusRing,
+				[conditions.canHover]: { ":hover": colors.focusRing },
+				default: "transparent",
+			},
+			content: '""',
+			insetBlock: 0,
+			insetInlineEnd: 0,
+			position: "absolute",
+			width: "2px",
+		},
+		cursor: "col-resize",
+		insetBlock: 0,
+		insetInlineEnd: 0,
+		position: "absolute",
+		touchAction: "none",
+		userSelect: "none",
+		width: "8px",
+		zIndex: 1,
+	},
+	// The 32px sort button overlaps the cell padding so sortable headers keep
+	// the row height, and its label aligns with the column text.
+	sortButton: {
+		display: "inline-flex",
+		marginBlock: `calc((${lineHeight["20"]} - ${controlSize.sm}) / 2)`,
+		marginInline: `calc(-1 * ${space["3"]})`,
+		verticalAlign: "top",
+	},
+	spacerCell: {
+		borderWidth: 0,
+		height: 0,
+		paddingBlock: 0,
+		paddingInline: 0,
+	},
+	spacerHeight: (height: number) => ({ height, minHeight: height }),
+});