@viraui/react 1.0.15 → 1.0.16

package/dist/catalog.json

@@ -14,6 +14,12 @@
       "summary": "Decorative arrow and handwritten label that wraps inline content with optional highlighter mark, positioned via CSS anchor positioning.",
       "guidePath": "./components/annotate/annotate.guide.json"
     },
+    {
+      "id": "autocomplete",
+      "name": "Autocomplete",
+      "summary": "Field-wrapped free-form suggest input with Textfield chrome and Select-like popup list.",
+      "guidePath": "./components/autocomplete/autocomplete.guide.json"
+    },
     {
       "id": "avatar",
       "name": "Avatar",

package/dist/components/autocomplete/autocomplete-group.d.ts

@@ -0,0 +1,12 @@
+import { AutocompleteGroupProps as PrimitiveAutocompleteGroupProps } from '@base-ui/react/autocomplete';
+import type * as React from 'react';
+/**
+ * Public Autocomplete.Group props.
+ */
+export type AutocompleteGroupProps = PrimitiveAutocompleteGroupProps & {
+    /**
+     * Accessible group label rendered with `Autocomplete.GroupLabel`.
+     */
+    label: React.ReactNode;
+};
+export declare const AutocompleteGroup: React.FC<AutocompleteGroupProps>;

package/dist/components/autocomplete/autocomplete-group.js

@@ -0,0 +1,34 @@
+"use client";
+import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/autocomplete/autocomplete-group.tsx
+var AutocompleteGroup = ({ children, className, label, ...otherProps }) => /* @__PURE__ */ jsxs(Autocomplete.Group, {
+	...otherProps,
+	className,
+	render: /* @__PURE__ */ jsx(Stack, {
+		direction: "column",
+		fillChildren: false,
+		rowGap: "2x-small",
+		vPadding: "2x-small"
+	}),
+	children: [/* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
+		render: /* @__PURE__ */ jsx(Stack, {
+			columnGap: "small",
+			direction: "row",
+			fillChildren: false,
+			hPadding: "small",
+			vAlign: "center",
+			vPadding: ["small", "x-small"]
+		}),
+		children: /* @__PURE__ */ jsx(Text, {
+			size: "x-small",
+			tone: "muted",
+			weight: "semibold",
+			children: label
+		})
+	}), children]
+});
+//#endregion
+export { AutocompleteGroup };

package/dist/components/autocomplete/autocomplete-item.d.ts

@@ -0,0 +1,23 @@
+import { AutocompleteItem } from '@base-ui/react/autocomplete';
+import { StackProps } from '..';
+import type * as React from 'react';
+/**
+ * Public Autocomplete.Item props.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type AutocompleteItemProps = AutocompleteItem.Props & {
+    /**
+     * Decorative leading node rendered before the item label.
+     *
+     * @default No addon is rendered.
+     */
+    addon?: React.ReactNode;
+    /**
+     * Vertical alignment of the addon relative to the item label row.
+     *
+     * @default 'center'
+     */
+    addonAlign?: StackProps['vAlign'];
+};
+export declare const AutocompleteItemPart: React.FC<AutocompleteItemProps>;

package/dist/components/autocomplete/autocomplete-item.js

@@ -0,0 +1,37 @@
+"use client";
+import { clsx } from "../../core/clsx.js";
+import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
+import autocomplete_module_default from "./autocomplete.module.js";
+import { Surface } from "../surface/surface.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/autocomplete/autocomplete-item.tsx
+var AutocompleteItemPart = ({ addon, addonAlign = "center", children, className, ...otherProps }) => /* @__PURE__ */ jsx(Autocomplete.Item, {
+	...otherProps,
+	className: clsx(autocomplete_module_default.Item, className),
+	render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
+	children: /* @__PURE__ */ jsxs(Stack, {
+		className: autocomplete_module_default.ItemRow,
+		columnGap: "small",
+		direction: "row",
+		fillChildren: false,
+		hPadding: "small",
+		vAlign: addonAlign,
+		vPadding: "small",
+		children: [addon && /* @__PURE__ */ jsx(Stack, {
+			"aria-hidden": "true",
+			"data-grow": "false",
+			"data-shrink": "false",
+			children: addon
+		}), /* @__PURE__ */ jsx(Text, {
+			"data-grow": "true",
+			"data-shrink": "true",
+			lineHeight: "small",
+			size: "small",
+			children
+		})]
+	})
+});
+//#endregion
+export { AutocompleteItemPart };

