@itwin/itwinui-react 5.0.0-alpha.11 → 5.0.0-alpha.13

package/dist/bricks/DropdownMenu.d.ts

@@ -24,8 +24,8 @@ interface DropdownMenuProps extends Pick<MenuProviderProps, "children" | "placem
  *
  * **Note**: `DropdownMenu` should not be used for navigation; it is only intended for actions.
  */
-declare function DropdownMenu(props: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
-declare namespace DropdownMenu {
+declare function DropdownMenuRoot(props: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DropdownMenuRoot {
     var displayName: string;
 }
 interface DropdownMenuContentProps extends FocusableProps {
@@ -56,9 +56,11 @@ interface DropdownMenuButtonProps extends FocusableProps<"button"> {
  * ```
  */
 declare const DropdownMenuButton: React.ForwardRefExoticComponent<DropdownMenuButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-interface DropdownMenuItemProps extends Omit<FocusableProps, "children">, Partial<Pick<DropdownMenuItemShortcutsProps, "shortcuts"> & Pick<DropdownMenuIconProps, "icon">> {
+interface DropdownMenuItemProps extends Omit<FocusableProps<"button">, "children">, Partial<Pick<DropdownMenuItemShortcutsProps, "shortcuts"> & Pick<DropdownMenuIconProps, "icon">> {
     /** The primary text label for the menu-item. */
     label: React.ReactNode;
+    /** Dot shown on the right end of the menu-item. Value will be used as accessible description. */
+    unstable_dot?: string;
 }
 /**
  * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
@@ -69,8 +71,8 @@ interface DropdownMenuItemProps extends Omit<FocusableProps, "children">, Partia
  * <DropdownMenu.Item label="Edit" />
  * ```
  */
-declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface DropdownMenuItemShortcutsProps extends BaseProps {
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+interface DropdownMenuItemShortcutsProps extends Omit<BaseProps<"span">, "children"> {
     /**
      * A string defining the keyboard shortcut(s) associated with the menu item.
      *
@@ -87,7 +89,7 @@ interface DropdownMenuItemShortcutsProps extends BaseProps {
      */
     shortcuts: AnyString | `${PredefinedSymbol}+${AnyString}`;
 }
-interface DropdownMenuIconProps extends BaseProps {
+interface DropdownMenuIconProps extends BaseProps<"svg"> {
     /**
      * An optional icon displayed before the menu-item label.
      *
@@ -96,7 +98,7 @@ interface DropdownMenuIconProps extends BaseProps {
      */
     icon?: string | React.JSX.Element;
 }
-interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps, "onChange" | "children">, Pick<MenuItemCheckboxProps, "checked" | "onChange" | "name" | "value">, Pick<DropdownMenuItemProps, "label" | "icon"> {
+interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps<"button">, "onChange" | "children" | "name">, Pick<MenuItemCheckboxProps, "defaultChecked" | "checked" | "onChange" | "name" | "value">, Pick<DropdownMenuItemProps, "label" | "icon"> {
 }
 /**
  * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
@@ -107,5 +109,5 @@ interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps, "onChange"
  * <DropdownMenu.CheckboxItem name="edit" label="Edit" />
  * ```
  */
-declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-export { DropdownMenu as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, DropdownMenuCheckboxItem as CheckboxItem, };
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { DropdownMenuRoot as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, DropdownMenuCheckboxItem as CheckboxItem, };

package/dist/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,9 @@ 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";
+import { Dot } from "./~utils.Dot.js";
+function DropdownMenuRoot(props) {
   const {
     children,
     placement,
@@ -34,6 +37,7 @@ function DropdownMenu(props) {
       defaultOpen: defaultOpenProp,
       open: openProp,
       setOpen: setOpenProp,
+      popover: usePopoverContext(),
       children
     }
   );
@@ -78,19 +82,37 @@ const DropdownMenuButton = forwardRef(
 );
 const DropdownMenuItem = forwardRef(
   (props, forwardedRef) => {
-    const { label, shortcuts, icon, ...rest } = props;
+    const { label, shortcuts, icon, unstable_dot, ...rest } = props;
+    const dotId = React.useId();
     return /* @__PURE__ */ jsxs(
       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,
+                "aria-describedby": dotId,
+                ...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 }),
-          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null
+          /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
+          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null,
+          unstable_dot ? /* @__PURE__ */ jsx(
+            ListItem.Decoration,
+            {
+              render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-dropdown-menu-item-dot", children: unstable_dot })
+            }
+          ) : null
         ]
       }
     );
@@ -107,6 +129,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,
@@ -136,29 +159,53 @@ 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
+        )
       }
     );
   }
 );
 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,
           {
@@ -174,5 +221,5 @@ export {
   DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
-  DropdownMenu as Root
+  DropdownMenuRoot as Root
 };

package/dist/bricks/ErrorRegion.d.ts

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface ErrorRegionRootProps extends Omit<BaseProps, "children"> {
+    /**
+     * Label for the error header, usually indicating the number of errors displayed.
+     * By default this is used as a name of the region navigational landmark, however an explicit `aria-label` or `aria-labelledby` is strongly suggested.
+     *
+     * Use `undefined` if you don't want to display errors rather than conditionally rendering the component.
+     */
+    label?: React.ReactNode;
+    /**
+     * A list of error items where each item describes an individual error. Must be a list of `ErrorRegion.Item` components.
+     */
+    items?: React.ReactNode;
+    /**
+     * The controlled expanded state of the error.
+     */
+    expanded?: boolean;
+    /**
+     * Callback fired when the error is expanded.
+     *
+     * Should be used with the `expanded` prop.
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+}
+/**
+ * A collapsible region that displays a list of error messages, which might originate from another
+ * component, such as `Tree`.
+ *
+ * This component is rendered as a [region landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/region.html)
+ * and should be labelled either using `label` or `aria-label`/`aria-labelledby`. Changes to the `label` prop will be
+ * announced communicated using a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions).
+ *
+ * Example:
+ * ```tsx
+ * <ErrorRegion.Root
+ *   label="3 issues found"
+ *   items={
+ *     <>
+ *       <ErrorRegion.Item message="…" />
+ *       <ErrorRegion.Item message="…" />
+ *       <ErrorRegion.Item message="…" />
+ *     </>
+ *   }
+ * />
+ */
+declare const ErrorRegionRoot: React.ForwardRefExoticComponent<ErrorRegionRootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface ErrorRegionItemProps extends Omit<BaseProps, "children"> {
+    /**
+     * The error message. Consumers might consider using `Anchor` component to link to the associated element in the UI.
+     */
+    message?: React.ReactNode;
+    /**
+     * The `id` of the message node which can be used to semantically associate the error item with the related UI item i.e. `Tree.Item`.
+     */
+    messageId?: string;
+    /**
+     * The actions available for this item. Must be a list of anchors, each rendered as a button using `<Anchor render={<button />} />`.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Callback fired when the error item is dismissed.
+     */
+    onDismiss?: () => void;
+}
+/**
+ * An individual error item within the `ErrorRegion` component. It displays an error message and optional actions.
+ *
+ * The `messageId` prop can be used to semantically associate the error item with the related UI item, such as a `Tree.Item`.
+ *
+ * Example:
+ * ```tsx
+ * <ErrorRegion.Item
+ *   message={<>Something went wrong with <Anchor href="item-10001">Item 10001</Anchor>.</>}
+ *   messageId="item-10001-error"
+ *   actions={<Button>Retry</Button>}
+ *   onDismiss={() => {}}
+ * />
+ *
+ * <Tree.Item
+ *   id="item-10001"
+ *   label="Item 10001"
+ *   error="item-10001-error"
+ * />
+ * ```
+ */
+declare const ErrorRegionItem: React.ForwardRefExoticComponent<ErrorRegionItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { ErrorRegionRoot as Root, ErrorRegionItem as Item };

package/dist/bricks/ErrorRegion.js

@@ -0,0 +1,135 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import {
+  DialogProvider,
+  DialogDisclosure,
+  Dialog
+} from "@ariakit/react/dialog";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+import { ChevronDown, Dismiss, StatusWarning } from "./Icon.js";
+import { Text } from "./Text.js";
+import { IconButton } from "./IconButton.js";
+import { Button } from "./Button.js";
+import { useControlledState } from "./~hooks.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+const ErrorRegionRoot = forwardRef(
+  (props, forwardedRef) => {
+    const { label, items, expanded, onExpandedChange, ...rest } = props;
+    const labelId = React.useId();
+    const sectionLabelledBy = props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelId);
+    const [open, setOpen] = useControlledState(
+      false,
+      expanded,
+      onExpandedChange
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", "aria-atomic": true, children: label }),
+      /* @__PURE__ */ jsx(DialogProvider, { open, setOpen, children: /* @__PURE__ */ jsx(
+        Role.section,
+        {
+          ...rest,
+          "aria-labelledby": sectionLabelledBy,
+          className: cx("\u{1F95D}-error-region", props.className),
+          "data-kiwi-visible": !!label,
+          "data-kiwi-expanded": open,
+          ref: forwardedRef,
+          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}-error-region-container", children: [
+            /* @__PURE__ */ jsxs(
+              DialogDisclosure,
+              {
+                className: "\u{1F95D}-error-region-header",
+                render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
+                children: [
+                  /* @__PURE__ */ jsx(StatusWarning, { className: "\u{1F95D}-error-region-icon" }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      id: labelId,
+                      className: "\u{1F95D}-error-region-label",
+                      variant: "body-sm",
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      inert: true,
+                      render: /* @__PURE__ */ jsx("span", {}),
+                      role: void 0,
+                      label: "",
+                      icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+                      variant: "ghost"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Dialog,
+              {
+                className: "\u{1F95D}-error-region-dialog",
+                portal: false,
+                modal: false,
+                autoFocusOnShow: false,
+                "aria-labelledby": labelId,
+                children: /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-items", role: "list", children: items })
+              }
+            )
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
+const ErrorRegionItem = forwardRef(
+  (props, forwardedRef) => {
+    const generatedId = React.useId();
+    const {
+      message,
+      messageId = `${generatedId}-message`,
+      actions,
+      onDismiss,
+      ...rest
+    } = props;
+    const dismissButtonId = `${generatedId}-dismiss`;
+    return /* @__PURE__ */ jsxs(
+      Role.div,
+      {
+        ...rest,
+        role: "listitem",
+        className: cx("\u{1F95D}-error-region-item", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              id: messageId,
+              variant: "body-sm",
+              className: "\u{1F95D}-error-region-item-message",
+              children: message
+            }
+          ),
+          onDismiss && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              id: dismissButtonId,
+              className: "\u{1F95D}-error-region-item-dismiss",
+              variant: "ghost",
+              label: "Dismiss",
+              "aria-labelledby": `${dismissButtonId} ${messageId}`,
+              icon: /* @__PURE__ */ jsx(Dismiss, {}),
+              onClick: onDismiss
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-item-actions", children: actions })
+        ]
+      }
+    );
+  }
+);
+export {
+  ErrorRegionItem as Item,
+  ErrorRegionRoot as Root
+};

package/dist/bricks/Field.d.ts

@@ -1,53 +1,95 @@
 import * as React from "react";
-import { useCollectionStore, type CollectionItemProps } from "@ariakit/react/collection";
+import { type CollectionItemProps } from "@ariakit/react/collection";
 import { type BaseProps } from "./~utils.js";
-interface FieldProps extends BaseProps {
+interface FieldRootProps extends BaseProps {
     /**
      * Allows overriding the default block layout for text controls.
      */
     layout?: "inline";
 }
 /**
- * A container for form controls. It manages ID associations provides a consistent layout and spacing.
+ * A container for form controls. It manages ID associations, and provides a
+ * consistent layout and spacing.
  *
  * Example:
  * ```tsx
- * <Field>
- *   <Label>Label</Label>
- *   <TextBox.Input />
- * </Field>
+ * <Field.Root>
+ *   <Field.Label>Label</Field.Label>
+ *   <Field.Control render={<TextBox.Input />} />
+ * </Field.Root>
  * ```
  *
- * Supports a `layout` prop, which can be set to `inline` to align the label and control horizontally.
+ * Supports a `layout` prop, which can be set to `inline` to align the label and
+ * control horizontally.
  *
- * Should contain a `Label` component paired with a form control. Supported form controls include:
+ * Should contain a `Field.Label` component paired with a form control.
+ *
+ * Supported form controls include:
  * - `TextBox.Input`
  * - `TextBox.Textarea`
  * - `Checkbox`
  * - `Radio`
  * - `Switch`
  */
-export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof useCollectionStore>["item"]>>;
-interface FieldCollectionStoreItem extends CollectionStoreItem {
-    /** The type of field element being tracked */
-    elementType: "label" | "control" | "description";
-    /** If a control, the type of control. */
-    controlType?: "textlike" | "checkable";
-}
-interface FieldCollectionItemControlProps extends Pick<CollectionItemProps, "render" | "id"> {
-    type: FieldCollectionStoreItem["controlType"];
-}
+declare const FieldRoot: React.ForwardRefExoticComponent<FieldRootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 /**
- * An element tracked as a control in the `Field`’s collection.
+ * A label for the field’s control element. This is automatically associated
+ * with the control’s `id`.
  */
-export declare function FieldControl(props: FieldCollectionItemControlProps): import("react/jsx-runtime").JSX.Element;
+declare const FieldLabel: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 /**
- * An element tracked as a label in the `Field`’s collection.
+ * A description for the field’s control element. This is automatically
+ * associated with the control.
+ *
+ * Should not include content without an adequate text alternative (e.g.
+ * interactive elements).
  */
-export declare function FieldLabel(props: Pick<CollectionItemProps, "render">): import("react/jsx-runtime").JSX.Element;
+declare const FieldDescription: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface FieldCollectionItemControlProps extends Pick<CollectionItemProps, "render" | "id"> {
+}
 /**
- * An element tracked as a description in the `Field`’s collection.
+ * The control component for the field.
+ *
+ * Use the `render` prop to render the control component.
+ *
+ * ```tsx
+ * <Field.Control render={<TextBox.Input />} />
+ * ```
+ *
+ * If the rendered component uses a compositional API, then use a function
+ * within `render` to apply the `controlProps` to the correct sub-component:
+ *
+ * ```tsx
+ * <Field.Control
+ *   render={(controlProps) => (
+ *     <TextBox.Root>
+ *       <TextBox.Icon href={placeholder} />
+ *       <TextBox.Input {...controlProps} />
+ *     </TextBox.Root>
+ *   )}
+ * />
+ * ```
+ *
+ * If you need a custom `id` set for the control, set it on this component
+ * instead of the control component within `render`.
+ *
+ * ```tsx
+ * <Field.Control id="custom" render={<TextBox.Input />} />
+ * ```
+ */
+declare const FieldControl: React.ForwardRefExoticComponent<FieldCollectionItemControlProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+/**
+ * An associated error message for a field. When used within `<Field.Root>`, the
+ * associated form control will be rendered with `aria-invalid="true"`.
+ *
+ * Example:
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Label</Field.Label>
+ *   <Field.Control render={<TextBox.Input />} />
+ *   <Field.ErrorMessage>Something is wrong!</Field.ErrorMessage>
+ * </Field.Root>
+ * ```
  */
-export declare function FieldDescription(props: Pick<CollectionItemProps, "render" | "id">): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const FieldErrorMessage: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { FieldRoot as Root, FieldControl as Control, FieldLabel as Label, FieldDescription as Description, FieldErrorMessage as ErrorMessage, };

package/dist/bricks/Field.internal.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { useCollectionStore, type CollectionProps } from "@ariakit/react/collection";
+/**
+ * Ariakit’s unexported `CollectionStoreItem` type inferred.
+ * @private
+ */
+export type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof useCollectionStore>["item"]>>;
+/**
+ * An extension of `CollectionStoreItem` to track element and control types.
+ * @private
+ */
+export interface FieldCollectionStoreItem extends CollectionStoreItem {
+    /** The type of field element being tracked */
+    elementType: "label" | "control" | "description" | "error";
+    /** If a control, the type of control. */
+    controlType?: "textlike" | "checkable";
+}
+/**
+ * A collection that tracks labels, controls, and descriptions which provides
+ * information about IDs, placement of labels, and control types.
+ * @private
+ */
+export declare function FieldCollection(props: Pick<CollectionProps, "render">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Control type context for the field.
+ * @private
+ */
+export declare const FieldControlTypeContext: React.Context<React.Dispatch<React.SetStateAction<"textlike" | "checkable" | undefined>> | undefined>;
+/**
+ * Sets the control type for the field. Necessary for layout.
+ * @private
+ */
+export declare function useFieldControlType(controlType: NonNullable<FieldCollectionStoreItem["controlType"]>): void;

package/dist/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
+};