@parallelworks/ui 0.44.0 → 0.45.0

package/dist/components/Avatar.js

@@ -1,21 +1,21 @@
+import { cx } from "../cx.js";
 import { useStrings } from "./Provider.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { Avatar } from "@base-ui/react/avatar";
 //#region src/components/Avatar.tsx
 var SIZE_CLASSES = {
-	xs: "w-4 h-4 text-[9px]",
-	sm: "w-6 h-6 text-xs",
-	md: "w-8 h-8 text-sm",
-	lg: "w-10 h-10 text-base",
-	xl: "w-12 h-12 text-lg",
-	"2xl": "w-16 h-16 text-xl"
+	xs: "size-4 text-[9px]",
+	sm: "size-6 text-xs",
+	md: "size-8 text-sm",
+	lg: "size-10 text-base",
+	xl: "size-12 text-lg",
+	"2xl": "size-16 text-xl"
 };
 var STATUS_CLASSES = {
-	online: "bg-green-500",
+	online: "bg-(--theme-success)",
 	offline: "bg-(--theme-muted-text-color)",
-	busy: "bg-red-500",
-	away: "bg-yellow-500"
+	busy: "bg-(--theme-error)",
+	away: "bg-(--theme-warning)"
 };
 /** Up to two initials: the first and last word of a name split on spaces and dots. */
 function avatarInitials(name) {
@@ -25,26 +25,32 @@ function avatarInitials(name) {
 	if (parts.length >= 2 && first && last) return (first + last).toUpperCase();
 	return first?.toUpperCase() || "?";
 }
-function Avatar({ src, name, size = "md", status, className }) {
-	const strings = useStrings();
-	const [erroredUrl, setErroredUrl] = useState(null);
-	const showImage = !!src && erroredUrl !== src;
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("relative inline-flex", className),
-		children: [showImage ? /* @__PURE__ */ jsx("img", {
-			src,
-			alt: name || strings.common.userAvatar,
-			loading: "lazy",
-			onError: () => setErroredUrl(src),
-			className: clsx("rounded-full object-cover", SIZE_CLASSES[size])
-		}) : /* @__PURE__ */ jsx("div", {
-			className: clsx("rounded-full flex items-center justify-center font-medium", "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white", SIZE_CLASSES[size]),
-			children: size === "xs" ? avatarInitials(name).charAt(0) : avatarInitials(name)
+/** A person's picture, or their initials while it loads or when it fails. It is
+*  one image to assistive technology, named for the person, whichever shows. */
+function Avatar$1({ src, name, size = "md", status, className }) {
+	const { common } = useStrings();
+	return /* @__PURE__ */ jsxs("span", {
+		role: "img",
+		"aria-label": name || common.userAvatar,
+		className: cx("relative inline-flex shrink-0", className),
+		children: [/* @__PURE__ */ jsxs(Avatar.Root, {
+			className: cx("relative inline-flex items-center justify-center overflow-hidden rounded-full font-medium select-none", SIZE_CLASSES[size]),
+			children: [src && /* @__PURE__ */ jsx(Avatar.Image, {
+				src,
+				alt: "",
+				loading: "lazy",
+				keepMounted: true,
+				className: "absolute inset-0 size-full object-cover data-error:hidden data-loading:invisible"
+			}, src), /* @__PURE__ */ jsx(Avatar.Fallback, {
+				"aria-hidden": "true",
+				className: "flex size-full items-center justify-center bg-gradient-to-br from-[var(--gradient-start,var(--theme-accent))] to-[var(--gradient-mid,var(--theme-link))] text-(--theme-accent-text)",
+				children: size === "xs" ? avatarInitials(name).charAt(0) : avatarInitials(name)
+			})]
 		}), status && /* @__PURE__ */ jsx("span", {
 			"data-testid": "online-indicator",
-			className: clsx("absolute bottom-0 right-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "xs" || size === "sm" ? "w-1.5 h-1.5" : "w-2.5 h-2.5")
+			className: cx("absolute right-0 bottom-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "xs" || size === "sm" ? "size-1.5" : "size-2.5")
 		})]
 	});
 }
 //#endregion
-export { Avatar, avatarInitials };
+export { Avatar$1 as Avatar, avatarInitials };

package/dist/components/Button.d.ts

@@ -1,13 +1,18 @@
+import { Button as BaseButton } from '@base-ui/react/button';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
-    size?: 'default' | 'sm' | 'lg';
-    loading?: boolean;
+import { type ButtonStyle } from './buttonClasses.js';
+export interface ButtonProps extends Omit<BaseButton.Props, 'className'>, ButtonStyle {
+    className?: string | undefined;
+    /** Before the label. */
     icon?: ReactNode;
-    iconPosition?: 'left' | 'right';
-    fullWidth?: boolean;
+    /** Busy with what it started: a spinner takes the icon's place, and it can't
+     *  be pressed again until done. */
+    loading?: boolean | undefined;
 }
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** A button in the package's one look (see `buttonClasses`).
+ *  `focusableWhenDisabled` keeps a disabled button's tooltip reachable. A link
+ *  that looks like a button stays a link: give it `buttonClasses()`. */
+export declare function Button({ variant, size, iconOnly, icon, loading, disabled, className, children, ...props }: ButtonProps): import("react").JSX.Element;
 interface MethodButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     icon?: ReactNode;
     label: string;

package/dist/components/Button.js

@@ -1,51 +1,38 @@
-import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
-import { LoaderIcon } from "./StatusIcons.js";
+import { cx } from "../cx.js";
+import { ChevronRightIcon } from "../icons.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { Loader } from "./Loader.js";
 import { useLink } from "./Provider.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { Button } from "@base-ui/react/button";
 //#region src/components/Button.tsx
-var Button = forwardRef(({ children, variant = "primary", size = "default", loading, icon, iconPosition = "right", fullWidth = true, className = "", disabled, ...props }, ref) => {
-	const baseClasses = "inline-flex items-center justify-center gap-2 font-semibold rounded-lg transition-all duration-200 cursor-pointer border-none mt-2 disabled:opacity-50 disabled:cursor-not-allowed";
-	const variantClasses = {
-		primary: "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white shadow-[0_4px_14px_0_rgba(59,130,246,0.3)] hover:enabled:-translate-y-0.5 hover:enabled:shadow-[0_6px_20px_0_rgba(59,130,246,0.4)] active:enabled:translate-y-0",
-		secondary: "bg-[var(--theme-muted-panel-bg)] text-[var(--theme-app)] border border-[var(--theme-border)] hover:enabled:bg-[var(--theme-border)]",
-		outline: "bg-transparent text-[var(--theme-app)] border border-[var(--theme-border)] hover:enabled:bg-[var(--theme-muted-panel-bg)] hover:enabled:border-[var(--theme-muted-text-color)]",
-		ghost: "bg-transparent text-[var(--theme-muted-text-color)] hover:enabled:text-[var(--theme-app)] hover:enabled:bg-[var(--theme-muted-panel-bg)]"
-	};
-	const sizeClasses = {
-		sm: "py-2 px-4 text-[0.8125rem]",
-		default: "py-3 px-5 text-sm",
-		lg: "py-4 px-6 text-base"
-	};
-	const widthClass = fullWidth ? "w-full" : "w-auto";
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type: "button",
-		disabled: disabled || loading,
-		className: clsx(baseClasses, variantClasses[variant], sizeClasses[size], widthClass, className),
+/** A button in the package's one look (see `buttonClasses`).
+*  `focusableWhenDisabled` keeps a disabled button's tooltip reachable. A link
+*  that looks like a button stays a link: give it `buttonClasses()`. */
+function Button$1({ variant, size = "md", iconOnly, icon, loading = false, disabled, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
 		...props,
-		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "size-[18px]" }), children] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-			icon && iconPosition === "left" && /* @__PURE__ */ jsx("span", {
-				className: "flex items-center",
-				children: icon
-			}),
-			children,
-			icon && iconPosition === "right" && /* @__PURE__ */ jsx("span", {
-				className: "flex items-center",
-				children: icon
-			})
-		] })
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		className: cx(buttonClasses({
+			variant,
+			size,
+			iconOnly
+		}), className),
+		children: [loading ? /* @__PURE__ */ jsx(Loader, {
+			inline: true,
+			decorative: true,
+			size: "1em"
+		}) : icon, children]
 	});
-});
-Button.displayName = "Button";
+}
 function MethodButton({ icon, label, description, href, loading, disabled, className = "", ...props }) {
 	const Link = useLink();
-	const baseClasses = "flex items-center w-full p-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-xl text-[var(--theme-app)] text-[0.9375rem] font-medium cursor-pointer transition-all duration-200 no-underline mb-3 last:mb-0 hover:bg-[var(--theme-border)] hover:border-[var(--theme-muted-text-color)] hover:-translate-y-0.5 active:translate-y-0";
-	const disabledClasses = "disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:bg-[var(--ds-muted)] disabled:hover:border-[var(--ds-border)] disabled:hover:translate-y-0";
+	const baseClasses = "flex items-center w-full p-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-xl text-[var(--theme-app)] text-[0.9375rem] font-medium cursor-pointer transition-all duration-200 no-underline mb-3 last:mb-0 hover:not-disabled:bg-(--theme-border) hover:not-disabled:border-(--theme-muted-text-color) hover:not-disabled:-translate-y-0.5 active:translate-y-0";
+	const disabledClasses = "disabled:opacity-60 disabled:cursor-not-allowed";
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 		icon && /* @__PURE__ */ jsx("span", {
-			className: "size-10 rounded-lg bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] flex items-center justify-center shrink-0 mr-4 [&_svg]:size-5 [&_svg]:text-white",
+			className: "size-10 rounded-lg bg-gradient-to-br from-[var(--gradient-start,var(--theme-accent))] to-[var(--gradient-mid,var(--theme-link))] flex items-center justify-center shrink-0 mr-4 [&_svg]:size-5 [&_svg]:text-white",
 			children: icon
 		}),
 		/* @__PURE__ */ jsxs("span", {
@@ -58,27 +45,35 @@ function MethodButton({ icon, label, description, href, loading, disabled, class
 				children: description
 			})]
 		}),
