@astryxdesign/core 0.1.7 → 0.1.8-canary.0c4d8d7

package/dist/DateTimeInput/DateTimeInput.js

@@ -368,11 +368,20 @@ export function DateTimeInput({
     if (e.key === 'Escape' && popover.isOpen) {
       e.preventDefault();
       popover.hide();
+    } else if ((e.key === 'ArrowDown' || e.altKey && e.key === 'ArrowDown') && !popover.isOpen) {
+      // APG combobox: ArrowDown (and Alt+ArrowDown) opens the calendar
+      // popover from the keyboard, keeping focus in the input (forms-13).
+      e.preventDefault();
+      if (!isEffectivelyDisabled) {
+        popover.show({
+          skipAutoFocus: true
+        });
+      }
     } else if (e.key === 'Enter') {
       e.preventDefault();
       commitDatePendingInput();
     }
-  }, [popover, commitDatePendingInput]);
+  }, [popover, commitDatePendingInput, isEffectivelyDisabled]);
 
   // --- Time handlers ---
   const handleTimeInputChange = useCallback(e => {

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAwBhD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,IAAI,CAAC;IACf,UAAU,EAAE,IAAI,CAAC;CAClB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAyHD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAqOb;yBArPe,MAAM"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAwBhD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,IAAI,CAAC;IACf,UAAU,EAAE,IAAI,CAAC;CAClB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AA+HD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAyOb;yBAzPe,MAAM"}

package/dist/Dialog/Dialog.js

@@ -107,7 +107,7 @@ const styles = {
   open: {
     k1xSpc: "x78zum5",
     kSiTet: "x1hc1fzr",
-    kKVMdj: "x1ewfqum",
+    kKVMdj: "x1ewfqum x1aquc0h",
     $$css: true
   },
   backdrop: {
@@ -376,6 +376,7 @@ export function Dialog({
       ...mergeProps(themeProps('dialog', {
         variant
       }), stylex.props(styles.inlineWrapper, !isFullscreen && dynamicStyles.sizing(width, maxHeight), isFullscreen && styles.fullscreen, xstyle), className, style),
+      "data-testid": props['data-testid'],
       children: innerContent
     });
   }

package/dist/DropdownMenu/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAUtC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAMnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AA+BpD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAwQnB;yBArRe,YAAY"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAMnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AA+BpD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA4QnB;yBAzRe,YAAY"}

package/dist/DropdownMenu/DropdownMenu.js

@@ -27,6 +27,7 @@ import { usePopover } from "../Popover/usePopover.js";
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { renderDropdownItems } from "./renderDropdownItems.js";
+import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR } from "./menuItemRoles.js";
 import { DropdownMenuContext } from "./DropdownMenuContext.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useTypeahead } from "../hooks/useTypeahead.js";
@@ -186,21 +187,24 @@ export function DropdownMenu({
     popover.hide();
   }, [popover]);
 
-  // Single keyboard navigation path for both modes
+  // Single keyboard navigation path for both modes.
+  // The selector matches plain items plus selectable items
+  // (menuitemradio/menuitemcheckbox) so lab checkbox/radio rows are reachable
+  // and roved to alongside plain items — not just role="menuitem".
   const {
     listRef,
     handleKeyDown: listNavKeyDown,
     focusFirst,
     focusItem
   } = useListFocus({
-    itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
+    itemSelector: MENU_ITEM_SELECTOR,
     wrap: false,
     onEscape: closeMenu
   });
 
   // First-character typeahead over the (enabled) menu items — jump to the next
   // item whose label starts with the typed text (menus-11).
