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

package/dist/bricks/Select.js

@@ -0,0 +1,61 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import { Role } from "@ariakit/react/role";
+import {
+  forwardRef,
+  isBrowser
+} from "./~utils.js";
+import { DisclosureArrow } from "./Icon.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(
+    Role.div,
+    {
+      ...props,
+      className: cx("\u{1F95D}-select-root", props.className),
+      "data-kiwi-has-select": !supportsHas && isHtmlSelect ? "true" : void 0,
+      ref: forwardedRef
+    }
+  ) });
+});
+const HtmlSelect = forwardRef(
+  (props, forwardedRef) => {
+    const { id, variant = "solid", ...rest } = props;
+    const setIsHtmlSelect = React.useContext(HtmlSelectContext);
+    React.useEffect(
+      function updateContext() {
+        setIsHtmlSelect(true);
+      },
+      [setIsHtmlSelect]
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        FieldControl,
+        {
+          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" })
+    ] });
+  }
+);
+export {
+  HtmlSelect,
+  SelectRoot as Root
+};

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,13 +1,27 @@
-import * as React from "react";
-import * as Ariakit from "@ariakit/react";
-import type { FocusableProps } from "./~utils.js";
+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;
     /** The controlled checked state of the toggle switch. */
     checked?: boolean;
 }
-export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * A toggle switch element, typically used for enabling or disabling a feature.
+ *
+ * Works well with the `Field` and `Label` components.
+ *
+ * ```tsx
+ * <Field>
+ *   <Label>Enable feature</Label>
+ *   <Switch />
+ * </Field>
+ * ```
+ *
+ * Underneath, it's an HTML checkbox, i.e. `<input type="checkbox">`, so it supports the same props,
+ * including `value`, `defaultChecked`, `checked`, and `onChange`.
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLElement | HTMLInputElement>>;
 export {};

package/dist/bricks/Switch.js

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

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,8 +1,36 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
-import type { FocusableProps, BaseProps } from "./~utils.js";
-interface TabsProps extends Pick<Ariakit.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
+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"> {
 }
+/**
+ * A set of tabs that can be used to switch between different views.
+ *
+ * `Tabs` is a compound component with subcomponents exposed for different parts.
+ *
+ * Example:
+ * ```tsx
+ * <Tabs.Root>
+ *   <Tabs.TabList>
+ *     <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
+ *     <Tabs.Tab id="tab-2">Tab 2</Tabs.Tab>
+ *     <Tabs.Tab id="tab-3">Tab 3</Tabs.Tab>
+ *   </Tabs.TabList>
+ *
+ *   <Tabs.TabPanel tabId="tab-1">Tab 1 content</Tabs.TabPanel>
+ *   <Tabs.TabPanel tabId="tab-2">Tab 2 content</Tabs.TabPanel>
+ *   <Tabs.TabPanel tabId="tab-3">Tab 3 content</Tabs.TabPanel>
+ * </Tabs.Root>
+ * ```
+ *
+ * The tabs and their panels are connected by matching the `id` prop on the `Tabs.Tab` component with
+ * the `tabId` prop on the `Tabs.TabPanel` component.
+ *
+ * The `Tabs` component automatically manages the selected tab state. The initially selected tab can be set using `defaultSelectedId`.
+ * To take full control the selected tab state, use the `selectedId` and `setSelectedId` props together.
+ *
+ * **Note**: `Tabs` should _not_ be used for navigation; it is only intended for switching smaller views within an existing page.
+ */
 declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Tabs {
     var displayName: string;
@@ -11,11 +39,44 @@ interface TabListProps extends BaseProps {
     /** @default "neutral" */
     tone?: "neutral" | "accent";
 }
-declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
-interface TabProps extends FocusableProps<"button">, Pick<Ariakit.TabProps, "id"> {
+/**
+ * A simple container for the tab buttons.
+ * Should be used as a child of `Tabs.Root` and consist of the individual `Tabs.Tab` components.
+ *
+ * Example:
+ * ```tsx
+ * <Tabs.TabList>
+ *   <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
+ *   <Tabs.Tab id="tab-2">Tab 2</Tabs.Tab>
+ *   <Tabs.Tab id="tab-3">Tab 3</Tabs.Tab>
+ * </Tabs.TabList>
+ * ```
+ */
+declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TabProps extends FocusableProps<"button">, Pick<AkTab.TabProps, "id"> {
 }
-declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
-interface TabPanelProps extends BaseProps<"div">, Pick<Ariakit.TabPanelProps, "tabId" | "unmountOnHide"> {
+/**
+ * An individual tab button that switches the selected tab panel when clicked.
+ *
+ * Should be used as a child of `Tabs.TabList` and be paired with a `Tabs.TabPanel`,
+ * connected using an id.
+ *
+ * Example:
+ * ```tsx
+ * <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
+ * ```
+ */
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "tabId" | "unmountOnHide" | "focusable"> {
 }
-declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The actual content of a tab, shown when the tab is selected. Should be used as a child of `Tabs.Root`.
+ * The `tabId` prop should match the `id` prop of the corresponding `Tabs.Tab` component.
+ *
+ * Example:
+ * ```tsx
+ * <Tabs.TabPanel tabId="tab-1">Tab 1 content</Tabs.TabPanel>
+ * ```
+ */
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 export { Tabs as Root, TabList, Tab, TabPanel };

package/dist/bricks/Tabs.js

@@ -2,8 +2,9 @@ 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) {
   const {
     defaultSelectedId,
@@ -18,7 +19,7 @@ function Tabs(props) {
     setSelectedIdProp
   );
   return /* @__PURE__ */ jsx(
-    Ariakit.TabProvider,
+    AkTab.TabProvider,
     {
       selectedId,
       setSelectedId: React.useCallback(
@@ -40,14 +41,14 @@ function Tabs(props) {
     }
   );
 }
-const TabList = React.forwardRef((props, forwardedRef) => {
+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,
@@ -57,22 +58,20 @@ const TabList = React.forwardRef((props, forwardedRef) => {
     }
   );
 });
-const Tab = React.forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Ariakit.Tab,
-      {
-        accessibleWhenDisabled: true,
-        ...props,
-        className: cx("\u{1F95D}-tab", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const TabPanel = React.forwardRef((props, forwardedRef) => {
+const Tab = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    AkTab.Tab,
+    {
+      accessibleWhenDisabled: true,
+      ...props,
+      className: cx("\u{1F95D}-tab", props.className),
+      ref: 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

@@ -0,0 +1,22 @@
+import { type BaseProps } from "./~utils.js";
+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";
+}
+/**
+ * An element with text styles applied. Useful for paragraphs, headings, and other text content.
+ *
+ * Example usage:
+ * ```tsx
+ * <Text variant="display-sm">Hello, World!</Text>
+ * ```
+ *
+ * Use the `render` prop to change the underlying element (defaults to a `<div>`):
+ * ```tsx
+ * <Text render={<h1 />} variant="headline-lg">Hello, World!</Text>
+ * ```
+ */
+export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};