@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/visually-hidden/visually-hidden.styles.ts

@@ -0,0 +1,15 @@
+import { create } from "@stylexjs/stylex";
+
+export const visuallyHiddenStyles = create({
+	root: {
+		borderWidth: 0,
+		clipPath: "inset(50%)",
+		height: 1,
+		margin: "-1px",
+		overflow: "hidden",
+		padding: 0,
+		position: "absolute",
+		whiteSpace: "nowrap",
+		width: 1,
+	},
+});

package/src/components/visually-hidden/visually-hidden.tsx

@@ -0,0 +1,36 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { visuallyHiddenStyles } from "./visually-hidden.styles";
+
+export type VisuallyHiddenProps = Omit<
+	Closed<ComponentPropsWithRef<"span">>,
+	"aria-hidden" | "children" | "data-slot" | "role"
+> & { children: ReactNode };
+
+export function VisuallyHidden({
+	children,
+	ref: forwardedRef,
+	...rest
+}: VisuallyHiddenProps) {
+	for (const name of [
+		"aria-hidden",
+		"className",
+		"data-slot",
+		"role",
+		"style",
+	]) {
+		Reflect.deleteProperty(rest, name);
+	}
+
+	return (
+		<span
+			{...rest}
+			data-slot="visually-hidden"
+			ref={forwardedRef}
+			{...props(visuallyHiddenStyles.root)}
+		>
+			{children}
+		</span>
+	);
+}

package/src/control-label.tsx

@@ -0,0 +1,48 @@
+import { props } from "@stylexjs/stylex";
+import {
+	Children,
+	cloneElement,
+	Fragment,
+	isValidElement,
+	type ReactNode,
+} from "react";
+import { typographyStyles } from "./styles/typography.styles";
+
+// Trim text, not the flex container: icons keep their own centered geometry.
+// Adjacent text joins one span so `Archive ({count})` stays a single flex item.
+export function controlLabel(children: ReactNode): ReactNode {
+	const output: ReactNode[] = [];
+	let text = "";
+	const flushText = () => {
+		if (text) {
+			output.push(
+				<span
+					key={`text-${output.length}`}
+					{...props(typographyStyles.controlLabel)}
+				>
+					{text}
+				</span>
+			);
+			text = "";
+		}
+	};
+	for (const child of Children.toArray(children)) {
+		if (typeof child === "string" || typeof child === "number") {
+			text += child;
+			continue;
+		}
+		flushText();
+		if (
+			isValidElement<{ children?: ReactNode }>(child) &&
+			child.type === Fragment
+		) {
+			output.push(
+				cloneElement(child, { children: controlLabel(child.props.children) })
+			);
+		} else {
+			output.push(child);
+		}
+	}
+	flushText();
+	return output.length > 0 ? output : null;
+}

package/src/copy-button.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import { useCallback } from "react";
+import { Button } from "./components/button/button";
+import { visuallyHiddenStyles } from "./components/visually-hidden/visually-hidden.styles";
+import { IconCheck, IconCopy } from "./icons";
+import { useCopyToClipboard } from "./use-copy-to-clipboard";
+
+/** Copies text, then shows a check and announces the result. */
+export function CopyButton({ label, text }: { label: string; text: string }) {
+	const { copy, status } = useCopyToClipboard();
+	const copyText = useCallback(() => copy(text), [copy, text]);
+	const Icon = status === "copied" ? IconCheck : IconCopy;
+	return (
+		<>
+			<Button
+				aria-label={label}
+				onClick={copyText}
+				size="icon-xs"
+				variant="ghost"
+			>
+				<Icon aria-hidden="true" size="1em" />
+			</Button>
+			{/* Rendered empty first, so the update is announced. */}
+			<span
+				aria-live="polite"
+				role="status"
+				{...props(visuallyHiddenStyles.root)}
+			>
+				{status === "copied" ? "Copied" : null}
+				{status === "failed"
+					? "Could not copy. Select the text to copy it."
+					: null}
+			</span>
+		</>
+	);
+}

package/src/form.ts

@@ -0,0 +1,44 @@
+// biome-ignore lint/performance/noBarrelFile: Subpath entrypoint re-exports TanStack useForm and provides focus helper.
+export { useForm } from "@tanstack/react-form";
+
+function isElementDisabled(element: HTMLElement): boolean {
+	if (element.hasAttribute("disabled")) {
+		return true;
+	}
+	if ("disabled" in element && element.disabled === true) {
+		return true;
+	}
+	if (element.getAttribute("aria-disabled") === "true") {
+		return true;
+	}
+	if (element.closest("fieldset[disabled]") !== null) {
+		return true;
+	}
+	return false;
+}
+
+export function focusFirstInvalidControl(
+	form: HTMLFormElement | null | undefined
+): boolean {
+	if (!form) {
+		return false;
+	}
+
+	const candidates = form.querySelectorAll<HTMLElement>(
+		'[aria-invalid="true"]'
+	);
+
+	for (const candidate of candidates) {
+		if (isElementDisabled(candidate)) {
+			continue;
+		}
+		if (typeof candidate.focus === "function") {
+			candidate.focus();
+			if (candidate.ownerDocument.activeElement === candidate) {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}

package/src/icon-masks.stylex.ts

@@ -0,0 +1,7 @@
+import { defineConsts } from "@stylexjs/stylex";
+
+// CSS-only glyphs for native controls that cannot render an icon component.
+// Each mirrors the matching export in icons.ts; swap both with the pack.
+export const iconMasks = defineConsts({
+	x: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E")`,
+});

package/src/icons.ts

@@ -0,0 +1,43 @@
+// Default glyphs from Tabler, the default pack. Keep the vendor private to this
+// module; other icon packs plug in here. CSS-only copies live in
+// icon-masks.stylex.ts.
+// biome-ignore lint/performance/noBarrelFile: This private boundary keeps the icon pack replaceable.
+export {
+	IconAlertCircle,
+	IconAlertTriangle,
+	IconArrowBackUp,
+	IconArrowDown,
+	IconArrowsHorizontal,
+	IconArrowsVertical,
+	IconArrowUp,
+	IconCalendar,
+	IconCheck,
+	IconChevronDown,
+	IconChevronLeft,
+	IconChevronRight,
+	IconChevronUp,
+	IconCircle,
+	IconCircleCheck,
+	IconCircleX,
+	IconCopy,
+	IconDots,
+	IconFile,
+	IconInfoCircle,
+	IconListCheck,
+	IconMessageQuestion,
+	IconMicrophone,
+	IconMinus,
+	IconPencil,
+	IconPlayerStopFilled,
+	IconPlus,
+	IconRefresh,
+	IconSearch,
+	IconSelector,
+	IconShieldCheck,
+	IconTerminal2,
+	IconThumbDown,
+	IconThumbUp,
+	IconTool,
+	IconWorld,
+	IconX,
+} from "@tabler/icons-react";