@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/dist/CommandPalette/CommandPaletteList.js

@@ -19,7 +19,7 @@ import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { useCommandPaletteContext } from "./CommandPaletteContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   list: {
     kORKVm: "x1odjw0f",
@@ -61,7 +61,7 @@ export function CommandPaletteList({
   ...props
 }) {
   const ctx = useCommandPaletteContext();
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     id: ctx?.listId,
     role: "listbox",
@@ -69,6 +69,6 @@ export function CommandPaletteList({
     ...mergeProps(themeProps('command-palette-list'), stylex.props(styles.list, xstyle), className, style),
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 CommandPaletteList.displayName = 'CommandPaletteList';

package/dist/ContextMenu/ContextMenu.d.ts

@@ -1,10 +1,15 @@
 /**
  * @file ContextMenu.tsx
- * @input Uses React, StyleX, useLayer (fixed mode), useListFocus
+ * @input Uses React, StyleX, useLayer (context mode), useListFocus
  * @output Exports ContextMenu component
  * @position Core implementation; consumed by index.ts
  *
- * Right-click context menu positioned at cursor coordinates.
+ * Right-click context menu positioned at the cursor. The cursor point is
+ * captured as an offset *inside the trigger* and materialized as a zero-size
+ * anchor element, so the menu is positioned relative to the trigger's context
+ * (via CSS anchor positioning) rather than the viewport. It therefore follows
+ * the content on scroll and auto-flips at viewport edges, while still appearing
+ * under the cursor.
  * Reuses DropdownMenu item rendering and keyboard navigation.
  *
  * Supports two content modes with a single keyboard/focus path:

package/dist/ContextMenu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAsCtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAsB,EACtB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAwOlB;yBAtPe,WAAW"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAqDtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAsB,EACtB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA+QlB;yBA7Re,WAAW"}

package/dist/ContextMenu/ContextMenu.js

@@ -3,11 +3,16 @@
 
 /**
  * @file ContextMenu.tsx
- * @input Uses React, StyleX, useLayer (fixed mode), useListFocus
+ * @input Uses React, StyleX, useLayer (context mode), useListFocus
  * @output Exports ContextMenu component
  * @position Core implementation; consumed by index.ts
  *
- * Right-click context menu positioned at cursor coordinates.
+ * Right-click context menu positioned at the cursor. The cursor point is
+ * captured as an offset *inside the trigger* and materialized as a zero-size
+ * anchor element, so the menu is positioned relative to the trigger's context
+ * (via CSS anchor positioning) rather than the viewport. It therefore follows
+ * the content on scroll and auto-flips at viewport edges, while still appearing
+ * under the cursor.
  * Reuses DropdownMenu item rendering and keyboard navigation.
  *
  * Supports two content modes with a single keyboard/focus path:
@@ -35,11 +40,12 @@ import { useLongPress } from "../hooks/useLongPress.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const styles = {
   trigger: {
+    kVAEAm: "x1n2onr6",
     k7VYTy: "xpdipgo",
     $$css: true
   },
@@ -60,6 +66,7 @@ const styles = {
     k1ekBW: "x19991ni",
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
+    kfSwDN: "x87ps6o",
     $$css: true
   },
   popover: {
@@ -127,16 +134,22 @@ export function ContextMenu({
   const items = ('items' in props ? props.items : undefined) ?? [];
   const menuContent = 'menuContent' in props ? props.menuContent : undefined;
   const menuId = useId();
+  // Cursor point in the trigger's local coordinate space (offset from the
+  // trigger's top-left, in-flow). Stored here and written to the zero-size
+  // anchor element so the menu is positioned relative to the trigger context
+  // — it scrolls with the content instead of sitting at a fixed viewport point.
   const positionRef = useRef({
     x: 0,
     y: 0
   });
+  const cursorAnchorRef = useRef(null);
+  const triggerRef = useRef(null);
   // Element focused before the menu opened, restored when it closes so focus
   // does not fall to <body> after Escape or outside-click dismissal.
   const triggerFocusRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const layer = useLayer({
-    mode: 'fixed',
+    mode: 'context',
     onHide: useCallback(() => {
       setIsOpen(false);
       onOpenChange?.(false);
@@ -233,34 +246,46 @@ export function ContextMenu({
     }
     listNavKeyDown(e);
   }, [listNavKeyDown, typeahead]);
+
+  // Place the zero-size cursor anchor at a point in the trigger's local
+  // coordinate space and open the menu. Positioning the anchor inside the
+  // trigger (rather than storing viewport coordinates on the menu itself) is
+  // what makes the menu context-relative: it scrolls with the content and the
+  // browser auto-flips it against the viewport edges via CSS anchor positioning.
+  const openAtLocalPoint = useCallback((localX, localY, focusEl) => {
+    positionRef.current = {
+      x: localX,
+      y: localY
+    };
+    const anchorEl = cursorAnchorRef.current;
+    if (anchorEl) {
+      anchorEl.style.left = `${localX}px`;
+      anchorEl.style.top = `${localY}px`;
+    }
+    // Remember the element focused before opening so we can restore it on
+    // close (Escape or outside-click), instead of dropping focus to <body>.
+    triggerFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : focusEl;
+    layer.show();
+    requestAnimationFrame(() => focusFirst());
+  }, [layer, focusFirst]);
   const handleContextMenu = useCallback(e => {
     if (isDisabled) {
       return;
     }
     e.preventDefault();
+    const trigger = triggerRef.current;
+    const rect = trigger?.getBoundingClientRect();
     // A keyboard-initiated contextmenu (Shift+F10 / the Menu key) fires a
     // `contextmenu` event whose coordinates are (0, 0) in several browsers.
-    // Detect that and anchor the menu to the trigger's box instead, so the
-    // menu is reachable without a pointer (menus-8).
+    // Detect that and anchor the menu to the trigger's bottom-left instead,
+    // so the menu is reachable without a pointer (menus-8).
     const isKeyboardInvoked = e.clientX === 0 && e.clientY === 0 && e.detail === 0;
-    if (isKeyboardInvoked && e.currentTarget instanceof HTMLElement) {
-      const rect = e.currentTarget.getBoundingClientRect();
-      positionRef.current = {
-        x: rect.left,
-        y: rect.bottom
-      };
-    } else {
-      positionRef.current = {
-        x: e.clientX,
-        y: e.clientY
-      };
-    }
-    // Remember the element focused before opening so we can restore it on
-    // close (Escape or outside-click), instead of dropping focus to <body>.
-    triggerFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : e.currentTarget;
-    layer.show();
-    requestAnimationFrame(() => focusFirst());
-  }, [isDisabled, layer, focusFirst]);
+    // Convert the viewport cursor point into the trigger's local space so
+    // the anchor lives inside the (scrollable) trigger context.
+    const localX = isKeyboardInvoked || !rect ? 0 : e.clientX - rect.left;
+    const localY = isKeyboardInvoked || !rect ? rect?.height ?? 0 : e.clientY - rect.top;
+    openAtLocalPoint(localX, localY, e.currentTarget);
+  }, [isDisabled, openAtLocalPoint]);
 
   // Touch long-press invocation (menus-8). iOS Safari never synthesizes a
   // `contextmenu` event on long-press, so a context menu is otherwise
@@ -269,13 +294,9 @@ export function ContextMenu({
   const longPressHandlers = useLongPress({
     disabled: isDisabled,
     onLongPress: useCallback(point => {
-      positionRef.current = {
-        x: point.x,
-        y: point.y
-      };
-      layer.show();
-      requestAnimationFrame(() => focusFirst());
-    }, [layer, focusFirst])
+      const rect = triggerRef.current?.getBoundingClientRect();
+      openAtLocalPoint(rect ? point.x - rect.left : point.x, rect ? point.y - rect.top : point.y, triggerRef.current);
+    }, [openAtLocalPoint])
   });
   const popoverXstyle = menuWidth ? styles.popoverCustomWidth(menuWidth) : styles.popover;
   const contextValue = useMemo(() => ({
@@ -283,30 +304,42 @@ export function ContextMenu({
     menuSize: size
   }), [closeMenu, size]);
   const resolvedMenuContent = props.items !== undefined ? renderDropdownItems(items) : menuContent;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      ref: ref,
+  return /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV("div", {
+      ref: mergeRefs(ref, triggerRef),
       onContextMenu: handleContextMenu,
       ...longPressHandlers,
       "data-testid": testId,
       ...stylex.props(styles.trigger, ...(triggerXstyle ? Array.isArray(triggerXstyle) ? triggerXstyle : [triggerXstyle] : [])),
-      children: children
-    }), layer.render(/*#__PURE__*/_jsx("div", {
+      children: [children, /*#__PURE__*/_jsxDEV("span", {
+        ref: mergeRefs(cursorAnchorRef, layer.ref),
+        "aria-hidden": "true",
+        ...mergeProps({
+          className: "x10l6tqk xnalus7 xqtp20y x47corl"
+        }, {
+          style: {
+            left: `${positionRef.current.x}px`,
+            top: `${positionRef.current.y}px`
+          }
+        })
+      }, void 0, false)]
+    }, void 0, true), layer.render(/*#__PURE__*/_jsxDEV("div", {
       ref: listRef,
       id: menuId,
       role: "menu",
       "aria-label": label,
       onKeyDown: listKeyDown,
+      onContextMenu: e => e.preventDefault(),
       ...mergeProps(themeProps('context-menu'), stylex.props(styles.menu, xstyle), className, style),
-      children: /*#__PURE__*/_jsx(DropdownMenuContext, {
+      children: /*#__PURE__*/_jsxDEV(DropdownMenuContext, {
         value: contextValue,
         children: resolvedMenuContent
-      })
-    }), {
-      x: positionRef.current.x,
-      y: positionRef.current.y,
+      }, void 0, false)
+    }, void 0, false), {
+      placement: 'below',
+      alignment: 'start',
       xstyle: [popoverXstyle, layerAnimations.below]
     })]
-  });
+  }, void 0, true);
 }
 ContextMenu.displayName = 'ContextMenu';

