@itwin/itwinui-react 5.0.0-alpha.10 → 5.0.0-alpha.12

package/CHANGELOG.md

@@ -0,0 +1,134 @@
+# Changelog
+
+## 5.0.0-alpha.12
+
+- **breaking**: Introduce composition API for `Field`. See [#449](https://github.com/iTwin/design-system/pull/449).
+  - Includes `<Field.Root>`, `<Field.Label>`, `<Field.Control>`, `<Field.Description>`.
+  - Added a new `<Field.ErrorMessage>` subcomponent.
+- `Tree.Item`: Added automatic overflow handling for `actions`.
+  - **breaking**: `DropdownMenu` is no longer allowed to be passed into `actions`. See [#404](https://github.com/iTwin/design-system/pull/404).
+- Added a new `Table` component, usable as `<Table.HtmlTable>` or `<Table.CustomTable>`.
+- `DropdownMenu`: menuitems will now be rendered as `<button>`.
+- Styling changes:
+  - Reset `<button>` styles.
+  - Added popover-open state styles to `<Button>` and `<IconButton>`.
+  - Improved forced-colors mode styling for `<Checkbox>`, `<Radio>` and `<Switch>`.
+- Bug fixes:
+  - Fixed `<Select.HtmlSelect>` overflowing beyond its container.
+  - Fixed `<Select.HtmlSelect>` options text not appearing in Windows in certain cases.
+  - Added missing `border-radius` to `<Skeleton>`.
+
+## 5.0.0-alpha.11
+
+- Added `error` prop to `<Tree.Item>`.
+- Implemented fallback strategy for `<Icon>`, so that non-HTTP URLs are fetched at runtime.
+- Added `unstable_htmlSanitizer` prop to `<Root>`.
+- Added `tone="accent"` support to `<Badge>`.
+- Adjusted `DropdownMenu` and `Tooltip` to be portaled by default.
+- Styling changes:
+  - Added shimmer animation to `<Skeleton>`.
+  - Updated `<Spinner>` visuals and animation to match `<ProgressBar>`.
+- Bug fixes:
+  - Fixed styles not unloading when `<Root>` is unmounted.
+  - Fixed `<Anchor>` underline not showing when rendered as a `<button>`.
+  - Fixed `<Tree.ItemAction visible>` affecting the visibility of all actions.
+  - Fixed vertical centering in `<Tab.TabList>`.
+  - Fixed `Tab` active stripe positioning and animation.
+  - Fixed `<Button variant="solid" tone="accent">` icon fill in pressed state.
+
+## 5.0.0-alpha.10
+
+- Added initial `<Skeleton>` component.
+- Added initial `<ProgressBar>` component.
+- Fixed various UX and accessibility issues related to `<Tree.Item>` actions visibility.
+  - Actions no longer get stuck.
+  - Tooltips can now be hovered.
+  - Focus correctly returns to actions after menu closes.
+  - Keyboard events no longer affect the main treeitem.
+- Reduced `<Field>` spacing.
+- Experimental changes in `<Icon>` component's `href` handling.
+
+## 5.0.0-alpha.9
+
+- Added `dot` prop to `<IconButton>` for showing a small "dot" next to the icon.
+- Added `unstable_decorations` prop to `<Tree.Item>` for showing multiple decorations (e.g. icons).
+- **breaking**: Replaced `<DropdownMenu.Item>` children with new `label` prop (see [#423](https://github.com/iTwin/design-system/pull/423)).
+- Added `icon` prop to `<DropdownMenu.Item>` and `<DropdownMenu.CheckboxItem>`.
+- Updated the `shortcuts` prop of `<DropdownMenu.Item>` to recognize predefined "symbols" (e.g. modifier keys).
+- Updated `<Anchor>` and `<Badge>` visuals to match the latest design.
+- Fixed forced-colors mode styling for `DropdownMenu`.
+
+## 5.0.0-alpha.8
+
+- Added `description` prop to `<Tree.Item>` component for showing "sublabels".
+- **breaking**: Updated `<Text>` component to require `variant` prop.
+- (soft breaking) Removed `children` from `<Tree.Item>` prop types.
+- Updated `DropdownMenu` padding.
+
+## 5.0.0-alpha.7
+
+- Added new `<Avatar>` component.
+- Added new `<Badge>` component.
+- Added `alt` prop to `<Icon>` component.
+- Fixed all color tokens to use the correct `oklch` values.
+- Fixed an issue where `<Tree.Item>` was not respecting its `style` prop.
+
+## 5.0.0-alpha.6
+
+- **breaking**: All CSS variables have been renamed to use the `--ids` prefix. See [#369](https://github.com/iTwin/kiwi/pull/369).
+- **breaking**: Some CSS variables were renamed further. See [#368](https://github.com/iTwin/kiwi/pull/368).
+  - Notably, the "surface" backgrounds have been split into two different "page" and "elevation" scales.
+- Background colors have been updated to match the latest design.
+- All styles are now loaded into `@layer itwinui`. The one exception is the CSS reset which remains in `@layer reset`.
+- `<Field>` now respects the order of `<Description>`s when creating associations.
+
+## 5.0.0-alpha.5
+
+- **breaking**: `Tree` API has changed to require flat structure, with explicit ARIA props (see [#300](https://github.com/iTwin/kiwi/pull/300)). `<Tree.Item>` no longer allows passing `children`.
+- **breaking**: `Tree.Item`s `action` prop now requires a list of `<Tree.ItemAction>` components (see [#355](https://github.com/iTwin/kiwi/pull/355) and [#362](https://github.com/iTwin/kiwi/pull/362)).
+- **breaking**: Replaced `<Chip>` children with new `label` prop (see [#349](https://github.com/iTwin/kiwi/pull/349)).
+- Added `<Tree.ItemAction>` component with `visible` prop for more granular control over action visibility.
+- Updated the layout of `<Field>` so that `<Description>` is placed in the best spot according on the label position and control type.
+- `<Field>` now considers the presence of explicit control `id`s when creating associations.
+
+## 5.0.0-alpha.4
+
+- Added `onDismiss` prop and dismiss button to `<Chip>`.
+- Fixed a rare issue where `TextBox` was still editable when `disabled`.
+- Fixed "forced colors" mode styling for `<Button>` and `<IconButton>`.
+- Explicitly set typography styles on `<Root>` to improve compatibility with iTwinUI theme bridge.
+- Updated `DropdownMenu` visuals.
+
+## 5.0.0-alpha.3
+
+- Added `<DropdownMenu.CheckboxItem>` component for rendering menu items with a checkable state.
+- Added `variant` prop to `<Select.HtmlSelect>` component for displaying different visual variants of the component.
+- Updated event handling of `Tree` components to avoid firing `onClick` event of the `<Tree.Item>` component when the expander or one of the actions is clicked.
+- Updated `Tree` components to implement a tree view pattern instead of the previously used nested list approach.
+- Updated size and spacing of `<Tree.Item>`, `<DropdownMenu.Item>` and `<Select>` components.
+- Fixed `<Label>` component alignment with `TextBox` components.
+- Fixed action rendering of `<Tree.Item>` component.
+- Fixed `<Checkbox>` component styling, which caused the mixed checkbox to be displayed as unchecked in the light theme.
+
+## 5.0.0-alpha.2
+
+- Added initial `Tree` component, exposed as `<Tree.Root>` and `<Tree.Item>` subcomponents.
+- Added initial `<Spinner>` component for indicating quick, indeterminate progress.
+- Added `<Description>` component to be used within a `<Field>`.
+- Added initial `<Chip>` component.
+- Added `symbol` prop to `<Kbd>` for displaying predefined symbols.
+- Added `focusable` prop to `<Tabs.TabPanel>` component.
+- Fixed a visual issue where light color-scheme was using dark shadows.
+
+## 5.0.0-alpha.1
+
+- Added `<Text>` component with a `variant` prop to support all text styles from Figma.
+- Added `Select` component built on top of the HTML `<select>` element. Exposed as `<Select.Root>` and `<Select.HtmlSelect>`.
+- Added `shortcuts` prop to `<DropdownMenu.Item>`.
+- Added JSDoc comments to all components for inline IDE hints.
+- Fixed `<Kbd>` component using the wrong font.
+- Fixed some visual issues.
+
+## 5.0.0-alpha.0
+
+Initial release 🥳

package/README.md

@@ -1,6 +1,14 @@
 # @itwin/itwinui-react
 
-A React component library for the next evolution of the iTwinUI design system.
+A React component library for the [next evolution of the iTwinUI design system](https://github.com/iTwin/design-system/discussions/481).
+
+## Installation
+
+Using your package manager of choice, install the latest **alpha** version of [`@itwin/itwinui-react`](https://www.npmjs.com/package/@itwin/itwinui-react?activeTab=versions).
+
+```console
+npm add @itwin/itwinui-react@alpha
+```
 
 ## Usage
 
@@ -20,7 +28,10 @@ export function App() {
 
 This will ensure iTwinUI's styles are loaded to either the document or the encompassing shadow root.
 
-Once that’s in place you can import and use components from `@itwin/itwinui-react/bricks`.
+Once that’s in place, you can import and use components from `@itwin/itwinui-react/bricks`.
+
+> [!NOTE]
+> If you are trying to use this package alongside the current stable version of iTwinUI, you will need to set up the [iTwinUI theme bridge](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-v5-theme-bridge).
 
 ## Contributing
 

package/dist/DEV/bricks/Checkbox.js

@@ -3,25 +3,18 @@ import cx from "classnames";
 import {
   Checkbox as AkCheckbox
 } from "@ariakit/react/checkbox";
-import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
+import { useFieldControlType } from "./Field.internal.js";
 const Checkbox = forwardRef(
   (props, forwardedRef) => {
-    const { id, ...rest } = props;
+    useFieldControlType("checkable");
     return /* @__PURE__ */ jsx(
-      FieldControl,
+      AkCheckbox,
       {
-        type: "checkable",
-        id,
-        render: /* @__PURE__ */ jsx(
-          AkCheckbox,
-          {
-            accessibleWhenDisabled: true,
-            ...rest,
-            className: cx("\u{1F95D}-checkbox", props.className),
-            ref: forwardedRef
-          }
-        )
+        accessibleWhenDisabled: true,
+        ...props,
+        className: cx("\u{1F95D}-checkbox", props.className),
+        ref: forwardedRef
       }
     );
   }

package/dist/DEV/bricks/Description.js

@@ -2,24 +2,17 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "./~utils.js";
 import cx from "classnames";
 import { Text } from "./Text.js";
-import { FieldDescription } from "./Field.js";
 const Description = forwardRef(
   (props, forwardedRef) => {
-    const { id, tone, ...rest } = props;
+    const { tone, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      FieldDescription,
+      Text,
       {
-        id,
-        render: /* @__PURE__ */ jsx(
-          Text,
-          {
-            ...rest,
-            variant: "caption-md",
-            "data-kiwi-tone": tone ?? "neutral",
-            className: cx("\u{1F95D}-description", props.className),
-            ref: forwardedRef
-          }
-        )
+        ...rest,
+        variant: "caption-md",
+        "data-kiwi-tone": tone ?? "neutral",
+        className: cx("\u{1F95D}-description", props.className),
+        ref: forwardedRef
       }
     );
   }

package/dist/DEV/bricks/DropdownMenu.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import cx from "classnames";
 import * as ListItem from "./~utils.ListItem.js";
 import { Button } from "./Button.js";
+import { Button as ButtonAk } from "@ariakit/react/button";
 import { Kbd } from "./Kbd.js";
 import { Checkmark, DisclosureArrow, Icon } from "./Icon.js";
 import {
@@ -19,7 +20,8 @@ import {
 } from "@ariakit/react/menu";
 import { useStoreState } from "@ariakit/react/store";
 import { predefinedSymbols } from "./Kbd.internal.js";
-function DropdownMenu(props) {
+import { usePopoverContext } from "@ariakit/react/popover";
+function DropdownMenuRoot(props) {
   const {
     children,
     placement,
@@ -34,18 +36,19 @@ function DropdownMenu(props) {
       defaultOpen: defaultOpenProp,
       open: openProp,
       setOpen: setOpenProp,
+      popover: usePopoverContext(),
       children
     }
   );
 }
-DEV: DropdownMenu.displayName = "DropdownMenu.Root";
+DEV: DropdownMenuRoot.displayName = "DropdownMenu.Root";
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
     const popover = usePopoverApi(useMenuContext());
     return /* @__PURE__ */ jsx(
       Menu,
       {
-        portal: popover.portal,
+        portal: true,
         unmountOnHide: true,
         ...props,
         gutter: 4,
@@ -86,13 +89,23 @@ const DropdownMenuItem = forwardRef(
       MenuItem,
       {
         accessibleWhenDisabled: true,
-        ...rest,
-        render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
-        className: cx("\u{1F95D}-dropdown-menu-item", props.className),
-        ref: forwardedRef,
+        render: /* @__PURE__ */ jsx(
+          ListItem.Root,
+          {
+            render: /* @__PURE__ */ jsx(
+              ButtonAk,
+              {
+                accessibleWhenDisabled: true,
+                ...rest,
+                className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+                ref: forwardedRef
+              }
+            )
+          }
+        ),
         children: [
           icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
-          /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
+          /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
           shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null
         ]
       }
@@ -111,6 +124,7 @@ const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     ListItem.Decoration,
     {
+      render: /* @__PURE__ */ jsx("span", {}),
       ...rest,
       className: cx("\u{1F95D}-dropdown-menu-item-shortcuts", props.className),
       ref: forwardedRef,
@@ -141,30 +155,54 @@ const DropdownMenuIcon = forwardRef(
           Icon,
           {
             href: typeof icon === "string" ? icon : void 0,
-            render: React.isValidElement(icon) ? icon : void 0
+            render: React.isValidElement(icon) ? icon : void 0,
+            ...rest,
+            ref: forwardedRef
           }
-        ),
-        ...rest,
-        ref: forwardedRef
+        )
       }
     );
   }
 );
 DEV: DropdownMenuIcon.displayName = "DropdownMenuIcon";
 const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
-  const { label, icon, ...rest } = props;
+  const {
+    label,
+    icon,
+    defaultChecked,
+    checked,
+    onChange,
+    name,
+    value = defaultChecked ? "on" : void 0,
+    // For defaultChecked to work
+    ...rest
+  } = props;
   return /* @__PURE__ */ jsxs(
     MenuItemCheckbox,
     {
       accessibleWhenDisabled: true,
-      value: props.defaultChecked ? "on" : void 0,
-      ...rest,
-      render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
-      className: cx("\u{1F95D}-dropdown-menu-item", props.className),
-      ref: forwardedRef,
+      defaultChecked,
+      checked,
+      name,
+      value,
+      onChange,
+      render: /* @__PURE__ */ jsx(
+        ListItem.Root,
+        {
+          render: /* @__PURE__ */ jsx(
+            ButtonAk,
+            {
+              accessibleWhenDisabled: true,
+              ...rest,
+              className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+              ref: forwardedRef
+            }
+          )
+        }
+      ),
       children: [
         icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
-        /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
+        /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
         /* @__PURE__ */ jsx(
           ListItem.Decoration,
           {
@@ -181,5 +219,5 @@ export {
   DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
-  DropdownMenu as Root
+  DropdownMenuRoot as Root
 };

package/dist/DEV/bricks/Field.internal.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  useCollectionStore,
+  Collection
+} from "@ariakit/react/collection";
+import { useStoreState } from "@ariakit/react/store";
+function FieldCollection(props) {
+  const fieldElementCollection = useCollectionStore({
+    defaultItems: []
+  });
+  const renderedItems = useStoreState(fieldElementCollection, "renderedItems");
+  const [controlType, controlIndex] = React.useMemo(() => {
+    const controlIndex2 = renderedItems.findIndex(
+      (item) => item.elementType === "control"
+    );
+    return [renderedItems[controlIndex2]?.controlType, controlIndex2];
+  }, [renderedItems]);
+  const labelPlacement = React.useMemo(() => {
+    const labelIndex = renderedItems.findIndex(
+      (item) => item.elementType === "label"
+    );
+    if (controlIndex === -1 || labelIndex === -1) return;
+    return labelIndex < controlIndex ? "before" : "after";
+  }, [renderedItems, controlIndex]);
+  return /* @__PURE__ */ jsx(
+    Collection,
+    {
+      ...props,
+      store: fieldElementCollection,
+      "data-kiwi-label-placement": labelPlacement,
+      "data-kiwi-control-type": controlType
+    }
+  );
+}
+const FieldControlTypeContext = React.createContext(void 0);
+function useFieldControlType(controlType) {
+  const setControlType = React.useContext(FieldControlTypeContext);
+  React.useEffect(() => {
+    setControlType?.(controlType);
+  }, [controlType, setControlType]);
+}
+export {
+  FieldCollection,
+  FieldControlTypeContext,
+  useFieldControlType
+};

package/dist/DEV/bricks/Field.js

@@ -3,14 +3,18 @@ import * as React from "react";
 import cx from "classnames";
 import { Role } from "@ariakit/react/role";
 import {
-  useCollectionStore,
-  Collection,
   useCollectionContext,
   CollectionItem
 } from "@ariakit/react/collection";
 import { useStoreState } from "@ariakit/react/store";
 import { forwardRef } from "./~utils.js";
-const Field = forwardRef((props, forwardedRef) => {
+import {
+  FieldCollection,
+  FieldControlTypeContext
+} from "./Field.internal.js";
+import { Label } from "./Label.js";
+import { Description } from "./Description.js";
+const FieldRoot = forwardRef((props, forwardedRef) => {
   const { layout, ...rest } = props;
   return /* @__PURE__ */ jsx(
     FieldCollection,
@@ -27,76 +31,42 @@ const Field = forwardRef((props, forwardedRef) => {
     }
   );
 });
-DEV: Field.displayName = "Field";
-function FieldCollection(props) {
-  const fieldElementCollection = useCollectionStore({
-    defaultItems: []
-  });
-  const renderedItems = useStoreState(fieldElementCollection, "renderedItems");
-  const [controlType, controlIndex] = React.useMemo(() => {
-    const controlIndex2 = renderedItems.findIndex(
-      (item) => item.elementType === "control"
+DEV: FieldRoot.displayName = "Field";
+const FieldLabel = forwardRef(
+  (props, forwardedRef) => {
+    const store = useCollectionContext();
+    const renderedItems = useStoreState(store, "renderedItems");
+    const fieldId = React.useMemo(
+      () => renderedItems?.find(
+        (item) => item.elementType === "control"
+      )?.id,
+      [renderedItems]
     );
-    return [renderedItems[controlIndex2]?.controlType, controlIndex2];
-  }, [renderedItems]);
-  const labelPlacement = React.useMemo(() => {
-    const labelIndex = renderedItems.findIndex(
-      (item) => item.elementType === "label"
+    const getData = React.useCallback(
+      (data) => ({
+        ...data,
+        elementType: "label"
+      }),
+      []
     );
-    if (controlIndex === -1 || labelIndex === -1) return;
-    return labelIndex < controlIndex ? "before" : "after";
-  }, [renderedItems, controlIndex]);
-  return /* @__PURE__ */ jsx(
-    Collection,
-    {
-      ...props,
-      store: fieldElementCollection,
-      "data-kiwi-label-placement": labelPlacement,
-      "data-kiwi-control-type": controlType
-    }
-  );
-}
-function FieldControl(props) {
-  const store = useCollectionContext();
+    return /* @__PURE__ */ jsx(
+      CollectionItem,
+      {
+        getItem: getData,
+        render: /* @__PURE__ */ jsx(Label, { ...props, htmlFor: fieldId }),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: FieldLabel.displayName = "Field.Label";
+const FieldDescription = forwardRef((props, forwardedRef) => {
   const generatedId = React.useId();
-  const { id = store ? generatedId : void 0, type, ...rest } = props;
-  const renderedItems = useStoreState(store, "renderedItems");
-  const describedBy = React.useMemo(() => {
-    const idRefList = renderedItems?.filter(
-      (item) => item.elementType === "description"
-    )?.map((item) => item.id).join(" ");
-    return idRefList || void 0;
-  }, [renderedItems]);
-  const getData = React.useCallback(
-    (data) => ({
-      ...data,
-      elementType: "control",
-      controlType: type
-    }),
-    [type]
-  );
-  return /* @__PURE__ */ jsx(
-    CollectionItem,
-    {
-      id,
-      getItem: getData,
-      render: /* @__PURE__ */ jsx(Role, { ...rest, "aria-describedby": describedBy })
-    }
-  );
-}
-function FieldLabel(props) {
-  const store = useCollectionContext();
-  const renderedItems = useStoreState(store, "renderedItems");
-  const fieldId = React.useMemo(
-    () => renderedItems?.find(
-      (item) => item.elementType === "control"
-    )?.id,
-    [renderedItems]
-  );
+  const { id = generatedId, ...rest } = props;
   const getData = React.useCallback(
     (data) => ({
       ...data,
-      elementType: "label"
+      elementType: "description"
     }),
     []
   );
@@ -104,25 +74,86 @@ function FieldLabel(props) {
     CollectionItem,
     {
       getItem: getData,
-      render: /* @__PURE__ */ jsx(Role.label, { ...props, htmlFor: fieldId })
+      id,
+      render: /* @__PURE__ */ jsx(Description, { ...rest }),
+      ref: forwardedRef
     }
   );
-}
-function FieldDescription(props) {
-  const generatedId = React.useId();
-  const { id = generatedId, ...rest } = props;
-  const getData = React.useCallback(
-    (data) => ({
-      ...data,
-      elementType: "description"
-    }),
-    []
-  );
-  return /* @__PURE__ */ jsx(CollectionItem, { ...rest, id, getItem: getData });
-}
+});
+DEV: FieldDescription.displayName = "Field.Description";
+const FieldControl = forwardRef(
+  (props, forwardedRef) => {
+    const [controlType, setControlType] = React.useState();
+    const store = useCollectionContext();
+    const generatedId = React.useId();
+    const { id = store ? generatedId : void 0, ...rest } = props;
+    const renderedItems = useStoreState(store, "renderedItems");
+    const describedBy = React.useMemo(() => {
+      const idRefList = renderedItems?.filter(
+        (item) => item.elementType === "description" || item.elementType === "error"
+      )?.map((item) => item.id).join(" ");
+      return idRefList || void 0;
+    }, [renderedItems]);
+    const getData = React.useCallback(
+      (data) => ({
+        ...data,
+        elementType: "control",
+        controlType
+      }),
+      [controlType]
+    );
+    const invalid = React.useMemo(
+      () => renderedItems?.some(
+        (item) => item.elementType === "error"
+      ),
+      [renderedItems]
+    );
+    return /* @__PURE__ */ jsx(FieldControlTypeContext.Provider, { value: setControlType, children: /* @__PURE__ */ jsx(
+      CollectionItem,
+      {
+        id,
+        getItem: getData,
+        render: /* @__PURE__ */ jsx(
+          Role,
+          {
+            ...rest,
+            "aria-invalid": invalid ? "true" : void 0,
+            "aria-describedby": describedBy
+          }
+        ),
+        ref: forwardedRef
+      }
+    ) });
+  }
+);
+DEV: FieldControl.displayName = "Field.Control";
+const FieldErrorMessage = forwardRef(
+  (props, forwardedRef) => {
+    const generatedId = React.useId();
+    const { id = generatedId, ...rest } = props;
+    const getData = React.useCallback(
+      (data) => ({
+        ...data,
+        elementType: "error"
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsx(
+      CollectionItem,
+      {
+        id,
+        getItem: getData,
+        render: /* @__PURE__ */ jsx(Description, { ...rest, tone: "critical" }),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: FieldErrorMessage.displayName = "Field.ErrorMessage";
 export {
-  Field,
-  FieldControl,
-  FieldDescription,
-  FieldLabel
+  FieldControl as Control,
+  FieldDescription as Description,
+  FieldErrorMessage as ErrorMessage,
+  FieldLabel as Label,
+  FieldRoot as Root
 };