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

package/CHANGELOG.md

@@ -1,5 +1,107 @@
 # Changelog
 
+## 5.0.0-alpha.11
+
+- Added `error` prop to `<Tree.Item>`.
+- Implemented fallback strategy for `<Icon>`, so that non-HTTP URLs are fetched at runtime.
+- Added `unstable_htmlSanitizer` prop to `<Root>`.
+- Added `tone="accent"` support to `<Badge>`.
+- Adjusted `DropdownMenu` and `Tooltip` to be portaled by default.
+- Styling changes:
+  - Added shimmer animation to `<Skeleton>`.
+  - Updated `<Spinner>` visuals and animation to match `<ProgressBar>`.
+- Bug fixes:
+  - Fixed styles not unloading when `<Root>` is unmounted.
+  - Fixed `<Anchor>` underline not showing when rendered as a `<button>`.
+  - Fixed `<Tree.ItemAction visible>` affecting the visibility of all actions.
+  - Fixed vertical centering in `<Tab.TabList>`.
+  - Fixed `Tab` active stripe positioning and animation.
+  - Fixed `<Button variant="solid" tone="accent">` icon fill in pressed state.
+
+## 5.0.0-alpha.10
+
+- Added initial `<Skeleton>` component.
+- Added initial `<ProgressBar>` component.
+- Fixed various UX and accessibility issues related to `<Tree.Item>` actions visibility.
+  - Actions no longer get stuck.
+  - Tooltips can now be hovered.
+  - Focus correctly returns to actions after menu closes.
+  - Keyboard events no longer affect the main treeitem.
+- Reduced `<Field>` spacing.
+- Experimental changes in `<Icon>` component's `href` handling.
+
+## 5.0.0-alpha.9
+
+- Added `dot` prop to `<IconButton>` for showing a small "dot" next to the icon.
+- Added `unstable_decorations` prop to `<Tree.Item>` for showing multiple decorations (e.g. icons).
+- **breaking**: Replaced `<DropdownMenu.Item>` children with new `label` prop (see [#423](https://github.com/iTwin/design-system/pull/423)).
+- Added `icon` prop to `<DropdownMenu.Item>` and `<DropdownMenu.CheckboxItem>`.
+- Updated the `shortcuts` prop of `<DropdownMenu.Item>` to recognize predefined "symbols" (e.g. modifier keys).
+- Updated `<Anchor>` and `<Badge>` visuals to match the latest design.
+- Fixed forced-colors mode styling for `DropdownMenu`.
+
+## 5.0.0-alpha.8
+
+- Added `description` prop to `<Tree.Item>` component for showing "sublabels".
+- **breaking**: Updated `<Text>` component to require `variant` prop.
+- (soft breaking) Removed `children` from `<Tree.Item>` prop types.
+- Updated `DropdownMenu` padding.
+
+## 5.0.0-alpha.7
+
+- Added new `<Avatar>` component.
+- Added new `<Badge>` component.
+- Added `alt` prop to `<Icon>` component.
+- Fixed all color tokens to use the correct `oklch` values.
+- Fixed an issue where `<Tree.Item>` was not respecting its `style` prop.
+
+## 5.0.0-alpha.6
+
+- **breaking**: All CSS variables have been renamed to use the `--ids` prefix. See [#369](https://github.com/iTwin/kiwi/pull/369).
+- **breaking**: Some CSS variables were renamed further. See [#368](https://github.com/iTwin/kiwi/pull/368).
+  - Notably, the "surface" backgrounds have been split into two different "page" and "elevation" scales.
+- Background colors have been updated to match the latest design.
+- All styles are now loaded into `@layer itwinui`. The one exception is the CSS reset which remains in `@layer reset`.
+- `<Field>` now respects the order of `<Description>`s when creating associations.
+
+## 5.0.0-alpha.5
+
+- **breaking**: `Tree` API has changed to require flat structure, with explicit ARIA props (see [#300](https://github.com/iTwin/kiwi/pull/300)). `<Tree.Item>` no longer allows passing `children`.
+- **breaking**: `Tree.Item`s `action` prop now requires a list of `<Tree.ItemAction>` components (see [#355](https://github.com/iTwin/kiwi/pull/355) and [#362](https://github.com/iTwin/kiwi/pull/362)).
+- **breaking**: Replaced `<Chip>` children with new `label` prop (see [#349](https://github.com/iTwin/kiwi/pull/349)).
+- Added `<Tree.ItemAction>` component with `visible` prop for more granular control over action visibility.
+- Updated the layout of `<Field>` so that `<Description>` is placed in the best spot according on the label position and control type.
+- `<Field>` now considers the presence of explicit control `id`s when creating associations.
+
+## 5.0.0-alpha.4
+
+- Added `onDismiss` prop and dismiss button to `<Chip>`.
+- Fixed a rare issue where `TextBox` was still editable when `disabled`.
+- Fixed "forced colors" mode styling for `<Button>` and `<IconButton>`.
+- Explicitly set typography styles on `<Root>` to improve compatibility with iTwinUI theme bridge.
+- Updated `DropdownMenu` visuals.
+
+## 5.0.0-alpha.3
+
+- Added `<DropdownMenu.CheckboxItem>` component for rendering menu items with a checkable state.
+- Added `variant` prop to `<Select.HtmlSelect>` component for displaying different visual variants of the component.
+- Updated event handling of `Tree` components to avoid firing `onClick` event of the `<Tree.Item>` component when the expander or one of the actions is clicked.
+- Updated `Tree` components to implement a tree view pattern instead of the previously used nested list approach.
+- Updated size and spacing of `<Tree.Item>`, `<DropdownMenu.Item>` and `<Select>` components.
+- Fixed `<Label>` component alignment with `TextBox` components.
+- Fixed action rendering of `<Tree.Item>` component.
+- Fixed `<Checkbox>` component styling, which caused the mixed checkbox to be displayed as unchecked in the light theme.
+
+## 5.0.0-alpha.2
+
+- Added initial `Tree` component, exposed as `<Tree.Root>` and `<Tree.Item>` subcomponents.
+- Added initial `<Spinner>` component for indicating quick, indeterminate progress.
+- Added `<Description>` component to be used within a `<Field>`.
+- Added initial `<Chip>` component.
+- Added `symbol` prop to `<Kbd>` for displaying predefined symbols.
+- Added `focusable` prop to `<Tabs.TabPanel>` component.
+- Fixed a visual issue where light color-scheme was using dark shadows.
+
 ## 5.0.0-alpha.1
 
 - Added `<Text>` component with a `variant` prop to support all text styles from Figma.

package/LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © 2024 Bentley Systems, Incorporated. All rights reserved.
+Copyright © 2025 Bentley Systems, Incorporated. All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -1,10 +1,10 @@
 # @itwin/itwinui-react
 
-A React component library for the Kiwi design system.
+A React component library for the next evolution of the iTwinUI design system.
 
 ## Usage
 
-To use components from the Kiwi design system in your app, you’ll need to wrap your app’s UI with Kiwi’s `<Root>` component, and specify the required `colorScheme` and `density` props:
+To use components from the iTwinUI design system in your app, you’ll need to wrap your app’s UI with iTwinUI's `<Root>` component, and specify the required `colorScheme` and `density` props:
 
 ```jsx
 import { Root } from "@itwin/itwinui-react/bricks";
@@ -12,18 +12,18 @@ import { Root } from "@itwin/itwinui-react/bricks";
 export function App() {
 	return (
 		<Root colorScheme="dark" density="dense">
-			{/* Use Kiwi design system components here */}
+			{/* Use design system components here */}
 		</Root>
 	);
 }
 ```
 
-This will ensure Kiwi’s styles are loaded to either the document or the encompassing shadow root.
+This will ensure iTwinUI's styles are loaded to either the document or the encompassing shadow root.
 
 Once that’s in place you can import and use components from `@itwin/itwinui-react/bricks`.
 
 ## Contributing
 
-Are you interested in helping kiwi grow and expand? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/kiwi/issues).
+Are you interested in helping iTwinUI grow and expand? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/design-system/issues).
 
-If you're interested in contributing code, please read [`CONTRIBUTING.md`](https://github.com/iTwin/kiwi/blob/main/CONTRIBUTING.md) for more information.
+If you're interested in contributing code, please read [`CONTRIBUTING.md`](https://github.com/iTwin/design-system/blob/main/CONTRIBUTING.md) for more information.

package/dist/DEV/bricks/Anchor.js

@@ -1,22 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+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(
-    Ariakit.Role.a,
+    Role.a,
     {
-      "data-kiwi-tone": tone,
       ...rest,
+      "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-anchor", props.className),
-      render: /* @__PURE__ */ jsx(
-        Ariakit.Focusable,
-        {
-          accessibleWhenDisabled: true,
-          render: props.render || /* @__PURE__ */ jsx("a", {})
-        }
-      ),
+      render: /* @__PURE__ */ jsx(Focusable, { accessibleWhenDisabled: true, render: props.render || /* @__PURE__ */ jsx("a", {}) }),
       ref: forwardedRef
     }
   );

package/dist/DEV/bricks/Avatar.js

@@ -0,0 +1,24 @@
+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) })
+    }
+  );
+});
+DEV: Avatar.displayName = "Avatar";
+export {
+  Avatar
+};

