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

package/dist/bricks/Anchor.js

@@ -1,28 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-const Anchor = React.forwardRef(
-  (props, forwardedRef) => {
-    const { tone = "neutral", ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      Ariakit.Role.a,
-      {
-        "data-kiwi-tone": tone,
-        ...rest,
-        className: cx("\u{1F95D}-anchor", props.className),
-        render: /* @__PURE__ */ jsx(
-          Ariakit.Focusable,
-          {
-            accessibleWhenDisabled: true,
-            render: props.render || /* @__PURE__ */ jsx("a", {})
-          }
-        ),
-        ref: forwardedRef
-      }
-    );
-  }
-);
+import { Role } from "@ariakit/react/role";
+import { Focusable } from "@ariakit/react/focusable";
+import { forwardRef } from "./~utils.js";
+const Anchor = forwardRef((props, forwardedRef) => {
+  const { tone = "neutral", ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Role.a,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      className: cx("\u{1F95D}-anchor", props.className),
+      render: /* @__PURE__ */ jsx(Focusable, { accessibleWhenDisabled: true, render: props.render || /* @__PURE__ */ jsx("a", {}) }),
+      ref: forwardedRef
+    }
+  );
+});
 export {
   Anchor
 };

package/dist/bricks/Avatar.d.ts

@@ -0,0 +1,47 @@
+import { type BaseProps } from "./~utils.js";
+interface AvatarProps extends BaseProps<"span"> {
+    /**
+     * The size of the avatar.
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large" | "xlarge";
+    /**
+     * Initials that gets displayed in the absence of an image.
+     */
+    initials?: string;
+    /**
+     * Alternative text describing the avatar, typically the user's or organization's full name.
+     *
+     * When this prop is passed, the avatar gets rendered as `role="img"` and labelled
+     * using the provided text.
+     *
+     * This prop is not required if the avatar is purely decorative. By default, the avatar
+     * will be hidden from the accessibility tree.
+     */
+    alt?: string;
+    /**
+     * Image to be displayed. Can be `<img>` or `<svg>` or anything else.
+     */
+    image?: React.JSX.Element;
+}
+/**
+ * An avatar to represent a user or organization.
+ *
+ * By default, this component assumes that the avatar is decorative, so it adds `aria-hidden` by default.
+ * ```tsx
+ * <Avatar initials="JD" />
+ * ```
+ *
+ * If the avatar is semantically meaningful, the `alt` prop can be used to provide alternative text.
+ * ```tsx
+ * <Avatar initials="JD" alt="John Doe" />
+ * ```
+ *
+ * Image & size examples:
+ * ```tsx
+ * <Avatar initials="JD" alt="John Doe" size="xlarge" image={<img src="…" alt="">} />
+ * <Avatar initials="JD" alt="John Doe" size="small" image={<Icon href="…">} />
+ * ```
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
+export {};

package/dist/bricks/Avatar.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+const Avatar = forwardRef((props, forwardedRef) => {
+  const { size = "medium", initials, alt, image, children, ...rest } = props;
+  const isDecorative = !alt;
+  return /* @__PURE__ */ jsx(
+    Role.span,
+    {
+      role: isDecorative ? void 0 : "img",
+      "aria-label": isDecorative ? void 0 : alt,
+      ...rest,
+      "data-kiwi-size": size,
+      className: cx("\u{1F95D}-avatar", props.className),
+      ref: forwardedRef,
+      children: image ?? /* @__PURE__ */ jsx("abbr", { className: "\u{1F95D}-avatar-initials", "aria-hidden": "true", children: initials?.substring(0, 1) })
+    }
+  );
+});
+export {
+  Avatar
+};

package/dist/bricks/Badge.d.ts

