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

package/dist/bricks/Root.js

@@ -1,19 +1,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import * as ReactDOM from "react-dom";
+import { Role } from "@ariakit/react/role";
+import { PortalContext } from "@ariakit/react/portal";
 import cx from "classnames";
 import foundationsCss from "../foundations/styles.css.js";
 import bricksCss from "./styles.css.js";
 import { forwardRef, isBrowser } from "./~utils.js";
-import { useMergedRefs } from "./~hooks.js";
+import { useIsClient, useMergedRefs } from "./~hooks.js";
 const css = foundationsCss + bricksCss;
 const Root = forwardRef((props, forwardedRef) => {
   const { children, synchronizeColorScheme = false, ...rest } = props;
+  const [portalContainer, setPortalContainer] = React.useState(null);
   return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
     /* @__PURE__ */ jsx(Styles, {}),
     /* @__PURE__ */ jsx(Fonts, {}),
     synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
-    children
+    /* @__PURE__ */ jsx(
+      PortalContainer,
+      {
+        colorScheme: props.colorScheme,
+        density: props.density,
+        ref: setPortalContainer
+      }
+    ),
+    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children })
   ] });
 });
 const RootNodeContext = React.createContext(null);
@@ -31,7 +42,7 @@ const RootInternal = forwardRef(
       setRootNode(rootNode2);
     }, []);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         className: cx("\u{1F95D}-root", props.className),
@@ -59,6 +70,26 @@ function SynchronizeColorScheme({
   }, [rootNode, colorScheme]);
   return null;
 }