package/dist/components/autocomplete/autocomplete.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-autocomplete-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-autocomplete-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-autocomplete-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-autocomplete-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-autocomplete-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-autocomplete-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-autocomplete-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__autocomplete-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__autocomplete-module__Autocomplete_WfXkD{--vui-autocomplete-input-height:var(--space-x-large);--vui-autocomplete-control-group-background:var(--base-1);--vui-autocomplete-control-group-color:var(--global-foreground);--vui-autocomplete-control-group-border-color:var(--global-contrast);--vui-autocomplete-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-autocomplete-control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__autocomplete-module__Label_aOSjz:after{content:" ＊";color:var(--highlight-red)}}.viraui__autocomplete-module__ControlGroup_AUq7O{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-autocomplete-input-height);background:var(--vui-autocomplete-control-group-background);color:var(--vui-autocomplete-control-group-color);border:1px solid var(--vui-autocomplete-control-group-border-color);border-radius:var(--vui-autocomplete-control-group-border-radius);&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4:focus-visible),&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4[data-invalid]){--vui-autocomplete-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4:disabled),&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4[data-disabled]){--vui-autocomplete-control-group-background:var(--global-disabled-background);--vui-autocomplete-control-group-border-color:#0000;--vui-autocomplete-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__autocomplete-module__Addon_6ajrr[data-position=start])>.viraui__autocomplete-module__CustomBasicInput_k7dx4{padding-inline-start:var(--space-x-small)}&:has(.viraui__autocomplete-module__Addon_6ajrr[data-position=end])>.viraui__autocomplete-module__CustomBasicInput_k7dx4{padding-inline-end:var(--space-x-small)}}.viraui__autocomplete-module__Addon_6ajrr{min-inline-size:var(--space-x-large)}.viraui__autocomplete-module__Description_cr8U6{padding-inline:calc(var(--vui-autocomplete-control-group-border-radius) / 2)}.viraui__autocomplete-module__AutocompletePopup_nF49j{--vui-autocomplete-list-border-radius:var(--radius-medium);--vui-autocomplete-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__autocomplete-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__autocomplete-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__autocomplete-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__autocomplete-list-appear-offset) * -1) 0}}.viraui__autocomplete-module__PopupChrome_573fy{box-sizing:border-box;max-block-size:var(--available-height);overscroll-behavior:contain}.viraui__autocomplete-module__List_Tl5j1{box-sizing:border-box;inline-size:100%;scroll-padding-block:var(--vui-autocomplete-list-padding);&:focus,&:focus-visible{outline:none}}.viraui__autocomplete-module__Empty_Xa34u:not(:empty),.viraui__autocomplete-module__Status_XLDvE:not(:empty){padding-inline:var(--space-small);padding-block:var(--space-small)}.viraui__autocomplete-module__ItemRow_ab22I{min-block-size:var(--space-x-large)}}@layer viraui.overrides{.viraui__autocomplete-module__CustomBasicInput_k7dx4{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}}.viraui__autocomplete-module__Item_TmEz2{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}

package/dist/components/autocomplete/autocomplete.d.ts

@@ -0,0 +1,96 @@
+import { FieldRoot } from '@base-ui/react/field';
+import { AutocompleteRoot, Autocomplete as PrimitiveAutocomplete } from '@base-ui/react/autocomplete';
+import { BasicInputProps } from '../basic-input';
+import { AutocompleteGroup } from './autocomplete-group';
+import { AutocompleteItemPart } from './autocomplete-item';
+import type * as React from 'react';
+/**
+ * Public Autocomplete props.
+ *
+ * Includes Base UI autocomplete root props such as `value`, `defaultValue`, `items`,
+ * `mode`, `filter`, `limit`, and `autoHighlight`, plus optional field copy and Textfield
+ * control-group chrome (`startAddon` / `endAddon` / `fitContent`).
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type AutocompleteProps = Omit<AutocompleteRoot.Props<any>, 'children'> & Omit<FieldRoot.Props, 'ref' | 'children'> & {
+    /**
+     * Visible label rendered with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
+     * Replaces description while the field is invalid.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+    /**
+     * Leading decoration (prefix text, icon). Not a second field control.
+     *
+     * @default No start addon is rendered.
+     */
+    startAddon?: React.ReactNode;
+    /**
+     * Trailing decoration (icon, button). Buttons must use `type="button"`.
+     *
+     * @default No end addon is rendered.
+     */
+    endAddon?: React.ReactNode;
+    /**
+     * When `true`, sets `field-sizing: content` so the control grows inline with its value.
+     * Block chrome stays `var(--vui-autocomplete-input-height)`. Omitted / `false` keeps the browser fixed default.
+     *
+     * @default undefined (browser fixed)
+     */
+    fitContent?: BasicInputProps['fitContent'];
+    /**
+     * Placeholder text shown in the input when empty.
+     *
+     * @default No placeholder is rendered.
+     */
+    placeholder?: string;
+    /**
+     * Content rendered inside baked `Autocomplete.Empty` when the filtered list has no items.
+     *
+     * @default No empty copy is rendered.
+     */
+    empty?: React.ReactNode;
+    /**
+     * Content rendered inside baked `Autocomplete.Status` (async / limit messaging).
+     * Keep the slot mounted; update children when status changes.
+     *
+     * @default No status copy is rendered.
+     */
+    status?: React.ReactNode;
+    /**
+     * Ref forwarded to the autocomplete input.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLInputElement>;
+    /**
+     * List content: static nodes (`Item` / `Group` / `Collection`) or a Base UI list render function.
+     */
+    children?: React.ReactNode | ((item: any, index: number) => React.ReactNode);
+};
+declare function AutocompleteRootComponent({ children, className, description, dirty, disabled, empty, endAddon, error, fitContent, invalid, label, name, placeholder, ref, startAddon, status, touched, validate, validationDebounceTime, validationMode, ...autocompleteRootProps }: AutocompleteProps): React.JSX.Element;
+declare const AutocompleteCollection: typeof PrimitiveAutocomplete.Collection;
+type AutocompleteComponent = typeof AutocompleteRootComponent & {
+    Item: typeof AutocompleteItemPart;
+    Group: typeof AutocompleteGroup;
+    Collection: typeof AutocompleteCollection;
+    useFilter: typeof PrimitiveAutocomplete.useFilter;
+    useFilteredItems: typeof PrimitiveAutocomplete.useFilteredItems;
+};
+export declare const Autocomplete: AutocompleteComponent;
+export type { AutocompleteGroupProps } from './autocomplete-group';
+export type { AutocompleteItemProps } from './autocomplete-item';

