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

package/dist/bricks/DropdownMenu.d.ts

@@ -4,19 +4,24 @@ import { type FocusableProps } from "./~utils.js";
 interface DropdownMenuProps extends Pick<Ariakit.MenuProviderProps, "children" | "placement" | "open" | "setOpen" | "defaultOpen"> {
 }
 /**
- * Dropdown menu component displays a list of actions or commands.
+ * A dropdown menu displays a list of actions or commands when the menu button is clicked.
  *
+ * `DropdownMenu` is a compound component with subcomponents exposed for different parts.
+ *
+ * Example:
  * ```tsx
  * <DropdownMenu.Root>
- *		<DropdownMenu.Button>Actions</DropdownMenu.Button>
+ *   <DropdownMenu.Button>Actions</DropdownMenu.Button>
  *
- *		<DropdownMenu.Content>
- *			<DropdownMenu.Item>Add</DropdownMenu.Item>
- *			<DropdownMenu.Item>Edit</DropdownMenu.Item>
- *			<DropdownMenu.Item>Delete</DropdownMenu.Item>
- *		</DropdownMenu.Content>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Add</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Edit</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Delete</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
  * </DropdownMenu.Root>
  * ```
+ *
+ * **Note**: `DropdownMenu` should not be used for navigation; it is only intended for actions.
  */
 declare function DropdownMenu(props: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DropdownMenu {
@@ -24,11 +29,56 @@ declare namespace DropdownMenu {
 }
 interface DropdownMenuContentProps extends FocusableProps {
 }
-declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The actual "menu" portion containing the items shown within the dropdown.
+ *
+ * Should be used as a child of `DropdownMenu.Root`.
+ */
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 interface DropdownMenuButtonProps extends FocusableProps<"button"> {
 }
-declare const DropdownMenuButton: React.ForwardRefExoticComponent<DropdownMenuButtonProps & React.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+/**
+ * The button that triggers the dropdown menu to open.  Should be used as a child of `DropdownMenu.Root`.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu.Button>Actions</DropdownMenu.Button>
+ * ```
+ *
+ * By default it will render a solid `Button` with a disclosure arrow. This can be
+ * customized by passing a `render` prop.
+ *
+ * ```tsx
+ * <DropdownMenu.Button
+ *   render={<IconButton variant="ghost" label="More" icon={<Icon href={…} />}  />}
+ * />
+ * ```
+ */
+declare const DropdownMenuButton: React.ForwardRefExoticComponent<DropdownMenuButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
 interface DropdownMenuItemProps extends FocusableProps {
+    /**
+     * A string defining the keyboard shortcut(s) associated with the menu item.
+     *
+     * ```tsx
+     * shortcuts="S" // A single key shortcut
+     * ```
+     *
+     * Multiple keys should be separated by the '+' character.
+     *
+     * ```tsx
+     * shortcuts="Ctrl+Shift+S" // A multi-key combination
+     * ```
+     */
+    shortcuts?: string;
 }
-declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu.Item>Add</DropdownMenu.Item>
+ * <DropdownMenu.Item>Edit</DropdownMenu.Item>
+ * ```
+ */
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 export { DropdownMenu as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, };

package/dist/bricks/DropdownMenu.js

@@ -4,8 +4,9 @@ import cx from "classnames";
 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 { supportsPopover } from "./~utils.js";
+import { forwardRef, supportsPopover } from "./~utils.js";
 function DropdownMenu(props) {
   const {
     children,
@@ -15,8 +16,8 @@ function DropdownMenu(props) {
     defaultOpen: defaultOpenProp
   } = props;
   const store = Ariakit.useMenuStore();
-  const open = Ariakit.useStoreState(store, (store2) => store2.open);
-  const popover = Ariakit.useStoreState(store, (store2) => store2.popoverElement);
+  const open = Ariakit.useStoreState(store, (state) => state.open);
+  const popover = Ariakit.useStoreState(store, (state) => state.popoverElement);
   React.useEffect(
     function syncPopoverWithOpenState() {
       if (popover?.isConnected) {
@@ -37,47 +38,62 @@ function DropdownMenu(props) {
     }
   );
 }
-const DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Ariakit.Menu,
-    {
-      portal: !supportsPopover,
-      unmountOnHide: true,
-      ...props,
-      style: { zIndex: supportsPopover ? void 0 : 9999, ...props.style },
-      wrapperProps: { popover: "manual" },
-      className: cx("\u{1F95D}-dropdown-menu", props.className),
-      ref: forwardedRef
-    }
-  );
-});
-const DropdownMenuButton = React.forwardRef((props, forwardedRef) => {
-  const { accessibleWhenDisabled = true, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    Ariakit.MenuButton,
-    {
-      accessibleWhenDisabled: true,
-      render: /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
-        children,
-        /* @__PURE__ */ jsx(DisclosureArrow, {})
-      ] }),
-      ...rest,
-      className: cx("\u{1F95D}-dropdown-menu-button", props.className),
-      ref: forwardedRef
-    }
-  );
-});
-const DropdownMenuItem = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Ariakit.MenuItem,
-    {
-      accessibleWhenDisabled: true,
-      ...props,
-      render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
-      ref: forwardedRef
-    }
-  );
-});
+const DropdownMenuContent = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Menu,
+      {
+        portal: !supportsPopover,
+        unmountOnHide: true,
+        ...props,
+        style: { zIndex: supportsPopover ? void 0 : 9999, ...props.style },
+        wrapperProps: { popover: "manual" },
+        className: cx("\u{1F95D}-dropdown-menu", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const DropdownMenuButton = forwardRef(
+  (props, forwardedRef) => {
+    const { accessibleWhenDisabled = true, children, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Ariakit.MenuButton,
+      {
+        accessibleWhenDisabled: true,
+        render: /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
+          children,
+          /* @__PURE__ */ jsx(DisclosureArrow, {})
+        ] }),
+        ...rest,
+        className: cx("\u{1F95D}-dropdown-menu-button", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const DropdownMenuItem = forwardRef(
+  (props, forwardedRef) => {
+    const { shortcuts, ...rest } = props;
+    const shortcutKeys = React.useMemo(() => {
+      return typeof shortcuts === "string" ? shortcuts.split("+").map((key) => key.trim()) : [];
+    }, [shortcuts]);
+    const hasShortcuts = shortcutKeys.length > 0;
+    return /* @__PURE__ */ jsxs(
+      Ariakit.MenuItem,
+      {
+        accessibleWhenDisabled: true,
+        ...rest,
+        render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
+          hasShortcuts && /* @__PURE__ */ jsx("span", { className: "\u{1F95D}-dropdown-menu-item-shortcuts", children: shortcutKeys.map((key, index) => /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`)) })
+        ]
+      }
+    );
+  }
+);
 export {
   DropdownMenuButton as Button,
   DropdownMenuContent as Content,

package/dist/bricks/Field.d.ts

@@ -1,11 +1,31 @@
 import * as React from "react";
-import type { BaseProps } from "./~utils.js";
+import { type BaseProps } from "./~utils.js";
 interface FieldProps extends BaseProps {
     /**
      * Allows overriding the default block layout for text controls.
      */
     layout?: "inline";
 }
-export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A container for form controls. It manages ID associations provides a consistent layout and spacing.
+ *
+ * Example:
+ * ```tsx
+ * <Field>
+ *   <Label>Label</Label>
+ *   <TextBox.Input />
+ * </Field>
+ * ```
+ *
+ * Supports a `layout` prop, which can be set to `inline` to align the label and control horizontally.
+ *
+ * Should contain a `Label` component paired with a form control. Supported form controls include:
+ * - `TextBox.Input`
+ * - `TextBox.Textarea`
+ * - `Checkbox`
+ * - `Radio`
+ * - `Switch`
+ */
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 export declare function useFieldId(): string | undefined;
 export {};

package/dist/bricks/Field.js

@@ -2,21 +2,20 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
-const Field = React.forwardRef(
-  (props, forwardedRef) => {
-    const fieldId = React.useId();
-    const { className, layout, ...rest } = props;
-    return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(
-      Ariakit.Role,
-      {
-        ...rest,
-        className: cx("\u{1F95D}-field", className),
-        "data-kiwi-layout": layout,
-        ref: forwardedRef
-      }
-    ) });
-  }
-);
+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(
+    Ariakit.Role,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-field", className),
+      "data-kiwi-layout": layout,
+      ref: forwardedRef
+    }
+  ) });
+});
 const FieldIdContext = React.createContext(void 0);
 function useFieldId() {
   return React.useContext(FieldIdContext);

package/dist/bricks/Icon.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { BaseProps } from "./~utils.js";
+import { type BaseProps } from "./~utils.js";
 interface IconProps extends Omit<BaseProps<"svg">, "children"> {
     /** URL of the symbol sprite. */
     href?: string;
@@ -11,7 +11,7 @@ interface IconProps extends Omit<BaseProps<"svg">, "children"> {
  * It uses an external symbol sprite to render the icon based on the specified `size`.
  *
  * ```tsx
- * const arrowIcon = new URL("@itwin/itwinui-icons/icons/arrow.svg", import.meta.url).href;
+ * const arrowIcon = new URL("@itwin/itwinui-icons/arrow.svg", import.meta.url).href;
  * <Icon href={arrowIcon} />
  * ```
  *
@@ -23,7 +23,7 @@ interface IconProps extends Omit<BaseProps<"svg">, "children"> {
  *
  * **Note**: This component is meant to be used with decorative icons, so it adds `aria-hidden` by default.
  */
-export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 interface DisclosureArrowProps extends Omit<BaseProps<"svg">, "children"> {
     /**
      * Which direction should the arrow point towards?
@@ -31,5 +31,5 @@ interface DisclosureArrowProps extends Omit<BaseProps<"svg">, "children"> {
      */
     direction?: "down" | "right";
 }
-export declare const DisclosureArrow: React.ForwardRefExoticComponent<DisclosureArrowProps & React.RefAttributes<SVGSVGElement>>;
+export declare const DisclosureArrow: React.ForwardRefExoticComponent<DisclosureArrowProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 export {};

package/dist/bricks/Icon.js

@@ -2,57 +2,58 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-const Icon = React.forwardRef(
+import { forwardRef } from "./~utils.js";
+const Icon = forwardRef((props, forwardedRef) => {
+  const { href, size = "regular", ...rest } = props;
+  const iconId = toIconId(size);
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.svg,
+    {
+      "data-kiwi-size": size,
+      "aria-hidden": true,
+      ...rest,
+      className: cx("\u{1F95D}-icon", props.className),
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("use", { href: `${props.href}#${iconId}` })
+    }
+  );
+});
+function toIconId(size) {
+  if (size === "large") return "icon-large";
+  return "icon";
+}
+const DisclosureArrow = forwardRef(
   (props, forwardedRef) => {
-    const { href, size = "regular", ...rest } = props;
-    const iconId = toIconId(size);
+    const { direction = "down", ...rest } = props;
+    const path = React.useMemo(() => {
+      switch (direction) {
+        case "down":
+          return /* @__PURE__ */ jsx("path", { d: "M8 10 5 7h6l-3 3Z" });
+        case "right":
+          return /* @__PURE__ */ jsx("path", { d: "M7 11V5l3 3-3 3Z" });
+      }
+    }, [direction]);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.svg,
+      Icon,
       {
-        "data-kiwi-size": size,
-        "aria-hidden": true,
         ...rest,
-        className: cx("\u{1F95D}-icon", props.className),
-        ref: forwardedRef,
-        children: /* @__PURE__ */ jsx("use", { href: `${props.href}#${iconId}` })
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            children: path
+          }
+        ),
+        className: cx("\u{1F95D}-disclosure-arrow", props.className),
+        ref: forwardedRef
       }
     );
   }
 );
-function toIconId(size) {
-  if (size === "large") return "icon-large";
-  return "icon";
-}
-const DisclosureArrow = React.forwardRef((props, forwardedRef) => {
-  const { direction = "down", ...rest } = props;
-  const path = React.useMemo(() => {
-    switch (direction) {
-      case "down":
-        return /* @__PURE__ */ jsx("path", { d: "M8 10 5 7h6l-3 3Z" });
-      case "right":
-        return /* @__PURE__ */ jsx("path", { d: "M7 11V5l3 3-3 3Z" });
-    }
-  }, [direction]);
-  return /* @__PURE__ */ jsx(
-    Icon,
-    {
-      ...rest,
-      render: /* @__PURE__ */ jsx(
-        Ariakit.Role.svg,
-        {
-          width: "16",
-          height: "16",
-          fill: "currentColor",
-          viewBox: "0 0 16 16",
-          render: props.render,
-          children: path
-        }
-      ),
-      className: cx("\u{1F95D}-disclosure-arrow", props.className),
-      ref: forwardedRef
-    }
-  );
-});
 export {
   DisclosureArrow,
   Icon

package/dist/bricks/IconButton.d.ts

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Button } from "./Button.js";
 interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>, "children" | "tone"> {
     /**
@@ -32,7 +31,7 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
  * ```tsx
  * <IconButton
  *   label="Reveal full content"
- *   icon={new URL("@itwin/itwinui-icons/icons/arrow.svg", import.meta.url).href}
+ *   icon={new URL("@itwin/itwinui-icons/arrow.svg", import.meta.url).href}
  * />
  * ```
  *
@@ -55,8 +54,9 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
  *   isActive={isActive}
  *   onClick={() => setIsActive(!isActive)}
  * />
+ * ```
  */
-export declare const IconButton: React.ForwardRefExoticComponent<(Omit<IconButtonBaseProps & {
+export declare const IconButton: import("react").ForwardRefExoticComponent<(Omit<IconButtonBaseProps & {
     variant: "ghost";
     /**
      * Whether the button is in a toggled state and currently "active" (toggled on).
@@ -75,5 +75,5 @@ export declare const IconButton: React.ForwardRefExoticComponent<(Omit<IconButto
 }, "ref"> | Omit<IconButtonBaseProps & {
     variant?: Omit<React.ComponentProps<typeof Button>["variant"], "ghost">;
     isActive?: never;
-}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+}, "ref">) & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
 export {};

package/dist/bricks/IconButton.js

@@ -1,30 +1,32 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
 import { Button } from "./Button.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { Icon } from "./Icon.js";
 import { Tooltip } from "./Tooltip.js";
-const IconButton = React.forwardRef((props, forwardedRef) => {
-  const { label, icon, isActive, labelVariant, ...rest } = props;
-  const button = /* @__PURE__ */ jsxs(
-    Button,
-    {
-      "aria-pressed": isActive,
-      ...rest,
-      className: cx("\u{1F95D}-icon-button", props.className),
-      ref: forwardedRef,
-      children: [
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: label }),
-        typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon
-      ]
+import { forwardRef } from "./~utils.js";
+const IconButton = forwardRef(
+  (props, forwardedRef) => {
+    const { label, icon, isActive, labelVariant, ...rest } = props;
+    const button = /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-pressed": isActive,
+        ...rest,
+        className: cx("\u{1F95D}-icon-button", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: label }),
+          typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon
+        ]
+      }
+    );
+    if (labelVariant === "visually-hidden") {
+      return button;
     }
-  );
-  if (labelVariant === "visually-hidden") {
-    return button;
+    return /* @__PURE__ */ jsx(Tooltip, { content: label, type: "none", children: button });
   }
-  return /* @__PURE__ */ jsx(Tooltip, { content: label, type: "none", children: button });
-});
+);
 export {
   IconButton
 };

