@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/closed.ts

@@ -0,0 +1,7 @@
+/**
+ * Mizen owns styling: parts never accept className or style. Distributes over
+ * unions, so discriminated prop types keep their variants.
+ */
+export type Closed<T> = T extends unknown
+	? Omit<T, "className" | "style">
+	: never;

package/src/components/accordion/accordion.styles.ts

@@ -0,0 +1,246 @@
+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 accordionStyles = create({
+	content: {
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		lineHeight: lineHeight["20"],
+		overflowWrap: "anywhere",
+		paddingBottom: space["4"],
+		paddingInline: space["2"],
+		paddingTop: space["0"],
+	},
+	description: {
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["20"],
+		overflowWrap: "anywhere",
+	},
+	header: {
+		borderRadius: "inherit",
+		display: "flex",
+		margin: 0,
+		paddingBottom: space["2"],
+	},
+	icon: {
+		alignItems: "center",
+		backgroundColor: colors.controlSurface,
+		// Concentric with the item's 24px corner, about 16px away.
+		borderRadius: `calc(${shape.floatingRadius} - ${space["4"]})`,
+		color: colors.mutedContent,
+		display: "inline-flex",
+		flexShrink: 0,
+		height: "2.25rem",
+		justifyContent: "center",
+		width: "2.25rem",
+	},
+	indicator: {
+		color: colors.content,
+		flexShrink: 0,
+		height: "1rem",
+		opacity: 0.8,
+		pointerEvents: "none",
+		transform: {
+			":is([data-panel-open] *)": "rotate(180deg)",
+			"[data-panel-open]": "rotate(180deg)",
+			default: "none",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.disclosure,
+		},
+		transitionProperty: "transform",
+		transitionTimingFunction: easing.spring,
+		width: "1rem",
+	},
+	item: {
+		borderBottomColor: colors.border,
+		borderBottomStyle: "solid",
+		borderBottomWidth: borderWidth.thin,
+	},
+	panel: {
+		height: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: "var(--accordion-panel-height)",
+		},
+		overflow: "hidden",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.disclosure,
+		},
+		transitionProperty: "height",
+		transitionTimingFunction: easing.expoOut,
+	},
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: { '[data-variant="separated"]': space["0"], default: space["2"] },
+		width: "100%",
+	},
+	title: {
+		color: colors.content,
+		display: "block",
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.medium,
+		lineHeight: lineHeight["24"],
+		overflowWrap: "anywhere",
+	},
+	trigger: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		backgroundColor: {
+			":hover:not([data-disabled])": colors.controlSurfaceHover,
+			default: "transparent",
+		},
+		borderRadius: shape.controlRadius,
+		borderStyle: "none",
+		borderWidth: 0,
+		boxSizing: "border-box",
+		color: colors.content,
+		cursor: {
+			"[data-disabled]": "not-allowed",
+			default: "pointer",
+		},
+		display: "flex",
+		flex: "1",
+		fontFamily: "inherit",
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.medium,
+		gap: space["3"],
+		justifyContent: "space-between",
+		lineHeight: lineHeight["24"],
+		minHeight: "3.5rem",
+		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,
+		},
+		paddingBlock: space["3"],
+		paddingInline: space["2"],
+		textAlign: "start",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color, opacity, outline-color",
+		transitionTimingFunction: easing.expoOut,
+		width: "100%",
+	},
+	triggerText: {
+		display: "flex",
+		flex: "1",
+		flexDirection: "column",
+		gap: space["1"],
+		minWidth: 0,
+	},
+});
+
+export const separatedAccordionStyles = create({
+	content: { paddingBottom: space["4"], paddingInline: space["4"] },
+	header: {
+		paddingBlock: space["1"],
+		paddingBottom: space["1"],
+		paddingInline: space["1"],
+	},
+	item: {
+		backgroundColor: {
+			"[data-open]": colors.surface,
+			default: colors.workarea,
+		},
+		borderBottomColor: { "[data-open]": colors.border, default: "transparent" },
+		borderBottomLeftRadius: {
+			":has(+ [data-open])": shape.floatingRadius,
+			":last-child": shape.floatingRadius,
+			"[data-open]": shape.floatingRadius,
+			default: 0,
+		},
+		borderBottomRightRadius: {
+			":has(+ [data-open])": shape.floatingRadius,
+			":last-child": shape.floatingRadius,
+			"[data-open]": shape.floatingRadius,
+			default: 0,
+		},
+		borderInlineEndColor: {
+			"[data-open]": colors.border,
+			default: "transparent",
+		},
+		borderInlineStartColor: {
+			"[data-open]": colors.border,
+			default: "transparent",
+		},
+		borderStyle: "solid",
+		borderTopColor: { "[data-open]": colors.border, default: "transparent" },
+		borderTopLeftRadius: {
+			":first-child": shape.floatingRadius,
+			":is([data-open] + *)": shape.floatingRadius,
+			"[data-open]": shape.floatingRadius,
+			default: 0,
+		},
+		borderTopRightRadius: {
+			":first-child": shape.floatingRadius,
+			":is([data-open] + *)": shape.floatingRadius,
+			"[data-open]": shape.floatingRadius,
+			default: 0,
+		},
+		borderWidth: borderWidth.thin,
+		boxShadow: { "[data-open]": shadows.outlineRest, default: "none" },
+		marginBlockEnd: { "[data-open]:not(:last-child)": space["2"], default: 0 },
+		marginBlockStart: {
+			"[data-open]:not(:first-child):not([data-open] + *)": space["2"],
+			default: 0,
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.disclosure,
+		},
+		transitionProperty:
+			"margin, border-radius, border-color, background-color, box-shadow",
+		transitionTimingFunction: easing.spring,
+	},
+	trigger: {
+		borderRadius: `calc(${shape.floatingRadius} - ${borderWidth.thin}px - ${space["1"]})`,
+		minHeight: `calc(4rem - ${space["1"]} * 2)`,
+		paddingBlock: space["2"],
+		paddingInline: space["3"],
+	},
+});

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import type { AccordionRootProps } from "@base-ui/react/accordion";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { props } from "@stylexjs/stylex";
+import {
+	type ComponentPropsWithRef,
+	createContext,
+	type ReactNode,
+	useContext,
+	useId,
+} from "react";
+import { controlLabel } from "../../control-label";
+import { IconChevronDown } from "../../icons";
+import { protectRenderSlot } from "../../render-utils";
+import { accordionStyles, separatedAccordionStyles } from "./accordion.styles";
+
+const AccordionVariantContext = createContext<"default" | "separated">(
+	"default"
+);
+
+type BaseAccordionRootProps = ComponentPropsWithRef<typeof BaseAccordion.Root>;
+type BaseAccordionItemProps = ComponentPropsWithRef<typeof BaseAccordion.Item>;
+type BaseAccordionTriggerProps = ComponentPropsWithRef<
+	typeof BaseAccordion.Trigger
+>;
+type BaseAccordionPanelProps = ComponentPropsWithRef<
+	typeof BaseAccordion.Panel
+>;
+
+export type AccordionProps<Value = unknown> = Omit<
+	AccordionRootProps<Value>,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseAccordionRootProps["ref"];
+	variant?: "default" | "separated";
+};
+
+export type AccordionItemProps = Omit<
+	BaseAccordionItemProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseAccordionItemProps["ref"];
+};
+
+export type AccordionTriggerProps = Omit<
+	BaseAccordionTriggerProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseAccordionTriggerProps["ref"];
+	description?: ReactNode;
+	icon?: ReactNode;
+};
+
+export type AccordionPanelProps = Omit<
+	BaseAccordionPanelProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseAccordionPanelProps["ref"];
+};
+
+function ChevronIcon() {
+	return (
+		<IconChevronDown
+			aria-hidden="true"
+			data-slot="accordion-indicator"
+			focusable="false"
+			{...props(accordionStyles.indicator)}
+			size="1em"
+		/>
+	);
+}
+
+export function Accordion<Value = unknown>({
+	ref: forwardedRef,
+	render,
+	variant = "default",
+	...rest
+}: AccordionProps<Value>) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<AccordionVariantContext.Provider value={variant}>
+			<BaseAccordion.Root
+				{...rest}
+				data-slot="accordion"
+				data-variant={variant}
+				ref={forwardedRef}
+				render={protectRenderSlot("accordion", render)}
+				{...props(accordionStyles.root)}
+			/>
+		</AccordionVariantContext.Provider>
+	);
+}
+
+export function AccordionItem({
+	ref: forwardedRef,
+	render,
+	...rest
+}: AccordionItemProps) {
+	const separated = useContext(AccordionVariantContext) === "separated";
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseAccordion.Item
+			{...rest}
+			data-slot="accordion-item"
+			ref={forwardedRef}
+			render={protectRenderSlot("accordion-item", render)}
+			{...props(
+				accordionStyles.item,
+				separated && separatedAccordionStyles.item
+			)}
+		/>
+	);
+}
+
+export function AccordionTrigger({
+	children,
+	description,
+	icon,
+	"aria-describedby": describedBy,
+	ref: forwardedRef,
+	render,
+	...rest
+}: AccordionTriggerProps) {
+	const separated = useContext(AccordionVariantContext) === "separated";
+	const descriptionId = useId();
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseAccordion.Header
+			data-slot="accordion-header"
+			{...props(
+				accordionStyles.header,
+				separated && separatedAccordionStyles.header
+			)}
+		>
+			<BaseAccordion.Trigger
+				{...rest}
+				aria-describedby={
+					description
+						? [describedBy, descriptionId].filter(Boolean).join(" ")
+						: describedBy
+				}
+				data-slot="accordion-trigger"
+				ref={forwardedRef}
+				render={protectRenderSlot("accordion-trigger", render)}
+				{...props(
+					accordionStyles.trigger,
+					separated && separatedAccordionStyles.trigger
+				)}
+			>
+				{icon ? (
+					<span
+						aria-hidden="true"
+						data-slot="accordion-icon"
+						{...props(accordionStyles.icon)}
+					>
+						{icon}
+					</span>
+				) : null}
+				<span {...props(accordionStyles.triggerText)}>
+					<span data-slot="accordion-title" {...props(accordionStyles.title)}>
+						{controlLabel(children)}
+					</span>
+					{description ? (
+						<span
+							aria-hidden="true"
+							data-slot="accordion-description"
+							id={descriptionId}
+							{...props(accordionStyles.description)}
+						>
+							{description}
+						</span>
+					) : null}
+				</span>
+				<ChevronIcon />
+			</BaseAccordion.Trigger>
+		</BaseAccordion.Header>
+	);
+}
+
+export function AccordionPanel({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: AccordionPanelProps) {
+	const separated = useContext(AccordionVariantContext) === "separated";
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseAccordion.Panel
+			{...rest}
+			data-slot="accordion-panel"
+			ref={forwardedRef}
+			render={protectRenderSlot("accordion-panel", render)}
+			{...props(accordionStyles.panel)}
+		>
+			<div
+				data-slot="accordion-content"
+				{...props(
+					accordionStyles.content,
+					separated && separatedAccordionStyles.content
+				)}
+			>
+				{children}
+			</div>
+		</BaseAccordion.Panel>
+	);
+}
+export const AccordionPrimitive = BaseAccordion;