package/dist/components/autocomplete/autocomplete.guide.json

@@ -0,0 +1,95 @@
+{
+  "name": "Autocomplete",
+  "structure": "<Autocomplete>\n  <Autocomplete.Item value=\"…\">…</Autocomplete.Item>\n  <Autocomplete.Group label=\"…\" items={[…]}>\n    <Autocomplete.Collection>\n      {(item) => <Autocomplete.Item value={item}>…</Autocomplete.Item>}\n    </Autocomplete.Collection>\n  </Autocomplete.Group>\n</Autocomplete>",
+  "summary": "Field-wrapped free-form suggest input with Textfield chrome and Select-like popup list.",
+  "whenToUse": [
+    "Suggest options while allowing free-form text in the input",
+    "Filterable tag, movie, or docs search with optional empty and status copy",
+    "Grouped suggestion lists via Autocomplete.Group and Collection",
+    "Async or limited result lists that need polite status announcements"
+  ],
+  "whenNotToUse": [
+    "Remembered selection from a closed list — use Select (or Combobox when available)",
+    "Command palette, grid picker, or virtualized lists — separate surfaces on Base UI Autocomplete",
+    "Wrapping a lone Autocomplete in Fieldset when its own label is sufficient"
+  ],
+  "accessibility": [
+    "Provide label or aria-label so the input has an accessible name",
+    "Wire description and error copy through the field pattern so assistive tech gets helper text",
+    "Keep empty and status slots mounted; update their children when messaging changes"
+  ],
+  "antiPatterns": [
+    "Expecting Select-like closed selection state",
+    "Leaving the input without label or aria-label",
+    "Conditionally unmounting Empty or Status instead of updating their children"
+  ],
+  "related": ["Textfield", "Select", "Fieldset", "Stack", "Surface", "Spinner"],
+  "properties": {
+    "react": {
+      "description": {
+        "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
+      },
+      "empty": {
+        "description": "Content rendered inside baked `Autocomplete.Empty` when the filtered list has no items."
+      },
+      "endAddon": {
+        "description": "Trailing decoration (icon, button). Buttons must use `type=\"button\"`."
+      },
+      "error": {
+        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid."
+      },
+      "fitContent": {
+        "description": "When `true`, sets `field-sizing: content` so the control grows inline with its value. Block chrome stays `var(--vui-autocomplete-input-height)`. Omitted / `false` keeps the browser fixed default.",
+        "refCss": "input-height"
+      },
+      "Group.label": {
+        "description": "Accessible group label rendered with `Autocomplete.GroupLabel`."
+      },
+      "Item.addon": {
+        "description": "Decorative leading node rendered before the item label."
+      },
+      "Item.addonAlign": {
+        "description": "Vertical alignment of the addon relative to the item label row."
+      },
+      "label": {
+        "description": "Visible label rendered with shared internal `FieldLabel`."
+      },
+      "placeholder": {
+        "description": "Placeholder text shown in the input when empty."
+      },
+      "ref": {
+        "description": "Ref forwarded to the autocomplete input."
+      },
+      "startAddon": {
+        "description": "Leading decoration (prefix text, icon). Not a second field control."
+      },
+      "status": {
+        "description": "Content rendered inside baked `Autocomplete.Status` (async / limit messaging). Keep the slot mounted; update children when status changes."
+      }
+    },
+    "css": {
+      "control-group-background": {
+        "description": "Autocomplete control group background."
+      },
+      "control-group-border-color": {
+        "description": "Autocomplete control group border color; invalid state overrides."
+      },
+      "control-group-border-radius": {
+        "description": "Autocomplete control group corner radius."
+      },
+      "control-group-color": {
+        "description": "Autocomplete control group foreground color."
+      },
+      "input-height": {
+        "description": "Autocomplete control group block size.",
+        "refReact": "fitContent"
+      },
+      "list-border-radius": {
+        "description": "Popup list border radius custom property on the popup root."
+      },
+      "list-padding": {
+        "description": "Popup list padding custom property used for scroll padding."
+      }
+    }
+  }
+}

