@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/inline-citation/inline-citation.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { props, type StyleXStyles } from "@stylexjs/stylex";
+import { typeRoles } from "../../styles/typography.styles";
+import { Popover, PopoverPrimitive } from "../popover/popover";
+import { popoverStyles } from "../popover/popover.styles";
+import {
+	PreviewCard,
+	PreviewCardPrimitive,
+} from "../preview-card/preview-card";
+import { previewCardStyles } from "../preview-card/preview-card.styles";
+import { SourceRow, uniqueSources } from "../sources/sources";
+import { sourcesStyles } from "../sources/sources.styles";
+import { VisuallyHidden } from "../visually-hidden/visually-hidden";
+import {
+	type CitationSource,
+	SourceIcon,
+	sourceLabel,
+	sourceName,
+} from "./citation-source";
+import { inlineCitationStyles as styles } from "./inline-citation.styles";
+
+/** A page or document the text cites. */
+export type InlineCitationSource = CitationSource;
+
+export interface InlineCitationProps {
+	/**
+	 * The sources behind this point in the text. Several show as one chip,
+	 * such as "web.dev +2", that opens a list of them.
+	 */
+	sources: readonly InlineCitationSource[];
+}
+
+// Previews wait a moment, so passing over the text does not flash cards.
+const PREVIEW_DELAY = 300;
+
+function SourceCard({ source }: { source: CitationSource }) {
+	return (
+		<div data-slot="inline-citation-card" {...props(styles.card)}>
+			<span {...props(typeRoles.caption, styles.cardSite)}>
+				<SourceIcon source={source} />
+				{sourceLabel(source)}
+			</span>
+			{source.title ? (
+				<p {...props(typeRoles.label, styles.cardTitle)}>{source.title}</p>
+			) : null}
+			{source.description ? (
+				<p {...props(typeRoles.caption, styles.cardDescription)}>
+					{source.description}
+				</p>
+			) : null}
+		</div>
+	);
+}
+
+// A link to the page, with a preview on hover or focus.
+function LinkChip({
+	arrival,
+	source,
+}: {
+	arrival?: StyleXStyles;
+	source: CitationSource & { href: string };
+}) {
+	const label = sourceLabel(source);
+	const name = sourceName(source);
+	return (
+		<PreviewCard>
+			{/* The primitive keeps the chip's own slot; the wrapper would replace it. */}
+			<PreviewCardPrimitive.Trigger
+				delay={PREVIEW_DELAY}
+				href={source.href}
+				render={
+					<a
+						data-slot="inline-citation"
+						rel="noopener noreferrer"
+						target="_blank"
+						{...props(typeRoles.caption, styles.chip, arrival)}
+					/>
+				}
+			>
+				<SourceIcon source={source} />
+				{label}
+				<VisuallyHidden>
+					{name === label ? "" : `, ${name}`}, opens in a new tab
+				</VisuallyHidden>
+			</PreviewCardPrimitive.Trigger>
+			<PreviewCardPrimitive.Portal>
+				<PreviewCardPrimitive.Positioner
+					sideOffset={4}
+					{...props(previewCardStyles.positioner)}
+				>
+					<PreviewCardPrimitive.Popup
+						{...props(previewCardStyles.popup, styles.cardPopup)}
+					>
+						<SourceCard source={source} />
+					</PreviewCardPrimitive.Popup>
+				</PreviewCardPrimitive.Positioner>
+			</PreviewCardPrimitive.Portal>
+		</PreviewCard>
+	);
+}
+
+// Several sources at one point: the first site and a count, opening a list.
+function GroupChip({
+	arrival,
+	sources,
+}: {
+	arrival?: StyleXStyles;
+	sources: readonly CitationSource[];
+}) {
+	const [first] = sources;
+	if (!first) {
+		return null;
+	}
+	const more = sources.length - 1;
+	return (
+		<Popover>
+			<PopoverPrimitive.Trigger
+				delay={PREVIEW_DELAY}
+				openOnHover
+				render={
+					<button
+						data-slot="inline-citation"
+						type="button"
+						{...props(typeRoles.caption, styles.chip, arrival)}
+					/>
+				}
+			>
+				<SourceIcon source={first} />
+				{sourceLabel(first)}
+				<span {...props(styles.count)}> +{more}</span>
+				<VisuallyHidden>, {sources.length} sources</VisuallyHidden>
+			</PopoverPrimitive.Trigger>
+			<PopoverPrimitive.Portal>
+				<PopoverPrimitive.Positioner
+					sideOffset={4}
+					{...props(popoverStyles.positioner)}
+				>
+					<PopoverPrimitive.Popup
+						{...props(popoverStyles.popup, styles.listPopup)}
+					>
+						<ul
+							aria-label="Sources"
+							data-slot="inline-citation-sources"
+							{...props(sourcesStyles.list, styles.group)}
+						>
+							{sources.map((source, index) => (
+								// biome-ignore lint/suspicious/noArrayIndexKey: sources keep their order, and a document may share a title.
+								<li key={index}>
+									<SourceRow source={source} />
+								</li>
+							))}
+						</ul>
+					</PopoverPrimitive.Popup>
+				</PopoverPrimitive.Positioner>
+			</PopoverPrimitive.Portal>
+		</Popover>
+	);
+}
+
+/** The chip, with an optional entrance for text that is still arriving. */
+export function CitationChip({
+	arrival,
+	sources,
+}: {
+	arrival?: StyleXStyles;
+	sources: readonly CitationSource[];
+}) {
+	const unique = uniqueSources(sources);
+	const [source] = unique;
+	if (!source) {
+		return null;
+	}
+	if (unique.length > 1) {
+		return <GroupChip arrival={arrival} sources={unique} />;
+	}
+	if (source.href === undefined) {
+		// A document has nothing to open; its title is the label.
+		return (
+			<span
+				data-slot="inline-citation"
+				{...props(typeRoles.caption, styles.chip, styles.chipStatic, arrival)}
+			>
+				<SourceIcon source={source} />
+				{sourceLabel(source)}
+			</span>
+		);
+	}
+	return <LinkChip arrival={arrival} source={source} />;
+}
+
+/**
+ * A source in the sentence it supports: the site's favicon and name, opening
+ * the page. On hover or focus it previews the title and what the page says.
+ * Several sources at one point show as one chip that lists them.
+ */
+export function InlineCitation({ sources }: InlineCitationProps) {
+	return <CitationChip sources={sources} />;
+}