-  const getMenuItems = useCallback(() => listRef.current ? Array.from(listRef.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) : [], [listRef]);
+  const getMenuItems = useCallback(() => listRef.current ? Array.from(listRef.current.querySelectorAll(MENU_ITEM_SELECTOR)) : [], [listRef]);
   const typeahead = useTypeahead({
     getItemLabels: () => getMenuItems().map(el => el.textContent),
     onMatch: focusItem,
@@ -224,7 +228,7 @@ export function DropdownMenu({
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       const focused = document.activeElement;
-      if (focused?.getAttribute('role') === 'menuitem') {
+      if (focused && MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')) {
         focused.click();
       }
       return;

package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @file DropdownMenuCheckboxItem.tsx
+ * @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
+ * @output DropdownMenuCheckboxItem — a standalone checkable menu item.
+ * @position Sub-component; used inside DropdownMenu.
+ *
+ * A menu item that toggles an independent boolean (role="menuitemcheckbox").
+ * Unlike CheckboxInput, there is no nested native <input>: the row itself owns
+ * the role and aria-checked, per the WAI-ARIA menuitemcheckbox pattern.
+ * Keyboard navigation (arrows/typeahead) and Enter/Space activation come from
+ * the parent DropdownMenu's useListFocus + activation path, which matches
+ * menuitemcheckbox alongside plain menuitem rows.
+ *
+ * The square checkbox visual is decorative (aria-hidden) — the row owns the
+ * checked state. Its size is derived from the menu's item size (a `sm` menu
+ * gets the compact control; `md`/`lg` get the standard one) and it swaps to the
+ * inline-end of the row on coarse-pointer (touch) devices via CSS `order`, so
+ * it lands where selection toggles are conventionally placed on mobile. The
+ * checkmark uses the `check` icon from the active theme's icon registry.
+ */
+import { type ReactNode } from 'react';
+import { type IconType } from '../Icon';
+import type { BaseProps } from '../BaseProps';
+export interface DropdownMenuCheckboxItemProps extends Omit<BaseProps, 'onChange' | 'role' | 'aria-checked' | 'tabIndex'> {
+    /**
+     * Primary label text identifying the item.
+     */
+    label: ReactNode;
+    /**
+     * Secondary description text displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Icon to display before the label. Accepts a semantic icon name (see
+     * `npx astryx docs icons`) or a rendered node.
+     */
+    icon?: ReactNode | IconType;
+    /**
+     * Whether the item is checked. Controlled — pair with `onChange`.
+     */
+    value: boolean;
+    /**
+     * Callback fired with the next checked state when the item is toggled.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Whether the item is disabled. Disabled items stay focusable (via
+     * `aria-disabled`) so they remain discoverable by keyboard and assistive
+     * technology, but activation is blocked.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether toggling the item closes the menu. Checkbox items default to
+     * staying open so several can be toggled in a single session, unlike radio
+     * items which default to closing on selection.
+     * @default false
+     */
+    hasCloseOnSelect?: boolean;
+    /**
+     * Content to render after the label and description, such as a keyboard
+     * shortcut hint or badge.
+     */
+    endContent?: ReactNode;
+}
+/**
+ * A checkable dropdown menu item (role="menuitemcheckbox").
+ *
+ * Must be used inside a DropdownMenu. Toggles an independent boolean; for a
+ * one-of-N choice use DropdownMenuRadioGroup + DropdownMenuRadioItem instead.
+ *
+ * @example
+ * ```
+ * import {DropdownMenuCheckboxItem} from '@astryxdesign/core/DropdownMenu';
+ * <DropdownMenu button={{label: 'View'}}>
+ *   <DropdownMenuCheckboxItem
+ *     label="Show archived"
+ *     value={showArchived}
+ *     onChange={setShowArchived}
+ *   />
+ * </DropdownMenu>
+ * ```
+ */
+export declare function DropdownMenuCheckboxItem({ label, description, icon, value, onChange, isDisabled, hasCloseOnSelect, endContent, xstyle, className, style, ...rest }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
+export declare namespace DropdownMenuCheckboxItem {
+    var displayName: string;
+}
+//# sourceMappingURL=DropdownMenuCheckboxItem.d.ts.map

package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAY5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6D5C,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CACzD,SAAS,EACT,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAClD;IACC;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,6BAA6B,+BAwD/B;yBArEe,wBAAwB"}

package/dist/DropdownMenu/DropdownMenuCheckboxItem.js

@@ -0,0 +1,169 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file DropdownMenuCheckboxItem.tsx
+ * @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
+ * @output DropdownMenuCheckboxItem — a standalone checkable menu item.
+ * @position Sub-component; used inside DropdownMenu.
+ *
+ * A menu item that toggles an independent boolean (role="menuitemcheckbox").
+ * Unlike CheckboxInput, there is no nested native <input>: the row itself owns
+ * the role and aria-checked, per the WAI-ARIA menuitemcheckbox pattern.
+ * Keyboard navigation (arrows/typeahead) and Enter/Space activation come from
+ * the parent DropdownMenu's useListFocus + activation path, which matches
+ * menuitemcheckbox alongside plain menuitem rows.
+ *
+ * The square checkbox visual is decorative (aria-hidden) — the row owns the
+ * checked state. Its size is derived from the menu's item size (a `sm` menu
+ * gets the compact control; `md`/`lg` get the standard one) and it swaps to the
+ * inline-end of the row on coarse-pointer (touch) devices via CSS `order`, so
+ * it lands where selection toggles are conventionally placed on mobile. The
+ * checkmark uses the `check` icon from the active theme's icon registry.
+ */
+import { useCallback } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { Icon, renderIconSlot } from "../Icon/index.js";
+import { Item } from "../Item/index.js";
+import { useDropdownMenuContext } from "./DropdownMenuContext.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, durationVars, easeVars, borderVars } from "../theme/tokens.stylex.js";
+import { mergeProps, themeProps } from "../utils/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  root: {
+    kzqmXN: "xh8yej3",
+    kaIpWk: "x1ws5lxm",
+    kMwMTN: "x1tgivj0",
+    kWkggS: "xjbqb8w x1c52tdz x1uwx2nv",
+    kkrTdU: "x1ypdohk",
+    kI3sdo: "x1a2a7pz",
+    $$css: true
+  },
+  disabled: {
+    kSiTet: "xbyyjgo",
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  },
+  box: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmuXW: "x2lah0s",
+    kB7OPa: "x9f619",
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kaIpWk: "xx3sua9",
+    kMwMTN: "x17wrial",
+    k1ekBW: "xts7igz",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kayTVb: "x1g77sc7 xozvky",
+    keTefX: "x1lziwak x1jymrmb",
+    $$css: true
+  },
+  unchecked: {
+    kVAM5u: "xvy26l8",
+    kWkggS: "x10xzikg",
+    $$css: true
+  },
+  checked: {
+    kVAM5u: "xad5do",
+    kWkggS: "x1ewilqj",
+    $$css: true
+  }
+};
+const boxSizeStyles = {
+  sm: {
+    kzqmXN: "x1xp8n7a",
+    kZKoxP: "xmix8c7",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "x17z2i9w",
+    kZKoxP: "x17rw0jw",
+    $$css: true
+  }
+};
+/**
+ * A checkable dropdown menu item (role="menuitemcheckbox").
+ *
+ * Must be used inside a DropdownMenu. Toggles an independent boolean; for a
+ * one-of-N choice use DropdownMenuRadioGroup + DropdownMenuRadioItem instead.
+ *
+ * @example
+ * ```
+ * import {DropdownMenuCheckboxItem} from '@astryxdesign/core/DropdownMenu';
+ * <DropdownMenu button={{label: 'View'}}>
+ *   <DropdownMenuCheckboxItem
+ *     label="Show archived"
+ *     value={showArchived}
+ *     onChange={setShowArchived}
+ *   />
+ * </DropdownMenu>
+ * ```
+ */
+export function DropdownMenuCheckboxItem({
+  label,
+  description,
+  icon,
+  value,
+  onChange,
+  isDisabled = false,
+  hasCloseOnSelect = false,
+  endContent,
+  xstyle,
+  className,
+  style,
+  ...rest
+}) {
+  const ctx = useDropdownMenuContext();
+  const menuSize = ctx?.menuSize ?? 'md';
+  const controlSize = menuSize === 'sm' ? 'sm' : 'md';
+  const handleClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    onChange?.(!value);
+    if (hasCloseOnSelect) {
+      ctx?.closeMenu();
+    }
+  }, [isDisabled, onChange, value, hasCloseOnSelect, ctx]);
+  return /*#__PURE__*/_jsx(Item, {
+    ...rest,
+    role: "menuitemcheckbox",
+    "aria-checked": value,
+    tabIndex: isDisabled ? undefined : -1,
+    marker: /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...mergeProps(themeProps('dropdown-menu-checkbox', {
+        size: controlSize,
+        checked: value ? 'checked' : null,
+        disabled: isDisabled ? 'disabled' : null
+      }), stylex.props(styles.box, boxSizeStyles[controlSize], value ? styles.checked : styles.unchecked)),
+      children: value && /*#__PURE__*/_jsx(Icon, {
+        icon: "check",
+        size: "sm",
+        color: "inherit"
+      })
+    }),
+    startContent: icon ? renderIconSlot(icon, {
+      size: 'sm',
+      color: 'secondary'
+    }) : undefined,
+    label: label,
+    description: description,
+    endContent: endContent,
+    onClick: handleClick,
+    isDisabled: isDisabled,
+    xstyle: [styles.root, isDisabled && styles.disabled, xstyle],
+    ...mergeProps(themeProps('dropdown-menu-item', {
+      size: menuSize
+    }), {
+      className,
+      style
+    })
+  });
+}
+DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';