package/dist/components/autocomplete/autocomplete.js

@@ -0,0 +1,126 @@
+"use client";
+import './autocomplete.css';
+import { clsx } from "../../core/clsx.js";
+import basic_input_module_default from "../basic-input/basic-input.module.js";
+import { Text } from "../text/text.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { InputControlGroup } from "../basic-input/input-control-group.js";
+import { Stack } from "../stack/stack.js";
+import { AutocompleteGroup } from "./autocomplete-group.js";
+import autocomplete_module_default from "./autocomplete.module.js";
+import { AutocompleteItemPart } from "./autocomplete-item.js";
+import { Elevator } from "../elevator/elevator.js";
+import { Surface } from "../surface/surface.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { useId } from "react";
+//#region src/components/autocomplete/autocomplete.tsx
+var AutocompletePrimitiveRoot = Autocomplete.Root;
+function AutocompleteRootComponent({ children, className, description, dirty, disabled, empty, endAddon, error, fitContent, invalid, label, name, placeholder, ref, startAddon, status, touched, validate, validationDebounceTime, validationMode, ...autocompleteRootProps }) {
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...restAutocompleteProps } = autocompleteRootProps;
+	const fieldLabelId = useId();
+	const listAccessibleNameProps = {};
+	if (ariaLabel !== void 0) listAccessibleNameProps["aria-label"] = ariaLabel;
+	else if (ariaLabelledBy !== void 0) listAccessibleNameProps["aria-labelledby"] = ariaLabelledBy;
+	else if (label !== void 0) listAccessibleNameProps["aria-labelledby"] = fieldLabelId;
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className: clsx(autocomplete_module_default.Autocomplete, className),
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			rowGap: "small"
+		}),
+		children: [
+			label && /* @__PURE__ */ jsx(Field.Label, {
+				className: autocomplete_module_default.Label,
+				id: fieldLabelId,
+				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
+			}),
+			/* @__PURE__ */ jsxs(AutocompletePrimitiveRoot, {
+				...restAutocompleteProps,
+				disabled,
+				name,
+				children: [/* @__PURE__ */ jsx(InputControlGroup, {
+					addonClassName: autocomplete_module_default.Addon,
+					controlGroupClassName: autocomplete_module_default.ControlGroup,
+					endAddon,
+					startAddon,
+					children: /* @__PURE__ */ jsx(Autocomplete.Input, {
+						"aria-label": ariaLabel,
+						"aria-labelledby": ariaLabelledBy,
+						className: clsx(basic_input_module_default.BasicInput, autocomplete_module_default.CustomBasicInput),
+						disabled,
+						placeholder,
+						ref,
+						...fitContent && { "data-sizing": "content" }
+					})
+				}), /* @__PURE__ */ jsx(Autocomplete.Portal, { children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
+					sideOffset: 2,
+					children: /* @__PURE__ */ jsx(Autocomplete.Popup, {
+						className: autocomplete_module_default.AutocompletePopup,
+						children: /* @__PURE__ */ jsx(Elevator, {
+							resting: 1,
+							children: /* @__PURE__ */ jsxs(Surface, {
+								border: "all",
+								className: autocomplete_module_default.PopupChrome,
+								color: 1,
+								"data-vibrant": "",
+								hPadding: "x-small",
+								overflow: "auto",
+								radius: "medium",
+								vPadding: "x-small",
+								children: [
+									/* @__PURE__ */ jsx(Autocomplete.Status, {
+										className: autocomplete_module_default.Status,
+										children: typeof status === "string" ? /* @__PURE__ */ jsx(Text, {
+											size: "x-small",
+											tone: "muted",
+											children: status
+										}) : status
+									}),
+									/* @__PURE__ */ jsx(Autocomplete.Empty, {
+										className: autocomplete_module_default.Empty,
+										children: typeof empty === "string" ? /* @__PURE__ */ jsx(Text, {
+											size: "small",
+											tone: "muted",
+											children: empty
+										}) : empty
+									}),
+									/* @__PURE__ */ jsx(Autocomplete.List, {
+										...listAccessibleNameProps,
+										className: autocomplete_module_default.List,
+										children
+									})
+								]
+							})
+						})
+					})
+				}) })]
+			}),
+			/* @__PURE__ */ jsx(FieldHelperCopy, {
+				className: autocomplete_module_default.Description,
+				description,
+				error
+			})
+		]
+	});
+}
+var AutocompleteCollection = Autocomplete.Collection;
+var Autocomplete$1 = Object.assign(AutocompleteRootComponent, {
+	Item: AutocompleteItemPart,
+	Group: AutocompleteGroup,
+	Collection: AutocompleteCollection,
+	useFilter: Autocomplete.useFilter,
+	useFilteredItems: Autocomplete.useFilteredItems
+});
+//#endregion
+export { Autocomplete$1 as Autocomplete };