package/src/components/activity-feed/activity-feed.styles.ts

@@ -0,0 +1,135 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { fontWeight } from "../../styles/typography.stylex";
+
+export const activityFeedStyles = create({
+	content: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		gridColumn: {
+			":is([data-slot=activity-feed-item]:has(> [data-slot=activity-feed-media]) > *)": 2,
+			default: 1,
+		},
+		gridRow: 1,
+		minWidth: 0,
+		overflowWrap: "anywhere",
+	},
+	description: {
+		color: colors.mutedContent,
+		margin: 0,
+		overflowWrap: "anywhere",
+	},
+	details: {
+		backgroundColor: colors.workarea,
+		borderRadius: shape.controlRadius,
+		color: colors.content,
+		marginBlockStart: space["2"],
+		minWidth: 0,
+		overflowWrap: "anywhere",
+		padding: space["3"],
+	},
+	header: {
+		alignItems: "center",
+		columnGap: space["3"],
+		display: "flex",
+		flexWrap: "wrap",
+		minHeight: "2.25rem",
+		minWidth: 0,
+		rowGap: space["1"],
+	},
+	item: {
+		"::before": {
+			backgroundColor: colors.border,
+			content: {
+				":is([data-variant=timeline] > *):has(> [data-slot=activity-feed-media]):not(:last-child)":
+					'""',
+				default: "none",
+			},
+			insetBlockEnd: "-0.25rem",
+			insetBlockStart: "calc(0.75rem + 2.25rem + 0.5rem)",
+			insetInlineStart: "calc(1.125rem - 0.5px)",
+			pointerEvents: "none",
+			position: "absolute",
+			width: borderWidth.thin,
+		},
+		alignItems: "start",
+		borderBlockEndColor: colors.border,
+		borderBlockEndStyle: "solid",
+		borderBlockEndWidth: {
+			":is([data-variant=timeline] > *)": 0,
+			":last-child": 0,
+			default: borderWidth.thin,
+		},
+		columnGap: space["3"],
+		display: "grid",
+		gridTemplateColumns: {
+			":has(> [data-slot=activity-feed-media])": "2.25rem minmax(0, 1fr) auto",
+			"@container (max-width: 27.999rem)": {
+				":has(> [data-slot=activity-feed-media])": "2.25rem minmax(0, 1fr)",
+				default: "minmax(0, 1fr)",
+			},
+			default: "minmax(0, 1fr) auto",
+		},
+		minWidth: 0,
+		paddingBlock: {
+			":is([data-variant=timeline] > *)": space["3"],
+			default: space["4"],
+		},
+		position: "relative",
+		rowGap: space["1"],
+	},
+	media: {
+		alignItems: "center",
+		backgroundColor: colors.controlSurface,
+		borderRadius: "50%",
+		color: colors.mutedContent,
+		display: "flex",
+		gridColumn: 1,
+		gridRowEnd: "span 2",
+		gridRowStart: 1,
+		height: "2.25rem",
+		justifyContent: "center",
+		width: "2.25rem",
+	},
+	root: { containerType: "inline-size", gap: 0, width: "100%" },
+	summary: {
+		color: colors.content,
+		flexBasis: {
+			":is([data-slot=activity-feed-header] > *)": "14rem",
+			default: "auto",
+		},
+		flexGrow: { ":is([data-slot=activity-feed-header] > *)": 1, default: 0 },
+		fontWeight: fontWeight.regular,
+		margin: 0,
+		minWidth: 0,
+		overflowWrap: "anywhere",
+	},
+	time: {
+		alignSelf: {
+			":is([data-slot=activity-feed-header] > *)": "center",
+			default: "start",
+		},
+		color: colors.mutedContent,
+		fontVariantNumeric: "tabular-nums",
+		gridColumn: {
+			":is([data-slot=activity-feed-item]:has(> [data-slot=activity-feed-media]) > *)": 3,
+			"@container (max-width: 27.999rem)": {
+				":is([data-slot=activity-feed-item]:has(> [data-slot=activity-feed-media]) > *)": 2,
+				default: 1,
+			},
+			default: 2,
+		},
+		gridRow: { "@container (max-width: 27.999rem)": 2, default: 1 },
+		minWidth: 0,
+		overflowWrap: "anywhere",
+		paddingBlockStart: {
+			":is([data-slot=activity-feed-header] > *)": 0,
+			"@container (max-width: 27.999rem)": 0,
+			default: "0.09375rem",
+		},
+	},
+});