package/src/components/input/input.styles.ts

@@ -0,0 +1,95 @@
+import { create } from "@stylexjs/stylex";
+import { iconMasks } from "../../icon-masks.stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize } from "../../styles/dimensions.stylex";
+import { fonts } from "../../styles/fonts.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+import { fieldStyles } from "../field/field.styles";
+
+const inputUnstyledStyles = create({
+	// The native search clear button, drawn with the system X in muted ink.
+	nativeFeatures: {
+		"::-webkit-search-cancel-button": {
+			appearance: "none",
+			backgroundColor: {
+				":hover": colors.content,
+				default: colors.mutedContent,
+			},
+			cursor: "pointer",
+			height: 16,
+			marginInlineStart: space["2"],
+			maskImage: iconMasks.x,
+			maskRepeat: "no-repeat",
+			maskSize: "100%",
+			width: 16,
+		},
+		fontVariantNumeric: {
+			":is([type=number], [type=date], [type=time], [type=datetime-local], [type=month], [type=week])":
+				"tabular-nums",
+			default: "inherit",
+		},
+	},
+	unstyled: {
+		"::placeholder": { color: colors.mutedContent, opacity: 1 },
+		appearance: "none",
+		backgroundColor: "transparent",
+		borderColor: "transparent",
+		borderStyle: "none",
+		borderWidth: 0,
+		boxShadow: "none",
+		boxSizing: "border-box",
+		color: { ":disabled": colors.mutedContent, default: colors.content },
+		cursor: { ":disabled": "not-allowed", default: "text" },
+		display: "block",
+		flexBasis: "0%",
+		flexGrow: 1,
+		flexShrink: 1,
+		fontFamily: "inherit",
+		fontSize: fontSize["16"],
+		fontSizeAdjust: fonts.sizeAdjust,
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["24"],
+		minWidth: 0,
+		opacity: 1,
+		outlineColor: "transparent",
+		outlineStyle: "none",
+		outlineWidth: 0,
+		paddingBlock: space["0"],
+		paddingInlineEnd: {
+			":is([data-slot='input-group']:has(> [data-align='inline-end']) > *)": 0,
+			default: space["3"],
+		},
+		paddingInlineStart: {
+			":is([data-slot='input-group']:has(> [data-align='inline-start']) > *)": 0,
+			default: space["3"],
+		},
+		width: "auto",
+	},
+	unstyledDefault: {
+		height: `calc(${controlSize.md} - ${borderWidth.thin}px * 2)`,
+	},
+	unstyledLg: {
+		fontSize: fontSize["16"],
+		height: `calc(${controlSize.lg} - ${borderWidth.thin}px * 2)`,
+	},
+	unstyledSm: {
+		fontSize: { [conditions.sm]: fontSize["14"], default: fontSize["16"] },
+		height: `calc(${controlSize.sm} - ${borderWidth.thin}px * 2)`,
+	},
+});
+
+export const inputStyles = {
+	...fieldStyles,
+	nativeFeatures: inputUnstyledStyles.nativeFeatures,
+	unstyled: inputUnstyledStyles.unstyled,
+	unstyledDefault: inputUnstyledStyles.unstyledDefault,
+	unstyledLg: inputUnstyledStyles.unstyledLg,
+	unstyledSm: inputUnstyledStyles.unstyledSm,
+};

