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

package/dist/bricks/Table.d.ts

@@ -1,44 +1,89 @@
 import * as React from "react";
 import { type BaseProps } from "./~utils.js";
-interface TableProps extends BaseProps {
+interface HtmlTableProps extends BaseProps {
 }
 /**
  * A table is a grid of rows and columns that displays data in a structured format.
  *
- * `Table.Root` is the root component for a table.
- * `Table.Header`, `Table.Body`, and `Table.Cell` can be nested inside a `Table.Root` to create a table structure.
+ * `Table.HtmlTable` uses native HTML table elements for the table root *and its descendants*.
+ *
+ * E.g. `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, and `<td>`.
+ *
+ * Related: `Table.CustomTable`
  *
  * Example:
  * ```tsx
- * <Table.Root>
- *  <Table.Caption>Table Caption</Table.Caption>
- * 	<Table.Header>
- * 		<Table.Row>
- * 			<Table.Cell>Header 1</Table.Cell>
- * 			<Table.Cell>Header 2</Table.Cell>
- * 		</Table.Row>
- * 	</Table.Header>
- *
- * 	<Table.Body>
- * 		<Table.Row>
- * 			<Table.Cell>Cell 1.1</Table.Cell>
- * 			<Table.Cell>Cell 1.2</Table.Cell>
- * 		</Table.Row>
- * 		<Table.Row>
- * 			<Table.Cell>Cell 2.1</Table.Cell>
- * 			<Table.Cell>Cell 2.2</Table.Cell>
- * 		</Table.Row>
- * 	</Table.Body>
- * </Table.Root>
+ * <Table.HtmlTable> // <table>
+ *   <Table.Caption>Table Caption</Table.Caption> // <caption>
+ *
+ *   <Table.Header> // <thead>
+ * 	   <Table.Row> // <tr>
+ * 	     <Table.Cell>Header 1</Table.Cell> // <th>
+ * 	 	   <Table.Cell>Header 2</Table.Cell> // <th>
+ * 	   </Table.Row>
+ *   </Table.Header>
+ *
+ *   <Table.Body> // <tbody>
+ * 	   <Table.Row> // <tr>
+ * 		   <Table.Cell>Cell 1.1</Table.Cell> // <td>
+ * 		   <Table.Cell>Cell 1.2</Table.Cell> // <td>
+ * 	   </Table.Row>
+ * 	   <Table.Row> // <tr>
+ * 		   <Table.Cell>Cell 2.1</Table.Cell> // <td>
+ * 		   <Table.Cell>Cell 2.2</Table.Cell> // <td>
+ * 	   </Table.Row>
+ *   </Table.Body>
+ * </Table.HtmlTable>
+ * ```
+ */
+declare const HtmlTable: React.ForwardRefExoticComponent<HtmlTableProps & React.RefAttributes<HTMLElement | HTMLTableElement>>;
+interface CustomTableProps extends BaseProps {
+}
+/**
+ * A table is a grid of rows and columns that displays data in a structured format.
+ *
+ * `Table.CustomTable` implements the [WAI-ARIA table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/) using
+ * divs + appropriate roles for the table root *and its descendants*.
+ *
+ * E.g. `<div role="table">`, `<div role="row">`, `<div role="columnheader">`, and `<div role="cell">`.
+ *
+ * Related: `Table.HtmlTable`
+ *
+ * Example:
+ * ```tsx
+ * <Table.CustomTable> // <div role="table">
+ *   <Table.Caption>Table Caption</Table.Caption> // <div role="caption">
+ *
+ *   <Table.Header> // <div role="rowgroup">
+ * 	   <Table.Row> // <div role="row">
+ * 	     <Table.Cell>Header 1</Table.Cell> // <div role="columnheader">
+ * 	 	   <Table.Cell>Header 2</Table.Cell> // <div role="columnheader">
+ * 	   </Table.Row>
+ *   </Table.Header>
+ *
+ *   <Table.Body>
+ * 	   <Table.Row> // <div role="row">
+ * 		   <Table.Cell>Cell 1.1</Table.Cell> // <div role="cell">
+ * 		   <Table.Cell>Cell 1.2</Table.Cell> // <div role="cell">
+ * 	   </Table.Row>
+ * 	   <Table.Row> // <div role="row">
+ * 		   <Table.Cell>Cell 2.1</Table.Cell> // <div role="cell">
+ * 		   <Table.Cell>Cell 2.2</Table.Cell> // <div role="cell">
+ * 	   </Table.Row>
+ *   </Table.Body>
+ * </Table.CustomTable>
  * ```
  */
-declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TableHeaderProps extends BaseProps {
+declare const CustomTable: React.ForwardRefExoticComponent<CustomTableProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableHeaderProps extends BaseProps<"div"> {
 }
 /**
  * `Table.Header` is a column component of cells that labels the columns of a table.
  * `Table.Row` and `Table.Cell` can be nested inside a `Table.Header` to create a header row.
  *
+ * If within a `Table.HtmlTable`: it will render a `<thead>` element.
+ * If within a `Table.CustomTable`: it will render a `<div role="rowgroup">` element.
+ *
  * Example:
  * ```tsx
  *	<Table.Header>
@@ -50,13 +95,14 @@ interface TableHeaderProps extends BaseProps {
  * ```
  */
 declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TableBodyProps extends BaseProps {
+interface TableBodyProps extends BaseProps<"div"> {
 }
 /**
  * `Table.Body` is a component that contains the rows of table data.
  * Multiple `Table.Row`s and `Table.Cell`s can be nested inside a `Table.Body` to create a table body.
  *
- *  This component intentionally does not set `role=rowgroup` because it is not properly supported.
+ * If within a `Table.HtmlTable`: it will render a `<tbody>` element.
+ * If within a `Table.CustomTable`: it will render a `<div>` element.
  *
  * Example:
  * ```tsx
@@ -73,11 +119,14 @@ interface TableBodyProps extends BaseProps {
  * ```
  */
 declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TableRowProps extends BaseProps {
+interface TableRowProps extends BaseProps<"div"> {
 }
 /**
  * `Table.Row` is a component that contains the cells of a table row.
  *
+ * If within a `Table.HtmlTable`: it will render a `<tr>` element.
+ * If within a `Table.CustomTable`: it will render a `<div role="row">` element.
+ *
  * Example:
  * ```tsx
  *	<Table.Row>
@@ -87,29 +136,37 @@ interface TableRowProps extends BaseProps {
  * ```
  */
 declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TableCaptionProps extends BaseProps<"caption"> {
+interface TableCaptionProps extends BaseProps<"div"> {
 }
 /**
  * `Table.Caption` is a component that contains the caption of a table.
  *
+ * If within a `Table.HtmlTable`: it will render a `<caption>` element.
+ * If within a `Table.CustomTable`: it will render a `<div role="caption">` element.
+ *
  * Example:
  * ```tsx
- * <Table.Root>
- * 	<Table.Caption>Table Caption</Table.Caption>
- * 	…
- * </Table.Root>
+ * <Table.CustomTable> // Or <Table.HtmlTable>
+ * 	 <Table.Caption>Table Caption</Table.Caption>
+ * 	 …
+ * </Table.CustomTable> // Or </Table.HtmlTable>
  * ```
  */
-declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLElement>>;
-interface TableCellProps extends BaseProps<"span"> {
+declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableCellProps extends BaseProps<"div"> {
 }
 /**
  * `Table.Cell` is a component that contains the data of a table cell.
  *
+ * - If within a `Table.HtmlTable`: it will render a `<th>` element if also within a `Table.Header`, or a `<td>` element
+ * if also within a `Table.Body`.
+ * - If within a `Table.CustomTable`: it will render a `<div role="columnheader">` element if also within a
+ * `Table.Header`, or a `<div role="cell">` element if also within a `Table.Body`.
+ *
  * Example:
  * ```tsx
  *	<Table.Cell>Cell 1.1</Table.Cell>
  * ```
  */
-declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
-export { Table as Root, TableHeader as Header, TableBody as Body, TableRow as Row, TableCaption as Caption, TableCell as Cell, };
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { HtmlTable, CustomTable, TableHeader as Header, TableBody as Body, TableRow as Row, TableCaption as Caption, TableCell as Cell, };

package/dist/bricks/Table.js

@@ -3,98 +3,130 @@ import { Role } from "@ariakit/react/role";
 import * as React from "react";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
-import { useMergedRefs } from "./~hooks.js";
-const TableContext = React.createContext({
-  setCaptionId: () => {
-  }
-});
-const Table = forwardRef((props, forwardedRef) => {
-  const [captionId, setCaptionId] = React.useState();
-  const tableContext = React.useMemo(() => ({ setCaptionId }), []);
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContext, children: /* @__PURE__ */ jsx(
+import { useMergedRefs, useSafeContext } from "./~hooks.js";
+const TableContext = React.createContext(void 0);
+const TableHeaderContext = React.createContext(false);
+const HtmlTable = forwardRef((props, forwardedRef) => {
+  const tableContextValue = React.useMemo(
+    () => ({ mode: "html" }),
+    []
+  );
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
     Role,
     {
+      render: /* @__PURE__ */ jsx("table", {}),
       ...props,
-      className: cx("\u{1F95D}-table", props.className),
       ref: forwardedRef,
-      role: "table",
-      "aria-labelledby": captionId,
-      children: props.children
+      className: cx("\u{1F95D}-table", props.className)
     }
   ) });
 });
-const TableHeaderContext = React.createContext(false);
+const CustomTable = forwardRef(
+  (props, forwardedRef) => {
+    const [captionId, setCaptionId] = React.useState();
+    const tableContextValue = React.useMemo(
+      () => ({ captionId, setCaptionId, mode: "aria" }),
+      [captionId]
+    );
+    return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        role: "table",
+        "aria-labelledby": captionId,
+        ...props,
+        ref: forwardedRef,
+        className: cx("\u{1F95D}-table", props.className)
+      }
+    ) });
+  }
+);
 const TableHeader = forwardRef(
   (props, forwardedRef) => {
+    const { mode } = useSafeContext(TableContext);
+    const render = mode === "html" ? /* @__PURE__ */ jsx("thead", {}) : void 0;
+    const role = mode === "aria" ? "rowgroup" : void 0;
     return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
       Role.div,
       {
+        render,
+        role,
         ...props,
-        className: cx("\u{1F95D}-table-header", props.className),
         ref: forwardedRef,
-        role: "rowgroup",
-        children: props.children
+        className: cx("\u{1F95D}-table-header", props.className)
       }
     ) });
   }
 );
 const TableBody = forwardRef((props, forwardedRef) => {
+  const { mode } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tbody", {}) : void 0;
   return /* @__PURE__ */ jsx(
     Role.div,
     {
+      render,
+      role: void 0,
       ...props,
-      className: cx("\u{1F95D}-table-body", props.className),
       ref: forwardedRef,
-      children: props.children
+      className: cx("\u{1F95D}-table-body", props.className)
     }
   );
 });
 const TableRow = forwardRef((props, forwardedRef) => {
-  const { children, ...rest } = props;
+  const { mode } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tr", {}) : void 0;
+  const role = mode === "aria" ? "row" : void 0;
   return /* @__PURE__ */ jsx(
     Role.div,
     {
-      ...rest,
-      className: cx("\u{1F95D}-table-row", props.className),
+      render,
+      role,
+      ...props,
       ref: forwardedRef,
-      role: "row",
-      children
+      className: cx("\u{1F95D}-table-row", props.className)
     }
   );
 });
 const TableCaption = forwardRef(
   (props, forwardedRef) => {
     const fallbackId = React.useId();
-    const { id = fallbackId, children, ...rest } = props;
-    const { setCaptionId } = React.useContext(TableContext);
+    const { id = fallbackId, ...rest } = props;
+    const { mode, setCaptionId } = useSafeContext(TableContext);
+    const render = mode === "html" ? /* @__PURE__ */ jsx("caption", {}) : void 0;
     const captionIdRef = React.useCallback(
       (element) => {
-        setCaptionId(element ? id : void 0);
+        setCaptionId?.(element ? id : void 0);
       },
       [id, setCaptionId]
     );
     return /* @__PURE__ */ jsx(
-      Role,
+      Role.div,
       {
+        render,
         ...rest,
         id,
-        className: cx("\u{1F95D}-table-caption", props.className),
         ref: useMergedRefs(forwardedRef, captionIdRef),
-        children
+        className: cx("\u{1F95D}-table-caption", props.className)
       }
     );
   }
 );
 const TableCell = forwardRef((props, forwardedRef) => {
-  const isWithinTableHeader = React.useContext(TableHeaderContext);
+  const isWithinTableHeader = useSafeContext(TableHeaderContext);
+  const { mode } = useSafeContext(TableContext);
+  const { render, role } = React.useMemo(() => {
+    if (mode === "aria") {
+      return { role: isWithinTableHeader ? "columnheader" : "cell" };
+    }
+    return { render: isWithinTableHeader ? /* @__PURE__ */ jsx("th", {}) : /* @__PURE__ */ jsx("td", {}) };
+  }, [isWithinTableHeader, mode]);
   return /* @__PURE__ */ jsx(
-    Role.span,
+    Role.div,
     {
+      render,
+      role,
       ...props,
-      className: cx("\u{1F95D}-table-cell", props.className),
       ref: forwardedRef,
-      role: isWithinTableHeader ? "columnheader" : "cell",
-      children: props.children
+      className: cx("\u{1F95D}-table-cell", props.className)
     }
   );
 });