package/dist/components/autocomplete/autocomplete.module.js

@@ -0,0 +1,31 @@
+//#region src/components/autocomplete/autocomplete.module.css
+var Autocomplete = "viraui__autocomplete-module__Autocomplete_WfXkD";
+var Label = "viraui__autocomplete-module__Label_aOSjz";
+var ControlGroup = "viraui__autocomplete-module__ControlGroup_AUq7O";
+var CustomBasicInput = "viraui__autocomplete-module__CustomBasicInput_k7dx4";
+var Addon = "viraui__autocomplete-module__Addon_6ajrr";
+var Description = "viraui__autocomplete-module__Description_cr8U6";
+var AutocompletePopup = "viraui__autocomplete-module__AutocompletePopup_nF49j";
+var PopupChrome = "viraui__autocomplete-module__PopupChrome_573fy";
+var List = "viraui__autocomplete-module__List_Tl5j1";
+var Empty = "viraui__autocomplete-module__Empty_Xa34u";
+var Status = "viraui__autocomplete-module__Status_XLDvE";
+var ItemRow = "viraui__autocomplete-module__ItemRow_ab22I";
+var Item = "viraui__autocomplete-module__Item_TmEz2";
+var autocomplete_module_default = {
+	Autocomplete,
+	Label,
+	ControlGroup,
+	CustomBasicInput,
+	Addon,
+	Description,
+	AutocompletePopup,
+	PopupChrome,
+	List,
+	Empty,
+	Status,
+	ItemRow,
+	Item
+};
+//#endregion
+export { Addon, Autocomplete, AutocompletePopup, ControlGroup, CustomBasicInput, Description, Empty, Item, ItemRow, Label, List, PopupChrome, Status, autocomplete_module_default as default };