-		loading ? /* @__PURE__ */ jsx(LoaderIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2" }) : /* @__PURE__ */ jsx(FaAngleRight, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2 transition-all duration-200 group-hover:translate-x-[3px] group-hover:text-[var(--theme-app)]" })
+		loading ? /* @__PURE__ */ jsx("span", {
+			className: "ml-2 shrink-0 text-[var(--theme-muted-text-color)]",
+			children: /* @__PURE__ */ jsx(Loader, {
+				inline: true,
+				decorative: true,
+				size: 20,
+				color: "currentColor"
+			})
+		}) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2 transition-all duration-200 group-hover:translate-x-[3px] group-hover:text-[var(--theme-app)]" })
 	] });
 	if (href) {
 		if (href.startsWith("/api/") || href.startsWith("http")) return /* @__PURE__ */ jsx("a", {
 			href,
-			className: clsx("group", baseClasses, className),
+			className: cx("group", baseClasses, className),
 			children: content
 		});
 		return /* @__PURE__ */ jsx(Link, {
 			href,
-			className: clsx("group", baseClasses, className),
+			className: cx("group", baseClasses, className),
 			children: content
 		});
 	}
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: clsx("group", baseClasses, disabledClasses, className),
+		className: cx("group", baseClasses, disabledClasses, className),
 		disabled: disabled || loading,
 		...props,
 		children: content
 	});
 }
 //#endregion