package/dist/DropdownMenu/DropdownMenuContext.d.ts

@@ -1,8 +1,10 @@
+/** Menu size, derived from the trigger button size. */
+export type DropdownMenuSize = 'sm' | 'md' | 'lg';
 export interface DropdownMenuContextValue {
     /** Close the menu and return focus to trigger */
     closeMenu: () => void;
     /** Menu size derived from button size */
-    menuSize: 'sm' | 'md' | 'lg';
+    menuSize: DropdownMenuSize;
 }
 export declare const DropdownMenuContext: import("react").Context<DropdownMenuContextValue | null>;
 /**
@@ -10,4 +12,18 @@ export declare const DropdownMenuContext: import("react").Context<DropdownMenuCo
  * Returns null outside of a DropdownMenu.
  */
 export declare function useDropdownMenuContext(): DropdownMenuContextValue | null;
+export interface DropdownMenuRadioGroupContextValue {
+    /** The currently selected value in the group. */
+    value: string | undefined;
+    /** Select a value. Called by a DropdownMenuRadioItem on activation. */
+    onChange: (value: string) => void;
+    /** Whether selecting an item should close the menu. @default true */
+    hasCloseOnSelect: boolean;
+}
+export declare const DropdownMenuRadioGroupContext: import("react").Context<DropdownMenuRadioGroupContextValue | null>;
+/**
+ * Read the enclosing radio group's selection state.
+ * Returns null when used outside a DropdownMenuRadioGroup.
+ */
+export declare function useDropdownMenuRadioGroupContext(): DropdownMenuRadioGroupContextValue | null;
 //# sourceMappingURL=DropdownMenuContext.d.ts.map