package/dist/components/autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export { Autocomplete } from './autocomplete';
+export type { AutocompleteProps, AutocompleteGroupProps, AutocompleteItemProps } from './autocomplete';

package/dist/components/avatar/avatar.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-avatar-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-avatar-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-avatar-foreground{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__avatar-module__Avatar_BRuS3{--vui-avatar-size:var(--space-2x-large);--vui-avatar-background:var(--global-contrast);--vui-avatar-foreground:var(--global-foreground);--vui-avatar-radius:var(--radius-medium);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vui-avatar-size);block-size:var(--vui-avatar-size);min-inline-size:var(--vui-avatar-size);min-block-size:var(--vui-avatar-size);overflow:hidden;border-radius:var(--vui-avatar-radius);background:var(--vui-avatar-background);color:var(--vui-avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-type:inline-size;&[data-size=x-small]{--vui-avatar-size:var(--space-large);--vui-avatar-radius:var(--radius-small)}&[data-size=regular]{--vui-avatar-size:var(--space-wide)}&[data-size=big]{--vui-avatar-size:var(--space-2x-wide);--vui-avatar-radius:var(--radius-large)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}}@layer viraui.overrides{.viraui__avatar-module__AvatarSkeleton_AnE8Q{border-radius:inherit}.viraui__avatar-module__Label_QASTF{font-size:30cqw}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-avatar-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-avatar-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-avatar-foreground{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__avatar-module__Avatar_BRuS3{--vui-avatar-size:var(--space-2x-large);--vui-avatar-background:var(--global-contrast);--vui-avatar-foreground:var(--global-foreground);--vui-avatar-radius:var(--radius-small);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vui-avatar-size);block-size:var(--vui-avatar-size);min-inline-size:var(--vui-avatar-size);min-block-size:var(--vui-avatar-size);overflow:hidden;border-radius:var(--vui-avatar-radius);background:var(--vui-avatar-background);color:var(--vui-avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-type:inline-size;&[data-size=x-small]{--vui-avatar-size:var(--space-large);--vui-avatar-radius:var(--radius-small)}&[data-size=regular]{--vui-avatar-size:var(--space-wide)}&[data-size=big]{--vui-avatar-size:var(--space-2x-wide);--vui-avatar-radius:var(--radius-large)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}}@layer viraui.overrides{.viraui__avatar-module__AvatarSkeleton_AnE8Q{border-radius:inherit}.viraui__avatar-module__Label_QASTF{font-size:30cqw}}

package/dist/components/avatar/avatar.js

@@ -1,7 +1,7 @@
 import './avatar.css';
 import { clsx } from "../../core/clsx.js";
-import avatar_module_default from "./avatar.module.js";
 import { Text } from "../text/text.js";
+import avatar_module_default from "./avatar.module.js";
 import { Skeleton } from "../skeleton/skeleton.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "@base-ui/react/avatar";

package/dist/components/avatar-group/avatar-group.js

@@ -1,9 +1,9 @@
 import './avatar-group.css';
 import { clsx } from "../../core/clsx.js";
-import { Avatar } from "../avatar/avatar.js";
-import avatar_group_module_default from "./avatar-group.module.js";
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
+import { Avatar } from "../avatar/avatar.js";
+import avatar_group_module_default from "./avatar-group.module.js";
 import { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/avatar-group/avatar-group.tsx

package/dist/components/basic-input/basic-input.js

@@ -2,9 +2,9 @@ import './basic-input.css';
 import { clsx } from "../../core/clsx.js";
 import basic_input_module_default from "./basic-input.module.js";
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { Field } from "@base-ui/react/field";
 import { Input } from "@base-ui/react/input";
+import * as React from "react";
 //#region src/components/basic-input/basic-input.tsx
 function usesInputPrimitiveRender(render) {
 	return React.isValidElement(render) && render.type === Input;

package/dist/components/basic-input/field-label.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-field-label-padding-inline{syntax:"<length>";inherits:true;initial-value:0}}@layer viraui.overrides{.viraui__field-label-module__FieldLabel_R9SYf{padding-inline:var(--vui-field-label-padding-inline)}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-field-label-padding-inline{syntax:"<length>";inherits:true;initial-value:0}}@layer viraui.overrides{.viraui__field-label-module__FieldLabel_R9SYf{padding-inline-start:var(--vui-field-label-padding-inline)}}

package/dist/components/basic-input/field-label.js

@@ -2,7 +2,6 @@ import './field-label.css';
 import { clsx } from "../../core/clsx.js";
 import { Text } from "../text/text.js";
 import field_label_module_default from "./field-label.module.js";
-import { Stack } from "../stack/stack.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/basic-input/field-label.tsx
 /**
@@ -17,7 +16,7 @@ var FieldLabel = ({ children, className, size = "small", ...textProps }) => /* @
 	lineHeight: "small",
 	selection: false,
 	size,
-	render: /* @__PURE__ */ jsx(Stack, { render: /* @__PURE__ */ jsx("span", {}) }),
+	render: /* @__PURE__ */ jsx("span", {}),
 	weight: "semibold",
 	...textProps,
 	children

package/dist/components/button/button-chrome.js

@@ -39,7 +39,10 @@ var ButtonChromeChildren = ({ addon, children, isIconOnly, loading, size }) => /
 })] }), loading && /* @__PURE__ */ jsx("span", {
 	"aria-hidden": "true",
 	className: button_module_default.SpinnerOverlay,
-	children: /* @__PURE__ */ jsx(Spinner, { size: spinnerDimensionsBySize[size] })
+	children: /* @__PURE__ */ jsx(Spinner, {
+		variant: "dots",
+		size: spinnerDimensionsBySize[size]
+	})
 })] });
 //#endregion
 export { ButtonChromeChildren, getButtonChromeRootAttrs, spinnerDimensionsBySize };