-export { Button, MethodButton };
+export { Button$1 as Button, MethodButton };

package/dist/components/Callout.js

@@ -1,22 +1,28 @@
-import { FaInfoCircle } from "../icons/fa/FaInfoCircle.js";
-import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { InfoIcon, WarningIcon } from "../icons.js";
+import { toneSurface } from "./tone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Callout.tsx
 function CalloutIcon({ type }) {
-	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-6 w-6 mr-4 text-lg" });
-	else return /* @__PURE__ */ jsx(FaInfoCircle, { className: "h-6 w-6 mr-4 text-lg" });
+	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(WarningIcon, {
+		"aria-hidden": "true",
+		className: "mr-3 h-5 w-5 shrink-0"
+	});
+	else return /* @__PURE__ */ jsx(InfoIcon, {
+		"aria-hidden": "true",
+		className: "mr-3 h-5 w-5 shrink-0"
+	});
 }
 function Callout({ type, className = "", children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx(className, type === "warning" && "bg-orange-100 border-orange-500 text-orange-700", type === "error" && "bg-red-100 border-red-500 text-red-700", type === "info" && "bg-blue-100 border-blue-500 text-blue-700", "border-t-4 rounded-b px-4 py-3 shadow-md my-4"),
-		role: "alert",
+		className: cx(toneSurface[type], "my-4 rounded-xl border px-4 py-3", className),
+		role: type === "info" ? "note" : "alert",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "py-1",
-				children: /* @__PURE__ */ jsx(CalloutIcon, { type })
-			}), /* @__PURE__ */ jsx("div", { children })]
+			className: "flex text-sm",
+			children: [/* @__PURE__ */ jsx(CalloutIcon, { type }), /* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				children
+			})]
 		})
 	});
 }

package/dist/components/Card.d.ts

@@ -1,13 +1,23 @@
-import type { ReactNode } from 'react';
-interface CardProps {
+import type { ReactElement, ReactNode } from 'react';
+declare const sizeClasses: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export interface CardProps {
     children: ReactNode;
-    className?: string;
-    wide?: boolean;
-    compact?: boolean;
-    interactive?: boolean;
-    authShadow?: boolean;
+    /** Its width and padding: `sm` for a short form, `lg` for a wide one. */
+    size?: keyof typeof sizeClasses | undefined;
+    /** A stronger shadow, for a card standing alone on a page, such as sign-in. */
+    elevated?: boolean | undefined;
+    /** Renders the card as this element, such as a link or a button, which makes
+     *  the whole card pressable: it lifts on hover and shows focus. */
+    render?: ReactElement | undefined;
+    className?: string | undefined;
 }