package/dist/DropdownMenu/DropdownMenuContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuContext.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,wBAAwB;IACvC,iDAAiD;IACjD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC;AAGvD;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE"}
+{"version":3,"file":"DropdownMenuContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuContext.tsx"],"names":[],"mappings":"AAgBA,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,WAAW,wBAAwB;IACvC,iDAAiD;IACjD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC;AAGvD;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,kCAAkC;IACjD,iDAAiD;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,6BAA6B,oEACsB,CAAC;AAGjE;;;GAGG;AACH,wBAAgB,gCAAgC,IAAI,kCAAkC,GAAG,IAAI,CAE5F"}

package/dist/DropdownMenu/DropdownMenuContext.js

@@ -12,6 +12,9 @@
  * items don't need to register themselves.
  */
 import { createContext, use } from 'react';
+
+/** Menu size, derived from the trigger button size. */
+
 export const DropdownMenuContext = /*#__PURE__*/createContext(null);
 DropdownMenuContext.displayName = 'DropdownMenuContext';
 
@@ -21,4 +24,19 @@ DropdownMenuContext.displayName = 'DropdownMenuContext';
  */
 export function useDropdownMenuContext() {
   return use(DropdownMenuContext);
+}
+
+// =============================================================================
+// Radio group coordination
+// =============================================================================
+
+export const DropdownMenuRadioGroupContext = /*#__PURE__*/createContext(null);
+DropdownMenuRadioGroupContext.displayName = 'DropdownMenuRadioGroupContext';
+
+/**
+ * Read the enclosing radio group's selection state.
+ * Returns null when used outside a DropdownMenuRadioGroup.
+ */
+export function useDropdownMenuRadioGroupContext() {
+  return use(DropdownMenuRadioGroupContext);
 }