@@ -102,7 +134,8 @@ export {
   TableBody as Body,
   TableCaption as Caption,
   TableCell as Cell,
+  CustomTable,
   TableHeader as Header,
-  Table as Root,
+  HtmlTable,
   TableRow as Row
 };

package/dist/bricks/Tabs.d.ts

@@ -1,4 +1,3 @@
-import * as React from "react";
 import * as AkTab from "@ariakit/react/tab";
 import { type FocusableProps, type BaseProps } from "./~utils.js";
 interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
@@ -52,7 +51,7 @@ interface TabListProps extends BaseProps {
  * </Tabs.TabList>
  * ```
  */
-declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
 interface TabProps extends FocusableProps<"button">, Pick<AkTab.TabProps, "id"> {
 }
 /**
@@ -66,7 +65,7 @@ interface TabProps extends FocusableProps<"button">, Pick<AkTab.TabProps, "id">
  * <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
  * ```
  */
-declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
 interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "tabId" | "unmountOnHide" | "focusable"> {
 }
 /**
@@ -78,5 +77,5 @@ interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps,
  * <Tabs.TabPanel tabId="tab-1">Tab 1 content</Tabs.TabPanel>
  * ```
  */
-declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+declare const TabPanel: import("react").ForwardRefExoticComponent<TabPanelProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
 export { Tabs as Root, TabList, Tab, TabPanel };

package/dist/bricks/Tabs.js

@@ -1,41 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
 import cx from "classnames";
 import * as AkTab from "@ariakit/react/tab";
-import { useControlledState } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 function Tabs(props) {
   const {
     defaultSelectedId,
-    selectedId: selectedIdProp,
-    setSelectedId: setSelectedIdProp,
+    selectedId,
+    setSelectedId,
     selectOnMove,
     children
   } = props;
-  const [selectedId, setSelectedId] = useControlledState(
-    defaultSelectedId,
-    selectedIdProp,
-    setSelectedIdProp
-  );
   return /* @__PURE__ */ jsx(
     AkTab.TabProvider,
     {
+      defaultSelectedId,
       selectedId,
-      setSelectedId: React.useCallback(
-        (id) => {
-          if (document.startViewTransition) {
-            document.startViewTransition(() => {
-              ReactDOM.flushSync(() => {
-                setSelectedId(id);
-              });
-            });
-          } else {
-            setSelectedId(id);
-          }
-        },
-        [setSelectedId]
-      ),
+      setSelectedId,
       selectOnMove,
       children
     }
@@ -43,17 +23,12 @@ function Tabs(props) {
 }
 const TabList = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
-  const viewTransitionName = `\u{1F95D}active-stripe-${React.useId().replaceAll(":", "_")}`;
   return /* @__PURE__ */ jsx(
     AkTab.TabList,
     {
       ...rest,
       "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-tab-list", props.className),
-      style: {
-        "--\u{1F95D}tab-active-stripe-view-transition-name": viewTransitionName,
-        ...props.style
-      },
       ref: forwardedRef
     }
   );

package/dist/bricks/TextBox.d.ts

@@ -19,17 +19,26 @@ interface TextBoxInputProps extends Omit<BaseInputProps, "children" | "type"> {
  *
  * Example usage:
  * ```tsx
- * <TextBox.Input defaultValue="Hello" />
+ * <TextBox.Input name="greeting" defaultValue="Hello" />
  * ```
  *
  * To add additional decorations, see `TextBox.Root` component.
  *
- * Works well with the `Field` and `Label` components.
+ * Use with the `Field` components to automatically handle ID associations for
+ * labels and descriptions:
  * ```tsx
- * <Field>
- *   <Label>Enter your name</Label>
- *   <TextBox.Input />
- * </Field>
+ * <Field.Root>
+ *   <Field.Label>First name</Field.Label>
+ *   <Field.Control render={<TextBox.Input name="firstName" />} />
+ * </Field.Root>
+ * ```
+ *
+ * Without the `Field` components you will need to manually associate labels,
+ * descriptions, etc.:
+ * ```tsx
+ * <Label htmlFor="fruit">Fruit</Label>
+ * <TextBox.Input id="fruit" aria-describedby="fruit-description" />
+ * <Description id="fruit-description">Something to include in a fruit salad.</Description>
  * ```
  *
  * Underneath, it's an HTML input, i.e. `<input>`, so it supports the same props, including
@@ -48,12 +57,21 @@ interface TextareaProps extends FocusableProps<"textarea"> {
  * <TextBox.Textarea defaultValue="Hello" />
  * ```
  *
- * Works well with the `Field` and `Label` components.
+ * Use with the `Field` components to automatically handle ID associations for
+ * labels and descriptions:
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Leave a comment, be kind</Field.Label>
+ *   <Field.Control render={<TextBox.Textarea name="comment" />} />
+ * </Field.Root>
+ * ```
+ *
+ * Without the `Field` components you will need to manually associate labels,
+ * descriptions, etc.:
  * ```tsx
- * <Field>
- *   <Label>Leave a comment, be kind</Label>
- *   <TextBox.Textarea />
- * </Field>
+ * <Label htmlFor="fruit">Fruit</Label>
+ * <TextBox.Input id="fruit" aria-describedby="fruit-description" />
+ * <Description id="fruit-description">Something to include in a fruit salad.</Description>
  * ```
  *
  * Underneath, it's an HTML textarea, i.e. `<textarea>`, so it supports the same props, including
@@ -73,15 +91,20 @@ interface TextBoxRootProps extends BaseProps {
  * </TextBox.Root>
  * ```
  *
- * Works well with the `Field` and `Label` components.
+ * Use with the `Field` components to automatically handle ID associations for
+ * labels and descriptions:
  * ```tsx
- * <Field>
- *   <Label>Enter your name</Label>
- *   <TextBox.Root>
- *     <TextBox.Input />
- *     <TextBox.Icon href={…} />
- *   </TextBox.Root>
- * </Field>
+ * <Field.Root>
+ *   <Field.Label>First name</Field.Label>
+ *   <Field.Control
+ *     render={(controlProps) => (
+ *       <TextBox.Root>
+ *         <TextBox.Input name="firstName" {...controlProps} />
+ *         <TextBox.Icon href={…} />
+ *       </TextBox.Root>
+ *     )}
+ *   />
+ * </Field.Root>
  * ```
  */
 declare const TextBoxRoot: React.ForwardRefExoticComponent<TextBoxRootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;

package/dist/bricks/TextBox.js

@@ -3,69 +3,55 @@ import * as React from "react";
 import { Role } from "@ariakit/react/role";
 import { Focusable } from "@ariakit/react/focusable";
 import cx from "classnames";
-import { FieldControl } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
+import { useFieldControlType } from "./Field.internal.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
-    const { id, ...rest } = props;
+    useFieldControlType("textlike");
     const rootContext = React.useContext(TextBoxRootContext);
     const setDisabled = rootContext?.setDisabled;
     React.useEffect(() => {
       setDisabled?.(props.disabled);
     }, [setDisabled, props.disabled]);
     return /* @__PURE__ */ jsx(
-      FieldControl,
+      Role.input,
       {
-        type: "textlike",
-        id,
+        readOnly: props.disabled,
+        ...props,
+        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+        placeholder: props.placeholder ?? " ",
         render: /* @__PURE__ */ jsx(
-          Role.input,
+          Focusable,
           {
-            readOnly: props.disabled,
-            ...rest,
-            className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
-            placeholder: props.placeholder ?? " ",
-            render: /* @__PURE__ */ jsx(
-              Focusable,
-              {
-                accessibleWhenDisabled: true,
-                render: props.render || /* @__PURE__ */ jsx("input", {})
-              }
-            ),
-            ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("input", {})
           }
-        )
+        ),
+        ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
       }
     );
   }
 );
 const TextBoxTextarea = forwardRef(
   (props, forwardedRef) => {
-    const { id, ...rest } = props;
+    useFieldControlType("textlike");
     return /* @__PURE__ */ jsx(
-      FieldControl,
+      Role.textarea,
       {
-        type: "textlike",
-        id,
+        readOnly: props.disabled,
+        ...props,
+        className: cx("\u{1F95D}-text-box", props.className),
+        placeholder: props.placeholder ?? " ",
         render: /* @__PURE__ */ jsx(
-          Role.textarea,
+          Focusable,
           {
-            readOnly: props.disabled,
-            ...rest,
-            className: cx("\u{1F95D}-text-box", props.className),
-            placeholder: props.placeholder ?? " ",
-            render: /* @__PURE__ */ jsx(
-              Focusable,
-              {
-                accessibleWhenDisabled: true,
-                render: props.render || /* @__PURE__ */ jsx("textarea", {})
-              }
-            ),
-            ref: forwardedRef
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("textarea", {})
           }
-        )
+        ),
+        ref: forwardedRef
       }
     );
   }