@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/table/table.tsx

@@ -0,0 +1,290 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { tableStyles } from "./table.styles";
+
+type Part<T> = Omit<Closed<T>, "data-slot" | "role">;
+type Align = "center" | "end" | "start";
+
+export type TableScroll = "both" | "horizontal";
+type AccessibleName =
+	| { "aria-label": string; "aria-labelledby"?: never }
+	| { "aria-label"?: never; "aria-labelledby": string };
+export type TableContainerProps = Omit<
+	Part<ComponentPropsWithRef<"section">>,
+	"aria-label" | "aria-labelledby" | "tabIndex"
+> &
+	AccessibleName & {
+		/**
+		 * Makes the scroll region a tab stop for keyboard scrolling. Turn it off
+		 * when an interactive grid inside already moves focus cell by cell.
+		 */
+		focusable?: boolean;
+		scroll?: TableScroll;
+		tabIndex?: never;
+	};
+export type TableProps = Part<ComponentPropsWithRef<"table">> & {
+	/**
+	 * Spreadsheet presentation: column rules and compact rows for working data.
+	 * `"interactive"` also exposes the ARIA grid role; only use it with a
+	 * keyboard model, as DataTable provides.
+	 */
+	grid?: boolean | "interactive";
+	/**
+	 * Exact fixed-layout width in px: the sum of sized columns. Wider tables
+	 * scroll, and narrower ones leave free space, like a spreadsheet.
+	 */
+	width?: number;
+};
+export type TableHeaderProps = Part<ComponentPropsWithRef<"thead">> & {
+	sticky?: boolean;
+};
+export type TableBodyProps = Part<ComponentPropsWithRef<"tbody">>;
+export type TableFooterProps = Part<ComponentPropsWithRef<"tfoot">>;
+export type TableRowProps = Part<ComponentPropsWithRef<"tr">> & {
+	selected?: boolean;
+};
+export type TableHeadProps = Omit<
+	Part<ComponentPropsWithRef<"th">>,
+	"align" | "scope"
+> & {
+	align?: Align;
+	numeric?: boolean;
+	scope?: "col" | "colgroup" | "row" | "rowgroup";
+	sticky?: boolean;
+};
+export type TableCellProps = Omit<
+	Part<ComponentPropsWithRef<"td">>,
+	"align"
+> & {
+	align?: Align;
+	numeric?: boolean;
+	sticky?: boolean;
+};
+export type TableCaptionProps = Part<ComponentPropsWithRef<"caption">>;
+
+function stripReservedProps(attributes: Record<string, unknown>) {
+	Reflect.deleteProperty(attributes, "className");
+	Reflect.deleteProperty(attributes, "data-slot");
+	Reflect.deleteProperty(attributes, "role");
+	Reflect.deleteProperty(attributes, "style");
+}
+
+export function TableContainer({
+	"aria-label": ariaLabel,
+	"aria-labelledby": ariaLabelledBy,
+	children,
+	focusable = true,
+	ref: forwardedRef,
+	scroll = "horizontal",
+	...rest
+}: TableContainerProps) {
+	if (!(ariaLabel?.trim() || ariaLabelledBy?.trim())) {
+		throw new TypeError("TableContainer requires an accessible name");
+	}
+	stripReservedProps(rest);
+	return (
+		<section
+			{...rest}
+			aria-label={ariaLabel}
+			aria-labelledby={ariaLabelledBy}
+			data-slot="table-container"
+			ref={forwardedRef}
+			tabIndex={focusable ? 0 : undefined}
+			{...props(
+				tableStyles.container,
+				scroll === "both" && tableStyles.containerBoth
+			)}
+		>
+			{children}
+		</section>
+	);
+}
+
+export function Table({
+	children,
+	grid = false,
+	ref: forwardedRef,
+	width,
+	...rest
+}: TableProps) {
+	stripReservedProps(rest);
+	return (
+		<table
+			{...rest}
+			data-grid={grid || undefined}
+			data-slot="table"
+			ref={forwardedRef}
+			role={grid === "interactive" ? "grid" : undefined}
+			{...props(
+				tableStyles.table,
+				width !== undefined && tableStyles.fixedWidth(width)
+			)}
+		>
+			{children}
+		</table>
+	);
+}
+
+export function TableHeader({
+	children,
+	ref: forwardedRef,
+	sticky = true,
+	...rest
+}: TableHeaderProps) {
+	stripReservedProps(rest);
+	return (
+		<thead
+			{...rest}
+			data-slot="table-header"
+			ref={forwardedRef}
+			{...props(tableStyles.header, sticky && tableStyles.headSticky)}
+		>
+			{children}
+		</thead>
+	);
+}
+
+export function TableBody({
+	children,
+	ref: forwardedRef,
+	...rest
+}: TableBodyProps) {
+	stripReservedProps(rest);
+	return (
+		<tbody
+			{...rest}
+			data-slot="table-body"
+			ref={forwardedRef}
+			{...props(tableStyles.body)}
+		>
+			{children}
+		</tbody>
+	);
+}
+
+export function TableFooter({
+	children,
+	ref: forwardedRef,
+	...rest
+}: TableFooterProps) {
+	stripReservedProps(rest);
+	return (
+		<tfoot
+			{...rest}
+			data-slot="table-footer"
+			ref={forwardedRef}
+			{...props(tableStyles.footer)}
+		>
+			{children}
+		</tfoot>
+	);
+}
+
+export function TableRow({
+	children,
+	ref: forwardedRef,
+	selected = false,
+	...rest
+}: TableRowProps) {
+	stripReservedProps(rest);
+	return (
+		<tr
+			{...rest}
+			data-selected={selected ? "true" : undefined}
+			data-slot="table-row"
+			ref={forwardedRef}
+			{...props(
+				tableStyles.row,
+				tableStyles.rowHover,
+				selected && tableStyles.rowSelected
+			)}
+		>
+			{children}
+		</tr>
+	);
+}
+
+const alignStyles = {
+	center: tableStyles.cellCenter,
+	end: tableStyles.cellEnd,
+	start: null,
+};
+
+function cellStyles(
+	align: Align | undefined,
+	numeric: boolean,
+	sticky: boolean,
+	head = false
+) {
+	const effectiveAlign = align ?? (numeric ? "end" : "start");
+	return props(
+		tableStyles.cell,
+		head && tableStyles.head,
+		alignStyles[effectiveAlign],
+		numeric && tableStyles.cellNumeric,
+		sticky && tableStyles.stickyStart
+	);
+}
+
+export function TableHead({
+	align,
+	children,
+	numeric = false,
+	ref: forwardedRef,
+	scope = "col",
+	sticky = false,
+	...rest
+}: TableHeadProps) {
+	stripReservedProps(rest);
+	return (
+		<th
+			{...rest}
+			data-slot="table-head"
+			ref={forwardedRef}
+			scope={scope}
+			{...cellStyles(align, numeric, sticky, true)}
+		>
+			{children}
+		</th>
+	);
+}
+
+export function TableCell({
+	align,
+	children,
+	numeric = false,
+	ref: forwardedRef,
+	sticky = false,
+	...rest
+}: TableCellProps) {
+	stripReservedProps(rest);
+	return (
+		<td
+			{...rest}
+			data-slot="table-cell"
+			ref={forwardedRef}
+			{...cellStyles(align, numeric, sticky)}
+		>
+			{children}
+		</td>
+	);
+}
+
+export function TableCaption({
+	children,
+	ref: forwardedRef,
+	...rest
+}: TableCaptionProps) {
+	stripReservedProps(rest);
+	return (
+		<caption
+			{...rest}
+			data-slot="table-caption"
+			ref={forwardedRef}
+			{...props(tableStyles.caption)}
+		>
+			{children}
+		</caption>
+	);
+}