package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @file DropdownMenuRadioGroup.tsx
+ * @output DropdownMenuRadioGroup — a single-select group of menu items.
+ * @position Sub-component; wraps DropdownMenuRadioItem inside a DropdownMenu.
+ *
+ * Owns single-selection state (value/onChange) for its child
+ * DropdownMenuRadioItems and exposes it via context. Renders role="group" with
+ * an accessible name so the radios are announced as a set. Keyboard navigation
+ * comes from the parent DropdownMenu's useListFocus, which matches
+ * menuitemradio rows.
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'> {
+    /**
+     * The currently selected value in the group. Pass `undefined` when nothing
+     * is selected yet.
+     */
+    value: string | undefined;
+    /**
+     * Callback fired when the selected value changes.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Accessible label for the group. Required (together with `aria-labelledby`,
+     * one of the two) so screen readers announce the radios as a named set,
+     * e.g. "Sort by".
+     */
+    'aria-label'?: string;
+    /**
+     * The id of an element that labels the group, as an alternative to
+     * `aria-label`.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Whether selecting a value closes the menu. Radio items default to closing
+     * on selection (a single-choice commit), unlike checkbox items which stay
+     * open.
+     * @default true
+     */
+    hasCloseOnSelect?: boolean;
+    /**
+     * The `DropdownMenuRadioItem`s that make up the group.
+     */
+    children: ReactNode;
+}
+/**
+ * A single-select group of radio menu items (role="group" of menuitemradio).
+ *
+ * @example
+ * ```
+ * import {
+ *   DropdownMenuRadioGroup,
+ *   DropdownMenuRadioItem,
+ * } from '@astryxdesign/core/DropdownMenu';
+ * <DropdownMenu button={{label: 'Sort'}}>
+ *   <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ *     <DropdownMenuRadioItem value="newest" label="Newest" />
+ *     <DropdownMenuRadioItem value="oldest" label="Oldest" />
+ *   </DropdownMenuRadioGroup>
+ * </DropdownMenu>
+ * ```
+ */
+export declare function DropdownMenuRadioGroup({ value, onChange, hasCloseOnSelect, children, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+export declare namespace DropdownMenuRadioGroup {
+    var displayName: string;
+}
+//# sourceMappingURL=DropdownMenuRadioGroup.d.ts.map

package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAgB7B;yBAxBe,sBAAsB"}

package/dist/DropdownMenu/DropdownMenuRadioGroup.js

@@ -0,0 +1,69 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file DropdownMenuRadioGroup.tsx
+ * @output DropdownMenuRadioGroup — a single-select group of menu items.
+ * @position Sub-component; wraps DropdownMenuRadioItem inside a DropdownMenu.
+ *
+ * Owns single-selection state (value/onChange) for its child
+ * DropdownMenuRadioItems and exposes it via context. Renders role="group" with
+ * an accessible name so the radios are announced as a set. Keyboard navigation
+ * comes from the parent DropdownMenu's useListFocus, which matches
+ * menuitemradio rows.
+ */
+import { useMemo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { spacingVars } from "../theme/tokens.stylex.js";
+import { mergeProps } from "../utils/index.js";
+import { DropdownMenuRadioGroupContext } from "./DropdownMenuContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A single-select group of radio menu items (role="group" of menuitemradio).
+ *
+ * @example
+ * ```
+ * import {
+ *   DropdownMenuRadioGroup,
+ *   DropdownMenuRadioItem,
+ * } from '@astryxdesign/core/DropdownMenu';
+ * <DropdownMenu button={{label: 'Sort'}}>
+ *   <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ *     <DropdownMenuRadioItem value="newest" label="Newest" />
+ *     <DropdownMenuRadioItem value="oldest" label="Oldest" />
+ *   </DropdownMenuRadioGroup>
+ * </DropdownMenu>
+ * ```
+ */
+export function DropdownMenuRadioGroup({
+  value,
+  onChange,
+  hasCloseOnSelect = true,
+  children,
+  className,
+  style,
+  ...rest
+}) {
+  const contextValue = useMemo(() => ({
+    value,
+    onChange,
+    hasCloseOnSelect
+  }), [value, onChange, hasCloseOnSelect]);
+  return /*#__PURE__*/_jsx("div", {
+    ...rest,
+    role: "group",
+    ...mergeProps({
+      className: "x78zum5 xdt5ytf x1lsbc85"
+    }, {
+      className,
+      style
+    }),
+    children: /*#__PURE__*/_jsx(DropdownMenuRadioGroupContext, {
+      value: contextValue,
+      children: children
+    })
+  });
+}
+DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup';

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @file DropdownMenuRadioItem.tsx
+ * @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
+ * @output DropdownMenuRadioItem — a single option in a radio group.
+ * @position Sub-component; must be used inside a DropdownMenuRadioGroup.
+ *
+ * A menu item representing one option in a single-select group
+ * (role="menuitemradio"). The row owns the role and aria-checked; there is no
+ * nested native <input> (per the WAI-ARIA menuitemradio pattern). Selection
+ * state + onChange come from DropdownMenuRadioGroupContext. Keyboard nav +
+ * Enter/Space activation come from the parent DropdownMenu.
+ *
+ * The round radio visual (circle + center dot) is decorative (aria-hidden) —
+ * the row owns the checked state. Its size is derived from the menu's item size
+ * and it swaps to the inline-end of the row on coarse-pointer (touch) devices
+ * via CSS `order`. The dot is a shaped element, not an icon (a filled circle
+ * has no registry glyph).
+ */
+import { type ReactNode } from 'react';
+import { type IconType } from '../Icon';
+import type { BaseProps } from '../BaseProps';
+export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'aria-checked' | 'tabIndex'> {
+    /**
+     * The value this item represents within its group. The group's `value`
+     * matches against this to determine the checked state.
+     */
+    value: string;
+    /**
+     * Primary label text identifying the option.
+     */
+    label: ReactNode;
+    /**
+     * Secondary description text displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Icon to display before the label. Accepts a semantic icon name (see
+     * `npx astryx docs icons`) or a rendered node.
+     */
+    icon?: ReactNode | IconType;
+    /**
+     * Whether this individual radio item is disabled. Disabled items stay
+     * focusable (via `aria-disabled`) so they remain discoverable by keyboard
+     * and assistive technology, but selection is blocked.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Content to render after the label and description, such as a badge or
+     * metadata.
+     */
+    endContent?: ReactNode;
+}
+/**
+ * A single option in a DropdownMenuRadioGroup (role="menuitemradio").
+ *
+ * @example
+ * ```
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ *   <DropdownMenuRadioItem value="newest" label="Newest" />
+ *   <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
+ * </DropdownMenuRadioGroup>
+ * ```
+ */
+export declare function DropdownMenuRadioItem({ value, label, description, icon, isDisabled, endContent, xstyle, className, style, ...rest }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+export declare namespace DropdownMenuRadioItem {
+    var displayName: string;
+}
+//# sourceMappingURL=DropdownMenuRadioItem.d.ts.map

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsE5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,0BAA0B,+BAiE5B;yBA5Ee,qBAAqB"}