+const PortalContainer = forwardRef((props, forwardedRef) => {
+  const isClient = useIsClient();
+  const rootNode = useRootNode();
+  if (!isClient) return null;
+  const destination = rootNode && isDocument(rootNode) ? rootNode.body : rootNode;
+  if (!destination) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "\u{1F95D}-root",
+        "data-kiwi-theme": props.colorScheme,
+        "data-kiwi-density": props.density,
+        style: { display: "contents" },
+        ref: forwardedRef
+      }
+    ),
+    destination
+  );
+});
 function Styles() {
   const rootNode = useRootNode();
   useLayoutEffect(() => {

package/dist/bricks/Select.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
 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.
@@ -20,8 +19,15 @@ import { type FocusableProps } from "./~utils.js";
  * </Field>
  * ```
  */
-declare const SelectRoot: React.ForwardRefExoticComponent<Pick<Ariakit.RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface HtmlSelectProps extends Omit<FocusableProps<"select">, "multiple" | "size"> {
+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>>;
+type HtmlSelectBaseProps = Omit<FocusableProps<"select">, "multiple" | "size">;
+interface HtmlSelectProps extends HtmlSelectBaseProps {
+    /**
+     * The variant of the `HtmlSelect`, i.e. solid, outline, or ghost.
+     *
+     * @default "solid"
+     */
+    variant?: "solid" | "outline" | "ghost";
 }
 /**
  * The actual select element to be used inside `Select.Root`. This is a wrapper around the

package/dist/bricks/Select.js

@@ -1,20 +1,20 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import {
   forwardRef,
   isBrowser
 } from "./~utils.js";
 import { DisclosureArrow } from "./Icon.js";
-import { useFieldId } from "./Field.js";
+import { FieldControl } from "./Field.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
 const SelectRoot = forwardRef((props, forwardedRef) => {
   const [isHtmlSelect, setIsHtmlSelect] = React.useState(false);
   return /* @__PURE__ */ jsx(HtmlSelectContext.Provider, { value: setIsHtmlSelect, children: /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...props,
       className: cx("\u{1F95D}-select-root", props.className),
@@ -25,8 +25,8 @@ const SelectRoot = forwardRef((props, forwardedRef) => {
 });
 const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
+    const { id, variant = "solid", ...rest } = props;
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
-    const fieldId = useFieldId();
     React.useEffect(
       function updateContext() {
         setIsHtmlSelect(true);
@@ -35,14 +35,20 @@ const HtmlSelect = forwardRef(
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        Ariakit.Role.select,
+        FieldControl,
         {
-          id: fieldId,
-          ...props,
-          className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
-          "data-kiwi-tone": "neutral",
-          "data-kiwi-variant": "solid",
-          ref: forwardedRef
+          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
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsx(DisclosureArrow, { className: "\u{1F95D}-select-arrow" })

package/dist/bricks/Skeleton.d.ts

@@ -0,0 +1,25 @@
+import { type BaseProps } from "./~utils.js";
+interface SkeletonPropsBase extends Omit<BaseProps, "children"> {
+}
+/**
+ * Represents the loaded content before it finishes loading.
+ *
+ * Example:
+ * ```tsx
+ * <Skeleton variant="object" size="small" shape="square" />
+ * <Skeleton variant="text" size="medium" />
+ * ```
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonPropsBase & {
+    /**
+     * The type of the skeleton item. Available variants: `text`, `object`.
+     * @default "text"
+     */
+    variant?: "text" | "object";
+    /**
+     * The size of the skeleton item. Available sizes: `xsmall`, `small`, `medium`, `large`, `xlarge`
+     * @default "medium"
+     */
+    size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+} & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/Skeleton.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import cx from "classnames";
+import { forwardRef } from "./~utils.js";
+const Skeleton = forwardRef(
+  (props, forwardedRef) => {
+    const { variant = "text", size = "medium", ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        ...rest,
+        ref: forwardedRef,
+        className: cx("\u{1F95D}-skeleton", props.className),
+        "data-kiwi-variant": variant,
+        "data-kiwi-size": size,
+        "aria-hidden": true
+      }
+    );
+  }
+);
+export {
+  Skeleton
+};

package/dist/bricks/Spinner.d.ts

@@ -0,0 +1,31 @@
+import { type BaseProps } from "./~utils.js";
+interface SpinnerProps extends BaseProps {
+    /**
+     * A text alternative for the spinner.
+     * @default "Loading…"
+     */
+    alt?: string;
+    /**
+     * The size of the spinner.
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large" | "xlarge";
+    /**
+     * The tone of the spinner.
+     * @default "neutral"
+     */
+    tone?: "neutral" | "accent";
+}
+/**
+ * A loading spinner.
+ *
+ * Example:
+ * ```tsx
+ * <Spinner />
+ * ```
+ *
+ * Supports a `tone` prop to change the tone (color) of the spinner.
+ * Supports a `size` prop to change the size of the spinner.
+ */
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/Spinner.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import cx from "classnames";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { forwardRef } from "./~utils.js";
+const Spinner = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      alt = "Loading\u2026",
+      size = "medium",
+      tone = "neutral",
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      Role,
+      {
+        ...rest,
+        "data-kiwi-size": size,
+        "data-kiwi-tone": tone,
+        className: cx("\u{1F95D}-spinner", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              stroke: "currentColor",
+              strokeLinecap: "round",
+              d: "M9.5 1.674a6.503 6.503 0 0 1 0 12.652m-3-12.652a6.503 6.503 0 0 0 0 12.652"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: alt })
+        ]
+      }
+    );
+  }
+);
+export {
+  Spinner
+};

package/dist/bricks/Switch.d.ts

@@ -1,7 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import { type CheckboxProps as AkCheckboxProps } from "@ariakit/react/checkbox";
 import { type FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
-type CheckboxOwnProps = Pick<Ariakit.CheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
+type CheckboxOwnProps = Pick<AkCheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
 interface SwitchProps extends InputBaseProps, CheckboxOwnProps {
     /** The default checked state of the toggle switch. */
     defaultChecked?: boolean;

package/dist/bricks/Switch.js

@@ -1,20 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
+import {
+  Checkbox as AkCheckbox
+} from "@ariakit/react/checkbox";
+import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
   (props, forwardedRef) => {
-    const fieldId = useFieldId();
+    const { id, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      Ariakit.Checkbox,
+      FieldControl,
       {
-        accessibleWhenDisabled: true,
-        id: fieldId,
-        ...props,
-        className: cx("\u{1F95D}-switch", props.className),
-        role: "switch",
-        ref: forwardedRef
+        type: "checkable",
+        id,
+        render: /* @__PURE__ */ jsx(
+          AkCheckbox,
+          {
+            accessibleWhenDisabled: true,
+            ...rest,
+            className: cx("\u{1F95D}-switch", props.className),
+            role: "switch",
+            ref: forwardedRef
+          }
+        )
       }
     );
   }

package/dist/bricks/Table.d.ts

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface TableProps 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.
+ *
+ * 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>
+ * ```
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableHeaderProps extends BaseProps {
+}
+/**
+ * `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.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Header>
+ *		<Table.Row>
+ *			<Table.Cell>Header 1</Table.Cell>
+ * 			<Table.Cell>Header 2</Table.Cell>
+ *		</Table.Row>
+ *	</Table.Header>
+ * ```
+ */
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableBodyProps extends BaseProps {
+}
+/**
+ * `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.
+ *
+ * Example:
+ * ```tsx
+ *	<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>
+ * ```
+ */
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableRowProps extends BaseProps {
+}
+/**
+ * `Table.Row` is a component that contains the cells of a table row.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Row>
+ *		<Table.Cell>Cell 1.1</Table.Cell>
+ *		<Table.Cell>Cell 1.2</Table.Cell>
+ *	</Table.Row>
+ * ```
+ */
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableCaptionProps extends BaseProps<"caption"> {
+}
+/**
+ * `Table.Caption` is a component that contains the caption of a table.
+ *
+ * Example:
+ * ```tsx
+ * <Table.Root>
+ * 	<Table.Caption>Table Caption</Table.Caption>
+ * 	…
+ * </Table.Root>
+ * ```
+ */
+declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLElement>>;
+interface TableCellProps extends BaseProps<"span"> {
+}
+/**
+ * `Table.Cell` is a component that contains the data of a table cell.
+ *
+ * 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, };

package/dist/bricks/Table.js

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+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(
+    Role,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table", props.className),
+      ref: forwardedRef,
+      role: "table",
+      "aria-labelledby": captionId,
+      children: props.children
+    }
+  ) });
+});
+const TableHeaderContext = React.createContext(false);
+const TableHeader = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        ...props,
+        className: cx("\u{1F95D}-table-header", props.className),
+        ref: forwardedRef,
+        role: "rowgroup",
+        children: props.children
+      }
+    ) });
+  }
+);
+const TableBody = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table-body", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
+});
+const TableRow = forwardRef((props, forwardedRef) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-table-row", props.className),
+      ref: forwardedRef,
+      role: "row",
+      children
+    }
+  );
+});
+const TableCaption = forwardRef(
+  (props, forwardedRef) => {
+    const fallbackId = React.useId();
+    const { id = fallbackId, children, ...rest } = props;
+    const { setCaptionId } = React.useContext(TableContext);
+    const captionIdRef = React.useCallback(
+      (element) => {
+        setCaptionId(element ? id : void 0);
+      },
+      [id, setCaptionId]
+    );
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...rest,
+        id,
+        className: cx("\u{1F95D}-table-caption", props.className),
+        ref: useMergedRefs(forwardedRef, captionIdRef),
+        children
+      }
+    );
+  }
+);
+const TableCell = forwardRef((props, forwardedRef) => {
+  const isWithinTableHeader = React.useContext(TableHeaderContext);
+  return /* @__PURE__ */ jsx(
+    Role.span,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table-cell", props.className),
+      ref: forwardedRef,
+      role: isWithinTableHeader ? "columnheader" : "cell",
+      children: props.children
+    }
+  );
+});
+export {
+  TableBody as Body,
+  TableCaption as Caption,
+  TableCell as Cell,
+  TableHeader as Header,
+  Table as Root,
+  TableRow as Row
+};