package/dist/components/button/button.js

@@ -2,8 +2,8 @@ import './button.css';
 import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
+import { Button } from "@base-ui/react/button";
 //#region src/components/button/button.tsx
 function usesButtonPrimitiveRender(render) {
 	return render === void 0 || React.isValidElement(render) && render.type === "button";

package/dist/components/checkbox/checkbox.js

@@ -3,8 +3,8 @@ import { clsx } from "../../core/clsx.js";
 import { ChromeCheck, ChromeMinus } from "../../internal/chrome-icons/chrome-icons.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
-import checkbox_module_default from "./checkbox.module.js";
 import { Stack } from "../stack/stack.js";
+import checkbox_module_default from "./checkbox.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Checkbox } from "@base-ui/react/checkbox";

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './annotate';
+export * from './autocomplete';
 export * from './avatar';
 export * from './avatar-group';
 export * from './badge';

package/dist/components/menu/menu-checkbox-item.d.ts

@@ -1,5 +1,4 @@
 import { MenuCheckboxItem as MenuCheckboxItemPrimitive } from '@base-ui/react/menu';
-import { StackProps } from '../stack';
 import type * as React from 'react';
 /**
  * Public Menu.CheckboxItem props.
@@ -13,18 +12,6 @@ export type MenuCheckboxItemProps = MenuCheckboxItemPrimitive.Props & {
      * @default No addon is rendered.
      */
     addon?: React.ReactNode;
-    /**
-     * Vertical alignment of the addon relative to the label row.
-     *
-     * @default 'center'
-     */
-    addonAlign?: StackProps['vAlign'];
-    /**
-     * Custom indicator node when checked.
-     *
-     * @default Built-in Check chrome SVG at size 16
-     */
-    indicator?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut) before the check indicator.
      * Rendered muted `x-small`.