@@ -0,0 +1,28 @@
+import { type BaseProps } from "./~utils.js";
+interface BadgeProps extends Omit<BaseProps<"span">, "children"> {
+    /**
+     * The label displayed inside the badge.
+     */
+    label: string;
+    /**
+     * The tone of the badge.
+     * @default "neutral"
+     */
+    tone?: "neutral" | "info" | "positive" | "attention" | "critical";
+    /**
+     * The variant style of the badge.
+     * @default "solid"
+     */
+    variant?: "solid" | "muted" | "outline";
+}
+/**
+ * A badge component, typically used to designate the status of an item.
+ *
+ * Example:
+ * ```tsx
+ * <Badge label="Value" />
+ * <Badge label="Value" tone="info" variant="outline" />
+ * ```
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
+export {};

package/dist/bricks/Badge.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+const Badge = forwardRef((props, forwardedRef) => {
+  const { tone = "neutral", variant = "solid", label, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Role.span,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      "data-kiwi-variant": variant,
+      className: cx("\u{1F95D}-badge", props.className),
+      ref: forwardedRef,
+      children: label
+    }
+  );
+});
+export {
+  Badge
+};

package/dist/bricks/Button.d.ts

@@ -1,7 +1,10 @@
-import * as React from "react";
-import type { FocusableProps } from "./~utils.js";
+import { type FocusableProps } from "./~utils.js";
 type ButtonProps = FocusableProps<"button"> & ({
-    /** @default "solid" */
+    /**
+     * The variant of the button, i.e. solid, outline, or ghost.
+     *
+     * @default "solid"
+     */
     variant?: "solid";
     /**
      * The tone of the button. Most buttons should be neutral.
@@ -16,5 +19,25 @@ type ButtonProps = FocusableProps<"button"> & ({
     variant: "outline" | "ghost";
     tone?: never;
 });
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A styled button element which allows the user to perform an action when clicked.
+ *
+ * Example:
+ * ```tsx
+ * <Button onClick={() => doSomething()}>Click me</Button>
+ * ```
+ *
+ * Start and end icons can be added by passing `Icon` as children.
+ *
+ * ```tsx
+ * <Button>
+ *   <Icon href={…} />
+ *   Click me
+ *   <Icon href={…} />
+ * </Button>
+ * ```
+ *
+ * The button's appearance can be customized using the `variant` and `tone` props.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
 export {};

package/dist/bricks/Button.js

@@ -1,21 +1,30 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-const Button = React.forwardRef((props, forwardedRef) => {
-  const { variant = "solid", tone = "neutral", ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    Ariakit.Button,
-    {
-      accessibleWhenDisabled: true,
-      "data-kiwi-variant": variant,
-      "data-kiwi-tone": tone,
-      ...rest,
-      className: cx("\u{1F95D}-button", props.className),
-      ref: forwardedRef
-    }
-  );
-});
+import { Button as AkButton } from "@ariakit/react/button";
+import { forwardRef } from "./~utils.js";
+import { useGhostAlignment } from "./~utils.GhostAligner.js";
+const Button = forwardRef(
+  (props, forwardedRef) => {
+    const { variant = "solid", tone = "neutral", ...rest } = props;
+    const ghostAlignment = useGhostAlignment();
+    return /* @__PURE__ */ jsx(
+      AkButton,
+      {
+        accessibleWhenDisabled: true,
+        ...rest,
+        "data-kiwi-variant": variant,
+        "data-kiwi-tone": tone,
+        "data-kiwi-ghost-align": variant === "ghost" ? ghostAlignment : void 0,
+        className: cx(
+          "\u{1F95D}-button",
+          { "\u{1F95D}-ghost-aligner": variant === "ghost" },
+          props.className
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
   Button
 };

package/dist/bricks/Checkbox.d.ts

@@ -1,9 +1,23 @@
-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" | "checked" | "defaultChecked">;
-type CheckboxOwnProps = Pick<Ariakit.CheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
+type CheckboxOwnProps = Pick<AkCheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
 interface CheckboxProps extends InputBaseProps, CheckboxOwnProps {
 }
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * A styled checkbox element, typically used for selecting one or more options from a list.
+ *
+ * Works well the `Field` and `Label` components.
+ *
+ * ```tsx
+ * <Field>
+ *   <Label>Check me</Label>
+ *   <Checkbox />
+ * </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 Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLElement | HTMLInputElement>>;
 export {};

package/dist/bricks/Checkbox.js

@@ -1,21 +1,31 @@
 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 Checkbox = React.forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
-  return /* @__PURE__ */ jsx(
-    Ariakit.Checkbox,
-    {
-      accessibleWhenDisabled: true,
-      id: fieldId,
-      ...props,
-      className: cx("\u{1F95D}-checkbox", props.className),
-      ref: forwardedRef
-    }
-  );
-});
+import {
+  Checkbox as AkCheckbox
+} from "@ariakit/react/checkbox";
+import { FieldControl } from "./Field.js";
+import { forwardRef } from "./~utils.js";
+const Checkbox = 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}-checkbox", props.className),
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
 export {
   Checkbox
 };

package/dist/bricks/Chip.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface ChipProps extends Omit<BaseProps<"div">, "children"> {
+    /**
+     * The label displayed inside the chip.
+     */
+    label: string;
+    /**
+     * The variant style of the Chip.
+     * Use "solid" for primary states and "outline" for less prominent states.
+     *
+     * @default "solid"
+     */
+    variant?: "solid" | "outline";
+    /**
+     * Callback invoked when the dismiss ("❌") button is clicked.
+     */
+    onDismiss?: () => void;
+}
+/**
+ * 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:
+ * ```tsx
+ * <Chip label="Value" />
+ * <Chip label="Value" variant="outline" />
+ * ```
+ */
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/Chip.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+import { IconButton } from "./IconButton.js";
+import { Dismiss } from "./Icon.js";
+const Chip = forwardRef((props, forwardedRef) => {
+  const { variant = "solid", onDismiss, label, ...rest } = props;
+  const baseId = React.useId();
+  const labelId = `${baseId}-label`;
+  const dismissIconId = `${baseId}-dismiss`;
+  return /* @__PURE__ */ jsxs(
+    Role.div,
+    {
+      "data-kiwi-variant": variant,
+      ...rest,
+      className: cx("\u{1F95D}-chip", props.className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
+        onDismiss && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            id: dismissIconId,
+            className: "\u{1F95D}-chip-dismiss-button",
+            variant: "ghost",
+            "aria-labelledby": `${dismissIconId} ${labelId}`,
+            label: "Dismiss",
+            labelVariant: "visually-hidden",
+            icon: /* @__PURE__ */ jsx(Dismiss, {}),
+            onClick: onDismiss
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Chip
+};

package/dist/bricks/Description.d.ts

@@ -0,0 +1,19 @@
+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: import("react").ForwardRefExoticComponent<DescriptionProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/Description.js

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

package/dist/bricks/Divider.d.ts

@@ -1,7 +1,6 @@
-import * as React from "react";
-import * as Ariakit from "@ariakit/react";
-import type { BaseProps } from "./~utils.js";
-interface DividerProps extends BaseProps<"hr">, Pick<Ariakit.SeparatorProps, "orientation"> {
+import { type SeparatorProps } from "@ariakit/react/separator";
+import { type BaseProps } from "./~utils.js";
+interface DividerProps extends BaseProps<"hr">, Pick<SeparatorProps, "orientation"> {
     /**
      * If true, the divider will be purely presentational and will not have any associated semantics.
      *
@@ -10,10 +9,10 @@ interface DividerProps extends BaseProps<"hr">, Pick<Ariakit.SeparatorProps, "or
     presentational?: boolean;
 }
 /**
- * The `Divider` component can be used for grouping and dividing content within a layout.
+ * A styled "separator" element (e.g. `<hr>`), useful for grouping and dividing content within a layout.
  *
  * A `Divider` can be oriented horizontally or vertically (using the `orientation` prop),
  * and can be a semantic divider or a purely presentational one (using the `presentational` prop).
  */
-export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLElement | HTMLHRElement>>;
 export {};

package/dist/bricks/Divider.js

@@ -1,22 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-const Divider = React.forwardRef(
-  (props, forwardedRef) => {
-    const { presentational, ...rest } = props;
-    const Comp = presentational ? Ariakit.Role : Ariakit.Separator;
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ...rest,
-        className: cx("\u{1F95D}-divider", props.className),
-        "data-kiwi-orientation": props.orientation,
-        ref: forwardedRef
-      }
-    );
-  }
-);
+import { Role } from "@ariakit/react/role";
+import { Separator } from "@ariakit/react/separator";
+import { forwardRef } from "./~utils.js";
+const Divider = forwardRef((props, forwardedRef) => {
+  const { presentational, ...rest } = props;
+  const Comp = presentational ? Role : Separator;
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-divider", props.className),
+      "data-kiwi-orientation": props.orientation,
+      ref: forwardedRef
+    }
+  );
+});
 export {
   Divider
 };

package/dist/bricks/DropdownMenu.d.ts

@@ -1,22 +1,28 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
-import { type FocusableProps } from "./~utils.js";
-interface DropdownMenuProps extends Pick<Ariakit.MenuProviderProps, "children" | "placement" | "open" | "setOpen" | "defaultOpen"> {
+import { type AnyString, type BaseProps, type FocusableProps } from "./~utils.js";
+import { type MenuItemCheckboxProps, type MenuProviderProps } from "@ariakit/react/menu";
+import { type PredefinedSymbol } from "./Kbd.internal.js";
+interface DropdownMenuProps extends Pick<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 label="Add" />
+ *     <DropdownMenu.Item label="Edit" />
+ *     <DropdownMenu.Item label="Delete" />
+ *   </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 +30,82 @@ 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>>;
-interface DropdownMenuItemProps extends FocusableProps {
+/**
+ * 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 Omit<FocusableProps, "children">, Partial<Pick<DropdownMenuItemShortcutsProps, "shortcuts"> & Pick<DropdownMenuIconProps, "icon">> {
+    /** The primary text label for the menu-item. */
+    label: React.ReactNode;
 }
-declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
-export { DropdownMenu as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, };
+/**
+ * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu.Item label="Add" />
+ * <DropdownMenu.Item label="Edit" />
+ * ```
+ */
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface DropdownMenuItemShortcutsProps extends BaseProps {
+    /**
+     * 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. If one of the keys is
+     * recognized as a symbol name or a modifier key, it will be displayed as a symbol.
+     *
+     * ```tsx
+     * shortcuts="Control+Enter" // A multi-key shortcut, displayed as "Ctrl ⏎"
+     * ```
+     */
+    shortcuts: AnyString | `${PredefinedSymbol}+${AnyString}`;
+}
+interface DropdownMenuIconProps extends BaseProps {
+    /**
+     * An optional icon displayed before the menu-item label.
+     *
+     * Can be a URL of an SVG from the `@itwin/itwinui-icons` package,
+     * or a custom JSX icon.
+     */
+    icon?: string | React.JSX.Element;
+}
+interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps, "onChange" | "children">, Pick<MenuItemCheckboxProps, "checked" | "onChange" | "name" | "value">, Pick<DropdownMenuItemProps, "label" | "icon"> {
+}
+/**
+ * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu.CheckboxItem name="add" label="Add" />
+ * <DropdownMenu.CheckboxItem name="edit" label="Edit" />
+ * ```
+ */
+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, };