package/dist/DEV/bricks/Badge.js

@@ -0,0 +1,22 @@
+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
+    }
+  );
+});
+DEV: Badge.displayName = "Badge";
+export {
+  Badge
+};

package/dist/DEV/bricks/Button.js

@@ -1,18 +1,25 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+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(
-      Ariakit.Button,
+      AkButton,
       {
         accessibleWhenDisabled: true,
+        ...rest,
         "data-kiwi-variant": variant,
         "data-kiwi-tone": tone,
-        ...rest,
-        className: cx("\u{1F95D}-button", props.className),
+        "data-kiwi-ghost-align": variant === "ghost" ? ghostAlignment : void 0,
+        className: cx(
+          "\u{1F95D}-button",
+          { "\u{1F95D}-ghost-aligner": variant === "ghost" },
+          props.className
+        ),
         ref: forwardedRef
       }
     );

package/dist/DEV/bricks/Checkbox.js

@@ -1,19 +1,27 @@
 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 Checkbox = 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}-checkbox", props.className),
-        ref: forwardedRef
+        type: "checkable",
+        id,
+        render: /* @__PURE__ */ jsx(
+          AkCheckbox,
+          {
+            accessibleWhenDisabled: true,
+            ...rest,
+            className: cx("\u{1F95D}-checkbox", props.className),
+            ref: forwardedRef
+          }
+        )
       }
     );
   }