-export declare function Card({ children, className, wide, compact, interactive, authShadow, }: CardProps): import("react").JSX.Element;
+/** A raised surface holding one task, such as a sign-in form or a choice among
+ *  a few options. */
+export declare function Card({ children, size, elevated, render, className }: CardProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface CardHeaderProps {
     badge?: ReactNode;
     title: string;

package/dist/components/Card.js

@@ -1,15 +1,26 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Card.tsx
-function Card({ children, className = "", wide, compact, interactive, authShadow }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("w-full bg-[var(--theme-card-bg)] backdrop-blur-xl border border-[var(--theme-border)] rounded-2xl", authShadow ? "shadow-[var(--theme-auth-shadow)]" : "shadow-[var(--theme-shadow)]", wide && "max-w-[560px] p-8", compact && "max-w-[400px] p-6", !wide && !compact && "max-w-[520px] p-10", interactive && "ds-card-interactive cursor-pointer", className),
-		children
+var sizeClasses = {
+	sm: "max-w-[400px] p-6",
+	md: "max-w-[520px] p-10",
+	lg: "max-w-[560px] p-8"
+};
+/** A raised surface holding one task, such as a sign-in form or a choice among
+*  a few options. */
+function Card({ children, size = "md", elevated = false, render, className }) {
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx("div", {}),
+		props: {
+			className: cx("block w-full rounded-2xl border border-(--theme-border) bg-(--theme-panel-bg) backdrop-blur-xl", elevated ? "shadow-(--theme-shadow-xl)" : "shadow-(--theme-shadow)", sizeClasses[size], render && "cursor-pointer text-left transition-[background-color,box-shadow] duration-150 hover:bg-(--theme-panel-hover) hover:shadow-(--theme-shadow-lg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) motion-reduce:transition-none", className),
+			children
+		}
 	});
 }
 function CardHeader({ badge, title, description, className = "", align = "center" }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(align === "center" ? "text-center" : "text-left", "mb-6", className),
+		className: cx(align === "center" ? "text-center" : "text-left", "mb-6", className),
 		children: [
 			badge && /* @__PURE__ */ jsx("div", {
 				className: "inline-flex items-center gap-1.5 py-1.5 px-3 text-xs font-medium bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-full text-[var(--theme-muted-text-color)] mb-4 transition-colors duration-200",

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+export { CheckboxGroup } from '@base-ui/react/checkbox-group';
+export interface CheckboxProps extends Omit<BaseCheckbox.Root.Props, 'className'> {
+    className?: string | undefined;
+}
+/** A box that ticks on and off, or shows a mixed state with `indeterminate`. Name it with an
+ *  enclosing `<label>`, or `aria-label` when it stands alone, as in a table row. In a
+ *  `CheckboxGroup`, `value` identifies it and the group holds which are ticked. */
+export declare function Checkbox({ className, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -0,0 +1,30 @@
+import { cx } from "../cx.js";
+import { CheckIcon, MinusIcon } from "../icons.js";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+//#region src/components/Checkbox.tsx
+/** A box that ticks on and off, or shows a mixed state with `indeterminate`. Name it with an
+*  enclosing `<label>`, or `aria-label` when it stands alone, as in a table row. In a
+*  `CheckboxGroup`, `value` identifies it and the group holds which are ticked. */
+function Checkbox$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		...props,
+		className: cx("flex size-4 shrink-0 items-center justify-center rounded border border-(--theme-border) bg-(--theme-input-bg) text-(--theme-accent-text) cursor-pointer outline-none transition-colors", "data-checked:border-(--theme-accent) data-checked:bg-(--theme-accent)", "data-indeterminate:border-(--theme-accent) data-indeterminate:bg-(--theme-accent)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: "flex",
+			render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
+				...indicatorProps,
+				children: state.indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				}) : /* @__PURE__ */ jsx(CheckIcon, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxGroup };

package/dist/components/Combobox.d.ts

@@ -10,6 +10,7 @@ interface FieldProps {
     'aria-labelledby'?: string | undefined;
     'aria-describedby'?: string | undefined;
     'aria-invalid'?: boolean | undefined;
+    'aria-required'?: boolean | undefined;
     /** Classes for the field box: border, background, size. */
     className?: string | undefined;
 }
@@ -23,6 +24,13 @@ type SelectionProps<Value> = {
     value?: readonly Value[] | undefined;
     defaultValue?: readonly Value[] | undefined;
     onValueChange?: ((value: NoInfer<Value>[]) => void) | undefined;
+    /** Typed text the list doesn't have can be added as a value of its own, as tags are. The
+     *  values are then strings. For one free-text value, use Autocomplete. */
+    creatable?: (Value extends string ? boolean : never) | undefined;
+    /** The most values the field takes; past it, only removing one lets another in. */
+    maxItems?: number | undefined;
+    /** The longest text that can be typed, such as for a created value. */
+    maxLength?: number | undefined;
 };
 export type ComboboxProps<Value = string> = FieldProps & SelectionProps<Value> & {
     items: ComboboxItems<Value>;
@@ -46,4 +54,4 @@ export interface AutocompleteProps extends FieldProps {
 /** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
 export declare function Combobox<Value = string>(props: ComboboxProps<Value>): import("react").JSX.Element;
 /** A free-text field that suggests values as you type. */
-export declare function Autocomplete({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: AutocompleteProps): import("react").JSX.Element;
+export declare function Autocomplete({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, }: AutocompleteProps): import("react").JSX.Element;