@tanishqkancharla/maui 0.0.49 → 0.0.51

package/dist/components/Avatar.js

@@ -7,7 +7,8 @@ import { text } from "../tokens/text";
 import { memoize } from "../utils/memoize";
 export function Avatar({ name, size = "sm", className }) {
     const avatarClassName = useStyles(avatarClass(name, size));
-    return (_jsx("span", { className: joinClassNames(avatarClassName, className), "aria-hidden": "true", children: initials(name) }));
+    const initialsClassName = useStyles(initialsClass);
+    return (_jsx("span", { className: joinClassNames(avatarClassName, className), "aria-hidden": "true", children: _jsx("span", { className: initialsClassName, children: initials(name) }) }));
 }
 const avatarPalette = [
     { background: colors.accent[4], color: colors.accent[11] },
@@ -82,6 +83,13 @@ const avatarClass = memoize((seed, size) => {
         color: palette.color,
     });
 });
+// The grid centers the line box, which includes the font's descent, so
+// capitals rode high. Trimming to cap height centers the letters themselves.
+// text-box applies to block containers, not to the grid itself.
+const initialsClass = style({
+    display: "block",
+    textBox: "trim-both cap alphabetic",
+});
 function joinClassNames(...classNames) {
     return classNames.filter(Boolean).join(" ");
 }

package/dist/components/Tooltip.d.ts

@@ -3,8 +3,11 @@ type TooltipPlacement = "top" | "bottom" | "left" | "right";
 type TooltipProps = {
     /** The content shown inside the tooltip. */
     content: React.ReactNode;
-    /** The trigger element. Must contain something focusable (e.g. a button). */
-    children: React.ReactNode;
+    /**
+     * The trigger: one focusable element, such as a Button, that forwards its
+     * ref and passes event handlers and ARIA props to the DOM.
+     */
+    children: React.ReactElement;
     placement?: TooltipPlacement;
     /** Warmup delay in ms before the tooltip shows on hover. */
     delay?: number;

package/dist/components/Tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { mergeProps, useOverlayPosition, useTooltip, useTooltipTrigger, } from "react-aria";
+import { mergeProps, mergeRefs, useOverlayPosition, useTooltip, useTooltipTrigger, } from "react-aria";
 import { useTooltipTriggerState } from "react-stately";
 import { useReducedMotion } from "motion/react";
 import { style, useStyles } from "purse-styles";
@@ -16,9 +16,17 @@ export function Tooltip(props) {
     const state = useTooltipTriggerState({ delay, isDisabled });
     const triggerRef = useRef(null);
     const { triggerProps, tooltipProps } = useTooltipTrigger({ delay, isDisabled }, state, triggerRef);
-    const triggerClassName = useStyles(triggerClass);
     const transition = useTooltipTransition(state.isOpen);
-    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: triggerRef, className: triggerClassName, ...triggerProps, children: children }), transition.render && (_jsx(TooltipPopup, { state: state, triggerRef: triggerRef, placement: placement, animateIn: transition.animateIn, phase: transition.phase, onExited: transition.onExited, ...tooltipProps, children: content }))] }));
+    // The trigger props go on the focusable element itself, as react-aria's
+    // FocusableProvider does. On a wrapper, focus never opened the tooltip
+    // (react-aria ignores focus on descendants) and aria-describedby missed
+    // the focused element.
+    const child = React.Children.only(children);
+    const trigger = React.cloneElement(child, {
+        ...mergeProps(child.props, triggerProps),
+        ref: mergeRefs(child.props.ref, triggerRef),
+    });
+    return (_jsxs(_Fragment, { children: [trigger, transition.render && (_jsx(TooltipPopup, { state: state, triggerRef: triggerRef, placement: placement, animateIn: transition.animateIn, phase: transition.phase, onExited: transition.onExited, ...tooltipProps, children: content }))] }));
 }
 /**
  * Coordinates enter/exit transitions across every tooltip so the animation only
@@ -155,11 +163,6 @@ function TooltipPopup(props) {
             }
         }, children: children }), document.body);
 }
-// The wrapper makes the trigger hoverable/focusable as a unit without
-// affecting layout of the child.
-const triggerClass = style({
-    display: "inline-block",
-});
 const tooltipClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), radius.sm, spacing.padding({ x: 3, y: 2 }), border([], "outline"), background.element, {
     zIndex: 1000,
     maxWidth: "240px",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.49",
+	"version": "0.0.51",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

package/src/components/Avatar.tsx

@@ -13,13 +13,14 @@ type AvatarProps = {
 
 export function Avatar({ name, size = "sm", className }: AvatarProps) {
 	const avatarClassName = useStyles(avatarClass(name, size))
+	const initialsClassName = useStyles(initialsClass)
 
 	return (
 		<span
 			className={joinClassNames(avatarClassName, className)}
 			aria-hidden="true"
 		>
-			{initials(name)}
+			<span className={initialsClassName}>{initials(name)}</span>
 		</span>
 	)
 }
@@ -102,6 +103,14 @@ const avatarClass = memoize((seed: string, size: TextSize) => {
 	})
 })
 
+// The grid centers the line box, which includes the font's descent, so
+// capitals rode high. Trimming to cap height centers the letters themselves.
+// text-box applies to block containers, not to the grid itself.
+const initialsClass = style({
+	display: "block",
+	textBox: "trim-both cap alphabetic",
+})
+
 function joinClassNames(...classNames: Array<string | undefined>) {
 	return classNames.filter(Boolean).join(" ")
 }

package/src/components/Tooltip.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react"
 import ReactDOM from "react-dom"
 import {
 	mergeProps,
+	mergeRefs,
 	useOverlayPosition,
 	useTooltip,
 	useTooltipTrigger,
@@ -22,8 +23,11 @@ type TooltipPlacement = "top" | "bottom" | "left" | "right"
 type TooltipProps = {
 	/** The content shown inside the tooltip. */
 	content: React.ReactNode