package/src/components/tabs/tabs.styles.ts

@@ -0,0 +1,245 @@
+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,
+	focusMotion,
+	forcedColorAdjust,
+	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 tabsStyles = create({
+	activeDefault: {
+		"[data-active]": {
+			backgroundColor: { [conditions.forcedColors]: "Highlight" },
+			color: { [conditions.forcedColors]: "HighlightText" },
+			forcedColorAdjust: forcedColorAdjust.selectedState,
+		},
+	},
+	activeUnderline: {
+		"[data-active]": {
+			color: { [conditions.forcedColors]: "Highlight" },
+			forcedColorAdjust: forcedColorAdjust.selectedState,
+		},
+	},
+	automaticIndicator: {
+		display: {
+			":is([data-slot='tabs-list']:has([data-slot='tabs-indicator']:not([data-auto-indicator])) > *)":
+				"none",
+			default: "block",
+		},
+	},
+	indicator: {
+		height: "var(--active-tab-height)",
+		left: "var(--active-tab-left)",
+		pointerEvents: "none",
+		position: "absolute",
+		top: "var(--active-tab-top)",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.overlayEnter,
+		},
+		transitionProperty: "left, top, width, height",
+		transitionTimingFunction: easing.expoOut,
+		width: "var(--active-tab-width)",
+	},
+	indicatorDefault: {
+		backgroundColor: {
+			[conditions.forcedColors]: "Highlight",
+			default: colors.brandBackground,
+		},
+		borderEndEndRadius: shape.controlRadius,
+		borderEndStartRadius: shape.controlRadius,
+		borderStartEndRadius: shape.controlRadius,
+		borderStartStartRadius: shape.controlRadius,
+		boxShadow: shadows.filledRest,
+	},
+	indicatorUnderline: {
+		"::after": {
+			backgroundColor: {
+				[conditions.forcedColors]: "Highlight",
+				default: colors.brandForeground,
+			},
+			borderRadius: "9999px",
+			content: '""',
+			height: {
+				"[data-orientation='vertical']": "auto",
+				default: 2,
+			},
+			insetBlockEnd: {
+				"[data-orientation='vertical']": space["2"],
+				default: 0,
+			},
+			insetBlockStart: {
+				"[data-orientation='vertical']": space["2"],
+				default: "auto",
+			},
+			insetInlineEnd: {
+				"[data-orientation='vertical']": 0,
+				default: space["2"],
+			},
+			insetInlineStart: {
+				"[data-orientation='vertical']": "auto",
+				default: space["2"],
+			},
+			position: "absolute",
+			width: {
+				"[data-orientation='vertical']": 2,
+				default: "auto",
+			},
+		},
+	},
+	list: {
+		alignItems: "stretch",
+		boxSizing: "border-box",
+		display: "inline-flex",
+		flexDirection: {
+			"[data-orientation='vertical']": "column",
+			default: "row",
+		},
+		isolation: "isolate",
+		maxWidth: "100%",
+		overflowX: {
+			"[data-orientation='vertical']": "visible",
+			default: "auto",
+		},
+		position: "relative",
+		scrollPaddingInline: space["2"],
+		width: "fit-content",
+	},
+	listDefault: {
+		backgroundColor: colors.controlSurface,
+		borderRadius: shape.controlRadiusLarge,
+		boxShadow: shadows.recessedRest,
+		gap: space["1"],
+		padding: space["1"],
+	},
+	listUnderline: {
+		boxShadow: {
+			"[data-orientation='vertical']": `inset -1px 0 0 0 ${colors.border}`,
+			default: `inset 0 -1px 0 0 ${colors.border}`,
+		},
+		columnGap: space["1"],
+		paddingBlock: {
+			"[data-orientation='vertical']": 0,
+			default: 0,
+		},
+		paddingInline: {
+			"[data-orientation='vertical']": 0,
+			default: space["1"],
+		},
+		rowGap: space["1"],
+	},
+	panel: {
+		color: colors.content,
+		fontSize: fontSize["16"],
+		lineHeight: lineHeight["24"],
+		minWidth: 0,
+		paddingBlockStart: {
+			"[data-orientation='vertical']": 0,
+			default: space["4"],
+		},
+	},
+	rootHorizontal: { display: "block", maxWidth: "100%", minWidth: 0 },
+	rootVertical: {
+		alignItems: "flex-start",
+		columnGap: space["4"],
+		display: "flex",
+		flexWrap: "wrap",
+		maxWidth: "100%",
+		minWidth: 0,
+		rowGap: space["4"],
+	},
+	sizeDefault: {
+		fontSize: fontSize["14"],
+		minHeight: controlSize.sm,
+		paddingInline: space["3"],
+	},
+	sizeLg: {
+		fontSize: fontSize["14"],
+		minHeight: controlSize.md,
+		paddingInline: space["3"],
+	},
+	sizeSm: {
+		fontSize: fontSize["14"],
+		minHeight: controlSize.xs,
+		paddingInline: space["2"],
+	},
+	tab: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		appearance: "none",
+		backgroundColor: {
+			":active:not([data-disabled]):not([data-active])":
+				colors.controlSurfaceHover,
+			default: "transparent",
+		},
+		borderColor: "transparent",
+		borderRadius: shape.controlRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxSizing: "border-box",
+		color: {
+			"[data-active]": colors.brandForeground,
+			"[data-slot='tabs-tab']:hover:not([data-disabled], [data-active])": {
+				[conditions.canHover]: colors.content,
+			},
+			default: colors.mutedContent,
+		},
+		columnGap: space["1"],
+		cursor: { "[data-disabled]": "not-allowed", default: "pointer" },
+		display: "inline-flex",
+		flexShrink: 0,
+		fontFamily: "inherit",
+		fontWeight: fontWeight.medium,
+		height: { ":is(*) > svg": "1rem" },
+		justifyContent: "center",
+		lineHeight: lineHeight.none,
+		maxWidth: "100%",
+		minWidth: 0,
+		opacity: {
+			"[data-disabled]": opacity.disabled,
+			default: 1,
+		},
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: `-${borderWidth.focus}px`,
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: "none",
+		},
+		outlineWidth: {
+			":focus-visible": borderWidth.focus,
+			default: borderWidth.focus,
+		},
+		paddingBlock: 0,
+		position: "relative",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "color, opacity, outline-color",
+		transitionTimingFunction: easing.expoOut,
+		userSelect: "none",
+		whiteSpace: "nowrap",
+		width: { ":is(*) > svg": "1rem" },
+		zIndex: 1,
+	},
+});

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { props } from "@stylexjs/stylex";
+import { type ComponentPropsWithRef, createContext, useContext } from "react";
+import { controlLabel } from "../../control-label";
+import { tabsStyles } from "./tabs.styles";
+
+type BaseTabsProps = ComponentPropsWithRef<typeof BaseTabs.Root>;
+type BaseTabsIndicatorProps = ComponentPropsWithRef<typeof BaseTabs.Indicator>;
+type BaseTabsListProps = ComponentPropsWithRef<typeof BaseTabs.List>;
+type BaseTabsPanelProps = ComponentPropsWithRef<typeof BaseTabs.Panel>;
+type BaseTabsTabProps = ComponentPropsWithRef<typeof BaseTabs.Tab>;
+
+export type TabsSize = "default" | "lg" | "sm";
+export type TabsVariant = "default" | "underline";
+
+export type TabsProps = Omit<
+	BaseTabsProps,
+	"className" | "ref" | "render" | "style"
+> & {
+	ref?: BaseTabsProps["ref"];
+};
+
+export type TabsListProps = Omit<
+	BaseTabsListProps,
+	"className" | "ref" | "render" | "style"
+> & {
+	ref?: BaseTabsListProps["ref"];
+	size?: TabsSize;
+	variant?: TabsVariant;
+};
+
+export type TabsTabProps = Omit<
+	BaseTabsTabProps,
+	"className" | "nativeButton" | "ref" | "render" | "style"
+> & {
+	ref?: BaseTabsTabProps["ref"];
+};
+
+export type TabsIndicatorProps = Omit<
+	BaseTabsIndicatorProps,
+	"className" | "ref" | "render" | "style"
+> & {
+	ref?: BaseTabsIndicatorProps["ref"];
+};
+
+export type TabsPanelProps = Omit<
+	BaseTabsPanelProps,
+	"className" | "ref" | "render" | "style"
+> & {
+	ref?: BaseTabsPanelProps["ref"];
+};
+
+interface TabsListContextValue {
+	size: TabsSize;
+	variant: TabsVariant;
+}
+
+const defaultTabsListContext: TabsListContextValue = {
+	size: "default",
+	variant: "default",
+};
+const TabsListContext = createContext(defaultTabsListContext);
+
+const sizeStyles = {
+	default: tabsStyles.sizeDefault,
+	lg: tabsStyles.sizeLg,
+	sm: tabsStyles.sizeSm,
+};
+
+export function Tabs({
+	orientation = "horizontal",
+	ref: forwardedRef = undefined,
+	...rest
+}: TabsProps) {
+	return (
+		<BaseTabs.Root
+			{...rest}
+			data-slot="tabs"
+			orientation={orientation}
+			ref={forwardedRef}
+			{...props(
+				orientation === "horizontal"
+					? tabsStyles.rootHorizontal
+					: tabsStyles.rootVertical
+			)}
+		/>
+	);
+}
+
+export function TabsList({
+	children,
+	ref: forwardedRef = undefined,
+	size = "default",
+	variant = "default",
+	...rest
+}: TabsListProps) {
+	return (
+		<TabsListContext value={{ size, variant }}>
+			<BaseTabs.List
+				{...rest}
+				data-slot="tabs-list"
+				ref={forwardedRef}
+				{...props(
+					tabsStyles.list,
+					variant === "default"
+						? tabsStyles.listDefault
+						: tabsStyles.listUnderline
+				)}
+			>
+				{children}
+				<Indicator automatic />
+			</BaseTabs.List>
+		</TabsListContext>
+	);
+}
+
+export function TabsTab({
+	children,
+	ref: forwardedRef = undefined,
+	type,
+	...rest
+}: TabsTabProps) {
+	const { size, variant } = useContext(TabsListContext);
+
+	return (
+		<BaseTabs.Tab
+			{...rest}
+			data-slot="tabs-tab"
+			ref={forwardedRef}
+			type={type ?? "button"}
+			{...props(
+				tabsStyles.tab,
+				sizeStyles[size],
+				variant === "default"
+					? tabsStyles.activeDefault
+					: tabsStyles.activeUnderline
+			)}
+		>
+			{controlLabel(children)}
+		</BaseTabs.Tab>
+	);
+}
+
+export function TabsIndicator(input: TabsIndicatorProps) {
+	return <Indicator {...input} />;
+}
+
+function Indicator({
+	automatic = false,
+	ref: forwardedRef = undefined,
+	...rest
+}: TabsIndicatorProps & { automatic?: boolean }) {
+	const { variant } = useContext(TabsListContext);
+
+	return (
+		<BaseTabs.Indicator
+			{...rest}
+			data-auto-indicator={automatic || undefined}
+			data-slot="tabs-indicator"
+			ref={forwardedRef}
+			{...props(
+				tabsStyles.indicator,
+				automatic && tabsStyles.automaticIndicator,
+				variant === "default"
+					? tabsStyles.indicatorDefault
+					: tabsStyles.indicatorUnderline
+			)}
+		/>
+	);
+}
+
+export function TabsPanel({
+	ref: forwardedRef = undefined,
+	...rest
+}: TabsPanelProps) {
+	return (
+		<BaseTabs.Panel
+			{...rest}
+			data-slot="tabs-panel"
+			ref={forwardedRef}
+			{...props(tabsStyles.panel)}
+		/>
+	);
+}