package/dist/DateInput/DateInput.js

@@ -54,7 +54,7 @@ const sizeStyles = {
 
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * A date picker component combining a text input with a calendar popover.
  *
@@ -291,7 +291,7 @@ export function DateInput({
       commitPendingInput();
     }
   }, [popover, commitPendingInput, isEffectivelyDisabled]);
-  const inputWrapper = /*#__PURE__*/_jsxs("div", {
+  const inputWrapper = /*#__PURE__*/_jsxDEV("div", {
     ref: el => {
       popover.triggerRef(el);
       // Anchor + hover/focus listeners for the disabled-message tooltip.
@@ -304,10 +304,10 @@ export function DateInput({
       size,
       status: status?.type ?? null
     }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
-    children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
+    children: [inputGroup && /*#__PURE__*/_jsxDEV(VisuallyHidden, {
       id: inputLabelID,
       children: label
-    }), /*#__PURE__*/_jsx("button", {
+    }, void 0, false), /*#__PURE__*/_jsxDEV("button", {
       type: "button",
       onClick: handleToggle,
       disabled: isEffectivelyDisabled,
@@ -320,12 +320,12 @@ export function DateInput({
           className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
         }
       }[!!isEffectivelyDisabled << 0],
-      children: /*#__PURE__*/_jsx(Icon, {
+      children: /*#__PURE__*/_jsxDEV(Icon, {
         icon: "calendar",
         size: "sm",
         color: "secondary"
-      })
-    }), /*#__PURE__*/_jsx("input", {
+      }, void 0, false)
+    }, void 0, false), /*#__PURE__*/_jsxDEV("input", {
       ref: mergeRefs(ref, inputRef),
       id: id,
       type: "text",
@@ -368,30 +368,30 @@ export function DateInput({
           className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
         }
       }[!!isEffectivelyDisabled << 1 | !!!isInputValid << 0]
-    }), /*#__PURE__*/_jsx(VisuallyHidden, {
+    }, void 0, false), /*#__PURE__*/_jsxDEV(VisuallyHidden, {
       as: "div",
       role: "alert",
       "aria-live": "assertive",
       children: !isInputValid ? 'Invalid date' : ''
-    }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx("button", {
+    }, void 0, false), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsxDEV("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__*/_jsx(Icon, {
+      children: /*#__PURE__*/_jsxDEV(Icon, {
         icon: "close",
         size: "sm",
         color: "secondary"
-      })
-    }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+      }, void 0, false)
+    }, void 0, false), isBusy && /*#__PURE__*/_jsxDEV(Spinner, {
       size: "sm"
-    }), status && !inputGroup && /*#__PURE__*/_jsx(Icon, {
+    }, void 0, false), status && !inputGroup && /*#__PURE__*/_jsxDEV(Icon, {
       icon: statusIconMap[status.type],
       size: "md",
       color: statusIconColorMap[status.type]
-    }), popover.render(/*#__PURE__*/_jsx(Calendar, {
+    }, void 0, false), popover.render(/*#__PURE__*/_jsxDEV(Calendar, {
       handleRef: calendarRef,
       mode: "single",
       value: optimisticValue,
@@ -400,15 +400,15 @@ export function DateInput({
       max: max,
       dateConstraints: dateConstraints,
       numberOfMonths: numberOfMonths
-    }), {
+    }, void 0, false), {
       placement: 'below',
       alignment: 'start'
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
-  });
+  }, void 0, true);
   if (inputGroup) {
     return inputWrapper;
   }
-  return /*#__PURE__*/_jsx(Field, {
+  return /*#__PURE__*/_jsxDEV(Field, {
     label: label,
     isLabelHidden: isLabelHidden,
     description: description,
@@ -425,6 +425,6 @@ export function DateInput({
     labelTooltip: labelTooltip,
     width: width,
     children: inputWrapper
-  });
+  }, void 0, false);
 }
 DateInput.displayName = 'DateInput';

package/dist/DateRangeInput/DateRangeInput.js

@@ -29,7 +29,7 @@ import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const sizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -185,7 +185,7 @@ export function DateRangeInput({
     fireChange(null);
   }, [fireChange]);
   const triggerAriaLabel = value ? `${label}: ${displayValue}` : `${label}: ${placeholder}`;
-  return /*#__PURE__*/_jsxs(Field, {
+  return /*#__PURE__*/_jsxDEV(Field, {
     label: label,
     isLabelHidden: isLabelHidden,
     description: description,
@@ -201,7 +201,7 @@ export function DateRangeInput({
     } : undefined,
     labelTooltip: labelTooltip,
     width: width,
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ref: el => {
         popover.triggerRef(el);
         // Anchor + hover/focus listeners for the disabled-message tooltip.
@@ -214,7 +214,7 @@ export function DateRangeInput({
         size,
         status: status?.type ?? null
       }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("button", {
+      children: [/*#__PURE__*/_jsxDEV("button", {
         type: "button",
         onClick: handleToggle,
         disabled: isEffectivelyDisabled,
@@ -228,12 +228,12 @@ export function DateRangeInput({
             className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
           }
         }[!!isEffectivelyDisabled << 0],
-        children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsxDEV(Icon, {
           icon: "calendar",
           size: "sm",
           color: "secondary"
-        })
-      }), /*#__PURE__*/_jsx("button", {
+        }, void 0, false)
+      }, void 0, false), /*#__PURE__*/_jsxDEV("button", {
         ref: ref,
         id: id,
         type: "button",
@@ -267,30 +267,30 @@ export function DateRangeInput({
           }
         }[!!!displayValue << 1 | !!isEffectivelyDisabled << 0],
         children: displayValue || placeholder
-      }), hasClear && value !== null && !isEffectivelyDisabled && /*#__PURE__*/_jsx("button", {
+      }, void 0, false), hasClear && value !== null && !isEffectivelyDisabled && /*#__PURE__*/_jsxDEV("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__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsxDEV(Icon, {
           icon: "close",
           size: "sm",
           color: "secondary"
-        })
-      }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+        }, void 0, false)
+      }, void 0, false), isBusy && /*#__PURE__*/_jsxDEV(Spinner, {
         size: "sm"
-      }), status && /*#__PURE__*/_jsx(Icon, {
+      }, void 0, false), status && /*#__PURE__*/_jsxDEV(Icon, {
         icon: statusIconMap[status.type],
         size: "md",
         color: statusIconColorMap[status.type]
-      })]
-    }), popover.render(/*#__PURE__*/_jsxs("div", {
+      }, void 0, false)]
+    }, void 0, true), popover.render(/*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x78zum5"
       },
-      children: [presets && presets.length > 0 && /*#__PURE__*/_jsx("div", {
+      children: [presets && presets.length > 0 && /*#__PURE__*/_jsxDEV("div", {
         role: "group",
         "aria-label": "Preset date ranges",
         ...{
@@ -299,7 +299,7 @@ export function DateRangeInput({
         children: presets.map(preset => {
           const presetRange = preset.getRange();
           const isActive = isRangeEqual(value, presetRange);
-          return /*#__PURE__*/_jsx("button", {
+          return /*#__PURE__*/_jsxDEV("button", {
             type: "button"
             // These presets are independent action buttons navigated by
             // Tab, not a single-tab-stop listbox — so they are a labeled
@@ -318,9 +318,9 @@ export function DateRangeInput({
               }
             }[!!isActive << 0],
             children: preset.label
-          }, preset.label);
+          }, preset.label, false);
         })
-      }), /*#__PURE__*/_jsx(Calendar, {
+      }, void 0, false), /*#__PURE__*/_jsxDEV(Calendar, {
         mode: "range",
         value: value ?? undefined,
         onChange: handleRangeSelect,
@@ -328,11 +328,11 @@ export function DateRangeInput({
         max: max,
         dateConstraints: dateConstraints,
         numberOfMonths: numberOfMonths
-      })]
-    }), {
+      }, void 0, false)]
+    }, void 0, true), {
       placement: 'below',
       alignment: 'start'
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
-  });
+  }, void 0, true);
 }
 DateRangeInput.displayName = 'DateRangeInput';

package/dist/DateTimeInput/DateTimeInput.d.ts

@@ -6,6 +6,8 @@ export type ISODateTimeString = string & {
 };
 export type DateTimeInputHourFormat = '12h' | '24h';
 export type DateTimeInputSize = 'sm' | 'md' | 'lg';
+/** Supported minute increments for arrow-key stepping of the time field. */
+export type DateTimeInputTimeIncrement = 1 | 5 | 10 | 15 | 30;
 export type { InputStatus as DateTimeInputStatus, InputStatusType as DateTimeInputStatusType, } from '../Field';
 export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultValue'> {
     /** Ref forwarded to the date input element */
@@ -104,10 +106,11 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
      */
     hourFormat?: DateTimeInputHourFormat;
     /**
-     * Time increment in minutes when using arrow keys in the time input.
+     * Minutes added or subtracted when stepping the time field with the arrow
+     * keys. Constrained to a set of sensible increments.
      * @default 1
      */
-    timeIncrement?: number;
+    timeIncrement?: DateTimeInputTimeIncrement;
     /**
      * Whether to show a clear button when a value is set.
      * @default false

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}