package/src/components/input/input.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { Input as BaseInput } from "@base-ui/react/input";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, InputHTMLAttributes } from "react";
+import { useCallback, useState } from "react";
+import {
+	isBoundStringField,
+	useBoundFieldContext,
+} from "../field/field-context";
+import { inputStyles } from "./input.styles";
+
+type BaseInputProps = ComponentPropsWithRef<typeof BaseInput>;
+export type InputSize = "default" | "lg" | "sm";
+
+export type InputProps = Omit<
+	InputHTMLAttributes<HTMLInputElement>,
+	"className" | "onPointerEnter" | "onPointerLeave" | "size" | "style"
+> & {
+	disabled?: boolean;
+	invalid?: boolean;
+	onPointerEnter?: InputHTMLAttributes<HTMLInputElement>["onPointerEnter"];
+	onPointerLeave?: InputHTMLAttributes<HTMLInputElement>["onPointerLeave"];
+	ref?: BaseInputProps["ref"];
+	render?: BaseInputProps["render"];
+	size?: InputSize;
+	unstyled?: boolean;
+	onValueChange?: BaseInputProps["onValueChange"];
+};
+
+const sizeStyles = {
+	default: inputStyles.sizeDefault,
+	lg: inputStyles.sizeLg,
+	sm: inputStyles.sizeSm,
+};
+
+const unstyledSizeStyles = {
+	default: inputStyles.unstyledDefault,
+	lg: inputStyles.unstyledLg,
+	sm: inputStyles.unstyledSm,
+};
+
+function useInputBinding(control: InputProps) {
+	const boundContext = useBoundFieldContext();
+	const boundField = isBoundStringField(boundContext) ? boundContext : null;
+	const userOnBlur = control.onBlur;
+	const userOnValueChange = control.onValueChange;
+
+	const handleBoundBlur = useCallback<NonNullable<InputProps["onBlur"]>>(
+		(event) => {
+			boundField?.handleBlur();
+			userOnBlur?.(event);
+		},
+		[boundField, userOnBlur]
+	);
+
+	const handleBoundValueChange = useCallback<
+		NonNullable<InputProps["onValueChange"]>
+	>(
+		(val, details) => {
+			userOnValueChange?.(val, details);
+			if (!details.isCanceled) {
+				boundField?.handleChange(val);
+			}
+		},
+		[boundField, userOnValueChange]
+	);
+
+	const isInvalid = boundField
+		? boundField.state.meta.isTouched && !boundField.state.meta.isValid
+		: control.invalid;
+
+	return {
+		"aria-invalid": isInvalid || undefined,
+		...(boundField
+			? {
+					name: boundField.name,
+					onBlur: handleBoundBlur,
+					onValueChange: handleBoundValueChange,
+					value: boundField.state.value,
+				}
+			: {}),
+	};
+}
+
+function inputAppearance(size: InputSize, unstyled: boolean) {
+	return unstyled
+		? props(
+				inputStyles.unstyled,
+				unstyledSizeStyles[size],
+				inputStyles.nativeFeatures
+			)
+		: props(inputStyles.input, sizeStyles[size], inputStyles.nativeFeatures);
+}
+
+export function Input({
+	disabled = false,
+	invalid = false,
+	readOnly = false,
+	ref: forwardedRef = undefined,
+	size = "default",
+	unstyled = false,
+	// biome-ignore lint/complexity/noUselessUndefined: Keep this optional in Babel's generated JS surface.
+	onPointerEnter = undefined,
+	// biome-ignore lint/complexity/noUselessUndefined: Keep this optional in Babel's generated JS surface.
+	onPointerLeave = undefined,
+	...rest
+}: InputProps) {
+	const binding = useInputBinding({ ...rest, invalid });
+
+	const [isHovered, setIsHovered] = useState(false);
+	const handlePointerEnter = useCallback<
+		NonNullable<InputProps["onPointerEnter"]>
+	>(
+		(event) => {
+			if (!(disabled || readOnly)) {
+				setIsHovered(true);
+			}
+			onPointerEnter?.(event);
+		},
+		[disabled, onPointerEnter, readOnly]
+	);
+	const handlePointerLeave = useCallback<
+		NonNullable<InputProps["onPointerLeave"]>
+	>(
+		(event) => {
+			setIsHovered(false);
+			onPointerLeave?.(event);
+		},
+		[onPointerLeave]
+	);
+
+	return (
+		<BaseInput
+			{...rest}
+			{...binding}
+			data-hovered={isHovered ? "true" : undefined}
+			data-size={size}
+			disabled={disabled}
+			onPointerEnter={handlePointerEnter}
+			onPointerLeave={handlePointerLeave}
+			readOnly={readOnly}
+			ref={forwardedRef}
+			{...inputAppearance(size, unstyled)}
+		/>
+	);
+}