package/dist/bricks/Tabs.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import * as AkTab from "@ariakit/react/tab";
 import { type FocusableProps, type BaseProps } from "./~utils.js";
-interface TabsProps extends Pick<Ariakit.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
+interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
 }
 /**
  * A set of tabs that can be used to switch between different views.
@@ -53,7 +53,7 @@ interface TabListProps extends BaseProps {
  * ```
  */
 declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TabProps extends FocusableProps<"button">, Pick<Ariakit.TabProps, "id"> {
+interface TabProps extends FocusableProps<"button">, Pick<AkTab.TabProps, "id"> {
 }
 /**
  * An individual tab button that switches the selected tab panel when clicked.
@@ -67,7 +67,7 @@ interface TabProps extends FocusableProps<"button">, Pick<Ariakit.TabProps, "id"
  * ```
  */
 declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-interface TabPanelProps extends BaseProps<"div">, Pick<Ariakit.TabPanelProps, "tabId" | "unmountOnHide"> {
+interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "tabId" | "unmountOnHide" | "focusable"> {
 }
 /**
  * The actual content of a tab, shown when the tab is selected. Should be used as a child of `Tabs.Root`.

package/dist/bricks/Tabs.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import * as AkTab from "@ariakit/react/tab";
 import { useControlledState } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 function Tabs(props) {
@@ -19,7 +19,7 @@ function Tabs(props) {
     setSelectedIdProp
   );
   return /* @__PURE__ */ jsx(
-    Ariakit.TabProvider,
+    AkTab.TabProvider,
     {
       selectedId,
       setSelectedId: React.useCallback(
@@ -45,10 +45,10 @@ const TabList = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
   const viewTransitionName = `\u{1F95D}active-stripe-${React.useId().replaceAll(":", "_")}`;
   return /* @__PURE__ */ jsx(
-    Ariakit.TabList,
+    AkTab.TabList,
     {
-      "data-kiwi-tone": tone,
       ...rest,
+      "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-tab-list", props.className),
       style: {
         "--\u{1F95D}tab-active-stripe-view-transition-name": viewTransitionName,
@@ -60,7 +60,7 @@ const TabList = forwardRef((props, forwardedRef) => {
 });
 const Tab = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.Tab,
+    AkTab.Tab,
     {
       accessibleWhenDisabled: true,
       ...props,
@@ -71,7 +71,7 @@ const Tab = forwardRef((props, forwardedRef) => {
 });
 const TabPanel = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.TabPanel,
+    AkTab.TabPanel,
     {
       ...props,
       className: cx("\u{1F95D}-tab-panel", props.className),

package/dist/bricks/Text.d.ts

@@ -3,7 +3,7 @@ interface TextProps extends BaseProps {
     /**
      * The typography variant to use.
      */
-    variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "body-lg" | "body-md" | "body-sm" | "caption-lg" | "caption-md" | "caption-sm" | "mono-sm";
+    variant: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "body-lg" | "body-md" | "body-sm" | "caption-lg" | "caption-md" | "caption-sm" | "mono-sm";
 }
 /**
  * An element with text styles applied. Useful for paragraphs, headings, and other text content.

package/dist/bricks/Text.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Text = forwardRef((props, forwardedRef) => {
   const { variant, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role,
+    Role,
     {
       ...rest,
       className: cx("\u{1F95D}-text", props.className),