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

package/dist/bricks/Anchor.js

@@ -7,8 +7,8 @@ const Anchor = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     Ariakit.Role.a,
     {
-      "data-kiwi-tone": tone,
       ...rest,
+      "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-anchor", props.className),
       render: /* @__PURE__ */ jsx(
         Ariakit.Focusable,

package/dist/bricks/Button.js

@@ -9,9 +9,9 @@ const Button = forwardRef(
       Ariakit.Button,
       {
         accessibleWhenDisabled: true,
+        ...rest,
         "data-kiwi-variant": variant,
         "data-kiwi-tone": tone,
-        ...rest,
         className: cx("\u{1F95D}-button", props.className),
         ref: forwardedRef
       }

package/dist/bricks/Checkbox.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Checkbox = forwardRef(
   (props, forwardedRef) => {
     const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
       Ariakit.Checkbox,
       {
@@ -13,6 +14,7 @@ const Checkbox = forwardRef(
         id: fieldId,
         ...props,
         className: cx("\u{1F95D}-checkbox", props.className),
+        "aria-describedby": describedBy,
         ref: forwardedRef
       }
     );

package/dist/bricks/Chip.d.ts

@@ -0,0 +1,22 @@
+import { type BaseProps } from "./~utils.js";
+interface ChipProps extends BaseProps<"div"> {
+    /**
+     * The variant style of the Chip.
+     * Use "solid" for primary states and "outline" for less prominent states.
+     *
+     * @default "solid"
+     */
+    variant?: "solid" | "outline";
+}
+/**
+ * Chip is a UI component used to represent an item, attribute, or action in a compact visual style.
+ * It supports two visual variants: `solid` for primary emphasis and `outline` for less prominent states.
+ *
+ * Example : Render a Chip with the default "solid" variant
+ * ```tsx
+ * <Chip>Default Chip</Chip>
+ * <Chip variant="outline">Outline Chip</Chip>
+ * ```
+ */
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/Chip.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const Chip = forwardRef((props, forwardedRef) => {
+  const { variant = "solid", children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      "data-kiwi-variant": variant,
+      ...rest,
+      className: cx("\u{1F95D}-chip", props.className),
+      ref: forwardedRef,
+      children
+    }
+  );
+});
+export {
+  Chip
+};

package/dist/bricks/Description.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface DescriptionProps extends BaseProps {
+    /**
+     * The tone of the description.
+     * @default "neutral"
+     */
+    tone?: "neutral" | "critical";
+}
+/**
+ * An additional description for a form control.
+ *
+ * Should not include content without an adequate text alternative.
+ *
+ * Either give this component an `id` and manually associate with a form control
+ * * using `aria-describedby` on said control or use the `<Field>` component *
+ * (WIP).
+ */
+export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/Description.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { forwardRef } from "./~utils.js";
+import cx from "classnames";
+import { Text } from "./Text.js";
+import { useFieldRegisterDescribedBy } from "./Field.js";
+const Description = forwardRef(
+  (props, forwardedRef) => {
+    const generatedId = React.useId();
+    const { id = generatedId, tone, ...rest } = props;
+    useFieldRegisterDescribedBy(id);
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ...rest,
+        id,
+        variant: "caption-md",
+        "data-kiwi-tone": tone ?? "neutral",
+        className: cx("\u{1F95D}-description", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+export {
+  Description
+};

package/dist/bricks/DropdownMenu.d.ts

@@ -81,4 +81,16 @@ interface DropdownMenuItemProps extends FocusableProps {
  * ```
  */
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-export { DropdownMenu as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, };
+interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps, "onChange">, Pick<Ariakit.MenuItemCheckboxProps, "checked" | "onChange" | "name" | "value"> {
+}
+/**
+ * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu.CheckboxItem name="add">Add</DropdownMenu.Item>
+ * <DropdownMenu.CheckboxItem name="edit">Edit</DropdownMenu.Item>
+ * ```
+ */
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { DropdownMenu as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, DropdownMenuCheckboxItem as CheckboxItem, };

package/dist/bricks/DropdownMenu.js

@@ -5,7 +5,7 @@ import * as Ariakit from "@ariakit/react";
 import * as ListItem from "./ListItem.js";
 import { Button } from "./Button.js";
 import { Kbd } from "./Kbd.js";
-import { DisclosureArrow } from "./Icon.js";
+import { Checkmark, DisclosureArrow } from "./Icon.js";
 import { forwardRef, supportsPopover } from "./~utils.js";
 function DropdownMenu(props) {
   const {
@@ -94,8 +94,26 @@ const DropdownMenuItem = forwardRef(
     );
   }
 );
+const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxs(
+    Ariakit.MenuItemCheckbox,
+    {
+      accessibleWhenDisabled: true,
+      value: props.defaultChecked ? "on" : void 0,
+      ...props,
+      render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
+      className: cx("\u{1F95D}-dropdown-menu-checkbox-item", props.className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
+        /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+      ]
+    }
+  );
+});
 export {
   DropdownMenuButton as Button,
+  DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
   DropdownMenu as Root

package/dist/bricks/Field.d.ts

@@ -27,5 +27,13 @@ interface FieldProps extends BaseProps {
  * - `Switch`
  */
 export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+/**
+ * Use the description IDs for a field.
+ */
+export declare function useFieldDescribedBy(ariaDescribedByProp?: string): string | undefined;
+/**
+ * Registers a description for an associated control.
+ */
+export declare function useFieldRegisterDescribedBy(id: string): void;
 export declare function useFieldId(): string | undefined;
 export {};

package/dist/bricks/Field.js

@@ -5,22 +5,73 @@ import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Field = forwardRef((props, forwardedRef) => {
   const fieldId = React.useId();
-  const { className, layout, ...rest } = props;
-  return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(
+  const { layout, ...rest } = props;
+  return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(FieldDescribedByProvider, { children: /* @__PURE__ */ jsx(
     Ariakit.Role,
     {
       ...rest,
-      className: cx("\u{1F95D}-field", className),
+      className: cx("\u{1F95D}-field", props.className),
       "data-kiwi-layout": layout,
       ref: forwardedRef
     }
-  ) });
+  ) }) });
 });
+const FieldDescribedByContext = React.createContext(void 0);
+function FieldDescribedByProvider(props) {
+  const [describedBy, setDescribedBy] = React.useState(/* @__PURE__ */ new Set());
+  const register = React.useCallback((id) => {
+    setDescribedBy((describedBy2) => {
+      const updated = new Set(describedBy2);
+      updated.add(id);
+      return updated;
+    });
+  }, []);
+  const unregister = React.useCallback((id) => {
+    setDescribedBy((describedBy2) => {
+      const updated = new Set(describedBy2);
+      updated.delete(id);
+      return updated;
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(
+    FieldDescribedByContext.Provider,
+    {
+      value: React.useMemo(
+        () => ({
+          describedBy,
+          register,
+          unregister
+        }),
+        [describedBy, register, unregister]
+      ),
+      children: props.children
+    }
+  );
+}
+function useFieldDescribedBy(ariaDescribedByProp) {
+  const describedBySet = React.useContext(FieldDescribedByContext)?.describedBy;
+  return React.useMemo(
+    () => !describedBySet || describedBySet.size === 0 ? ariaDescribedByProp : [...describedBySet, ariaDescribedByProp].filter(Boolean).join(" "),
+    [describedBySet, ariaDescribedByProp]
+  );
+}
+function useFieldRegisterDescribedBy(id) {
+  const context = React.useContext(FieldDescribedByContext);
+  const register = context?.register;
+  const unregister = context?.unregister;
+  React.useEffect(() => {
+    if (!register || !unregister) return;
+    register(id);
+    return () => unregister(id);
+  }, [id, register, unregister]);
+}
 const FieldIdContext = React.createContext(void 0);
 function useFieldId() {
   return React.useContext(FieldIdContext);
 }
 export {
   Field,
-  useFieldId
+  useFieldDescribedBy,
+  useFieldId,
+  useFieldRegisterDescribedBy
 };

package/dist/bricks/Icon.d.ts

@@ -32,4 +32,7 @@ interface DisclosureArrowProps extends Omit<BaseProps<"svg">, "children"> {
     direction?: "down" | "right";
 }
 export declare const DisclosureArrow: React.ForwardRefExoticComponent<DisclosureArrowProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface CheckmarkProps extends Omit<BaseProps<"svg">, "children"> {
+}
+export declare const Checkmark: React.ForwardRefExoticComponent<CheckmarkProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 export {};

package/dist/bricks/Icon.js

@@ -9,9 +9,9 @@ const Icon = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     Ariakit.Role.svg,
     {
-      "data-kiwi-size": size,
       "aria-hidden": true,
       ...rest,
+      "data-kiwi-size": size,
       className: cx("\u{1F95D}-icon", props.className),
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("use", { href: `${props.href}#${iconId}` })
@@ -54,7 +54,37 @@ const DisclosureArrow = forwardRef(
     );
   }
 );
+const Checkmark = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M13.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 10.793l6.646-6.647a.5.5 0 0 1 .708 0Z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
+  Checkmark,
   DisclosureArrow,
   Icon
 };

package/dist/bricks/IconButton.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
 import { Button } from "./Button.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { Icon } from "./Icon.js";
@@ -8,11 +9,13 @@ import { forwardRef } from "./~utils.js";
 const IconButton = forwardRef(
   (props, forwardedRef) => {
     const { label, icon, isActive, labelVariant, ...rest } = props;
+    const toolbar = Ariakit.useToolbarContext();
     const button = /* @__PURE__ */ jsxs(
       Button,
       {
         "aria-pressed": isActive,
         ...rest,
+        render: toolbar ? /* @__PURE__ */ jsx(Ariakit.ToolbarItem, { render: props.render }) : props.render,
         className: cx("\u{1F95D}-icon-button", props.className),
         ref: forwardedRef,
         children: [

package/dist/bricks/Kbd.d.ts

@@ -1,7 +1,33 @@
 import { type BaseProps } from "./~utils.js";
+declare const predefinedSymbols: {
+    readonly Backspace: "⌫";
+    readonly Command: "⌘";
+    readonly Control: "Ctrl";
+    readonly Down: "↓";
+    readonly Eject: "⏏";
+    readonly Enter: "↵";
+    readonly Escape: "Esc";
+    readonly Left: "←";
+    readonly Option: "⌥";
+    readonly Right: "→";
+    readonly Shift: "⇧";
+    readonly Space: "␣";
+    readonly Tab: "Tab";
+    readonly Up: "↑";
+};
 interface KbdProps extends BaseProps<"kbd"> {
     /** @default "solid" */
     variant?: "solid" | "muted" | "ghost";
+    /**
+     * Display a specific key symbol from a predefined list. This is useful for
+     * displaying modifier keys or special keys, such as `Control`, `Shift`, `Enter`, etc.
+     *
+     * Example:
+     * ```tsx
+     * <Kbd symbol="Control" />
+     * ```
+     */
+    symbol?: keyof typeof predefinedSymbols;
 }
 /**
  * A styled wrapper over the HTML `<kbd>` element. This is typically
@@ -10,6 +36,10 @@ interface KbdProps extends BaseProps<"kbd"> {
  * ```tsx
  * <Kbd>Ctrl</Kbd> <Kbd>S</Kbd>
  * ```
+ *
+ * ```tsx
+ * <Kbd symbol="Control" />
+ * ```
  */
 export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist/bricks/Kbd.js

@@ -1,17 +1,42 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "./~utils.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+const predefinedSymbols = {
+  Backspace: "\u232B",
+  Command: "\u2318",
+  Control: "Ctrl",
+  Down: "\u2193",
+  Eject: "\u23CF",
+  Enter: "\u21B5",
+  Escape: "Esc",
+  Left: "\u2190",
+  Option: "\u2325",
+  Right: "\u2192",
+  Shift: "\u21E7",
+  Space: "\u2423",
+  Tab: "Tab",
+  Up: "\u2191"
+};
 const Kbd = forwardRef((props, forwardedRef) => {
-  const { variant = "solid", ...rest } = props;
+  const { variant = "solid", symbol, children, ...rest } = props;
+  let content = children;
+  if (symbol) {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: predefinedSymbols[symbol] }),
+      children || /* @__PURE__ */ jsx(VisuallyHidden, { children: symbol })
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     Ariakit.Role,
     {
-      "data-kiwi-variant": variant,
       ...rest,
+      "data-kiwi-variant": variant,
       className: cx("\u{1F95D}-kbd", props.className),
       render: props.render || /* @__PURE__ */ jsx("kbd", {}),
-      ref: forwardedRef
+      ref: forwardedRef,
+      children: content
     }
   );
 });

package/dist/bricks/Radio.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Radio = forwardRef((props, forwardedRef) => {
   const fieldId = useFieldId();
+  const describedBy = useFieldDescribedBy(props["aria-describedby"]);
   return /* @__PURE__ */ jsx(
     Ariakit.Radio,
     {
@@ -12,6 +13,7 @@ const Radio = forwardRef((props, forwardedRef) => {
       id: fieldId,
       ...props,
       className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
+      "aria-describedby": describedBy,
       ref: forwardedRef
     }
   );

package/dist/bricks/Select.d.ts

@@ -21,7 +21,14 @@ import { type FocusableProps } from "./~utils.js";
  * ```
  */
 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"> {
+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

@@ -7,7 +7,7 @@ import {
   isBrowser
 } from "./~utils.js";
 import { DisclosureArrow } from "./Icon.js";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
@@ -25,8 +25,10 @@ const SelectRoot = forwardRef((props, forwardedRef) => {
 });
 const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
+    const { variant = "solid", ...rest } = props;
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
     const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     React.useEffect(
       function updateContext() {
         setIsHtmlSelect(true);
@@ -38,10 +40,11 @@ const HtmlSelect = forwardRef(
         Ariakit.Role.select,
         {
           id: fieldId,
-          ...props,
+          ...rest,
           className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
+          "aria-describedby": describedBy,
           "data-kiwi-tone": "neutral",
-          "data-kiwi-variant": "solid",
+          "data-kiwi-variant": variant,
           ref: forwardedRef
         }
       ),

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 * as Ariakit from "@ariakit/react";
+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(
+      Ariakit.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",
+              "stroke-linecap": "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.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
   (props, forwardedRef) => {
     const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
       Ariakit.Checkbox,
       {
@@ -13,6 +14,7 @@ const Switch = forwardRef(
         id: fieldId,
         ...props,
         className: cx("\u{1F95D}-switch", props.className),
+        "aria-describedby": describedBy,
         role: "switch",
         ref: forwardedRef
       }

package/dist/bricks/Tabs.d.ts

@@ -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<Ariakit.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

@@ -47,8 +47,8 @@ const TabList = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     Ariakit.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,