@tanishqkancharla/maui 0.0.52 → 0.0.53

package/dist/components/Input.d.ts

@@ -1,14 +1,21 @@
+import { type Ref } from "react";
 import { AriaNumberFieldProps, AriaSearchFieldProps, AriaTextFieldOptions } from "react-aria";
 type KeyboardHintProps = {
     /** A single-character shortcut displayed at the inline end while unfocused. */
     keyboardHint?: string;
 };
-export type TextFieldProps = AriaTextFieldOptions<"input"> & KeyboardHintProps;
+type BaseTextFieldProps = AriaTextFieldOptions<"input"> & KeyboardHintProps;
+export type TextFieldSize = "default" | "sm";
+export type TextFieldProps = BaseTextFieldProps & {
+    /** `sm` matches `Button size="sm"` for dense rows such as tree items. */
+    size?: TextFieldSize;
+    ref?: Ref<HTMLInputElement>;
+};
 export type SearchFieldProps = AriaSearchFieldProps & KeyboardHintProps & {
     "aria-keyshortcuts"?: string;
 };
 export declare function TextField(props: TextFieldProps): import("react").JSX.Element;
 export declare function SearchField(props: SearchFieldProps): import("react").JSX.Element;
 export declare function NumberField(props: AriaNumberFieldProps): import("react").JSX.Element;
-export declare function QuietTextField(props: TextFieldProps): import("react").JSX.Element;
+export declare function QuietTextField(props: BaseTextFieldProps): import("react").JSX.Element;
 export {};

package/dist/components/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { mergeProps, useButton, useLocale, useNumberField, useSearchField, useTextField, } from "react-aria";
+import { mergeProps, useButton, useLocale, useNumberField, useObjectRef, useSearchField, useTextField, } from "react-aria";
 import { useNumberFieldState, useSearchFieldState } from "react-stately";
 import { defineVars, style, useStyles } from "purse-styles";
 import { LARGE_SCALE } from "../theme/dataScale";
@@ -38,6 +38,20 @@ const inputClass = style(inputText, focusRing("&:focus-visible", shadowVars.cont
         color: colors.gray[8],
     },
 });
