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

package/dist/bricks/Radio.d.ts

@@ -7,13 +7,22 @@ interface RadioProps extends InputBaseProps, RadioOwnProps {
 /**
  * A styled radio input element, typically used for selecting a single option from a list.
  *
- * 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>Choose one</Field.Label>
+ *   <Field.Control render={<Radio />} />
+ * </Field.Root>
+ * ```
  *
+ * Without the `Field` components you will need to manually associate labels,
+ * descriptions, etc.:
  * ```tsx
- * <Field>
- *   <Label>Choose one</Label>
- *   <Radio />
- * </Field>
+ * <Radio id="editor-vim" name="editor" value="vim" />
+ * <Label htmlFor="editor-vim">Vim</Label>
+ * <Radio id="editor-emacs" name="editor" value="emacs" />
+ * <Label htmlFor="editor-emacs">Emacs</Label>
  * ```
  *
  * Underneath, it's an HTML radio input, i.e. `<input type="radio">`, so it supports the same props,

package/dist/bricks/Radio.js

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

package/dist/bricks/Select.d.ts

@@ -3,20 +3,37 @@ import { type FocusableProps } from "./~utils.js";
 /**
  * Compound component for a select element, which allows the user to select a value from a list of options.
  *
- * 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>Fruit</Field.Label>
+ *   <Field.Control
+ *     render={(controlProps) => (
+ *       <Select.Root>
+ *         <Select.HtmlSelect name="fruit" {...controlProps}>
+ *           <option value="kiwi">Kiwi</option>
+ *           <option value="mango">Mango</option>
+ *           <option value="papaya">Papaya</option>
+ *         </Select.HtmlSelect>
+ *       </Select.Root>
+ *     )}
+ *   />
+ * </Field.Root>
+ * ```
  *
- * Example usage:
+ * Without the `Field` components you will need to manually associate labels,
+ * descriptions, etc.:
  * ```tsx
- * <Field>
- *   <Label>Select an option</Label>
- *   <Select.Root>
- *     <Select.HtmlSelect>
- *       <option value="1">Option 1</option>
- *       <option value="2">Option 2</option>
- *       <option value="3">Option 3</option>
- *     </Select.HtmlSelect>
- *   </Select.Root>
- * </Field>
+ * <Label htmlFor="fruit">Fruit</Label>
+ * <Description id="fruit-description">Something to include in a fruit salad.</Description>
+ * <Select.Root>
+ *   <Select.HtmlSelect id="fruit" aria-labelledby="fruit-description">
+ *     <option value="kiwi">Kiwi</option>
+ *     <option value="mango">Mango</option>
+ *     <option value="papaya">Papaya</option>
+ *   </Select.HtmlSelect>
+ * </Select.Root>
  * ```
  */
 declare const SelectRoot: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;

package/dist/bricks/Select.js

@@ -7,11 +7,12 @@ import {
   isBrowser
 } from "./~utils.js";
 import { DisclosureArrow } from "./Icon.js";
-import { FieldControl } from "./Field.js";
+import { useFieldControlType } from "./Field.internal.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
 const SelectRoot = forwardRef((props, forwardedRef) => {
+  useFieldControlType("textlike");
   const [isHtmlSelect, setIsHtmlSelect] = React.useState(false);
   return /* @__PURE__ */ jsx(HtmlSelectContext.Provider, { value: setIsHtmlSelect, children: /* @__PURE__ */ jsx(
     Role.div,
@@ -25,7 +26,7 @@ const SelectRoot = forwardRef((props, forwardedRef) => {
 });
 const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
-    const { id, variant = "solid", ...rest } = props;
+    const { variant = "solid", ...rest } = props;
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
     React.useEffect(
       function updateContext() {
@@ -35,20 +36,13 @@ const HtmlSelect = forwardRef(
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        FieldControl,
+        Role.select,
         {
-          type: "textlike",
-          id,
-          render: /* @__PURE__ */ jsx(
-            Role.select,
-            {
-              ...rest,
-              className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
-              "data-kiwi-tone": "neutral",
-              "data-kiwi-variant": variant,
-              ref: forwardedRef
-            }
-          )
+          ...rest,
+          className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
+          "data-kiwi-tone": "neutral",
+          "data-kiwi-variant": variant,
+          ref: forwardedRef
         }
       ),
       /* @__PURE__ */ jsx(DisclosureArrow, { className: "\u{1F95D}-select-arrow" })

package/dist/bricks/Switch.d.ts

@@ -11,13 +11,20 @@ interface SwitchProps extends InputBaseProps, CheckboxOwnProps {
 /**
  * A toggle switch element, typically used for enabling or disabling a feature.
  *
- * 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>Enable feature</Field.Label>
+ *   <Field.Control render={<Switch />} />
+ * </Field.Root>
+ * ```
  *
+ * Without the `Field` components you will need to manually associate labels,
+ * descriptions, etc.:
  * ```tsx
- * <Field>
- *   <Label>Enable feature</Label>
- *   <Switch />
- * </Field>
+ * <Switch id="dark-mode" />
+ * <Label htmlFor="dark-mode">Dark mode</Label>
  * ```
  *
  * Underneath, it's an HTML checkbox, i.e. `<input type="checkbox">`, so it supports the same props,

package/dist/bricks/Switch.js

@@ -3,26 +3,19 @@ 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 Switch = 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}-switch", props.className),
-            role: "switch",
-            ref: forwardedRef
-          }
-        )
+        accessibleWhenDisabled: true,
+        ...props,
+        className: cx("\u{1F95D}-switch", props.className),
+        role: "switch",
+        ref: forwardedRef
       }
     );
   }

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 };