package/dist/bricks/Kbd.d.ts

@@ -1,5 +1,4 @@
-import * as React from "react";
-import type { BaseProps } from "./~utils.js";
+import { type BaseProps } from "./~utils.js";
 interface KbdProps extends BaseProps<"kbd"> {
     /** @default "solid" */
     variant?: "solid" | "muted" | "ghost";
@@ -12,5 +11,5 @@ interface KbdProps extends BaseProps<"kbd"> {
  * <Kbd>Ctrl</Kbd> <Kbd>S</Kbd>
  * ```
  */
-export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist/bricks/Kbd.js

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

package/dist/bricks/Label.d.ts

@@ -1,6 +1,25 @@
-import * as React from "react";
-import type { BaseProps } from "./~utils.js";
+import { type BaseProps } from "./~utils.js";
 interface LabelProps extends BaseProps<"label"> {
 }
-export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * A styled wrapper over the HTML `<label>` element, used for labelling form controls.
+ *
+ * Can be used standalone:
+
+ * ```tsx
+ * <Label htmlFor="my-input">Label</Label>
+ * <TextBox.Input id="my-input" />
+ * ```
+ *
+ * Or within a `Field` component to automatically manage ID associations:
+ *
+ * ```tsx
+ * <Field>
+ *   <Label>Label</Label>
+ *   <TextBox.Input />
+ * </Field>
+ * ```
+ *
+ */
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLElement | HTMLLabelElement>>;
 export {};

package/dist/bricks/Label.js

@@ -1,9 +1,9 @@
 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 Label = React.forwardRef((props, forwardedRef) => {
+import { forwardRef } from "./~utils.js";
+const Label = forwardRef((props, forwardedRef) => {
   const fieldId = useFieldId();
   return /* @__PURE__ */ jsx(
     Ariakit.Role.label,

package/dist/bricks/ListItem.d.ts

@@ -1,11 +1,10 @@
-import * as React from "react";
 import * as Ariakit from "@ariakit/react";
 interface ListItemProps extends Ariakit.RoleProps<"div"> {
 }
 /** @internal */
-declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ListItem: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
 interface ListItemContentProps extends Ariakit.RoleProps<"span"> {
 }
 /** @internal */
-declare const ListItemContent: React.ForwardRefExoticComponent<Omit<ListItemContentProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const ListItemContent: import("react").ForwardRefExoticComponent<Omit<ListItemContentProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
 export { ListItem as Root, ListItemContent as Content };