+const smallInputClass = style(spacing.padding({ x: 3 }), {
+    height: controlSize.smHeight,
+    paddingBlock: 0,
+});
+const fieldClass = style({
+    display: "flex",
+    flexDirection: "column",
+    gap: spacing.value(2),
+    width: "100%",
+    minWidth: 0,
+});
+const errorClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), {
+    color: "light-dark(#ce2c31, #e5484d)",
+});
 const inputFrameClass = style({
     position: "relative",
     width: "100%",
@@ -67,16 +81,28 @@ function KeyboardHint(props) {
     return (_jsx(Kbd, { variant: "quiet", className: className, "aria-hidden": "true", children: props.children }));
 }
 export function TextField(props) {
-    const { keyboardHint, ...fieldProps } = props;
-    const ref = useRef(null);
-    const { inputProps } = useTextField(fieldProps, ref);
+    const { keyboardHint, size = "default", ref: forwardedRef, ...fieldProps } = props;
+    const ref = useObjectRef(forwardedRef);
+    const { inputProps, errorMessageProps, isInvalid, validationErrors, validationDetails, } = useTextField(fieldProps, ref);
     const { isFocused, focusProps } = useKeyboardHint();
     const frameClassName = useStyles(inputFrameClass);
-    const className = useStyles(inputClass, keyboardHint ? inputWithHintClass : undefined);
+    const fieldClassName = useStyles(fieldClass);
+    const errorClassName = useStyles(errorClass);
+    const className = useStyles(inputClass, size === "sm" && smallInputClass, keyboardHint ? inputWithHintClass : undefined);
+    const errorMessage = typeof fieldProps.errorMessage === "function"
+        ? fieldProps.errorMessage({
+            isInvalid,
+            validationErrors,
+            validationDetails,
+        })
+        : fieldProps.errorMessage;
     const input = (_jsx("input", { className: className, ref: ref, ...mergeProps(inputProps, focusProps) }));
-    if (!keyboardHint)
-        return input;
-    return (_jsxs("div", { className: frameClassName, children: [input, !isFocused ? _jsx(KeyboardHint, { children: keyboardHint }) : null] }));
+    const control = keyboardHint ? (_jsxs("div", { className: frameClassName, children: [input, !isFocused ? _jsx(KeyboardHint, { children: keyboardHint }) : null] })) : (input);
+    const showError = isInvalid && errorMessage != null && errorMessage !== "";
+    // Keep one wrapper in every state so the input is not remounted, and does
+    // not lose focus, when the error appears or disappears while typing. Spans
+    // keep the field valid inside a <label>.
+    return (_jsxs("span", { className: fieldClassName, children: [control, showError ? (_jsx("span", { ...errorMessageProps, className: errorClassName, children: errorMessage })) : null] }));
 }
 const searchFieldSize = defineVars({
     clearSize: { default: "16px", [LARGE_SCALE]: "40px" },

package/dist/maui.d.ts

@@ -15,7 +15,7 @@ export { flex, flexItem, grid, gridItem, type AlignItems, type JustifyContent }
 export { text, monospace, baseTextStyle, fontFamily, monoFontFamily, monoFontStyle, type TextSize, type TextWeight, type TextColor, type TextOptions, } from "./tokens/text";
 export { avatar } from "./tokens/avatar";
 export { motion, motionDurationMs, motionEasing, motionStreamDurationMs, overlayMotion, } from "./tokens/motion";
-export { iconSizeValues, sizingTokens as sizing, type IconSize, } from "./tokens/sizing";
+export { controlSize, iconSizeValues, sizingTokens as sizing, type IconSize, } from "./tokens/sizing";
 export { prose, proseRhythm, proseHtml, proseStreamingMarkers, type ProseSize, } from "./tokens/prose";
 export { visuallyHidden } from "./tokens/visuallyHidden";
 export { Avatar } from "./components/Avatar";
@@ -27,7 +27,7 @@ export { Checkbox } from "./components/Checkbox";
 export { Switch } from "./components/Switch";
 export { Slider } from "./components/Slider";
 export { RadioOptionGroup, RadioOption } from "./components/Radio";
-export { TextField, SearchField, NumberField, QuietTextField, type TextFieldProps, type SearchFieldProps, } from "./components/Input";
+export { TextField, SearchField, NumberField, QuietTextField, type TextFieldProps, type TextFieldSize, type SearchFieldProps, } from "./components/Input";
 export { Select, SelectItem, type SelectProps, type SelectItemProps, } from "./components/Select";
 export { Dialog, DialogActions, DialogBody, DialogTitle, type DialogActionsProps, type DialogBodyProps, type DialogProps, type DialogSize, type DialogTitleProps, } from "./components/Dialog";
 export { Tooltip } from "./components/Tooltip";

package/dist/maui.js

@@ -17,7 +17,7 @@ export { flex, flexItem, grid, gridItem } from "./tokens/layout";
 export { text, monospace, baseTextStyle, fontFamily, monoFontFamily, monoFontStyle, } from "./tokens/text";
 export { avatar } from "./tokens/avatar";
 export { motion, motionDurationMs, motionEasing, motionStreamDurationMs, overlayMotion, } from "./tokens/motion";
-export { iconSizeValues, sizingTokens as sizing, } from "./tokens/sizing";
+export { controlSize, iconSizeValues, sizingTokens as sizing, } from "./tokens/sizing";
 export { prose, proseRhythm, proseHtml, proseStreamingMarkers, } from "./tokens/prose";
 export { visuallyHidden } from "./tokens/visuallyHidden";
 // Components

package/package.json

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

package/skills/maui/references/components/form-controls.md

@@ -2,7 +2,7 @@
 
 Gallery: `/components/form-controls`. Import from `"maui"`. [Select](select.md) has its own page.
 
-All fields are 28px tall, full width of the parent, `shadow.control` except `QuietTextField`. They take React Aria field props (`value`, `onChange`, `placeholder`, `isDisabled`, `isInvalid`, `aria-label`, `id`, …).
+All fields are 28px tall by default, full width of the parent, `shadow.control` except `QuietTextField`. They take React Aria field props (`value`, `onChange`, `placeholder`, `isDisabled`, `isInvalid`, `aria-label`, `id`, …).
 
 ```tsx
 <TextField aria-label="Title" placeholder="Title" value={v} onChange={setV} keyboardHint="T" />
@@ -13,6 +13,16 @@ All fields are 28px tall, full width of the parent, `shadow.control` except `Qui
 
 `NumberField` uses tabular numerals so the value does not shift as you step. Invalid (unfocused) adds a red 1px ring on top of `shadow.control`. Placeholders are italic `gray[8]`. Cap width in the parent (`maxWidth: 240px` is the gallery default).
 
+`TextField` also accepts:
+
+- `size="sm"` — 24px tall with tighter padding, matching `Button size="sm"`, for dense rows such as tree items.
+- `ref` — the underlying `<input>`, for focus, blur, or selection.
+- `errorMessage` — shown below the field while `isInvalid` is true and linked to the input with `aria-describedby`.
+
+```tsx
+<TextField aria-label="Name" size="sm" value={name} onChange={setName} isInvalid={invalid} errorMessage="Use a name without slashes." />
+```
+
 `TextField`, `SearchField`, and `QuietTextField` accept `keyboardHint`, a single-character shortcut rendered at the inline end while the field is unfocused. The hint is presentational; the consuming app owns the keyboard handler. `SearchField` hides it when the query is non-empty so the clear button can use the same space.
 
 ## `Checkbox`

package/skills/maui/references/tokens.md

@@ -225,6 +225,8 @@ ease-in-out. Streaming markdown uses `motionStreamDurationMs`.
 
 Stroke/fill is `currentColor`. Pass `size` on the icon component; optional `width` / `height` override the box.
 
+`controlSize.height` (28px) and `controlSize.smHeight` (24px) are the control heights used by `Button` and `TextField`. Both become 40px at large scale. Use them to size a slot that must line up with a control, such as an icon next to a `TextField size="sm"`.
+
 ## Avatar tokens
 
 `avatar.green` / `avatar.orange` / `avatar.pink` each have `background` and `foreground`. The `Avatar` component also uses `accent[4]`/`[11]`. You rarely need these tokens directly.

package/src/components/Input.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react"
+import { useRef, useState, type Ref } from "react"
 import {
 	AriaNumberFieldProps,
 	AriaSearchFieldProps,
@@ -7,6 +7,7 @@ import {
 	useButton,
 	useLocale,
 	useNumberField,
+	useObjectRef,
 	useSearchField,
 	useTextField,
 } from "react-aria"
@@ -61,12 +62,38 @@ const inputClass = style(
 	},
 )
 
+const smallInputClass = style(spacing.padding({ x: 3 }), {
+	height: controlSize.smHeight,
+	paddingBlock: 0,
+})
+
+const fieldClass = style({
+	display: "flex",
+	flexDirection: "column",
+	gap: spacing.value(2),
+	width: "100%",
+	minWidth: 0,
+})
+
+const errorClass = style(
+	text({ size: "xs", fontWeight: 400, color: "highContrast" }),
+	{
+		color: "light-dark(#ce2c31, #e5484d)",
+	},
+)
+
 type KeyboardHintProps = {
 	/** A single-character shortcut displayed at the inline end while unfocused. */
 	keyboardHint?: string
 }
 
-export type TextFieldProps = AriaTextFieldOptions<"input"> & KeyboardHintProps
+type BaseTextFieldProps = AriaTextFieldOptions<"input"> & KeyboardHintProps
+export type TextFieldSize = "default" | "sm"
+export type TextFieldProps = BaseTextFieldProps & {
+	/** `sm` matches `Button size="sm"` for dense rows such as tree items. */
+	size?: TextFieldSize
+	ref?: Ref<HTMLInputElement>
+}
 export type SearchFieldProps = AriaSearchFieldProps &
 	KeyboardHintProps & {
 		"aria-keyshortcuts"?: string
@@ -113,15 +140,37 @@ function KeyboardHint(props: { children: string }) {
 }
 
 export function TextField(props: TextFieldProps) {
-	const { keyboardHint, ...fieldProps } = props
-	const ref = useRef<HTMLInputElement>(null)
-	const { inputProps } = useTextField(fieldProps, ref)
+	const {
+		keyboardHint,
+		size = "default",
+		ref: forwardedRef,
+		...fieldProps
+	} = props
+	const ref = useObjectRef(forwardedRef)
+	const {
+		inputProps,
+		errorMessageProps,
+		isInvalid,
+		validationErrors,
+		validationDetails,
+	} = useTextField(fieldProps, ref)
 	const { isFocused, focusProps } = useKeyboardHint()
 	const frameClassName = useStyles(inputFrameClass)
+	const fieldClassName = useStyles(fieldClass)
+	const errorClassName = useStyles(errorClass)
 	const className = useStyles(
 		inputClass,
+		size === "sm" && smallInputClass,
 		keyboardHint ? inputWithHintClass : undefined,
 	)
+	const errorMessage =
+		typeof fieldProps.errorMessage === "function"
+			? fieldProps.errorMessage({
+					isInvalid,
+					validationErrors,
+					validationDetails,
+				})
+			: fieldProps.errorMessage
 	const input = (
 		<input
 			className={className}
@@ -129,14 +178,29 @@ export function TextField(props: TextFieldProps) {
 			{...mergeProps(inputProps, focusProps)}
 		/>
 	)
-
-	if (!keyboardHint) return input
-
-	return (
+	const control = keyboardHint ? (
 		<div className={frameClassName}>
 			{input}
 			{!isFocused ? <KeyboardHint>{keyboardHint}</KeyboardHint> : null}
 		</div>
+	) : (
+		input
+	)
+
+	const showError = isInvalid && errorMessage != null && errorMessage !== ""
+
+	// Keep one wrapper in every state so the input is not remounted, and does
+	// not lose focus, when the error appears or disappears while typing. Spans
+	// keep the field valid inside a <label>.
+	return (
+		<span className={fieldClassName}>
+			{control}
+			{showError ? (
+				<span {...errorMessageProps} className={errorClassName}>
+					{errorMessage}
+				</span>
+			) : null}
+		</span>
 	)
 }
 
@@ -362,7 +426,7 @@ const quietInputClass = style(
 	},
 )
 
-export function QuietTextField(props: TextFieldProps) {
+export function QuietTextField(props: BaseTextFieldProps) {
 	const { keyboardHint, ...fieldProps } = props
 	const ref = useRef<HTMLInputElement>(null)
 	const { inputProps } = useTextField(fieldProps, ref)

package/src/maui.ts

@@ -41,6 +41,7 @@ export {
 	overlayMotion,
 } from "./tokens/motion"
 export {
+	controlSize,
 	iconSizeValues,
 	sizingTokens as sizing,
 	type IconSize,
@@ -82,6 +83,7 @@ export {
 	NumberField,
 	QuietTextField,
 	type TextFieldProps,
+	type TextFieldSize,
 	type SearchFieldProps,
 } from "./components/Input"
 export {

package/src/pages/FormControlsPage.tsx

@@ -17,6 +17,7 @@ export function FormControlsPage() {
 	const [switchState, setSwitchState] = useState(false)
 	const [checkboxState, setCheckboxState] = useState(false)
 	const [textValue, setTextValue] = useState("")
+	const [smallTextValue, setSmallTextValue] = useState("notes/plan.md")
 	const [searchValue, setSearchValue] = useState("")
 	const [numberValue, setNumberValue] = useState(3)
 	const [radioValue, setRadioValue] = useState("one")
@@ -37,6 +38,17 @@ export function FormControlsPage() {
 						onChange={setTextValue}
 					/>
 				</Flex>
+				<Flex column gap={3} style={{ maxWidth: "240px" }}>
+					<Label htmlFor="small-text-field">Small text field with error</Label>
+					<TextField
+						id="small-text-field"
+						size="sm"
+						value={smallTextValue}
+						onChange={setSmallTextValue}
+						isInvalid={smallTextValue.includes("/")}
+						errorMessage="Use a name without slashes."
+					/>
+				</Flex>
 				<Flex column gap={3} style={{ maxWidth: "240px" }}>
 					<Label htmlFor="search-field">Search field</Label>
 					<SearchField