package/dist/DEV/bricks/Chip.js

@@ -0,0 +1,42 @@
+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
+          }
+        )
+      ]
+    }
+  );
+});
+DEV: Chip.displayName = "Chip";
+export {
+  Chip
+};

package/dist/DEV/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/DEV/bricks/Divider.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+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 ? Ariakit.Role : Ariakit.Separator;
+  const Comp = presentational ? Role : Separator;
   return /* @__PURE__ */ jsx(
     Comp,
     {

package/dist/DEV/bricks/DropdownMenu.js

@@ -1,12 +1,24 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import * as ListItem from "./ListItem.js";
+import * as ListItem from "./~utils.ListItem.js";
 import { Button } from "./Button.js";
 import { Kbd } from "./Kbd.js";
-import { DisclosureArrow } from "./Icon.js";
-import { forwardRef, supportsPopover } from "./~utils.js";
+import { Checkmark, DisclosureArrow, Icon } from "./Icon.js";
+import {
+  forwardRef
+} from "./~utils.js";
+import { usePopoverApi } from "./~hooks.js";
+import {
+  MenuProvider,
+  useMenuContext,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItemCheckbox
+} from "@ariakit/react/menu";
+import { useStoreState } from "@ariakit/react/store";
+import { predefinedSymbols } from "./Kbd.internal.js";
 function DropdownMenu(props) {
   const {
     children,
@@ -15,21 +27,9 @@ function DropdownMenu(props) {
     setOpen: setOpenProp,
     defaultOpen: defaultOpenProp
   } = props;
-  const store = Ariakit.useMenuStore();
-  const open = Ariakit.useStoreState(store, (state) => state.open);
-  const popover = Ariakit.useStoreState(store, (state) => state.popoverElement);
-  React.useEffect(
-    function syncPopoverWithOpenState() {
-      if (popover?.isConnected) {
-        popover?.togglePopover?.(open);
-      }
-    },
-    [open, popover]
-  );
   return /* @__PURE__ */ jsx(
-    Ariakit.MenuProvider,
+    MenuProvider,
     {
-      store,
       placement,
       defaultOpen: defaultOpenProp,
       open: openProp,
@@ -41,14 +41,16 @@ function DropdownMenu(props) {
 DEV: DropdownMenu.displayName = "DropdownMenu.Root";
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
+    const popover = usePopoverApi(useMenuContext());
     return /* @__PURE__ */ jsx(
-      Ariakit.Menu,
+      Menu,
       {
-        portal: !supportsPopover,
+        portal: true,
         unmountOnHide: true,
         ...props,
-        style: { zIndex: supportsPopover ? void 0 : 9999, ...props.style },
-        wrapperProps: { popover: "manual" },
+        gutter: 4,
+        style: { ...popover.style, ...props.style },
+        wrapperProps: popover.wrapperProps,
         className: cx("\u{1F95D}-dropdown-menu", props.className),
         ref: forwardedRef
       }
@@ -59,8 +61,9 @@ DEV: DropdownMenuContent.displayName = "DropdownMenu.Content";
 const DropdownMenuButton = forwardRef(
   (props, forwardedRef) => {
     const { accessibleWhenDisabled = true, children, ...rest } = props;
+    const open = useStoreState(useMenuContext(), (state) => state?.open);
     return /* @__PURE__ */ jsx(
-      Ariakit.MenuButton,
+      MenuButton,
       {
         accessibleWhenDisabled: true,
         render: /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
@@ -69,6 +72,7 @@ const DropdownMenuButton = forwardRef(
         ] }),
         ...rest,
         className: cx("\u{1F95D}-dropdown-menu-button", props.className),
+        "data-has-popover-open": open || void 0,
         ref: forwardedRef
       }
     );
@@ -77,29 +81,104 @@ const DropdownMenuButton = forwardRef(
 DEV: DropdownMenuButton.displayName = "DropdownMenu.Button";
 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;
+    const { label, shortcuts, icon, ...rest } = props;
     return /* @__PURE__ */ jsxs(
-      Ariakit.MenuItem,
+      MenuItem,
       {
         accessibleWhenDisabled: true,
         ...rest,
         render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
+        className: cx("\u{1F95D}-dropdown-menu-item", props.className),
         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}`)) })
+          icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+          /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
+          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null
         ]
       }
     );
   }
 );
 DEV: DropdownMenuItem.displayName = "DropdownMenu.Item";
+const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
+  const { shortcuts, ...rest } = props;
+  const shortcutKeys = React.useMemo(() => {
+    return shortcuts.split("+").map((key) => ({
+      key: key.trim(),
+      isSymbol: key in predefinedSymbols
+    }));
+  }, [shortcuts]);
+  return /* @__PURE__ */ jsx(
+    ListItem.Decoration,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-dropdown-menu-item-shortcuts", props.className),
+      ref: forwardedRef,
+      children: shortcutKeys.map(({ key, isSymbol }, index) => {
+        if (isSymbol) {
+          return /* @__PURE__ */ jsx(
+            Kbd,
+            {
+              variant: "ghost",
+              symbol: key
+            },
+            `${key + index}`
+          );
+        }
+        return /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`);
+      })
+    }
+  );
+});
+DEV: DropdownMenuItemShortcuts.displayName = "DropdownMenuItemShortcuts";
+const DropdownMenuIcon = forwardRef(
+  (props, forwardedRef) => {
+    const { icon, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      ListItem.Decoration,
+      {
+        render: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            href: typeof icon === "string" ? icon : void 0,
+            render: React.isValidElement(icon) ? icon : void 0
+          }
+        ),
+        ...rest,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DropdownMenuIcon.displayName = "DropdownMenuIcon";
+const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
+  const { label, icon, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    MenuItemCheckbox,
+    {
+      accessibleWhenDisabled: true,
+      value: props.defaultChecked ? "on" : void 0,
+      ...rest,
+      render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
+      className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+      ref: forwardedRef,
+      children: [
+        icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+        /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
+        /* @__PURE__ */ jsx(
+          ListItem.Decoration,
+          {
+            render: /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+          }
+        )
+      ]
+    }
+  );
+});
+DEV: DropdownMenuCheckboxItem.displayName = "DropdownMenu.CheckboxItem";
 export {
   DropdownMenuButton as Button,
+  DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
   DropdownMenu as Root