@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/dist/DateTimeInput/DateTimeInput.js

@@ -32,9 +32,7 @@ import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime
 import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
-
-/** Supported minute increments for arrow-key stepping of the time field. */
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   row: {
     k1xSpc: "x78zum5",
@@ -457,7 +455,7 @@ export function DateTimeInput({
     inputRef: timeInputRef,
     disabled: isEffectivelyDisabled
   });
-  return /*#__PURE__*/_jsxDEV(Field, {
+  return /*#__PURE__*/_jsxs(Field, {
     label: label,
     isLabelHidden: isLabelHidden,
     description: description,
@@ -474,17 +472,17 @@ export function DateTimeInput({
     labelTooltip: labelTooltip,
     statusVariant: "detached",
     width: width,
-    children: [/*#__PURE__*/_jsxDEV("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
       ref: disabledMessageTooltip.ref,
       ...rest,
       ...mergeProps(themeProps('date-time-input', {
         size,
         status: status?.type ?? null
       }), stylex.props(styles.row, xstyle), className, style),
-      children: [/*#__PURE__*/_jsxDEV("div", {
+      children: [/*#__PURE__*/_jsxs("div", {
         ref: popover.triggerRef,
         ...stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.dateWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type]),
-        children: [/*#__PURE__*/_jsxDEV("button", {
+        children: [/*#__PURE__*/_jsx("button", {
           type: "button",
           onClick: handleCalendarToggle,
           disabled: isEffectivelyDisabled,
@@ -497,12 +495,12 @@ export function DateTimeInput({
               className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
             }
           }[!!isEffectivelyDisabled << 0],
-          children: /*#__PURE__*/_jsxDEV(Icon, {
+          children: /*#__PURE__*/_jsx(Icon, {
             icon: "calendar",
             size: "sm",
             color: "secondary"
-          }, void 0, false)
-        }, void 0, false), /*#__PURE__*/_jsxDEV("input", {
+          })
+        }), /*#__PURE__*/_jsx("input", {
           ref: mergeRefs(ref, dateInputRef),
           id: dateInputId,
           type: "text",
@@ -544,45 +542,45 @@ export function DateTimeInput({
               className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
             }
           }[!!isEffectivelyDisabled << 1 | !!!isDateInputValid << 0]
-        }, void 0, false), /*#__PURE__*/_jsxDEV(VisuallyHidden, {
+        }), /*#__PURE__*/_jsx(VisuallyHidden, {
           as: "div",
           role: "alert",
           "aria-live": "assertive",
           children: !isDateInputValid ? 'Invalid date' : ''
-        }, void 0, false), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsxDEV("button", {
+        }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx("button", {
           type: "button",
           onClick: handleClear,
           "aria-label": `Clear ${label}`,
           ...{
             className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
           },
-          children: /*#__PURE__*/_jsxDEV(Icon, {
+          children: /*#__PURE__*/_jsx(Icon, {
             icon: "close",
             size: "sm",
             color: "secondary"
-          }, void 0, false)
-        }, void 0, false), isBusy && /*#__PURE__*/_jsxDEV(Spinner, {
+          })
+        }), isBusy && /*#__PURE__*/_jsx(Spinner, {
           size: "sm"
-        }, void 0, false), status && /*#__PURE__*/_jsxDEV(Icon, {
+        }), status && /*#__PURE__*/_jsx(Icon, {
           icon: statusIconMap[status.type],
           size: "md",
           color: statusIconColorMap[status.type]
-        }, void 0, false)]
-      }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
         ref: timeContainerRef,
         onClick: handleTimeWrapperClick,
         onMouseUp: handleTimeWrapperMouseUp,
         ...stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.timeWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type]),
-        children: [/*#__PURE__*/_jsxDEV("div", {
+        children: [/*#__PURE__*/_jsx("div", {
           ...{
             className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"
           },
-          children: /*#__PURE__*/_jsxDEV(Icon, {
+          children: /*#__PURE__*/_jsx(Icon, {
             icon: "clock",
             size: "sm",
             color: "secondary"
-          }, void 0, false)
-        }, void 0, false), /*#__PURE__*/_jsxDEV("input", {
+          })
+        }), /*#__PURE__*/_jsx("input", {
           ref: timeInputRef,
           id: timeInputId,
           type: "text",
@@ -600,10 +598,8 @@ export function DateTimeInput({
           "aria-disabled": showsDisabledMessage ? 'true' : undefined,
           readOnly: showsDisabledMessage || undefined,
           "aria-label": timeLabel ?? `${label} time`,
-          "aria-describedby": ariaDescribedBy,
           "aria-required": isRequired === true ? 'true' : undefined,
           "aria-invalid": status?.type === 'error' || !isTimeInputValid ? 'true' : undefined,
-          "aria-busy": isBusy || undefined,
           ...{
             0: {
               className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
@@ -618,14 +614,14 @@ export function DateTimeInput({
               className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
             }
           }[!!isEffectivelyDisabled << 1 | !!!isTimeInputValid << 0]
-        }, void 0, false), /*#__PURE__*/_jsxDEV(VisuallyHidden, {
+        }), /*#__PURE__*/_jsx(VisuallyHidden, {
           as: "div",
           role: "alert",
           "aria-live": "assertive",
           children: !isTimeInputValid ? 'Invalid time' : ''
-        }, void 0, false)]
-      }, void 0, true)]
-    }, void 0, true), popover.render(/*#__PURE__*/_jsxDEV(Calendar, {
+        })]
+      })]
+    }), popover.render(/*#__PURE__*/_jsx(Calendar, {
       handleRef: calendarRef,
       mode: "single",
       value: valueParts.date,
@@ -634,10 +630,10 @@ export function DateTimeInput({
       max: calendarMax,
       dateConstraints: dateConstraints,
       numberOfMonths: numberOfMonths
-    }, void 0, false), {
+    }), {
       placement: 'below',
       alignment: 'start'
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
-  }, void 0, true);
+  });
 }
 DateTimeInput.displayName = 'DateTimeInput';

package/dist/DateTimeInput/index.d.ts

@@ -5,5 +5,5 @@
  * @position Package entry point for DateTimeInput
  */
 export { DateTimeInput } from './DateTimeInput';
-export type { DateTimeInputProps, DateTimeInputSize, DateTimeInputHourFormat, DateTimeInputTimeIncrement, DateTimeInputStatus, DateTimeInputStatusType, ISODateTimeString, } from './DateTimeInput';
+export type { DateTimeInputProps, DateTimeInputSize, DateTimeInputHourFormat, DateTimeInputStatus, DateTimeInputStatusType, ISODateTimeString, } from './DateTimeInput';
 //# sourceMappingURL=index.d.ts.map

package/dist/DateTimeInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,0BAA0B,EAC1B,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}

package/dist/Dialog/Dialog.js

@@ -32,7 +32,7 @@ import { themeProps } from "../utils/themeProps.js";
  * Returns a normalized vector from the trigger element toward the viewport
  * center, scaled to the given distance.
  */
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function getDialogDirection(triggerEl, distance = 16) {
   const rect = triggerEl.getBoundingClientRect();
   const dx = rect.left + rect.width / 2 - window.innerWidth / 2;
@@ -342,7 +342,7 @@ export function Dialog({
   };
 
   // Shared inner content wrapper
-  const innerContent = /*#__PURE__*/_jsxDEV("div", {
+  const innerContent = /*#__PURE__*/_jsx("div", {
     ...stylex.props(styles.inner, ...container(useThemeDefault ? {
       useThemeDefault: 'dialog',
       maxHeight: isFullscreen ? undefined : typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
@@ -353,24 +353,24 @@ export function Dialog({
       paddingOuterY: paddingToken,
       maxHeight: isFullscreen ? undefined : typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
     }), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding]),
-    children: /*#__PURE__*/_jsxDEV(DialogContext, {
+    children: /*#__PURE__*/_jsx(DialogContext, {
       value: dialogContextValue,
       children: children
-    }, void 0, false)
-  }, void 0, false);
+    })
+  });
 
   // --- Inline rendering path (for documentation previews) ---
   if (isInline) {
     if (!isOpen) {
       return null;
     }
-    return /*#__PURE__*/_jsxDEV("div", {
+    return /*#__PURE__*/_jsx("div", {
       ...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
-    }, void 0, false);
+    });
   }
 
   // --- Standard modal rendering path ---
@@ -381,7 +381,7 @@ export function Dialog({
     open: _open,
     ...safeProps
   } = props;
-  return /*#__PURE__*/_jsxDEV("dialog", {
+  return /*#__PURE__*/_jsx("dialog", {
     ref: mergeRefs(ref, dialogRef),
     onClick: handleClick,
     onCancel: handleCancel,
@@ -392,6 +392,6 @@ export function Dialog({
     }), stylex.props(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && dynamicStyles.position(position?.top, position?.right, position?.bottom, position?.left), isFullscreen && styles.fullscreen, xstyle), className, style),
     ...safeProps,
     children: innerContent
-  }, void 0, false);
+  });
 }
 Dialog.displayName = 'Dialog';

package/dist/Dialog/DialogHeader.js

@@ -25,7 +25,7 @@ import { Icon } from "../Icon/index.js";
 import { Heading } from "../Heading/Heading.js";
 import { Text } from "../Text/Text.js";
 import { useDialogContext } from "./DialogContext.js";
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   titleFocusable: {
     kI3sdo: "x1a2a7pz",
@@ -77,38 +77,38 @@ export function DialogHeader({
       titleRef.current.focus();
     }
   }, [shouldAutoFocus]);
-  return /*#__PURE__*/_jsxDEV(LayoutHeader, {
+  return /*#__PURE__*/_jsx(LayoutHeader, {
     ref: ref,
     hasDivider: hasDivider,
     xstyle: xstyle,
     className: className,
     style: style,
-    children: /*#__PURE__*/_jsxDEV("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       ...{
         className: "x78zum5 x1cy8zhl x1qughib xjcht0a"
       },
-      children: [startContent && /*#__PURE__*/_jsxDEV("div", {
+      children: [startContent && /*#__PURE__*/_jsx("div", {
         ...{
           className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
         },
         children: startContent
-      }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
+      }), /*#__PURE__*/_jsxs("div", {
         ...{
           className: "x98rzlu xeuugli xqixskq"
         },
-        children: [/*#__PURE__*/_jsxDEV(Heading, {
+        children: [/*#__PURE__*/_jsx(Heading, {
           ref: titleRef,
           level: 2,
           tabIndex: -1,
           xstyle: styles.titleFocusable,
           children: title
-        }, void 0, false), subtitle && /*#__PURE__*/_jsxDEV(Text, {
+        }), subtitle && /*#__PURE__*/_jsx(Text, {
           type: "body",
           size: "sm",
           color: "secondary",
           children: subtitle
-        }, void 0, false)]
-      }, void 0, true), (endContent || onOpenChange) && /*#__PURE__*/_jsxDEV("div", {
+        })]
+      }), (endContent || onOpenChange) && /*#__PURE__*/_jsxs("div", {
         ...{
           0: {
             className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
@@ -117,21 +117,21 @@ export function DialogHeader({
             className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f x3kzqx6"
           }
         }[!!onOpenChange << 0],
-        children: [endContent, onOpenChange && /*#__PURE__*/_jsxDEV(Button, {
+        children: [endContent, onOpenChange && /*#__PURE__*/_jsx(Button, {
           variant: "ghost",
           label: "Close",
           tooltip: "Close",
-          icon: /*#__PURE__*/_jsxDEV(Icon, {
+          icon: /*#__PURE__*/_jsx(Icon, {
             icon: "close",
             color: "inherit"
-          }, void 0, false),
+          }),
           onClick: () => {
             onOpenChange?.(false);
           },
           isIconOnly: true
-        }, void 0, false)]
-      }, void 0, true)]
-    }, void 0, true)
-  }, void 0, false);
+        })]
+      })]
+    })
+  });
 }
 DialogHeader.displayName = 'DialogHeader';

package/dist/Dialog/useImperativeDialog.js

@@ -21,7 +21,7 @@
  */
 import { useState, useCallback, useMemo } from 'react';
 import { Dialog } from "./Dialog.js";
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Imperative dialog — show/hide without managing state.
  *
@@ -51,7 +51,7 @@ export function useImperativeDialog(defaultOptions) {
   const hide = useCallback(() => {
     setIsOpen(false);
   }, []);
-  const element = useMemo(() => /*#__PURE__*/_jsxDEV(Dialog, {
+  const element = useMemo(() => /*#__PURE__*/_jsx(Dialog, {
     isOpen: isOpen,
     onOpenChange: open => {
       if (!open) {
@@ -61,7 +61,7 @@ export function useImperativeDialog(defaultOptions) {
     ...(defaultOptions ?? {}),
     ...(options ?? {}),
     children: content
-  }, void 0, false), [isOpen, content, options, defaultOptions]);
+  }), [isOpen, content, options, defaultOptions]);
   return {
     show,
     hide,

package/dist/Divider/Divider.js

@@ -37,7 +37,7 @@ import { themeProps } from "../utils/themeProps.js";
 /**
  * Divider variant type. Extensible via module augmentation of DividerVariantMap.
  */
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const baseStyles = {
   horizontal: {
     k1xSpc: "x78zum5",
@@ -113,7 +113,7 @@ export function Divider({
   ...props
 }) {
   const isHorizontal = orientation === 'horizontal';
-  return /*#__PURE__*/_jsxDEV("div", {
+  return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     role: "separator",
     "aria-orientation": orientation,
@@ -122,9 +122,9 @@ export function Divider({
       orientation
     }), stylex.props(isHorizontal ? baseStyles.horizontal : baseStyles.vertical, isFullBleed && (isHorizontal ? fullBleedStyles.horizontal : fullBleedStyles.vertical), xstyle), className, style),
     ...props,
-    children: [/*#__PURE__*/_jsxDEV("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       ...stylex.props(isHorizontal ? lineStyles.horizontalLine : lineStyles.verticalLine, lineStyles[variant])
-    }, void 0, false), label && /*#__PURE__*/_jsxDEV("div", {
+    }), label && /*#__PURE__*/_jsx("div", {
       ...{
         0: {
           className: "x2lah0s xrrkdod x141an7d x1ltkj2j xv1l7n4"
@@ -134,9 +134,9 @@ export function Divider({
         }
       }[!!!isHorizontal << 0],
       children: label
-    }, void 0, false), label && /*#__PURE__*/_jsxDEV("div", {
+    }), label && /*#__PURE__*/_jsx("div", {
       ...stylex.props(isHorizontal ? lineStyles.horizontalLine : lineStyles.verticalLine, lineStyles[variant])
-    }, void 0, false)]
-  }, void 0, true);
+    })]
+  });
 }
 Divider.displayName = 'Divider';

package/dist/DropdownMenu/DropdownMenu.js

@@ -35,7 +35,7 @@ import "../theme/tokens.stylex.js";
 import { spacingVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   dropdown: {
     kB7OPa: "x9f619",
@@ -273,11 +273,11 @@ export function DropdownMenu({
 
   // Icon-only
   const isIconOnly = button.isIconOnly === true;
-  const resolvedEndContent = button.endContent ?? (hasChevron && !isIconOnly ? /*#__PURE__*/_jsxDEV(Icon, {
+  const resolvedEndContent = button.endContent ?? (hasChevron && !isIconOnly ? /*#__PURE__*/_jsx(Icon, {
     icon: "chevronDown",
     size: "sm",
     color: "inherit"
-  }, void 0, false) : undefined);
+  }) : undefined);
   const popoverXstyle = menuWidth ? styles.popoverCustomWidth(menuWidth) : styles.popover;
   const popoverGapStyle = placement === 'above' || placement === 'below' ? styles.popoverBlockGap : styles.popoverInlineGap;
 
@@ -289,8 +289,8 @@ export function DropdownMenu({
 
   // Resolve menu content: data-driven items become components
   const menuContent = props.items !== undefined ? renderDropdownItems(items) : children;
-  return /*#__PURE__*/_jsxDEV(_Fragment, {
-    children: [/*#__PURE__*/_jsxDEV(Button, {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
       ...button,
       ref: el => {
         buttonRef.current = el;
@@ -312,7 +312,7 @@ export function DropdownMenu({
       "aria-expanded": isOpen,
       "aria-controls": menuId,
       "data-testid": testId
-    }, void 0, false), popover.render(/*#__PURE__*/_jsxDEV("div", {
+    }), popover.render(/*#__PURE__*/_jsx("div", {
       ref: listRef,
       id: menuId,
       role: "menu"
@@ -323,15 +323,15 @@ export function DropdownMenu({
       "aria-label": button.label,
       onKeyDown: listKeyDown,
       ...mergeProps(themeProps('dropdown-menu'), stylex.props(styles.dropdown, xstyle), className, style),
-      children: /*#__PURE__*/_jsxDEV(DropdownMenuContext, {
+      children: /*#__PURE__*/_jsx(DropdownMenuContext, {
         value: contextValue,
         children: menuContent
-      }, void 0, false)
-    }, void 0, false), {
+      })
+    }), {
       placement,
       alignment: 'start',
       xstyle: [popoverXstyle, popoverGapStyle, layerAnimations[placement]]
     })]
-  }, void 0, true);
+  });
 }
 DropdownMenu.displayName = 'DropdownMenu';

package/dist/DropdownMenu/DropdownMenuItem.d.ts

@@ -19,9 +19,9 @@
  * - /packages/cli/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
+import type { StyleXStyles } from '@stylexjs/stylex';
 import { type IconType } from '../Icon';
-import type { BaseProps } from '../BaseProps';
-export interface DropdownMenuItemProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+export interface DropdownMenuItemProps {
     /** Icon to display before the label. */
     icon?: ReactNode | IconType;
     /** Primary label text. */
@@ -34,6 +34,21 @@ export interface DropdownMenuItemProps extends Pick<BaseProps, 'xstyle' | 'class
     isDisabled?: boolean;
     /** Additional content to render after the label/description. */
     endContent?: ReactNode;
+    /**
+     * StyleX styles for layout customization (margins, positioning, sizing).
+     * Must be a `stylex.create()` value — not an inline style object.
+     *
+     * @example
+     * ```
+     * const styles = stylex.create({ wrapper: { marginTop: 8 } });
+     * <DropdownMenuItem xstyle={styles.wrapper} />
+     * ```
+     */
+    xstyle?: StyleXStyles;
+    /** CSS class name(s) appended to the root element. */
+    className?: string;
+    /** Inline styles applied to the root element. */
+    style?: React.CSSProperties;
 }
 /**
  * An interactive dropdown menu item with icon, label, and optional description.

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,+BAsCvB;yBAhDe,gBAAgB"}
+{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiDtD,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,+BAsCvB;yBAhDe,gBAAgB"}

package/dist/DropdownMenu/DropdownMenuItem.js

@@ -31,7 +31,7 @@ import { colorVars, spacingVars, typographyVars, typeScaleVars } from "../theme/
 import { mergeProps } from "../utils/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const menuItemStyles = {
   root: {
     kB7OPa: "x9f619",
@@ -102,7 +102,7 @@ export function DropdownMenuItem({
     onClick();
     ctx?.closeMenu();
   }, [isDisabled, onClick, ctx]);
-  return /*#__PURE__*/_jsxDEV(Item, {
+  return /*#__PURE__*/_jsx(Item, {
     role: "menuitem",
     tabIndex: isDisabled ? undefined : -1,
     startContent: icon ? renderIconSlot(icon, {
@@ -121,6 +121,6 @@ export function DropdownMenuItem({
       className,
       style
     })
-  }, void 0, false);
+  });
 }
 DropdownMenuItem.displayName = 'DropdownMenuItem';

package/dist/DropdownMenu/renderDropdownItems.js

@@ -11,7 +11,7 @@ import { Divider } from "../Divider/index.js";
 import { DropdownMenuItem } from "./DropdownMenuItem.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, typographyVars, typeScaleVars, colorVars } from "../theme/tokens.stylex.js";
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   divider: {
     kqGvvJ: "xsq74q5",
@@ -34,33 +34,33 @@ export function renderDropdownItems(items) {
   for (let i = 0; i < items.length; i++) {
     const option = items[i];
     if ('type' in option && option.type === 'divider') {
-      elements.push(/*#__PURE__*/_jsxDEV(Divider, {
+      elements.push(/*#__PURE__*/_jsx(Divider, {
         xstyle: styles.divider
-      }, `divider-${i}`, false));
+      }, `divider-${i}`));
     } else if ('type' in option && option.type === 'section') {
-      elements.push(/*#__PURE__*/_jsxDEV("div", {
+      elements.push(/*#__PURE__*/_jsxs("div", {
         role: "group",
         "aria-label": option.title,
-        children: [option.title && /*#__PURE__*/_jsxDEV("div", {
+        children: [option.title && /*#__PURE__*/_jsx("div", {
           ...{
             className: "xu0wf1k xf314gf x9ynric x141an7d x1ltkj2j xv1l7n4 x87ps6o"
           },
           "aria-hidden": "true",
           children: option.title
-        }, void 0, false), option.items.map(item => /*#__PURE__*/_jsxDEV(DropdownMenuItem, {
+        }), option.items.map(item => /*#__PURE__*/_jsx(DropdownMenuItem, {
           icon: item.icon,
           label: item.label,
           onClick: item.onClick,
           isDisabled: item.isDisabled
-        }, getItemKey(item), false))]
-      }, getSectionKey(option, i), true));
+        }, getItemKey(item)))]
+      }, getSectionKey(option, i)));
     } else if (!('type' in option)) {
-      elements.push(/*#__PURE__*/_jsxDEV(DropdownMenuItem, {
+      elements.push(/*#__PURE__*/_jsx(DropdownMenuItem, {
         icon: option.icon,
         label: option.label,
         onClick: option.onClick,
         isDisabled: option.isDisabled
-      }, getItemKey(option), false));
+      }, getItemKey(option)));
     }
   }
   return elements;

package/dist/EmptyState/EmptyState.js

@@ -20,7 +20,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   container: {
     k1xSpc: "x78zum5",
@@ -75,17 +75,17 @@ export function EmptyState({
   ...props
 }) {
   const HeadingTag = `h${headingLevel}`;
-  return /*#__PURE__*/_jsxDEV("div", {
+  return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     role: "status",
     ...mergeProps(themeProps('empty-state', {
       variant: isCompact ? 'compact' : null
     }), stylex.props(styles.container, isCompact && styles.containerCompact, xstyle), className, style),
     ...props,
-    children: [icon != null && /*#__PURE__*/_jsxDEV("div", {
+    children: [icon != null && /*#__PURE__*/_jsx("div", {
       "aria-hidden": "true",
       children: icon
-    }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       ...{
         className: "x78zum5 xdt5ytf x6s0dn4 xxc7z9f"
       },
@@ -102,7 +102,7 @@ export function EmptyState({
       // <p> cannot legally contain block children, which causes hydration
       // mismatches. The StyleX style sets margin: 0, so appearance is
       // unchanged.
-      _jsxDEV("div", {
+      _jsx("div", {
         ...{
           0: {
             className: "x1ghz6dp xjb2p0i xjm74w1 x1sodnla xw6l6zx xv1l7n4"
@@ -112,8 +112,8 @@ export function EmptyState({
           }
         }[!!isCompact << 0],
         children: description
-      }, void 0, false)]
-    }, void 0, true), actions != null && /*#__PURE__*/_jsxDEV("div", {
+      })]
+    }), actions != null && /*#__PURE__*/_jsx("div", {
       ...{
         0: {
           className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj xcsaf9d"
@@ -123,7 +123,7 @@ export function EmptyState({
         }
       }[!!isCompact << 0],
       children: actions
-    }, void 0, false)]
-  }, void 0, true);
+    })]
+  });
 }
 EmptyState.displayName = 'EmptyState';