package/src/components/input-group/input-group.styles.ts

@@ -0,0 +1,183 @@
+import { create } from "@stylexjs/stylex";
+import { colors, fieldColors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize } from "../../styles/dimensions.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, lineHeight } from "../../styles/typography.stylex";
+
+export const inputGroupStyles = create({
+	addon: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		color: "inherit",
+		display: "flex",
+		gap: space["1"],
+		position: "relative",
+		zIndex: 1,
+	},
+	alignBlockEnd: {
+		"::before": {
+			backgroundColor: colors.border,
+			blockSize: borderWidth.thin,
+			content: '""',
+			insetBlockStart: 0,
+			insetInline: space["2"],
+			pointerEvents: "none",
+			position: "absolute",
+		},
+		alignSelf: "stretch",
+		justifyContent: "space-between",
+		order: 2,
+		paddingBlock: space["1"],
+		paddingInline: space["2"],
+		width: "100%",
+	},
+	alignBlockStart: {
+		"::before": {
+			backgroundColor: colors.border,
+			blockSize: borderWidth.thin,
+			content: '""',
+			insetBlockEnd: 0,
+			insetInline: space["2"],
+			pointerEvents: "none",
+			position: "absolute",
+		},
+		alignSelf: "stretch",
+		order: -2,
+		paddingBlock: space["1"],
+		paddingInline: space["2"],
+		width: "100%",
+	},
+	alignInlineEnd: {
+		order: 1,
+		paddingInlineEnd: {
+			":has(> [data-slot='button'])": space["1"],
+			default: space["2"],
+		},
+		paddingInlineStart: space["1"],
+	},
+	alignInlineStart: {
+		order: -1,
+		paddingInlineEnd: space["2"],
+		paddingInlineStart: space["2"],
+	},
+	root: {
+		alignItems: "center",
+		animationDuration: {
+			":has(> [data-slot='input-group-input']:focus-visible, > [data-slot='input-group-textarea']:focus-visible)":
+				focusMotion.duration,
+		},
+		animationName: {
+			":has(> [data-slot='input-group-input']:focus-visible, > [data-slot='input-group-textarea']:focus-visible)":
+				focusMotion.ring,
+		},
+		backgroundColor: {
+			":has(> [data-slot='input-group-input']:-webkit-autofill)":
+				fieldColors.surface,
+			":has(> [data-slot='input-group-input']:disabled, > [data-slot='input-group-textarea']:disabled)":
+				fieldColors.disabled,
+			default: fieldColors.surface,
+		},
+		borderColor: {
+			":has(> [data-slot='input-group-input']:is([aria-invalid='true'], [data-invalid]):not(:disabled), > [data-slot='input-group-textarea']:is([aria-invalid='true'], [data-invalid]):not(:disabled))": `color-mix(in oklch, ${colors.destructive} 54%, ${fieldColors.surface})`,
+			"[data-slot='input-group']:hover:has(> :is([data-slot='input-group-input'], [data-slot='input-group-textarea']):not(:disabled, [data-disabled], [readonly], [aria-invalid='true'], [data-invalid]))":
+				{
+					[conditions.canHover]: colors.border,
+				},
+			default: "transparent",
+		},
+		borderRadius: {
+			":has(> [data-slot='input-group-input'][data-size='sm'], > [data-slot='input-group-textarea'][data-size='sm'])":
+				shape.controlRadius,
+			default: shape.controlRadiusLarge,
+		},
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: {
+			":has(> [data-slot='input-group-input']:disabled, > [data-slot='input-group-textarea']:disabled)":
+				"none",
+			default: shadows.recessedRest,
+		},
+		boxSizing: "border-box",
+		color: {
+			":has(> [data-slot='input-group-input']:disabled, > [data-slot='input-group-textarea']:disabled)":
+				colors.mutedContent,
+			default: colors.content,
+		},
+		display: "flex",
+		flexWrap: "wrap",
+		fontSize: {
+			"[data-slot='input-group']:has(> [data-slot='input-group-input'][data-size='sm'], > [data-slot='input-group-textarea'][data-size='sm'])":
+				{
+					[conditions.sm]: fontSize["14"],
+					default: fontSize["16"],
+				},
+			default: fontSize["16"],
+		},
+		lineHeight: {
+			"[data-slot='input-group']:has(> [data-slot='input-group-input'][data-size='sm'], > [data-slot='input-group-textarea'][data-size='sm'])":
+				{
+					[conditions.sm]: lineHeight["20"],
+					default: lineHeight["24"],
+				},
+			default: lineHeight["24"],
+		},
+		minHeight: {
+			":has(> [data-align='block-start'], > [data-align='block-end'])": "auto",
+			":has(> [data-slot='input-group-input'][data-size='lg'], > [data-slot='input-group-textarea'][data-size='lg'])":
+				controlSize.lg,
+			":has(> [data-slot='input-group-input'][data-size='sm'], > [data-slot='input-group-textarea'][data-size='sm'])":
+				controlSize.sm,
+			":has(> [data-slot='input-group-textarea'])": "auto",
+			default: controlSize.md,
+		},
+		outlineColor: {
+			":has(> [data-slot='input-group-input']:focus-visible, > [data-slot='input-group-textarea']:focus-visible)":
+				colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: {
+			":has(> [data-slot='input-group-input']:focus-visible, > [data-slot='input-group-textarea']:focus-visible)":
+				focus.offset,
+			default: focus.offset,
+		},
+		outlineStyle: {
+			":has(> [data-slot='input-group-input']:focus-visible, > [data-slot='input-group-textarea']:focus-visible)":
+				"solid",
+			default: "solid",
+		},
+		outlineWidth: {
+			":has(> [data-slot='input-group-input']:focus-visible, > [data-slot='input-group-textarea']:focus-visible)":
+				borderWidth.focus,
+			default: 0,
+		},
+		position: "relative",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty:
+			"background-color, border-color, box-shadow, color, outline-color, outline-offset",
+		transitionTimingFunction: easing.expoOut,
+		width: "100%",
+	},
+	text: {
+		alignItems: "center",
+		color: colors.mutedContent,
+		display: "inline-flex",
+		fontSize: "inherit",
+		gap: space["1"],
+		lineHeight: "inherit",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+	},
+});