-	/** The trigger element. Must contain something focusable (e.g. a button). */
-	children: React.ReactNode
+	/**
+	 * The trigger: one focusable element, such as a Button, that forwards its
+	 * ref and passes event handlers and ARIA props to the DOM.
+	 */
+	children: React.ReactElement
 	placement?: TooltipPlacement
 	/** Warmup delay in ms before the tooltip shows on hover. */
 	delay?: number
@@ -40,21 +44,30 @@ export function Tooltip(props: TooltipProps) {
 	} = props
 
 	const state = useTooltipTriggerState({ delay, isDisabled })
-	const triggerRef = useRef<HTMLSpanElement>(null)
+	const triggerRef = useRef<HTMLElement>(null)
 	const { triggerProps, tooltipProps } = useTooltipTrigger(
 		{ delay, isDisabled },
 		state,
 		triggerRef,
 	)
 
-	const triggerClassName = useStyles(triggerClass)
 	const transition = useTooltipTransition(state.isOpen)
 
+	// The trigger props go on the focusable element itself, as react-aria's
+	// FocusableProvider does. On a wrapper, focus never opened the tooltip
+	// (react-aria ignores focus on descendants) and aria-describedby missed
+	// the focused element.
+	const child = React.Children.only(children) as React.ReactElement<
+		Record<string, unknown> & { ref?: React.Ref<HTMLElement> }
+	>
+	const trigger = React.cloneElement(child, {
+		...mergeProps(child.props, triggerProps),
+		ref: mergeRefs(child.props.ref, triggerRef),
+	})
+
 	return (
 		<>
-			<span ref={triggerRef} className={triggerClassName} {...triggerProps}>
-				{children}
-			</span>
+			{trigger}
 			{transition.render && (
 				<TooltipPopup
 					state={state}
@@ -257,12 +270,6 @@ function TooltipPopup(props: TooltipPopupProps) {
 	)
 }
 
-// The wrapper makes the trigger hoverable/focusable as a unit without
-// affecting layout of the child.
-const triggerClass = style({
-	display: "inline-block",
-})
-
 const tooltipClass = style(
 	text({ size: "xs", fontWeight: 400, color: "highContrast" }),
 	radius.sm,